/* ==========================================================================
   site-c9.css — chapter9guitars PUBLIC SITE skin. draft_v001g (2026-08-06).
   v001g vs v001b (feedback #68-111): flyout v3 (NO logo at any width, panel
   flush with the header bottom, vertically balanced, image slot in EVERY
   panel incl. <920, More row dropped) · grid polish (280px sidebar, tight
   card lines, 1px rule @14px, square corners, faded-blue info hover, both
   title lines blue→black) · checkout (big-target qty stepper that DOES
   count up — qty>1 grays the button to "See Message Below" + pink warning ·
   balanced select chevrons) · product pages (fuller back-link, type/finish
   under the model heading, first-person origin paragraph, big info section
   heads) · footer v2 (two 50/50 centered columns + divider, gradient ends
   after columns, TM band between columns and the black Connect/© bar) ·
   responsive: ≤768 Products sub-bar (pushes the header), ≤640 MENU overlay,
   <1024 two-line faceplates title.
   Swatch: 1 #BDDDFC · 2 #88BDF2 · 3 #6A89A7 · 4 #384959 · bright #0080ff ·
   buy-green #00c405 · gray band #F2F2F2.
   ========================================================================== */
:root{
  --c9-1:#BDDDFC; --c9-2:#88BDF2; --c9-3:#6A89A7; --c9-4:#384959;
  --c9-bright:#0080ff; --c9-buy:#00c405; --c9-warn:#e70000;
  --c9-ink:#22303d; --c9-line:#dbe4ee; --c9-gray:#F2F2F2;
  --c9-fade:#EDF5FC;   /* #97: the #F2F2F2-equivalent in the blue family — faded slogan blue */
  --c9-head-h:360px; --c9-max:1600px;
}
.grid-container{ max-width:var(--c9-max); }

/* ---- selects: the chevron is a REAL element (#163) ------------------------ */
/* Wrapper + inline svg replaces the background-image arrow so every browser
   renders the identical spot: 12px from the select's right edge, centered. */
.c9-selwrap{ position:relative; display:block; }
.c9-selwrap select{ background-image:none !important; padding-right:34px; margin:0 !important; }
.c9-checkout .c9-selwrap{ margin:0 0 14px; }      /* the select's old bottom margin lives on the wrap now */
.c9-selchev{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:13px; height:8px; color:var(--c9-4); pointer-events:none; display:block; }

/* ---- base text & links ---------------------------------------------------- */
.c9-body a, .c9-body-p a{ color:var(--c9-3); border-bottom:dotted var(--c9-3) 2px; text-decoration:none; }
.c9-body a:hover, .c9-body-p a:hover{ color:var(--c9-4); border-bottom:solid var(--c9-4) 2px; }
sup.c9-reg{ font-weight:400; font-size:.45em; top:-1.1em; letter-spacing:0; }
.c9-dot{ font-size:1.25em; font-weight:800; line-height:0; position:relative; top:.04em; }

/* ==========================================================================
   HEADER — the v009b1 system (unchanged from v001a).
   ========================================================================== */
.sticky-shrinknav-header{ height:360px; padding:40px 0 0 !important; z-index:100;
  left:0; right:auto; width:100%; transition:all 1s ease; }
body.sticky-shrinknav-wrapper .sticky-shrinknav-header{ padding:40px 0 0 !important; transition:all 1s ease; }

.c9-logo-wrap{ position:relative; height:190px; margin:0 auto 28px; transition:height 1s ease, margin 1s ease; }
.c9-logo-wrap img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:92vw; transition:opacity 1s ease, max-height 1s ease; }
.c9-logo-full{ max-height:190px; opacity:1; }
.c9-logo-icon{ max-height:106px; opacity:0; }

.sticky-shrinknav-header h1.c9-slogan-head, .c9-buffer h1.c9-slogan-head{
  font-size:1.8rem; line-height:1.1; margin:0; white-space:nowrap; }
.c9-slogan-head span{ color:var(--c9-2) !important; font-family:"azo-sans-web"; font-weight:800;
  letter-spacing:.04em; text-transform:none; display:inline; transition:all 1s ease; }

body.sticky-shrinknav-wrapper .c9-logo-wrap{ height:64px; margin-bottom:12px; }
body.sticky-shrinknav-wrapper .c9-logo-full{ opacity:0; max-height:64px; }
body.sticky-shrinknav-wrapper .c9-logo-icon{ opacity:1; max-height:64px; }
body.sticky-shrinknav-wrapper .sticky-shrinknav-header h1.c9-slogan-head,
body.sticky-shrinknav-wrapper .c9-buffer h1.c9-slogan-head{ font-size:1.1rem; }
body.sticky-shrinknav-wrapper .c9-slogan-head span{ font-weight:600; }

@media only screen and (max-width:920px){
  .sticky-shrinknav-header h1.c9-slogan-head, .c9-buffer h1.c9-slogan-head{ white-space:normal; text-align:center; font-size:1.35rem; }
  .c9-slogan-head span{ display:block; }
  body.sticky-shrinknav-wrapper .sticky-shrinknav-header h1.c9-slogan-head{ font-size:1rem; }
  .c9-logo-wrap{ height:150px; } .c9-logo-full{ max-height:150px; }
}

.sticky_header_buffer.c9-buffer{ position:relative; height:360px; background:var(--c9-2); overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:40px 0 0; box-sizing:border-box;
  transition:height 1s ease; }
.sticky_header_buffer.c9-buffer::before{ content:""; position:absolute; top:0; left:0; right:0; height:40px;
  background:var(--c9-4); }
.c9-buffer .grid-container{ display:flex; flex-direction:column; align-items:center; }
.c9-buffer .c9-logo-wrap img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0 !important; max-width:92vw; transition:opacity 1s ease, max-height 1s ease; }
.c9-buffer img.c9-logo-full{ max-height:190px !important; opacity:1; }
.c9-buffer img.c9-logo-icon{ max-height:106px !important; opacity:0; }
.c9-buffer .c9-slogan-buffer span{ color:#000 !important; }
body.sticky-shrinknav-wrapper .sticky_header_buffer.c9-buffer{ height:180px; }
body.sticky-shrinknav-wrapper .c9-buffer img.c9-logo-full{ opacity:0; max-height:64px !important; }
body.sticky-shrinknav-wrapper .c9-buffer img.c9-logo-icon{ opacity:1; max-height:64px !important; }
@media screen and (max-width:808px){
  .c9-buffer img.c9-logo-full{ opacity:1 !important; }
  body.sticky-shrinknav-wrapper .c9-buffer img.c9-logo-full{ opacity:0 !important; }
  body.sticky-shrinknav-wrapper .c9-buffer img.c9-logo-icon{ opacity:1 !important; }
}

@media only screen and (max-width:920px){
  .sticky-shrinknav-header{ height:295px; }
  .sticky_header_buffer.c9-buffer{ height:295px; }
  .c9-logo-wrap{ margin-bottom:19px; }
}
@media only screen and (max-width:768px){
  .sticky-shrinknav-header{ position:fixed; top:0; height:295px; }
  body.sticky-shrinknav-wrapper .sticky-shrinknav-header{ height:180px; }
  .sticky_header_buffer{ height:295px; }
  body.sticky-shrinknav-wrapper .sticky_header_buffer{ height:180px; }
}

/* ==========================================================================
   THE BAR — home icon + 7 items. Hover = WHITE, never darker. Active plain
   link = white + inert (no hand, no hover change).
   ========================================================================== */
.c9-mainmenu{ position:absolute; top:0; left:0; right:0; height:40px; background:var(--c9-4); z-index:6; }
.c9-mainmenu ul{ list-style:none; margin:0; padding:0 10px; height:40px;
  display:flex; align-items:stretch; justify-content:center; gap:0;
  overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.c9-mainmenu ul::-webkit-scrollbar{ display:none; }
.c9-mainmenu li{ display:flex; }
.c9-mainmenu a, .c9-mainmenu button{ display:flex; align-items:center; gap:7px; background:none; border:0;
  color:rgba(255,255,255,.78); font-family:"azo-sans-web", sans-serif; font-weight:700; font-size:1rem; line-height:1;
  padding:0 16px; cursor:pointer; text-decoration:none; }
.c9-mainmenu a:hover, .c9-mainmenu button:hover{ color:#fff; }                 /* hover = white, always */
.c9-mainmenu .c9-nav-on{ color:#fff; }
.c9-mainmenu a.c9-nav-inert{ pointer-events:none; cursor:default; }            /* current page: inert */
.c9-nav-home svg{ display:block; }
.c9-chev{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid rgba(255,255,255,.4); transition:transform .25s ease, border-top-color .25s ease; }
.c9-mainmenu button:hover .c9-chev{ border-top-color:#fff; }
.c9-mainmenu button.is-open{ color:#fff; }
.c9-mainmenu button.is-open .c9-chev{ transform:rotate(180deg); border-top-color:#fff; }

/* ==========================================================================
   FLYOUT v3 — no logo; JS sets height = initial header minus the 40px bar,
   so the panel's bottom edge lands EXACTLY on the header's bottom edge.
   Panels stretch to the flyout; content is vertically centered (balanced).
   Every panel: links left · image slot right (the slot survives <920).
   ========================================================================== */
.c9-fly{ position:fixed; top:40px; left:0; right:0; z-index:160; background:#fff;
  height:0; overflow:hidden; visibility:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.28);
  transition:height .28s ease, visibility 0s linear .28s; }
.c9-fly.is-open{ visibility:visible; transition:height .28s ease; }
.c9-fly-track{ position:relative; width:100%; height:100%; }
.c9-fly-panel{ position:absolute; top:0; bottom:0; left:0; width:100%;
  opacity:0; transform:translateX(0); pointer-events:none;
  transition:opacity .24s ease, transform .28s ease; }
.c9-fly-panel.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.c9-fly-panel.is-parked-left{ transform:translateX(-44px); }
.c9-fly-panel.is-parked-right{ transform:translateX(44px); }

.c9-fly-grid{ display:flex; gap:56px; padding:10px 0; max-width:var(--c9-max); margin:0 auto;
  height:100%; box-sizing:border-box; align-items:center; justify-content:space-between; }   /* #113: flush to the 1600 column, tight vertical */
@media only screen and (max-width:1600px){
  .c9-fly-grid{ padding:10px 24px; }                                           /* #113: side padding returns once ≤1600 */
}
.c9-fly-col{ display:flex; flex-direction:column; gap:4px; min-width:280px; max-width:680px; }
.c9-fly-item{ display:block; padding:9px 12px; border-radius:6px; text-decoration:none; border:0; }
.c9-fly-item:hover{ background:#f2f7fd; }
.c9-fly-name{ display:block; font-family:"azo-sans-web"; font-weight:800; font-size:1.02rem; color:var(--c9-bright); }
.c9-fly-item:hover .c9-fly-name{ color:#000; }                                 /* blue → black */
.c9-fly-desc{ display:block; font-size:.85rem; color:var(--c9-3); margin-top:2px; line-height:1.35; }
.c9-fly-ghost, .c9-fly-ghost:hover{ background:transparent; cursor:default; }   /* v002a: masked not-yet-live flyout item */
.c9-fly-ghost .c9-fly-name, .c9-fly-ghost:hover .c9-fly-name{ color:#bdbdbd; }
.c9-fly-media{ flex-shrink:0; }
.c9-fly-imgslot{ position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; width:420px; height:280px; border:2px dashed var(--c9-line); overflow:hidden;
  text-decoration:none; }                                     /* #112 link · #113 big · #169 caption BELOW */
.c9-fly-imgslot.has-img{ border:0; width:auto; height:auto; }                  /* #141: NO crop — slot hugs the image */
.c9-fly-imgslot img{ display:block; height:252px; width:auto; }                /* #169: EXPLICIT height (280 − caption)
                                                                                  — no circular flex sizing; the image
                                                                                  never sits under the caption */
.c9-fly-ph{ flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  font-family:"azo-sans-web"; font-weight:800; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:#b6c4d4; line-height:1.8; text-align:center; padding:0 16px; }
.c9-fly-cap{ flex:0 0 auto; width:100%; box-sizing:border-box; background:var(--c9-bright); color:#fff;
  font-family:"azo-sans-web"; font-weight:400; font-size:.78rem; line-height:1.3;
  padding:5px 10px; text-align:center; }                      /* #114/#169: sits UNDER the image, full slot width */
@media only screen and (max-width:920px){
  .c9-fly-grid{ flex-wrap:wrap; gap:18px; justify-content:center; }
  .c9-fly-media{ margin:0 auto; }                                              /* #84: the image slot SURVIVES <920 */
}
@media only screen and (max-width:768px){                                      /* #134/#135: stack ALL panels, big image */
  .c9-fly-grid{ flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; gap:14px; }
  .c9-fly-col{ max-width:none; width:100%; padding:0 20px; box-sizing:border-box;
    align-items:center; text-align:center; }
  .c9-fly-media{ width:100%; padding:0 20px; box-sizing:border-box; margin:0; }
  .c9-fly-imgslot{ width:100%; height:auto; aspect-ratio:3/2; }
  .c9-fly-imgslot.has-img{ width:100%; aspect-ratio:auto; }                    /* #141: natural ratio, no crop */
  .c9-fly-imgslot.has-img img{ width:100%; height:auto; flex:none; }           /* #169: caption stacks under it */
}

.c9-scrim{ position:fixed; top:40px; left:0; right:0; bottom:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:150; }
body.c9-fly-open .c9-scrim, body.c9-filters-open .c9-scrim{ opacity:1; pointer-events:auto; }
body.c9-filters-open .c9-scrim{ background:rgba(0,0,0,.6); }

/* ==========================================================================
   RESPONSIVE NAV (v001g #85-87)
   ≤768: bar = Products · Services · Merch · About · Contact; Products opens
   a thirds sub-bar (Guitars | Parts | Tools) that PUSHES the header down
   40px (no overlay); each third opens its full flyout below both bars.
   ≤640: the bar shows only "MENU" → 100%×100% overlay from the top.
   ========================================================================== */
.c9-subbar{ display:none; }
.c9-mainmenu li.c9-nav-products-li{ display:none; }
.c9-mainmenu li.c9-nav-menu-li{ display:none; }
.c9-lbl-short{ display:none; }

@media only screen and (max-width:768px){
  .c9-mainmenu li.c9-hide-768{ display:none; }             /* Guitars/Parts/Tools live in the sub-bar */
  .c9-mainmenu li.c9-nav-products-li{ display:flex; }
  .c9-lbl-full{ display:none; } .c9-lbl-short{ display:inline; }   /* #86: "Merch" */
  .sticky-shrinknav-header{ transition:all .35s ease; }     /* #131: push + reveal = ONE quick motion */
  .sticky_header_buffer.c9-buffer{ transition:height .35s ease; }   /* #164: the page below moves at the SAME speed */
  .c9-subbar{ display:flex; position:absolute; top:40px; left:0; right:0; height:40px; background:var(--c9-3);
    z-index:5; opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:transform .35s ease, opacity .35s ease; }    /* slides out from under the bar */
  body.c9-subbar-open .c9-subbar{ opacity:1; transform:none; pointer-events:auto; }
  .c9-subbar button{ flex:1 1 33.33%; border:0; border-radius:0; background:none; color:#fff;
    font-family:"azo-sans-web"; font-weight:800; font-size:1rem; line-height:1; cursor:pointer;
    border-right:1px solid rgba(255,255,255,.35); }         /* #136: square thirds, vertical dividers */
  .c9-subbar button:last-child{ border-right:0; }
  .c9-subbar button:hover, .c9-subbar button.is-open{ background:var(--c9-bright); }   /* #136: bright blue */
  /* the open sub-bar PUSHES the header down (bar zone 40px → 80px) */
  body.c9-subbar-open .sticky-shrinknav-header{ padding:80px 0 0 !important; height:335px; }
  body.c9-subbar-open.sticky-shrinknav-wrapper .sticky-shrinknav-header{ height:220px; }
  body.c9-subbar-open .sticky_header_buffer{ height:335px; }
  body.c9-subbar-open.sticky-shrinknav-wrapper .sticky_header_buffer{ height:220px; }
  body.c9-subbar-open .c9-fly{ top:80px; }
  body.c9-subbar-open .c9-scrim{ top:80px; }
}

/* ≤640: MENU-only bar; the sub-bar system stands down */
@media only screen and (max-width:640px){
  .c9-mainmenu li{ display:none; }
  .c9-mainmenu li.c9-nav-products-li{ display:none; }      /* outranks the ≤768 show rule */
  .c9-mainmenu li.c9-nav-menu-li{ display:flex; }
  .c9-nav-menu{ letter-spacing:.16em; padding:0 26px; }
  .c9-subbar, body.c9-subbar-open .c9-subbar{ display:none; }
  body.c9-subbar-open .sticky-shrinknav-header{ padding:40px 0 0 !important; height:295px; }
  body.c9-subbar-open .c9-fly{ top:40px; }
  body.c9-subbar-open .c9-scrim{ top:40px; }
}

/* the two full-screen MENU layers (#87) — top-slide, black 40px bar,
   items split the remaining height equally */
.c9-mobile{ display:none; }
@media only screen and (max-width:640px){
  .c9-mobile{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:300; background:#fff;
    display:flex; flex-direction:column; transform:translateY(-100%); visibility:hidden;
    transition:transform .35s ease, visibility 0s linear .35s; }
  .c9-mobile.is-open{ transform:translateY(0); visibility:visible; transition:transform .35s ease; }
  .c9-mobile-sub{ z-index:310; }
  .c9-mobile-bar button, .c9-mobile-list > button{ border-radius:0; }          /* #165: no leaked button radius */
  .c9-mobile-bar{ height:40px; flex-shrink:0; background:var(--c9-4); display:flex; align-items:center;
    justify-content:space-between; padding:0 8px; }
  .c9-mobile-bar a, .c9-mobile-bar button{ display:flex; align-items:center; gap:7px; background:none; border:0;
    color:#fff; font-family:"azo-sans-web"; font-weight:800; font-size:1rem; line-height:1; height:40px;
    padding:0 12px; cursor:pointer; text-decoration:none; }
  .c9-mobile-list{ flex:1; display:flex; flex-direction:column; }
  .c9-mobile-list > a, .c9-mobile-list > button{ flex:1 1 0; display:flex; align-items:center; justify-content:center;
    background:none; border:0; border-bottom:1px solid var(--c9-line); cursor:pointer; text-decoration:none;
    font-family:"azo-sans-web"; font-weight:800; font-size:1.1rem; color:var(--c9-bright); padding:0 20px;
    text-align:center; }
  .c9-mobile-list > a:last-child, .c9-mobile-list > button:last-child{ border-bottom:0; }
  .c9-mobile-list > a:hover, .c9-mobile-list > button:hover,
  .c9-mobile-list > a:active, .c9-mobile-list > button:active{ background:var(--c9-bright); color:#fff; }   /* #137 */
  .c9-mobile-list > a.c9-mobsub-hasimg{ flex-direction:column; gap:20px; }      /* ≤640 sub-layer: title above, image 20px below, all centered */
  .c9-mobile-list > a.c9-mobsub-hasimg img{ display:block; width:min(86vw, 520px); height:auto; }
  body.c9-mobile-open{ overflow:hidden; }
}

/* ==========================================================================
   SECTION TITLE BARS — the ONE style, everywhere: lighter → darker, top to
   bottom. (Old c9-black/c9-dk kept as aliases of the same look.)
   ========================================================================== */
.c9-band, .c9-black, .c9-dk{ padding:30px 0 26px; text-align:center;
  background:linear-gradient(to bottom, var(--c9-3) 0%, var(--c9-4) 100%); }
.c9-band h2{ color:#fff; margin:0; letter-spacing:1px; font-family:"azo-sans-web"; font-size:2rem; line-height:1.12; }
@media only screen and (max-width:1024px){                                     /* #92: the LONG faceplates title only —
                                                                                  "Limited-Edition" / rest, two forced lines */
  .c9-band-long .c9-band-l1, .c9-band-long .c9-band-l2{ display:block; }
  .c9-band-long h2{ font-size:1.7rem; padding:0 16px; }
}
.c9-band .c9-band-sub{ color:var(--c9-1); margin:6px 0 0; font-family:"azo-sans-web"; font-weight:800;
  font-size:1.15rem; letter-spacing:.06em; text-align:center; }               /* #157: never left-stuck */
.c9-band .c9-band-subsm{ color:#fff; font-weight:400; font-size:.9rem;
  letter-spacing:.04em; margin:4px 0 0; }                                      /* #157: small, not bold, white, tight */
.c9-body{ background:#fefefe; padding:26px 0 34px; text-align:left; }
.c9-body-p{ color:#4c4c4c; font-size:1.02em; line-height:1.55; margin:0 0 12px; }
.c9-body-p strong{ color:#191919; }
.c9-col{ max-width:var(--c9-max); margin:0 auto; padding:0 20px; }

.c9-note{ background:#eef5fd; border-left:3px solid var(--c9-2); padding:10px 14px; margin:12px 0;
  font-size:.95em; color:#33475c; text-align:left; }
.c9-note strong{ color:var(--c9-4); }
.c9-note.c9-note-hard{ border-left-color:var(--c9-warn); background:#fdf1f1; }
.c9-blocklabel{ font-family:"azo-sans-web"; font-weight:800; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c9-3); margin:18px 0 8px; }

/* ==========================================================================
   HOME — tagline ABOVE the hero; hero edge-to-edge ≤1600.
   ========================================================================== */
.c9-tagline{ background:#fff; text-align:center; padding:10px 20px; }
.c9-tagline p{ margin:0; color:#000; font-size:.85rem; line-height:1.5; text-align:center !important; }
.c9-hero{ background:#fefefe; padding:0; }
.c9-hero .grid-container{ padding:0; }                                          /* edge-to-edge ≤1600 */
.c9-hero a{ display:block; border:0; }
.c9-hero img{ display:block; width:100%; height:auto; }
.c9-hero video{ display:block; width:100%; height:auto; margin-top:20px; }      /* v002a About: clip below the photo, equal 20px gap */
.c9-hero-line{ text-align:center; margin:0 0 20px; padding:0 20px; }            /* v002a About: teaser line between band and photo */
.c9-hero-cap{ text-align:center; font-size:.9rem; color:#4c4c4c; margin:14px 0 0; padding:0 20px; }   /* v002a About: video caption */
.c9-hero-cta{ text-align:center; padding:26px 20px 40px; background:#fefefe; }
.c9-btn{ display:inline-block; background:var(--c9-bright); color:#fff; border:0; border-radius:6px;
  font-family:"azo-sans-web"; font-weight:800; font-size:1rem; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 30px; cursor:pointer; text-decoration:none; }
.c9-btn:hover{ background:var(--c9-4); color:#fff; }

/* ==========================================================================
   THE GRID + FILTER SIDEBAR
   ========================================================================== */
.c9-shop{ display:flex; gap:34px; align-items:stretch; max-width:var(--c9-max); margin:0 auto; }
.c9-filters{ width:280px; flex-shrink:0; background:var(--c9-gray); padding:24px 20px 40px; text-align:left; }   /* #93: 280px */
.c9-filters *{ text-align:left; }
.c9-filters h3{ font-family:"azo-sans-web"; font-weight:800; font-size:1.5rem; color:var(--c9-ink); margin:0; line-height:1.1; }
.c9-filters h3 span{ color:var(--c9-bright); }
.c9-filters .c9-match{ color:var(--c9-3); font-size:.95rem; margin:2px 0 16px; }
.c9-flabel{ display:block; font-family:"azo-sans-web"; font-weight:800; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c9-4); margin:14px 0 6px; }
.c9-filters select{ width:100%; height:auto; margin:0; padding:9px 24px 9px 10px; border:1px solid var(--c9-line);
  border-radius:6px; font-size:.95rem; background-color:#fff; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23384959' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:11px; }   /* #147: hugs the edge */
.c9-filters select:hover{ border-color:var(--c9-2); background-color:#f6faff; }
.c9-fcheck{ display:flex; align-items:center; gap:8px; padding:2px 0; font-size:.82rem; color:#000;
  cursor:pointer; white-space:nowrap; }
.c9-fcheck input{ width:15px; height:15px; margin:0; flex-shrink:0; accent-color:var(--c9-bright); cursor:pointer; }
.c9-clear{ width:100%; margin-top:16px; background:#fff; color:var(--c9-bright); border:1px solid var(--c9-line);
  border-radius:6px; font-family:"azo-sans-web"; font-weight:800; font-size:.85rem; letter-spacing:.1em;
  text-transform:uppercase; padding:12px 0; cursor:pointer; text-align:center; }
.c9-clear:hover{ background:var(--c9-bright); border-color:var(--c9-bright); color:#fff; }
.c9-clear.is-inert{ color:#9aa9b8; pointer-events:none; }                      /* #123: faded + inert until a filter changes */
.c9-filters hr{ border:0; border-top:1px solid #ddd; margin:14px 0; }
.c9-ftoggle{ display:none; }

.c9-gridwrap{ flex:1; padding:30px 20px 50px 0; }
.c9-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; align-content:start; }
.c9-card{ display:block; text-decoration:none; border:0; background:transparent; text-align:left; }
.c9-card-imgwrap{ position:relative; overflow:hidden; }                        /* #96: square corners */
.c9-card-imgwrap img{ display:block; width:100%; height:auto; background:#000; }
.c9-card-info{ padding:12px 2px 0; transition:background .15s ease; }         /* #120: nothing below the rule */
.c9-card:hover .c9-card-info{ background:var(--c9-fade); }                     /* #97: faded-blue tint on hover */
.c9-card-titlerow{ display:flex; align-items:baseline; gap:10px; }
.c9-card-title{ font-family:"azo-sans-web"; font-weight:800; font-size:1.15rem; color:var(--c9-bright); margin:0; }
.c9-card:hover .c9-card-title{ color:#000; }                                   /* #99: model blue → black on hover */
.c9-card-type{ font-size:.78rem; color:#8a8a85; }
.c9-card-finish{ font-family:"azo-sans-web"; font-weight:800; font-size:1.05rem; color:var(--c9-bright); margin:0; }   /* #94/#99 */
.c9-card:hover .c9-card-finish{ color:#000; }                                  /* #99: finish blue → black on hover */
.c9-card-price{ font-family:"azo-sans-web"; font-weight:800; font-size:1.1rem; color:var(--c9-ink); margin:0; }   /* #94 */
.c9-card:hover .c9-card-price{ color:var(--c9-bright); }
.c9-card-rule{ height:1px; background:#e3e3e3; margin:14px 0 0; transition:background .15s ease; }   /* #95/#98 */
.c9-card:hover .c9-card-rule{ background:var(--c9-bright); }                   /* gray bar → blue on hover */
.c9-card.is-hidden{ display:none; }

/* ---- STOCK-STATE RIBBONS — pure CSS, 45°, bottom-right (Jerome hand-tags) - */
.c9-card.sold_out .c9-card-imgwrap::after, .c9-card.only_1_left .c9-card-imgwrap::after,
.c9-card.only_2_left .c9-card-imgwrap::after,
.c9-prod.sold_out .c9-prod-imgwrap::after, .c9-prod.only_1_left .c9-prod-imgwrap::after,
.c9-prod.only_2_left .c9-prod-imgwrap::after{
  position:absolute; right:-64px; bottom:34px; width:240px; transform:rotate(-45deg);
  text-align:center; font-family:"azo-sans-web"; font-weight:800; font-size:.95rem;
  letter-spacing:.12em; padding:8px 0; box-shadow:0 2px 10px rgba(0,0,0,.35); pointer-events:none; }
.c9-card.sold_out .c9-card-imgwrap::after, .c9-prod.sold_out .c9-prod-imgwrap::after{
  content:"SOLD OUT !"; background:#e00b00; color:#fff; }
.c9-card.only_1_left .c9-card-imgwrap::after, .c9-prod.only_1_left .c9-prod-imgwrap::after{
  content:"ONLY 1 LEFT !"; background:#ff8a00; color:#fff; }
.c9-card.only_2_left .c9-card-imgwrap::after, .c9-prod.only_2_left .c9-prod-imgwrap::after{
  content:"ONLY 2 LEFT !"; background:#f2c200; color:#000; }
.c9-prod .c9-prod-imgwrap::after{ font-size:1.15rem; right:-56px; bottom:48px; width:280px; padding:10px 0; }

@media only screen and (max-width:1200px){ .c9-grid{ grid-template-columns:repeat(2,1fr); } }
@media only screen and (max-width:640px){ .c9-grid{ grid-template-columns:1fr; } }

@media only screen and (max-width:920px){
  .c9-ftoggle{ display:inline-block; margin:16px 20px 4px; background:var(--c9-bright); color:#fff; border:0; border-radius:6px;
    font-family:"azo-sans-web"; font-weight:800; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
    padding:12px 22px; cursor:pointer; }                                       /* #138: bright blue */
  .c9-ftoggle:hover{ background:var(--c9-4); }
  .c9-shop{ display:block; }
  .c9-gridwrap{ padding:16px 20px 50px; }
  .c9-filters{ position:fixed; top:0; left:0; bottom:0; width:290px; max-width:85vw; z-index:170;
    background:#fff; padding:22px 20px 30px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .35s ease; }
  body.c9-filters-open .c9-filters{ transform:translateX(0); }
}

/* ==========================================================================
   PRODUCT PAGES
   ========================================================================== */
.c9-backbar{ background:#fff; padding:10px 0; }
.c9-backbar-inner{ max-width:var(--c9-max); margin:0 auto; padding:0 20px; }
.c9-crumb{ display:inline-block; font-family:"azo-sans-web"; font-weight:800; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--c9-3); text-decoration:none; border:0; }
.c9-crumb:hover{ color:var(--c9-bright); }

.c9-prod{ max-width:var(--c9-max); margin:0 auto; padding:26px 20px 60px; }
.c9-prod h2.c9-prod-model{ font-family:"azo-sans-web"; font-weight:800; font-size:2.4rem; color:var(--c9-ink);
  margin:0; line-height:1.1; text-align:left; }
.c9-prod .c9-prod-typefinish{ color:var(--c9-3); font-family:"azo-sans-web"; font-weight:800;
  font-size:1.15rem; margin:4px 0 14px; }                                      /* #107: type/finish under the model */
.c9-prod .c9-origin{ margin:0 0 26px; }                                        /* #124: full column width, no cap */
.c9-sechead{ font-family:"azo-sans-web"; font-weight:800; font-size:1.5rem; color:var(--c9-3);
  text-transform:uppercase; letter-spacing:.04em;
  margin:32px 0 10px; line-height:1.15; text-align:left; }                     /* #125: ALL CAPS, pastel, a touch smaller */
.c9-prod-imgwrap{ position:relative; overflow:hidden; border-radius:6px; margin:0 0 18px; }
.c9-prod-imgwrap img{ display:block; width:100%; height:auto; background:#000; }
.c9-prod video{ display:block; width:100%; border-radius:6px; margin:0 0 8px; background:#000; }
.c9-vid-note{ font-size:.9rem; color:var(--c9-3); margin:0 0 18px; }
.c9-prod .c9-price{ font-family:"azo-sans-web"; font-weight:800; font-size:1.7rem; color:var(--c9-ink); margin:18px 0 6px; text-align:left; }

/* checkout — boxless, 100% width of the column */
.c9-checkout h3{ font-family:"azo-sans-web"; font-weight:800; font-size:1.5rem; color:var(--c9-ink); margin:26px 0 14px; text-align:left; }
.c9-checkout select{ width:100%; height:auto; margin:0 0 14px; padding:13px 32px 13px 12px; border:1px solid var(--c9-3);
  border-radius:6px; font-size:1rem; background-color:#fff; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23384959' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:13px; }   /* #147: hugs the edge */
.c9-checkout select:hover{ border-color:var(--c9-bright); background-color:#f6faff; }
.c9-shipline{ font-family:"azo-sans-web"; font-weight:800; font-size:1.05rem; color:var(--c9-ink); margin:0 0 4px; }
.c9-shipline span{ color:var(--c9-bright); }
.c9-delivline{ color:var(--c9-3); font-size:.92rem; margin:0 0 6px; }
.c9-gatecheck{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; font-size:.93rem; color:#33475c;
  line-height:1.45; cursor:pointer; text-align:left; text-align-last:left; }   /* #151: never justified/centered */
.c9-gatecheck input{ width:17px; height:17px; margin:2px 0 0; flex-shrink:0; accent-color:var(--c9-buy); cursor:pointer; }
.c9-checkout .c9-note a, .c9-checkout .c9-gatecheck a{ display:inline; color:var(--c9-bright);
  text-decoration:none; margin:0; padding:0; border:0;
  border-bottom:1px dotted var(--c9-bright); }     /* #149/#159: TEXT links only — never the buy button */
.c9-checkout .c9-note a:hover, .c9-checkout .c9-gatecheck a:hover{ color:#000; border-bottom-color:#000; }

/* qty stepper + buy row — #103/#148: boxless self-contained #F2F2F2 control,
   one radius everywhere; −/+ disable at the limits (gray + 🚫, no hover) */
.c9-buyrow{ display:flex; gap:14px; margin-top:18px; align-items:stretch; }
.c9-qty{ flex-shrink:0; border:0; border-radius:6px; background:var(--c9-gray);
  display:flex; align-items:stretch; overflow:hidden;
  font-family:"azo-sans-web"; font-weight:800; font-size:1.2rem; color:var(--c9-ink); user-select:none; }
.c9-qty button{ width:52px; border:0; border-radius:0; background:none; cursor:pointer;
  color:var(--c9-4); font-family:inherit; font-weight:800; font-size:1.25rem; line-height:1; padding:0; }
.c9-qty button:hover{ background:var(--c9-bright); color:#fff; }
.c9-qty button:disabled{ color:#b9c1c9; cursor:not-allowed; }
.c9-qty button:disabled:hover{ background:none; color:#b9c1c9; }
.c9-qty .c9-qty-num{ width:52px; display:flex; align-items:center; justify-content:center; }
.c9-qty-form{ height:48px; margin:0 0 4px; }                                   /* #156: the same control inside forms */
.c9-buy{ display:block; flex:1; border:0; border-radius:6px;
  font-family:"azo-sans-web"; font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase;
  padding:16px 0; text-align:center; text-decoration:none;
  background:#9aa2a9; color:rgba(255,255,255,.6); cursor:not-allowed; }       /* faded gate state */
.c9-buy:hover{ color:rgba(255,255,255,.6); }                                   /* never blue */
.c9-buy.is-live{ background:var(--c9-buy); color:#fff; cursor:pointer; }
.c9-buy.is-live:hover{ background:#00a804; color:#fff; }                       /* darker green, text stays white */
.c9-qtymsg{ display:none; margin-top:12px; }
.c9-noship{ display:none; margin-top:16px; }
.c9-smallnote{ font-size:.9rem; color:var(--c9-3); margin:14px 0 0; }

@media only screen and (max-width:540px){                                      /* #175: stepper + button stack, both 100% */
  .c9-buyrow{ flex-direction:column; gap:10px; }
  .c9-qty{ width:100%; height:52px; }
  .c9-qty .c9-qty-num{ flex:1 1 auto; }
  .c9-buy{ flex:none; width:100%; }
}

/* sold_out product page: ribbon handled above; checkout swaps to request CTA */
.c9-prod.sold_out .c9-buyrow, .c9-prod.sold_out .c9-checkout-gates{ display:none; }
.c9-soldout-cta{ display:none; }
.c9-prod.sold_out .c9-soldout-cta{ display:block; margin-top:16px; }

/* ==========================================================================
   FORMS (contact + custom order request)
   ========================================================================== */
.c9-form label{ display:block; font-family:"azo-sans-web"; font-weight:800; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c9-4); margin:16px 0 6px; text-align:left; }
.c9-form label.c9-req::after{ content:" *"; color:var(--c9-warn); }            /* #153: mandatory marker */
.c9-form label.is-missing{ color:var(--c9-warn); }
.c9-form .is-missing-field{ border-color:var(--c9-warn) !important; }          /* outranks the chassis !important */
.c9-form .c9-mandnote{ font-weight:400; letter-spacing:0; text-transform:none; color:var(--c9-warn); }
.c9-form .c9-optnote{ font-weight:400; letter-spacing:0; text-transform:none; color:#8a97a5; }
.c9-form input[type=text], .c9-form input[type=email], .c9-form input[type=number], .c9-form textarea{
  width:100%; margin:0; padding:12px; border:1px solid var(--c9-line); border-radius:6px; font-size:1rem;
  font-family:inherit; box-shadow:none; height:auto; }
.c9-form select{ width:100%; height:auto; margin:0; padding:12px 32px 12px 12px; border:1px solid var(--c9-line);
  border-radius:6px; font-size:1rem; background-color:#fff; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23384959' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:13px; }
.c9-form select:hover{ border-color:var(--c9-2); background-color:#f6faff; }
.c9-form #cheardOther{ margin-top:8px; }
.c9-form input:focus, .c9-form textarea:focus{ border-color:var(--c9-2); outline:2px solid var(--c9-1); box-shadow:none; }
.c9-form textarea{ min-height:170px; resize:vertical; }
.c9-form .c9-btn{ margin-top:20px; }
.c9-form .c9-btn.is-gated{ background:#9aa2a9; color:rgba(255,255,255,.75); cursor:not-allowed; }   /* #153: gray until valid */
.c9-form .c9-btn.is-gated:hover{ background:#9aa2a9; color:rgba(255,255,255,.75); }

/* contact page: form + image side by side (#152), stacked ≤920 */
.c9-contact-wrap{ display:flex; gap:40px; align-items:flex-start; }
.c9-contact-formcol{ flex:1 1 60%; min-width:0; }
.c9-contact-media{ flex:0 0 520px; }
.c9-contact-media img{ display:block; width:100%; height:auto; border-radius:6px; }
@media only screen and (max-width:1024px){                                     /* #171: this page stacks at 1024 */
  .c9-contact-wrap{ flex-direction:column; }
  .c9-contact-formcol{ flex:none; width:100%; }                                /* form takes the full width */
  .c9-contact-media{ flex:none; width:100%; }
}

/* ==========================================================================
   FOOTER v3 (#73-81 + #115-119) — [gradient: centered columns + divider,
   50/50 → 60/40 ≤1024, stacked no-divider ≤768; IG icon in the
   chapter9guitars column] → [TRADEMARK band: pastel blue, text left +
   EverTune logo right on the 1600 edges] → [black bar: © | Terms only].
   ========================================================================== */
.c9-footer{ margin-top:40px; }
body.c9-nogap .c9-footer{ margin-top:0; }
.c9-foot-grad{ background:linear-gradient(to bottom, var(--c9-4) 0%, #1c2732 100%);
  padding:38px 0 34px; }                                                       /* #80: gradient ends after the columns */
.c9-foot-inner{ max-width:var(--c9-max); margin:0 auto; padding:0 20px; }
.c9-foot-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0; text-align:center; }   /* #76/#77: 50/50 above 1024 */
.c9-foot-col{ padding:0 30px; }
.c9-foot-cols .c9-foot-col:first-child{ border-right:1px solid rgba(255,255,255,.16); }   /* #76: full-height divider */
@media only screen and (max-width:1024px){
  .c9-foot-cols{ grid-template-columns:6fr 4fr; }                              /* #116: 60/40 once space tightens */
}
@media only screen and (max-width:880px){                                      /* #142: keep the Parts name on ONE line */
  .c9-foot-cols{ grid-template-columns:7fr 3fr; }
  .c9-foot-col{ padding:0 14px; }
}
.c9-foot-col h4{ font-family:"azo-sans-web"; font-weight:800; font-size:1rem; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin:0; }                            /* #74 */
.c9-foot-col h4.c9-foot-gap{ margin-top:26px; }                                /* clear gaps BETWEEN groups */
.c9-foot-col h5{ font-family:"azo-sans-web"; font-weight:800; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin:18px 0 0; }     /* #74 */
.c9-foot-col a{ display:block; color:var(--c9-1); font-size:.92rem; line-height:1.7;
  text-decoration:none; border:0; padding:0; }                                 /* #74 */
.c9-foot-col a:hover{ color:#fff; }
.c9-foot-col a.c9-foot-ig{ display:inline-flex; padding-top:8px; color:var(--c9-1); }   /* #115: IG under Contact */
.c9-foot-col a.c9-foot-ig:hover{ color:#fff; }
@media only screen and (max-width:768px){                                      /* #81: stack at 768 — #117: NO divider */
  .c9-foot-cols{ grid-template-columns:1fr; }
  .c9-foot-cols .c9-foot-col:first-child{ border-right:0; border-bottom:0; padding-bottom:26px; }
}
.c9-tm-band{ background:var(--c9-2); padding:14px 0; }                         /* #119: slogan pastel blue */
.c9-tm-inner{ max-width:var(--c9-max); margin:0 auto; padding:0;               /* flush to the 1600 edges */
  display:flex; align-items:center; justify-content:space-between; gap:30px; }
@media only screen and (max-width:1600px){ .c9-tm-inner{ padding:0 20px; } }   /* side padding returns ≤1600 */
.c9-tm-band p{ color:#0b1014; font-size:.85rem; line-height:1.55; margin:0; text-align:left; }   /* #118: no width cap */
.c9-tm-band strong.c9-tm-label{ color:rgba(0,0,0,.4); }                        /* #145/#161: label recedes further */
.c9-tm-band strong.c9-tm-lead{ color:#000; }                                   /* #145: the bold-black first sentence */
.c9-tm-logo{ flex-shrink:0; display:flex; border:0; }
.c9-tm-logo img{ display:block; height:44px; width:auto;
  filter:invert(1); transition:filter .15s ease; }                             /* #143: black at rest… */
.c9-tm-logo:hover img{ filter:none; }                                          /* …white on hover */
@media only screen and (max-width:768px){
  .c9-tm-band{ padding-bottom:24px; }                                          /* #173: +10px air above the black bar */
  .c9-tm-inner{ flex-direction:column; align-items:center; gap:14px; }
  .c9-tm-band p{ text-align:center; }
  .c9-tm-logo img{ height:auto; width:auto; max-width:100%; }                  /* #166: native size when stacked */
}
.c9-foot-black{ background:#0b1014; padding:16px 0 18px; }                     /* #167: ONE line, always */
.c9-foot-black .c9-foot-inner{ display:flex; flex-direction:column; align-items:center; }
.c9-foot-copy{ color:#fff; font-size:.85rem; margin:0; text-align:center; }
.c9-foot-copy strong{ color:#fff; }
.c9-foot-sep{ color:rgba(255,255,255,.3); padding:0 6px; }
.c9-foot-terms{ color:var(--c9-1); text-decoration:none; border:0; }
.c9-foot-terms:hover{ color:#fff; }

/* stub pages */
.c9-stub{ max-width:var(--c9-max); margin:0 auto; padding:34px 20px 60px; }

/* ==========================================================================
   v002a — FIRST LIVE LAUNCH LAYER (2026-08-10). v001g = frozen prototype.
   1 · BLACK CANVAS: the page base goes black on every page; the white
       content areas float as contained blocks (kills the loose white band
       under the footer). Grid + product columns carry their own white so
       nothing inherits black behind dark text.
   2 · GHOSTS: dead nav stays visible but inert — bar items at low opacity,
       footer items asterisk-masked in black on the gradient, sub-bar thirds
       and ≤640 overlay entries dimmed. No pointer, no hover, no links.
   ========================================================================== */
html, body{ background:#000; }
/* grid + product pages: the whole mid-region (title band → footer) floats on
   FULL-BLEED white, same as .c9-body pages — the shell carries it edge to
   edge; the columns inside keep their 1600 centering */
.c9-shell{ background:#fefefe; }

/* --- top bar ghosts ------------------------------------------------------- */
.c9-mainmenu .c9-nav-ghost{ display:flex; align-items:center; gap:7px;
  color:rgba(255,255,255,.22); font-family:"azo-sans-web", sans-serif; font-weight:700;
  font-size:1rem; line-height:1; padding:0 16px; cursor:default; user-select:none; }
.c9-mainmenu .c9-nav-ghost .c9-chev{ border-top-color:rgba(255,255,255,.16); }

/* --- ≤768 sub-bar ghost thirds -------------------------------------------- */
.c9-subbar-ghost{ flex:1 1 33.33%; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.28); font-family:"azo-sans-web"; font-weight:800; font-size:1rem;
  line-height:1; cursor:default; user-select:none; border-right:1px solid rgba(255,255,255,.35); }
.c9-subbar-ghost:last-child{ border-right:0; }

/* --- ≤640 overlay ghosts --------------------------------------------------- */
.c9-mobile-list > span.c9-mobile-ghost{ flex:1 1 0; display:flex; align-items:center;
  justify-content:center; border-bottom:1px solid var(--c9-line); cursor:default; user-select:none;
  font-family:"azo-sans-web"; font-weight:800; font-size:1.1rem; color:#c9d4df; padding:0 20px;
  text-align:center; }

/* --- footer ghost items ---------------------------------------------------- */
.c9-foot-col .c9-foot-ghost{ display:block; color:#000; font-size:.92rem; line-height:1.7;
  cursor:default; user-select:none; letter-spacing:.06em; }

/* v002a round 2 (2026-08-11): price pops bright like the shipping rate;
   the About hero breathes on 20px of white above and below the image */
.c9-prod .c9-price{ color:var(--c9-bright); }
.c9-hero-pad{ padding:20px 0; }
/* v002a: section heads sit tight on their paragraph (Jerome: drop the space) */
.c9-prod .c9-sechead{ margin-bottom:0; }

/* ==== v002b: transactional checkout (2026-08-12) ============================ */
/* header row: blue price LEFT + "Checkout" RIGHT on one line (his mockup);
   the select sits directly under, so the blue prices stack down the page */
.c9-checkout-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.c9-checkout-head .c9-price{ margin:0; }
.c9-checkout-head h3{ margin:0; }
/* terms-page standout spans: blue = the section-head color, ink = true black */
.c9-t-blue{ color:var(--c9-3); }
.c9-t-ink{ color:#000; }
/* © bar: the re-added Terms & Conditions link — not-bold pastel blue on black,
   SOLID underline, hover = white (the core's p a:hover black + dotted overridden
   at higher specificity — .c9-foot-copy a:hover (0,2,1) beats p a:hover (0,1,2)) */
.c9-foot-copy a{ color:var(--c9-2); font-weight:400; text-decoration:none;
  border-bottom:1px solid var(--c9-2); }
.c9-foot-copy a:hover{ color:#fff; border-bottom-color:#fff; }
/* ≤768: the two links keep their line, the © drops to its own line BELOW them
   (column-reverse — DOM order stays ©, bar, links; the " | " between them hides) */
@media only screen and (max-width:768px){
  .c9-foot-copy{ display:flex; flex-direction:column-reverse; align-items:center; gap:6px; }
  .c9-foot-bar{ display:none; }
}