/** Shopify CDN: Minification failed

Line 11:1 Unexpected "/"

**/
/* stussy-override.css  — MUST load last */

/* Two-column layout on desktop */
/* section.stussy-product{ */
/* display:flex !important;          /* override base.css */
*/
  /* gap:4rem; */
/* } */
/* .media-col{flex:1 1 60%;}
.info-col {flex:0 0 340px;max-width:420px;} */

/* @media (max-width: 800px){
  /* section.stussy-product{flex-direction:column;}
} */ */

/*  Hide native radios and checkboxes the theme re-injected */
.hide-native {
  position: absolute !important;
  left: -999rem !important;
}

/* (…any other tweaks you want…) */
/*  ────────────────────────────────────────────────
    Perfectly synced product layout
    (images scroll, info column sticks)
    ──────────────────────────────────────────────── */

section.stussy-product {
  /* 2-column grid:   [  fluid   |   340-420px  ]  */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  column-gap: 5vw; /* space between columns */
}

.info-col {
  position: sticky; /* makes it “cling” */
  top: 96px; /* ≈ your header height – adjust */
  align-self: start; /* keep top-aligned */
}

@media (max-width: 800px) {
  /* simple mobile stack */
  section.stussy-product {
    grid-template-columns: 1fr; /* one column  */
  }
  .info-col {
    position: static; /* disable sticky on small screens */
    margin-top: 32px;
  }
}
/*THE PIECE OF CODE THAT FIXED THE 2 COLUMN SCROLL ON PRODUCT PAGE*/

/* ------------------------------------------------------------------
   Layout bug-fix:
   --------------------------------------------------------------
   Our product images were wider than their Grid column, so they
   spilled out and pushed the info-column under the gallery.  Because
   the info column is sticky, it “disappeared” behind the images
   while scrolling.

   – max-width:100% forces every media item to stay INSIDE its grid
     track; once the overflow stops, the info column can sit alongside.

   – column-gap just gives a comfortable visual gap between the
     gallery (col-1) and the info block (col-2).
------------------------------------------------------------------ */

/* 1 ▸ never let the picture spill out of its grid-cell  */
.media-col img,
.media-col video,
.media-col model-viewer {
  display: block; /* kills the default inline-gap  */
  max-width: 100%; /* cannot exceed the column      */
  height: auto;
}

/* 2 ▸ make sure the two tracks have some breathing-room  */
section.stussy-product {
  column-gap: 4rem; /* or whatever looks good        */
}

/* ─── Product option pills (always flex) ─────────────────────────── */
section.stussy-product .info-col ul.swatch-list,
section.stussy-product .info-col ul.size-picker {
  display: flex !important;
  flex-wrap: wrap; /* wrap to new line if too many */
  gap: 12px !important; /* space between pills */
  margin: 16px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* kill any default <ul> overrides from the theme on mobile */
@media (max-width: 800px) {
  section.stussy-product .info-col ul.swatch-list,
  section.stussy-product .info-col ul.size-picker {
    display: flex !important;
  }
}

/* ─── Swatch & Size Pills ──────────────────────────── */
/*  Hide the native radio, keep it in the flow  */
.swatch-radio,
.size-radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0;
  height: 0;
  pointer-events: none;
}

/*  Base pill styles  */
.swatch-list .swatch-pill,
.size-picker .size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  margin: 0;
  border: 2px solid #fff; /* white border by default */
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

/*  Checked (selected)  */
.swatch-radio:checked + .swatch-pill,
.size-radio:checked + .size-btn {
  background-color: #fff;
  color: #000;
  border-color: #000;
}

/*  Hover / focus on available pills  */
.swatch-list .swatch-pill:hover:not(.swatch--soldout),
.size-picker .size-btn:hover:not(.is-soldout),
.swatch-radio:focus + .swatch-pill,
.size-radio:focus + .size-btn {
  background-color: rgba(255, 255, 255, 0.2);
}

/*  Disabled (sold out)  */
.swatch-list .swatch--soldout,
.size-picker .size-btn.is-soldout {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Make sure sold-out inputs cannot be clicked */
.swatch-radio:disabled + .swatch-pill,
.size-radio:disabled + .size-btn {
  pointer-events: none;
}

/* ─── Swatch pills & size buttons ───────────────────────────────── */

/* remove bullets, stack in a row, add spacing */
.swatch-list,
.size-picker {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

/* hide the native radio inputs off-screen */
.swatch-radio,
.size-radio {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  display: none !important;
}

/* base styles for the labels */
.swatch-pill,
.size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  user-select: none;
}

/* “checked” (active) state */
.swatch-radio:checked + .swatch-pill,
.size-radio:checked + .size-btn {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* “disabled” (sold-out) state */
.swatch-radio:disabled + .swatch-pill,
.size-radio:disabled + .size-btn {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* remove focus outline if you like, or customize */
.swatch-pill:focus,
.size-btn:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

section.stussy-product .swatch-list,
section.stussy-product .size-picker {
  list-style: none !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
}
/* ─── 1) FORCE flex‐row + remove bullets ───────────────────────────────── */
section.stussy-product .swatch-list,
section.stussy-product .size-picker {
  list-style: none !important; /* no bullets */
  margin: 1rem 0 !important; /* spacing above/below */
  padding: 0 !important; /* no list padding */
  display: flex !important; /* arrange children in a row */
  flex-wrap: wrap !important; /* wrap to new line if needed */
  gap: 0.75rem !important; /* gap between pills */
}

/* explicitly remove any lingering bullet/list-item markers */
section.stussy-product .swatch-list li,
section.stussy-product .size-picker li {
  list-style: none !important;
}

/* ─── 2) HIDE the native radio circles ───────────────────────────── */
section.stussy-product input[type="radio"].swatch-radio,
section.stussy-product input[type="radio"].size-radio {
  display: none !important;
}

/* ─── 3) RESTYLE your labels back into pills ─────────────────────── */
section.stussy-product .swatch-pill {
  /* your existing styles here, for example: */
  border: 1px solid #fff;
  padding: 0.5rem 1rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
section.stussy-product .swatch-pill:hover {
  background: rgba(255, 255, 255, 0.1);
}

section.stussy-product .size-btn {
  /* your existing size‐button styles */
  border: 1px solid #fff;
  padding: 0.5rem;
  width: 2.5rem;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
}
section.stussy-product .size-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── 4) UNDERLINE or TONE DOWN sold-out variants ─────────────── */
section.stussy-product .swatch-pill.swatch--soldout,
section.stussy-product .size-btn.is-soldout {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* ─── 1) FORCE flex‐row + remove bullets ───────────────────────────────── */
section.stussy-product .swatch-list,
section.stussy-product .size-picker {
  list-style: none !important; /* no bullets */
  margin: 1rem 0 !important; /* spacing above/below */
  padding: 0 !important; /* no list padding */
  display: flex !important; /* arrange children in a row */
  flex-wrap: wrap !important; /* wrap to new line if needed */
  gap: 0.75rem !important; /* gap between pills */
}

/* explicitly remove any lingering bullet/list-item markers */
section.stussy-product .swatch-list li,
section.stussy-product .size-picker li {
  list-style: none !important;
}

/* ─── 2) HIDE the native radio circles ───────────────────────────── */
section.stussy-product input[type="radio"].swatch-radio,
section.stussy-product input[type="radio"].size-radio {
  display: none !important;
}

/* ─── 3) RESTYLE your labels back into pills ─────────────────────── */
section.stussy-product .swatch-pill {
  /* your existing styles here, for example: */
  border: 1px solid #fff;
  padding: 0.5rem 1rem;
  background: transparent;
  color: #000;
  cursor: pointer;
  transition: background 0.2s;
}
section.stussy-product .swatch-pill:hover {
  background: rgba(255, 255, 255, 0.1);
}

section.stussy-product .size-btn {
  /* your existing size‐button styles */
  border: 1px solid #fff;
  padding: 0.5rem;
  width: 2.5rem;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s;
}
section.stussy-product .size-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── 4) UNDERLINE or TONE DOWN sold-out variants ─────────────── */
section.stussy-product .swatch-pill.swatch--soldout,
section.stussy-product .size-btn.is-soldout {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* ─── PRODUCT OPTIONS: make swatches & sizes line up ───────────────── */
.info-col {
  /* ensure we can target them tightly */
}
/* === swatch pills (colour) & size buttons ========================= */
.info-col ul.swatch-list,
.info-col ul.size-picker{
  display:flex !important;
  flex-wrap:wrap;
  gap:1rem;
  list-style:none;
  margin:1rem 0;
  padding:0;
}

/* hide native radios */
.info-col input.swatch-radio,
.info-col input.size-radio{
  position:absolute !important;
  left:-9999px !important;
}

/* ─── 1.  DEFAULT COLOUR PILL  ───────────────────────────────────── */
.info-col .swatch-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem 1rem;
  border:2px solid #a4a4a4;     /* light outline so it shows */
  border-radius:6px;
  background:#fff;              /* hollow pill               */
  color:#4d4d4d;
  text-transform:uppercase;
  cursor:pointer;
  opacity:1 !important;         /* visible on page load      */
  visibility:visible !important;
  transition:background .25s, border-color .25s, color .25s;
}

/* ─── 2.  DEFAULT SIZE BUTTON  (no border)  ─────────────────────── */
.info-col .size-btn{
  position:relative;
  padding:0.4rem 0;
  background:transparent !important;
  border:none !important;       /* remove outline            */
  color:#4d4d4d;
  text-transform:uppercase;
  cursor:pointer;
  opacity:1 !important;
  visibility:visible !important;
}

/* underline for size buttons (kept in case it was below) */
.info-col .size-btn::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  height:2px;
  width:0;
  background:#000;
  transform:translateX(-50%);
  transition:width .25s ease;
}
.info-col input.size-radio:hover + .size-btn::after,
.info-col input.size-radio:focus-visible + .size-btn::after{
  width:100%;
}
.info-col input.size-radio:checked + .size-btn::after{
  width:100%;
}

/* ─── 3.  ACTIVE COLOUR PILL  ───────────────────────────────────── */
.info-col input.swatch-radio:checked + .swatch-pill{
  background:#202124;
  color:#fff;
  border-color:#202124;
}

/* ─── 4.  SOLD-OUT STATES  ──────────────────────────────────────── */
.info-col .swatch-pill.swatch--soldout,
.info-col .size-btn.is-soldout{
  opacity:.4;
  color:#202124;
  pointer-events:none;
}



/* ——— Accordion Summary Styling ——— */
.prod-accordion {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}
.prod-accordion summary {
  list-style: none; /* remove default ▶ */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75em 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.2s;
}
.prod-accordion summary:hover {
  background: rgba(255, 255, 255, 0.05);
}
.prod-accordion summary::-webkit-details-marker {
  display: none; /* hide native arrow */
}
.prod-accordion summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 0.5em;
  transform-origin: center center;
  transition: transform 0.2s;
  color: rgba(255, 255, 255, 0.7);
}
/* when open, flip the arrow down */
.prod-accordion[open] summary::before {
  content: "▼";
}
/* indent the body a bit to line up under the text, not the arrow */
.prod-accordion .accordion-body {
  padding: 0.5em 0 1em 1.5em;
  font-size: 0.9em;
  line-height: 1.5;
  color: rgba(32, 33, 36, 0.8);
}

/* Move our custom arrow to after the text, with tighter spacing */
.prod-accordion summary {
  justify-content: flex-start; /* align text & arrow in one line */
  gap: 0.1em; /* small gap between text and arrow */
  padding: 0.75em 0;
}
.prod-accordion summary::before {
  display: none; /* remove the left-side arrow */
}
.prod-accordion summary::after {
  content: "▶"; /* right-pointing arrow by default */
  margin-left: auto; /* push it to the far right of the summary */
  transition: transform 0.2s;
  color: rgba(255, 255, 255, 0.7);
}
.prod-accordion[open] summary::after {
  content: "▼"; /* down arrow when open */
}

.prod-accordion summary {
  display: inline-flex; /* let text and arrow sit together */
  align-items: center;
  gap: 0.25em; /* very tight gap */
  padding: 0.75em 0;
}

.prod-accordion summary::before {
  content: none; /* remove any existing before-arrow */
}

.prod-accordion summary::after {
  content: "▶"; /* right-pointing arrow */
  transition: transform 0.2s;
  color: rgba(255, 255, 255, 0.7);
}

.prod-accordion summary {
  display: inline-flex;
  align-items: center;
  gap: 0.2em; /* tiny space between text & arrow */
  padding: 0.75em 0;
  cursor: pointer;
}

.prod-accordion summary::after {
  content: ">"; /* small right arrow */
  font-size: 0.75em; /* shrink it down */
  margin-left: 0.2em;
  display: inline-block;
  transform: rotate(0);
  transition: transform 0.2s ease;
  color: rgba(255, 255, 255, 0.7);
}

/* Rotate arrow down when the section is open... */
.prod-accordion[open] summary::after {
  transform: rotate(90deg);
}

/* ...and also on hover */
.prod-accordion summary:hover::after {
  transform: rotate(90deg);
}
.prod-accordion[open] summary::after {
  content: "▼"; /* down arrow when open */
}

.prod-accordion summary::after {
  /* start as a little right-pointing arrow */
  content: ">";
  font-size: 0.75em;
  margin-left: 0.2em;
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease;
  color: rgba(32, 33, 36, 0.7);
}

/* when open or hovered, rotate exactly 90° clockwise */
.prod-accordion[open] summary::after,
.prod-accordion summary:hover::after {
  transform: rotate(90deg);
}
/* remove dots from the gallery thumbnail list */
.media-col .gallery-scroll {
  list-style: none;
  margin: 0;
  padding: 0;
}
.media-col .gallery-scroll li {
  list-style: none;
}

/* ================================
   Product‐Form Buttons (Add to Bag + Checkout)
   ================================ */

/* Base styles for both buttons */
.btn-atc,
.btn-checkout {
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75em 2em; /* 12px top/bottom, 32px left/right */
  margin: 0.5em 0.25em; /* adds a little breathing room */
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 140px; /* ensures a minimum clickable area */
}

/* ADD TO BAG button: solid background, white text */
.btn-atc {
  background-color: #000; /* change to your brand’s primary color */
  color: #fff;
  border-color: #000;
}

/* Hover state for the Add to Bag button */
.btn-atc:hover {
  background-color: #333; /* slightly lighter dark on hover */
  border-color: #333;
  color: #fff;
}

/* CHECKOUT button: outlined style */
.btn-checkout {
  background-color: transparent;
  color: #000; /* match border/text to your brand */
  border-color: #000;
}

/* Hover state for the Checkout button */
.btn-checkout:hover {
  background-color: #000;
  color: #fff;
}

/* Disabled state (if you ever need it) */
.btn-atc[disabled],
.btn-checkout[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive tweaks for smaller/mobile screens */
@media screen and (max-width: 749px) {
  .btn-atc,
  .btn-checkout {
    width: 100%;
    max-width: 100%;
    padding: 1em 0;
    font-size: 1.1rem;
    margin-top: 0.75em;
  }
}
/* ============================================
   Unified Button Styles: “Outlined → Solid on Hover”
   Applies identically to both Add to Bag (btn-atc)
   and Checkout (btn-checkout)
   ============================================ */

/* Base (default) styles for both buttons */
.btn-atc,
.btn-checkout {
  display: inline-block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75em 2em; /* 12px top/bottom, 32px left/right */
  margin: 0.5em 0.25em; /* spacing between buttons */
  border-radius: 4px;
  border: 2px solid #000; /* black outline */
  background-color: transparent;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 140px; /* ensures a minimum clickable area */
}

/* Hover: fill in with black, white text */
.btn-atc:hover,
.btn-checkout:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

/* Disabled state (if you ever need it) */
.btn-atc[disabled],
.btn-checkout[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive tweaks for smaller/mobile screens */
@media screen and (max-width: 749px) {
  .btn-atc,
  .btn-checkout {
    width: 100%;
    max-width: 100%;
    padding: 1em 0;
    font-size: 1.1rem;
    margin-top: 0.75em;
  }
}

/* =========================================================
   Mobile Menu Fix: Always show top‐level labels in dark color,
   and make sure sub‐menu items are visible when expanded.
   ========================================================= */

/* 1) Make sure all top‐level menu links are black on white */
@media screen and (max-width: 749px) {
  /* If your header/menu uses a <summary> tag for the “hamburger” title: */
  .mobile-menu summary,
  .mobile-menu .site-nav__link {
    color: #000 !important; /* force black text */
    background-color: #fff; /* ensure white background behind it */
  }

  /* If your “HOME” is inside a <details><summary> pattern, target that summary */
  details.mobile-menu summary {
    color: #000 !important;
    background: #fff !important;
    padding: 0.75rem 1rem; /* add touch‐friendly padding */
    font-size: 1rem;
    border-bottom: 1px solid #eee;
  }

  /* 2) Ensure sub‐menu <ul> items become fully visible when expanded */
  details.mobile-menu[open] ul {
    display: block !important; /* override any “display: none” */
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important; /* let it expand fully */
    background: #fff; /* white background for submenu */
    padding-left: 0; /* or whatever your design needs */
  }

  /* 3) Style the links inside the submenu for readability */
  details.mobile-menu ul li {
    list-style: none;
    border-bottom: 1px solid #eee;
  }
  details.mobile-menu ul li a {
    display: block;
    color: #000 !important;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    font-weight: 500;
  }
  details.mobile-menu ul li a:hover {
    background-color: #f5f5f5;
  }

  /* 4) If you have a standalone <ul class="mobile-nav"> (not details/summary),
     force it to show when the “menu open” icon is tapped: */
  .mobile-nav {
    display: none; /* initially hidden */
  }
  .mobile-menu-open .mobile-nav {
    display: block !important; /* show when menu has “open” class */
    background: #fff;
    padding: 0;
    margin: 0;
  }
  .mobile-nav li {
    list-style: none;
    border-bottom: 1px solid #eee;
  }
  .mobile-nav li a {
    color: #000 !important;
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  .mobile-nav li a:hover {
    background-color: #f5f5f5;
  }
}
/* ───────────────────────────────────────────
   1) Mobile Styles (≤749px)
───────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  /* Mobile: make all top‐level links black-on-white, etc. */
  .mobile-menu summary,
  .mobile-menu .site-nav__link {
    color: #000 !important;
    background-color: #fff;
  }

  /* Mobile: show submenu fully when <details> is open */
  details.mobile-menu[open] ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff;
    padding-left: 0;
  }

  /* Mobile: style submenu links (no hover here) */
  details.mobile-menu ul li {
    list-style: none;
    border-bottom: 1px solid #eee;
  }
  details.mobile-menu ul li a {
    display: block;
    color: #000 !important;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    font-weight: 500;
    /* NO hover rule here */
  }
  /* If you want to explicitly block hover on mobile, you could do: */
  details.mobile-menu ul li a:hover {
    background-color: transparent;
  }
}

/* ───────────────────────────────────────────
   2) Desktop Hover Styles (≥750px)
───────────────────────────────────────────── */
@media screen and (min-width: 750px) {
  /* Desktop: apply hover background to all navigation links */
  .site-nav__link:hover,
  .menu-drawer__menu-item a:hover {
    background-color: #f5f5f5;
  }

  /* Desktop: you can also restore any desktop‐only styling here */
  .site-nav__link {
    color: #333;
    padding: 0.75rem 1rem;
  }
}

/* theme.css or section-settings.css */
.header-wrapper,
#MenuDrawer,             /* Dawn drawer menu */
.menu-drawer__overlay {  
  position: relative;    /* make sure it establishes a stacking context */
  z-index: 9999 !important;
}

/* (Optional) push *down* the fullscreen banner so it never covers UI controls */
.template-index .banner--fullscreen {
  z-index: 1;            /* or just remove z-index altogether */
}
/* Make menu links dark when the header is in overlay mode on the index page */
.template-index .header--overlay .header__menu-item,
.template-index .header--overlay .header__active-link {
  color: #000 !important;     /* pick any colour that contrasts your background */
  opacity: 1 !important;      /* kill Dawn’s 0.75 opacity on transparent header */
}
/* subtle “added” pulse */
.btn-atc.pulse {
  animation: atcPulse 0.6s ease-out;
}
@keyframes atcPulse {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.05);}
  100% { transform: scale(1);   }
}
.cart-count-bubble.hidden { display: none; }

/* === NUDE-PROJECT STYLE SIZE PICKER =============================== */
/* 1. Layout -------------------------------------------------------- */
.size-picker{
  display:flex;                    /* inline row of buttons   */
  gap:12px;                        /* space between buttons   */
  justify-content:center;          /* centre in the product   */
  padding:0;                       /* remove UL default       */
}

/* 2. Hide the native radios --------------------------------------- */
.size-radio{
  position:absolute;
  opacity:0;                       /* still focus-able for a11y */
  pointer-events:none;
}

/* 3. Base button look (unselected) -------------------------------- */
.size-btn{
  --side:48px;                     /* quick size tweak        */
  width:var(--side);
  height:var(--side);
  border:2px solid #000;           /* black keyline           */
  border-radius:6px;               /* subtle rounding         */
  background:transparent;
  font:600 0.82rem/1 "Helvetica Neue",Arial,Helvetica,sans-serif;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

/* 4. Hover / focus (keyboard & mouse) ----------------------------- */
.size-radio:not(:disabled):hover + .size-btn,
.size-radio:not(:disabled):focus-visible + .size-btn{
  background:#000;
  color:#fff;
}

/* 5. Checked state ------------------------------------------------ */
.size-radio:checked + .size-btn{
  background:#000;                 /* filled black when picked */
  color:#fff;
}

/* 6. Sold-out / disabled ----------------------------------------- */
.size-radio:disabled + .size-btn{
  border-color:#c4c4c4;
  color:#c4c4c4;
  cursor:not-allowed;
  opacity:.45;
}

/* Optional – make the whole row wrap on mobiles */
@media(max-width:480px){
  .size-picker{flex-wrap:wrap;row-gap:8px;}
}
/* === MINIMAL TEXT-ONLY SIZE PICKER ===================================== */

/* 1. Horizontal layout -------------------------------------------------- */
.size-picker{
  display:flex;
  gap:24px;                 /* space between size labels */
  justify-content:center;
  padding:0;
  margin:0;
  list-style:none;
}

/* 2. Hide the native radios (they still work for a11y) ------------------ */
.size-radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* 3. Base label look ---------------------------------------------------- */
.size-btn{
  position:relative;        /* for the underline pseudo-element */
  padding:6px 2px;          /* top/bottom breathing room */
  font:600 0.9rem/1.2 "Helvetica Neue",Arial,Helvetica,sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#000;
  cursor:pointer;
}

/* 4. Underline (starts hidden) ----------------------------------------- */
.size-btn::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2px;              /* distance from text */
  height:2px;
  width:0;                  /* hidden by default  */
  background:#000;
  transform:translateX(-50%);
  transition:width .25s ease;
}

/* 5. Hover / keyboard focus: underline animates from centre ------------ */
.size-radio:not(:disabled):hover + .size-btn::after,
.size-radio:not(:disabled):focus-visible + .size-btn::after{
  width:100%;
}

/* 6. Checked = stay underlined ----------------------------------------- */
.size-radio:checked + .size-btn::after{
  width:100%;
}

/* 7. Disabled / sold-out size ------------------------------------------ */
.size-radio:disabled + .size-btn{
  color:#b3b3b3;
  cursor:not-allowed;
}
.size-radio:disabled + .size-btn::after{
  background:#b3b3b3;
}

/* Optional – wrap on mobiles */
@media(max-width:480px){
  .size-picker{flex-wrap:wrap;row-gap:12px;}
}
/* --- kill any leftover borders ------------------------------------------------ */
.size-btn,
.size-item{
  border:none !important;          /* overrides previous border settings  */
  outline:none !important;         /* some themes add an outline on focus */
}
/* === FINAL CLEAN-UP OVERRIDES ========================================= */

/* 1. make the UL itself truly centred */
.size-picker{
  justify-content:center !important;   /* flex-centre the items        */
  width:max-content;                   /* shrinkwrap so 'auto' centres */
  margin:0 auto;                       /* …classic centring trick      */
}

/* 2. strip ALL visual chrome from the label in every state ------------- */
.size-btn{
  background:transparent   !important;
  box-shadow:none          !important; /* some themes add shadows      */
  border:none              !important; /* just in case                 */
  outline:none             !important;
  color:#000;                            /* steady black text           */
}
.size-radio:checked + .size-btn,
.size-radio:not(:disabled):hover + .size-btn{
  /* keep exactly the same look while underline handles the feedback */
  background:transparent   !important;
  color:#000               !important;
}
/* sold-out sizes stay grey text but still backgroundless */
.size-radio:disabled + .size-btn{
  background:transparent   !important;
  box-shadow:none          !important;
}
/* — lock letter colour to pure white — */
.size-btn{
  color:#202124 !important;                       /* default */
}
.size-radio:checked + .size-btn,
.size-radio:not(:disabled):hover + .size-btn{
  color:#000000 !important;                       /* clicked & hover */
}
.prod-divider{
  border:0;
  height:1px;
  background:#d9d9d9;
  margin:32px 0 0;   /* top, right/left, bottom */
}

/* === CTA bar – spans both columns =================================== */
.prod-footer{
  width:100%;                        /* matches page-width container     */
  margin-top:40px;
  display:flex;
  gap:0;
}

.prod-footer button{
  flex:1;
  padding:18px 0;                    /* shorter height                   */
  font:700 1rem/1 "Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.btn-atc{
  background:#000;
  color:#fff;
  border:none;
}
.btn-checkout{
  background:#f6f6f6;
  color:#000;
  border:2px solid #000;
}

/* Optional phone layout */
@media(max-width:600px){
  .prod-footer{flex-direction:column;}
  .prod-footer button + button{border-top:2px solid #000;}
}
/* === CTA bar – spans both columns =================================== */
.prod-footer{
  position:sticky;
  bottom:0;           /* sticks to viewport bottom */
  left:0;
  width:100%;
  z-index:20;         /* sit above other content   */
  display:flex;
  gap:0;
  
}

.prod-footer button{
  flex:1;
  padding:18px 0;                    /* shorter height                   */
  font:700 1rem/1 "Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.btn-atc{
  background:#000;
  color:#fff;
  border:none;
}
.btn-checkout{
  background:#f6f6f6;
  color:#000;
  border:2px solid #000;
}

/* Optional phone layout */
@media(max-width:600px){
  .prod-footer{flex-direction:column;}
  .prod-footer button + button{border-top:2px solid #000;}
}

/* — product title scale ---------------------------------- */
.stussy-product .prod-title{
  /* desktop / large screens */
  font-size:3.25rem;        /* ~52 px.  Pick any value you like */
  line-height:1.1;
  margin-bottom:1.5rem;     /* keeps space above the price */
  color: #202124;
}

/* optional: make it even smaller on phones */
@media(max-width:600px){
  .stussy-product .prod-title{
    font-size:2.4rem;       /* ~38 px */
  }
}
.prod-desc {
    font-size: small;
    padding-bottom: 50px;
  color: #202124;
}

/* === site-wide background override =============================== */
html, body{
  background:#fff !important;   /* forces every page to pure white */
}
.related-products {
      background:#fff !important;   /* forces every page to pure white */
  color: #202124;
}
.related-products h2{
    color: #202124;
}

.card__content h3 {
      color: #202124;

}

.prod-accordion summary {
  color: #202124;
}
.prod-price {
  color: #202124;
  size: small;
}

/* fixed bar that covers just the right half */
.prod-footer{
  position:fixed;
  bottom:0;
  left:50%;            /* start where the info column starts     */
  width:50%;           /* take up the right half only            */
  display:flex;
  gap:0;
  z-index:40;
  background:#fff;
  box-shadow:0 -1px 4px rgba(0,0,0,.12);
}

/* keep content above the bar so nothing is hidden */
.info-col{ padding-bottom:120px; }

/* ================================================================
   Full-bleed product layout WITH EDGE & TOP/BOTTOM PADDING
   (desktop ≥ 1024 px)
   ---------------------------------------------------------------- */
@media (min-width:1024px){
  :root{
    --edge-pad:3rem;   /* left / right breathing room         */
    --col-gap :3rem;   /* gap between image + info columns    */
    --vert-pad:4rem;   /* ★ top + bottom space for the grid   */
  }

  /* 1 │ two-column wrapper */
  .stussy-product.page-width{
    max-width:none;
    width:100%;
    margin:0;
    padding:var(--vert-pad) var(--edge-pad);  /* ★ top/bottom + sides */

    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:var(--col-gap);
  }

  /* 2 │ columns auto-fill their grid tracks */
  .stussy-product .media-col,
  .stussy-product .info-col{
    width:100%;
  }

  /* 3 │ keep the image column inside the new padding */
  /* (removed the old negative margin) */
}
/* =================================================================
   FULL-BLEED PRODUCT LAYOUT  (DESKTOP ≥ 1024 px)
   ---------------------------------------------------------------- */
@media (min-width:1024px){
  :root{
    --edge-pad:3rem;   /* space from viewport edge (left & right)   */
    --top-pad :4rem;   /* space above (and below, if you add it)    */
    --col-gap :3rem;   /* gap between the two columns               */
    --info-pad:10rem; /* extra inset on the left of the info col   */
  }

  /* 1 │ wrapper becomes a two-column grid that spans full width */
  .stussy-product.page-width{
    max-width:none;
    width:100%;
    margin:0;
    padding:var(--top-pad) var(--edge-pad);   /* top / sides         */
    display:grid;
    grid-template-columns:1fr 1fr;            /* 50 % / 50 % split   */
    column-gap:var(--col-gap);
  }

  /* 2 │ columns auto-fill their tracks */
  .stussy-product .media-col,
  .stussy-product .info-col{
    width:100%;
  }

  /* 3 │ inner gutter for the info column */
  .stussy-product .info-col{
    padding-left:var(--info-pad);             /* ← new inner space   */
    /* if you use a fixed CTA bar, keep this so text isn't hidden: */
    padding-bottom:120px;
  }
}

/* tablets & phones keep the centred “page-width” layout */
/* ---------------------------------------------------------------
   horizontal rule above & below each .prod-accordion
   --------------------------------------------------------------- */
.prod-accordion{
  border-bottom:1px solid #d9d9d9;   /* underline                     */
  padding:2rem 0;                    /* keeps summary from hugging it */
}

/* keep the single top rule only once */
.prod-accordion:first-of-type{
  border-top:1px solid #d9d9d9;      /* existing line you already had */
}
/* 1.  Smaller accordion headings (already added) */
.prod-accordion > summary{
  font-size:1.1rem;        /* tweak to taste */
  line-height:1.3;
  letter-spacing:.02em;
}

/* 2.  Even smaller body copy inside each accordion */
.prod-accordion .accordion-body{
  font-size:0.9rem;        /* about two steps down from heading */
  line-height:1.5;
  letter-spacing:.02em;
}
/* hide & disable when the bar gets .cta-hidden */
.prod-footer.cta-hidden{
  opacity:0;
  pointer-events:none;   /* no ghost clicks under the fold */
  transition:opacity .25s ease;
}

/* ensure it fades back in nicely */
.prod-footer{
  transition:opacity .25s ease;
}
/* ===================================================================
   MOBILE   (stacked, full-width buttons fixed to the bottom)
   ------------------------------------------------------------------- */
/* ===================================================================
   MOBILE  (side-by-side buttons, full-width bar)
   ------------------------------------------------------------------- */
@media (max-width:750px){

  /* 1 ▍bar spans the whole screen and sticks to the bottom */
  .prod-footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;              /* edge to edge */
    display:flex;            /* ← row layout (default) */
    gap:0;
    z-index:60;
  }

  /* 2 ▍each button takes 50 % width */
  .prod-footer button{
    flex:1 1 50%;            /* grow + shrink, basis 50 % */
    padding:18px 0;
    font-size:1rem;
  }

  /* optional: tiny hairline divider between the two buttons */
  .prod-footer button + button{
    border-left:2px solid #000;   /* vertical divider */
    border-top:none;              /* remove the column divider */
  }

  /* 3 ▍prevent page content from hiding behind the bar */
  body{
    padding-bottom:100px;         /* same height as the bar */
  }
}

/* keep the fade-out helper */
.prod-footer{ transition:opacity .25s ease; }
.prod-footer.cta-hidden{ opacity:0; pointer-events:none; }
/* ===============================================================
   MOBILE CTA  – border & colour lock
   (add after your other @media(max-width:750px) block)
   -------------------------------------------------------------- */
@media (max-width:750px){

  /* 1 ▍outer frame around the whole bar */
  .prod-footer{
    border:1px solid #202124;        /* 1-px frame */
    border-radius:0;                 /* square edges */
    overflow:hidden;                 /* hide any stray radius */
  }

  /* 2 ▍vertical hairline between the buttons */
  .prod-footer button + button{
    border-left:1px solid #202124;   /* divider */
  }

  /* 3 ▍button colours */
  .btn-atc{
    background:#202124 !important;
    color:#fff !important;
    border:none !important;
  }

  .btn-checkout{
    background:#fff !important;
    color:#202124 !important;
    border:none !important;
  }

  /* stop mobile tap / focus from turning CHECKOUT dark */
  .btn-checkout:hover,
  .btn-checkout:active,
  .btn-checkout:focus{
    background:#fff !important;
    color:#202124 !important;
  }
}

/* ==============================================================
   MOBILE  ≤ 750 px  – CTA bar flush & gap-less
   -------------------------------------------------------------- */
@media (max-width:750px){

  /* bar: fixed, full-width, no inner padding */
  .prod-footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
    flex-direction:row !important;    /* keep in one row   */
    gap:0 !important;                 /* zero flex gap     */
    z-index:60;
  }

  /* each button = 50 % and zero margins */
  .prod-footer button{
    flex:1 0 50%;
    width:50%;
    margin:0;                         /* kill default btn margin */
    border-radius:0;                  /* square corners edge-to-edge */
    padding:18px 0;
    font-size:1rem;
  }

  /* vertical hairline divider between buttons */
  .prod-footer button + button{
    border-left:2px solid #000;
    border-top:none;                  /* ensure no horizontal rule */
  }

  /* lift page content so it isn’t hidden behind the bar */
  body{ padding-bottom:100px; }
}

/* existing fade helper */
.prod-footer{ transition:opacity .25s ease; }
.prod-footer.cta-hidden{ opacity:0; pointer-events:none; }
/* =================================================================
   DESKTOP ≥ 751 px  – framed CTA bar, fixed colours
   ---------------------------------------------------------------- */
@media (min-width:751px){

  /* 1 ▍outer frame around the full-width bar */
  .prod-footer{
    border:1px solid #202124;   /* thin dark frame */
    border-radius:0;
    overflow:hidden;            /* hide stray radii / shadows */
  }

  /* 2 ▍vertical divider between the two buttons */
  .prod-footer button + button{
    border-left:1px solid #202124;  /* 1-px divider */
  }

  /* 3 ▍lock button colours */
  .btn-atc{
    background:#202124 !important;
    color:#fff !important;
    border:none !important;
  }

  .btn-checkout{
    background:#fff !important;
    color:#202124 !important;
    border:none !important;
  }

  /* keep CHECKOUT white even on hover / tap / focus */
  .btn-checkout:hover,
  .btn-checkout:active,
  .btn-checkout:focus{
    background:#fff !important;
    color:#202124 !important;
  }
}

/* fade helper (leave as-is) */
.prod-footer{ transition:opacity .25s ease; }
.prod-footer.cta-hidden{ opacity:0; pointer-events:none; }

/* tighten desktop CTA frame – put after the previous desktop block */
@media (min-width:751px){

  /* 1 ▍kill the stray padding that was pushing the buttons inwards */
  .prod-footer{
    padding:0 !important;        /* no inner whitespace         */
  }

  /* 2 ▍make both buttons butt against the frame & each other */
  .prod-footer button{
    margin:0 !important;         /* no default btn margin       */
    border-radius:0 !important;  /* square corners              */
  }

  /* 3 ▍vertical divider stays 1 px */
  .prod-footer button + button{
    border-left:1px solid #202124 !important;
  }
}
.size-guide img{
  max-width:100%;
  height:auto;
}


/* make the auto-generated policy page title black */
.template-page h1,
.template-policy h1{
  color:#000;          /* black */
}

/* — menu (hamburger) icon colour — */
.header__icon--menu .icon-hamburger,
.header__icon--menu .icon-hamburger *,
.header-drawer__toggle svg,
.header-drawer__toggle svg * {
  stroke: #000;          /* <-- pick any colour you want */
  fill:  #ffcb82;           /* some themes use <path fill> instead of stroke */
}
/* MOBILE: kill Dawn's ratio stage inside our custom stussy product template */
@media (max-width: 749px){
  .stussy-product .media,
  .stussy-product .gallery-item,
  .stussy-product .gallery-scroll {
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Dawn positions media children absolutely; switch to normal flow */
  .stussy-product .media > * {
    position: static !important;
    inset: auto !important;
  }

  /* Make the image actually size the box and stay centered */
  .stussy-product .media img,
  .stussy-product .gallery-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
  }

  /* Optional: edge-to-edge gallery if you want it */
  .stussy-product .media-col {
    margin-left: -16px;   /* match your theme’s mobile page padding */
    margin-right: -16px;
  }
}
/* Mobile gallery fixes for stussy product */
@media (max-width: 749px){
  .stussy-product .gallery-scroll{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important;            /* avoid stray gaps */
  }
  .stussy-product .gallery-item{
    list-style: none !important;
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .stussy-product .stussy-gallery-img{
    display: block !important;    /* remove inline-img whitespace */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
  }

  /* Optional: remove side padding if you want edge-to-edge media */
}
@media (max-width: 749px){
  .stussy-product .gallery-scroll{
    list-style:none!important; padding:0!important; margin:0!important;
    display:flex!important; overflow-x:auto!important;
    scroll-snap-type:x mandatory!important; -webkit-overflow-scrolling:touch!important;
    gap:0!important;
  }
  .stussy-product .gallery-item{
    list-style:none!important; flex:0 0 100%!important;
    scroll-snap-align:start!important; margin:0!important; padding:0!important;
  }
  .stussy-product .stussy-gallery-img{
    display:block!important; width:100%!important; height:auto!important;
    object-fit:contain!important; object-position:center!important; margin:0 auto!important;
  }
}