/* =====================================================================
   MAWATLE — SHARED STYLESHEET
   Design tokens + components common to every page (nav, ticker, mobile
   menu, cart drawer, checkout modal, buttons, footer, breadcrumb, page
   header, section head, filter pills, reveal animation).

   Page-specific layout (hero, product grids, story timeline, gallery
   grid, etc.) stays in each page's own <style> block — only what's
   genuinely reused across pages lives here.
   ===================================================================== */

:root{
  --void:#000000;
  --ink:#0A0A0A;
  --sand:#F0E6D2;
  --cyan:#76E7F5;
  --cyan-dark:#3FC7DB;
  --red:#EE2B22;
  --red-dark:#C71F17;
  --yellow:#F5B223;
  --yellow-dark:#D89512;
  --concrete:#726F63;
  --font-display:'Baloo 2', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

/* ---------------- reset ---------------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ---------------- scroll reveal ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;font-family:var(--font-display);font-weight:700;font-size:14px;border-radius:100px;transition:transform .15s ease, background .15s ease;}
.btn-fill{background:var(--cyan);color:var(--void);}
.btn-fill:hover{background:var(--cyan-dark);transform:translateY(-2px);}
.btn-fill-dark{background:var(--void);color:var(--yellow);}
.btn-fill-dark:hover{transform:translateY(-2px);}
.btn-outline{border:2px solid var(--sand);color:var(--sand);}
.btn-outline:hover{background:var(--sand);color:var(--void);transform:translateY(-2px);}

/* ---------------- header / nav ---------------- */
header{position:sticky;top:0;z-index:100;background:var(--void);border-bottom:2px solid var(--cyan);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:10px 32px;max-width:1280px;margin:0 auto;}
.logo-mark{height:52px;width:auto;display:block;}
nav.primary{display:flex;gap:36px;font-family:var(--font-mono);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#EDEBE3;}
nav.primary a{padding:4px 0;}
nav.primary a:hover{color:var(--cyan);}
nav.primary a.active{color:var(--cyan);}
.nav-actions{display:flex;align-items:center;gap:20px;}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;}
.hamburger span{display:block;width:100%;height:2px;background:var(--sand);}
@media (max-width:900px){ nav.primary{display:none;} .hamburger{display:flex;} }

/* ---------------- mobile menu ---------------- */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:250;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.menu-overlay.is-open{opacity:1;pointer-events:auto;}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);z-index:300;
  background:var(--void);color:var(--sand);border-left:2px solid var(--cyan);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;padding:22px;
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px;}
.mobile-menu-head .logo-mark{height:40px;}
.mobile-menu-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;}
.mobile-menu-close svg{width:15px;height:15px;color:var(--sand);}
.mobile-menu nav{display:flex;flex-direction:column;}
.mobile-menu nav a{font-family:var(--font-mono);font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:14px 2px;border-bottom:1px solid rgba(240,230,210,0.1);}
.mobile-menu nav a.active{color:var(--cyan);}

/* ---------------- ticker ---------------- */
.ticker{background:var(--ink);color:var(--yellow);border-bottom:1px solid rgba(245,178,35,0.25);overflow:hidden;white-space:nowrap;position:relative;}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink),transparent);}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink),transparent);}
.ticker-track{display:inline-flex;animation:ticker-scroll 30s linear infinite;}
.ticker.reverse .ticker-track{animation-direction:reverse;animation-duration:36s;}
.ticker-track span{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:2px;padding:10px 28px;border-right:1px solid rgba(245,178,35,0.2);}
@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------------- breadcrumb ---------------- */
.breadcrumb{background:var(--void);color:var(--concrete);font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:16px 32px;border-bottom:1px solid rgba(240,230,210,0.08);}
.breadcrumb .wrap{display:flex;gap:10px;align-items:center;}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb .sep{color:#3a3a38;}
.breadcrumb .current{color:var(--sand);}

/* ---------------- page header (sub-page hero banner) ---------------- */
.page-header{background:var(--void);color:var(--sand);padding:56px 32px 64px;position:relative;overflow:hidden;}
.page-header::before{content:"";position:absolute;inset:0;opacity:0.07;background:
  repeating-linear-gradient(45deg, var(--yellow) 0 16px, transparent 16px 32px),
  repeating-radial-gradient(circle at 85% 15%, var(--cyan) 0 2px, transparent 2px 42px);}
.page-header-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;}
.page-header h1{font-family:var(--font-display);font-weight:800;font-size:52px;line-height:1;margin-bottom:14px;max-width:820px;}
.page-header h1 .accent{color:var(--cyan);}
.page-header p{font-size:16px;color:#C7C4B8;max-width:520px;line-height:1.6;margin-bottom:24px;}
.ph-stats{display:flex;gap:40px;flex-wrap:wrap;}
.ph-stat-num{font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--cyan);}
.ph-stat-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--concrete);margin-top:2px;}
@media (max-width:700px){ .page-header h1{font-size:34px;} }

/* ---------------- section head (in-page section heading) ---------------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px;}
.section-head .tag{font-family:var(--font-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--concrete);margin-bottom:10px;}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:38px;}
.section-head h2 .accent{color:var(--red);}

/* ---------------- filter pills ----------------
   .pill      = light variant (dark text/border on a light/sand section) — used on Shop
   .pill-dark = dark variant (light text/border on a black section) — used on Gallery
   Both kept distinct on purpose: same *role* (a filter toggle), different
   *theme context*, so a shared name would silently break one or the other
   depending on load order. */
.filter-bar{background:var(--sand);border-bottom:2px solid var(--ink);}
.filter-bar-inner{max-width:1280px;margin:0 auto;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;}

.pill{padding:9px 18px;border:1.5px solid var(--ink);border-radius:100px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;background:transparent;color:var(--ink);transition:all .15s ease;}
.pill:hover{border-color:var(--cyan-dark);}
.pill.active{background:var(--ink);color:var(--cyan);border-color:var(--ink);}

.pill-dark{padding:9px 18px;border:1.5px solid var(--concrete);border-radius:100px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;background:transparent;color:var(--sand);transition:all .15s ease;}
.pill-dark:hover{border-color:var(--cyan);}
.pill-dark.active{background:var(--cyan);color:var(--void);border-color:var(--cyan);}

.sort-select{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--concrete);}
.sort-select select{border:1.5px solid var(--ink);background:var(--sand);color:var(--ink);padding:8px 12px;border-radius:100px;font-family:var(--font-mono);font-size:12px;}

/* ---------------- gallery grid (canonical filterable grid — used on Gallery) ----------------
   Homepage's teaser mosaic is a DIFFERENT component (asymmetric bento tiles,
   not filterable) and deliberately uses its own .teaser-* classes in its
   page-specific <style> so it never collides with this one. */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.look{aspect-ratio:3/4;position:relative;border:2px solid rgba(240,230,210,0.15);border-radius:14px;display:flex;align-items:flex-end;padding:18px;overflow:hidden;transition:transform .2s ease, border-color .2s ease;}
.look[hidden]{display:none;}
.look:hover{transform:translateY(-6px);border-color:var(--cyan);}
.look-num{position:absolute;top:16px;left:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:rgba(240,230,210,0.6);z-index:2;}
.look-caption{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;position:relative;z-index:2;}
.g1{background:var(--void);color:var(--cyan);}
.g2{background:var(--cyan);color:var(--void);}
.g3{background:var(--red);color:#fff;}
.g4{background:var(--yellow);color:var(--void);}
@media (max-width:900px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .gallery-grid{grid-template-columns:1fr;} }

/* ---------------- cart trigger + badge ---------------- */
.cart{position:relative;background:none;border:none;}
.cart-badge{
  position:absolute;top:-9px;right:-11px;background:var(--red);color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:700;min-width:16px;height:16px;
  border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}

/* ---------------- cart drawer ---------------- */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(380px,90vw);z-index:400;
  background:var(--sand);color:var(--ink);border-left:2px solid var(--ink);
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.cart-drawer.is-open{transform:translateX(0);}
.cart-drawer-head{
  display:flex;justify-content:space-between;align-items:center;padding:20px 22px;
  border-bottom:2px solid var(--ink);background:var(--void);color:var(--sand);flex:none;
}
.cart-drawer-head h3{font-family:var(--font-display);font-weight:700;font-size:19px;}
.cart-drawer-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;}
.cart-drawer-close svg{width:15px;height:15px;color:var(--sand);}
.cart-items{flex:1;overflow-y:auto;padding:8px 22px;}
.cart-empty{font-family:var(--font-mono);font-size:12.5px;color:var(--concrete);text-align:center;padding:70px 10px;text-transform:uppercase;letter-spacing:1px;}
.cart-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid rgba(20,20,20,0.12);}
.cart-item-swatch{flex:none;width:54px;height:54px;border-radius:10px;border:2px solid var(--ink);}
.cart-item-body{flex:1;min-width:0;}
.cart-item-name{font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:3px;line-height:1.1;}
.cart-item-cat{font-family:var(--font-mono);font-size:10.5px;color:var(--concrete);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;}
.cart-item-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:100px;overflow:hidden;}
.qty-stepper button{width:24px;height:24px;font-family:var(--font-mono);font-weight:700;font-size:13px;background:none;border:none;cursor:pointer;}
.qty-stepper span{width:24px;text-align:center;font-family:var(--font-mono);font-size:12px;}
.cart-item-price{font-family:var(--font-mono);font-size:13px;font-weight:700;white-space:nowrap;}
.cart-item-remove{font-family:var(--font-mono);font-size:10px;letter-spacing:0.5px;text-transform:uppercase;color:var(--red);margin-top:9px;display:inline-block;background:none;border:none;cursor:pointer;padding:0;}
.cart-drawer-foot{border-top:2px solid var(--ink);padding:18px 22px;background:var(--sand);flex:none;}
.cart-subtotal-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:12.5px;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;}
.cart-subtotal-row strong{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:0;text-transform:none;}
.cart-checkout-btn{
  width:100%;padding:15px;background:var(--void);color:var(--yellow);border-radius:100px;border:none;
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:0.5px;
  transition:transform .15s ease;cursor:pointer;
}
.cart-checkout-btn:hover{transform:translateY(-2px);}

/* add-to-cart button used on any product card, regardless of page */
.add-to-cart-btn{
  width:100%;margin-top:12px;padding:11px;background:var(--void);color:var(--cyan);border-radius:100px;border:none;
  font-family:var(--font-mono);font-weight:700;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  transition:background .15s ease, transform .15s ease;cursor:pointer;
}
.add-to-cart-btn:hover{background:var(--ink);transform:translateY(-1px);}
.add-to-cart-btn.is-added{background:var(--cyan);color:var(--void);}

/* ---------------- checkout modal ---------------- */
.checkout-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:500;opacity:0;pointer-events:none;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center;padding:24px;}
.checkout-overlay.is-open{opacity:1;pointer-events:auto;}
.checkout-modal{
  width:100%;max-width:520px;max-height:88vh;background:var(--sand);color:var(--ink);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;transform:translateY(16px);transition:transform .25s ease;
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.6);
}
.checkout-overlay.is-open .checkout-modal{transform:translateY(0);}
.checkout-head{background:var(--void);color:var(--sand);padding:20px 24px;flex:none;}
.checkout-head-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.checkout-head h3{font-family:var(--font-display);font-weight:700;font-size:19px;}
.checkout-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;}
.checkout-close svg{width:15px;height:15px;color:var(--sand);}
.checkout-steps{display:flex;gap:8px;}
.checkout-step-dot{flex:1;height:4px;border-radius:100px;background:rgba(240,230,210,0.2);transition:background .2s ease;}
.checkout-step-dot.is-active,.checkout-step-dot.is-done{background:var(--cyan);}
.checkout-step-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.5px;text-transform:uppercase;color:var(--concrete);margin-top:8px;}
.checkout-step-labels span.is-active{color:var(--cyan);}
.checkout-body{padding:24px;overflow-y:auto;flex:1;}
.checkout-panel{display:none;}
.checkout-panel.is-active{display:block;}
.checkout-field{margin-bottom:16px;}
.checkout-field label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:var(--concrete);margin-bottom:6px;}
.checkout-field input{
  width:100%;padding:13px 14px;border:1.5px solid var(--ink);border-radius:10px;
  font-family:var(--font-body);font-size:14px;background:#fff;color:var(--ink);
}
.checkout-field input:focus{outline:2px solid var(--cyan);outline-offset:1px;}
.checkout-field-error{display:none;font-family:var(--font-mono);font-size:10.5px;color:var(--red);margin-top:5px;}
.checkout-field.has-error input{border-color:var(--red);}
.checkout-field.has-error .checkout-field-error{display:block;}
.checkout-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.checkout-note{font-family:var(--font-mono);font-size:10.5px;color:var(--concrete);text-align:center;margin-top:4px;letter-spacing:0.3px;}

.review-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(20,20,20,0.1);font-size:13.5px;}
.review-item-name{font-weight:600;}
.review-item-meta{font-family:var(--font-mono);font-size:11px;color:var(--concrete);}
.review-summary-row{display:flex;justify-content:space-between;padding:8px 0;font-family:var(--font-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:0.5px;color:var(--concrete);}
.review-summary-row.total{color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:19px;text-transform:none;letter-spacing:0;padding-top:14px;border-top:2px solid var(--ink);margin-top:8px;}
.review-address{background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:13.5px;line-height:1.6;}
.review-address-label{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--concrete);margin-bottom:6px;}

.checkout-confirm{text-align:center;padding:20px 0 8px;}
.checkout-confirm-icon{
  width:64px;height:64px;border-radius:50%;background:var(--cyan);color:var(--void);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.checkout-confirm-icon svg{width:30px;height:30px;}
.checkout-confirm h4{font-family:var(--font-display);font-weight:800;font-size:24px;margin-bottom:8px;}
.checkout-confirm p{font-size:14px;color:var(--concrete);margin-bottom:4px;}
.checkout-order-number{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--ink);background:#fff;border:1.5px dashed var(--ink);border-radius:10px;padding:10px 14px;display:inline-block;margin:14px 0;}

.checkout-foot{padding:18px 24px;border-top:2px solid var(--ink);display:flex;gap:10px;flex:none;background:var(--sand);}
.checkout-btn{flex:1;padding:14px;border-radius:100px;font-family:var(--font-display);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:transform .15s ease, opacity .15s ease;}
.checkout-btn-back{background:transparent;border:2px solid var(--ink);color:var(--ink);}
.checkout-btn-back:hover{background:var(--ink);color:var(--sand);}
.checkout-btn-next{background:var(--void);color:var(--yellow);}
.checkout-btn-next:hover{transform:translateY(-2px);}
.checkout-btn-next:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.checkout-btn-place{background:var(--cyan);color:var(--void);}
.checkout-btn-place:hover{background:var(--cyan-dark);transform:translateY(-2px);}
.checkout-spinner{
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,0.2);border-top-color:var(--void);
  display:inline-block;vertical-align:-3px;margin-right:8px;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------- footer ---------------- */
footer{background:var(--void);color:#8f8d84;padding:60px 32px 26px;border-top:1px solid rgba(240,230,210,0.08);}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;align-items:start;}
.footer-brand .logo-mark{height:56px;margin-bottom:12px;}
.footer-brand p{font-size:13.5px;line-height:1.7;max-width:260px;}
.footer-col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sand);margin-bottom:16px;}
.footer-col a{display:block;font-size:14px;margin-bottom:10px;}
.footer-col a:hover{color:var(--cyan);}
.footer-bottom{max-width:1280px;margin:50px auto 0;padding-top:20px;border-top:1px solid rgba(240,230,210,0.1);font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ---------------- CTA band (used on Story + Gallery) ---------------- */
.cta-section{background:var(--yellow);color:var(--void);padding:80px 32px;text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 14px, transparent 14px 28px);}
.cta-inner{position:relative;z-index:2;}
.cta-section h2{font-family:var(--font-display);font-weight:800;font-size:40px;margin-bottom:22px;}