/* ==========================================================================
   MERIT PRODUCTS — core stylesheet
   Tokens taken directly from the Brand Identity Board.
   ========================================================================== */

:root{
  /* Palette */
  --ink:        #0B0F14;  /* Deep Charcoal  */
  --slate:      #121821;  /* Carbon Slate   */
  --slate-2:    #1E2530;  /* Gradient stop  */
  --blue:       #2563FF;  /* Electric Blue  */
  --cyan-brand: #00D4E0;  /* Cyan Teal — kept for the brand gradient only */
  --cyan:       #4FA9FF;  /* Accent for text, icons, rules and focus rings */
  --steel:      #A7B0BE;  /* Steel Gray     */
  --mist:       #E5E7EB;  /* Silver Mist    */
  --white:      #FFFFFF;  /* Pure White     */

  /* Derived */
  --line:       rgba(167,176,190,.16);
  --line-soft:  rgba(167,176,190,.09);
  --panel:      #0F141C;
  --panel-2:    #141B25;
  --grad:       linear-gradient(100deg, var(--blue) 0%, var(--cyan-brand) 100%);
  --grad-dark:  linear-gradient(150deg, #121821 0%, #1E2530 100%);
  --glow:       0 0 0 1px rgba(37,99,255,.35), 0 12px 40px -12px rgba(37,99,255,.55);

  /* Type — swap the first name in both lines to change the whole site.
     Alternatives already loaded-friendly: 'Manrope', 'Sora', 'Outfit', 'Inter'. */
  --display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Metrics */
  --wrap: 1280px;
  --radius: 14px;
  --radius-sm: 9px;
  --header-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--mist);
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{ font-family:var(--display); color:var(--white); margin:0 0 .5em; line-height:1.1; letter-spacing:-.028em; font-weight:700; }
h1{ font-size:clamp(2.4rem,5.2vw,4.1rem); }
h2{ font-size:clamp(1.7rem,3vw,2.5rem); }
h3{ font-size:1.15rem; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

::selection{ background:var(--blue); color:#fff; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.section{ padding:76px 0; }
.section--tight{ padding:48px 0; }
.stack-sm > * + *{ margin-top:8px; }

.eyebrow{
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--steel); font-weight:500; margin:0 0 14px;
}
.eyebrow--blue{ color:var(--cyan); }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.section-head p{ color:var(--steel); max-width:52ch; margin:0; }

.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; }
.btn--primary{ background:var(--grad); color:#fff; box-shadow:0 8px 26px -12px rgba(37,99,255,.9); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(37,99,255,1); }
.btn--ghost{ background:transparent; color:var(--mist); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--white); }
.btn--solid{ background:var(--white); color:var(--ink); }
.btn--solid:hover{ transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 16px; font-size:.7rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; color:var(--cyan);
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.link-arrow svg{ width:14px; height:14px; transition:transform .2s ease; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--slate); border-bottom:1px solid var(--line-soft);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
}
.announce .wrap{ display:flex; justify-content:center; align-items:center; gap:14px; height:34px; text-align:center; }
.announce b{ color:var(--white); font-weight:600; }
.announce .dot{ color:var(--blue); }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,15,20,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.header__inner{ display:flex; align-items:center; gap:28px; height:var(--header-h); }

.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo__img, .logo__mark{ display:block; height:auto; }
.logo__img{ max-width:100%; }
@media (max-width:420px){ .logo__img{ width:132px !important; } }

.nav{ display:flex; align-items:center; gap:26px; margin-left:8px; }
.nav a{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); padding:8px 0; position:relative; transition:color .18s ease;
}
.nav a:hover, .nav a.is-active{ color:var(--white); }
.nav a.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--grad); border-radius:2px;
}

.header__tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:transparent; border:1px solid transparent; color:var(--steel); cursor:pointer;
  transition:color .18s, border-color .18s, background .18s; position:relative;
}
.icon-btn:hover{ color:var(--white); border-color:var(--line); background:var(--panel); }
.icon-btn svg{ width:18px; height:18px; }
.cart-count{
  position:absolute; top:2px; right:0; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--grad); color:#fff;
  font-size:.6rem; font-weight:700; display:grid; place-items:center; line-height:1;
}
.burger{ display:none; }

/* Mobile nav panel (revealed by the burger under 900px) */
.mnav{ display:none; border-top:1px solid var(--line-soft); padding:8px 24px 16px; }
.mnav.is-open{ display:block; }
.mnav a{
  display:block; padding:12px 0; border-bottom:1px solid var(--line-soft);
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mist);
}
.mnav a:last-child{ border-bottom:0; }
.mnav a:hover{ color:var(--cyan); }
@media (min-width:901px){ .mnav{ display:none !important; } }

/* Blueprint art fills its container consistently */
.plate > svg, .split__art > svg, .gallery__main > svg, .card__media > svg,
.line__media > svg, .thumb > svg, .cat__art > svg{ width:100%; height:auto; display:block; }
.line__media, .thumb{ display:grid; place-items:center; }

/* ---------- Real product photography ----------
   Containers get .is-photo when an image is present. Photos are contained,
   never cropped, so a mount is never clipped at the edge of a card. */
.card__media > img, .gallery__main > img, .line__media > img, .thumb > img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.card__media > img{ transition:transform .3s ease; }
.card:hover .card__media > img{ transform:scale(1.04); }

/* Plate colour behind photos. Default keeps the dark slate; adding
   photoBackground:'light' to MERIT_CONFIG switches to a pale panel, which
   is what you want if your shots are on a white studio background. */
.card__media.is-photo, .gallery__main.is-photo,
.thumb.is-photo, .line__media.is-photo{ background:var(--photo-plate); }
/* Supplied photography already carries its own dark backdrop, so let it run
   edge to edge instead of floating in a padded box. */
.card__media.is-photo, .gallery__main.is-photo,
.thumb.is-photo, .line__media.is-photo{ padding:0; }
body{ --photo-plate:linear-gradient(150deg,#121821 0%,#1E2530 100%); }
body.photos-light{ --photo-plate:#EDF0F3; }
body.photos-light .card__media.is-photo,
body.photos-light .gallery__main.is-photo,
body.photos-light .thumb.is-photo,
body.photos-light .line__media.is-photo{ border-color:rgba(167,176,190,.28); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--ink); border-bottom:1px solid var(--line-soft); }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__bg::before{
  content:''; position:absolute; width:820px; height:820px; right:-180px; top:-320px;
  background:radial-gradient(circle, rgba(37,99,255,.28) 0%, rgba(79,169,255,.08) 42%, transparent 68%);
  filter:blur(10px);
}
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, transparent 0 78px, rgba(167,176,190,.045) 78px 79px);
  mask-image:linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
}
.hero__inner{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px;
  align-items:center; min-height:min(74vh,620px); padding:64px 0;
}
.hero h1{ margin-bottom:20px; }
.hero h1 .accent{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{ color:var(--steel); font-size:1.02rem; max-width:46ch; margin-bottom:30px; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:34px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line-soft); }
.hero__stat b{ display:block; font-family:var(--display); font-size:1.5rem; color:var(--white); letter-spacing:-.02em; }
.hero__stat span{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }

.hero__art{ position:relative; }
.hero__art .plate{
  border-radius:20px; background:var(--grad-dark); border:1px solid var(--line);
  padding:28px; box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.hero__art .plate--photo{ padding:0; overflow:hidden; }
.hero__art .plate--photo img{ width:100%; height:auto; display:block; }

/* ---------- Trust strip ---------- */
.trust{ background:var(--slate); border-bottom:1px solid var(--line-soft); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); }
.trust__item{ background:var(--slate); padding:26px 24px; display:flex; gap:14px; align-items:flex-start; }
.trust__item svg{ width:22px; height:22px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
.trust__item b{ display:block; color:var(--white); font-size:.88rem; font-weight:600; margin-bottom:3px; }
.trust__item span{ font-size:.78rem; color:var(--steel); line-height:1.5; }

/* ---------- Category tiles ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat{
  position:relative; border-radius:var(--radius); overflow:hidden; isolation:isolate;
  background:var(--grad-dark); border:1px solid var(--line);
  padding:24px; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end;
  transition:border-color .22s ease, transform .22s ease;
}
.cat:hover{ border-color:rgba(37,99,255,.5); transform:translateY(-3px); }
.cat__art{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.cat__art img{
  width:100%; height:100%; object-fit:cover; opacity:.52;
  transition:opacity .28s ease, transform .55s ease;
}
.cat__art svg{ width:100%; height:100%; opacity:.4; }
.cat:hover .cat__art img{ opacity:.74; transform:scale(1.05); }
/* Scrim keeps the label legible over any photo. */
.cat::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,15,20,.97) 6%, rgba(11,15,20,.82) 34%,
    rgba(11,15,20,.45) 62%, rgba(11,15,20,.18) 100%);
}
.cat__body{ position:relative; z-index:2; }
.cat__count{ font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); }
.cat h3{ margin:6px 0 5px; font-size:1.3rem; }
.cat p{ margin:0; font-size:.82rem; color:var(--mist); opacity:.8; max-width:26ch; }

/* ---------- Product grid & cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.card:hover{ border-color:rgba(37,99,255,.45); transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(0,0,0,.9); }
.card__media{
  position:relative; aspect-ratio:1/1; background:var(--grad-dark);
  display:grid; place-items:center; padding:18px; border-bottom:1px solid var(--line-soft);
}
.card__media svg{ width:100%; height:auto; }
.card__badges{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.badge{
  font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 9px; border-radius:5px;
}
.badge--new{ background:var(--grad); color:#fff; }
.badge--best{ background:rgba(167,176,190,.14); color:var(--mist); border:1px solid var(--line); }
.badge--save{ background:rgba(79,169,255,.14); color:var(--cyan); border:1px solid rgba(79,169,255,.35); }

.wish{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; background:rgba(11,15,20,.6); border:1px solid var(--line-soft);
  color:var(--steel); cursor:pointer; transition:color .18s, border-color .18s;
}
.wish:hover, .wish.is-on{ color:var(--cyan); border-color:rgba(79,169,255,.45); }
.wish.is-on svg{ fill:currentColor; }
.wish svg{ width:15px; height:15px; }

.card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.card__sku{ font-size:.6rem; letter-spacing:.18em; color:var(--steel); text-transform:uppercase; margin-bottom:7px; }
.card__title{ font-size:.92rem; font-weight:600; color:var(--white); line-height:1.35; margin:0 0 8px; }
.card__title:hover{ color:var(--cyan); }
.card__meta{ display:flex; align-items:center; gap:7px; margin-bottom:12px; }
.card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }

.stars{ display:inline-flex; gap:1px; color:var(--cyan); }
.stars svg{ width:12px; height:12px; }
.stars .off{ color:rgba(167,176,190,.3); }
.rev{ font-size:.7rem; color:var(--steel); }

.price{ display:flex; align-items:baseline; gap:8px; }
.price b{ font-family:var(--display); font-size:1.12rem; color:var(--white); font-weight:700; letter-spacing:-.01em; }
.price s{ font-size:.78rem; color:var(--steel); }

.swatches{ display:flex; gap:5px; margin-bottom:12px; }
.sw{ width:15px; height:15px; border-radius:50%; border:1px solid var(--line); }

.add-btn{
  width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background:transparent; color:var(--mist); display:grid; place-items:center; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.add-btn svg{ width:16px; height:16px; }
.add-btn:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:scale(1.06); }
.add-btn.is-added{ background:var(--cyan); color:var(--ink); border-color:transparent; }

/* ---------- Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.split__art{
  border-radius:var(--radius); background:var(--grad-dark); border:1px solid var(--line);
  padding:36px; aspect-ratio:5/4; display:grid; place-items:center;
}
.checks{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:11px; }
.checks li{ display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--steel); }
.checks svg{ width:16px; height:16px; color:var(--cyan); flex-shrink:0; margin-top:3px; }
.checks b{ color:var(--white); font-weight:600; }

/* ---------- Shop page ---------- */
.shop{ display:grid; grid-template-columns:246px 1fr; gap:34px; align-items:start; }
.filters{ position:sticky; top:calc(var(--header-h) + 20px); }
.fgroup{ border-bottom:1px solid var(--line-soft); padding:18px 0; }
.fgroup:first-child{ padding-top:0; }
.fgroup h4{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel);
  margin:0 0 14px; font-weight:600;
}
.fopt{ display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:.85rem; color:var(--mist); }
.fopt input{ appearance:none; width:15px; height:15px; border:1px solid var(--line); border-radius:4px; cursor:pointer; flex-shrink:0; position:relative; transition:background .15s, border-color .15s; }
.fopt input:checked{ background:var(--grad); border-color:transparent; }
.fopt input:checked::after{ content:''; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg); }
.fopt:hover{ color:var(--white); }
.fopt .n{ margin-left:auto; font-size:.72rem; color:var(--steel); }

.range{ width:100%; appearance:none; height:3px; border-radius:3px; background:var(--line); outline:none; margin:10px 0 6px; }
.range::-webkit-slider-thumb{ appearance:none; width:16px; height:16px; border-radius:50%; background:var(--grad); cursor:pointer; border:2px solid var(--ink); }
.range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--blue); cursor:pointer; border:2px solid var(--ink); }
.range-val{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--steel); }

.shop__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.shop__count{ font-size:.8rem; color:var(--steel); }
.shop__count b{ color:var(--white); }
.select{
  background:var(--panel); border:1px solid var(--line); color:var(--mist);
  border-radius:9px; padding:9px 14px; font-size:.8rem; font-family:inherit; cursor:pointer;
}
.select:focus{ border-color:var(--cyan); outline:none; }

.empty{ text-align:center; padding:70px 20px; color:var(--steel); border:1px dashed var(--line); border-radius:var(--radius); }
.empty b{ display:block; color:var(--white); font-size:1.05rem; margin-bottom:6px; }

/* ---------- Product detail ---------- */
.crumbs{ font-size:.72rem; color:var(--steel); padding:22px 0; display:flex; gap:9px; align-items:center; }
.crumbs a:hover{ color:var(--cyan); }
.crumbs span{ color:rgba(167,176,190,.4); }

.pd{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; padding-bottom:20px; }
.gallery__main{
  border-radius:var(--radius); background:var(--grad-dark); border:1px solid var(--line);
  aspect-ratio:1/1; display:grid; place-items:center; padding:52px; position:relative; overflow:hidden;
}
.gallery__main .card__badges{ top:18px; left:18px; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.thumb{
  border-radius:10px; background:var(--grad-dark); border:1px solid var(--line-soft);
  aspect-ratio:1/1; padding:12px; cursor:pointer; transition:border-color .18s;
}
.thumb:hover, .thumb.is-on{ border-color:var(--cyan); }

.pd__sku{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-bottom:10px; }
.pd h1{ font-size:clamp(1.6rem,2.6vw,2.15rem); margin-bottom:12px; }
.pd__meta{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.pd__price{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.pd__price b{ font-family:var(--display); font-size:2rem; color:var(--white); letter-spacing:-.02em; }
.pd__price s{ color:var(--steel); font-size:1rem; }
.pd__price .off{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); border:1px solid rgba(79,169,255,.35); padding:3px 8px; border-radius:5px; }
.pd__stock{ font-size:.8rem; color:var(--cyan); display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.pd__stock i{ width:7px; height:7px; border-radius:50%; background:var(--cyan); display:inline-block; box-shadow:0 0 0 3px rgba(79,169,255,.18); }
.pd__desc{ color:var(--steel); font-size:.95rem; margin-bottom:26px; }

.opt-label{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-bottom:10px; }
.opt-label b{ color:var(--white); font-weight:600; letter-spacing:.06em; text-transform:none; font-size:.85rem; }
.opts{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.opt{
  padding:9px 15px; border-radius:8px; border:1px solid var(--line); background:transparent;
  color:var(--mist); font-size:.8rem; cursor:pointer; transition:border-color .16s, color .16s, background .16s;
}
.opt:hover{ border-color:var(--steel); }
.opt.is-on{ border-color:var(--cyan); color:var(--white); background:rgba(79,169,255,.08); }
.opt-color{ width:36px; height:36px; border-radius:9px; padding:0; position:relative; }
.opt-color.is-on::after{ content:''; position:absolute; inset:-4px; border-radius:12px; border:1px solid var(--cyan); }

.buy{ display:flex; gap:10px; margin-bottom:14px; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.qty button{ width:40px; height:46px; background:transparent; border:0; color:var(--mist); font-size:1.1rem; cursor:pointer; transition:color .15s, background .15s; }
.qty button:hover{ color:var(--white); background:var(--panel); }
.qty span{ width:38px; text-align:center; font-weight:600; color:var(--white); font-size:.95rem; }

.assure{ display:flex; gap:22px; flex-wrap:wrap; padding-top:20px; margin-top:22px; border-top:1px solid var(--line-soft); }
.assure div{ display:flex; gap:9px; align-items:center; font-size:.78rem; color:var(--steel); }
.assure svg{ width:15px; height:15px; color:var(--cyan); }

.acc{ border-top:1px solid var(--line-soft); }
.acc__item{ border-bottom:1px solid var(--line-soft); }
.acc__btn{
  width:100%; background:transparent; border:0; color:var(--white); padding:17px 0;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  font-size:.88rem; font-weight:600; text-align:left;
}
.acc__btn svg{ width:15px; height:15px; color:var(--steel); transition:transform .22s; }
.acc__item.is-open .acc__btn svg{ transform:rotate(45deg); color:var(--cyan); }
.acc__panel{ display:none; padding:0 0 20px; color:var(--steel); font-size:.87rem; }
.acc__item.is-open .acc__panel{ display:block; }
.specs{ width:100%; border-collapse:collapse; }
.specs td{ padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:.84rem; }
.specs td:first-child{ color:var(--steel); width:44%; }
.specs td:last-child{ color:var(--mist); }
.specs tr:last-child td{ border-bottom:0; }

/* ---------- Cart drawer ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(5,8,11,.7); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s; z-index:80;
}
.scrim.is-open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(410px,92vw); z-index:90;
  background:var(--slate); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.is-open{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line-soft); }
.drawer__head h3{ margin:0; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; }
.drawer__body{ flex:1; overflow-y:auto; padding:8px 22px; }
.drawer__foot{ padding:20px 22px; border-top:1px solid var(--line-soft); background:var(--panel); }

.ship-bar{ margin-bottom:16px; }
.ship-bar p{ font-size:.74rem; color:var(--steel); margin:0 0 8px; }
.ship-bar b{ color:var(--cyan); }
.ship-bar .track{ height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.ship-bar .fill{ height:100%; background:var(--grad); border-radius:4px; transition:width .35s ease; }

.line{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.line__media{ width:74px; height:74px; border-radius:10px; background:var(--grad-dark); border:1px solid var(--line-soft); padding:8px; flex-shrink:0; }
.line__title{ font-size:.85rem; color:var(--white); font-weight:600; margin:0 0 3px; line-height:1.3; }
.line__var{ font-size:.7rem; color:var(--steel); margin-bottom:8px; }
.line__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qty-mini{ display:flex; align-items:center; border:1px solid var(--line); border-radius:7px; }
.qty-mini button{ width:26px; height:26px; background:transparent; border:0; color:var(--steel); cursor:pointer; }
.qty-mini button:hover{ color:var(--white); }
.qty-mini span{ width:26px; text-align:center; font-size:.8rem; color:var(--white); }
.line__price{ font-weight:700; color:var(--white); font-size:.9rem; }
.line__rm{ background:none; border:0; color:var(--steel); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:0; }
.line__rm:hover{ color:#ff6b6b; }

.totals{ display:flex; justify-content:space-between; margin-bottom:6px; font-size:.85rem; color:var(--steel); }
.totals.grand{ font-size:1.05rem; color:var(--white); font-weight:700; margin:12px 0 16px; padding-top:12px; border-top:1px solid var(--line-soft); }
.totals--discount span:last-child{ color:var(--cyan); }

/* ---- Drawer coupon ---- */
.mp-coupon{ margin:16px 0; padding-top:16px; border-top:1px solid var(--line-soft); }
.mp-coupon__title{ margin:0 0 9px; font-size:.9rem; font-weight:700; color:var(--white); }
.mp-coupon__row{ display:flex; gap:9px; }
.mp-coupon__input{
  flex:1; min-width:0; background:rgba(11,15,20,.6); border:1px solid var(--line);
  border-radius:9px; padding:11px 13px; color:var(--white); font-size:.85rem;
}
.mp-coupon__input::placeholder{ color:var(--steel); }
.mp-coupon__input:focus{ outline:none; border-color:var(--cyan); }
.mp-coupon__apply{
  flex:0 0 auto; padding:0 18px; border-radius:9px; border:1px solid var(--line);
  background:var(--slate); color:var(--white); font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:border-color .15s, color .15s;
}
.mp-coupon__apply:hover{ border-color:var(--cyan); color:var(--cyan); }
.mp-coupon__msg{ font-size:.76rem; margin-top:7px; min-height:0; }
.mp-coupon__msg.is-ok{ color:var(--cyan); }
.mp-coupon__msg.is-err{ color:#ff6b6b; }
.mp-coupon__msg:empty{ margin-top:0; }
.mp-coupon__chip{
  display:flex; align-items:center; gap:10px; margin-top:11px; padding:11px 13px;
  border:1px solid rgba(79,169,255,.35); border-radius:9px; background:rgba(79,169,255,.08);
}
.mp-coupon__chip-code{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--cyan); font-size:.85rem; }
.mp-coupon__chip-code svg{ width:15px; height:15px; }
.mp-coupon__chip-amt{ margin-left:auto; color:var(--cyan); font-weight:700; font-size:.85rem; white-space:nowrap; }
.mp-coupon__chip-rm{
  flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center;
  background:none; border:0; color:var(--steel); font-size:1.1rem; line-height:1; cursor:pointer;
}
.mp-coupon__chip-rm:hover{ color:var(--white); }
.mp-cart-note{ margin:0 0 14px; font-size:.72rem; color:var(--steel); text-align:center; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,90px);
  background:var(--slate); border:1px solid rgba(79,169,255,.4); border-radius:11px;
  padding:13px 20px; display:flex; align-items:center; gap:11px; z-index:120;
  font-size:.85rem; color:var(--white); box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  opacity:0; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; }
.toast svg{ width:17px; height:17px; color:var(--cyan); }

/* ---------- Newsletter ---------- */
.news{ background:var(--grad-dark); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.news__inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:56px 0; }
.news form{ display:flex; gap:10px; }
.news input{
  flex:1; background:rgba(11,15,20,.6); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 16px; color:var(--white); font-family:inherit; font-size:.9rem;
}
.news input:focus{ border-color:var(--cyan); outline:none; }
.news input::placeholder{ color:var(--steel); }
.news small{ display:block; margin-top:10px; font-size:.72rem; color:var(--steel); }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); padding:56px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; padding-bottom:44px; }
.footer__brand p{ color:var(--steel); font-size:.85rem; max-width:34ch; margin-top:16px; }
.footer h4{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin:0 0 16px; font-weight:600; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer li a{ font-size:.85rem; color:var(--mist); transition:color .16s; }
.footer li a:hover{ color:var(--cyan); }
.footer__bar{
  border-top:1px solid var(--line-soft); padding:20px 0; display:flex;
  justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:.72rem; color:var(--steel); letter-spacing:.06em;
}
.footer__tag{ display:flex; gap:12px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; }
.footer__tag .dot{ color:var(--blue); }
.socials{ display:flex; gap:8px; }
.socials a{ width:32px; height:32px; border-radius:8px; border:1px solid var(--line); display:grid; place-items:center; color:var(--steel); transition:color .16s, border-color .16s; }
.socials a:hover{ color:var(--cyan); border-color:rgba(79,169,255,.4); }
.socials svg{ width:15px; height:15px; }

/* ---------- Page header (inner pages) ---------- */
.phead{ position:relative; overflow:hidden; border-bottom:1px solid var(--line-soft); background:var(--slate); }
.phead::after{
  content:''; position:absolute; right:-140px; top:-200px; width:560px; height:560px;
  background:radial-gradient(circle, rgba(37,99,255,.22), transparent 65%);
}
.phead__inner{ position:relative; padding:52px 0 44px; }
.phead h1{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:10px; }
.phead p{ color:var(--steel); max-width:56ch; margin:0; }

/* ---------- Content blocks (about/contact) ---------- */
.prose{ max-width:70ch; }
.prose p{ color:var(--steel); font-size:.98rem; }
.prose h2{ margin-top:2em; }
.panel{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin-bottom:7px; }
.field input, .field textarea, .field select{
  width:100%; background:rgba(11,15,20,.5); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--white); font-family:inherit; font-size:.9rem;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--cyan); outline:none; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .grid{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .hero__inner{ grid-template-columns:1fr; padding:48px 0; }
  .hero__art{ display:none; }
  .split{ grid-template-columns:1fr; gap:28px; }
  .pd{ grid-template-columns:1fr; gap:32px; }
  .shop{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .news__inner{ grid-template-columns:1fr; padding:44px 0; }
  .cats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .grid, .grid--3{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cats{ grid-template-columns:1fr; }
  .section{ padding:52px 0; }
  .wrap{ padding-inline:16px; }
  .hero__stats{ gap:22px; }
  .footer__grid{ grid-template-columns:1fr; }
  .card__body{ padding:13px; }
  .gallery__main{ padding:30px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   WooCommerce integration
   Woo's own stylesheets are dequeued, so everything its templates output is
   styled here against the Merit tokens.
   ========================================================================== */

.merit-doc { background:var(--ink); }
#merit-main { display:block; }

.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:16px; top:16px; z-index:200; background:var(--slate); color:var(--white); padding:10px 16px; border-radius:8px; }

.woo-wrap{ color:var(--mist); }
.woo-wrap a{ color:var(--cyan); }
.woo-wrap a:hover{ color:var(--white); }
.woo-wrap h2, .woo-wrap h3{ font-family:var(--display); }

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice{
  list-style:none; margin:0 0 22px; padding:14px 18px; border-radius:var(--radius-sm);
  background:var(--panel); border:1px solid var(--line); font-size:.88rem;
}
.woocommerce-message{ border-color:rgba(79,169,255,.4); }
.woocommerce-error{ border-color:rgba(255,107,107,.45); color:#ffb4b4; }
.woocommerce-error li{ list-style:none; }
.woocommerce-message .button, .woocommerce-info .button{ float:right; }

/* ---------- Buttons Woo renders ---------- */
.woo-wrap .button, .woo-wrap button[type="submit"], .woocommerce-button,
.wc-block-components-button, .wp-element-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--grad); color:#fff; border:1px solid transparent;
  padding:13px 24px; border-radius:var(--radius-sm); cursor:pointer;
  font-family:inherit; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease; text-decoration:none;
}
.woo-wrap .button:hover, .woo-wrap button[type="submit"]:hover, .wc-block-components-button:hover{
  transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(37,99,255,1); color:#fff;
}
.woo-wrap .button[disabled], .woo-wrap .button.disabled{ opacity:.45; transform:none; cursor:not-allowed; }
.woo-wrap .button--ghost, .woo-wrap .wc-backward{
  background:transparent; border-color:var(--line); color:var(--mist);
}

/* ---------- Form fields ---------- */
.woo-wrap input[type="text"], .woo-wrap input[type="email"], .woo-wrap input[type="tel"],
.woo-wrap input[type="password"], .woo-wrap input[type="number"], .woo-wrap input[type="search"],
.woo-wrap textarea, .woo-wrap select, .woo-wrap .select2-selection,
.wc-block-components-text-input input{
  width:100%; background:rgba(11,15,20,.55); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px; color:var(--white);
  font-family:inherit; font-size:.92rem; line-height:1.4;
}
.woo-wrap input:focus, .woo-wrap textarea:focus, .woo-wrap select:focus{ border-color:var(--cyan); outline:none; }
.woo-wrap input::placeholder, .woo-wrap textarea::placeholder{ color:var(--steel); }
.woo-wrap label{ display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:7px; }
.woo-wrap .form-row{ margin-bottom:16px; }
.woo-wrap .form-row-first, .woo-wrap .form-row-last{ width:calc(50% - 7px); display:inline-block; vertical-align:top; }
.woo-wrap .form-row-first{ margin-right:12px; }
.woo-wrap abbr.required{ color:var(--cyan); text-decoration:none; border:0; }
.woo-wrap .select2-container--default .select2-selection--single{ height:auto; }
.woo-wrap .select2-dropdown{ background:var(--panel); border-color:var(--line); color:var(--mist); }

/* ---------- Cart table ---------- */
.woo-wrap table.shop_table{
  width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; margin-bottom:26px;
}
.woo-wrap table.shop_table th{
  text-align:left; padding:14px 16px; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); font-weight:600; border-bottom:1px solid var(--line-soft);
}
.woo-wrap table.shop_table td{ padding:16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; font-size:.9rem; }
.woo-wrap table.shop_table tr:last-child td{ border-bottom:0; }
.woo-wrap .product-thumbnail img{ width:72px; height:72px; object-fit:contain; border-radius:9px; background:var(--grad-dark); }
.woo-wrap .product-name a{ color:var(--white); font-weight:600; }
.woo-wrap .product-name a:hover{ color:var(--cyan); }
.woo-wrap .product-remove a{ color:var(--steel); font-size:1.2rem; text-decoration:none; }
.woo-wrap .product-remove a:hover{ color:#ff6b6b; }
.woo-wrap .quantity input{ width:74px; text-align:center; }
.woo-wrap .coupon{ display:flex; gap:10px; margin-bottom:18px; }
.woo-wrap .coupon input{ max-width:260px; }

/* ---------- Cart totals / order review ---------- */
.woo-wrap .cart_totals, .woo-wrap .cart-collaterals{ margin-top:8px; }
.woo-wrap .cart_totals h2, .woo-wrap #order_review_heading{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px;
}
.woo-wrap .cart_totals table, .woo-wrap .woocommerce-checkout-review-order-table{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.woo-wrap .cart_totals th{ color:var(--steel); }
.woo-wrap .order-total td, .woo-wrap .order-total th{ font-size:1.05rem; color:var(--white); font-weight:700; }
.woo-wrap .wc-proceed-to-checkout{ margin-top:16px; }
.woo-wrap .wc-proceed-to-checkout .button{ width:100%; }

/* ---------- Checkout ---------- */
.checkout-assure{ display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--cyan); }
.checkout-assure svg{ width:15px; height:15px; }
.woo-wrap form.checkout{ display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:start; }
.woo-wrap #customer_details{ grid-column:1; }
.woo-wrap .woocommerce-checkout-review-order{
  grid-column:2; position:sticky; top:96px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px;
}
.woo-wrap h3{ font-size:1.05rem; margin:0 0 16px; }
.woo-wrap .woocommerce-billing-fields, .woo-wrap .woocommerce-shipping-fields,
.woo-wrap .woocommerce-additional-fields{ margin-bottom:26px; }

/* Payment box — deliberately restrained so gateway iframes stay legible. */
.woo-wrap #payment{ background:transparent; border-radius:var(--radius); margin-top:18px; }
.woo-wrap #payment ul.payment_methods{ list-style:none; margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid var(--line-soft); }
.woo-wrap #payment ul.payment_methods li{
  padding:14px; margin-bottom:10px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:rgba(11,15,20,.4);
}
.woo-wrap #payment ul.payment_methods li:has(input:checked){ border-color:rgba(79,169,255,.5); }
.woo-wrap #payment ul.payment_methods label{
  display:inline; text-transform:none; letter-spacing:0; font-size:.92rem; color:var(--white); margin:0;
}
.woo-wrap #payment .payment_box{
  background:rgba(255,255,255,.04); border-radius:8px; padding:14px; margin-top:12px;
  font-size:.85rem; color:var(--steel);
}
.woo-wrap #payment .payment_box p{ margin:0; }
/* Card iframes from Stripe, Square and friends need a light field to sit in. */
.woo-wrap .wc-stripe-elements-field, .woo-wrap .wc-credit-card-form-card-number,
.woo-wrap .wc-payment-form input, .woo-wrap #wc-stripe-card-element,
.woo-wrap .wcpay-card-mount-point{
  background:#fff !important; color:#0B0F14 !important; border-radius:8px; padding:12px 14px; border:1px solid #cfd6df;
}
.woo-wrap #place_order{ width:100%; margin-top:18px; }
.woo-wrap .woocommerce-terms-and-conditions-wrapper{ font-size:.8rem; color:var(--steel); margin-top:14px; }
.woo-wrap .woocommerce-privacy-policy-text p{ font-size:.78rem; color:var(--steel); }

/* ---------- Order received ---------- */
.woo-wrap .woocommerce-order-overview{
  list-style:none; padding:22px; margin:0 0 26px; display:flex; flex-wrap:wrap; gap:26px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius);
}
.woo-wrap .woocommerce-order-overview li{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.woo-wrap .woocommerce-order-overview li strong{
  display:block; margin-top:6px; font-size:1rem; letter-spacing:normal;
  text-transform:none; color:var(--white); font-family:var(--display);
}

/* ---------- My Account ---------- */
.woo-wrap .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.woo-wrap .woocommerce-MyAccount-navigation a{
  display:block; padding:11px 14px; border-radius:var(--radius-sm);
  color:var(--mist); font-size:.86rem; border:1px solid transparent;
}
.woo-wrap .woocommerce-MyAccount-navigation a:hover{ background:var(--panel); }
.woo-wrap .woocommerce-MyAccount-navigation .is-active a{
  background:var(--panel); border-color:rgba(37,99,255,.4); color:var(--white);
}
.woo-wrap .woocommerce-MyAccount-content{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px; }
.woo-wrap .u-columns{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.woo-wrap .u-column1, .woo-wrap .u-column2{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px;
}
.woo-wrap .woocommerce-account .woocommerce{ display:grid; grid-template-columns:236px 1fr; gap:30px; align-items:start; }

/* ---------- Free shipping bar on Woo pages ---------- */
.mp-ship-bar{ max-width:520px; margin-bottom:22px; }

/* ---------- Toast error variant ---------- */
.toast--error{ border-color:rgba(255,107,107,.5); }
.toast--error svg{ color:#ff6b6b; }

/* ---------- Busy state ---------- */
.is-busy{ opacity:.6; pointer-events:none; }

@media (max-width:900px){
  .woo-wrap form.checkout{ grid-template-columns:1fr; }
  .woo-wrap .woocommerce-checkout-review-order{ grid-column:1; position:static; }
  .woo-wrap .woocommerce-account .woocommerce{ grid-template-columns:1fr; }
  .woo-wrap .u-columns{ grid-template-columns:1fr; }
  .woo-wrap .form-row-first, .woo-wrap .form-row-last{ width:100%; margin-right:0; }
  .woo-wrap table.shop_table thead{ display:none; }
  .woo-wrap table.shop_table tr{ display:block; border-bottom:1px solid var(--line-soft); }
  .woo-wrap table.shop_table td{ display:flex; justify-content:space-between; border:0; padding:10px 16px; }
  .woo-wrap table.shop_table td::before{ content:attr(data-title); color:var(--steel); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
}

/* ==========================================================================
   WOOCOMMERCE DARK SKIN  —  body.merit-skin
   Two selector families on purpose. The plugin swaps the Cart and Checkout
   blocks for the classic shortcodes, but if a theme or another plugin renders
   the blocks anyway, the .wc-block-* rules below still catch them.
   !important is used deliberately: WooCommerce Blocks ships its own stylesheet
   that loads after ours and sets white backgrounds inline-equivalent.
   ========================================================================== */

body.merit-skin{
  color-scheme:dark;
  background:var(--ink) !important;
  color:var(--mist);
}

/* Native autofill turns fields white in Chrome. This is the only reliable fix. */
body.merit-skin input:-webkit-autofill,
body.merit-skin input:-webkit-autofill:hover,
body.merit-skin input:-webkit-autofill:focus,
body.merit-skin textarea:-webkit-autofill,
body.merit-skin select:-webkit-autofill{
  -webkit-text-fill-color:var(--white) !important;
  -webkit-box-shadow:0 0 0 1000px #10151d inset !important;
  box-shadow:0 0 0 1000px #10151d inset !important;
  caret-color:var(--white);
  transition:background-color 9999s ease-out 0s;
}

/* ---------- Text entry: classic ---------- */
body.merit-skin .woocommerce form .form-row input.input-text,
body.merit-skin .woocommerce form .form-row textarea,
body.merit-skin .woocommerce-checkout input[type="text"],
body.merit-skin .woocommerce-checkout input[type="email"],
body.merit-skin .woocommerce-checkout input[type="tel"],
body.merit-skin .woocommerce-checkout input[type="password"],
body.merit-skin .woocommerce-checkout input[type="number"],
body.merit-skin .woocommerce-checkout input[type="search"],
body.merit-skin .woocommerce-checkout textarea,
body.merit-skin .woocommerce-checkout select,
body.merit-skin .woocommerce input[type="text"],
body.merit-skin .woocommerce input[type="email"],
body.merit-skin .woocommerce input[type="tel"],
body.merit-skin .woocommerce input[type="password"],
body.merit-skin .woocommerce input[type="number"],
body.merit-skin .woocommerce select,
body.merit-skin .woocommerce textarea,
body.merit-skin .select2-container--default .select2-selection--single,
body.merit-skin .select2-container--default .select2-selection--multiple{
  background:#10151d !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--white) !important;
  font-family:var(--body) !important;
  font-size:15px !important;
  line-height:1.4 !important;
  padding:13px 15px !important;
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.merit-skin .select2-container--default .select2-selection--single{
  height:auto !important; display:flex; align-items:center;
}
body.merit-skin .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--white) !important; line-height:1.4 !important; padding:0 !important;
}
body.merit-skin .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100% !important; right:8px;
}
body.merit-skin .select2-dropdown,
body.merit-skin .select2-container--default .select2-results__option{
  background:var(--panel-2) !important; color:var(--mist) !important; border-color:var(--line) !important;
}
body.merit-skin .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--blue) !important; color:#fff !important;
}
body.merit-skin .select2-search--dropdown .select2-search__field{
  background:#10151d !important; border:1px solid var(--line) !important; color:var(--white) !important;
}

body.merit-skin ::placeholder{ color:var(--steel) !important; opacity:1; }

body.merit-skin .woocommerce form .form-row input.input-text:focus,
body.merit-skin .woocommerce form .form-row textarea:focus,
body.merit-skin .woocommerce-checkout select:focus,
body.merit-skin .woocommerce input:focus,
body.merit-skin .woocommerce select:focus,
body.merit-skin .woocommerce textarea:focus,
body.merit-skin .select2-container--default.select2-container--focus .select2-selection--single{
  outline:none !important;
  border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(79,169,255,.22) !important;
}

/* Validation states */
body.merit-skin .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.merit-skin .woocommerce form .form-row.woocommerce-invalid select{
  border-color:rgba(255,107,107,.65) !important;
}
body.merit-skin .woocommerce form .form-row.woocommerce-validated input.input-text{
  border-color:rgba(79,169,255,.45) !important;
}

/* ---------- Text entry: blocks ---------- */
body.merit-skin .wc-block-components-text-input input,
body.merit-skin .wc-block-components-text-input input[type="text"],
body.merit-skin .wc-block-components-text-input input[type="email"],
body.merit-skin .wc-block-components-text-input input[type="tel"],
body.merit-skin .wc-block-components-textarea,
body.merit-skin .wc-block-components-select .wc-block-components-select__container,
body.merit-skin .wc-block-components-select__select,
body.merit-skin .wc-block-components-combobox .components-form-token-field__input-container,
body.merit-skin .wc-block-components-form input,
body.merit-skin .wc-block-components-address-form input{
  background:#10151d !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--white) !important;
  font-family:var(--body) !important;
}
body.merit-skin .wc-block-components-text-input input:focus,
body.merit-skin .wc-block-components-text-input.is-active input{
  border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(79,169,255,.22) !important;
}
body.merit-skin .wc-block-components-text-input label,
body.merit-skin .wc-block-components-checkout-step label,
body.merit-skin .wc-block-components-text-input.is-active label,
body.merit-skin .wc-block-components-select__label{ color:var(--steel) !important; }

body.merit-skin .wc-block-checkout,
body.merit-skin .wp-block-woocommerce-checkout,
body.merit-skin .wc-block-components-panel,
body.merit-skin .wc-block-components-checkout-step,
body.merit-skin .wc-block-checkout__sidebar .wc-block-components-sidebar{
  background:transparent !important; color:var(--mist) !important;
}
body.merit-skin .wc-block-components-checkout-step__title,
body.merit-skin .wc-block-components-title{ color:var(--white) !important; font-family:var(--display) !important; }
body.merit-skin .wc-block-components-order-summary,
body.merit-skin .wc-block-components-totals-item,
body.merit-skin .wc-block-components-totals-footer-item{
  color:var(--mist) !important; border-color:var(--line-soft) !important;
}
body.merit-skin .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.merit-skin .wc-block-components-product-price,
body.merit-skin .wc-block-components-order-summary-item__total-price{ color:var(--white) !important; }
body.merit-skin .wc-block-components-radio-control__option,
body.merit-skin .wc-block-components-radio-control-accordion-option{
  background:rgba(11,15,20,.4) !important; border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important; color:var(--mist) !important;
}
body.merit-skin .wc-block-components-button{ background:var(--grad) !important; color:#fff !important; }

/* ---------- Checkboxes and radios ---------- */
body.merit-skin input[type="checkbox"],
body.merit-skin input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex:0 0 17px; vertical-align:middle;
  border:1px solid var(--line); background:#10151d; cursor:pointer;
  border-radius:4px; position:relative; margin-right:8px; padding:0 !important;
}
body.merit-skin input[type="radio"]{ border-radius:50%; }
body.merit-skin input[type="checkbox"]:checked,
body.merit-skin input[type="radio"]:checked{ background:var(--grad); border-color:transparent; }
body.merit-skin input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
}
body.merit-skin input[type="radio"]:checked::after{
  content:''; position:absolute; inset:4px; border-radius:50%; background:#fff;
}
body.merit-skin .woocommerce-form__label-for-checkbox,
body.merit-skin .woocommerce-terms-and-conditions-checkbox-text{
  display:inline-flex; align-items:flex-start; gap:2px;
  text-transform:none; letter-spacing:0; font-size:.86rem; color:var(--mist);
}

/* ---------- Payment box ---------- */
body.merit-skin #payment,
body.merit-skin .woocommerce-checkout-payment{
  background:transparent !important; border-radius:var(--radius);
}
body.merit-skin #payment ul.payment_methods{
  list-style:none; margin:0 0 18px; padding:0 0 18px;
  border-bottom:1px solid var(--line-soft) !important;
}
body.merit-skin #payment ul.payment_methods li{
  background:rgba(11,15,20,.45) !important; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; list-style:none;
}
body.merit-skin #payment ul.payment_methods li > label{
  display:inline-flex; align-items:center; gap:4px;
  text-transform:none; letter-spacing:0; margin:0;
  font-size:.94rem; color:var(--white);
}
body.merit-skin #payment div.payment_box{
  background:rgba(255,255,255,.045) !important;
  border-radius:8px; padding:14px; margin:12px 0 0;
  color:var(--steel); font-size:.86rem;
}
body.merit-skin #payment div.payment_box::before{ display:none !important; }
body.merit-skin #payment .about_paypal{ color:var(--cyan); }

/* Hosted card fields.
   Stripe draws the actual inputs inside an iframe, so the text colour in there
   comes from the appearance object we hand Stripe in PHP, not from this file.
   These rules style the container the iframe sits in and keep the two in step:
   dark field, light text. Getting only one half right is what produced a white
   box with invisible text. */
body.merit-skin .wc-stripe-elements-field,
body.merit-skin .wc-stripe-iban-element-field,
body.merit-skin #wc-stripe-card-element,
body.merit-skin #wc-stripe-exp-element,
body.merit-skin #wc-stripe-cvc-element,
body.merit-skin #stripe-card-element,
body.merit-skin #stripe-exp-element,
body.merit-skin #stripe-cvc-element,
body.merit-skin .wcpay-card-mount-point,
body.merit-skin .wc-payment-form input,
body.merit-skin .woocommerce-credit-card-form input,
body.merit-skin .wc-braintree-hosted-field,
body.merit-skin .squareWrapper,
body.merit-skin #card-sv-wc-payment-gateway-credit-card-account-number-hosted{
  background:#10151d !important;
  color:var(--white) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-sm) !important;
  padding:13px 15px !important;
  box-shadow:none !important;
  min-height:48px;
}
body.merit-skin .wc-stripe-elements-field.focused,
body.merit-skin .StripeElement--focus,
body.merit-skin .wc-payment-form input:focus,
body.merit-skin .woocommerce-credit-card-form input:focus{
  border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(79,169,255,.22) !important;
}
body.merit-skin .StripeElement--invalid,
body.merit-skin .wc-stripe-elements-field.invalid{
  border-color:rgba(255,107,107,.65) !important;
}
/* The Payment Element mounts its own wrapper; keep it transparent so our
   container styling shows through rather than a white card. */
body.merit-skin .wc-stripe-upe-element,
body.merit-skin .wcstripe-payment-element,
body.merit-skin #wc-stripe-upe-element,
body.merit-skin .__PrivateStripeElement,
body.merit-skin .wc-stripe-upe-element iframe{
  background:transparent !important;
}
/* Some builds wrap the payment box in a white card of their own. */
body.merit-skin .wc-stripe-payment-request-wrapper,
body.merit-skin .payment_method_stripe .payment_box,
body.merit-skin .payment_method_stripe_cc .payment_box,
body.merit-skin .payment_method_woocommerce_payments .payment_box{
  background:rgba(255,255,255,.045) !important; color:var(--mist) !important;
}
body.merit-skin .payment_box .wc-stripe-error,
body.merit-skin .woocommerce-error.wc-stripe-error{ color:#ffb4b4 !important; }
body.merit-skin .payment_box .form-row label{ color:var(--steel) !important; }

/* ---------- Place order ---------- */
body.merit-skin #place_order{
  width:100%; margin-top:18px;
  background:var(--grad) !important; color:#fff !important;
  border:0 !important; border-radius:var(--radius-sm) !important;
  padding:16px 24px !important; font-size:.82rem !important;
  font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
body.merit-skin #place_order:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(37,99,255,1); }

/* ---------- Loading overlay ---------- */
body.merit-skin .blockUI.blockOverlay{ background:rgba(11,15,20,.75) !important; }
body.merit-skin .blockUI.blockOverlay::before{ border-top-color:var(--cyan) !important; }

/* ---------- Coupon ---------- */
body.merit-skin .checkout_coupon{
  background:var(--panel) !important; border:1px solid var(--line-soft) !important;
  border-radius:var(--radius); padding:20px; margin-bottom:22px;
}

/* ---------- Tables inside the skin ---------- */
body.merit-skin table.shop_table,
body.merit-skin table.woocommerce-checkout-review-order-table,
body.merit-skin .woocommerce-orders-table,
body.merit-skin .woocommerce-table--order-details{
  background:var(--panel) !important; border:1px solid var(--line-soft) !important;
  border-radius:var(--radius); border-collapse:separate; border-spacing:0; width:100%;
}
body.merit-skin table.shop_table th,
body.merit-skin table.shop_table td{ border-color:var(--line-soft) !important; color:var(--mist); }
body.merit-skin table.shop_table tfoot th,
body.merit-skin table.shop_table tfoot td{ color:var(--white); }
body.merit-skin .woocommerce-checkout-review-order-table .product-name{ color:var(--mist); }

/* ---------- Account ---------- */
body.merit-skin .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
body.merit-skin .woocommerce-form-login,
body.merit-skin .woocommerce-form-register,
body.merit-skin .woocommerce-ResetPassword{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:28px; max-width:520px;
}
body.merit-skin .woocommerce-form-login__rememberme{ display:inline-flex; align-items:center; }

/* ---------- Thank you ---------- */
body.merit-thankyou .woocommerce-order{ max-width:820px; margin-inline:auto; }

/* ---------- Sign in / create account ---------- */
.mp-auth{ display:grid; gap:22px; max-width:520px; margin-inline:auto; }
.mp-auth--split{ grid-template-columns:1fr 1fr; max-width:940px; align-items:start; }
.mp-auth__card{ padding:30px; }
.mp-auth__title{ font-size:1.45rem; margin:0 0 8px; }
.mp-auth__lead{ color:var(--steel); font-size:.88rem; margin:0 0 22px; }
.mp-auth__hint{ display:block; margin-top:7px; font-size:.74rem; color:var(--steel); text-transform:none; letter-spacing:0; }
.mp-auth__meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:6px 0 20px; flex-wrap:wrap; }
.mp-auth__check{ display:inline-flex; align-items:center; gap:8px; margin:0; font-size:.82rem; color:var(--mist); text-transform:none; letter-spacing:0; }
.mp-auth__forgot{ font-size:.8rem; color:var(--cyan); }
.mp-auth__forgot:hover{ color:var(--white); }
.mp-auth .field label{ margin-bottom:7px; }
.mp-auth form > .btn{ margin-top:6px; }

body.merit-skin .mp-auth .woocommerce-form-login,
body.merit-skin .mp-auth .woocommerce-form-register{
  background:transparent; border:0; padding:0; max-width:none;
}

/* WooCommerce prints these above the account card */
body.merit-skin .woocommerce-form-login-toggle,
body.merit-skin .woocommerce-form-coupon-toggle{ margin-bottom:18px; }

@media (max-width:820px){
  .mp-auth--split{ grid-template-columns:1fr; max-width:520px; }
}

/* ---------- Order confirmation ---------- */
.mp-ty{ max-width:960px; margin-inline:auto; }
.mp-ty__hero{ text-align:center; padding:14px 0 40px; }
.mp-ty__check{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--grad);
  box-shadow:0 14px 40px -14px rgba(37,99,255,.9);
}
.mp-ty__check svg{ width:30px; height:30px; }
.mp-ty__hero h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:14px; }
.mp-ty__hero--failed h1{ color:#ffb4b4; }
.mp-ty__lead{ color:var(--steel); font-size:1rem; max-width:52ch; margin:0 auto; }
.mp-ty__lead strong{ color:var(--white); font-weight:600; }

.mp-ty__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  padding:0; overflow:hidden; background:var(--line-soft); margin-bottom:22px;
}
.mp-ty__fact{ background:var(--panel); padding:20px 22px; }
.mp-ty__fact span{
  display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); margin-bottom:7px;
}
.mp-ty__fact b{ font-family:var(--display); font-size:1.05rem; color:var(--white); letter-spacing:-.01em; }

.mp-ty__note{
  display:flex; gap:11px; align-items:flex-start; padding:15px 18px; margin-bottom:22px;
  border:1px solid rgba(79,169,255,.35); border-radius:var(--radius-sm);
  background:rgba(79,169,255,.06); font-size:.86rem; color:var(--mist);
}
.mp-ty__note svg{ width:17px; height:17px; color:var(--cyan); flex-shrink:0; margin-top:2px; }

.mp-ty__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:18px; align-items:start; }
.mp-ty__side{ display:grid; gap:18px; }
.mp-ty__h{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin:0 0 18px; }

.mp-ty__item{ display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.mp-ty__item:last-of-type{ border-bottom:0; }
.mp-ty__item .line__media{ width:64px; height:64px; position:relative; flex-shrink:0; }
.mp-ty__qty{
  position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px;
  border-radius:11px; background:var(--grad); color:#fff; font-size:.66rem; font-weight:700;
  display:grid; place-items:center; line-height:1; border:2px solid var(--panel);
}
.mp-ty__item-info{ flex:1; min-width:0; }
.mp-ty__item-price{ font-weight:700; color:var(--white); font-size:.94rem; white-space:nowrap; }
.mp-ty__totals{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft); }

.mp-ty address{ font-style:normal; color:var(--mist); font-size:.9rem; line-height:1.65; }
.mp-ty__meta{ margin:12px 0 0; font-size:.8rem; color:var(--steel); }
.mp-ty__next{ margin:0; gap:13px; }
.mp-ty__next li{ font-size:.84rem; }

.mp-ty__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.mp-ty__actions--foot{ margin-top:30px; }

/* WooCommerce prints its own order details after the template on some setups */
body.merit-thankyou .woocommerce-order-details,
body.merit-thankyou .woocommerce-customer-details,
body.merit-thankyou .woocommerce-order-overview{ display:none !important; }

@media (max-width:900px){
  .mp-ty__facts{ grid-template-columns:1fr 1fr; }
  .mp-ty__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .mp-ty__facts{ grid-template-columns:1fr; }
}

/* ==========================================================================
   STRIPPED CHECKOUT  —  .mpco
   Logo, form, order summary, coupon, slim legal footer. Nothing else.
   ========================================================================== */

body.merit-doc--checkout{ background:var(--ink); }

.mpco{ min-height:100vh; display:flex; flex-direction:column; }

.mpco__header{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 28px; border-bottom:1px solid var(--line-soft);
  max-width:1180px; width:100%; margin-inline:auto;
}
.mpco__brand{ display:inline-flex; align-items:center; }
.mpco__brand img{ display:block; height:auto; }
.mpco__logo{ display:block; height:auto; }
.mpco__secure{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.mpco__secure svg{ width:15px; height:15px; }

.mpco__body{ flex:1; padding:38px 28px 60px; }
.mpco__body > .woo-wrap{ max-width:1180px; margin-inline:auto; }

.mpco__grid{ display:grid; grid-template-columns:1.28fr .72fr; gap:26px; align-items:start; }
.mpco__main{ display:grid; gap:18px; min-width:0; }
.mpco__col{ display:grid; gap:18px; min-width:0; }
.mpco__side{ display:grid; gap:18px; position:sticky; top:24px; min-width:0; }

/* Payment sits above the address in the left column, with the summary running
   alongside both. Placed explicitly rather than by source order, so the very
   same markup can stack in a different order on a phone. */
.mpco__col--payment{ grid-column:1; grid-row:1; }
.mpco__col--address{ grid-column:1; grid-row:2; }
.mpco__grid > .mpco__side{ grid-column:2; grid-row:1 / span 2; }

.mpco__panel{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:26px;
}
.mpco__panel-title{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); margin:0 0 20px; font-weight:600;
}
.mpco__panel h3{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); margin:0 0 18px; font-weight:600;
}
.mpco__note{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 20px;
  font-size:.8rem; color:var(--steel);
}
.mpco__note svg{ width:15px; height:15px; color:var(--cyan); flex-shrink:0; margin-top:2px; }

.mpco__notice{
  max-width:520px; margin:60px auto; padding:22px; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
}

/* Order summary */
.mpco__summary table.shop_table{ background:transparent !important; border:0 !important; }
.mpco__summary table.shop_table th,
.mpco__summary table.shop_table td{ padding:11px 0 !important; }
.mpco__summary .product-name{ color:var(--mist); font-size:.88rem; }
.mpco__summary .product-total{ text-align:right; white-space:nowrap; }
.mpco__summary tfoot .order-total th,
.mpco__summary tfoot .order-total td{ font-size:1.05rem; color:var(--white); }
.mpco__summary #payment{ display:none; } /* payment lives in the left column */

/* Coupon */
.mpco__coupon-row{ display:flex; gap:9px; }
.mpco__coupon-input{ flex:1; min-width:0; }
.mpco__coupon-row .btn{ flex-shrink:0; }
.mpco__coupon-msg{ font-size:.78rem; margin-top:10px; }
.mpco__coupon-msg.is-ok{ color:var(--cyan); }
.mpco__coupon-msg.is-err{ color:#ffb4b4; }

/* Trust row */
.mpco__trust{ display:grid; gap:11px; padding:4px 6px; }
.mpco__trust div{ display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--steel); }
.mpco__trust svg{ width:15px; height:15px; color:var(--cyan); flex-shrink:0; }

/* Footer */
.mpco__footer{
  border-top:1px solid var(--line-soft); padding:20px 28px;
  max-width:1180px; width:100%; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; font-size:.74rem; color:var(--steel);
}
.mpco__legal{ display:flex; gap:18px; flex-wrap:wrap; }
.mpco__legal a{ color:var(--steel); }
.mpco__legal a:hover{ color:var(--cyan); }

/* WooCommerce bits that would otherwise duplicate our panels */
body.merit-doc--checkout .woocommerce-form-coupon-toggle,
body.merit-doc--checkout .checkout_coupon,
body.merit-doc--checkout .woocommerce-form-login-toggle,
body.merit-doc--checkout .mp-ship-bar{ display:none !important; }

body.merit-doc--checkout #customer_details{ display:grid; gap:18px; }
body.merit-doc--checkout #customer_details .col-1,
body.merit-doc--checkout #customer_details .col-2{ width:100%; float:none; }
body.merit-doc--checkout .woocommerce-billing-fields,
body.merit-doc--checkout .woocommerce-shipping-fields,
body.merit-doc--checkout .woocommerce-additional-fields{ margin:0; }
body.merit-doc--checkout .woocommerce-billing-fields h3,
body.merit-doc--checkout .woocommerce-additional-fields h3{ display:none; }
body.merit-doc--checkout .woocommerce-shipping-fields h3{ display:block; }
body.merit-doc--checkout #place_order{ margin-top:20px; }
body.merit-doc--checkout .form-row-first,
body.merit-doc--checkout .form-row-last{ width:calc(50% - 7px); }

@media (max-width:960px){
  /* Order for a narrow screen: what you are buying, then how to pay for it,
     then the address the bank needs. */
  .mpco__grid{ display:flex; flex-direction:column; }
  .mpco__side{ position:static; }
  .mpco__grid > .mpco__side{ order:1; grid-column:auto; grid-row:auto; }
  .mpco__col--payment{ order:2; grid-column:auto; grid-row:auto; }
  .mpco__col--address{ order:3; grid-column:auto; grid-row:auto; }
  .mpco__header{ padding:18px 20px; }
  .mpco__body{ padding:26px 20px 48px; }
  body.merit-doc--checkout .form-row-first,
  body.merit-doc--checkout .form-row-last{ width:100%; margin-right:0; }
}

/* ==========================================================================
   MP mark adjustments
   The mark is close to square, unlike the old wide lockup, so the header rows
   need their own sizing rather than inheriting lockup proportions.
   ========================================================================== */
.logo__img{ display:block; height:auto; width:auto; }
.header .logo__img{ max-height:46px; }
.footer .logo__img{ max-height:58px; }
.mpco__brand .logo__img{ max-height:62px; }

/* ---------- Order summary: close the gap under the heading ---------- */
.mpco__summary .mpco__panel-title{ margin-bottom:6px; }
.mpco__summary #order_review,
.mpco__summary .woocommerce-checkout-review-order{ margin-top:0; }
.mpco__summary table.shop_table{ margin:0 !important; }
.mpco__summary table.shop_table thead th{
  padding-top:8px !important; padding-bottom:8px !important;
  border-bottom:1px solid var(--line-soft) !important;
}
.mpco__summary table.shop_table tbody tr:first-child td{ padding-top:12px !important; }
.mpco__summary table.shop_table tfoot tr:first-child th,
.mpco__summary table.shop_table tfoot tr:first-child td{
  padding-top:14px !important; border-top:1px solid var(--line-soft) !important;
}
/* WooCommerce sometimes wraps the review table in a spacer paragraph. */
.mpco__summary #order_review > p:empty,
.mpco__summary .woocommerce-checkout-review-order > p:empty{ display:none; }

/* ---------- Checkout footer, now legal links only ---------- */
.mpco__footer{ justify-content:center; }
.mpco__footer .mpco__legal{ justify-content:center; }
.mpco__footer:empty,
.mpco__footer:has(.mpco__legal:empty){ display:none; }

/* ==========================================================================
   Checkout layout corrections
   ========================================================================== */

/* The default panel tone sits only four points off the page background, which
   made the cards invisible and the columns read as floating text. */
body.merit-doc--checkout .mpco__panel{
  background:#141B25;
  border:1px solid rgba(167,176,190,.13);
}

/* Narrower measure so the form does not sit marooned in the middle of a wide
   screen, and a tighter column ratio so the summary holds its own. */
.mpco__body{ padding:30px 28px 48px; }
.mpco__body > .woo-wrap{ max-width:1080px; }
.mpco__grid{ grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:22px; }
.mpco__panel{ padding:24px; }

/* Field rhythm: WooCommerce's default row spacing is loose for a single column. */
body.merit-doc--checkout .woocommerce-checkout .form-row{ margin-bottom:13px; }
body.merit-doc--checkout .woocommerce-checkout .form-row:last-child{ margin-bottom:0; }
body.merit-doc--checkout .woocommerce-checkout p{ margin-bottom:13px; }
body.merit-doc--checkout .woocommerce-billing-fields__field-wrapper > .form-row:last-child,
body.merit-doc--checkout .woocommerce-shipping-fields__field-wrapper > .form-row:last-child{ margin-bottom:0; }

.mpco__empty{ color:var(--steel); font-size:.86rem; margin:0 0 14px; }

/* ---------- Back control ---------- */
.mpco__back{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 15px;
  color:var(--mist); font-family:inherit; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.mpco__back:hover{ border-color:var(--cyan); color:var(--white); }
.mpco__back:active{ transform:translateX(-2px); }
.mpco__back svg{ width:15px; height:15px; }

/* Three-up header: back left, mark centred, secure badge right. */
.mpco__header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.mpco__header .mpco__back{ justify-self:start; }
.mpco__header .mpco__brand{ justify-self:center; }
.mpco__header .mpco__secure{ justify-self:end; }
.mpco__brand{ pointer-events:none; }
.mpco__logo{ display:block; height:auto; max-height:74px; width:auto; }

@media (max-width:760px){
  .mpco__header{ grid-template-columns:auto 1fr; row-gap:14px; }
  .mpco__header .mpco__brand{ justify-self:end; }
  .mpco__header .mpco__secure{ grid-column:1 / -1; justify-self:start; }
  .mpco__back span{ display:none; }
  .mpco__back{ padding:9px 11px; }
}

/* ==========================================================================
   Checkout grid — row placement fix
   WooCommerce's stock form-checkout.php emits three siblings:
       #customer_details, #order_review_heading, #order_review
   Auto-placement then puts the heading in row 1 and the review table in row 2,
   and row 2 does not start until the full-height form in row 1 has ended. That
   is the ~800px void between "Your order" and the order table. Placing all
   three explicitly closes it, whichever template ends up rendering.
   ========================================================================== */

body.merit-doc--checkout form.checkout,
body.merit-doc--checkout form.woocommerce-checkout{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr) !important;
  grid-template-rows:auto 1fr;
  gap:0 22px !important;
  align-items:start !important;
}

/* Our own template puts everything inside one wrapper, so it spans the grid
   and its internal .mpco__grid does the work instead. */
body.merit-doc--checkout form.checkout > .mpco__grid{
  grid-column:1 / -1; grid-row:1 / -1;
}

/* Stock structure. */
body.merit-doc--checkout form.checkout > #customer_details{
  grid-column:1; grid-row:1 / span 2; width:100%;
}
body.merit-doc--checkout form.checkout > #order_review_heading{
  grid-column:2; grid-row:1;
  margin:0 0 12px; padding:0;
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--steel);
}
body.merit-doc--checkout form.checkout > #order_review{
  grid-column:2; grid-row:2;
  position:sticky; top:24px;
  margin:0;
  background:#141B25; border:1px solid rgba(167,176,190,.13);
  border-radius:var(--radius); padding:20px;
}
body.merit-doc--checkout form.checkout > #order_review table.shop_table{
  background:transparent !important; border:0 !important; margin:0 !important;
}
body.merit-doc--checkout form.checkout > #order_review th,
body.merit-doc--checkout form.checkout > #order_review td{
  padding:11px 0 !important;
}
body.merit-doc--checkout form.checkout > #order_review #payment{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft);
}

/* Neutralise the general WooCommerce two-column rules inside the minimal
   checkout so they cannot fight the placement above. */
body.merit-doc--checkout .woo-wrap .woocommerce-checkout-review-order{
  grid-column:auto; position:static; padding:0; background:none; border:0;
}
body.merit-doc--checkout .mpco__grid .woocommerce-checkout-review-order{
  position:static;
}

@media (max-width:960px){
  body.merit-doc--checkout form.checkout,
  body.merit-doc--checkout form.woocommerce-checkout{
    grid-template-columns:1fr !important; gap:18px !important;
  }
  body.merit-doc--checkout form.checkout > #customer_details,
  body.merit-doc--checkout form.checkout > #order_review_heading,
  body.merit-doc--checkout form.checkout > #order_review{
    grid-column:1; grid-row:auto; position:static;
  }
}

/* ==========================================================================
   Checkout sidebar refinements
   ========================================================================== */

/* ---------- Order summary header ----------
   Was a bare uppercase label floating above the table. Now a proper card
   header: title, item count, and a rule separating it from the contents. */
.mpco__summary{ padding:0; overflow:hidden; }
.mpco__summary-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:18px 22px; border-bottom:1px solid rgba(167,176,190,.13);
  background:rgba(255,255,255,.022);
}
.mpco__summary-head h2{
  margin:0; font-family:var(--display); font-size:.9rem; font-weight:700;
  letter-spacing:.01em; text-transform:none; color:var(--white);
}
.mpco__summary-count{
  font-size:.7rem; letter-spacing:.08em; color:var(--steel); white-space:nowrap;
}
.mpco__summary #order_review,
.mpco__summary .woocommerce-checkout-review-order{ padding:6px 22px 20px; }

/* Same treatment for WooCommerce's own heading if the stock template renders */
body.merit-doc--checkout form.checkout > #order_review_heading{
  margin:0 0 -1px !important; padding:18px 22px !important;
  border:1px solid rgba(167,176,190,.13) !important;
  border-bottom:0 !important;
  border-radius:var(--radius) var(--radius) 0 0 !important;
  background:#161D28 !important;
  font-family:var(--display) !important; font-size:.9rem !important;
  font-weight:700 !important; letter-spacing:.01em !important;
  text-transform:none !important; color:var(--white) !important;
}
body.merit-doc--checkout form.checkout > #order_review{
  border-radius:0 0 var(--radius) var(--radius) !important;
  padding:6px 22px 20px !important;
}

/* ---------- Discount prompt ---------- */
.mpco__discount{ padding:20px 22px; }
.mpco__discount-copy{
  margin:0 0 12px; font-size:.82rem; color:var(--steel);
}
.mpco__discount-btn{
  display:inline-flex; align-items:center; gap:9px; width:100%;
  justify-content:center; background:transparent;
  border:1px dashed rgba(167,176,190,.28); border-radius:var(--radius-sm);
  padding:12px 16px; color:var(--mist); font-family:inherit;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.mpco__discount-btn:hover{ border-color:var(--cyan); color:var(--white); }
.mpco__discount-btn:active{ transform:translateX(-2px); }
.mpco__discount-btn svg{ width:15px; height:15px; flex-shrink:0; }

/* ---------- Logo as a back control ---------- */
.mpco__brand{
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; pointer-events:auto;
  transition:opacity .18s ease, transform .18s ease;
}
.mpco__brand:hover{ opacity:.82; }
.mpco__brand:active{ transform:translateX(-2px); }
.mpco__brand:focus-visible{ outline:2px solid var(--cyan); outline-offset:6px; border-radius:6px; }

/* ==========================================================================
   ORDER SUMMARY — items with imagery and inline quantity
   ========================================================================== */

.mpco-review{ transition:opacity .18s ease; }
.mpco-review.is-busy{ opacity:.5; pointer-events:none; }

.mpco-review__items{ display:grid; }
.mpco-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.mpco-item:first-child{ padding-top:4px; }
.mpco-item:last-child{ border-bottom:0; }

.mpco-item__thumb{
  position:relative; width:58px; height:58px; flex-shrink:0;
  border-radius:10px; background:var(--grad-dark);
  border:1px solid var(--line-soft); display:grid; place-items:center; padding:6px;
}
.mpco-item__thumb.is-photo{ padding:0; overflow:hidden; }
.mpco-item__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mpco-item__thumb svg{ width:100%; height:auto; }
.mpco-item__badge{
  position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  border-radius:20px; background:var(--cyan); color:#04101F;
  font-size:.66rem; font-weight:800; display:grid; place-items:center; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.55);
}

.mpco-item__info{ min-width:0; }
.mpco-item__name{
  font-size:.86rem; font-weight:600; color:var(--white); line-height:1.35; margin-bottom:3px;
  overflow-wrap:anywhere; word-break:break-word;
}
.mpco-item__sku,
.mpco-item__meta{
  font-size:.68rem; letter-spacing:.1em; color:var(--steel); text-transform:uppercase;
  overflow-wrap:anywhere; word-break:break-word;
}
.mpco-item__meta{ text-transform:none; letter-spacing:0; margin-top:2px; }
.mpco-item__price{ font-size:.88rem; font-weight:700; color:var(--white); white-space:nowrap; }

.mpco-qty{ display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap; }
.mpco-qty__btn{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
  background:rgba(11,15,20,.6); color:var(--white); font-size:.95rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:border-color .15s, color .15s;
}
.mpco-qty__btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.mpco-qty__n{ min-width:22px; text-align:center; font-size:.82rem; font-weight:600; color:var(--white); }
.mpco-qty__rm{
  margin-left:6px; background:none; border:0; padding:0; cursor:pointer;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}
.mpco-qty__rm:hover{ color:#ff6b6b; }

.mpco-review__totals{ margin-top:6px; padding-top:14px; border-top:1px solid var(--line-soft); }
.mpco-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:7px 0; font-size:.86rem; color:var(--steel);
}
.mpco-total span:first-child{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.mpco-total span:last-child{ color:var(--mist); text-align:right; }
.mpco-total--discount span:last-child{ color:var(--cyan); }
.mpco-total--muted span:last-child{ font-size:.78rem; }
.mpco-total--grand{
  margin-top:8px; padding-top:13px; border-top:1px solid var(--line-soft);
  font-size:1.05rem; color:var(--white);
}
.mpco-total--grand span:last-child{ color:var(--white); font-family:var(--display); font-weight:700; }
/* WooCommerce's own shipping rows land inside the totals block */
.mpco-review__totals .shipping th,
.mpco-review__totals .woocommerce-shipping-totals{ display:block; }
.mpco-review__totals ul#shipping_method{ list-style:none; margin:6px 0 0; padding:0; }
.mpco-review__totals ul#shipping_method li{ padding:5px 0; font-size:.82rem; color:var(--mist); }

/* ==========================================================================
   CHECKOUT BUTTONS — matched to the Moleano treatment
   Blue gradient, dark ink on top, lifted on hover.
   ========================================================================== */

body.merit-doc--checkout #place_order,
body.merit-doc--checkout .mpco__primary{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, #4FA9FF, #2B6FD6) !important;
  color:#04101F !important;
  font-family:var(--display) !important; font-weight:800 !important;
  letter-spacing:.05em !important; font-size:1rem !important; text-transform:none !important;
  border:0 !important; border-radius:12px !important; padding:17px 24px !important;
  box-shadow:0 8px 26px rgba(79,169,255,.35) !important;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease;
}
body.merit-doc--checkout #place_order:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(79,169,255,.45) !important;
}
body.merit-doc--checkout #place_order:disabled{ opacity:.5; transform:none; }

/* Second way to finish, under the address fields. Same weight as the real
   button, because it does the same job. */
.mpco__submit-again{ margin-top:2px; }
body.merit-doc--checkout .mpco__place-proxy{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, #4FA9FF, #2B6FD6) !important;
  color:#04101F !important;
  font-family:var(--display) !important; font-weight:800 !important;
  letter-spacing:.05em !important; font-size:1rem !important; text-transform:none !important;
  border:0 !important; border-radius:12px !important; padding:17px 24px !important;
  box-shadow:0 8px 26px rgba(79,169,255,.35) !important;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease;
}
body.merit-doc--checkout .mpco__place-proxy:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 34px rgba(79,169,255,.45) !important;
}
body.merit-doc--checkout .mpco__place-proxy[hidden]{ display:none !important; }

body.merit-doc--checkout .woo-wrap .button,
body.merit-doc--checkout .woo-wrap button[type="submit"]:not(#place_order){
  background:transparent !important; border:1px solid var(--cyan) !important;
  color:var(--cyan) !important; border-radius:10px !important;
  font-weight:700 !important; letter-spacing:.04em !important; text-transform:uppercase !important;
  font-size:.74rem !important; padding:12px 22px !important; box-shadow:none !important;
}
body.merit-doc--checkout .woo-wrap .button:hover,
body.merit-doc--checkout .woo-wrap button[type="submit"]:not(#place_order):hover{
  background:var(--cyan) !important; color:#04101F !important; transform:none;
}

/* Backgrounds, Moleano-style: near-black page, raised panels */
body.merit-doc--checkout{ background:#0A0A0A !important; }
body.merit-doc--checkout .mpco__panel,
body.merit-doc--checkout form.checkout > #order_review{
  background:#12141A !important; border-color:rgba(199,204,212,.12) !important;
}
body.merit-doc--checkout .mpco__summary-head,
body.merit-doc--checkout form.checkout > #order_review_heading{
  background:#171A21 !important; border-color:rgba(199,204,212,.12) !important;
}
body.merit-doc--checkout #payment ul.payment_methods li{
  background:#171A21 !important; border-color:rgba(199,204,212,.12) !important;
}
body.merit-doc--checkout #payment ul.payment_methods li:has(input:checked){
  border-color:var(--cyan) !important;
}
body.merit-doc--checkout .mpco__header,
body.merit-doc--checkout .mpco__footer{ border-color:rgba(199,204,212,.10); }

/* Terms + privacy sit above the button */
body.merit-doc--checkout .place-order{ margin-top:8px; }
body.merit-doc--checkout .woocommerce-terms-and-conditions-wrapper{ margin-bottom:14px; }

/* ==========================================================================
   MOBILE
   Merit's type scale was written for desktop and carried straight onto phones,
   which is what made everything read oversized. This trims the large elements,
   fixes the layouts that were still assuming two columns, and makes the primary
   action follow the customer down the page.
   ========================================================================== */

@media (max-width: 900px) {

  /* ---- Header ---- */
  .header__inner{ gap:12px; }
  .header .logo__img{ max-height:34px; }
  .announce .wrap{ height:auto; padding:7px 0; flex-wrap:wrap; gap:8px; font-size:.6rem; }
  .header__tools{ gap:2px; }
  .icon-btn{ width:36px; height:36px; }

  /* ---- Type scale ---- */
  h1{ font-size:clamp(1.85rem, 7vw, 2.4rem); }
  h2{ font-size:clamp(1.4rem, 5.4vw, 1.85rem); }
  .hero__lead{ font-size:.95rem; }
  .hero__stats{ gap:18px; padding-top:20px; margin-top:30px; flex-wrap:wrap; }
  .hero__stat b{ font-size:1.25rem; }
  .hero__stat span{ font-size:.6rem; }
  .section-head{ margin-bottom:24px; }
  .section-head p{ font-size:.88rem; }
  .eyebrow{ font-size:.62rem; letter-spacing:.24em; }

  /* ---- Product detail ---- */
  .pd{ gap:26px; }
  .pd h1{ font-size:1.55rem; }
  .pd__price b{ font-size:1.6rem; }
  .gallery__main{ padding:18px; }
  .gallery__main.is-photo{ padding:0; }
  .assure{ gap:14px; }
  .assure div{ font-size:.74rem; }
  .specs td{ font-size:.8rem; }

  /* ---- Cards ---- */
  .card__title{ font-size:.85rem; }
  .price b{ font-size:1rem; }
  .cat{ min-height:190px; padding:18px; }
  .cat h3{ font-size:1.1rem; }

  /* ---- Page heads ---- */
  .phead__inner{ padding:34px 0 30px; }
  .phead h1{ font-size:clamp(1.6rem, 6.4vw, 2.1rem); }
  .phead p{ font-size:.88rem; }

  /* ---- Shop filters become a collapsible block, not a column ---- */
  .shop{ gap:22px; }
  .filters{
    background:var(--panel); border:1px solid var(--line-soft);
    border-radius:var(--radius); padding:18px;
  }
  .fgroup{ padding:14px 0; }
  .shop__bar{ gap:10px; }
  .select{ flex:1; min-width:0; }

  /* ---- Trust strip ---- */
  .trust__item{ padding:18px 16px; }
  .trust__item b{ font-size:.82rem; }
  .trust__item span{ font-size:.74rem; }

  /* ---- Buttons get real touch targets ---- */
  .btn{ padding:14px 22px; font-size:.74rem; }
  .btn--sm{ padding:11px 16px; }
  .add-btn{ width:42px; height:42px; }
}

@media (max-width: 560px) {
  .wrap{ padding-inline:14px; }
  .section{ padding:44px 0; }
  h1{ font-size:clamp(1.65rem, 8vw, 2rem); }
  .hero__inner{ padding:34px 0; min-height:0; }
  .hero__cta{ gap:9px; }
  .hero__cta .btn{ flex:1; min-width:0; }
  .grid, .grid--3{ gap:10px; }
  .card__body{ padding:11px; }
  .card__sku{ font-size:.56rem; }
  .card__meta{ margin-bottom:8px; }
  .swatches{ margin-bottom:9px; }
  .footer__grid{ gap:26px; padding-bottom:32px; }
  .footer .logo__img{ max-height:44px; }
}

/* ---- Sticky purchase bar on product pages ---- */
.mp-sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; align-items:center; gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(11,15,20,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.mp-sticky-buy.is-on{ transform:none; }
.mp-sticky-buy__price{ font-family:var(--display); font-weight:700; color:var(--white); font-size:1.05rem; white-space:nowrap; }
.mp-sticky-buy__name{ font-size:.68rem; color:var(--steel); display:block; font-weight:400; letter-spacing:0; }
.mp-sticky-buy .btn{ margin-left:auto; flex-shrink:0; }

@media (max-width: 900px) {
  .mp-sticky-buy{ display:flex; }
  body.single-product{ padding-bottom:72px; }
}

/* ==========================================================================
   MOBILE CHECKOUT
   ========================================================================== */

@media (max-width: 760px) {
  .mpco__header{ padding:14px 16px; }
  .mpco__logo{ max-height:52px; }
  .mpco__body{ padding:20px 16px 40px; }
  .mpco__panel{ padding:18px 16px; }
  .mpco__summary-head{ padding:15px 16px; }
  .mpco__summary #order_review,
  .mpco__summary .woocommerce-checkout-review-order{ padding:4px 16px 16px; }
  body.merit-doc--checkout form.checkout > #order_review_heading{ padding:15px 16px !important; }
  body.merit-doc--checkout form.checkout > #order_review{ padding:4px 16px 16px !important; }

  /* Summary first: customers want to see what they are paying for, and
     payment immediately under it so paying is the next thing in reach. */
  .mpco__grid{ display:flex; flex-direction:column; }
  .mpco__grid > .mpco__side{ order:1; }
  .mpco__col--payment{ order:2; }
  .mpco__col--address{ order:3; }

  .mpco-item{ grid-template-columns:auto 1fr; gap:11px; }
  .mpco-item__price{ grid-column:2; margin-top:2px; font-size:.84rem; }
  .mpco-item__thumb{ width:52px; height:52px; }

  /* The primary action follows you down the page. */
  body.merit-doc--checkout .place-order{
    position:sticky; bottom:10px; z-index:6;
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.merit-doc--checkout #place_order{
    padding:18px 22px !important; font-size:1.03rem !important;
    box-shadow:0 10px 30px rgba(0,0,0,.55), 0 8px 26px rgba(79,169,255,.35) !important;
  }

  .mpco__discount-btn{ font-size:.68rem; padding:13px 14px; }
  .mpco__back span{ display:none; }
}

@media (max-width: 420px) {
  .mpco__header{ grid-template-columns:auto 1fr; }
  .mpco__logo{ max-height:44px; }
  .mpco__secure{ font-size:.6rem; }
}

/* ==========================================================================
   Order summary — simplified rows (no imagery, no inline quantity controls)
   ========================================================================== */
.mpco-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  grid-template-columns:none;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.mpco-item:first-child{ padding-top:2px; }
.mpco-item:last-child{ border-bottom:0; }
.mpco-item__info{ min-width:0; flex:1; }
.mpco-item__qty{
  margin-top:5px; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   MOBILE CHECKOUT — full-width panels and an always-visible primary action
   ========================================================================== */

@media (max-width: 900px) {

  /* Nothing in the checkout may hold a desktop minimum width. Those minimums
     were what left the summary and discount panels sitting at roughly half
     the screen instead of filling it. */
  body.merit-doc--checkout .mpco__body,
  body.merit-doc--checkout .mpco__body > .woo-wrap,
  body.merit-doc--checkout form.checkout,
  body.merit-doc--checkout form.woocommerce-checkout,
  body.merit-doc--checkout .mpco__grid,
  body.merit-doc--checkout .mpco__main,
  body.merit-doc--checkout .mpco__col,
  body.merit-doc--checkout .mpco__side,
  body.merit-doc--checkout .mpco__panel,
  body.merit-doc--checkout .mpco__summary,
  body.merit-doc--checkout .mpco__discount,
  body.merit-doc--checkout #customer_details,
  body.merit-doc--checkout #order_review,
  body.merit-doc--checkout #order_review_heading{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    float:none !important;
    grid-column:1 / -1 !important;
    box-sizing:border-box;
  }

  body.merit-doc--checkout form.checkout,
  body.merit-doc--checkout form.woocommerce-checkout,
  body.merit-doc--checkout .mpco__grid{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  body.merit-doc--checkout .mpco__main,
  body.merit-doc--checkout .mpco__side{
    display:flex !important; flex-direction:column; gap:16px;
    position:static !important;
  }
  /* Summary above the form: see what you are paying for first. */
  body.merit-doc--checkout .mpco__side{ order:-1; }
  body.merit-doc--checkout #order_review_heading{ order:-2; }
  body.merit-doc--checkout #order_review{ order:-1; }

  body.merit-doc--checkout .mpco__body{ padding:18px 14px 108px; }
  body.merit-doc--checkout .mpco__panel{ padding:18px 15px; }
  body.merit-doc--checkout .mpco__summary{ padding:0 !important; }
  body.merit-doc--checkout .mpco__summary-head{ padding:15px 16px; }
  body.merit-doc--checkout .mpco__summary #order_review,
  body.merit-doc--checkout .mpco__summary .woocommerce-checkout-review-order{ padding:4px 16px 18px; }

  /* Two columns never fit a phone. */
  body.merit-doc--checkout .form-row-first,
  body.merit-doc--checkout .form-row-last{ width:100% !important; margin-right:0 !important; }

  /* ---- Place order: pinned, visible the whole way down ---- */
  body.merit-doc--checkout #place_order{
    position:fixed !important;
    left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    width:auto !important; margin:0 !important; z-index:80;
    padding:17px 22px !important; font-size:1.02rem !important;
    box-shadow:0 10px 30px rgba(0,0,0,.6), 0 8px 26px rgba(79,169,255,.35) !important;
  }
  /* Room so the pinned button never covers the last field or the footer. */
  body.merit-doc--checkout .mpco__footer{ margin-bottom:76px; }

  /* The product-page purchase bar would collide with it. */
  body.merit-doc--checkout .mp-sticky-buy{ display:none !important; }
}

/* ==========================================================================
   Shipping-first address flow
   ========================================================================== */

/* WooCommerce's own "Ship to a different address?" toggle. The checkbox has to
   stay in the DOM and stay checked — it is what tells WooCommerce to treat the
   fields below as the shipping address — so it is hidden rather than removed. */
body.merit-doc--checkout #ship-to-different-address{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
body.merit-doc--checkout .woocommerce-shipping-fields > h3,
body.merit-doc--checkout .woocommerce-additional-fields > h3{ display:none; }
body.merit-doc--checkout .shipping_address{ display:block !important; }

/* ---- The optional billing toggle ---- */
.mpco__panel--billing{ padding:18px 22px; }

/* ---- Shipping Method panel (options relocated from the summary) ---- */
.mpco-shipping-slot{ margin-top:2px; }
.mpco-muted{ color:var(--steel); font-size:.86rem; line-height:1.55; margin:0; }
#mpco-shipping-methods .mpco-shipping-rows{ display:flex; flex-direction:column; gap:10px; }
#mpco-shipping-methods tr,
#mpco-shipping-methods td{ display:block; padding:0; border:0; background:none; }
#mpco-shipping-methods th{ display:none; }
#mpco-shipping-methods ul#shipping_method{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
#mpco-shipping-methods li{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:11px; padding:13px 15px;
  background:var(--slate); transition:border-color .15s;
}
#mpco-shipping-methods li:hover{ border-color:var(--cyan); }
#mpco-shipping-methods input[type="radio"]{
  width:18px; height:18px; flex:0 0 18px; accent-color:var(--cyan); cursor:pointer;
}
#mpco-shipping-methods label{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; margin:0; cursor:pointer; color:var(--white); font-weight:600; font-size:.9rem;
}
#mpco-shipping-methods label .woocommerce-Price-amount{ color:var(--white); font-weight:700; }

/* Billing toggle + popup, nested under the shipping address in the same panel. */
.mpco__billing-block{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft);
}
.mpco__billing-toggle{
  display:flex; align-items:center; gap:11px; margin:0; cursor:pointer;
  font-size:.88rem; letter-spacing:0; text-transform:none; color:var(--mist);
}
.mpco__billing-toggle input[type="checkbox"]{
  width:19px; height:19px; flex:0 0 19px; margin:0; cursor:pointer;
}
.mpco__billing-toggle span{ line-height:1.4; }
.mpco__billing-toggle:hover span{ color:var(--white); }

/* ---- Saved-billing summary row (popup closed, box still ticked) ---- */
.mpco__billing-summary{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:11px 14px;
  background:var(--slate); border:1px solid var(--line-soft); border-radius:9px;
}
.mpco__billing-summary[hidden]{ display:none; }
.mpco__billing-summary-text{ font-size:.82rem; color:var(--mist); }
.mpco__billing-summary-edit{
  margin-left:auto; background:none; border:0; cursor:pointer; padding:0;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); font-weight:600;
}
.mpco__billing-summary-edit:hover{ color:var(--white); text-decoration:underline; }

/* ---- Billing address popup ---- */
.mpco__billing-modal{
  position:fixed; inset:0; z-index:130;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.mpco__billing-modal[hidden]{ display:none; }
.mpco__billing-modal-backdrop{
  position:absolute; inset:0; background:rgba(5,8,11,.72);
  backdrop-filter:blur(3px);
}
.mpco__billing-modal-dialog{
  position:relative; z-index:1;
  width:min(560px,100%); max-height:90vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.9);
  animation:mpBillingIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes mpBillingIn{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.mpco__billing-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--line-soft);
}
.mpco__billing-modal-head .mpco__subtitle{ margin:0; }
.mpco__billing-modal-x{
  flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:8px;
  color:var(--steel); cursor:pointer; transition:color .18s, border-color .18s;
}
.mpco__billing-modal-x svg{ width:16px; height:16px; }
.mpco__billing-modal-x:hover{ color:var(--white); border-color:var(--cyan); }
.mpco__billing-modal-body{ flex:1; overflow-y:auto; padding:20px 22px; }
.mpco__billing-modal-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:16px 22px; border-top:1px solid var(--line-soft); background:var(--slate);
  border-radius:0 0 14px 14px;
}

/* Lock background scroll while the popup is open. */
body.mp-modal-open{ overflow:hidden; }

@media (max-width: 900px) {
  body.merit-doc--checkout .mpco__panel--billing{ padding:16px 15px; }
  .mpco__billing-toggle{ font-size:.84rem; }
  .mpco__billing-modal{ padding:0; align-items:flex-end; }
  .mpco__billing-modal-dialog{
    width:100%; max-height:92vh; border-radius:16px 16px 0 0;
    animation:mpBillingUp .24s cubic-bezier(.4,0,.2,1);
  }
  @keyframes mpBillingUp{
    from{ transform:translateY(100%); }
    to{ transform:none; }
  }
  .mpco__billing-modal-foot{ border-radius:0; }
}

/* ==========================================================================
   The white fade at the top and bottom of the page
   The document element carries the browser's default white. It shows through
   above and below the body during overscroll bounce, and behind the body when
   content is shorter than the viewport. Painting html — not just body — is the
   only thing that removes it.
   ========================================================================== */
html{
  background-color:var(--ink);
  color-scheme:dark;
}
html, body{ min-height:100%; }
body.merit-doc{ background-color:var(--ink); }
body.merit-doc--checkout{ background-color:#0A0A0A !important; }
/* Overscroll on iOS and macOS reveals whatever html is painted with. */
html.merit-root, body{ overscroll-behavior-y:none; }

/* ==========================================================================
   Place order — visible at every scroll position, on every screen size
   position:sticky only holds an element while its own container is on screen,
   which is why the button disappeared once the payment panel scrolled past.
   ========================================================================== */
body.merit-doc--checkout #place_order{
  position:fixed !important;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(440px, calc(100vw - 32px)) !important;
  margin:0 !important;
  z-index:90;
  box-shadow:0 12px 34px rgba(0,0,0,.65), 0 8px 26px rgba(79,169,255,.35) !important;
}
body.merit-doc--checkout #place_order:hover{
  transform:translateX(-50%) translateY(-2px);
}
body.merit-doc--checkout #place_order:disabled{ transform:translateX(-50%); }

/* Clearance so the pinned button never covers the last field or the footer. */
body.merit-doc--checkout .mpco__body{ padding-bottom:120px; }
body.merit-doc--checkout .mpco__footer{ margin-bottom:70px; }

@media (max-width: 900px) {
  body.merit-doc--checkout #place_order{
    width:calc(100vw - 24px) !important;
    bottom:calc(12px + env(safe-area-inset-bottom));
    padding:17px 22px !important;
  }
  body.merit-doc--checkout .mpco__body{ padding-bottom:112px; }
}

/* ==========================================================================
   Checkout form — field presentation
   Sentence-case labels sitting above the input, a red required marker, and a
   rule under each panel title. Matches the reference layout.
   ========================================================================== */

body.merit-doc--checkout .mpco__panel-title{
  font-family:var(--display);
  font-size:.94rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  margin:0 0 20px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(199,204,212,.13);
}
body.merit-doc--checkout .mpco__subtitle{
  font-family:var(--display); font-size:.8rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--white);
  margin:0 0 16px;
}

body.merit-doc--checkout .woocommerce-checkout label,
body.merit-doc--checkout .form-row > label{
  display:block;
  font-family:var(--body);
  font-size:.92rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:var(--mist);
  margin:0 0 8px;
}
body.merit-doc--checkout abbr.required,
body.merit-doc--checkout .required{
  color:#ff5b6a !important;
  text-decoration:none; border:0; margin-left:2px; font-size:1em;
}
body.merit-doc--checkout .optional{ color:var(--steel); font-size:.86em; }

body.merit-doc--checkout .woocommerce-checkout input.input-text,
body.merit-doc--checkout .woocommerce-checkout textarea,
body.merit-doc--checkout .woocommerce-checkout select,
body.merit-doc--checkout .select2-container--default .select2-selection--single{
  background:#0B0E13 !important;
  border:1px solid rgba(199,204,212,.16) !important;
  border-radius:11px !important;
  padding:15px 16px !important;
  font-size:.98rem !important;
  color:var(--white) !important;
  min-height:52px;
}
body.merit-doc--checkout .woocommerce-checkout input.input-text:focus,
body.merit-doc--checkout .woocommerce-checkout select:focus,
body.merit-doc--checkout .select2-container--default.select2-container--focus .select2-selection--single{
  border-color:#4FA9FF !important;
  box-shadow:0 0 0 3px rgba(79,169,255,.2) !important;
}
body.merit-doc--checkout .form-row{ margin-bottom:18px; }
body.merit-doc--checkout .form-row-first{ margin-right:14px; width:calc(50% - 7px); }
body.merit-doc--checkout .form-row-last{ width:calc(50% - 7px); }
/* Street address and its second line read as one field. */
body.merit-doc--checkout #shipping_address_1_field,
body.merit-doc--checkout #billing_address_1_field{ margin-bottom:10px; }
body.merit-doc--checkout #shipping_address_2_field label,
body.merit-doc--checkout #billing_address_2_field label{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

/* The toggle panel is a divider, not a card of its own. */
body.merit-doc--checkout .mpco__panel--billing{ padding:20px 24px; }

@media (max-width: 900px) {
  body.merit-doc--checkout .mpco__panel-title{ font-size:.86rem; margin-bottom:16px; padding-bottom:12px; }
  body.merit-doc--checkout .woocommerce-checkout input.input-text,
  body.merit-doc--checkout .woocommerce-checkout select{ padding:14px 15px !important; min-height:50px; }
  body.merit-doc--checkout .form-row{ margin-bottom:15px; }
}

/* ==========================================================================
   Mobile fixes: overscroll white fade + autofill field visibility
   ========================================================================== */

/* Paint the whole document dark so the overscroll / rubber-band area at the top
   and bottom never flashes the browser's default white on mobile. */
html.merit-root,
html.merit-root body,
body.merit-doc,
body.merit-doc--checkout,
body.merit-skin{
  background-color:var(--ink) !important;
}

/* Autofilled fields (notably the shipping address on mobile) were rendering as
   a bright yellow box with near-invisible text. Force a dark fill and light
   text across the whole checkout, not just under .merit-skin. */
.woo-wrap input:-webkit-autofill,
.woo-wrap input:-webkit-autofill:hover,
.woo-wrap input:-webkit-autofill:focus,
.woo-wrap input:-webkit-autofill:active,
.woo-wrap textarea:-webkit-autofill,
.woo-wrap select:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill:hover,
.woocommerce-checkout input:-webkit-autofill:focus,
body.merit-doc--checkout input:-webkit-autofill{
  -webkit-text-fill-color:var(--white) !important;
  -webkit-box-shadow:0 0 0 1000px #10151d inset !important;
  box-shadow:0 0 0 1000px #10151d inset !important;
  caret-color:var(--white) !important;
  transition:background-color 9999s ease-out 0s !important;
}

/* ============================================================
   Desktop density
   ------------------------------------------------------------
   Every value here is inside a min-width query, so the phone
   layout is untouched. The checkout was built with generous
   panel padding and gaps that read well on a marketing page but
   pushed the pay button below the fold on a laptop. Roughly a
   third comes off the vertical rhythm without crowding anything.
   ============================================================ */
@media (min-width:961px){

  body.merit-doc--checkout .mpco__body{ padding:22px 28px 36px; }

  .mpco__grid{ gap:18px; }
  .mpco__col,
  .mpco__side{ gap:14px; }

  body.merit-doc--checkout .mpco__panel{ padding:18px 20px; }

  body.merit-doc--checkout .mpco__panel-title{ margin:0 0 13px; }
  body.merit-doc--checkout .mpco__note{ margin:0 0 13px; }

  /* Field rhythm. Tight enough to fit, loose enough to still scan
     as separate rows. */
  body.merit-doc--checkout .woocommerce-checkout .form-row{ margin-bottom:9px; }
  body.merit-doc--checkout .woocommerce-checkout p{ margin-bottom:9px; }

  /* The pay button belongs close to the card fields, not floating
     below a band of empty space. */
  body.merit-doc--checkout .place-order{ margin-top:4px; }
  body.merit-doc--checkout #place_order{
    margin-top:12px; padding:14px 22px !important; font-size:.95rem !important;
  }

  /* Summary. The line items were the single biggest consumer of
     height on the right-hand side. */
  .mpco__summary-head{ padding:13px 20px; }
  .mpco-item{ padding:11px 0; gap:11px; }
  .mpco-review__totals{ margin-top:4px; padding-top:11px; }
  .mpco-total{ padding:5px 0; }
  .mpco-total--sub{ padding:0 0 4px; }

  /* Payment box: gateways add their own generous margins inside. */
  body.merit-doc--checkout #payment{ margin-top:0; }
  body.merit-doc--checkout #payment .payment_methods{ margin-bottom:8px !important; }
  body.merit-doc--checkout #payment .payment_box{ margin:8px 0 !important; padding:14px !important; }
  body.merit-doc--checkout #payment li{ margin-bottom:8px !important; }
}

/* Pay button relocated under the order summary on a wide screen.
   The slot is empty and hidden until merit.js fills it, so nothing
   shifts if scripts fail — the button simply stays under the card
   fields where WooCommerce rendered it. */
.mpco__place-slot{ display:grid; }
.mpco__place-slot[hidden]{ display:none !important; }
.mpco__place-slot .place-order{ margin:0 !important; padding:0 !important; border:0 !important; }
@media (min-width:961px){
  body.merit-doc--checkout .mpco__place-slot #place_order{ margin-top:0 !important; }
}

/* ============================================================
   Pay button on a phone
   ------------------------------------------------------------
   The dock is a direct child of the form, so sticky positioning
   is bounded by the whole checkout rather than by the payment
   panel. The button therefore rides the bottom of the screen all
   the way down and settles at the end, instead of scrolling out
   of sight as soon as the address fields begin.
   ============================================================ */
.mpco__place-dock{ display:none; }
.mpco__place-dock[hidden]{ display:none !important; }

@media (max-width:960px){
  .mpco__place-dock{
    display:block; position:sticky; bottom:10px; z-index:7;
    margin-top:12px;
    padding-bottom:env(safe-area-inset-bottom);
  }

  /* A fade behind it, so page text never reads through the button
     while it is floating over the content. */
  .mpco__place-dock::before{
    content:''; position:absolute; left:-16px; right:-16px; bottom:-14px; top:-18px;
    background:linear-gradient(to top, rgba(8,12,17,.97) 58%, rgba(8,12,17,0));
    pointer-events:none; z-index:-1;
  }

  /* Inside the dock it is the dock that sticks, not the row. */
  .mpco__place-dock .place-order{
    position:static !important; margin:0 !important; padding:0 !important;
    background:none !important; border:0 !important;
  }
  body.merit-doc--checkout .mpco__place-dock #place_order{ margin-top:0 !important; }

  /* Close the gap the button used to leave behind at the foot of the
     payment panel. */
  body.merit-doc--checkout .mpco__col--payment .mpco__panel{ padding-bottom:18px; }
  body.merit-doc--checkout #payment .place-order{ margin-top:6px; }
}

/* ============================================================
   Phone: close the gap above the pay button
   ------------------------------------------------------------
   The grid keeps its desktop gap when it flips to a column on a
   phone, which is where most of that space came from. The rest
   is margin stacked around the button itself. Written to cover
   every position the button can sit in, so it stays trimmed
   whether or not it has been relocated.
   ============================================================ */
@media (max-width:960px){

  /* Stack spacing between the summary, payment and address blocks. */
  body.merit-doc--checkout .mpco__grid{ gap:12px; }
  body.merit-doc--checkout .mpco__col{ gap:12px; }

  /* The panel directly above the button. */
  body.merit-doc--checkout .mpco__col--address .mpco__panel{ padding-bottom:16px; }
  body.merit-doc--checkout .mpco__col--payment .mpco__panel{ padding-bottom:14px; }

  /* The button's own surroundings, wherever it ended up. */
  body.merit-doc--checkout .place-order{
    margin-top:0 !important; padding-top:0 !important;
  }
  body.merit-doc--checkout #place_order{ margin-top:6px !important; }

  .mpco__place-dock{ margin-top:4px; }
  .mpco__place-dock::before{ top:-12px; }
  body.merit-doc--checkout .mpco__place-dock #place_order{ margin-top:0 !important; }

  /* Trailing space at the foot of the page. */
  body.merit-doc--checkout .mpco__body{ padding-bottom:24px; }
}