/* Homepage 2026 (Guitar Center layout, mockup v6.5 from ___updates/new-homepage, Oct 2026).
   Every rule is scoped under #hp26 (the page wrapper in _pages/_homepage2026/index.php) so the site's
   header, nav and footer keep their own styles. Images: /_pages/images/homepage2026/. Data/renderers:
   js/homepage2026-data.js + js/homepage2026.js. The mockup's own nav, footer and dark-mode preview
   switch are not used - the site's header.php/footer.php provide those. */

/* undo base.css defaults (p/li 15px, h2 36px/800, li margin 10px, red links) inside the page */
#hp26 h1,#hp26 h2,#hp26 h3,#hp26 h4,#hp26 h5,#hp26 p,#hp26 ul,#hp26 li{margin:0;padding:0;font-size:inherit;line-height:inherit}
#hp26 h1,#hp26 h2,#hp26 h3,#hp26 h4,#hp26 h5{font-weight:700}
#hp26 a{color:inherit;text-decoration:none}
#hp26 .newsletter-form .response{margin-top:10px;text-align:left}

@font-face {font-family:"Tachyon";
  src:local("Tachyon"), local("Tachyon Regular"),
      url("/css/fonts/tachyon.woff2") format("woff2"),
      url("/css/fonts/tachyon.woff")  format("woff");
  font-display:swap;}
#hp26 {--bg:#fff;
  --ink:#111;
  --ink-2:#555;
  --ink-3:#767676;
  --red:#c8050a;
  --red-hi:#a30408;
  --grey-1:#f2f2f2;
  --grey-2:#f5f5f5;
  --line:#e5e5e5;
  --dark:#111;
  --navy:#050b16;
  --surface:#fff;      
  --band:#111;         
  --band-ink:#fff;
  --r:4px;
  --maxw:1494px;
  --gut:12px;
  --gap:16px;
  --tgap:12px;
  --body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --display:"Tachyon","Trade Gothic Next LT Pro Condensed","Archivo Narrow","Oswald","Helvetica Neue",Arial,sans-serif;}
#hp26 *,
#hp26 *::before,
#hp26 *::after {box-sizing:border-box}
#hp26 {margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.45;overflow-x:hidden}
#hp26 .gc-wrap {width:100%;max-width:calc(var(--maxw) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
#hp26 .sec {padding-top:36px}#hp26 .hero-wrap + .sec {margin-top:0}
#hp26 .sec-1 {padding-top:56px}
#hp26 .sec-1 .sec-head h2 {font-size:28px}
#hp26 .sec-3 {padding-top:28px}
#hp26 .sec-3 .sec-head h2 {font-size:20px}
#hp26 .hero-wrap + .sec-1,
#hp26 .skinny-wrap + .sec-1 {padding-top:48px}
#hp26 .btn {display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:var(--r);font:700 14px/1 var(--body);border:2px solid transparent;cursor:pointer;white-space:nowrap}
#hp26 a.btn-red,
#hp26 button.btn-red {background:var(--red);color:#fff}
#hp26 a.btn-red:hover,
#hp26 button.btn-red:hover {background:var(--red-hi)}
#hp26 a.btn-outline {background:#fff;color:var(--red);border-color:var(--red)}
#hp26 a.btn-outline:hover {background:var(--red);color:#fff}
#hp26 .rlink {color:var(--red);font-weight:700;font-size:14px}
#hp26 .rlink::after {content:" \203A";font-size:1.1em}
#hp26 .rlink:hover {text-decoration:underline}
#hp26 .catstrip {background:var(--grey-1);border-bottom:1px solid var(--line)}
#hp26 .catstrip-in {display:flex;justify-content:center;align-items:center;gap:16px}
#hp26 .catstrip ul {display:flex;margin:0;padding:0;list-style:none}
#hp26 .cs-left {overflow-x:auto;scrollbar-width:none;min-width:0}
#hp26 .cs-left::-webkit-scrollbar {display:none}
#hp26 .cs-left li {flex:0 0 auto}
#hp26 .catstrip a {display:block;padding:14.5px 10px;font-size:13px;font-weight:600;white-space:nowrap}
#hp26 .catstrip a:hover {text-decoration:underline}
#hp26 .catstrip a.cs-deal {color:var(--red);font-weight:700}
@media (max-width:1360px) {
#hp26 .catstrip a {padding-left:7px;padding-right:7px}
#hp26 .catstrip-in {gap:8px}
}
#hp26 .hero-wrap {padding-top:0}
#hp26 .hero-banner {display:block;border-radius:var(--r);overflow:hidden;background:var(--navy)}
#hp26 .hero-banner img {display:block;width:100%;height:auto}
@media (max-width:1525px) {
#hp26 .hero-banner {margin:0 calc(var(--gut)*-1);border-radius:0}
}
#hp26 .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#hp26 .banners {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tgap);margin-top:22px}
#hp26 .banner {display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
#hp26 .banner img {width:100%;height:auto;aspect-ratio:2880/1433}
@media (max-width:900px) {
#hp26 .banners {grid-template-columns:1fr}
}
#hp26 .skinny-wrap {padding-top:18px}
#hp26 #browse + .skinny-wrap {padding-top:36px}
#hp26 .skinny {display:block;border-radius:var(--r);overflow:hidden;background:#111}
#hp26 .skinny-cc {border:1px solid var(--line)}
#hp26 .skinny-art {display:block;width:100%;height:auto}
#hp26 .sec-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
#hp26 .sec-head h2 {font-size:22px;font-weight:700;line-height:1.2}
#hp26 .tabs {display:flex;gap:24px;border-bottom:1px solid var(--line);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
#hp26 .tab {background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 10px;font:700 22px/1.2 var(--body);color:var(--ink-3);cursor:pointer;white-space:nowrap}
#hp26 .tab[aria-pressed="true"] {color:var(--ink);border-bottom-color:var(--red)}
#hp26 .tab:hover {color:var(--ink)}
#hp26 .sec-head:has(.tabs) {align-items:flex-end}
#hp26 .sec-ctl {display:flex;align-items:center;gap:10px;flex:0 0 auto}
#hp26 .viewall {font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-right:4px}
#hp26 .arrow {width:36px;height:36px;border-radius:50%;border:0;background:var(--grey-1);color:#111;font-size:0;cursor:pointer;position:relative}
#hp26 .arrow::after {content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-top:2px solid #111;border-right:2px solid #111;transform:translate(-65%,-50%) rotate(45deg)}
#hp26 .arrow.prev::after {transform:translate(-35%,-50%) rotate(-135deg)}
#hp26 .arrow:hover {background:#e2e2e2}
#hp26 .tiles6 {display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
#hp26 .ctile {display:block;min-width:0;text-align:center}
#hp26 .ctile .sq {display:block;position:relative;aspect-ratio:1;background:var(--grey-1);border-radius:var(--r);overflow:hidden}
#hp26 .ctile .sq img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hp26 .ctile .cap {display:block;margin-top:10px;font-size:13px;font-weight:600}
#hp26 .ctile:hover .cap {text-decoration:underline}
#hp26 .sale-tag {position:absolute;left:0;top:10px;z-index:2;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 10px 4px 8px;border-radius:0 3px 3px 0}
#hp26 .sq.type {display:flex;align-items:center;justify-content:center;color:#fff;padding:12px}
#hp26 .sq.type.black {background:#000}
#hp26 .sq.type.redbg {background:var(--red)}
#hp26 .sq.type > span {display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;max-width:100%}
#hp26 .sq.type b {font-family:var(--display);font-weight:400;font-size:clamp(34px,3.3vw,48px);line-height:.95;text-transform:uppercase}
#hp26 .sq.type b.sm {font-size:clamp(24px,2.4vw,34px);line-height:1}
#hp26 .sq.type small {display:block;font:700 clamp(9px,.85vw,12px)/1.2 var(--body);letter-spacing:.12em;opacity:.9}
#hp26 .band {position:relative;overflow:hidden;border-radius:var(--r);min-height:290px;display:flex;align-items:center;background:var(--grey-1)}
#hp26 .band-img {position:absolute;right:0;top:0;width:78%;height:100%;object-fit:cover;object-position:right center}
#hp26 .band::before {content:"";position:absolute;inset:0;z-index:1}
#hp26 .band-txt {position:relative;z-index:2;width:50%;padding:24px 0 24px 40px}
#hp26 .band-kick {display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
#hp26 .band h2 {font-family:var(--display);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1;text-transform:uppercase;letter-spacing:.005em}
#hp26 .band p {font-size:16px;line-height:1.45;max-width:520px;margin:10px 0 16px}
#hp26 .band-sc {background:var(--band);color:var(--band-ink)}
#hp26 .band-sc::before {display:none}
#hp26 .band-sc .band-kick {color:#ff8b99}
#hp26 .band-sc p {color:#e6e6e6}
#hp26 .band-sc .band-txt {width:55%}
#hp26 .band-sc .band-img {width:45%;object-fit:contain;object-position:center;background:#000;padding:12px}
@media (max-width:900px) {
#hp26 .band {display:block;min-height:0}
#hp26 .band-img {position:static;width:100%;height:auto;aspect-ratio:16/7}
#hp26 .band::before {display:none}
#hp26 .band-txt {width:100%;padding:20px}
#hp26 .band-sc {display:flex;flex-direction:column}
#hp26 .band-sc .band-txt {width:100%;order:2}
#hp26 .band-sc .band-img {order:1;width:100%;aspect-ratio:16/8;padding:16px}
}
@media (max-width:600px) {
#hp26 .band h2 {font-size:24px}
}
#hp26 .track {display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;padding-bottom:4px}
#hp26 .track::-webkit-scrollbar {display:none}
#hp26 .pcard {flex:0 0 calc((100% - 5*var(--gap))/6);scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
#hp26 .pcard .sq {position:relative;aspect-ratio:1;background:var(--grey-1);border-radius:var(--r);overflow:hidden;display:block}
#hp26 .pcard .sq img {width:100%;height:100%;object-fit:cover}
#hp26 .badge {position:absolute;left:8px;top:8px;z-index:2;background:#111;color:#fff;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:3px;letter-spacing:.02em}
#hp26 .badge.sale {background:var(--red)}
#hp26 .pname {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.35;margin-top:10px;min-height:35px}
#hp26 .pcard:hover .pname {text-decoration:underline}
#hp26 .pdeal {display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:6px 0 10px;font-size:13px}
#hp26 .pdeal b {font-weight:700}
#hp26 .pdeal .newb {color:#111}
#hp26 .pdeal .redb {color:var(--red)}
#hp26 .pdeal .grey,
#hp26 .pdeal s {color:var(--ink-3);font-size:12px}
#hp26 .pdeal .own-line {flex-basis:100%}
#hp26 .pdeal b.price {color:var(--red);font-size:16px}
#hp26 .pdeal .plist {color:var(--ink-3);font-size:13px;text-decoration:line-through}
#hp26 .pdeal .psale {color:var(--red);font-weight:700;font-size:15px}
#hp26 .psale.ph {color:var(--ink-3);font-weight:600}
#hp26 .pstrip {margin-top:auto;border:1px solid var(--line);border-radius:var(--r);padding:7px 8px;font-size:11px;color:var(--ink-2);line-height:1.35}
#hp26 .pstrip a {white-space:nowrap;color:var(--red);font-weight:700;text-decoration:underline}
#hp26 .dots {display:flex;justify-content:center;gap:6px;margin-top:12px}
#hp26 .dots i {width:6px;height:6px;border-radius:50%;background:#ccc}
#hp26 .dots i.on {background:#111}
#hp26 .circles {display:grid;grid-template-columns:repeat(6,1fr);gap:24px var(--gap)}
#hp26 .circ {display:flex;flex-direction:column;align-items:center;text-align:center}
#hp26 .circ .ring {width:100%;max-width:140px;aspect-ratio:1;border-radius:50%;padding:5px;background:radial-gradient(circle at 50% 40%,#fff 0,#e9e9e9 70%,#d9d9d9 100%);box-shadow:0 0 0 1px var(--line)}
#hp26 .circ .ring img {width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 25%}
#hp26 .circ b {margin-top:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
#hp26 .vband {margin-top:36px;padding:32px 0 36px;background:var(--band);color:var(--band-ink)}
#hp26 .vgrid {display:grid;grid-template-columns:2fr 1fr;column-gap:24px;align-items:stretch}
#hp26 .vh {font-size:20px;font-weight:700;line-height:1.2;margin-bottom:16px;align-self:end}
#hp26 .vall {grid-column:2;align-self:end;justify-self:start;margin-bottom:16px;display:inline-flex;align-items:center;height:40px;padding:0 20px;border:2px solid #fff;border-radius:var(--r);font-size:14px;font-weight:700}
#hp26 .vall:hover {background:#fff;color:#111}
#hp26 .vmedia {grid-column:1}
#hp26 .vfcap {grid-column:1;margin-top:14px}
#hp26 .vfcap b {font-size:20px}
#hp26 .vcap {display:block;min-width:0}
#hp26 .vcap small {display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ff8b99}
#hp26 .vcap b {display:block;font-weight:600;line-height:1.3}
#hp26 .vfcap:hover b,
#hp26 .vcard:hover .vcap b {text-decoration:underline}
#hp26 .vlist {grid-column:2;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:16px;min-width:0;contain:size}
#hp26 .vmedia {position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}
#hp26 .vmedia img {width:100%;height:100%;object-fit:cover}
#hp26 .play {position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(214,0,28,.95);box-shadow:0 4px 18px rgba(0,0,0,.5)}
#hp26 .play::after {content:"";position:absolute;left:29px;top:22px;border-left:20px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
#hp26 .vmedia:hover .play {background:var(--red-hi)}
#hp26 .vcard {display:grid;grid-template-columns:54% minmax(0,1fr);gap:14px;align-items:center;color:#fff;min-height:0;overflow:hidden}
#hp26 .vcard img {width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
#hp26 .vcard .vcap b {font-size:14px}
#hp26 .vband a {color:inherit;text-decoration:none}
#hp26 .vband a.btn-red {color:#fff}
#hp26 .services {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
#hp26 .svc {border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
#hp26 .svc-img {display:block}
#hp26 .svc > img,
#hp26 .svc > .svc-img > img {width:100%;aspect-ratio:16/9;object-fit:cover}
#hp26 .svc-b {padding:16px 18px 20px}
#hp26 .svc h3 {font-size:16px;font-weight:700;margin-bottom:6px}
#hp26 .svc p {font-size:14px;color:var(--ink-2);margin-bottom:12px}
#hp26 .why {text-align:center;padding-top:56px;padding-bottom:8px}
#hp26 .why h2 {color:var(--red);font-size:28px;font-weight:700;line-height:1.2}
#hp26 .why-sub {font-size:18px;line-height:1.5;max-width:900px;margin:12px auto 20px;color:#333}
#hp26 .icons4 {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);max-width:900px;margin:36px auto 0!important}
#hp26 .icons4 li {display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;font-weight:700}
#hp26 .icons4 svg {width:52px;height:52px;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#hp26 .why-awards {display:block;width:100%;max-width:900px;height:auto;margin:24px auto}
#hp26 .why-stats {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:36px;margin:30px auto 0;max-width:820px}
#hp26 .why-stats li {position:relative;flex:0 0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px}
#hp26 .why-stats li::before {content:"";position:absolute;left:-18px;top:50%;transform:translateY(-50%);
  width:1px;height:30px;background:var(--line)}
#hp26 .why-stats li:first-child::before {display:none}
#hp26 .why-stats .n {font-family:var(--display);font-size:30px;line-height:1;font-weight:500;
  color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
#hp26 .why-stats .plus {color:var(--red);font-size:.62em;vertical-align:super;margin-left:3px}
#hp26 .why-stats .l {font-size:11px;line-height:1.35;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
@media (max-width:620px) {
#hp26 .why-stats {gap:28px 32px;max-width:340px}
#hp26 .why-stats li::before {display:none}
#hp26 .why-stats li:nth-child(even)::before {display:block;left:-16px}
#hp26 .why-stats .n {font-size:27px}
}
#hp26 .advice {margin:36px auto 0;max-width:760px;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}
#hp26 .advice strong {font-size:16px;font-weight:700}
#hp26 .advice-btns {display:flex;gap:10px;flex:0 0 auto}
#hp26 .email {background:var(--grey-1);margin-top:56px;padding:28px 0}
#hp26 .email-in {display:flex;align-items:center;justify-content:space-between;gap:24px}
#hp26 .email-in p {font-size:18px;font-weight:700;max-width:520px}
#hp26 .email-form {display:flex;gap:10px;flex:1 1 auto;max-width:560px}
#hp26 .email-form input {flex:1 1 auto;min-width:0;height:44px;border:1px solid #bbb;border-radius:var(--r);padding:0 14px;font:500 14px var(--body)}
#hp26 .email-form .btn {border:0}
@media (max-width:1200px) {
#hp26 .pcard {flex-basis:calc((100% - 3*var(--gap))/4)}
#hp26 .tiles6,
#hp26 .circles {grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px) {
#hp26 .services {grid-template-columns:1fr}
#hp26 .vgrid {grid-template-columns:1fr}
#hp26 .vall,
#hp26 .vmedia,
#hp26 .vfcap,
#hp26 .vlist {grid-column:1}
#hp26 .vh {order:1}
#hp26 .vall {order:2}
#hp26 .vmedia {order:3}
#hp26 .vfcap {order:4}
#hp26 .vlist {order:5}
#hp26 .vall {grid-row:auto;margin-bottom:12px;align-self:start}
#hp26 .vlist {contain:none;grid-template-rows:none;margin-top:20px}
#hp26 .vcard {grid-template-columns:140px minmax(0,1fr)}
#hp26 .pcard {flex-basis:calc((100% - 2*var(--gap))/3)}
#hp26 .tiles6,
#hp26 .circles {grid-template-columns:repeat(3,1fr)}
#hp26 .email-in,
#hp26 .advice {flex-direction:column;align-items:stretch;text-align:center}
#hp26 .advice-btns {justify-content:center}
#hp26 .email-form {max-width:none}
}
@media (max-width:600px) {
#hp26 .sq.type b {font-size:40px}
#hp26 .sq.type b.sm {font-size:30px}
#hp26 .pcard {flex-basis:calc((100% - var(--gap))/2)}
#hp26 .tiles6,
#hp26 .circles {grid-template-columns:repeat(2,1fr)}
#hp26 .circ .ring {max-width:130px}
#hp26 .icons4 {grid-template-columns:repeat(2,1fr);row-gap:24px}
#hp26 .vfcap b {font-size:17px}
#hp26 .vcard {grid-template-columns:120px minmax(0,1fr)}
#hp26 .sec-head h2 {font-size:19px}
#hp26 .sec-1 {padding-top:40px}
#hp26 .sec-1 .sec-head h2 {font-size:22px}
#hp26 .sec-3 {padding-top:24px}
#hp26 .sec-3 .sec-head h2,
#hp26 .vband .sec-head h2 {font-size:18px}
#hp26 .tab {font-size:17px}
#hp26 .arrow {width:32px;height:32px}
#hp26 .why h2 {font-size:23px}
#hp26 .why-sub {font-size:16px}
#hp26 .email-form {flex-direction:column}
#hp26 .arrow {display:none}
}
@media (prefers-reduced-motion:reduce) {
#hp26 .track {scroll-behavior:auto}
}
#hp26 .cs-deal-short,
#hp26 .tab-short {display:none}
@media (max-width:700px) {
#hp26 .catstrip-in {justify-content:flex-start}
}
@media (max-width:700px) {
#hp26 .cs-deal-full {display:none}
#hp26 .cs-deal-short {display:inline}
}
@media (max-width:700px) {
#hp26 .tab-full {display:none}
#hp26 .tab-short {display:inline}
}

/* the email form is site.js's .newsletter-form (wrapper) instead of the mockup's <form> */
#hp26 #hp26-newsletter{flex:1 1 auto;max-width:560px}
#hp26 #hp26-newsletter .email-form{max-width:none}
@media (max-width:900px){#hp26 #hp26-newsletter{max-width:none}}

/* Sticky site nav (homepage only - this file only loads there), as in the mockup. #nav-container is a direct
   child of <body>, so it stays stuck for the whole page. The phone search box and menu open below it as separate
   elements, so they stick under it too (65px = nav height) - otherwise opening them while scrolled down would
   open them at the top of the page, out of sight. z-index stays under .popUp (1001) and overlays (9998+). */
#nav-container{position:sticky;top:0;z-index:100}
#mobile-search,ul#mobile-nav-dropdowns{position:sticky;top:65px;z-index:99}
ul#mobile-nav-dropdowns{max-height:calc(100vh - 65px);overflow-y:auto}

/* the Studio Collections band's picture is a link (/studio-collections); the image keeps its own positioning */
#hp26 .band-img-link{display:block}

/* Sections the category strip links to (#new, #deals, #browse ...) stop so their title lands just under the sticky nav
   (65px), at the same height for every section (96px from the top): scroll-margin = 96 - the title's offset in its
   section. Most sections have 36px top padding -> 60px; New Releases has 48-49px -> 47px. */
#hp26 section[id] { scroll-margin-top: 60px; }
#hp26 section#new { scroll-margin-top: 47px; }