/*
Theme Name: Moose Fraternity Co.
Theme URI: https://shopmoose.mooseintl.org
Author: QIT Solutions
Description: Modern heritage-outfitter WooCommerce theme for Moose International's catalog store. Custom-built, not a stock theme.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: moose-trading-co
*/

:root{
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#e2e8f0; --ink:#1f2733; --muted:#5a6b7d; --line:#d7dfe8;
  --primary:#2e5aa8; --primary-deep:#16264a; --accent:#c83838; --accent-deep:#a62e2e; --accent-soft:#eec2c2; --danger:#8a3324;

  --font-display:'Poppins', system-ui, sans-serif;
  --font-body:'Poppins', system-ui, sans-serif;
  --font-mono:'Poppins', system-ui, sans-serif;

  --radius-btn:9px; --radius-input:9px; --radius-card:14px; --radius-sm:7px;
  --ease-smooth:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change:opacity, transform; }
[data-reveal="left"]{ transform:translateX(-36px); }
[data-reveal="right"]{ transform:translateX(36px); }
[data-reveal].is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background-color:#fff; border-radius:3px; box-shadow:0 0 2px 2px rgba(0,0,0,.6); clip:auto !important;
  clip-path:none; color:#111; display:block; font-size:14px; font-weight:700; height:auto; left:5px;
  line-height:normal; padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000;
}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.6;
}
img{ max-width:100%; height:auto; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--accent-deep); }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:600; color:var(--primary-deep); margin:0 0 .5em; }
.mtc-wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:900px){ .mtc-wrap{ padding:0 20px; } }

.mtc-eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.mtc-placeholder{ background:repeating-linear-gradient(135deg,#dfe6ee 0,#dfe6ee 14px,#e8edf3 14px,#e8edf3 28px); display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; text-align:center; }

.mtc-btn, a.mtc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 28px; border-radius:var(--radius-btn); cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth), background-color .18s ease, border-color .18s ease, color .18s ease;
}
.mtc-btn:hover, a.mtc-btn:hover{ transform:translateY(-2px); }
.mtc-btn:active, a.mtc-btn:active{ transform:translateY(0); }
.mtc-btn-accent{ background:var(--accent); color:#fff; box-shadow:0 6px 16px -8px rgba(200,56,56,.55); }
.mtc-btn-accent:hover{ background:var(--accent-deep); color:#fff; box-shadow:0 10px 22px -8px rgba(166,46,46,.55); }
.mtc-btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.mtc-btn-outline:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }
.mtc-btn-ghost{ background:transparent; color:var(--primary-deep); border-color:var(--primary-deep); }
.mtc-btn-ghost:hover{ background:var(--primary-deep); color:#fff; box-shadow:0 10px 22px -10px rgba(22,38,74,.45); }
@media (prefers-reduced-motion: reduce){
  .mtc-btn, a.mtc-btn{ transition:none !important; }
  .mtc-btn:hover, a.mtc-btn:hover{ transform:none !important; }
}

/* ---------- Skip link / focus ---------- */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--primary-deep); color:#fff; padding:12px 20px; z-index:9999; }
.skip-link:focus{ left:16px; top:16px; }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Topbar & header ---------- */
.mtc-topbar{ background:var(--primary-deep); padding:9px 0; }
.mtc-topbar span{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; color:#fff; display:block; text-align:center; }

.mtc-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.mtc-header.is-scrolled{ background:rgba(255,255,255,.92); box-shadow:0 12px 28px -18px rgba(15,27,54,.35); }
.mtc-header-inner{ display:flex; align-items:center; gap:40px; padding:16px 32px; }
.mtc-brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
/* WooCommerce's core CSS ships ".woocommerce img{ height:auto; max-width:100% }" on every
   templated page (shop, single product, cart, checkout, account) — that selector's extra
   tag beats our single class here, so the logo fell back to its raw pixel size (175x100)
   instead of the intended header height, on every page except the static front page. */
.mtc-logo{ height:52px !important; width:auto; display:block; }
@media (max-width:960px){ .mtc-logo{ height:40px !important; } }

.mtc-nav{ display:flex; align-items:center; gap:30px; flex:1; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.mtc-nav li{ list-style:none; }
.mtc-nav a{ font-size:13.5px; font-weight:600; color:var(--ink); position:relative; padding:6px 0; }
.mtc-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:2px; height:2px; background:var(--accent); transition:right .18s ease; }
/* WordPress marks the active item with classes on the <li> (current-menu-item /
   current-menu-ancestor) plus aria-current="page" on the <a> itself — not a plain
   ".current" class on the link, which is what these rules used to (wrongly) look for. */
.mtc-nav a:hover,
.mtc-nav a.current,
.mtc-nav a[aria-current="page"],
.mtc-nav li.current-menu-item > a,
.mtc-nav li.current-menu-ancestor > a,
.mtc-nav li.current_page_item > a{ color:var(--accent-deep); }
.mtc-nav a:hover::after,
.mtc-nav a.current::after,
.mtc-nav a[aria-current="page"]::after,
.mtc-nav li.current-menu-item > a::after,
.mtc-nav li.current-menu-ancestor > a::after,
.mtc-nav li.current_page_item > a::after{ right:0; }

.mtc-header-icons{ display:flex; align-items:center; gap:8px; }
.mtc-header-icons > a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; transition:background-color .18s ease, transform .18s var(--ease-smooth); }
.mtc-header-icons > a:hover{ background:var(--surface-2); transform:translateY(-2px); }
.mtc-search-box{ display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:9px 16px; width:230px; transition:border-color .15s ease, box-shadow .15s ease; }
.mtc-search-box:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(46,90,168,.12); }
.mtc-search-box input{ border:0; background:transparent; font-size:13px; color:var(--ink); width:100%; font-family:var(--font-body); }
.mtc-search-box input:focus-visible{ outline:none; }
.mtc-search-box input::placeholder{ color:var(--muted); }
.mtc-icon-badge{ position:relative; display:inline-flex; }
.mtc-icon-badge .count{ position:absolute; top:2px; right:2px; background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:9.5px; font-weight:700; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.mtc-mobile-toggle{ display:none; background:none; border:0; cursor:pointer; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; transition:background-color .18s ease, transform .18s var(--ease-smooth); }
.mtc-mobile-toggle:hover{ background:var(--surface-2); transform:translateY(-2px); }

.mtc-search-toggle{ display:none; background:none; border:0; cursor:pointer; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; transition:background-color .18s ease, transform .18s var(--ease-smooth); }
.mtc-search-toggle:hover{ background:var(--surface-2); transform:translateY(-2px); }

.mtc-mobile-search-row{ display:none; align-items:center; gap:8px; margin:0 20px 14px; }
.mtc-mobile-search-row form{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:10px 16px; }
.mtc-mobile-search-row input{ border:0; background:transparent; font-size:14px; color:var(--ink); width:100%; font-family:var(--font-body); }
.mtc-mobile-search-row input::placeholder{ color:var(--muted); }
.mtc-mobile-search-row input:focus-visible{ outline:none; }
.mtc-mobile-search-close{
  flex-shrink:0; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:0; background:var(--surface-2); color:var(--ink); font-size:20px; line-height:1; cursor:pointer;
}
.mtc-mobile-search-close:hover{ background:var(--line); }

/* Utility-icon row duplicated inside the mobile nav drawer — hidden everywhere except
   the narrow phone breakpoint below, where the header row itself drops to just the
   logo + hamburger and this becomes the only way to reach search/account/wishlist/cart. */
.mtc-nav-icons{ display:none; }

@media (max-width:960px){
  .mtc-header-inner{ flex-wrap:wrap; gap:12px; padding:14px 20px; position:relative; }
  /* Absolutely positioned (not a flex sibling of brand/header-actions) so it can never
     get squeezed to the right by flex-wrap — it always drops down, full-width, below
     the header row. max-height/opacity (not display) is what's toggled, so it can
     actually transition instead of snapping open/closed instantly. */
  .mtc-nav{
    position:absolute; top:100%; left:0; width:100%; z-index:5;
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    padding:0 20px; background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:0 20px 34px -22px rgba(15,27,54,.3);
    max-height:0; opacity:0; visibility:hidden; overflow:hidden; pointer-events:none;
    transition:max-height .32s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
  }
  .mtc-nav.is-open{
    max-height:80vh; opacity:1; visibility:visible; pointer-events:auto; overflow-y:auto;
    padding:16px 20px 22px;
  }
  .mtc-nav a{ padding:8px 0; }
  .mtc-search-box{ display:none; }
  .mtc-header-actions{ display:flex; align-items:center; flex:1 0 auto; justify-content:flex-end; gap:12px; }
  .mtc-mobile-toggle{ display:flex; }
  .mtc-search-toggle{ display:flex; }
  .mtc-header-icons{ gap:2px; }
  .mtc-mobile-search-row.is-open{ display:flex; }
}
@media (prefers-reduced-motion: reduce){
  .mtc-nav{ transition:none !important; }
}

/* Phone widths: one line only — logo + hamburger. Search/account/wishlist/cart move
   into the nav drawer (below) instead of competing for space in the header row. */
@media (max-width:600px){
  .mtc-header-actions .mtc-search-toggle,
  .mtc-header-actions .mtc-header-icons{ display:none !important; }

  .mtc-nav-icons{
    display:flex; gap:4px; border-top:1px solid var(--line); margin-top:10px; padding-top:6px; width:100%;
  }
  .mtc-nav-icons .mtc-search-toggle--nav{ flex:1; min-width:0; }
  .mtc-nav-icons .mtc-header-icons.has-labels{ flex:3; display:flex; gap:4px; min-width:0; }
  .mtc-nav-icons .mtc-header-icons.has-labels > a{ flex:1; min-width:0; }
  .mtc-nav-icons .mtc-search-toggle--nav,
  .mtc-nav-icons .mtc-header-icons.has-labels > a{
    display:flex !important; align-items:center; justify-content:center;
    width:auto !important; height:auto !important; min-height:48px; border-radius:8px;
    color:var(--muted);
  }
  .mtc-nav-icons .mtc-search-toggle--nav:hover,
  .mtc-nav-icons .mtc-header-icons.has-labels > a:hover{ background:var(--surface-2); color:var(--ink); }
  .mtc-nav-icons .icon-label{ display:none; }
  .mtc-nav-icons .mtc-icon-badge .count{ top:2px; right:calc(50% - 14px); }
}

/* ---------- Buttons used inside WooCommerce ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.wp-block-button__link{
  background:var(--accent) !important; color:#fff !important; border-radius:var(--radius-btn) !important; border:0 !important;
  font-family:var(--font-mono) !important; font-size:13px !important; letter-spacing:.05em; text-transform:uppercase;
  padding:14px 26px !important; box-shadow:0 6px 16px -9px rgba(200,56,56,.55) !important;
  transition:transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth), background-color .18s ease !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--accent-deep) !important; color:#fff !important;
  transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(166,46,46,.55) !important;
}
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active{ transform:translateY(0); }
.woocommerce a.button.alt{ background:var(--accent) !important; }
.woocommerce button.button.disabled, .woocommerce button.button:disabled,
.woocommerce a.button.disabled{
  background:var(--surface-2) !important; color:var(--muted) !important; cursor:not-allowed; box-shadow:none !important;
}
.woocommerce button.button.disabled:hover, .woocommerce button.button:disabled:hover,
.woocommerce a.button.disabled:hover{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{ transition:none !important; }
  .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ transform:none !important; }
}

/* ---------- Hero / homepage ---------- */
.mtc-hero-carousel{ position:relative; height:560px; overflow:hidden; }
.mtc-hero-track{ display:flex; height:100%; width:100%; transition:transform .6s cubic-bezier(.65,0,.35,1); }
.mtc-hero-slide{ position:relative; flex:0 0 100%; width:100%; height:100%; overflow:hidden; }
.mtc-hero-slide .bg{ position:absolute; inset:0; }
.mtc-hero-slide .bg svg{ position:absolute; opacity:.14; }
.mtc-hero-inner{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; gap:20px; z-index:2; }
.mtc-hero-slide h1{ color:#fff; font-size:54px; max-width:640px; line-height:1.1; opacity:0; transform:translateY(14px); transition:opacity .5s ease .15s, transform .5s ease .15s; }
.mtc-hero-slide p{ color:#c9d6e8; font-size:16.5px; max-width:520px; line-height:1.6; margin:0; opacity:0; transform:translateY(14px); transition:opacity .5s ease .25s, transform .5s ease .25s; }
.mtc-hero-slide .mtc-eyebrow{ opacity:0; transform:translateY(14px); transition:opacity .5s ease .05s, transform .5s ease .05s; }
.mtc-hero-slide .hero-cta{ opacity:0; transform:translateY(14px); transition:opacity .5s ease .35s, transform .5s ease .35s; display:flex; gap:14px; flex-wrap:wrap; }
.mtc-hero-slide.is-active h1,
.mtc-hero-slide.is-active p,
.mtc-hero-slide.is-active .mtc-eyebrow,
.mtc-hero-slide.is-active .hero-cta{ opacity:1; transform:translateY(0); }

.mtc-hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px); transition:background-color .15s ease, transform .18s var(--ease-smooth); }
.mtc-hero-arrow:hover{ background:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.08); }
.mtc-hero-arrow.prev{ left:24px; }
.mtc-hero-arrow.next{ right:24px; }
.mtc-hero-dots{ position:absolute; left:0; right:0; bottom:22px; z-index:5; display:flex; justify-content:center; gap:10px; pointer-events:none; }
.mtc-hero-dot{ pointer-events:auto; }
.mtc-hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.35); border:0; padding:0; cursor:pointer; transition:background-color .2s ease, transform .2s ease; }
.mtc-hero-dot.is-active{ background:#fff; transform:scale(1.25); }
@media (max-width:700px){
  .mtc-hero-carousel{ height:460px; }
  .mtc-hero-slide{ min-height:0; }
  .mtc-hero-inner{ padding:36px 24px 60px; gap:14px; }
  .mtc-hero-slide h1{ font-size:26px; max-width:100%; }
  .mtc-hero-slide p{ font-size:14.5px; max-width:100%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .mtc-hero-slide .hero-cta{ gap:10px; }
  .mtc-hero-arrow{ top:auto; bottom:16px; transform:none; width:32px; height:32px; }
  .mtc-hero-arrow:hover{ transform:scale(1.08); }
  .mtc-hero-arrow.prev{ left:20px; }
  .mtc-hero-arrow.next{ right:20px; }
  .mtc-hero-dots{ bottom:26px; }
}

.mtc-promo-banner{ padding:40px 32px 0; }
.mtc-promo-banner img{ display:block; width:100%; height:auto; border-radius:14px; }
@media (max-width:700px){ .mtc-promo-banner{ padding:24px 20px 0; } }

.mtc-section{ padding:64px 32px; }
.mtc-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:32px; gap:20px; flex-wrap:wrap; }

.mtc-cat-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.mtc-cat-card{
  text-decoration:none; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-card);
  background:var(--surface); overflow:hidden;
  transition:box-shadow .22s var(--ease-smooth), transform .22s var(--ease-smooth), border-color .22s ease;
}
.mtc-cat-card:hover{ box-shadow:0 20px 38px -20px rgba(15,27,54,.28); transform:translateY(-4px); border-color:#c7d2e2; }
.mtc-cat-card .thumb{ height:150px; }
.mtc-cat-card .label{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mtc-cat-card .label span{ font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); flex:1 1 auto; min-width:0; overflow-wrap:break-word; }
.mtc-cat-card .label svg{ flex-shrink:0; }
@media (max-width:900px){ .mtc-cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.mtc-arrivals{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
@media (max-width:900px){ .mtc-arrivals{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mtc-arrival-card .thumb{ height:230px; margin-bottom:14px; position:relative; }
.mtc-arrival-card .badge{ position:absolute; top:10px; left:10px; background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; padding:4px 8px; }
.mtc-arrival-card .sku{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.mtc-arrival-card .name{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:4px 0 6px; }
.mtc-arrival-card .price{ font-family:var(--font-mono); font-size:15px; color:var(--primary-deep); font-weight:700; }

.mtc-heritage{ background:var(--primary-deep); position:relative; overflow:hidden; }
.mtc-heritage-inner{ padding:80px 32px; display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.mtc-heritage h2{ color:#fff; font-size:34px; line-height:1.25; }
.mtc-heritage p{ color:#c9d6e8; font-size:16px; line-height:1.7; max-width:520px; }
@media (max-width:900px){ .mtc-heritage-inner{ grid-template-columns:1fr; } }

.mtc-spotlight{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; background:var(--surface); border:1px solid var(--line); padding:48px; }
@media (max-width:900px){ .mtc-spotlight{ grid-template-columns:1fr; } }
.mtc-spotlight .price{ font-family:var(--font-mono); font-size:26px; color:var(--accent-deep); font-weight:700; }

/* Same background as the footer immediately below it, and no border between them,
   so the two sections read as one continuous dark band rather than two blocks. */
.mtc-vip{ background:var(--primary-deep); position:relative; overflow:hidden; }
.mtc-vip::before{ content:''; position:absolute; right:-60px; top:-80px; width:280px; height:280px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.mtc-vip-inner{ padding:64px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; z-index:1; }
.mtc-vip h2{ font-size:26px; color:#fff; }
.mtc-vip-inner p{ color:rgba(255,255,255,.6) !important; }
.mtc-vip-inner input[type="email"]{ background:#fff !important; border:1px solid transparent !important; color:var(--ink); }
.mtc-vip-inner input[type="email"]::placeholder{ color:var(--muted); }

/* ---------- Footer ---------- */
.mtc-footer{ background:var(--primary-deep); color:#c9d6e8; }
/* The logo's wordmark is navy on a transparent background — invisible on this dark
   footer without a light backing chip behind it. */
.mtc-footer-logo-wrap{ display:inline-flex; background:#fff; padding:10px 16px; border-radius:var(--radius-sm); margin-bottom:16px; }
.mtc-footer-logo-wrap .mtc-logo{ height:34px; }
.mtc-footer-grid{ padding:64px 32px 32px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:900px){ .mtc-footer-grid{ grid-template-columns:1fr 1fr; } }
.mtc-footer-col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:#fff; margin-bottom:16px; }
.mtc-footer-col a{ color:#c9d6e8; display:block; font-size:14px; margin-bottom:10px; }
.mtc-footer-social{ display:flex; gap:10px; margin-top:16px; }
.mtc-footer-social a{ display:flex !important; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); margin-bottom:0 !important; transition:background-color .18s ease, transform .18s var(--ease-smooth); }
.mtc-footer-social a:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.mtc-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.mtc-footer-bottom-inner{ padding:20px 32px; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; color:#8fa2bd; flex-wrap:wrap; gap:8px; }

/* ---------- Shop / category archive ---------- */
.mtc-cat-hero{ background:var(--primary-deep); padding:36px 0; }
.mtc-cat-hero .crumb{ font-family:var(--font-mono); font-size:12px; color:#9db3d4; margin-bottom:10px; }
.mtc-cat-hero .crumb a{ color:#9db3d4; }
.mtc-cat-hero h1{ color:#fff; font-size:34px; }
.mtc-cat-hero p{ color:#9db3d4; font-size:14px; margin-top:8px; }

.mtc-shop-layout{ padding:40px 32px 80px; display:grid; grid-template-columns:260px 1fr; gap:44px; }
.mtc-cat-filter-toggle{ display:none; }
.mtc-cat-filter-backdrop{ display:none; }
.mtc-cat-filter-close{ display:none; }
@media (max-width:900px){
  .mtc-shop-layout{ grid-template-columns:1fr; padding:24px 20px 60px; }

  .mtc-cat-filter-toggle{
    display:flex; align-items:center; gap:10px; width:100%;
    position:sticky; top:var(--mtc-header-h, 64px); z-index:40;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-btn);
    padding:12px 16px; margin-bottom:20px; font-family:var(--font-mono); font-size:12.5px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--ink); font-weight:600; cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .mtc-cat-filter-toggle:hover{ border-color:#c7d2e2; box-shadow:0 8px 18px -12px rgba(15,27,54,.25); }
  .mtc-cat-filter-toggle svg path{ stroke:var(--primary-deep); }

  .mtc-shop-layout aside{
    position:fixed; top:0; left:0; bottom:0; z-index:210;
    width:84%; max-width:340px; background:#fff;
    padding:24px 24px 40px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .3s ease;
    box-shadow:0 0 40px rgba(15,27,54,.25);
  }
  .mtc-shop-layout aside.is-open{ transform:translateX(0); }

  .mtc-cat-filter-backdrop{
    display:block; position:fixed; inset:0; z-index:200;
    background:rgba(15,27,54,.45); opacity:0; visibility:hidden;
    transition:opacity .3s ease;
  }
  .mtc-cat-filter-backdrop.is-open{ opacity:1; visibility:visible; }

  .mtc-cat-filter-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:16px; right:16px; width:34px; height:34px;
    border-radius:50%; border:0; background:var(--surface-2); font-size:22px; line-height:1;
    color:var(--ink); cursor:pointer;
  }

  body.mtc-noscroll{ overflow:hidden; }
}
.mtc-sidebar-title{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--muted); margin-bottom:14px; }
.mtc-cat-tree{ border-top:1px solid var(--line); }
.mtc-cat-tree li{ list-style:none; border-bottom:1px solid var(--line); }
.mtc-cat-tree > ul{ margin:0; padding:0; }
.mtc-cat-tree a{ font-size:14px; padding:9px 0; display:block; color:var(--ink); }
.mtc-cat-tree a.current, .mtc-cat-tree li.current > a{ color:var(--accent-deep); font-weight:700; }
.mtc-cat-tree ul.children{ list-style:none; margin:0 0 8px; padding:0 0 0 16px; }
.mtc-cat-tree ul.children li{ border-bottom:0; }
.mtc-cat-tree ul.children a{ font-size:13px; color:var(--muted); padding:4px 0; }

.mtc-toolbar-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:12px; }
.mtc-toolbar-row .count{ font-size:13px; color:var(--muted); }

.woocommerce ul.products{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px; margin:0 !important; padding:0 !important; }
/* WooCommerce's core CSS clearfixes .products with a ::before/::after {content:" "} — inside
   a grid container that pseudo-element blockifies into a real (invisible) first grid item,
   pushing every actual product over by one slot. Kill it outright. */
.woocommerce ul.products::before, .woocommerce ul.products::after{ content:none !important; display:none !important; }
@media (max-width:700px){ .woocommerce ul.products{ grid-template-columns:1fr 1fr; gap:16px; } }

/* Product card */
.woocommerce ul.products li.product{
  width:100% !important; margin:0 !important; float:none !important; text-align:left !important;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); position:relative;
  display:flex; flex-direction:column; padding:0 !important; overflow:hidden;
  transition:box-shadow .22s var(--ease-smooth), transform .22s var(--ease-smooth), border-color .22s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow:0 24px 44px -22px rgba(15,27,54,.28); transform:translateY(-4px); border-color:#c7d2e2; z-index:2;
}
.woocommerce ul.products li.product > a.woocommerce-loop-product__link{
  display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit; position:relative;
}
.woocommerce ul.products li.product img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center; margin:0 !important; display:block;
  background:var(--bg); transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.woocommerce ul.products li.product:hover img{ transform:scale(1.06); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); line-height:1.35;
  margin:0 !important; padding:16px 18px 4px;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-mono) !important; font-size:14px; color:var(--primary-deep); font-weight:700;
  padding:0 18px; margin:0 0 16px !important; display:block;
}
.woocommerce ul.products li.product .price del{ color:var(--muted); opacity:.65; font-weight:400; margin-right:6px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > a.added_to_cart{
  margin:0 18px 18px !important; width:auto !important; text-align:center !important;
}
.woocommerce ul.products li.product .mtc-wishlist-heart{
  position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); align-items:center; justify-content:center;
  box-shadow:0 6px 14px -4px rgba(15,27,54,.3); backdrop-filter:blur(2px);
  opacity:0; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover .mtc-wishlist-heart,
.woocommerce ul.products li.product .mtc-wishlist-heart.is-active{ opacity:1; transform:translateY(0); }
.woocommerce ul.products li.product .mtc-wishlist-heart:hover{ background:#fff; }
.woocommerce span.onsale{
  position:absolute !important; background:var(--accent) !important; color:#fff; font-family:var(--font-mono);
  font-size:10px !important; letter-spacing:.06em; border-radius:0 !important; min-height:auto !important;
  min-width:auto !important; line-height:1 !important; padding:6px 9px !important; top:12px !important; left:12px !important; z-index:2;
}
.woocommerce nav.woocommerce-pagination ul{ border:0 !important; }
.woocommerce nav.woocommerce-pagination ul li{ border:0 !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--font-mono) !important; border:1px solid var(--line) !important; padding:9px 14px !important;
  border-radius:var(--radius-sm) !important; transition:border-color .15s ease, background-color .15s ease, transform .15s var(--ease-smooth) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{ border-color:var(--accent-deep) !important; color:var(--accent-deep) !important; transform:translateY(-2px); }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--primary-deep) !important; color:#fff !important; }

/* ---------- Single product ---------- */
.single-product .mtc-crumb{ padding:24px 32px 0; font-family:var(--font-mono); font-size:12px; color:var(--muted); max-width:1280px; margin:0 auto; }
.single-product .mtc-crumb a{ color:var(--muted); }
.single-product div.product{ max-width:1280px; margin:0 auto; padding:36px 32px 0; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
@media (max-width:900px){ .single-product div.product{ grid-template-columns:1fr; padding:24px 20px 0; gap:32px; } }
/* WooCommerce's core CSS ships width:48%/float:left|right for the old 2-column float
   layout — grid ignores float but still honors an explicit width, which left both
   columns stuck at ~48% of their own track instead of filling it. Force full width. */
/* Sticky was tried here so the gallery image would follow along while scrolling the
   summary column, but the tabs/related-products blocks below also live inside this same
   grid (see the grid-column:1/-1 rule further down) — that makes the sticky element's
   containing block taller than just row 1, so it kept floating and overlapping the
   Description/Related Products content instead of stopping at the row's bottom edge.
   Not worth the layout complexity to fix properly before tonight — plain static positioning. */
.single-product div.product div.images{ grid-column:1; position:static !important; width:100% !important; float:none !important; }
.single-product div.product div.summary{ grid-column:2; width:100% !important; float:none !important; }
@media (max-width:900px){
  .single-product div.product div.images, .single-product div.product div.summary{ grid-column:1; }
  .single-product div.product div.images{ position:static; }
}
/* WooCommerce hooks the tabs, upsells, and related-products blocks directly inside
   div.product (after div.summary closes), not as page-level siblings — so without an
   explicit span they fall into row 2 of the image/summary grid above and get squeezed
   into half-width columns instead of running the full page width. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related.products,
.single-product div.product > .upsells.products{ grid-column:1 / -1; }

/* Gallery: a real framed presentation box, not a bare image floating at its natural size. */
.single-product .woocommerce-product-gallery{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:28px; overflow:hidden; }
.single-product .woocommerce-product-gallery__image{ border-radius:var(--radius-sm); overflow:hidden; }
.single-product .woocommerce-product-gallery__wrapper{ position:relative; }
/* The arrows anchor to .flex-viewport, not .woocommerce-product-gallery__wrapper —
   flexslider stretches that wrapper's own width to (slide count × 100%) and collapses
   its height to 0 for its internal slide mechanics, so anything absolutely positioned
   against it lands in the wrong place (arrows halfway off-screen, top pinned to 0).
   .flex-viewport is flexslider's own stable, correctly-sized clipping box — same
   dimensions as a single visible slide. */
.single-product .flex-viewport{ position:relative; }
.single-product .woocommerce-product-gallery__image{ aspect-ratio:1/1; display:flex !important; align-items:center; justify-content:center; overflow:hidden; background:var(--surface); }
.single-product .woocommerce-product-gallery__image img{ width:100%; height:100%; object-fit:contain; }
.single-product .woocommerce-product-gallery .flex-viewport{ background:transparent !important; }
.single-product a.woocommerce-product-gallery__trigger{
  background:var(--surface) !important; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(15,27,54,.35); top:16px !important; right:16px !important;
}
/* WooCommerce's own core CSS sets `.flex-control-thumbs li{ width:25%; float:left }`
   at higher specificity than a plain class selector can beat — inside our 5-column
   grid that shrank every thumbnail to 25% of its own ~89px track (≈22px) regardless
   of how many images actually exist, leaving huge dead space for anything under 5
   photos. Flexbox + !important-locked fixed sizing sidesteps the fight entirely and
   works correctly for any image count (1, 2, or 8). */
.single-product .flex-control-thumbs{
  display:flex !important; flex-wrap:wrap; gap:12px !important; margin:16px 0 0 !important; padding:0 28px 28px !important;
}
.single-product .flex-control-thumbs li{ list-style:none; width:auto !important; float:none !important; margin:0 !important; }
.single-product .flex-control-thumbs img{
  display:block !important; height:80px !important; width:80px !important; object-fit:cover; border-radius:var(--radius-sm);
  border:2px solid var(--line); opacity:1 !important; cursor:pointer;
  transition:border-color .15s ease, transform .15s var(--ease-smooth), box-shadow .15s ease;
}
.single-product .flex-control-thumbs img:hover{ border-color:var(--muted); transform:translateY(-3px); box-shadow:0 10px 18px -10px rgba(15,27,54,.35); }
.single-product .flex-control-thumbs img.flex-active{ border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(200,56,56,.15); }

/* Prev/next arrows over the main gallery image — JS-injected only when a product
   actually has more than one image (see initProductGallery in main.js), matching
   the hero carousel's glassy circular-button look. */
.single-product .mtc-gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.85); border:1px solid var(--line); color:var(--primary-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px);
  box-shadow:0 10px 22px -10px rgba(15,27,54,.35); transition:background-color .15s ease, transform .18s var(--ease-smooth);
}
.single-product .mtc-gallery-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.single-product .mtc-gallery-arrow.prev{ left:16px; }
.single-product .mtc-gallery-arrow.next{ right:16px; }

.single-product .mtc-product-eyebrow{ display:inline-block; margin-bottom:14px; }
.single-product .product_title{ font-size:32px; line-height:1.15; }
.single-product p.price{ font-family:var(--font-mono) !important; font-size:28px !important; color:var(--accent-deep) !important; font-weight:700; margin:16px 0 0 !important; }
.single-product .woocommerce-product-details__short-description{ color:var(--muted); font-size:15px; line-height:1.7; max-width:480px; margin-top:20px; }

.single-product form.cart{ margin-top:28px !important; padding-top:24px; border-top:1px solid var(--line); }
.single-product .variations{ margin-bottom:0 !important; width:100% !important; }
.single-product .variations td, .single-product .variations th{ border:0 !important; padding:0 !important; display:block; width:100% !important; }
.single-product table.variations{ display:block !important; margin-bottom:22px !important; }
.single-product table.variations tbody{ display:block !important; }
.single-product table.variations tr{ display:block !important; }
.single-product table.variations tr + tr{ margin-top:20px; }
.single-product .variations label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-bottom:10px; display:block; }
.single-product .woocommerce-variation-add-to-cart,
.single-product .single_variation_wrap .woocommerce-variation{ margin-bottom:18px; }
.single-product .woocommerce-variation-price .price{ font-size:22px !important; margin:0 0 4px !important; }
.single-product .woocommerce-variation-availability{ font-family:var(--font-mono); font-size:12px; }

/* Quantity + Add to Cart + Wishlist as one aligned row.
   Simple products: qty/button/heart sit directly in form.cart.
   Variable products: they sit in .woocommerce-variation-add-to-cart, nested inside
   .single_variation_wrap (which also holds the variation price above — that part must
   stay a normal block, only the button row itself becomes the flex row). Both need
   width:100 % since WooCommerce's own CSS leaves them at content width by default. */
.single-product .quantity{ float:none !important; }
.single-product .quantity .qty{
  border:1.5px solid var(--line) !important; height:50px !important; width:70px; text-align:center; font-family:var(--font-mono);
  font-size:14px; border-radius:0 !important; padding:0 !important;
}
.single-product .single_add_to_cart_button{ height:50px; padding:0 34px !important; font-size:13px !important; }
.single-product form.cart div.quantity,
.single-product .woocommerce-variation-add-to-cart div.quantity{ margin-right:14px !important; }
/* Simple products: form.cart's direct children ARE qty/button/heart — flex-row it directly.
   Variable products: form.cart's direct children are the variations table + the variation
   wrap, which must stay stacked (column) — the flex-row instead belongs one level deeper,
   on .woocommerce-variation-add-to-cart, which is where qty/button/heart actually live. */
.single-product form.cart:not(:has(.single_variation_wrap)){ display:flex !important; flex-wrap:wrap; align-items:center; gap:0; width:100% !important; }
.single-product .woocommerce-variation-add-to-cart{ display:flex !important; flex-wrap:wrap; align-items:center; gap:0; width:100% !important; }
.single-product .single_variation_wrap{ width:100% !important; }
.single-product .mtc-wishlist-heart{
  width:50px; height:50px; border:1.5px solid var(--line); margin-left:14px; border-radius:0; opacity:1 !important; transform:none !important;
  transition:border-color .15s ease, background-color .15s ease;
}
.single-product .mtc-wishlist-heart:hover{ border-color:var(--accent-deep); background:var(--accent-soft); }

.mtc-trust-row{ display:flex; flex-direction:column; gap:12px; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); max-width:480px; }
.mtc-trust-item{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--muted); }
.mtc-trust-item svg{ flex-shrink:0; }

.single-product .product_meta{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:8px; }
.single-product .sku_wrapper{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.single-product .posted_in a, .single-product .sku_wrapper .sku{ color:var(--primary); }

.single-product .woocommerce-tabs ul.tabs{ border-bottom:1px solid var(--line); display:flex; gap:36px; padding-left:0; max-width:1280px; margin:0 auto; }
.single-product .woocommerce-tabs ul.tabs li{ list-style:none; background:none !important; border:0 !important; margin:0 !important; }
.single-product .woocommerce-tabs ul.tabs li a{ font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; padding-bottom:14px; display:block; color:var(--muted); }
.single-product .woocommerce-tabs ul.tabs li.active a{ color:var(--accent-deep); border-bottom:2px solid var(--accent-deep); }
.single-product .woocommerce-tabs .panel{ padding-top:28px; max-width:760px; color:var(--muted); font-size:15px; line-height:1.8; max-width:1280px; margin:28px auto 0; }
.single-product .related.products{ background:var(--surface); border-top:1px solid var(--line); padding:56px 32px 72px; margin-top:56px; }
.single-product .related.products > h2{ font-size:26px; margin-bottom:28px; max-width:1280px; margin-left:auto; margin-right:auto; }
.single-product .related.products ul.products{ max-width:1280px; margin:0 auto !important; }

/* Checkbox / pill size selector (progressive enhancement over the native <select>) */
.mtc-size-swatches{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.mtc-size-swatches .swatch{
  min-width:54px; height:50px; padding:0 14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; background:var(--surface); color:var(--ink);
  transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s var(--ease-smooth), box-shadow .15s ease;
}
.mtc-size-swatches .swatch:hover{ border-color:var(--accent-deep); transform:translateY(-2px); box-shadow:0 8px 16px -10px rgba(15,27,54,.3); }
.mtc-size-swatches .swatch:active{ transform:scale(.96); }
.mtc-size-swatches .swatch.selected{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }
.mtc-size-swatches .swatch.unavailable{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.single-product .variations select[data-mtc-enhanced]{ position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---------- Cart / Checkout ---------- */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{ max-width:1280px; margin:0 auto; padding:48px 32px 90px; }
/* form.woocommerce-cart-form and div.cart-collaterals are siblings in the default
   template — without an explicit layout they just stack, putting the order summary
   below the line items instead of beside them. */
/* The products column was capped at a fixed 700px — after subtracting the fixed-width
   price/quantity/subtotal/remove columns and their gaps from the cart-item row, that left
   only ~86px for the product name, which is why long titles wrapped into a narrow ragged
   stack. Let it use the full remaining width instead of an arbitrary cap. */
.woocommerce-cart .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 340px; justify-content:start; gap:52px; align-items:start; }
.woocommerce-cart .woocommerce::before, .woocommerce-cart .woocommerce::after{ content:none !important; display:none !important; }
.woocommerce-cart .woocommerce-notices-wrapper{ grid-column:1 / -1; }
@media (max-width:900px){ .woocommerce-cart .woocommerce{ grid-template-columns:1fr; } }
@media (max-width:700px){
  .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce{ padding:28px 14px 50px; }
}
.woocommerce table.shop_table{ border:0 !important; }
.woocommerce table.shop_table thead th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--muted); border-bottom:1px solid var(--line) !important; text-transform:uppercase; }
.woocommerce table.shop_table td{ border-top:0 !important; border-bottom:1px solid var(--line) !important; padding:18px 12px !important; }
.woocommerce a.remove{ color:var(--accent-deep) !important; }
.woocommerce #coupon_code, .woocommerce input[name="mtc_gift_card_code"]{ border:1px solid var(--line) !important; padding:13px 14px !important; height:auto !important; width:220px !important; border-radius:var(--radius-input) !important; }
.woocommerce .coupon-error-notice{ display:block; width:100%; margin:10px 0 0; padding:10px 14px; background:var(--accent-soft); color:var(--accent-deep); font-size:13px; border-radius:6px; }

/* Coupon field + Apply/Update buttons: WooCommerce floats the input left and the
   Apply button right inside a narrow .coupon div, which just overflows and wraps
   on anything but a wide desktop column instead of laying out cleanly. Redesigned
   as its own card, with a leading tag icon on the input and a soft (not solid-red)
   Apply button so it doesn't compete visually with "Proceed to Checkout". */
.woocommerce-cart table.cart td.actions{ padding:20px 0 0 !important; text-align:left !important; }
.woocommerce-cart table.cart .coupon{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; float:none !important; width:100% !important; text-align:left !important;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:18px;
}
.woocommerce-cart table.cart .coupon .input-text{ float:none !important; margin:0 !important; flex:1 1 200px; }
/* #coupon_code by ID to out-rank the generic `.woocommerce form .input-text{ background:...!important }`
   rule, whose `background` shorthand would otherwise silently reset this background-image back to none. */
.woocommerce-cart table.cart .coupon #coupon_code{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'><path d='M11.4 3.6H5.8a1.4 1.4 0 0 0-1.4 1.4v5.6c0 .37.15.73.41 1l9.19 9.19c.55.55 1.45.55 2 0l5.19-5.19c.55-.55.55-1.45 0-2l-9.19-9.19a1.4 1.4 0 0 0-1-.41Z' stroke='%235a6b7d' stroke-width='1.5' stroke-linejoin='round'/><circle cx='8.6' cy='8.6' r='1.4' fill='%235a6b7d'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:14px center !important; padding-left:40px !important;
}
.woocommerce-cart table.cart .coupon .button{
  float:none !important; margin:0 !important; flex:0 0 auto;
  background:var(--accent-soft) !important; color:var(--accent-deep) !important; box-shadow:none !important;
}
.woocommerce-cart table.cart .coupon .button:hover{ background:#e3aeae !important; color:var(--accent-deep) !important; box-shadow:none !important; }
@media (max-width:700px){
  .woocommerce-cart table.cart .coupon{ flex-direction:column; align-items:stretch; }
  .woocommerce-cart table.cart .coupon .input-text{ width:100% !important; flex:none; }
  .woocommerce-cart table.cart .coupon .button{ width:100% !important; text-align:center; }
}

/* Update Cart button — quantity changes now auto-submit it in the background
   (see the qty-change listener in main.js), so the button itself is no longer
   something a shopper needs to see or press. Kept in the DOM (JS still clicks it
   programmatically to trigger WooCommerce's built-in AJAX cart-totals refresh) —
   just hidden. */
.woocommerce .cart-collaterals button.mtc-update-cart-btn{ display:none !important; }
.mtc-update-cart-btn svg{ flex-shrink:0; }

.mtc-cart-secure-note{
  grid-column:2; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}
.mtc-cart-secure-note svg{ flex-shrink:0; }
@media (max-width:900px){ .mtc-cart-secure-note{ grid-column:1; } }

.mtc-cart-page-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:0; }
.mtc-cart-page-head h1{ margin:0; }
.mtc-cart-page-head .mtc-icon-badge{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:50%; flex-shrink:0; }
.woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #order_review{
  background:var(--surface); border:1px solid var(--line); padding:32px !important;
  width:100% !important; float:none !important; box-sizing:border-box;
}
/* Label/value rows inside the totals table wrap awkwardly at the card's narrow content
   width under auto table-layout. Simple rows (Subtotal, Tax, Total) become a compact
   label-left/value-right flex line; the shipping row has genuinely complex nested
   content (method choices + address text) that needs full-width stacking instead. */
.woocommerce-cart .cart_totals table{ width:100% !important; table-layout:auto; }
.woocommerce-cart .cart_totals tr{ display:flex !important; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.woocommerce-cart .cart_totals tr th, .woocommerce-cart .cart_totals tr td{ display:block !important; width:auto !important; text-align:left !important; flex-shrink:0; }
.woocommerce-cart .cart_totals tr th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; }
.woocommerce-cart .cart_totals tr td{ text-align:right !important; margin-left:auto; }
.woocommerce-cart .cart_totals tr td::before, .woocommerce-cart .cart_totals tr th::before{ content:none !important; }
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals{ flex-direction:column !important; align-items:stretch; }
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th{ margin-bottom:8px; }
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td{ text-align:left !important; margin-left:0; width:100% !important; }
.woocommerce-cart .cart_totals ul#shipping_method{ list-style:none; margin:0 0 10px; padding:0; }
.woocommerce-cart .cart_totals ul#shipping_method li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.woocommerce-cart .cart_totals ul#shipping_method li:last-child{ border-bottom:0; }
.woocommerce-cart .cart-collaterals .cart_totals h2, .woocommerce-checkout #order_review h3{ font-size:19px; margin-bottom:24px; }
.woocommerce-cart .cart-collaterals .cart_totals table, .woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table{ border:0 !important; }
.woocommerce .cart_totals tr td, .woocommerce .cart_totals tr th{ border:0 !important; padding:8px 0 !important; }

/* Cart line items: the native <table> markup is kept (no template override) but
   reflowed into card-style rows via CSS — bigger framed thumbnails, clean alignment,
   a subtle hover, instead of a bare data table. WooCommerce stamps each <td> with a
   data-title attribute for its own responsive-table fallback; kill the generated
   label content so it can't leak through as visible "Price:"/"Quantity:" text. */
.woocommerce-cart table.cart{ display:block !important; border-spacing:0 16px; }
.woocommerce-cart table.cart thead{ display:none; }
.woocommerce-cart table.cart tbody{ display:block !important; }
/* A single flex row kept losing a tug-of-war for width: five fixed-width columns
   (thumb/price/qty/subtotal/remove) ate most of the row on any but the widest screens,
   squeezing the product name into a narrow, badly-wrapped stack. Two-row grid instead —
   the name gets the FULL row width on its own line no matter how narrow the cart column
   gets; quantity and subtotal share a second line underneath. */
.woocommerce-cart table.cart tr.cart_item{
  display:grid !important; grid-template-columns:110px 1fr auto; column-gap:22px; row-gap:14px;
  grid-template-areas:"thumb name remove" "thumb meta meta"; align-items:start; padding:20px !important;
  border:1px solid var(--line) !important; border-radius:12px; background:var(--surface);
  margin-bottom:16px; position:relative; transition:box-shadow .15s ease, border-color .15s ease;
}
.woocommerce-cart table.cart tr.cart_item:last-child{ margin-bottom:0; }
.woocommerce-cart table.cart tr.cart_item:hover{ box-shadow:0 10px 28px -16px rgba(15,27,54,.22); border-color:#c7d2e0 !important; }
.woocommerce-cart table.cart tr.cart_item td{ display:block; border:0 !important; padding:0 !important; }
.woocommerce-cart table.cart tr.cart_item td::before{ content:none !important; }
.woocommerce-cart table.cart td.product-remove{ grid-area:remove; width:32px; align-self:start; }
.woocommerce-cart table.cart td.product-remove a.remove{
  display:flex !important; align-items:center; justify-content:center; width:32px; height:32px; border:0;
  background:var(--bg); color:var(--muted) !important;
  font-size:18px !important; border-radius:var(--radius-sm); transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s var(--ease-smooth);
}
.woocommerce-cart table.cart td.product-remove a.remove:hover{ background:var(--accent-soft); color:var(--accent-deep) !important; transform:scale(1.08); }
.woocommerce-cart table.cart td.product-thumbnail{ grid-area:thumb; }
.woocommerce-cart table.cart td.product-thumbnail img{
  width:110px !important; height:110px; object-fit:cover; border:1px solid var(--line); border-radius:8px; background:var(--bg);
}
.woocommerce-cart table.cart td.product-name{ grid-area:name; align-self:center; font-family:var(--font-display); font-weight:600; font-size:15.5px; text-align:left !important; }
.woocommerce-cart table.cart td.product-name a{ color:var(--ink); }
.woocommerce-cart table.cart td.product-name .variation{ margin-top:6px; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
/* Unit price ("$X.XX each") is dropped on desktop, not just mobile — it's redundant next
   to the qty stepper and line subtotal. */
.woocommerce-cart table.cart td.product-price{ display:none !important; }
/* Quantity and subtotal share the second grid row's single "meta" area — each sized to
   its own content and pinned to opposite edges, so they sit inline without colliding. */
.woocommerce-cart table.cart td.product-quantity{ grid-area:meta; justify-self:start; align-self:center; width:auto; }
.woocommerce-cart table.cart td.product-subtotal{ grid-area:meta; justify-self:end; align-self:center; width:auto; text-align:right; font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--primary-deep); }
@media (max-width:700px){
  .woocommerce-cart table.cart{ border-spacing:0 12px; }
  .woocommerce-cart table.cart tr.cart_item{
    display:grid !important; grid-template-columns:76px 1fr auto; align-items:start;
    column-gap:14px; row-gap:14px; padding:16px !important; margin-bottom:12px;
    grid-template-areas:
      "thumb name   remove"
      "thumb price  qty";
  }
  /* Remove gets its own grid column on every row — it can never overlap the product
     name text again, no matter how long the name is or how many lines it wraps to. */
  .woocommerce-cart table.cart td.product-thumbnail{ grid-area:thumb; width:76px; align-self:start; }
  .woocommerce-cart table.cart td.product-thumbnail img{ width:76px !important; height:76px; border-radius:var(--radius-sm) !important; }
  .woocommerce-cart table.cart td.product-name{ grid-area:name; align-self:start; padding-top:2px; }
  /* Unit price + "Each" on the left, qty stepper on the right — the per-line extended
     subtotal is dropped here since the cart totals card below already shows the real
     total; showing both on a phone-width card is redundant, not extra information. */
  .woocommerce-cart table.cart td.product-price{
    display:block !important; grid-area:price; align-self:center; width:auto; text-align:left;
    font-family:var(--font-mono) !important; font-size:15px !important; font-weight:700; color:var(--primary-deep) !important;
  }
  .woocommerce-cart table.cart td.product-subtotal{ display:none !important; }
  .woocommerce-cart table.cart td.product-quantity{ grid-area:qty; align-self:center; justify-self:end; width:auto; }
  .woocommerce-cart table.cart td.product-remove{
    grid-area:remove; align-self:start; justify-self:end; order:0; width:auto;
  }
  .woocommerce-cart table.cart td.product-remove a.remove{ width:30px; height:30px; font-size:16px !important; border-radius:var(--radius-sm) !important; }
}
/* Real narrow Android phones (Redmi/Poco/etc. commonly ~360-400 CSS px) need a bit
   more reclaimed width than the general ≤700px tablet/phone breakpoint gives —
   otherwise the price+qty row and remove button start crowding each other. */
@media (max-width:400px){
  .woocommerce-cart table.cart tr.cart_item{ grid-template-columns:64px 1fr auto; column-gap:10px; padding:14px !important; }
  .woocommerce-cart table.cart td.product-thumbnail{ width:64px; }
  .woocommerce-cart table.cart td.product-thumbnail img{ width:64px !important; height:64px; }
  .woocommerce-cart table.cart td.product-price{ font-size:14px !important; }
  .mtc-qty-stepper{ height:40px; }
  .mtc-qty-stepper button{ width:30px; }
  .woocommerce .mtc-qty-stepper input.qty{ width:38px !important; }
}

.mtc-price-each{
  display:block; font-family:var(--font-body); font-size:11px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--muted); margin-top:2px;
}

/* Quantity stepper (+/-) — progressive enhancement over the native number input. */
.mtc-qty-stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); height:44px; border-radius:var(--radius-input); overflow:hidden; }
.mtc-qty-stepper button{ width:34px; height:100%; background:none; border:0; cursor:pointer; color:var(--muted); font-size:16px; line-height:1; transition:color .15s ease, background-color .15s ease; }
.mtc-qty-stepper button:hover{ color:var(--accent-deep); background:var(--bg); }
/* Extra `.woocommerce` qualifier bumps specificity above the generic
   `.woocommerce form .input-text{ width:100%!important }` rule, which otherwise
   wins this tie (equal specificity, both !important, but declared later) and
   stretches the qty box to fill the whole stepper pill. */
.woocommerce .mtc-qty-stepper input.qty{
  width:44px !important; height:100% !important; border:0 !important; border-left:1px solid var(--line) !important; border-right:1px solid var(--line) !important;
  text-align:center; font-family:var(--font-mono); font-size:13px; border-radius:0 !important; padding:0 !important;
  -moz-appearance:textfield; appearance:textfield;
}
.mtc-qty-stepper input.qty::-webkit-inner-spin-button,
.mtc-qty-stepper input.qty::-webkit-outer-spin-button{
  -webkit-appearance:none; margin:0;
}

.woocommerce-cart .cart-collaterals .cart_totals{ position:sticky; top:96px; }
@media (max-width:900px){ .woocommerce-cart .cart-collaterals .cart_totals{ position:static; } }
.woocommerce-cart .cart_totals .order-total .amount{ font-size:19px; font-weight:700; color:var(--primary-deep); }
.woocommerce-cart .cart_totals tr.order-total td, .woocommerce-cart .cart_totals tr.order-total th{ padding-top:16px !important; border-top:1px solid var(--line) !important; font-family:var(--font-display); font-size:17px; }
.woocommerce-cart .wc-proceed-to-checkout{ margin-top:22px !important; padding:0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ width:100% !important; display:flex !important; align-items:center; justify-content:center; gap:8px; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button svg{ flex-shrink:0; }
/* WooCommerce core adds ::before/::after clearfix pseudo-elements to .col2-set (leftover
   from its float-based layout). Once the container is a grid, those phantom elements count
   as real grid items and shove the actual billing/shipping columns out of place — strip them. */
.woocommerce-checkout .col2-set::before, .woocommerce-checkout .col2-set::after{ content:none !important; display:none !important; }
.woocommerce-checkout .col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{ width:100% !important; float:none !important; }
@media (max-width:700px){ .woocommerce-checkout .col2-set{ grid-template-columns:1fr; } }
.woocommerce form .form-row{ margin-bottom:14px !important; }
.woocommerce form .form-row label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; display:block; }
.woocommerce form .input-text, .woocommerce form select:not(.select2-hidden-accessible), .woocommerce form textarea{
  border:1px solid var(--line) !important; padding:13px 14px !important; font-size:13px !important; background:var(--surface) !important; border-radius:var(--radius-input) !important;
  width:100% !important; box-sizing:border-box !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
.woocommerce form .input-text:hover, .woocommerce form select:hover, .woocommerce form textarea:hover{ border-color:#c7d2e2 !important; }
.woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce form textarea:focus{
  border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(46,90,168,.12) !important; outline:none !important;
}

/* Native <select> dropdowns (sorting, checkout state/country, etc.) — swap the
   default flat browser arrow/border for a custom chevron and the same smooth,
   rounded look as everything else, instead of a plain generic-looking box. */
.woocommerce select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%235a6b7d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px !important; cursor:pointer;
}
.woocommerce-ordering{ position:relative; display:inline-block; }
.woocommerce-ordering select{ min-width:190px; }
.woocommerce-checkout #payment{ background:var(--surface); border:1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid var(--line) !important; }
.woocommerce-checkout #payment div.payment_box{ background:var(--bg) !important; }
.woocommerce-checkout #payment div.payment_box::before{ display:none !important; }

/* ---------- My Account ---------- */
.woocommerce-account .woocommerce{ max-width:1280px; margin:0 auto; padding:44px 32px 90px; }
@media (max-width:700px){ .woocommerce-account .woocommerce{ padding:28px 20px 60px; } }
/* The nav+content two-column grid only makes sense once the dashboard nav sidebar exists
   (logged in). The logged-out login/register view has no sidebar — scoping the grid to
   :has(...) keeps it from squeezing that single block into the narrow 240px sidebar track. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ display:grid; grid-template-columns:240px 1fr; gap:44px; }
@media (max-width:800px){ .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){ grid-template-columns:1fr; } }
/* WooCommerce's own clearfix CSS gives every .woocommerce wrapper a ::before/::after
   with content:'' — harmless in normal flow, but once display:grid applies here they
   become two extra *real* grid items. With 4 items in a 2-column grid, auto-placement
   scatters them as [::before, nav] on row 1 and [content, ::after] on row 2 — nav and
   content end up in the wrong columns, on separate rows, both squeezed narrow. Same
   root cause already fixed on the cart page; it just never got applied here too. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after{ content:none !important; display:none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation a{ font-size:14px; padding:12px 4px; display:block; border-left:2px solid transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--accent-deep); font-weight:700; border-left-color:var(--accent-deep); padding-left:14px; }
.woocommerce-MyAccount-content table.shop_table{ background:var(--surface); border:1px solid var(--line) !important; }

/* Logged-out login / register cards */
.woocommerce-account .u-columns.col2-set{ display:grid !important; grid-template-columns:1fr 1fr; gap:32px; list-style:none; margin:0; padding:0; max-width:900px; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2{ float:none !important; width:auto !important; background:var(--surface); border:1px solid var(--line); padding:34px; min-width:0; }
.woocommerce-account .u-column1{ grid-column:1 !important; grid-row:1 !important; }
.woocommerce-account .u-column2{ grid-column:2 !important; grid-row:1 !important; }
@media (max-width:700px){
  .woocommerce-account .u-columns.col2-set{ grid-template-columns:1fr; gap:24px; }
  .woocommerce-account .u-column1, .woocommerce-account .u-column2{ grid-column:1 !important; grid-row:auto !important; padding:24px; }
}
.woocommerce-account .u-columns h2{ font-size:22px; margin-bottom:22px; }
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register{ display:flex; flex-direction:column; gap:2px; }
.woocommerce-account .woocommerce-form-row label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; display:block; }
.woocommerce-account .lost_password{ margin-top:14px; font-size:13px; }
.woocommerce-account .woocommerce-form-login__rememberme{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }

/* ---------- Static / policy pages ---------- */
.mtc-static-layout{ padding:48px 32px 90px; display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
@media (max-width:800px){ .mtc-static-layout{ grid-template-columns:1fr; } }
.mtc-static-nav{ border:1px solid var(--line); background:var(--surface); }
.mtc-static-nav a{ font-size:14px; padding:12px 16px; display:block; border-left:2px solid transparent; border-bottom:1px solid var(--line); color:var(--ink); }
.mtc-static-nav a:last-child{ border-bottom:0; }
.mtc-static-nav a.current{ background:var(--accent-soft); color:var(--accent-deep); border-left-color:var(--accent-deep); font-weight:700; }
.mtc-static-callout{ margin-top:24px; background:var(--accent-soft); padding:18px; border-left:3px solid var(--accent-deep); font-size:13px; }
.mtc-static-content table{ width:100%; border-collapse:collapse; font-size:14px; }
.mtc-static-content th{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); }
.mtc-static-content td{ padding:14px 16px; border-bottom:1px solid var(--line); }
.mtc-static-content .tax-note{ margin-top:32px; padding:20px 24px; background:var(--surface); border:1px solid var(--line); }

/* ---------- Gift card product ---------- */
.mtc-giftcard-preview{ margin-top:36px; background:linear-gradient(120deg,#16264a 0%,#2e5aa8 100%); padding:36px; color:#fff; max-width:480px; }
.mtc-giftcard-preview .value{ font-family:var(--font-mono); font-size:36px; font-weight:700; margin-top:6px; }

/* ---------- Wishlist ---------- */
.mtc-wishlist-heart{ background:none; border:0; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.mtc-wishlist-heart svg{ transition:transform .15s ease; }
.mtc-wishlist-heart.is-active svg path{ fill:var(--accent-deep); }
.mtc-wishlist-heart:hover svg{ transform:scale(1.08); }

.mtc-wishlist-page-count{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-deep); font-weight:600; margin-bottom:26px;
  padding:10px 16px; border-radius:999px; background:var(--accent-soft);
}
.mtc-wishlist-page-count svg{ width:14px; height:14px; flex-shrink:0; }
.mtc-wishlist-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 20px; max-width:420px; margin:0 auto; }
.mtc-wishlist-empty svg{ width:56px; height:56px; margin-bottom:22px; }
.mtc-wishlist-empty h3{ font-size:22px; margin-bottom:10px; }
.mtc-wishlist-empty p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-bottom:28px; }