/* ============================================================
   MAESTRO CLO. — Global Styles
   Minimal · Masculine · Premium · Modern · Timeless
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Cormorant+Garamond:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&display=swap');

:root{
  --ivory:#F5F3EE;
  --black:#111111;
  --stone:#77736C;
  --border:#D9D6CF;
  --ivory-text:#F5F3EE;

  --font-primary:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial:'Cormorant Garamond', Georgia, serif;

  --header-h:76px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ivory);
  color:var(--black);
  font-family:var(--font-primary);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
img[hidden]{ display:none !important; }

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

input{ font-family:inherit; }

:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }

.serif{ font-family:var(--font-editorial); }

/* ---------------- Layout helpers ---------------- */
.wrap{ max-width:1400px; margin:0 auto; padding:0 40px; }
@media (max-width:768px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--stone);
}

.section-head{
  text-align:center;
  margin-bottom:56px;
}
.section-head h2{
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:10px;
  font-weight:600;
}
.section-head p{
  font-family:var(--font-editorial);
  font-size:22px;
  color:var(--stone);
  font-style:italic;
}

.btn-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  padding-bottom:3px;
  border-bottom:1px solid var(--black);
  transition:opacity .25s var(--ease);
}
.btn-link:hover{ opacity:.55; }
.btn-link.on-dark{ border-color:var(--ivory); color:var(--ivory); }

.btn-solid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px;
  background:var(--black);
  color:var(--ivory);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.btn-solid:hover{ background:#2b2b2b; }
.btn-solid:active{ transform:scale(.98); }
.btn-solid.full{ width:100%; }
.btn-solid[disabled]{ background:#B9B6AE; cursor:not-allowed; }

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 32px;
  border:1px solid var(--black);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.btn-outline:hover{ background:var(--black); color:var(--ivory); }

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  color:var(--ivory);
}
.site-header.solid{
  background:var(--ivory);
  border-bottom-color:var(--border);
  color:var(--black);
}
.site-header.dark-page{ color:var(--black); background:var(--ivory); border-bottom-color:var(--border); }

.header-inner{
  width:100%;
  max-width:1400px; margin:0 auto; padding:0 40px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.header-nav-left, .header-nav-right{
  display:flex; align-items:center; gap:28px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.header-nav-right{ justify-content:flex-end; }
.header-nav-left a, .header-nav-right a, .header-nav-right button{
  transition:opacity .2s var(--ease);
}
.header-nav-left a:hover, .header-nav-right a:hover, .header-nav-right button:hover{ opacity:.55; }

.logo{
  font-size:16px; letter-spacing:.22em; font-weight:600; text-align:center;
  grid-column:2;
}

.bag-btn{ display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }

.menu-toggle{ display:none; }

@media (max-width:900px){
  .header-nav-left{ display:none; }
  .header-inner{ grid-template-columns:auto 1fr auto; }
  .logo{ grid-column:2; font-size:14px; }
  .menu-toggle{ display:flex; align-items:center; }
  .menu-toggle span{ display:block; width:20px; height:1px; background:currentColor; position:relative; }
  .menu-toggle span::before, .menu-toggle span::after{ content:''; position:absolute; left:0; width:20px; height:1px; background:currentColor; }
  .menu-toggle span::before{ top:-6px; }
  .menu-toggle span::after{ top:6px; }
  .header-nav-right{ gap:16px; }
  .header-nav-right .acct-link{ display:none; }
}

/* Mobile menu drawer */
.mobile-menu{
  position:fixed; inset:0; z-index:1200;
  background:var(--ivory);
  transform:translateX(-100%);
  transition:transform .35s var(--ease);
  padding:100px 32px 40px;
  display:flex; flex-direction:column; gap:24px;
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-size:20px; font-family:var(--font-editorial); font-style:italic; }
.mobile-menu .close-menu{ position:absolute; top:26px; right:24px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ============================================================
   HERO & SLIDER
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--black);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* Full screen on every device: the fixed header floats over the hero, so no header height is subtracted.
     100vh is the fallback, 100dvh follows the mobile browser bar as it shows / hides. */
  min-height:100vh;
  min-height:100dvh;
  padding:100px 20px 60px;
  box-sizing:border-box;
}

.hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 40px;
  color: var(--ivory);
  text-align: center;
}

.hero-content .eyebrow { color: var(--ivory); opacity: .8; margin-bottom: 14px; }
.hero-content h1 {
  font-family: var(--font-editorial);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: 28px;
}

.hero-bottom-controls {
  position: absolute;
  bottom: 64px;
  left: 0; right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.slide-down-arrow {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  transition: transform 0.3s ease, opacity 0.3s ease;
  padding: 8px;
  animation: bounceDown 2s infinite;
}

.slide-down-arrow:hover {
  opacity: 1;
}

@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

/* ---- Logo / glowing-circle hero variant ---- */
.hero-center-wrapper{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}

.logo-container{
  display:flex;
  justify-content:center;
  align-items:center;
}

.glowing-circle{
  --circle:300px;
  width:var(--circle);
  height:var(--circle);
  border-radius:50%;
  background-color:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(255,255,255,.85);
  animation:smoothBreathing 5s cubic-bezier(.4,0,.6,1) infinite alternate;
}
@media (max-width:480px){
  .glowing-circle{ --circle:220px; }
}

.logo-text{
  font-family:'Orbitron', sans-serif;
  font-size:calc(var(--circle, 300px) * .093);
  font-weight:700;
  color:#ffffff;
  letter-spacing:.07em;
  white-space:nowrap;
  text-transform:capitalize;
  text-shadow:0 0 12px rgba(255,255,255,.6);
}

@keyframes smoothBreathing {
  0% {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.1),
      0 0 20px rgba(200, 225, 255, 0.05),
      inset 0 0 10px rgba(255, 255, 255, 0.05);
    transform: scale(0.98);
  }
  100% {
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
      0 0 40px rgba(255, 255, 255, 0.95),
      0 0 80px rgba(200, 225, 255, 0.7),
      inset 0 0 35px rgba(255, 255, 255, 0.6);
    transform: scale(1.02);
  }
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.section{ padding:110px 0; }
@media (max-width:768px){ .section{ padding:70px 0; } }

.product-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px 24px;
}
@media (max-width:900px){ .product-grid{ grid-template-columns:repeat(2, 1fr); } }

.home-products-section .product-card{ transition:transform .28s var(--ease); }
.home-products-section .product-card:hover{ transform:translateY(-4px); }

.product-card{ text-align:left; }
.product-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#EDEAE3;
  margin-bottom:16px;
}
.media-placeholder{ position:absolute; inset:0; display:grid; place-items:center; padding:14px; background:#EDEAE3; color:var(--stone); font-size:11px; text-align:center; }
.product-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.product-media img.alt{ opacity:0; }
.product-card:hover .product-media img.main{ opacity:0; }
.product-card:hover .product-media img.alt{ opacity:1; }
.product-card:hover .product-media img{ transform:scale(1.03); }

.product-wishlist{
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(245,243,238,.85);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transition:background .2s var(--ease);
}
.product-wishlist:hover{ background:var(--ivory); }

.product-name{ font-size:13px; font-weight:500; margin-bottom:4px; }
.product-color{ font-size:12px; color:var(--stone); margin-bottom:6px; }
.product-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; font-size:13px; font-weight:600; }
.price-original{ color:var(--stone); font-size:.92em; font-weight:400; text-decoration:line-through; }
.price-current{ color:inherit; }
.price-discounted{ color:#a12d2d; }
.discount-percent{ color:#a12d2d; font-size:10px; font-weight:600; }

.discount-promo{ padding:44px 40px; }
.discount-promo[hidden]{ display:none; }
.discount-promo-link{ display:grid; grid-template-columns:1fr 1fr; min-height:320px; background:#171715; color:var(--ivory); }
.discount-promo-copy{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:48px 8vw; }
.discount-promo-copy .eyebrow{ color:#d0c5aa; margin-bottom:14px; }
.discount-promo-copy h2{ max-width:540px; font-family:var(--font-editorial); font-size:38px; font-weight:500; line-height:1.1; margin-bottom:16px; }
.discount-promo-offer{ font-size:15px; margin-bottom:24px; }
.discount-promo-offer strong{ color:#e5c783; font-size:24px; margin-right:5px; }
.discount-promo-cta{ border-bottom:1px solid currentColor; padding-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.discount-promo-image{ width:100%; height:100%; min-height:320px; object-fit:cover; }
.product-type-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.product-type-links a{ display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--border); font-size:11px; font-weight:600; text-transform:uppercase; }
.product-type-links a:hover{ border-color:var(--black); background:var(--black); color:var(--ivory); }
.sticker-section{ border-top:1px solid var(--border); }
.sticker-section > .product-grid > p{ grid-column:1 / -1; color:var(--stone); font-size:14px; text-align:center; }
@media (max-width:768px){
  .discount-promo{ padding:24px 20px; }
  .discount-promo-link{ grid-template-columns:1fr; }
  .discount-promo-copy{ padding:34px 28px; }
  .discount-promo-copy h2{ font-size:32px; }
  .discount-promo-image{ min-height:220px; max-height:300px; }
}

.grid-cta-row{
  display:flex; align-items:center; justify-content:center; gap:24px;
  margin-top:48px;
}

/* ============================================================
   BRAND STATEMENT
   ============================================================ */
.statement{
  padding:170px 0;
  text-align:center;
}
.statement h2{
  font-family:var(--font-editorial);
  font-size:clamp(38px, 6vw, 72px);
  font-weight:500;
  line-height:1.05;
  margin-bottom:30px;
}
.statement p{
  max-width:420px;
  margin:0 auto 36px;
  color:var(--stone);
  font-size:15px;
}
@media (max-width:768px){ .statement{ padding:100px 0; } }

/* ============================================================
   EDITORIAL / DARK SECTION
   ============================================================ */
.editorial{
  position:relative;
  height:88vh; min-height:520px;
  display:flex; align-items:flex-end;
  background:var(--black);
  overflow:hidden;
}
.editorial img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.editorial::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); }
.editorial-content{ position:relative; z-index:2; padding:70px 40px; color:var(--ivory); }
.editorial-content .eyebrow{ color:var(--ivory); opacity:.75; margin-bottom:12px; }
.editorial-content h2{ font-family:var(--font-editorial); font-size:clamp(28px,4vw,44px); margin-bottom:20px; font-weight:500; }

/* ============================================================
   INSTAGRAM STRIP
   ============================================================ */
.insta-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-bottom:40px; }
@media (max-width:768px){ .insta-grid{ grid-template-columns:repeat(4,1fr); gap:2px; } }
.insta-grid a{ position:relative; display:block; aspect-ratio:1; overflow:hidden; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.insta-grid a:hover img{ transform:scale(1.06); }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter{ background:var(--black); color:var(--ivory); padding:110px 0; text-align:center; }
.newsletter .eyebrow{ color:var(--ivory); opacity:.7; }
.newsletter h2{ font-family:var(--font-editorial); font-size:clamp(30px,5vw,52px); margin:16px 0 18px; font-weight:500; }
.newsletter p{ color:#B6B2A8; margin-bottom:36px; }
.newsletter-form{ display:flex; justify-content:center; gap:0; max-width:420px; margin:0 auto; border-bottom:1px solid #4a4a4a; padding-bottom:12px; }
.newsletter-form input{
  flex:1; background:transparent; border:none; color:var(--ivory);
  font-size:13px; letter-spacing:.03em; padding:8px 0;
}
.newsletter-form input::placeholder{ color:#8a877f; }
.newsletter-form button{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.newsletter-form button:hover{ opacity:.6; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ padding:80px 0 30px; border-top:1px solid var(--border); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:60px; }
@media (max-width:768px){ .footer-grid{ grid-template-columns:repeat(2,1fr); gap:36px; } }
.footer-logo{ font-size:15px; letter-spacing:.18em; font-weight:600; margin-bottom:14px; }
.footer-col h4{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; font-size:13px; }
.footer-col a:hover{ color:var(--stone); }
.footer-bottom{ font-size:11px; color:var(--stone); letter-spacing:.02em; }

/* ============================================================
   CART DRAWER
   ============================================================ */
.overlay{
  position:fixed; inset:0; background:rgba(17,17,17,.35); z-index:1300;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.overlay.open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1400;
  width:min(420px, 92vw);
  background:var(--ivory);
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--border); }
.cart-head h3{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.cart-close{ font-size:20px; line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:24px; }
.cart-empty{ color:var(--stone); font-size:13px; text-align:center; margin-top:60px; }
.cart-item{ display:flex; gap:14px; }
.cart-item img{ width:76px; height:96px; object-fit:cover; background:#EDEAE3; }
.cart-item-info{ flex:1; }
.cart-item-name{ font-size:13px; font-weight:500; margin-bottom:2px; }
.cart-item-variant{ font-size:12px; color:var(--stone); margin-bottom:10px; }
.qty-control{ display:flex; align-items:center; gap:14px; font-size:13px; }
.qty-control button{ width:22px; height:22px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.cart-item-price{ font-size:13px; font-weight:600; white-space:nowrap; }
.cart-item-remove{ font-size:11px; color:var(--stone); text-decoration:underline; margin-top:6px; padding:8px 0; background:none; border:0; cursor:pointer; }
.cart-item-remove:hover{ color:var(--black); }
.price-unit{ font-size:11px; color:var(--stone); }
.cart-foot{ border-top:1px solid var(--border); padding:24px 28px 30px; }
.cart-subtotal{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:18px; }
.cart-subtotal strong{ font-weight:600; }
.cart-actions{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.cart-trust{ display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--stone); }

/* ============================================================
   COLLECTION / SHOP PAGE
   ============================================================ */
.collection-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  padding-bottom:32px; margin-bottom:40px; border-bottom:1px solid var(--border);
}
.collection-title{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.collection-count{ color:var(--stone); font-weight:400; }
.filters{ display:flex; gap:28px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.filters button, .sort-select{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.filters{ align-items:flex-end; flex-wrap:wrap; gap:12px; }
.filter-control{ display:grid; gap:6px; color:var(--stone); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.filter-control select, .filter-control input, .sort-control select{
  min-height:38px;
  border:1px solid var(--border);
  border-radius:0;
  padding:8px 10px;
  background:var(--ivory);
  color:var(--black);
  font:inherit;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
}
.filter-control select{ min-width:112px; }
.filter-control input{ width:112px; }
.sort-control{ display:flex; align-items:center; gap:10px; color:var(--stone); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.sort-control select{ min-width:152px; }
@media (max-width:640px){ .filters{ gap:16px; } }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product-page{ padding-top:var(--header-h); }
.pdp-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:70px; padding:56px 0 110px; }
@media (max-width:900px){ .pdp-grid{ grid-template-columns:1fr; gap:36px; padding:24px 0 80px; } }

.pdp-gallery-main{ aspect-ratio:4/5; overflow:hidden; background:#EDEAE3; margin-bottom:12px; }
.pdp-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.pdp-gallery-placeholder{ width:100%; height:100%; display:grid; place-items:center; color:var(--stone); font-size:13px; }
.pdp-thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.pdp-thumbs button{ aspect-ratio:4/5; overflow:hidden; background:#EDEAE3; border:1px solid transparent; padding:0; }
.pdp-thumbs button.active{ border-color:var(--black); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; }

.pdp-info{ position:sticky; top:calc(var(--header-h) + 30px); align-self:start; }
.pdp-name{ font-size:22px; font-weight:500; margin-bottom:6px; }
.pdp-color{ color:var(--stone); font-size:13px; margin-bottom:14px; }
.pdp-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; font-size:18px; font-weight:600; margin-bottom:26px; }
.pdp-desc{ color:var(--stone); font-size:14px; line-height:1.7; margin-bottom:32px; max-width:420px; }

.pdp-field{ margin-bottom:28px; }
.pdp-field[hidden]{ display:none !important; }
.pdp-field-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin-bottom:12px; display:flex; justify-content:space-between; }
.pdp-field-label .muted{ color:var(--stone); font-weight:400; text-transform:none; letter-spacing:0; }
.size-options{ display:flex; gap:10px; }
.size-options button{
  width:48px; height:44px; border:1px solid var(--border); font-size:13px;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.size-options button.active{ border-color:var(--black); background:var(--black); color:var(--ivory); }
.size-options button:hover:not(.active){ border-color:var(--black); }
.size-options button:focus-visible{ outline-offset:3px; }
.size-selection-hint{ margin-top:10px; color:var(--stone); font-size:12px; }
.sticker-placement-select{ width:min(100%, 280px); min-height:44px; padding:10px 12px; border:1px solid var(--border); background:var(--ivory); color:var(--black); font:inherit; font-size:14px; }

.pdp-add-row{ display:flex; flex-direction:column; gap:14px; margin-bottom:34px; }
.wishlist-link{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; justify-content:center; }

.accordion{ border-top:1px solid var(--border); }
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; text-align:left;
}
.accordion-icon{ font-size:16px; font-weight:400; transition:transform .25s var(--ease); }
.accordion-item.open .accordion-icon{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.accordion-panel-inner{ padding-bottom:20px; font-size:13px; color:var(--stone); line-height:1.8; }
.accordion-panel-inner dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; }
.accordion-panel-inner dt{ color:var(--black); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero{ padding:calc(var(--header-h) + 60px) 0 40px; text-align:center; }
.about-hero h1{ font-family:var(--font-editorial); font-size:clamp(36px,7vw,76px); font-weight:500; line-height:1.02; margin-bottom:26px; }
.about-hero p{ max-width:460px; margin:0 auto; color:var(--stone); font-size:15px; }
.about-photo{ width:100%; aspect-ratio:16/9; overflow:hidden; margin-top:50px; }
.about-photo img{ width:100%; height:100%; object-fit:cover; }

.philosophy{ padding:130px 0; text-align:center; }
.philosophy .eyebrow{ margin-bottom:18px; }
.philosophy h2{ font-family:var(--font-editorial); font-size:clamp(30px,5vw,52px); max-width:640px; margin:0 auto 30px; font-weight:500; line-height:1.15; }
.philosophy p{ max-width:480px; margin:0 auto; color:var(--stone); font-size:15px; line-height:1.8; }

.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-bottom:130px; }
@media (max-width:768px){ .values{ grid-template-columns:1fr; gap:48px; } }
.value-item .num{ font-family:var(--font-editorial); font-size:15px; color:var(--stone); margin-bottom:16px; }
.value-item h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:12px; }
.value-item p{ color:var(--stone); font-size:14px; }

.help-page{ padding-top:calc(var(--header-h) + 56px); padding-bottom:100px; }
.help-page-header{ max-width:680px; margin:0 auto 42px; text-align:center; }
.help-page-header .eyebrow{ margin-bottom:12px; }
.help-page-header h1{ margin-bottom:12px; font-family:var(--font-editorial); font-size:52px; font-weight:500; line-height:1.05; }
.help-page-header > p:last-child{ color:var(--stone); font-size:14px; }
.help-index{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px 26px; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.help-index a{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.help-index a:hover{ color:var(--stone); }
.help-content{ max-width:900px; margin:0 auto; }
.help-section{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; padding:38px 0; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--header-h) + 20px); }
.help-section > .eyebrow{ padding-top:5px; }
.help-section h2{ margin-bottom:14px; font-family:var(--font-editorial); font-size:32px; font-weight:500; }
.help-section h3{ margin:22px 0 6px; font-size:13px; font-weight:600; }
.help-section p{ max-width:680px; margin-bottom:14px; color:var(--stone); font-size:14px; line-height:1.75; }
.help-section .btn-link{ margin-top:6px; }

.about-editorial-grid {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
  display: flex;
  gap: 20px;
}

.about-editorial-grid .ph-img {
  width: 50%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .about-editorial-grid {
    flex-direction: column;
  }
  .about-editorial-grid .ph-img {
    width: 100%;
  }
}

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,120%);
  background:var(--black); color:var(--ivory); font-size:12px; letter-spacing:.06em;
  padding:14px 22px; z-index:1500; transition:transform .35s var(--ease), opacity .35s var(--ease), visibility .35s;
  opacity:0; visibility:hidden; pointer-events:none;   /* fully hidden until shown (it used to peek in at the bottom of the screen) */
}
.toast.show{ transform:translate(-50%,0); opacity:1; visibility:visible; }

/* ============================================================
   EXPANDABLE SEARCH & LIVE SEARCH RESULTS
   ============================================================ */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-container {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  padding: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  z-index: 100;
}

.search-wrapper.active .search-input-container {
  width: 280px;
  opacity: 1;
  visibility: visible;
  padding: 4px 12px 4px 18px;
}

.search-wrapper.active #searchBtn {
  opacity: 0;
  pointer-events: none;
}

.search-input-container input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #111111;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 0;
}

.search-input-container input::placeholder {
  color: #888888;
  font-weight: 400;
}

#closeSearchBtn {
  background: none;
  border: none;
  font-size: 18px;
  color: #111111;
  cursor: pointer;
  padding: 0 0 0 8px;
  line-height: 1;
}

/* Live Search Dropdown */
.search-results-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-height: 380px;
  background: #ffffff;
  color: #111111;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  overflow-y: auto;
  display: none;
  z-index: 99;
  padding: 8px 0;
}

.search-results-dropdown.show {
  display: block;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: #111111;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f2f0eb;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: #f7f5f0;
}

.search-result-item img {
  width: 44px;
  height: 54px;
  object-fit: cover;
  border-radius: 4px;
  background: #EDEAE3;
}
.search-result-placeholder{ width:44px; height:54px; display:grid; place-items:center; background:#EDEAE3; color:var(--stone); font-size:9px; }

.search-result-info {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 11px;
  color: var(--stone);
  margin-top: 2px;
}

.search-no-results, .search-loading {
  padding: 16px;
  font-size: 12px;
  color: var(--stone);
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .search-wrapper.active .search-input-container {
    width: 220px;
  }
  .search-results-dropdown {
    width: 260px;
  }
}

@media (max-width: 400px) {
  .search-wrapper.active .search-input-container {
    width: 180px;
  }
  .search-results-dropdown {
    width: 220px;
  }
}
/* ============================================================
   VARIANT COLOR & SIZE SWATCH STYLING (PRODUCT DETAILS)
   ============================================================ */
.color-options, .size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.color-btn, .size-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 44px;
  text-align: center;
}

.color-btn:hover, .size-btn:hover:not(:disabled) {
  border-color: var(--black);
}

.color-btn.active, .size-btn.active {
  background: var(--black);
  color: var(--ivory);
  border-color: var(--black);
}

/* Disabled Out-of-Stock Size (Diagonal Line like attached example) */
.size-btn.out-of-stock, .size-btn:disabled {
  background: #F5F3EE;
  color: #A09D96;
  border-color: #D0CFC9;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.size-btn.out-of-stock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 1px;
  background: #77736C;
  transform: rotate(-25deg);
}
/* Make the hidden attribute win over display rules (e.g. .help-option-item is display:flex). */
[hidden]{ display:none !important; }

/* ============================================================
   COLLECTIONS MENU (desktop dropdown + mobile list)
   ============================================================ */
.nav-collections{ position:static; }
.nav-collections-trigger{ display:inline-block; padding:28px 0; }
.nav-collections-panel{
  display:none;
  position:fixed; left:0; right:0; top:calc(var(--header-h) - 4px);
  background:var(--ivory); color:var(--black);
  border-bottom:1px solid var(--border);
  padding:38px max(40px, calc((100vw - 1320px) / 2)) 38px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:40px;
  text-transform:none; letter-spacing:0; font-weight:400; font-size:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.nav-collections:hover .nav-collections-panel,
.nav-collections:focus-within .nav-collections-panel{ display:grid; }
.nav-collections-panel:empty{ display:none !important; }
.nav-col-title{
  display:block; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.nav-collections-panel ul{ list-style:none; }
.nav-collections-panel li{ margin-bottom:10px; }
.nav-collections-panel .nav-sub{
  margin:8px 0 4px 14px;
  padding-left:12px;
  border-left:1px solid var(--border);
}
.nav-collections-panel .nav-sub li{ margin-bottom:6px; }

/* Keep style options (e.g. Solid / Printed) clearly separated vertically.
   This prevents multiple style choices from appearing as one continuous row. */
.nav-styles{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:6px;
  margin:8px 0 2px 10px;
  padding-left:10px;
  border-left:1px solid var(--border);
  font-size:12px;
  color:var(--stone);
}
.nav-styles a{
  display:block;
  line-height:1.5;
  padding:2px 0;
}
.nav-styles a:hover{ color:var(--black); }
.nav-collections-panel .is-soon{ color:var(--stone); }
.nav-collections-panel em, .mobile-collections em{
  font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  margin-left:6px; padding:2px 6px; border:1px solid var(--border); border-radius:10px;
}

.mobile-collections{ display:flex; flex-direction:column; gap:14px; }
.mobile-collections summary{
  font-size:20px; font-family:var(--font-editorial); font-style:italic; cursor:pointer; list-style:none;
}
.mobile-collections summary::-webkit-details-marker{ display:none; }
.mobile-collections summary::after{ content:' +'; color:var(--stone); }
.mobile-collections details[open] summary::after{ content:' –'; }
.mobile-collections ul{ list-style:none; margin:12px 0 4px 6px; display:flex; flex-direction:column; gap:10px; }
.mobile-collections ul a{ font-size:16px; font-style:normal; font-family:var(--font-primary); }
.mobile-collections .nav-sub{ margin:8px 0 0 12px; gap:8px; }
.mobile-collections .nav-styles{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin:6px 0 2px;
  padding-left:12px;
  border-left:1px solid var(--border);
}
.mobile-collections .nav-styles a{
  display:block;
  line-height:1.5;
}
.mobile-collections .is-soon{ color:var(--stone); }

/* ============================================================
   CONFIRMATION PAGE STYLES
   ============================================================ */
.confirm-page { 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 40px; 
}

.confirm-page .eyebrow { 
  margin-bottom: 18px; 
}

.confirm-page h1 { 
  font-family: var(--font-editorial); 
  font-size: clamp(30px, 5vw, 48px); 
  font-weight: 500; 
  margin-bottom: 20px; 
}

.order-num { 
  font-size: 12px; 
  letter-spacing: .1em; 
  text-transform: uppercase; 
  color: var(--stone); 
  margin-bottom: 26px; 
}

.confirm-page p { 
  max-width: 380px; 
  color: var(--stone); 
  font-size: 14px; 
  margin-bottom: 24px; 
  line-height: 1.7; 
}

/* Email Notice Highlight Box */
.email-notice {
  max-width: 420px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--black);
  text-align: center;
}

.email-notice strong {
  color: var(--black);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}