/* ============================================================
   PADMA ENTERPRISES — commerce chrome
   Implements the Nike-derived design system:
   ink/canvas/soft-cloud palette · pill geometry · flat cards ·
   8px spacing · 48px section rhythm · Bebas display + Inter UI
   ============================================================ */

:root {
  /* colors */
  --ink: #111111;
  --canvas: #ffffff;
  --on-primary: #ffffff;
  --soft-cloud: #f5f5f5;
  --hairline: #cacacb;
  --hairline-soft: #e5e5e5;
  --charcoal: #39393b;
  --ash: #4b4b4d;
  --mute: #707072;
  --stone: #9e9ea0;
  --sale: #d30005;
  --sale-deep: #780700;
  --success: #007d48;
  --success-bright: #1eaa52;
  --info: #1151ff;

  /* spacing (8px base) */
  --sp-xxs: 2px; --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px;
  --sp-lg: 18px; --sp-xl: 24px; --sp-xxl: 30px; --sp-section: 48px;

  /* radii */
  --r-none: 0; --r-sm: 18px; --r-md: 24px; --r-lg: 30px; --r-full: 9999px;

  --maxw: 1440px;
  --gutter: 48px;
  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 16px/1.5 var(--font-ui);
  color: var(--ink);
  background: var(--canvas);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
footer.site { margin-top: auto; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--ink); color: var(--on-primary); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1920px) { :root { --gutter: 80px; } }
@media (max-width: 1199px) { :root { --gutter: 32px; } }
@media (max-width: 639px)  { :root { --gutter: 16px; } }

/* ---------- typography tiers ---------- */
.display-campaign {
  font-family: var(--font-display);
  font-size: 96px; line-height: 0.9; letter-spacing: 0;
  text-transform: uppercase; font-weight: 400;
}
.heading-xl { font-size: 32px; font-weight: 500; line-height: 1.2; }
.heading-lg { font-size: 24px; font-weight: 500; line-height: 1.2; }
.heading-md { font-size: 16px; font-weight: 500; line-height: 1.75; }
.body-strong { font-size: 16px; font-weight: 500; line-height: 1.5; }
.caption-md { font-size: 14px; font-weight: 500; line-height: 1.5; }
.caption-sm { font-size: 12px; font-weight: 500; line-height: 1.5; }
.utility-xs { font-size: 9px; font-weight: 500; line-height: 1.75; }
.mute { color: var(--mute); }
.link-md {
  font-size: 16px; font-weight: 500; line-height: 1.75;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 1023px) { .display-campaign { font-size: 64px; } }
@media (max-width: 599px)  { .display-campaign { font-size: 48px; } .heading-xl { font-size: 26px; } }

/* ---------- buttons: pill or circle, nothing else ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-sm);
  height: 48px; padding: 0 32px;
  border: 0; border-radius: var(--r-lg);
  font-size: 16px; font-weight: 500; line-height: 1.5;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.5); opacity: .5; } /* signature tap collapse */
.btn--primary { background: var(--ink); color: var(--on-primary); }
.btn--secondary { background: var(--soft-cloud); color: var(--ink); }
.btn--onimage { background: var(--canvas); color: var(--ink); height: 44px; padding: 0 24px; }
.btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.iconbtn {
  width: 40px; height: 40px; border: 0; border-radius: var(--r-full);
  background: var(--soft-cloud); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s ease, opacity .12s ease;
}
.iconbtn:active { transform: scale(.5); opacity: .5; }
.iconbtn--bare { background: transparent; }
.iconbtn svg { width: 22px; height: 22px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease;
}
.chip:active { transform: scale(.5); opacity: .5; }
.chip.is-active { background: var(--ink); color: var(--on-primary); border-color: var(--ink); }

/* ---------- utility bar ---------- */
.utility-bar { background: var(--soft-cloud); height: 36px; }
.utility-bar .wrap {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.utility-bar nav { display: flex; gap: var(--sp-lg); margin-left: auto; }
.utility-bar a { font-size: 12px; font-weight: 500; }
.utility-bar .ub-dealer { display: inline-flex; align-items: center; gap: 7px; }
.utility-bar .ub-dealer svg { width: 16px; height: 16px; }
@media (max-width: 639px) {
  .utility-bar nav a:nth-child(2) { display: none; }
}

/* ---------- primary nav ---------- */
.primary-nav { background: var(--canvas); position: sticky; top: 0; z-index: 60; }
.primary-nav .wrap {
  height: 64px; display: flex; align-items: center; gap: var(--sp-xl);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; padding-right: 18px; }
@media (max-width: 1330px) { .nav-links { gap: 16px; } .nav-links a { font-size: 15px; } }
.brand svg { width: 34px; height: 34px; }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.brand-sub { display: block; font-size: 8px; font-weight: 500; letter-spacing: .34em; color: var(--mute); }
.nav-links { display: flex; gap: var(--sp-xl); margin: 0 auto; }
.primary-nav .wrap { position: relative; }
.nav-links a {
  font-size: 16px; font-weight: 500; padding: 19px 2px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-links a.is-active { border-bottom-color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: var(--sp-md); margin-left: auto; }

.search-pill {
  display: flex; align-items: center; gap: var(--sp-sm);
  background: var(--soft-cloud); border-radius: var(--r-md);
  height: 40px; padding: 8px 16px; width: 180px;
  border: 2px solid transparent;
}
.search-pill svg { width: 18px; height: 18px; flex: none; }
.search-pill input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: 400 16px/1.5 var(--font-ui); color: var(--ink);
}
.search-pill:focus-within {
  background: var(--canvas); border-color: var(--ink);
  box-shadow: 0 0 0 12px var(--soft-cloud);
}
.bag-btn, .wish-btn { position: relative; }
.count-dot {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full); background: var(--ink); color: var(--on-primary);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.hamburger { display: none; }

/* shop dropdown */
.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: 500 16px/1.5 var(--font-ui); color: var(--ink);
  padding: 19px 2px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-dd-btn.is-active { border-bottom-color: var(--ink); }
.nav-dd-btn svg { transition: transform .2s ease; }
.nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--canvas); border: 1px solid var(--hairline);
  min-width: 220px; padding: 8px 0; display: none; z-index: 75;
}
.nav-dd.open .nav-dd-menu { display: block; }
.nav-dd-menu a {
  display: block; padding: 11px 20px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
}
.nav-dd-menu a:hover { background: var(--soft-cloud); }

/* currency selector */
.cur-select {
  border: 1px solid var(--hairline); background: var(--canvas);
  font: 500 12px var(--font-ui); color: var(--ink);
  height: 26px; border-radius: var(--r-lg); padding: 0 10px;
  cursor: pointer; outline: none;
}

@media (max-width: 1100px) { .nav-links { gap: var(--sp-lg); } .search-pill { width: 140px; } }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .search-pill { display: none; }
  .hamburger { display: inline-flex; }
}

/* mobile drawer */
.mob-drawer {
  position: fixed; inset: 0 25% 0 0; min-width: 300px; z-index: 90;
  background: var(--canvas); padding: var(--sp-xl);
  transform: translateX(-102%); transition: transform .28s ease;
  overflow-y: auto;
}
.mob-drawer.open { transform: none; }
.mob-drawer a { display: block; font-size: 20px; font-weight: 500; padding: var(--sp-lg) 0; }
.mob-drawer .search-pill { display: flex; width: 100%; margin: var(--sp-xl) 0; }
.scrim {
  position: fixed; inset: 0; background: rgba(17,17,17,.36); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ---------- campaign hero ---------- */
.campaign { position: relative; overflow: hidden; background: var(--ink); }
.campaign img { width: 100%; height: 72vh; min-height: 480px; max-height: 720px; object-fit: cover; opacity: .92; }
.campaign .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,.76) 0%, rgba(17,17,17,.20) 52%, transparent 100%); }

/* hero slider */
.campaign-slider { height: 72vh; min-height: 480px; max-height: 720px; }
.campaign-slider .slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.campaign-slider .slide.is-on { opacity: 1; pointer-events: auto; }
.campaign-slider .slide img { width: 100%; height: 100%; }
.slider-pads {
  position: absolute; right: var(--gutter); bottom: var(--sp-xl);
  display: flex; gap: var(--sp-sm); z-index: 6;
}
.slider-pad { background: var(--canvas); }
.slider-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--sp-lg);
  display: flex; gap: 8px; z-index: 6;
}
.sdot {
  width: 8px; height: 8px; border-radius: var(--r-full); border: 0; padding: 0;
  background: rgba(255,255,255,.45); cursor: pointer;
}
.sdot.is-on { background: var(--canvas); }
@media (max-width: 599px) { .campaign-slider { height: 78vh; } }
.campaign .lockup {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) var(--sp-section);
  max-width: var(--maxw); margin: 0 auto; color: var(--on-primary);
}
.campaign .lockup p.kicker { font-size: 14px; font-weight: 500; margin-bottom: var(--sp-sm); }
.campaign .lockup .display-campaign { max-width: 11ch; }
.campaign .lockup .cta-row { display: flex; gap: var(--sp-md); margin-top: var(--sp-xl); }
@media (max-width: 599px) { .campaign img { height: 78vh; object-position: 62% 50%; } }

/* editorial tile (mid-page) */
.edit-tile { position: relative; overflow: hidden; }
.edit-tile img { width: 100%; height: 480px; object-fit: cover; }
.edit-tile .overlay { position: absolute; inset: 0; background: rgba(17,17,17,.18); }
.edit-tile .lockup { position: absolute; left: var(--sp-xxl); bottom: var(--sp-xxl); color: var(--on-primary); }
.edit-tile .lockup .display-campaign { font-size: 64px; }
.edit-tile .lockup .btn { margin-top: var(--sp-lg); }
@media (max-width: 599px) { .edit-tile img { height: 380px; } .edit-tile .lockup .display-campaign { font-size: 42px; } }

/* ---------- sections ---------- */
.section { margin-top: var(--sp-section); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-lg);
}
.section-head .heading-xl { text-transform: uppercase; }
@media (max-width: 1023px) { .section { margin-top: 32px; } }
@media (max-width: 599px)  { .section { margin-top: 24px; } }

/* ---------- product card ---------- */
.pcard { position: relative; background: var(--canvas); }
.pcard .img-stage {
  position: relative; background: var(--soft-cloud); aspect-ratio: 1 / 1;
  display: grid; place-items: center; overflow: hidden;
}
.pcard .img-stage img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
}
.pcard .ph {
  width: 38%; height: 60%; opacity: .26;
}
.badge-promo {
  position: absolute; top: var(--sp-md); left: var(--sp-md);
  background: var(--canvas); border: 1px solid var(--hairline);
  color: var(--ink); font-size: 12px; font-weight: 500;
  padding: 4px 12px; border-radius: var(--r-lg);
}
.card-heart {
  position: absolute; top: var(--sp-md); right: var(--sp-md);
  background: var(--canvas);
}
.pcard-meta { padding-top: var(--sp-md); display: grid; gap: var(--sp-sm); }
.swatch-row { display: flex; align-items: center; gap: 6px; }
.swatch-dot {
  width: 12px; height: 12px; border-radius: var(--r-full);
  box-shadow: 0 0 0 1px var(--hairline);
}
.swatch-dot.is-active { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); }
.swatch-label { font-size: 12px; font-weight: 500; color: var(--mute); }
.pcard-name { font-size: 16px; font-weight: 500; }
.pcard-sub { font-size: 14px; font-weight: 500; color: var(--mute); }
.pcard-price { font-size: 16px; font-weight: 500; }
.price-sale { color: var(--sale); }
.price-was { color: var(--mute); text-decoration: line-through; font-weight: 400; margin-left: var(--sp-sm); }
.price-off { color: var(--sale); margin-left: var(--sp-sm); }

/* grids */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-sm); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* category tiles */
.cat-tile { position: relative; display: block; }
.cat-tile .img-stage { aspect-ratio: 3 / 4; background: var(--ink); overflow: hidden; }
.cat-tile .img-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; transition: transform .5s ease; }
.cat-tile:hover .img-stage img { transform: scale(1.07); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,.84) 0%, rgba(17,17,17,.18) 58%, transparent 100%); pointer-events: none; }
.cat-lockup { position: absolute; left: 20px; bottom: 22px; right: 20px; }
.cat-tile-name { display: block; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.cat-tile-sub { display: block; color: rgba(255,255,255,.7); font-size: 13px; margin-top: 4px; }

/* horizontal rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--sp-sm); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-xs); }
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 0; }

/* range strip (counts) */
.range-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-sm); }
.range-card { background: var(--canvas); text-align: center; padding: var(--sp-xl) var(--sp-md); }
.range-card .num { font-family: var(--font-display); font-size: 56px; line-height: .9; }
.range-card .lbl { font-size: 14px; font-weight: 500; color: var(--mute); margin-top: var(--sp-sm); }
.range-card--one { display: block; background: var(--soft-cloud); padding: var(--sp-section) var(--sp-xl); }
.range-card--one .num { font-size: 110px; }
.range-card--one .lbl { font-size: 16px; }
@media (max-width: 639px) { .range-strip { grid-template-columns: repeat(2, 1fr); } }

/* trade banner */
.trade-band { background: var(--soft-cloud); padding: var(--sp-xxl) 0; }
.trade-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-xl); flex-wrap: wrap; }

/* ---------- PLP ---------- */
.sub-nav { background: var(--canvas); box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.sub-nav .wrap {
  min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
  flex-wrap: wrap; padding-top: var(--sp-sm); padding-bottom: var(--sp-sm);
}
.crumbs { font-size: 14px; font-weight: 500; color: var(--mute); }
.crumbs b { color: var(--ink); font-weight: 500; }
.sub-controls { display: flex; align-items: center; gap: var(--sp-md); }
.sub-controls .ctl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 500; background: none; border: 0; cursor: pointer;
  height: 44px;
}
.sub-controls select {
  border: 0; background: transparent; font: 500 16px var(--font-ui); color: var(--ink);
  cursor: pointer; outline: none; height: 44px;
}

.plp-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-xxl); align-items: start; }
.plp-layout.filters-hidden { grid-template-columns: 1fr; }
.plp-layout.filters-hidden .filter-rail { display: none; }
.filter-rail { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; padding-right: var(--sp-sm); }
.fgroup { padding: var(--sp-lg) 0; border-bottom: 1px solid var(--hairline); }
.fgroup:first-child { padding-top: 0; }
.fgroup h4 { font-size: 16px; font-weight: 500; margin-bottom: var(--sp-md); }
.fopt { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 14px; font-weight: 500; }
.fopt input { width: 18px; height: 18px; accent-color: var(--ink); }
.fopt .cnt { color: var(--mute); font-weight: 400; }
.fopt .dotsw { width: 12px; height: 12px; border-radius: 9999px; box-shadow: 0 0 0 1px var(--hairline); }
.chips-row { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: var(--sp-lg); }
.plp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); row-gap: var(--sp-section); }
.results-note { color: var(--mute); font-size: 14px; font-weight: 500; margin: var(--sp-md) 0 var(--sp-lg); }

@media (max-width: 1023px) {
  .plp-layout { grid-template-columns: 1fr; }
  .filter-rail {
    position: fixed; inset: 0 18% 0 0; min-width: 300px; top: 0; z-index: 90;
    background: var(--canvas); padding: var(--sp-xl); max-height: none;
    transform: translateX(-102%); transition: transform .28s ease;
  }
  .filter-rail.open { transform: none; }
  .plp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) { .plp-grid { grid-template-columns: 1fr; row-gap: 32px; } }

/* ---------- PDP ---------- */
.pdp { display: grid; grid-template-columns: 64px minmax(0, 1fr) 400px; gap: var(--sp-xl); align-items: start; margin-top: var(--sp-xl); }
.thumb-rail { display: grid; gap: var(--sp-sm); }
.thumb {
  width: 64px; height: 64px; background: var(--soft-cloud); cursor: pointer;
  display: grid; place-items: center; overflow: hidden; border: 0; padding: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.thumb.is-active { outline: 1px solid var(--ink); }
.pdp-stage { position: sticky; top: 84px; background: var(--soft-cloud); aspect-ratio: 1/1; overflow: hidden; cursor: zoom-in; }
.pdp-stage.is-zoomed { cursor: zoom-out; }
.pdp-stage img, .pdp-stage svg { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; margin: auto; transition: transform .25s ease; }
.pdp-info > * + * { margin-top: var(--sp-md); }
.pdp-title { font-size: 32px; font-weight: 500; line-height: 1.2; }
.pdp-sub { color: var(--mute); font-size: 14px; font-weight: 500; }
.pdp-price { font-size: 24px; font-weight: 500; margin-top: var(--sp-lg); }
.pdp-price .unit { color: var(--mute); font-size: 14px; font-weight: 500; }
.size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
.size-pill {
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  min-height: 48px; padding: 6px 16px; background: var(--canvas); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 500 14px/1.3 var(--font-ui); gap: 1px;
  transition: transform .12s ease;
}
.size-pill small { color: var(--mute); font-weight: 400; font-size: 12px; }
.size-pill.is-active { background: var(--ink); color: var(--on-primary); border-color: var(--ink); }
.size-pill.is-active small { color: var(--stone); }
.size-pill:active { transform: scale(.5); opacity: .5; }
.addon-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-md) 0; border-bottom: 1px solid var(--hairline); }
.stepper { display: inline-flex; align-items: center; gap: var(--sp-md); }
.stepper button { width: 32px; height: 32px; border-radius: var(--r-full); border: 1px solid var(--hairline); background: var(--canvas); font-size: 16px; cursor: pointer; }
.stepper b { min-width: 18px; text-align: center; }
.pdp-ctas { display: grid; gap: var(--sp-md); margin-top: var(--sp-xl); }
.pdp-ctas .btn { width: 100%; height: 56px; }
.stock-note { color: var(--success); font-size: 14px; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.disclosure { margin-top: var(--sp-xl); }
.disclosure details { border-bottom: 1px solid var(--hairline); }
.disclosure summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-xl) 0; cursor: pointer; font-size: 16px; font-weight: 500;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary svg { transition: transform .2s ease; }
.disclosure details[open] summary svg { transform: rotate(180deg); }
.disclosure .d-body { padding-bottom: var(--sp-xl); color: var(--charcoal); font-size: 16px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; }
.spec-table th { font-weight: 500; color: var(--mute); }
.series-rail-title { margin: var(--sp-section) 0 var(--sp-lg); }
@media (max-width: 1100px) { .pdp { grid-template-columns: 56px 1fr; } .pdp-info { grid-column: 1 / -1; max-width: 560px; } }
@media (max-width: 639px) {
  .pdp { grid-template-columns: 1fr; }
  .thumb-rail { grid-auto-flow: column; grid-auto-columns: 64px; order: 2; overflow-x: auto; }
  .pdp-stage { position: static; }
}

/* ---------- price list page ---------- */
.pl-tools { display: flex; gap: var(--sp-md); align-items: center; flex-wrap: wrap; margin: var(--sp-lg) 0; }
.pl-tools .search-pill { display: flex; width: 280px; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th {
  position: sticky; top: 64px; background: var(--canvas); z-index: 5;
  text-align: left; font-size: 14px; font-weight: 500; color: var(--mute);
  padding: var(--sp-md) var(--sp-sm); box-shadow: inset 0 -1px 0 var(--hairline);
}
.price-table td { padding: var(--sp-md) var(--sp-sm); border-bottom: 1px solid var(--hairline-soft); font-size: 14px; }
.price-table td.amt { font-weight: 500; }
.price-table tr:hover td { background: var(--soft-cloud); }
.price-table .fam-tag { font-weight: 500; color: var(--mute); font-size: 12px; }
.price-table a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- bag drawer ---------- */
.bag-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw;
  background: var(--canvas); z-index: 95; display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .28s ease;
}
.bag-drawer.open { transform: none; }
.bag-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-xl); box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.bag-items { flex: 1; overflow-y: auto; padding: 0 var(--sp-xl); }
.bag-line { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sp-md); padding: var(--sp-lg) 0; border-bottom: 1px solid var(--hairline-soft); }
.bag-line .img-stage { width: 88px; height: 88px; background: var(--soft-cloud); display: grid; place-items: center; }
.bag-line .img-stage img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bag-line .bl-meta { display: grid; gap: 4px; align-content: start; }
.bag-line .bl-name { font-weight: 500; }
.bag-line .bl-sub { color: var(--mute); font-size: 14px; }
.bag-line .bl-right { display: grid; justify-items: end; gap: var(--sp-sm); }
.bl-remove { background: none; border: 0; color: var(--mute); cursor: pointer; font-size: 12px; text-decoration: underline; }
.bag-foot { padding: var(--sp-xl); box-shadow: inset 0 1px 0 var(--hairline-soft); display: grid; gap: var(--sp-md); }
.bag-total { display: flex; justify-content: space-between; font-weight: 500; }
.bag-note { color: var(--mute); font-size: 12px; }
.bag-empty { text-align: center; color: var(--mute); padding: var(--sp-section) var(--sp-xl); }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--on-primary); border-radius: var(--r-lg);
  padding: 12px 24px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: all .25s ease; z-index: 120;
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--hairline); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); padding: var(--sp-section) 0; }
.foot-cols h5 { font-size: 16px; font-weight: 500; margin-bottom: var(--sp-md); }
.foot-cols a, .foot-cols p { display: block; font-size: 14px; font-weight: 500; color: var(--mute); padding: 5px 0; }
.fine-print { border-top: 1px solid var(--hairline-soft); padding: var(--sp-lg) 0; display: flex; gap: var(--sp-xl); flex-wrap: wrap; color: var(--mute); }
.fine-print span, .fine-print a { font-size: 9px; font-weight: 500; line-height: 1.75; color: var(--mute); }
@media (max-width: 800px) { .foot-cols { grid-template-columns: repeat(2, 1fr); } }

/* ---------- brand accents (logo-sampled; used only in tiles/icons, never chrome CTAs) ---------- */
:root {
  --brand-teal: #41666c;
  --brand-orange: #e2963f;
  --brand-cream: #f1efe8;
}

/* floating WhatsApp */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: 54px; height: 54px; border-radius: var(--r-full);
  background: var(--success); color: var(--on-primary);
  display: grid; place-items: center;
  transition: transform .12s ease, opacity .12s ease;
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:active { transform: scale(.5); opacity: .5; }

/* social icon rows */
.social-row { display: flex; gap: var(--sp-sm); }
.social-row--foot { margin-top: var(--sp-md); }
.social-row .iconbtn { background: var(--soft-cloud); }

/* light editorial tile variant: ink type on bright imagery */
.edit-tile--light .overlay { display: none; }
.edit-tile--light .lockup { color: var(--ink); }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-xxl); align-items: start; }
.c-block { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--hairline); }
.c-block:first-child { padding-top: 0; }
.c-block h3 { font-size: 16px; font-weight: 500; margin-bottom: var(--sp-md); }
.c-line { display: flex; gap: var(--sp-md); align-items: flex-start; padding: 7px 0; font-size: 16px; }
.c-line svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--ink); }
.c-line a { text-decoration: underline; text-underline-offset: 3px; }
.c-line .mute { font-size: 14px; }
.map-embed { width: 100%; height: 420px; border: 0; background: var(--soft-cloud); display: block; }
.social-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
.social-tile {
  display: flex; align-items: center; gap: var(--sp-md);
  background: var(--soft-cloud); padding: var(--sp-lg);
  transition: transform .12s ease, opacity .12s ease;
}
.social-tile:active { transform: scale(.5); opacity: .5; }
.social-tile svg { width: 26px; height: 26px; flex: none; }
.social-tile .st-name { font-weight: 500; font-size: 16px; }
.social-tile .st-sub { color: var(--mute); font-size: 12px; font-weight: 500; }
.social-tile--wa svg { color: var(--success); }
.social-tile--ig svg { color: var(--brand-orange); }
.social-tile--fb svg { color: var(--info); }
.social-tile--lt svg { color: var(--brand-teal); }

/* payment band — the one cream brand-accent surface */
.pay-band { background: var(--brand-cream); padding: var(--sp-xxl); }
.pay-band h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: var(--sp-lg); }
.pay-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-xl); align-items: start; }
.pay-rows { display: grid; gap: 2px; }
.pay-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-md); padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; }
.pay-row b { font-weight: 500; }
.pay-row span:first-child { color: var(--mute); font-weight: 500; }
.qr-card { text-align: center; }
.qr-card img { width: 168px; height: 168px; display: block; margin: 0 auto var(--sp-sm); background: #fff; padding: 8px; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
}

/* perfectly centred product imagery */
.pcard .img-stage, .thumb, .bag-line .img-stage { position: relative; }
.pcard .img-stage img, .thumb img, .bag-line .img-stage img {
  position: absolute; inset: 7%; width: 86%; height: 86%;
  object-fit: contain; margin: auto; mix-blend-mode: multiply;
}
img.ph { mix-blend-mode: normal !important; opacity: .42; object-fit: contain !important; padding: 20%; box-sizing: border-box; }
.rail .pcard { min-width: 0; }

/* helpers */
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Design enhancements (frontend-design + web-design-guidelines skills) ── */

/* Button hover states */
.btn--primary:hover  { opacity: .86; }
.btn--secondary:hover { background: var(--hairline-soft); }
.btn--onimage:hover  { opacity: .90; }

/* Product card: shadow lift + image zoom */
.pcard { transition: box-shadow .22s ease; }
.pcard:hover { box-shadow: 0 8px 36px rgba(17,17,17,.10); }
.pcard .img-stage img { transition: transform .42s ease; }
.pcard:hover .img-stage img { transform: scale(1.07); }

/* cat-tile hover handled in the category tiles block above */

/* Social tile hover */
.social-tile:hover { background: var(--hairline-soft); }

/* Size pill hover */
.size-pill:hover:not(.is-active) { background: var(--soft-cloud); border-color: var(--charcoal); }

/* Chip hover */
.chip:hover:not(.is-active) { background: var(--soft-cloud); }

/* Thumbnail hover */
.thumb:hover { outline: 1px solid var(--charcoal); }

/* Nav link hover */
.nav-links a:hover { border-bottom-color: var(--hairline); }

/* Link hover */
.link-md:hover { color: var(--charcoal); }

/* Price table: smooth row highlight */
.price-table td { transition: background .14s ease; }

/* Accessible keyboard focus */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button:focus-visible, a:focus-visible { border-radius: 2px; }

/* Smooth image transitions in bag */
.bag-line .img-stage img { transition: opacity .2s ease; }

/* ── Trust strip ── */
.trust-strip {
  background: var(--soft-cloud);
  border-bottom: 1px solid var(--hairline-soft);
  padding: var(--sp-xxl) 0;
}
.trust-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl);
  align-items: start;
}
.ts-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-xs);
}
.ts-val {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
}
.ts-key {
  font-size: 11px;
  font-weight: 500;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: .07em;
  max-width: 120px;
}
@media (max-width: 639px) {
  .trust-strip .wrap { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-xl); }
}

/* ── How to Order steps ── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
}
.step {
  background: var(--soft-cloud);
  padding: var(--sp-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.step-num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--hairline);
  margin-bottom: var(--sp-xs);
}
.step h3 { font-size: 16px; font-weight: 500; }
.step p  { font-size: 14px; color: var(--mute); line-height: 1.6; }
@media (max-width: 767px) {
  .steps-grid { grid-template-columns: 1fr; }
}

/* ── Export / dark CTA band ── */
.export-band {
  background: var(--ink);
  color: var(--on-primary);
  padding: var(--sp-section) 0;
  text-align: center;
}
.export-band .heading-xl { color: var(--on-primary); }
.export-band p { color: rgba(255,255,255,.62); font-size: 15px; margin-top: var(--sp-sm); max-width: 520px; margin-left: auto; margin-right: auto; }
.export-band .cta-row { display: flex; gap: var(--sp-md); justify-content: center; margin-top: var(--sp-xl); flex-wrap: wrap; }
.btn--ghost { background: transparent; color: var(--on-primary); border: 1.5px solid rgba(255,255,255,.45); }
.btn--ghost:hover { border-color: var(--on-primary); opacity: 1; }

/* ── Sticky mobile Add-to-Bag CTA (product page) ── */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--ink);
  color: var(--on-primary);
  padding: var(--sp-md) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  z-index: 55;
  transform: translateY(104%);
  transition: transform .3s ease;
  box-shadow: 0 -4px 24px rgba(17,17,17,.22);
}
.sticky-cta.visible { transform: none; }
.sticky-cta-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.sticky-cta-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta-price { font-size: 16px; font-weight: 500; }
.sticky-cta .btn { flex-shrink: 0; }
@media (min-width: 640px) { .sticky-cta { display: none !important; } }

/* ── Coloured social circles ── */
.soc-circle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; transition:transform .2s,opacity .2s; flex-shrink:0; }
.soc-circle:hover { transform:scale(1.1); }
.soc-circle svg { width:18px; height:18px; fill:currentColor; color:#fff; }
.soc-circle--ig { background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.soc-circle--fb { background:#1877f2; }
.soc-circle--wa { background:#25d366; }
.soc-circle--lt { background:#43e660; }
.soc-circle--lt svg { color:#111; }

/* ── About page ── */
.about-hero { position:relative; height:92vh; min-height:540px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.65) 100%); }
.about-hero-content { position:relative; text-align:center; color:#fff; padding:0 24px; }
.about-kicker { font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; margin-bottom:16px; display:block; }
.about-hero-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(3.5rem,10vw,7rem); line-height:1; margin:0 0 20px; }
.about-hero-sub { font-size:clamp(1rem,2vw,1.2rem); opacity:.85; max-width:480px; margin:0 auto; line-height:1.6; }
.about-hero-scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:#fff; font-size:22px; opacity:.55; animation:bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
.about-eyebrow { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; }
.about-h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; margin:0 0 24px; }
.about-section { padding:72px 0; }
.about-two-col { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-two-col--rev { direction:rtl; } .about-two-col--rev > * { direction:ltr; }
@media(max-width:768px) { .about-two-col { grid-template-columns:1fr; gap:32px; } .about-two-col--rev { direction:ltr; } }
.about-text-block p { color:var(--ash); line-height:1.8; margin-bottom:16px; font-size:1.05rem; }
.about-text-block p strong { color:var(--ink); font-weight:600; }
.about-img-block { border-radius:16px; overflow:hidden; }
.about-img-block img { width:100%; height:420px; object-fit:cover; display:block; }
.about-img-caption { font-size:12px; color:var(--stone); margin-top:8px; text-align:center; }
.about-map { width:100%; height:420px; border:0; border-radius:16px; display:block; }
.about-stats-band { background:var(--ink); color:#fff; padding:64px 0; }
.about-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
@media(max-width:640px) { .about-stats-grid { grid-template-columns:repeat(2,1fr); } }
.about-stat-num { display:block; font-family:'Bebas Neue',sans-serif; font-size:3.5rem; line-height:1; }
.about-stat-lbl { display:block; font-size:13px; color:rgba(255,255,255,.5); margin-top:4px; letter-spacing:.04em; }
.about-timeline-section { background:var(--soft-cloud); padding:80px 0; }
.about-timeline { max-width:660px; margin:0 auto; position:relative; padding-left:24px; }
.about-timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--hairline); }
.tl-item { position:relative; padding:0 0 40px 32px; }
.tl-year { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--ink); margin-bottom:4px; }
.tl-dot { position:absolute; left:-5px; top:6px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--hairline); }
.tl-dot--active { background:var(--ink); border-color:var(--ink); }
.tl-text { color:var(--ash); line-height:1.7; font-size:.975rem; }
.tl-text strong { color:var(--ink); font-weight:600; }
.about-team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:900px) { .about-team-grid { grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
.about-team-card { background:var(--soft-cloud); border-radius:16px; padding:32px 28px; }
.about-team-card--featured { background:var(--ink); }
.about-team-avatar { width:130px; height:130px; border-radius:50%; overflow:hidden; margin:0 auto 20px; background:none; }
.about-team-avatar svg { width:100%; height:100%; display:block; }
.about-team-card--featured .about-team-avatar { background:none; }
.about-team-name { font-weight:700; font-size:1rem; text-align:center; margin-bottom:4px; }
.about-team-card--featured .about-team-name { color:#fff; }
.about-team-role { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--stone); text-align:center; margin-bottom:14px; }
.about-team-card--featured .about-team-role { color:rgba(255,255,255,.45); }
.about-team-bio { font-size:.9rem; line-height:1.7; color:var(--ash); margin:0; }
.about-team-card--featured .about-team-bio { color:rgba(255,255,255,.72); }
.about-quote-band { background:#120e06; padding:80px 0; text-align:center; }
.about-quote { font-size:clamp(1.15rem,2.5vw,1.7rem); font-style:italic; color:rgba(255,255,255,.88); max-width:760px; margin:0 auto 20px; line-height:1.65; font-family:Georgia,serif; }
.about-quote-cite { font-size:13px; color:rgba(255,255,255,.4); letter-spacing:.06em; }
.about-cta-band { background:linear-gradient(135deg,#1a1a1a,#383838); padding:80px 0; text-align:center; color:#fff; }
.about-cta-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,5vw,3.5rem); margin-bottom:16px; }
.about-cta-band p { opacity:.72; max-width:480px; margin:0 auto 32px; line-height:1.65; }

/* ── Dimension overlay (product image) ── */
.dim-card { position:absolute; bottom:12px; right:12px; padding:10px 12px; background:rgba(252,249,244,0.96); border:1px solid #e0d8cc; border-radius:8px; z-index:2; max-width:170px; box-shadow:0 2px 10px rgba(0,0,0,0.10); pointer-events:none; }
.dim-title { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#888; margin:0 0 8px; }

/* ── Footer payment badges ── */
.pay-accept { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.08); margin-bottom:20px; }
.pay-accept-label { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.06em; text-transform:uppercase; margin-right:4px; }
.pay-badge { font-size:11px; font-weight:500; padding:4px 10px; border-radius:20px; background:rgba(255,255,255,.10); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.15); }
.pay-badge--note { background:transparent; color:rgba(255,255,255,.3); border-color:rgba(255,255,255,.08); }

/* ── Print styles (price list) ── */
@media print {
  .utility-bar, .primary-nav, .sub-nav, .pl-tools, .wa-float, .bag-drawer, .mob-drawer, .scrim, footer.site { display: none !important; }
  .price-table th { position: static; box-shadow: none; }
  body { font-size: 12px; }
  .wrap { padding: 0; max-width: 100%; }
  a { text-decoration: none; color: inherit; }
  .price-table th, .price-table td { padding: 6px 4px; }
}