/* ====================================================
   Sibling Studio - Extended Stylesheet
   Components added on top of style.css
   ==================================================== */

/* ---------- Hero (extended) ---------- */
.hero-eyebrow{
  display:inline-block;background:rgba(217,79,122,.9);color:#fff;
  font-size:11px;letter-spacing:2px;padding:5px 12px;border-radius:20px;
  margin-bottom:14px;font-weight:700;
}
.hero-cta-row{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}
.btn-outline-light{
  background:transparent;border:2px solid #fff;color:#fff;
}
.btn-outline-light:hover{background:#fff;color:#1a1a1a;}
.btn-large{padding:18px 32px;font-size:15px;}
.btn-full{display:block;width:100%;text-align:center;}

/* ---------- Announcement Strip ---------- */
.announcement-strip{
  background:#f6efe7;padding:14px 0;border-bottom:1px solid #ede1d1;
}
.announcement-strip .container{
  display:flex;justify-content:center;gap:40px;flex-wrap:wrap;
  font-size:13px;color:#6f5a45;letter-spacing:.3px;
}
.announcement-strip i{color:var(--theme-primary, #d94f7a);margin-right:6px;}

/* ---------- Spotlight cards (homepage) ---------- */
.spotlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.spotlight-card{
  position:relative;display:block;overflow:hidden;border-radius:8px;
  aspect-ratio:16/9;
}
.spotlight-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
.spotlight-card:hover img{transform:scale(1.04);}
.spotlight-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px;color:#fff;background:linear-gradient(transparent 40%,rgba(0,0,0,.55));
}
.spotlight-overlay .eyebrow{
  font-size:11px;letter-spacing:2px;font-weight:700;opacity:.9;margin-bottom:6px;
}
.spotlight-overlay h3{font-family:Georgia,serif;font-size:24px;margin-bottom:8px;}
.spotlight-sub{font-size:13px;opacity:.9;margin-bottom:12px;font-weight:400;}
.btn-inline{
  display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid #fff;
  padding-bottom:2px;width:fit-content;
}
/* Full-width variant used for the single homepage clearance banner —
   same overlay treatment as the two-up spotlight cards, just shorter
   and wider since it spans the whole row instead of half of it. */
.spotlight-card-wide{grid-column:1/-1;aspect-ratio:auto;height:340px;}
.spotlight-card-wide .spotlight-overlay{padding:40px;}
.spotlight-card-wide .spotlight-overlay h3{font-size:34px;}
.spotlight-card-wide .spotlight-sub{font-size:15px;}

/* ---------- Promo Banner ---------- */
.promo-banner{padding:0;}
.promo-banner .container{
  position:relative;border-radius:10px;overflow:hidden;
}
.promo-banner img{width:100%;height:340px;object-fit:cover;}
.promo-content{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-left:8%;color:#fff;max-width:520px;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 100%);
}
.promo-content .eyebrow{
  font-size:12px;letter-spacing:2px;font-weight:700;margin-bottom:8px;opacity:.9;
}
.promo-content h2{font-family:Georgia,serif;font-size:42px;margin-bottom:10px;}
.promo-content p{margin-bottom:20px;font-size:16px;}

/* ---------- Anniversary strip ---------- */
.anniversary-strip{background:#f6efe7;}
.anniversary-strip .container{
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center;text-align:left;
}
.anniv-logo{max-width:160px;}
.anniversary-strip h2{font-family:Georgia,serif;font-size:30px;margin-bottom:10px;}
.anniversary-strip p{margin-bottom:18px;color:#555;max-width:480px;}

/* ---------- Instagram strip ---------- */
.ig-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
}
.ig-grid img{
  aspect-ratio:1;object-fit:cover;border-radius:6px;
  transition:opacity .2s;
}
.ig-grid a:hover img{opacity:.85;}

/* ---------- Footer extras ---------- */
.footer-payments{
  display:flex;align-items:center;gap:14px;justify-content:center;
  padding:20px 0;border-top:1px solid var(--footer-border, #2a2a2a);color:var(--footer-text, #888);font-size:13px;
  flex-wrap:wrap;
}
.footer-payments i{font-size:30px;color:var(--footer-text, #aaa);}
.footer-payments i:hover{color:var(--footer-heading, #fff);}

/* ---------- Collection page ---------- */
.collection-banner{
  position:relative;width:100%;height:420px;overflow:hidden;
  background:#f6efe7;
  display:block;
  padding:0; /* override global section padding so image fills full height */
}
.collection-banner img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  background:#f6efe7;
  max-width:none; /* override global img max-width:100% so image always fills */
}
.collection-banner-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;color:#fff;
  background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.42));
  padding:0 20px;
}
.collection-banner-overlay .eyebrow{
  font-size:12px;letter-spacing:3px;font-weight:700;margin-bottom:10px;opacity:.95;
}
.collection-banner-overlay h1{
  font-family:Georgia,serif;font-size:52px;margin-bottom:10px;
}
.collection-banner-overlay p{max-width:600px;font-size:15px;}

.collection-layout{
  display:grid;grid-template-columns:240px 1fr;gap:40px;
  padding-bottom:60px;
  align-items:start;
}
.filter-sidebar{padding-right:10px;position:sticky;top:20px;align-self:start;}
/* Reduce top gap on collection/shop pages */
section.container{padding-top:30px;padding-bottom:0;}
.filter-title{
  font-size:13px;text-transform:uppercase;letter-spacing:2px;font-weight:700;
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #eee;
}
.filter-group{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #f1f1f1;}
.filter-group h5{
  font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-weight:700;
}
.filter-list{display:flex;flex-direction:column;gap:8px;}
.filter-list label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:#444;cursor:pointer;
}
.filter-list label input{margin-right:8px;}
.filter-list label span{color:#999;font-size:12px;}

.size-chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  font-size:12px;padding:6px 10px;border:1px solid #ddd;border-radius:4px;
  background:#fff;cursor:pointer;transition:all .2s;
}
.chip:hover,.chip.active{background:#1a1a1a;border-color:#1a1a1a;color:#fff;}

.color-chips{display:flex;flex-wrap:wrap;gap:8px;}
.color-chip{
  width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:all .2s;
}
.color-chip:hover,.color-chip.active{border-color:var(--theme-primary, #d94f7a);}

.collection-content .toolbar{
  margin-bottom:24px;padding:14px 0;
}
.toolbar .result-count{font-size:13px;color:#666;}
.toolbar-right{display:flex;align-items:center;gap:10px;font-size:13px;color:#666;}

/* ---------- Pagination ---------- */
.pagination{
  display:flex;justify-content:center;gap:8px;margin:40px 0 60px;
}
.page-link{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #ddd;border-radius:4px;font-size:13px;color:#555;
  transition:all .2s;
}
.page-link:hover,.page-link.active{
  background:#1a1a1a;border-color:#1a1a1a;color:#fff;
}

/* ---------- Product detail (extended) ---------- */
.product-eyebrow{
  display:inline-block;font-size:11px;letter-spacing:2px;color:#888;margin-bottom:8px;
  font-weight:600;
}
.rating-row{margin-bottom:14px;display:flex;gap:8px;align-items:center;}
.rating-row .stars{color:#e3c14a;font-size:14px;letter-spacing:1px;}
.review-count{color:#777;font-size:13px;}
.opt-block{margin-bottom:20px;}
.opt-label{font-size:13px;font-weight:700;display:block;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;}
.size-guide-link{font-size:12px;color:var(--theme-primary, #d94f7a);text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px;}
.size-option.sold-out{
  opacity:.4;position:relative;cursor:not-allowed;
}
.size-option.sold-out::after{
  content:'';position:absolute;top:50%;left:8%;right:8%;height:1px;background:#999;transform:rotate(-12deg);
}

.secondary-actions{display:flex;gap:20px;margin-bottom:24px;}
.link-btn{
  background:none;border:none;color:#555;cursor:pointer;font-size:13px;
  padding:0;display:inline-flex;gap:6px;align-items:center;
}
.link-btn:hover{color:var(--theme-primary, #d94f7a);}

.benefits-list{
  background:#f6efe7;border-radius:6px;padding:16px 18px;margin-bottom:24px;
  font-size:13px;color:#5a4a3a;
}
.benefits-list div{margin-bottom:8px;}
.benefits-list div:last-child{margin-bottom:0;}
.benefits-list i{margin-right:8px;color:var(--theme-primary, #d94f7a);width:18px;text-align:center;}

.product-accordion{
  border-top:1px solid #eee;padding:14px 0;
}
.product-accordion summary{
  font-weight:700;cursor:pointer;font-size:14px;letter-spacing:.5px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;
}
.product-accordion summary::after{
  content:'+';font-size:18px;color:#999;
}
.product-accordion[open] summary::after{content:'−';}
.product-accordion p,.product-accordion ul{
  font-size:13px;color:#555;line-height:1.7;padding-top:10px;
}
.product-accordion ul{padding-left:18px;list-style:disc;}

/* ---------- Reviews ---------- */
.reviews-section{padding:50px 0;}
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.review-card{
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  background:#fafafa;border-radius:6px;padding:20px;
}
.review-card .stars{color:#e3c14a;margin-bottom:8px;}
.review-card h4{margin-bottom:8px;font-size:15px;}
.review-card p{color:#555;font-size:14px;margin-bottom:10px;line-height:1.6;}
.review-card .reviewer{font-size:12px;color:#888;}

/* ---------- Cart (extras) ---------- */
.cart-extras{margin-top:30px;}
.promo-form{display:flex;gap:8px;margin-top:10px;}
.promo-form input{
  flex:1;padding:10px 14px;border:1px solid #ddd;border-radius:4px;font-size:14px;
}
.cart-extras textarea{
  width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;
  margin-top:10px;font-family:inherit;
}
.link-center{display:block;text-align:center;margin-top:10px;color:#777;font-size:13px;}
.cart-payments{
  display:flex;gap:10px;justify-content:center;margin-top:18px;font-size:24px;color:#aaa;
}

/* ---------- Checkout ---------- */
.checkout-page{padding:40px 0;}
.checkout-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;}
.checkout-step{
  background:#fff;border:1px solid #eee;border-radius:8px;padding:24px;margin-bottom:18px;
}
.checkout-step h3{
  display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:18px;
  font-family:Georgia,serif;
}
.step-num{
  background:var(--theme-primary, #d94f7a);color:#fff;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-grid-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;}
.check-line{
  display:flex;align-items:center;gap:8px;font-size:13px;color:#555;margin:10px 0;
}
.ship-option,.pay-tab{
  display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #ddd;
  border-radius:6px;margin-bottom:8px;cursor:pointer;font-size:14px;
}
.ship-option:hover,.pay-tab:hover{border-color:var(--theme-primary, #d94f7a);}
.ship-name{flex:1;}
.ship-price{font-weight:700;color:#1a1a1a;}
.pay-tabs{display:flex;flex-direction:column;margin-bottom:18px;}
.checkout-secure{
  text-align:center;font-size:12px;color:#777;margin-top:14px;
}
.checkout-summary{
  background:#fafafa;border-radius:8px;padding:24px;height:fit-content;position:sticky;top:90px;
}
.checkout-summary h3{margin-bottom:18px;font-family:Georgia,serif;}
.checkout-item{
  display:grid;grid-template-columns:60px 1fr auto;gap:12px;padding:10px 0;
  border-bottom:1px solid #eee;align-items:center;font-size:13px;
}
.checkout-item img{width:60px;height:60px;object-fit:cover;border-radius:4px;}
.checkout-item h5{font-size:13px;margin-bottom:2px;}
.checkout-item p{font-size:12px;color:#888;}
.checkout-summary .row{
  display:flex;justify-content:space-between;padding:6px 0;font-size:14px;
}
.checkout-summary .row.total{
  border-top:1px solid #ddd;margin-top:8px;padding-top:12px;font-weight:700;font-size:16px;
}

/* ---------- Thankyou / Order Confirmation ---------- */
.thankyou-page{padding:60px 0;}
.thankyou-box{
  max-width:640px;margin:0 auto;background:#fafafa;border-radius:10px;
  padding:40px 30px;text-align:center;
}
.thankyou-icon{font-size:56px;color:#5cb85c;margin-bottom:14px;}
.thankyou-box h1{font-family:Georgia,serif;font-size:30px;margin-bottom:14px;}
.thankyou-box p{color:#555;margin-bottom:8px;}
.order-meta{
  margin:24px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;text-align:left;
  background:#fff;border-radius:8px;padding:20px;
}
.order-meta div{display:flex;flex-direction:column;}
.order-meta span{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;}
.thankyou-actions{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.thankyou-extra{max-width:840px;margin:50px auto;}
.thankyou-extra h3{
  text-align:center;font-family:Georgia,serif;font-size:24px;margin-bottom:24px;
}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.step-card{
  background:#fff;border:1px solid #eee;border-radius:8px;padding:24px;text-align:center;
}
.step-card i{font-size:32px;color:var(--theme-primary, #d94f7a);margin-bottom:10px;}
.step-card h5{margin-bottom:6px;font-size:15px;}
.step-card p{color:#666;font-size:13px;}

/* ---------- Account / Auth ---------- */
.account-page{padding:40px 0;}
/* FIX: `section.container{padding-bottom:0}` above (used to tighten the
   top of collection/shop pages) is MORE specific (element+class) than a
   plain `.account-page` class selector, so it was silently overriding
   this section's bottom padding back to 0 on every account/login/
   register/forgot-password page. That's what glued the auth cards to
   the footer with zero breathing room. Re-declaring it with matching
   element+class specificity (`section.container.account-page`) restores
   the intended bottom padding without touching the shared rule above. */
section.container.account-page{padding-bottom:40px;}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.auth-card{
  background:#fff;border:1px solid #eee;border-radius:10px;padding:30px;
}
.auth-card h2{font-family:Georgia,serif;font-size:24px;margin-bottom:6px;}
.auth-sub{color:#666;font-size:14px;margin-bottom:20px;}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0 18px;}
.link{color:var(--theme-primary, #d94f7a);font-size:13px;}
.link:hover{text-decoration:underline;}
.auth-foot{text-align:center;margin-top:18px;color:#666;font-size:14px;}
.social-login{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.social-login .btn{display:flex;align-items:center;justify-content:center;gap:8px;}

.auth-single{padding:50px 20px 90px;max-width:480px;}
/* Same specificity fix as .account-page above: restores the intended
   90px bottom padding on the standalone Sign In / Register / Forgot
   Password pages, which was being zeroed out by section.container. */
section.container.auth-single{padding-bottom:90px;}

/* ---------- Account layout (logged-in) ---------- */
.acc-layout{
  display:grid;grid-template-columns:240px 1fr;gap:40px;padding:40px 20px 60px;
}
/* CSS Grid items default to min-width:auto, so wide/non-wrapping content
   inside .acc-content (an old carousel row, a long table, etc.) could
   force this track past its 1fr share and stretch the whole page wider
   than the viewport. min-width:0 lets it shrink to its track and clip/
   wrap its own content instead. */
.acc-content{min-width:0;}
.account-sidebar{
  background:#fafafa;border-radius:10px;padding:20px;height:fit-content;
}
.acc-user{
  display:flex;gap:12px;align-items:center;padding-bottom:18px;border-bottom:1px solid #eee;
  margin-bottom:14px;
}
.acc-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--theme-primary, #d94f7a);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
  position:relative;overflow:hidden;flex-shrink:0;
}
.acc-avatar img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;display:block;
}
.acc-user strong{display:block;font-size:14px;}
.acc-user span{font-size:12px;color:#777;}
.acc-nav{display:flex;flex-direction:column;gap:2px;}
.acc-nav-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;
  font-size:14px;color:#444;transition:all .2s;
}
.acc-nav-link i{width:18px;text-align:center;color:#888;}
.acc-nav-link:hover{background:#fff;color:var(--theme-primary, #d94f7a);}
.acc-nav-link.active{background:#1a1a1a;color:#fff;}
.acc-nav-link.active i{color:#fff;}

.acc-content h2{font-family:Georgia,serif;font-size:26px;margin-bottom:18px;}
.acc-welcome{color:#666;margin-bottom:24px;}
.acc-sub-title{margin:30px 0 14px;font-family:Georgia,serif;font-size:18px;}
.acc-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.muted{color:#888;font-weight:400;font-size:15px;}

.dash-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;
}
.dash-card{
  background:#fff;border:1px solid #eee;border-radius:8px;padding:18px;text-align:center;
}
.dash-card i{font-size:22px;color:var(--theme-primary, #d94f7a);margin-bottom:8px;display:block;}
.dash-card strong{font-size:22px;display:block;}
.dash-card span{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px;}

.orders-table-wrap{overflow-x:auto;}
.orders-table{width:100%;border-collapse:collapse;font-size:14px;}
.orders-table th,.orders-table td{
  padding:12px;border-bottom:1px solid #eee;text-align:left;
}
.orders-table th{background:#fafafa;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#777;}
.badge{
  display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.badge-success{background:#e6f5e9;color:#2e7d32;}
.badge-info{background:#e4ecfa;color:#2956b2;}
.badge-warning{background:#fff4d9;color:#a17400;}
.badge-danger{background:#fde0e0;color:#c0392b;}
.badge-default{background:#eee;color:#444;}

.address-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;
}
.address-card{
  background:#fafafa;border-radius:8px;padding:18px;font-size:14px;
}
.address-card strong{display:block;margin:8px 0 6px;}
.address-card p{color:#555;margin:0 0 6px;line-height:1.5;}
.card-actions{display:flex;gap:10px;margin-top:10px;}
.link-danger{color:#c0392b;}

.settings-form h3{
  margin:20px 0 12px;font-family:Georgia,serif;font-size:18px;
  padding-bottom:8px;border-bottom:1px solid #eee;
}
.settings-form .btn{margin-top:20px;}

/* ---------- Track Order ---------- */
.track-form{margin-bottom:30px;}
.tracking-steps{display:flex;flex-direction:column;gap:14px;}
.t-step{
  display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;
  padding:14px;border:1px solid #eee;border-radius:8px;font-size:14px;
}
.t-step i{color:#ccc;font-size:20px;}
.t-step.done{background:#fafafa;}
.t-step.done i{color:#5cb85c;}
.t-step.current{border-color:var(--theme-primary, #d94f7a);}
.t-step.current i{color:var(--theme-primary, #d94f7a);}
.t-step small{color:#888;}

/* ---------- Tables ---------- */
.info-table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:14px;}
.info-table th,.info-table td{
  padding:12px;border-bottom:1px solid #eee;text-align:left;
}
.info-table th{background:#fafafa;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:1px;color:#666;}

/* ---------- Store locator ---------- */
.store-search{
  display:flex;gap:8px;max-width:680px;margin:0 auto 30px;flex-wrap:wrap;
}
.store-search input,.store-search select{
  flex:1;min-width:160px;padding:12px 14px;border:1px solid #ddd;border-radius:4px;font-size:14px;
}
.stores-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
  padding-bottom:60px;
}
.store-card{
  background:#fafafa;border-radius:8px;padding:18px;font-size:14px;
}
.store-card h4{margin-bottom:8px;font-family:Georgia,serif;font-size:17px;}
.store-card p{margin-bottom:6px;color:#555;font-size:13px;}
.store-card i{color:var(--theme-primary, #d94f7a);margin-right:6px;}

/* ---------- Payment methods grid ---------- */
.payment-methods{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;
  margin:14px 0 28px;
}
.pm-card{
  background:#fafafa;border:1px solid #eee;border-radius:6px;padding:14px;text-align:center;
}
.pm-card i{font-size:30px;display:block;margin-bottom:6px;color:#444;}
.pm-card span{font-size:12px;color:#666;}

/* ---------- Gift cards ---------- */
.gift-card-page{padding:40px 0;}
.gift-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
.gift-card-art{
  background:linear-gradient(135deg,var(--theme-primary, #d94f7a),#9b3d7a);border-radius:14px;
  aspect-ratio:1.6;display:flex;flex-direction:column;justify-content:space-between;
  padding:30px;color:#fff;position:sticky;top:90px;
}
.gift-card-art img{width:60px;}
.gc-amount{font-family:Georgia,serif;font-size:60px;font-weight:700;align-self:flex-end;}
.gc-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.gift-faq{margin-top:50px;}
.gift-faq h3{font-family:Georgia,serif;font-size:20px;margin-bottom:10px;}
.gift-faq ul{list-style:disc;margin-left:18px;}
.gift-faq li{margin-bottom:6px;color:#555;}

/* ---------- Refer a friend ---------- */
.refer-hero{
  background:#f6efe7;border-radius:10px;padding:24px;margin-bottom:20px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.refer-hero img{max-width:90px;}
.refer-hero h2{margin:0 0 8px;}
.referral-box{display:flex;gap:8px;margin:0 0 24px;}
.referral-box input{
  flex:1;padding:12px 14px;border:1px solid #ddd;border-radius:4px;font-size:14px;background:#fafafa;
}

/* ---------- Blog ---------- */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:20px 0 30px;
}
.blog-card{
  background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.blog-card img{aspect-ratio:4/3;width:100%;object-fit:cover;}
.blog-info{padding:18px;}
.blog-date{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#888;}
.blog-info h3{font-family:Georgia,serif;font-size:18px;margin:8px 0;}
.blog-info p{color:#666;font-size:14px;line-height:1.6;margin-bottom:10px;}
.blog-link{color:var(--theme-primary, #d94f7a);font-size:13px;font-weight:700;letter-spacing:.5px;}

.blog-post .blog-meta{color:#888;font-size:13px;margin-bottom:20px;}
.blog-post blockquote{
  border-left:3px solid var(--theme-primary, #d94f7a);padding:8px 16px;color:#444;font-style:italic;
  margin:18px 0;font-size:16px;
}
.post-share{
  display:flex;gap:14px;align-items:center;padding-top:24px;border-top:1px solid #eee;
  margin-top:30px;
}
.post-share span{font-size:13px;color:#666;}
.post-share a{
  width:34px;height:34px;border-radius:50%;background:#f1f1f1;
  display:inline-flex;align-items:center;justify-content:center;color:#444;
}
.post-share a:hover{background:var(--theme-primary, #d94f7a);color:#fff;}

/* ---------- Search ---------- */
.search-form{
  display:flex;gap:8px;max-width:640px;margin:30px auto;
}
.search-form input{
  flex:1;padding:14px 18px;border:1px solid #ddd;border-radius:4px;font-size:15px;
}
.search-meta{
  text-align:center;color:#666;margin-bottom:24px;font-size:14px;
}

/* ---------- 404 ---------- */
.not-found-page{padding:100px 0;text-align:center;}
.big-404{
  font-family:Georgia,serif;font-size:120px;color:var(--theme-primary, #d94f7a);font-weight:700;line-height:1;
}
.not-found-page h1{font-family:Georgia,serif;font-size:32px;margin:10px 0 14px;}
.not-found-page p{color:#666;}

/* ---------- Instagram strip section adjust ---------- */
.ig-strip{padding-top:20px;padding-bottom:40px;}

/* ---------- Responsive ---------- */
@media (max-width:992px){
  .collection-layout,.acc-layout,.checkout-grid,.account-grid,.gift-card-grid{
    grid-template-columns:1fr;
  }
  .filter-sidebar,.account-sidebar,.checkout-summary,.gift-card-art{
    position:static;
  }
  .reviews-grid,.steps-grid,.blog-grid,.ig-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .dash-cards{grid-template-columns:repeat(2,1fr);}
  .spotlight-grid{grid-template-columns:1fr;}
  .form-grid-2,.form-grid-3{grid-template-columns:1fr;}
  .order-meta{grid-template-columns:1fr;}
  .promo-content h2{font-size:28px;}
  .collection-banner-overlay h1{font-size:32px;}
}
@media (max-width:768px){
  .announcement-strip .container{gap:16px;font-size:12px;}
  .ig-grid{grid-template-columns:repeat(3,1fr);}
  .blog-grid,.reviews-grid,.steps-grid{grid-template-columns:1fr;}
  .promo-banner img{height:240px;}
  .promo-content{padding-left:20px;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.15));}
  .anniversary-strip .container{flex-direction:column;text-align:center;}
}
@media (max-width:480px){
  .dash-cards{grid-template-columns:1fr 1fr;}
  .order-meta{grid-template-columns:1fr;}
  .big-404{font-size:80px;}
  .collection-banner{height:280px;}
  .collection-banner-overlay h1{font-size:28px;}
}



/* ====================================================
   NAVBAR — Full redesign matching siblingstudio.com exactly
   ==================================================== */

/* --- Reset old header styles --- */
.header-inner { display:none !important; }
.main-nav     { display:none !important; }

/* ====================================================
   ANNOUNCEMENT BAR (top of header)
   ==================================================== */
.hdr-announcement {
  background:#1a1a1a;
  color:#fff;
  font-size:12px;
  letter-spacing:.4px;
  text-align:center;
  padding:9px 50px;
  position:relative;
  overflow:hidden;
  min-height:36px;
}
.hdr-announcement a { color:var(--theme-primary-light, #ffc7d9); text-decoration:underline; }
.ann-slides { position:relative; }
.ann-slide {
  display:none;
  animation:annFadeIn .5s ease;
}
.ann-slide.active { display:block; }
@keyframes annFadeIn {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
.ann-close {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#aaa; font-size:13px; cursor:pointer;
  line-height:1; padding:4px 6px;
  transition:color .2s;
}
.ann-close:hover { color:#fff; }

/* ====================================================
   TOP ROW: logo | search | icons
   ==================================================== */
.hdr-top {
  background:#fff;
  border-bottom:1px solid #ebebeb;
  padding:12px 0;
}
.hdr-top-inner {
  max-width:1400px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:24px;
}

/* ---- Logo ---- */
.logo {
  font-family:'Georgia',serif;
  font-size:24px; font-weight:700;
  letter-spacing:1.5px; color:#1a1a1a;
  white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  text-decoration:none;
}
.logo:hover { color:#fff; }
.logo-text { display:flex; align-items:baseline; gap:0; color:var(--theme-primary, #d94f7a); }
.logo-pink { color:var(--theme-primary, #d94f7a); }
.logo-40 {
  background:#1a1a1a; color:#fff;
  font-size:11px; font-weight:800;
  padding:2px 7px; border-radius:4px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  letter-spacing:.5px; line-height:1.6;
}

/* ---- Search bar ---- */
.hdr-search {
  flex:1; max-width:none;
  position:relative; display:flex; align-items:center;
}
.hdr-search-submit {
  position:absolute; left:14px;
  background:none; border:none; padding:0;
  color:#888; font-size:14px; cursor:pointer;
  display:flex; align-items:center;
  transition:color .2s;
}
.hdr-search-submit:hover { color:var(--theme-primary, #d94f7a); }
.hdr-search input {
  width:100%;
  padding:10px 40px 10px 42px;
  border:1.5px solid #e0e0e0;
  border-radius:26px;
  font-size:13.5px; color:#333;
  outline:none; background:#f8f8f8;
  font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.hdr-search input::placeholder { color:#aaa; }
.hdr-search input:focus {
  border-color:var(--theme-primary, #d94f7a);
  box-shadow:0 0 0 3px rgba(217,79,122,.09);
  background:#fff;
}
.hdr-search-clear {
  position:absolute; right:14px;
  background:none; border:none; padding:0;
  color:#bbb; font-size:14px; cursor:pointer;
  display:none; align-items:center;
  transition:color .2s; line-height:1;
}
.hdr-search-clear:hover { color:#555; }

/* ---- Right icon group ---- */
.hdr-icons {
  display:flex; align-items:center; gap:6px;
  flex-shrink:0; white-space:nowrap;
  margin-left:auto;
}

/* Base icon button */
.hdr-icon-btn {
  display:inline-flex; align-items:center; gap:5px;
  color:#1a1a1a; cursor:pointer; position:relative;
  border:none; background:none; font-family:inherit;
  padding:6px 8px; border-radius:6px;
  transition:color .2s, background .15s;
  text-decoration:none; font-size:13px;
}
.hdr-icon-btn:hover { color:var(--theme-primary, #d94f7a); background:rgba(217,79,122,.05); }
.hdr-icon-btn i.fa-solid,
.hdr-icon-btn i.fa-regular { font-size:19px; }
.hdr-chevron { font-size:10px !important; color:#888; transition:transform .2s; }

/* ---- Language switcher ---- */
.hdr-lang-wrap { position:relative; }
.hdr-lang-btn { gap:4px; }
.hdr-lang-btn i.fa-globe { font-size:17px !important; }
.lang-label { font-size:12px; font-weight:700; letter-spacing:.5px; }
.hdr-lang-btn[aria-expanded="true"] .hdr-chevron { transform:rotate(180deg); }

.hdr-lang-drop {
  display:none;
  position:absolute; top:calc(100% + 8px); right:0;
  background:#fff; border:1px solid #eee;
  border-radius:10px; min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  z-index:600; overflow:hidden;
  padding:6px;
}
.hdr-lang-drop.open { display:block; animation:dropFadeIn .18s ease; }

.lang-opt {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px;
  background:none; border:none; border-radius:6px;
  font-size:13px; font-family:inherit;
  color:#333; cursor:pointer; text-align:left;
  transition:background .15s, color .15s;
}
.lang-opt:hover { background:#f5f5f5; color:#1a1a1a; }
.lang-opt.active { background:#1a1a1a; color:#fff; font-weight:700; }
.lang-opt span { font-size:18px; }

/* ---- Separator ---- */
.hdr-sep { color:#ddd; font-size:18px; margin:0 2px; user-select:none; }

/* ---- Region / Currency switcher ---- */
.hdr-region-wrap { position:relative; }
.hdr-region-btn { gap:5px; max-width:200px; }
.hdr-region-btn .region-flag-current { font-size:18px; }
.region-label { font-size:11.5px; font-weight:600; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.hdr-region-btn[aria-expanded="true"] .hdr-chevron { transform:rotate(180deg); }

.hdr-region-drop {
  display:none;
  position:absolute; top:calc(100% + 8px); right:0;
  background:#fff; border:1px solid #eee;
  border-radius:12px; min-width:260px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  z-index:600; overflow:hidden;
}
.hdr-region-drop.open { display:block; animation:dropFadeIn .18s ease; }

.region-drop-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px 10px;
  font-size:13px; font-weight:700; color:#555;
  border-bottom:1px solid #f0f0f0;
  text-transform:uppercase; letter-spacing:.8px;
}
.region-drop-close {
  background:none; border:none; color:#aaa; font-size:14px;
  cursor:pointer; padding:2px 6px; border-radius:4px;
  transition:color .2s, background .15s;
}
.region-drop-close:hover { color:#555; background:#f5f5f5; }

.region-opts-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4px; padding:8px;
}
.region-opt {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:10px 12px; border-radius:8px;
  background:none; border:1px solid transparent;
  font-family:inherit; cursor:pointer; text-align:left;
  transition:background .15s, border-color .15s;
}
.region-opt:hover { background:#f8f8f8; border-color:#eee; }
.region-opt.active { background:#1a1a1a; border-color:#1a1a1a; }
.region-opt.active .region-name,
.region-opt.active .region-cur { color:#fff; }
.region-flag { font-size:20px; margin-bottom:2px; }
.region-name { font-size:12px; font-weight:600; color:#333; }
.region-cur  { font-size:11px; color:#888; }

/* ---- Account label ---- */
.hdr-acct-label { font-size:11px; color:#555; }
.hdr-user-name  { font-size:11px; font-weight:700; text-transform:uppercase; color:#1a1a1a; }

/* ---- Wishlist ---- */
.hdr-wish { position:relative; }
.hdr-wish i { font-size:19px !important; }
.wishlist-count {
  position:absolute; top:-2px; right:-4px;
  background:var(--theme-primary, #d94f7a); color:#fff;
  font-size:9.5px; font-weight:800;
  min-width:17px; height:17px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; line-height:1;
  border:2px solid #fff;
}

/* Wishlist remove (X) button on wishlist cards */
.wishlist-remove-btn {
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  background:#fff; border:1px solid #eee;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#666;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:color .15s, background .15s, transform .15s;
  z-index:2;
}
.wishlist-remove-btn:hover { color:#fff; background:var(--theme-primary, #d94f7a); border-color:var(--theme-primary, #d94f7a); transform:scale(1.05); }
#wishlistItems .product-card { position:relative; }

/* ---- Cart ---- */
.hdr-cart { position:relative; }
.hdr-cart i.fa-bag-shopping { font-size:20px !important; }
.cart-count {
  position:absolute; top:-2px; right:-4px;
  background:var(--theme-primary, #d94f7a); color:#fff;
  font-size:9.5px; font-weight:800;
  min-width:17px; height:17px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; line-height:1;
  border:2px solid #fff;
}

/* ---- Burger (hidden on desktop) ---- */
.hdr-burger {
  display:none; font-size:22px; border:none; background:none;
  cursor:pointer; padding:6px; color:#1a1a1a;
  border-radius:6px; transition:background .15s;
}
.hdr-burger:hover { background:#f5f5f5; }

/* ====================================================
   NAVIGATION ROW (sticky)
   ==================================================== */
.hdr-nav {
  background:#fff;
  border-bottom:1px solid #ebebeb;
  position:sticky; top:0; z-index:200;
}
.hdr-nav-inner {
  max-width:1400px; margin:0 auto; padding:0 28px;
  display:flex; align-items:stretch;
}
.nav-list {
  display:flex; align-items:stretch;
  list-style:none; gap:0; padding:0; margin:0;
}
.nav-item { position:static; }
.nav-link {
  display:inline-block;
  padding:13px 11px;
  font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  color:#1a1a1a; white-space:nowrap;
  transition:color .15s;
  border-bottom:3px solid transparent;
  cursor:pointer; text-decoration:none;
}
.nav-link:hover,
.nav-link.nav-active {
  color:#1a1a1a;
  border-bottom-color:#1a1a1a;
}
.nav-link[style*="d94f7a"]:hover,
.nav-link[style*="d94f7a"].nav-active { border-bottom-color:var(--theme-primary, #d94f7a); }
.nav-link[style*="2a7a4f"]:hover,
.nav-link[style*="2a7a4f"].nav-active { border-bottom-color:#2a7a4f; }

/* Mobile-drawer-only elements: hidden on desktop by default, shown
   inside the max-width:900px breakpoint below. */
.mob-nav-search,
.mob-nav-footer,
.mob-nav-chevron { display:none; }

/* Logged-in account nav list only exists for the mobile drawer — it must
   never appear as a second desktop navbar, so it stays hidden here and
   is only switched on inside the max-width:900px drawer query below. */
.nav-list-account { display:none; }

/* ====================================================
   MEGA DROPDOWN  (no-flicker / no-refresh implementation)
   We keep the element in the DOM and toggle visibility +
   opacity instead of display:none/block. This avoids the
   re-layout cycle that was causing the dropdown to look
   like it was "auto-refreshing".
   ==================================================== */
.nav-dropdown {
  position:absolute; left:0; right:0; top:100%;
  background:#fff;
  border-top:2px solid var(--theme-primary, #d94f7a);
  box-shadow:0 16px 50px rgba(0,0,0,.13);
  z-index:300;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* When the nav row has >12 items, .nav-list-wrap becomes a horizontally
   scrolling container (overflow-x:auto), which clips anything nested
   inside it — including this dropdown. JS relocates the panel to <body>
   (adding this class) to escape that clipping, the same escape-hatch
   already used for the account dropdown above. Position becomes fixed
   and full-width; JS sets `top` to sit right under the nav bar. */
.nav-dropdown.detached {
  position:fixed;
  left:0; right:0; top:0;
  z-index:900;
}
/* Invisible bridge above the panel to keep hover continuous between
   the nav-link and the dropdown content. Prevents the mouseleave/
   mouseenter ping-pong that produced the flicker. */
.nav-dropdown::before {
  content:"";
  position:absolute;
  left:0; right:0;
  top:-10px; height:10px;
  background:transparent;
}
.nav-item.drop-open .nav-dropdown,
.nav-dropdown.dd-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.nd-inner {
  max-width:1400px; margin:0 auto;
  padding:32px 40px 36px;
  display:flex; gap:56px; align-items:flex-start;
}

/* Links column */
.nd-links {
  min-width:210px;
  display:flex; flex-direction:column; gap:0;
}
.dd-link {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; font-weight:500; color:#222;
  padding:8px 0; border-bottom:1px solid #f2f2f2;
  transition:color .15s, padding-left .15s;
  text-decoration:none;
}
.dd-link:first-child {
  font-weight:700; font-size:15px;
  padding-bottom:14px; border-bottom:2px solid #e8e8e8;
  margin-bottom:4px;
}
.dd-link:hover { color:var(--theme-primary, #d94f7a); padding-left:4px; }
.dd-link:first-child:hover { padding-left:0; }
.dd-arrow { font-size:15px; color:#bbb; }
.dd-link-active { color:var(--theme-primary, #d94f7a); padding-left:4px; }

/* Image cards */
.nd-cards { display:flex; gap:16px; flex:1; flex-wrap:wrap; }
.dd-card {
  flex:1 1 190px; max-width:220px;
  border-radius:10px; overflow:hidden;
  background:#fafafa;
  transition:box-shadow .25s, transform .25s;
  text-decoration:none; display:block;
}
.dd-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.11); transform:translateY(-2px); }
.dd-card:hover,
.dd-card.dd-card-active {
  box-shadow:0 8px 28px rgba(0,0,0,.11);
  transform:translateY(-2px);
  outline:2px solid var(--theme-primary, #d94f7a);
  outline-offset:2px;
}
.dd-card-img { aspect-ratio:16/10; overflow:hidden; }
.dd-card-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s;
}
.dd-card:hover .dd-card-img img { transform:scale(1.05); }
.dd-card-body { padding:14px 16px 18px; }
.dd-card-label { font-size:14px; font-weight:600; color:#1a1a1a; margin-bottom:5px; }
.dd-card-sub   { font-size:12px; color:#888; margin-bottom:10px; }
.dd-card-cta   {
  font-size:12.5px; font-weight:700; color:#1a1a1a;
  display:inline-flex; align-items:center; gap:4px;
  border-bottom:1.5px solid #ddd; padding-bottom:1px;
  transition:color .15s, border-color .15s;
}
.dd-card:hover .dd-card-cta { color:var(--theme-primary, #d94f7a); border-color:var(--theme-primary, #d94f7a); }

/* ---- Design-matched mega menu overrides ---- */
.nav-dropdown {
  border-top:1px solid #ececec;
  box-shadow:0 18px 42px rgba(0,0,0,.10);
}
.nd-inner.nd-inner-design {
  max-width:1400px;
  margin:0 auto;
  padding:18px 22px 22px;
  display:grid;
  grid-template-columns:minmax(220px, 240px) minmax(220px, 240px) minmax(420px, 1fr);
  gap:18px;
  align-items:start;
}
.nd-inner-design .nd-links {
  min-width:0;
  padding-right:12px;
}
.nd-inner-design .nd-secondary {
  min-height:286px;
  padding-left:18px;
  border-left:1px solid #efefef;
}
.nd-inner-design .nd-secondary.is-empty {
  min-height:286px;
}
.nd-inner-design .dd-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:none;
  font-size:13px;
  font-weight:500;
  color:#1f1f1f;
  transition:color .15s ease, transform .15s ease, font-weight .15s ease;
}
.nd-inner-design .dd-link:first-child {
  margin-bottom:4px;
  padding-top:0;
  padding-bottom:10px;
  border-bottom:none;
  font-size:15px;
  font-weight:700;
}
.nd-inner-design .dd-link:hover,
.nd-inner-design .dd-link.dd-parent-active {
  color:#111;
}
.nd-inner-design .dd-parent.dd-parent-active {
  font-weight:700;
}
.nd-inner-design .dd-parent .dd-arrow {
  color:#8f8f8f;
  font-size:16px;
  flex-shrink:0;
}
.nd-inner-design .dd-parent.dd-parent-active .dd-arrow,
.nd-inner-design .dd-parent:hover .dd-arrow {
  color:#1a1a1a;
}
.dd-submenu {
  display:none;
  flex-direction:column;
  gap:0;
}
.dd-submenu.dd-submenu-open {
  display:flex;
}
.dd-sub-link {
  display:block;
  padding:8px 0;
  font-size:13px;
  color:#5f5f5f;
  text-decoration:none;
  transition:color .15s ease, transform .15s ease;
}
.dd-sub-link:hover {
  color:#1a1a1a;
  transform:translateX(2px);
}
.nd-promo {
  display:block;
  justify-self:end;
  width:min(100%, 480px);
  text-decoration:none;
}
.nd-promo-card {
  display:block;
}
.nd-promo-media {
  border-radius:12px;
  overflow:hidden;
  background:#f5f5f5;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.nd-promo-media img {
  width:100%;
  aspect-ratio:478 / 287;
  object-fit:cover;
  display:block;
}
.nd-promo-body {
  padding-top:10px;
}
.nd-promo-title {
  margin:0;
  font-size:15px;
  font-weight:700;
  color:#111;
}
.nd-promo-sub {
  margin:3px 0 0;
  font-size:13px;
  color:#6c6c6c;
}
.nd-promo-cta {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:#1a1a1a;
}
.nd-promo:hover .nd-promo-cta {
  color:#111;
}

/* Backdrop */
.nav-backdrop {
  position:fixed; inset:0;
  top:auto; /* on desktop, only dim what's below the navbar */
  z-index:199; background:rgba(0,0,0,.3);
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.nav-backdrop.active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .2s ease, visibility 0s linear 0s;
}

/* ====================================================
   DROPDOWN FADE ANIMATION
   ==================================================== */
@keyframes dropFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ====================================================
   QUICK ADD + TOAST + FILTERS
   ==================================================== */
.product-card { position:relative; }
.product-card-inner { display:block; color:inherit; }
.quick-add-btn {
  position:absolute; bottom:56px; left:0; right:0;
  background:#1a1a1a; color:#fff;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  padding:10px 0; opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s, background .2s;
  cursor:pointer; border:none; z-index:5;
}
.product-card:hover .quick-add-btn { opacity:1; transform:translateY(0); }
.quick-add-btn:hover { background:var(--theme-primary, #d94f7a); }

.cart-toast {
  position:fixed; bottom:24px; right:24px; z-index:9999;
  background:#1a1a1a; color:#fff;
  padding:14px 20px; border-radius:10px;
  font-size:14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.2); max-width:380px;
  transform:translateY(80px); opacity:0; pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
}
.cart-toast.show { transform:translateY(0); opacity:1; pointer-events:all; }
.cart-toast a { color:var(--theme-primary-light, #ffc7d9); margin-left:6px; font-weight:700; }
.cart-toast i { font-size:18px; color:var(--theme-primary, #d94f7a); flex-shrink:0; }

/* Filter active states */
.size-chips .chip.active { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.filter-sidebar .color-chip.active { outline:3px solid var(--theme-primary, #d94f7a); outline-offset:2px; }
.filter-list input[type=checkbox] { accent-color:var(--theme-primary, #d94f7a); margin-right:6px; cursor:pointer; }

/* Cart mini controls */
.qty-control.mini { gap:0; }
.qty-control.mini button { width:28px; height:28px; font-size:15px; }
.qty-control.mini input { width:36px; font-size:13px; }
.cart-item-info { flex:1; }
.cart-item-meta { color:#777; font-size:13px; margin:3px 0; }
.cart-qty-row { display:flex; align-items:center; gap:14px; margin-top:8px; }

/* Search page */
.search-page-form {
  display:flex; gap:10px; max-width:520px; margin:0 auto 40px;
}
.search-page-form input {
  flex:1; padding:12px 18px; border:2px solid #eee; border-radius:30px;
  font-size:14px; outline:none; transition:border-color .2s;
}
.search-page-form input:focus { border-color:var(--theme-primary, #d94f7a); }

/* ====================================================
   RESPONSIVE — TABLET (max 900px)
   ==================================================== */
@media (max-width:900px) {
  /* Show burger, hide large elements */
  .hdr-burger { display:inline-flex; }
  .hdr-sep,
  .hdr-lang-wrap,
  .hdr-acct-label { display:none; }
  /* Keep .hdr-region-wrap in the layout (collapsed) rather than display:none,
     so its dropdown — reused by the mobile drawer's country row — can still render. */
  .hdr-region-btn { display:none; }

  /* Keep the header (logo/icons/close-X) visible and pinned above the
     drawer while it's open. */
  .site-header.mob-nav-open {
    position:sticky; top:0; z-index:700;
  }
  /* FIX: .hdr-top (logo/search/icons row) is `position:static` by default,
     so per CSS stacking rules it always paints BEHIND positioned siblings
     like #hdrNav / .nav-backdrop — even though .site-header itself has a
     higher z-index. That caused the top bar to look dim/gray (tinted by
     the drawer's dark backdrop) instead of solid white while the mobile
     drawer is open. Promoting it to a positioned element with a z-index
     above the drawer (650) keeps it crisp white, matching the drawer panel. */
  .site-header.mob-nav-open .hdr-top {
    position:relative;
    z-index:701;
    background:#fff;
  }

  /* Mobile drawer shell covers the viewport, while the actual white panel
     lives inside .hdr-nav-inner. This prevents the dark backdrop from
     sitting on top of the drawer itself and keeps the panel flush to the
     left edge on phones only. */
  .hdr-nav {
    position:fixed;
    inset:0;
    width:100%;
    max-width:none;
    height:100vh;
    height:100dvh; /* FIX: real phones resize the visible viewport as the
      address bar shows/hides, so a plain 100vh can be taller than what's
      actually on screen — that's what pushed/clipped drawer items out of
      view on a real device even though devtools' emulated viewport (fixed,
      no address bar) always rendered it correctly. 100dvh tracks the
      *current* visible viewport; browsers without dvh support simply keep
      the 100vh above. */
    border-bottom:none;
    background:transparent;
    z-index:650;
    pointer-events:none;
    --mobHeaderH: 88px;
  }
  .hdr-nav.mob-open { pointer-events:auto; }
  .hdr-nav-inner {
    position:absolute;
    top:var(--mobHeaderH, 88px);
    left:0;
    margin:0;
    width:min(92vw, 420px);
    height:calc(100vh - var(--mobHeaderH, 88px));
    height:calc(100dvh - var(--mobHeaderH, 88px));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    border:none;
    border-radius:0;
    display:flex;
    flex-direction:column;
    padding:12px 0 calc(28px + env(safe-area-inset-bottom, 0px));
    background:#fff;
    box-shadow:4px 0 32px rgba(0,0,0,.22);
    transform:translateX(-100%);
    transition:transform .42s cubic-bezier(.16,1,.3,1);
    will-change:transform;
    z-index:2;
    pointer-events:auto;
  }
  .hdr-nav.mob-open .hdr-nav-inner { transform:translateX(0); }

  /* Backdrop fades in behind the drawer, never above it. Blocks touch
     scroll from reaching the page behind the drawer. */
  .nav-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.32);
    z-index:1;
    transition:opacity .3s ease;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    touch-action:none;
    overscroll-behavior:contain;
  }
  .nav-backdrop.active {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* ---- Search bar inside the drawer ---- */
  .mob-nav-search {
    display:flex; align-items:center; gap:10px;
    margin:0 22px 16px; padding:12px 16px;
    background:#f6f6f6; border-radius:30px;
    border:1px solid #ececec;
  }
  .mob-nav-search i { color:#999; font-size:14px; }
  .mob-nav-search input {
    flex:1; border:none; background:none; outline:none;
    font-size:13.5px; font-family:inherit; color:#1a1a1a;
  }
  .mob-nav-search input::placeholder { color:#999; }

  .nav-list { flex-direction:column; align-items:stretch; }
  .nav-item { border-bottom:1px solid #f2f2f2; }
  .nav-link {
    padding:15px 22px; font-size:13.5px; border-bottom:none;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }

  /* ---- Drawer content swap: logged-in users see their account/dashboard
     pages instead of the shop category list. Guests keep the full shop
     list exactly as before. Desktop is untouched — .nav-list-account is
     forced off outside this media query above. ---- */
  .hdr-nav.has-account-nav .nav-list-shop { display:none; }
  /* FIX: .nav-list-wrap's base rule (used for the desktop horizontal
     mega-menu slider) is `flex:1; overflow:hidden;`. Inside the mobile
     drawer's fixed-height flex column, that made the guest wrapper get
     stretched/clamped to exactly the remaining space and clip any shop
     links beyond that box with overflow:hidden — instead of letting the
     drawer's own scroll container (.hdr-nav-inner, overflow-y:auto)
     handle it. That is what made scrolling up/down inside the mobile
     drawer not work before login. Sizing the wrapper to its natural
     content height (flex:0 0 auto) and letting content overflow into the
     parent's scroll area fixes it, matching the logged-in drawer below. */
  .hdr-nav .nav-list-wrap { flex:0 0 auto; overflow:visible; }
  /* The shop list's wrapper (.nav-list-wrap) used to be flex:1 so it could
     grow/scroll on the guest drawer. When switched to the account drawer, the
     shop list inside it is hidden but the wrapper itself was still stretching
     to fill the remaining height (being an empty flex:1 box), which shoved
     the whole account menu down and left a big blank gap under the search
     bar. Collapse the wrapper too so the account list sits right below
     the search bar. */
  .hdr-nav.has-account-nav .nav-list-wrap { display:none; }
  .hdr-nav.has-account-nav .nav-list-account { display:flex; flex:0 0 auto; }
  .nav-list-account .nav-link-text { display:flex; align-items:center; gap:12px; }
  .nav-list-account .nav-link-text i { width:16px; text-align:center; color:#999; font-size:14px; transition:color .15s; }
  .nav-list-account .nav-link {
    transition:background .15s, color .15s;
  }
  .nav-list-account .nav-link:hover,
  .nav-list-account .nav-link:active,
  .nav-list-account .nav-item > a:hover,
  .nav-list-account .nav-item > a:active {
    background:#f9f9f9; color:var(--theme-primary, #d94f7a);
  }
  .nav-list-account .nav-link:hover .nav-link-text i,
  .nav-list-account .nav-link:active .nav-link-text i {
    color:var(--theme-primary, #d94f7a);
  }
  .nav-list-account .logout-btn {
    width:100%; background:none; border:none; font:inherit;
    text-align:left; cursor:pointer; color:var(--theme-primary, #d94f7a);
    transition:background .15s;
  }
  .nav-list-account .logout-btn:hover,
  .nav-list-account .logout-btn:active { background:#fdf1f4; }
  .nav-list-account .logout-btn .nav-link-text i { color:var(--theme-primary, #d94f7a); }
  .mob-nav-chevron {
    display:inline-block; font-size:12px; color:#c4c4c4;
    transition:transform .25s ease, color .2s ease;
    flex-shrink:0;
  }
  .nav-item.has-drop.mob-sub-open .mob-nav-chevron {
    transform:rotate(90deg); color:#888;
  }

  .nav-backdrop { top:0; }
  /* On mobile the dropdown is inline below the link, not absolute.
     We use max-height transition instead of opacity to actually collapse the space. */
  .nav-dropdown {
    position:static;
    box-shadow:none;
    border-top:none; border-bottom:1px solid #f2f2f2;
    background:#f9f9f9;
    /* reset desktop fade/transform */
    opacity:1; visibility:visible; transform:none;
    pointer-events:auto;
    /* collapse vertically when closed */
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-item.mob-sub-open .nav-dropdown {
    max-height:1200px;
  }
  .nav-dropdown::before { display:none; }
  .nd-inner,
  .nd-inner.nd-inner-design {
    display:block;
    padding:14px 22px;
    gap:14px;
  }
  .nd-links { min-width:unset; }
  .nd-secondary,
  .nd-promo,
  .nd-cards { display: none !important; }

  /* Backdrop becomes overlay beside the drawer */
  .nav-backdrop { cursor:pointer; }

  /* ---- Footer links block: login/register, customer service,
     find a retailer, country/currency ---- */
  .mob-nav-footer {
    display:block;
    margin-top:14px;
    border-top:1px solid #f2f2f2;
    padding-top:6px;
  }
  .mob-nav-footer-link {
    display:flex; align-items:center; gap:12px;
    width:100%; padding:14px 22px;
    font-size:12.5px; font-weight:600; letter-spacing:.3px;
    color:#333; text-decoration:none;
    background:none; border:none; font-family:inherit;
    text-align:left; cursor:pointer;
    border-bottom:1px solid #f2f2f2;
    transition:background .15s, color .15s;
  }
  .mob-nav-footer-link:last-child { border-bottom:none; }
  .mob-nav-footer-link i { font-size:15px; color:#999; width:16px; text-align:center; flex-shrink:0; }
  .mob-nav-footer-link:hover,
  .mob-nav-footer-link:active { background:#f9f9f9; color:var(--theme-primary, #d94f7a); }
  .mob-nav-footer-link:hover i,
  .mob-nav-footer-link:active i { color:var(--theme-primary, #d94f7a); }
  .mob-nav-region-btn span { flex:1; }

  /* Hide the country/currency (language) row at the bottom of the mobile
     menu — everything else in the drawer footer (Login/Register,
     Customer Service, Find a Retailer) stays exactly as-is. Desktop's
     language/currency dropdown in the header is untouched. */
  .mob-nav-region-btn { display:none !important; }
  /* FIX: "Find a Retailer" is the last link actually visible in the
     drawer (the country/currency button after it is hidden above), but
     `:last-child` still targets that hidden button since display:none
     doesn't remove it from the DOM. That left this link with its normal
     border-bottom and no extra bottom space, so it sat flush against
     the very edge of the scroll area and looked cut off/half-hidden on
     phones with a home-indicator safe area. Explicitly clearing its
     border and adding safe-area bottom padding (regardless of the
     :last-child rule) makes sure it's always fully visible. */
  a.mob-nav-footer-link[href="/stores/"] {
    border-bottom:none;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 12px));
  }

  /* Region dialog reused by the mobile drawer's country row: present it
     as a centered sheet on small screens instead of a corner dropdown. */
  .hdr-region-drop {
    position:fixed; top:auto; bottom:0; left:0; right:0;
    width:100%; max-width:100%; margin:0;
    border-radius:18px 18px 0 0;
    z-index:700;
    max-height:80vh; overflow-y:auto;
  }
  .hdr-region-drop.open { animation:regionSheetUp .28s cubic-bezier(.16,1,.3,1); }

  /* ---- Staggered fade-in for nav rows when the drawer opens ---- */
  .hdr-nav.mob-open .nav-item {
    animation:navRowIn .35s cubic-bezier(.16,1,.3,1) both;
  }
  .hdr-nav.mob-open .nav-item:nth-child(1)  { animation-delay:.03s; }
  .hdr-nav.mob-open .nav-item:nth-child(2)  { animation-delay:.06s; }
  .hdr-nav.mob-open .nav-item:nth-child(3)  { animation-delay:.09s; }
  .hdr-nav.mob-open .nav-item:nth-child(4)  { animation-delay:.12s; }
  .hdr-nav.mob-open .nav-item:nth-child(5)  { animation-delay:.15s; }
  .hdr-nav.mob-open .nav-item:nth-child(6)  { animation-delay:.18s; }
  .hdr-nav.mob-open .nav-item:nth-child(7)  { animation-delay:.21s; }
  .hdr-nav.mob-open .nav-item:nth-child(8)  { animation-delay:.24s; }
  .hdr-nav.mob-open .nav-item:nth-child(9)  { animation-delay:.27s; }
  .hdr-nav.mob-open .nav-item:nth-child(10) { animation-delay:.3s; }
}

@keyframes navRowIn {
  from { opacity:0; transform:translateX(-10px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes regionSheetUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ====================================================
   RESPONSIVE — MOBILE (max 600px)
   ==================================================== */
@media (max-width:600px) {
  .hdr-search { display:none; }
  .hdr-wish { display:none; }
  .hdr-top-inner { gap:14px; padding:0 16px; }
  .hdr-announcement { padding:8px 42px; font-size:11px; }
}

@media (max-width:400px) {
  .logo { font-size:20px; }
  .logo-40 { font-size:10px; }
}

/* ====================================================
   ACCOUNT DASHBOARD — QUICK LINKS GRID
   ==================================================== */
.dash-quick-links { margin-top: 32px; }
.dash-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.dash-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 10px;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .15s;
}
.dash-link-card i {
  font-size: 22px;
  color: var(--theme-primary, #d94f7a);
}
.dash-link-card:hover {
  border-color: var(--theme-primary, #d94f7a);
  background: #fff5f8;
  transform: translateY(-2px);
  color: var(--theme-primary, #d94f7a);
}
@media (max-width: 600px) {
  .dash-link-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Language badge in navbar ---- */
.hdr-lang-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: inherit;
  line-height: 1;
  padding: 1px 2px;
}

/* ---- Language section inside region dropdown ---- */
.region-drop-lang {
  border-top: 1px solid #ececec;
  padding: 14px 18px 12px;
}
.region-drop-lang-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}
.lang-opts {
  display: flex;
  gap: 8px;
}
.lang-opt {
  padding: 5px 14px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #444;
  transition: border-color .15s, background .15s, color .15s;
}
.lang-opt.active {
  border-color: var(--theme-primary, #d94f7a);
  background: #fff5f8;
  color: var(--theme-primary, #d94f7a);
  font-weight: 700;
}
.lang-opt:not(:disabled):hover {
  border-color: var(--theme-primary, #d94f7a);
  color: var(--theme-primary, #d94f7a);
}

/* ---- Navbar account avatar + dropdown ---- */
.hdr-acct-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hdr-acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.hdr-acct-btn:hover {
  background: rgba(0,0,0,.05);
}
.hdr-nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
  line-height: 1;
  text-transform: uppercase;
}
.hdr-acct-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 9990;
  display: none;
  flex-direction: column;
}
.hdr-acct-drop.open {
  display: flex;
}
.hdr-acct-drop-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  border-radius: 7px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.hdr-acct-drop-link:hover {
  background: #f9f0f3;
  color: var(--theme-primary, #d94f7a);
}
.hdr-acct-drop-link.logout-btn {
  color: var(--theme-primary, #d94f7a);
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  padding-top: 12px;
}
/* User info header inside dropdown */
.hdr-acct-drop-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
}
.hdr-acct-panel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme-primary, #d94f7a);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}
.hdr-acct-panel-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hdr-acct-panel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hdr-acct-drop-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}
.hdr-acct-drop-email {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Account button: desktop shows avatar+name+chevron, mobile shows avatar (dp) only — no generic icon */
@media (max-width: 768px) {
  .hdr-acct-desk-only { display: none !important; }
  /* Dropdown on mobile: compact, just 2 items visible */
  .hdr-desk-only          { display: none !important; }
  .hdr-acct-drop-user     { display: none !important; }
  .hdr-acct-panel-close   { display: none !important; }
}

/* Close button inside account panel */
.hdr-acct-panel-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #666;
  padding: 6px;
  line-height: 1;
  z-index: 1;
}
@media (max-width: 768px) {
  .hdr-acct-panel-close { display: block; }
}

/* Mobile side-panel backdrop */
.hdr-acct-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9980;
  backdrop-filter: blur(1px);
}
.hdr-acct-backdrop.open { display: block; }

@media (max-width: 768px) {
  .hdr-nav-avatar { width: 26px; height: 26px; font-size: 10px; }

  /* Mobile: compact dropdown (no side panel) — shows only My Account + Sign Out */
  .hdr-acct-drop {
    position: fixed !important;
    top: 56px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 10px !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.14) !important;
    padding: 6px !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    z-index: 9990 !important;
    display: none !important;
  }
  /* Avatar tap navigates straight to the dashboard on mobile now (see
     main.js), so this dropdown should never actually open here — kept
     display:none even with .open applied as a safety net. */
  .hdr-acct-drop.open {
    display: none !important;
  }
}

/* ── Collection banner multi-slide slider ── */
.collection-banner.cb-slider { cursor: default; }
.cb-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  will-change: opacity;
}
.cb-slide.active { opacity: 1; z-index: 1; }
.cb-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; max-width: none;
  padding: 0; margin: 0;
}
.cb-slide .collection-banner-overlay { z-index: 2; }
.cb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: none;
  font-size: 22px; line-height: 1; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: background .2s, transform .2s;
  color: #1a1a1a;
}
.cb-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.cb-prev { left: 18px; }
.cb-next { right: 18px; }
.cb-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.cb-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid #fff;
  background: rgba(255,255,255,.35);
  cursor: pointer; padding: 0;
  transition: background .2s, transform .2s;
}
.cb-dot.active { background: #fff; transform: scale(1.15); }


/* ── Filter sidebar — expanded (Discounts, Genders, Size, Color, Categories, Seasons, Themes) ── */
.filter-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.filter-title{font-size:15px;font-weight:700;color:#1a1a1a;margin:0;}
.filter-clear-all{background:none;border:none;font-size:12px;color:var(--theme-primary, #d94f7a);cursor:pointer;font-weight:600;padding:2px 0;opacity:0;pointer-events:none;transition:opacity .2s;}
.filter-clear-all:hover{text-decoration:underline;}
.filter-group{margin-bottom:4px;border-bottom:1px solid #f0ece6;}
.fg-toggle{width:100%;background:none;border:none;padding:12px 0;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#1a1a1a;cursor:pointer;text-align:left;letter-spacing:.3px;text-transform:uppercase;}
.fg-toggle:hover{color:var(--theme-primary, #d94f7a);}
.fg-chev{font-size:10px;color:#aaa;transition:transform .25s;}
.filter-collapsible.open .fg-chev{transform:rotate(180deg);}
.fg-body{padding-bottom:12px;}
/* Closed by default: the group only shows its body once the user clicks
   the toggle and JS adds the .open class (see filter-sidebar.html). */
.filter-collapsible .fg-body{display:none;}
.filter-collapsible.open .fg-body{display:block;}
.filter-list{list-style:none;padding:0;margin:0;}
.filter-list li{padding:4px 0;}
.filter-list label{display:flex;align-items:center;gap:8px;font-size:13px;color:#444;cursor:pointer;line-height:1.4;}
.filter-list label:hover{color:var(--theme-primary, #d94f7a);}
.filter-list input[type="checkbox"]{accent-color:var(--theme-primary, #d94f7a);width:14px;height:14px;flex-shrink:0;}
.filter-list span{margin-left:auto;font-size:11px;color:#aaa;font-weight:500;}
.size-chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border:1.5px solid #ddd;border-radius:6px;font-size:12px;font-weight:600;color:#555;cursor:pointer;transition:all .18s;background:#fff;min-width:36px;}
.chip:hover{border-color:var(--theme-primary, #d94f7a);color:var(--theme-primary, #d94f7a);}
.chip.active{background:var(--theme-primary, #d94f7a);border-color:var(--theme-primary, #d94f7a);color:#fff;}
.color-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0;}
.color-chip{width:26px;height:26px;border-radius:50%;cursor:pointer;transition:transform .18s,box-shadow .18s;flex-shrink:0;}
.color-chip:hover{transform:scale(1.15);}
.color-chip.chip-active{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--theme-primary, #d94f7a);transform:scale(1.1);}
.filter-actions{padding:16px 0 4px;}

/* ── Nav slider arrows (shown when items > 12) ── */
.nav-list-wrap{flex:1;overflow:hidden;position:relative;}
/* Fewer nav items (≤12, non-scrollable mode) shouldn't hug the left edge —
   center the row instead. The >12-item scrollable variant keeps its
   natural left alignment so the slider/scroll behavior isn't affected. */
.nav-list-wrap:not(.nav-scrollable) .nav-list-shop{justify-content:center;}
.nav-list-wrap.nav-scrollable .nav-list-shop{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.nav-list-wrap.nav-scrollable .nav-list-shop::-webkit-scrollbar{display:none;}
.nav-scroll-btn{
  display:none;align-items:center;justify-content:center;
  width:30px;height:30px;position:absolute;top:50%;transform:translateY(-50%);
  background:#fff;border:1px solid #eee;border-radius:50%;
  cursor:pointer;color:#555;font-size:11px;flex-shrink:0;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.nav-scroll-btn:hover{background:#fdeef2;color:var(--theme-primary, #d94f7a);border-color:#f3d3dd;box-shadow:0 2px 8px rgba(217,79,122,.2);}
.nav-scroll-btn:active{transform:translateY(-50%) scale(.92);}
.nav-scroll-btn[hidden]{display:none!important;}
#navScrollPrev{left:2px;}
#navScrollNext{right:2px;}
.hdr-nav-inner.has-nav-slider{position:relative;}
.hdr-nav-inner.has-nav-slider .nav-scroll-btn{display:flex;}
.hdr-nav-inner.has-nav-slider .nav-list-wrap{padding:0 34px;}
@media(max-width:900px){.nav-scroll-btn{display:none!important;}.hdr-nav-inner.has-nav-slider .nav-list-wrap{padding:0;}}

/* ── Cart page: personal promo banner pager ── */
.promo-pager{margin-bottom:16px;}
.promo-pager-track{display:flex;flex-direction:column;gap:12px;}
.promo-banner{background:linear-gradient(135deg,#fff5f8,#fce8ef);border:2px solid #f5c0d2;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.promo-pager-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;}
.promo-pager-arrow{width:32px;height:32px;border-radius:50%;border:1px solid #eee;background:#fff;color:#555;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:background .15s,color .15s,border-color .15s;flex-shrink:0;}
.promo-pager-arrow:hover:not(:disabled){background:#fdeef2;color:var(--theme-primary, #d94f7a);border-color:#f3d3dd;}
.promo-pager-arrow:disabled{opacity:.35;cursor:default;}
.promo-pager-dots{display:flex;align-items:center;gap:7px;}
.promo-pager-dots button{width:9px;height:9px;border-radius:50%;border:none;background:#e5c7d2;padding:0;cursor:pointer;transition:background .15s,transform .15s;}
.promo-pager-dots button.on{background:var(--theme-primary, #d94f7a);transform:scale(1.25);}