/* ═══════════════════════════════════════════════════════════════
   Hinax Store — Brand CSS v3.0
   Brand: Deep Navy (#1a1a2e), Gold (#c9a96e), Warm White (#faf9f7)
═══════════════════════════════════════════════════════════════ */

:root {
  --pink:       #c9a96e;
  --pink-dark:  #a68b52;
  --pink-light: #f5f0e5;
  --pink-pale:  #faf8f3;
  --black:      #1a1a2e;
  --charcoal:   #2d2d3e;
  --gray:       #6b7280;
  --gray-light: #f5f4f2;
  --white:      #ffffff;
  --cream:      #faf9f7;
  --border:     #e5e3df;
  --shadow:     0 2px 12px rgba(26,26,46,.08);
  --shadow-lg:  0 8px 32px rgba(26,26,46,.12);
  --radius:     8px;
  --radius-sm:  6px;
  --font-body:  'Inter', system-ui, sans-serif;
  --font-head:  'Playfair Display', Georgia, serif;
  --transition: .22s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-body); color: var(--charcoal); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--charcoal);
  -webkit-appearance: none;
  appearance: none;
}
label { cursor: pointer; }

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--black); line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title span { color: var(--pink); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .72rem 1.65rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background .22s ease, color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.btn:active { transform: translateY(0) scale(.98) !important; }

/* Primary — pink gradient */
.btn-primary {
  background: linear-gradient(135deg, #d4b87a 0%, var(--pink) 50%, #a68b52 100%);
  background-size: 200% auto;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(201,169,110,.4), 0 1px 3px rgba(201,169,110,.2);
}
.btn-primary:hover {
  background-position: right center;
  box-shadow: 0 8px 24px rgba(201,169,110,.55), 0 2px 6px rgba(201,169,110,.3);
  transform: translateY(-2px);
  color: #fff;
}

/* Outline — pink border, fills on hover */
.btn-outline {
  background: transparent;
  color: var(--pink);
  border-color: var(--pink);
  box-shadow: inset 0 0 0 0 var(--pink);
}
.btn-outline:hover {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 20px rgba(201,169,110,.4);
  transform: translateY(-2px);
}

/* Dark / Admin button */
.btn-dark {
  background: linear-gradient(135deg, #2d2d3e 0%, #1a1a2e 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.btn-dark:hover {
  background: linear-gradient(135deg, #3d3d52 0%, #2a2a42 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transform: translateY(-2px);
  color: #fff;
}

/* Ghost — subtle transparent */
.btn-ghost {
  background: rgba(201,169,110,.08);
  color: var(--pink);
  border-color: transparent;
}
.btn-ghost:hover {
  background: rgba(201,169,110,.16);
  transform: translateY(-1px);
}

/* Sizes */
.btn-sm   { padding: .5rem 1.1rem; font-size: .82rem; }
.btn-lg   { padding: 1rem 2.5rem; font-size: 1rem;
            box-shadow: 0 4px 16px rgba(201,169,110,.35), 0 1px 4px rgba(201,169,110,.2); }
.btn-xl   { padding: 1.1rem 3rem; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.btn-icon-sm { width: 32px; height: 32px; padding: 0; border-radius: 50%; }

/* Disabled */
.btn:disabled, .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 200; background: var(--white); box-shadow: 0 1px 8px rgba(0,0,0,.07); width: 100%; }
.announcement-bar { background: #1a1a2e; color: #c9a96e; text-align: center; font-size: .78rem; padding: .45rem 1rem; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; overflow: hidden; }
.header-main { display: flex; align-items: center; justify-content: space-between; padding: .6rem 2rem; gap: 1rem; max-width: 1440px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.search-form { display: none; align-items: center; flex: 0 1 auto; max-width: 220px; min-width: 140px; position: relative; }
.search-input {
  width: 100%;
  border: 1.5px solid #d4cfc5;
  border-radius: 4px;
  padding: .55rem 3rem .55rem 1.15rem;
  font-size: .88rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  background: #faf8f3;
  color: var(--charcoal);
}
.search-input::placeholder { color: #9a9590; }
.search-input:focus {
  border-color: var(--pink);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(201,169,110,.13);
}
.search-btn { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--gray); padding: .2rem; }
.search-btn:hover { color: var(--pink); }
.nav-bar { border-top: 1px solid #f0ece6; border-bottom: 1px solid #f0ece6; }
.nav-bar-inner { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: .5rem 2rem; max-width: 1440px; margin: 0 auto; }
.nav-bar-inner a { font-size: .82rem; font-weight: 400; color: var(--charcoal); transition: color var(--transition); position: relative; padding-bottom: 2px; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; }
.nav-bar-inner a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: #c9a96e; transform: scaleX(0); transition: transform var(--transition); }
.nav-bar-inner a:hover, .nav-bar-inner a.active { color: #c9a96e; }
.nav-bar-inner a:hover::after, .nav-bar-inner a.active::after { transform: scaleX(1); }
.nav-links { display: none; }
.header-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.header-search-icon { display: flex; }
.icon-btn { display: flex; align-items: center; justify-content: center; position: relative; color: var(--charcoal); width: 40px; height: 40px; border-radius: 50%; transition: all var(--transition); }
.icon-btn:hover { background: var(--pink-pale); color: var(--pink); }
.icon-badge { position: absolute; top: -4px; right: -4px; background: var(--pink); color: var(--white); font-size: .62rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-label { font-size: .7rem; }
.cart-icon-btn { display: flex; align-items: center; justify-content: center; position: relative; color: var(--charcoal); transition: color var(--transition); padding: .4rem; }
.cart-icon-btn:hover { color: var(--pink); }
.cart-icon-wrap { position: relative; }
.cart-badge { position: absolute; top: -8px; right: -8px; background: var(--pink); color: var(--white); font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.currency-selector { position: relative; }
.currency-selector-btn {
  display: flex; align-items: center; gap: .35rem;
  background: var(--gray-light); border-radius: 4px; padding: .35rem .75rem .35rem .55rem;
  font-size: .78rem; font-weight: 600; color: var(--charcoal);
  cursor: pointer; transition: all var(--transition); border: 1.5px solid transparent;
}
.currency-selector-btn:hover { border-color: var(--pink-light); background: var(--white); }
.currency-selector.open .currency-selector-btn { border-color: var(--pink); background: var(--white); }
.currency-selector.open .currency-selector-btn svg { transform: rotate(180deg); }
.currency-selector-btn svg { transition: transform .2s ease; }
.currency-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); min-width: 150px; z-index: 999; overflow: hidden;
}
.currency-selector.open .currency-dropdown { display: block; }
.currency-option {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; font-size: .82rem; font-weight: 500;
  color: var(--charcoal); transition: background .15s ease;
  text-decoration: none;
}
.currency-option:hover { background: var(--pink-pale); }
.currency-option.active { background: var(--pink-light); font-weight: 700; color: var(--pink-dark); }
.currency-option-flag { font-size: 1.05rem; }
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; padding: .5rem; cursor: pointer; z-index: 310; }
.mobile-menu-btn span { width: 22px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: all .3s ease; transform-origin: center; }
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 300; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; padding-top: 70px; }
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav a { display: block; padding: 1rem 2rem; font-size: 1rem; font-weight: 400; border-bottom: 1px solid #f0ece6; color: var(--charcoal); transition: color .2s, background .2s; text-transform: uppercase; letter-spacing: 1.5px; }
.mobile-nav a:hover, .mobile-nav a:active { color: #c9a96e; background: #faf8f3; }
.mobile-nav-footer { padding: 1.5rem 2rem; border-top: 1px solid #f0ece6; margin-top: .5rem; }
.mobile-nav-footer a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 0; text-transform: none; letter-spacing: 0; font-size: .88rem; border-bottom: none; color: var(--gray); }

/* Breadcrumb nav */
.breadcrumb-nav { background: var(--white); border-bottom: 1px solid var(--border); padding: .6rem 2rem; }
.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--gray); list-style: none; flex-wrap: wrap; }
.breadcrumb li::after { content: '›'; margin-left: .4rem; opacity: .5; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a { color: var(--gray); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--pink); }

/* ── SOCIAL PROOF TICKER ──────────────────────────────────────── */
.social-proof-bar { background: var(--charcoal); color: rgba(255,255,255,.85); padding: .5rem 0; overflow: hidden; font-size: .8rem; font-weight: 500; }
.social-proof-inner { display: flex; gap: 3rem; animation: ticker 35s linear infinite; white-space: nowrap; width: max-content; }
.proof-item { display: flex; align-items: center; gap: .5rem; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── TRUST BAR ─────────────────────────────────────────────────── */
.trust-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 1.25rem 2rem; }
.trust-bar-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; }
.trust-item { display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.trust-item > span { font-size: 1.8rem; }
.trust-item strong { display: block; font-size: .9rem; }
.trust-item small { color: var(--gray); font-size: .75rem; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.section { padding: 5rem 2rem; }
.section-sm { padding: 3rem 2rem; }
.section-bg-white { background: var(--white); }
.section-bg-pink { background: var(--pink-pale); }
.container { max-width: 1300px; margin: 0 auto; }
.container-sm { max-width: 900px; margin: 0 auto; padding: 0 2rem; }

/* ── PRODUCT GRID ────────────────────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); box-shadow: 0 1px 4px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.product-image-link { display: block; }
.product-image { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--pink-pale); }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-image .hover-img { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.product-card:hover .hover-img { opacity: 1; }
.product-card:hover .product-image img:first-of-type { transform: scale(1.05); }
.product-placeholder { display: flex; align-items: center; justify-content: center; font-size: 5rem; width: 100%; height: 100%; }
.product-badge { position: absolute; top: .75rem; left: .75rem; font-size: .72rem; font-weight: 700; padding: .25rem .65rem; border-radius: 4px; letter-spacing: .3px; z-index: 2; }
.badge-sale { background: var(--pink); color: var(--white); }
.badge-featured { background: #f59e0b; color: var(--white); }
.badge-oos { background: var(--charcoal); color: var(--white); }
.product-wishlist-btn { position: absolute; top: .65rem; right: .65rem; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--transition); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.product-card:hover .product-wishlist-btn { opacity: 1; }
.product-wishlist-btn.wishlisted { opacity: 1; }
.product-wishlist-btn:hover { transform: scale(1.15); }
.product-quick-view { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.95); color: var(--charcoal); padding: .4rem 1.1rem; border-radius: 4px; font-size: .78rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity var(--transition); z-index: 2; border: none; cursor: pointer; }
.product-card:hover .product-quick-view { opacity: 1; }
.product-info { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; }
.product-cat { font-size: .72rem; color: var(--pink); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .3rem; }
.product-name { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--black); margin-bottom: .4rem; line-height: 1.3; transition: color var(--transition); }
.product-name:hover { color: var(--pink); }
.product-stars { display: flex; align-items: center; gap: .15rem; margin-bottom: .4rem; font-size: .85rem; }
.product-price { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.price-sale { font-size: 1.1rem; font-weight: 700; color: var(--pink); }
.price-regular { font-size: .88rem; color: var(--gray); text-decoration: line-through; }
.product-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.product-actions .btn-primary {
  width: 100%;
  font-size: .83rem;
  padding: .62rem 1rem;
}
.product-actions .product-view-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: #b09aa5;
  text-decoration: none;
  padding: .2rem 0;
  transition: color .18s;
}
.product-actions .product-view-link:hover { color: var(--pink); }

/* ── FEATURES SECTION ────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.feature-item { text-align: center; }
.feature-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--pink-light); color: var(--pink); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 1rem; }
.feature-item h3 { margin-bottom: .4rem; font-size: 1rem; }
.feature-item p { font-size: .88rem; color: var(--gray); }

/* ── REVIEWS GRID ────────────────────────────────────────────── */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.review-card { background: var(--white); border-radius: var(--radius); padding: 1.75rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); border: 1px solid var(--border); }
.review-stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: .75rem; letter-spacing: 2px; }
.review-text { color: var(--charcoal); font-size: .92rem; line-height: 1.8; font-style: italic; margin-bottom: 1.25rem; }
.review-author { display: flex; align-items: center; gap: .85rem; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.review-author strong { display: block; font-size: .9rem; }
.review-meta { font-size: .75rem; color: var(--gray); }

/* ── BLOG GRID ──────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
.blog-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: all var(--transition); }
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-card-image { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--pink-pale); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card-image img { transform: scale(1.05); }
.blog-card-placeholder { display: flex; align-items: center; justify-content: center; font-size: 4rem; width: 100%; height: 100%; background: var(--pink-pale); }
.blog-card-body { padding: 1.5rem; }
.blog-card-meta { font-size: .78rem; color: var(--gray); margin-bottom: .5rem; }
.blog-card-title { font-size: 1.1rem; margin-bottom: .6rem; line-height: 1.4; }
.blog-card-title a:hover { color: var(--pink); }
.blog-card-excerpt { font-size: .88rem; color: var(--gray); line-height: 1.7; margin-bottom: 1rem; }
.blog-read-more { color: var(--pink); font-weight: 600; font-size: .88rem; }
.blog-read-more:hover { text-decoration: underline; }

/* Blog post page */
.blog-post-header { margin-bottom: 2rem; text-align: center; }
.blog-post-meta { font-size: .85rem; color: var(--gray); margin-bottom: .75rem; }
.blog-post-title { font-size: 2.2rem; margin-bottom: 1rem; }
.blog-post-excerpt { font-size: 1.1rem; color: var(--gray); font-style: italic; }
.blog-post-hero-img { width: 100%; border-radius: var(--radius); margin: 2rem 0; max-height: 400px; object-fit: cover; }
.blog-post-body { font-size: 1rem; line-height: 1.9; color: var(--charcoal); }
.blog-post-body h2 { margin: 2.5rem 0 1rem; font-size: 1.6rem; }
.blog-post-body p { margin-bottom: 1.25rem; }
.blog-post-body ul, .blog-post-body ol { margin: 1rem 0 1.25rem 1.5rem; }
.blog-post-body li { margin-bottom: .4rem; }
.blog-post-body a { color: var(--pink); text-decoration: underline; }
.blog-post-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 1rem; }
.blog-share { display: flex; align-items: center; gap: .75rem; font-size: .88rem; }
.share-btn { padding: .4rem .9rem; border-radius: 4px; font-size: .78rem; font-weight: 600; display: inline-block; }
.share-twitter { background: #1da1f2; color: var(--white); }
.share-facebook { background: #1877f2; color: var(--white); }

/* ── PROMO BANNER ─────────────────────────────────────────────── */
.promo-banner { background: linear-gradient(135deg, var(--pink) 0%, #a68b52 100%); color: var(--white); padding: 3.5rem 3rem; border-radius: var(--radius); display: flex; align-items: center; gap: 2rem; justify-content: space-between; flex-wrap: wrap; }
.promo-banner h2 { color: var(--white); margin-bottom: .8rem; }
.promo-banner p { opacity: .9; font-size: 1rem; max-width: 500px; line-height: 1.8; }
.promo-banner .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
  box-shadow: none;
}
.promo-banner .btn-outline:hover {
  background: #fff;
  color: var(--pink);
  border-color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ── NEWSLETTER ─────────────────────────────────────────────── */
.newsletter { background: var(--pink-pale); border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; }
.newsletter-icon { font-size: 3rem; margin-bottom: 1rem; }
.newsletter h2 { margin-bottom: .8rem; }
.newsletter p { color: var(--gray); margin-bottom: 2rem; }
.newsletter-form { display: flex; gap: .75rem; max-width: 500px; margin: 0 auto; }
.newsletter-input {
  flex: 1;
  padding: .9rem 1.25rem;
  border: 1.5px solid #e8d5de;
  border-radius: 4px;
  font-size: .9rem;
  outline: none;
  background: rgba(255,255,255,.85);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.newsletter-input::placeholder { color: #9a9590; }
.newsletter-input:focus {
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}

/* ── NEWSLETTER POPUP ──────────────────────────────────────── */
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; }
.newsletter-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1000; width: 90%; max-width: 480px; background: var(--white); border-radius: 20px; padding: 3rem 2.5rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.newsletter-popup-inner { position: relative; }
.popup-close { position: absolute; top: -1.5rem; right: -1rem; font-size: 1.8rem; color: var(--gray); line-height: 1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--transition); }
.popup-close:hover { background: var(--gray-light); color: var(--charcoal); }
.popup-image { font-size: 4rem; margin-bottom: 1rem; }
.newsletter-popup h2 { font-size: 1.6rem; margin-bottom: .6rem; }
.newsletter-popup p { color: var(--gray); font-size: .9rem; margin-bottom: 1.5rem; }
.popup-form { display: flex; flex-direction: column; gap: .75rem; }
.popup-input {
  padding: .9rem 1.25rem;
  border: 1.5px solid #e8d5de;
  border-radius: 4px;
  font-size: .9rem;
  outline: none;
  text-align: center;
  background: #faf8f3;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.popup-input::placeholder { color: #9a9590; }
.popup-input:focus {
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}
.popup-note { font-size: .8rem; color: var(--gray); margin-top: 1rem; }
.popup-skip { font-size: .82rem; color: var(--gray); text-decoration: underline; margin-top: .5rem; display: block; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background: var(--charcoal); color: #e0e0e0; padding: 4rem 2rem 2rem; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1.2fr 1.5fr; gap: 3rem; margin-bottom: 3rem; }
.footer-logo { font-family: var(--font-head); font-size: 1.6rem; color: var(--pink); margin-bottom: .8rem; }
.footer-desc { font-size: .88rem; opacity: .7; line-height: 1.7; }
.footer-col h4 { color: var(--white); font-size: .92rem; margin-bottom: 1rem; font-weight: 600; letter-spacing: .3px; }
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul li a { font-size: .85rem; opacity: .7; transition: all var(--transition); }
.footer-col ul li a:hover { opacity: 1; color: var(--pink); }
.footer-social { display: flex; gap: .75rem; margin-top: 1rem; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); transition: all var(--transition); }
.footer-social a:hover { background: var(--pink); color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: .8rem; opacity: .6; }
.payment-icons { display: flex; gap: .4rem; flex-wrap: wrap; }
.payment-icon { background: rgba(255,255,255,.08); color: #e0e0e0; padding: .25rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 600; }

/* ── FLASH MESSAGES ─────────────────────────────────────────── */
.flash { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-radius: var(--radius-sm); margin: 1rem 2rem; font-size: .92rem; font-weight: 500; animation: slideDown .3s ease; }
.flash-success { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.flash-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.flash-info    { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }
.flash-close   { margin-left: auto; opacity: .6; font-size: 1.1rem; cursor: pointer; }
.flash-close:hover { opacity: 1; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.4rem; position: relative; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Shared label style */
.form-group label,
.form-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .55rem;
  color: #9b7a8c;
}

/* Core input — used on login / register / contact / checkout */
.form-input,
.form-control {
  width: 100%;
  padding: .9rem 1.15rem;
  border: 1.5px solid #e8d5de;
  border-radius: 12px;
  font-size: .95rem;
  background: #faf8f3;
  color: var(--charcoal);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
  line-height: 1.5;
}
.form-input::placeholder,
.form-control::placeholder {
  color: #9a9590;
  font-size: .9rem;
}
.form-input:hover,
.form-control:hover {
  border-color: #d9a8be;
}
.form-input:focus,
.form-control:focus {
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(201,169,110,.14);
}
.form-input.is-error,
.form-control.is-error {
  border-color: #e57373;
  box-shadow: 0 0 0 3px rgba(229,115,115,.12);
}

/* Textarea */
textarea.form-input,
textarea.form-control {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Select */
select.form-input,
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239b7a8c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Hint text */
.form-hint { font-size: .78rem; color: #b09aa5; margin-top: .35rem; }

/* Input with icon prefix */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-input,
.input-icon-wrap .form-control { padding-left: 2.75rem; }
.input-icon-wrap .input-icon {
  position: absolute; left: .95rem; top: 50%;
  transform: translateY(-50%); color: #9a9590;
  pointer-events: none; width: 18px; height: 18px;
}

/* ── PRODUCT PAGE ────────────────────────────────────────────── */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.product-gallery-col { position: sticky; top: 90px; }
.gallery-thumbs { display: flex; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }
.thumb-btn { border-radius: var(--radius-sm); border: 2px solid var(--border); overflow: hidden; width: 72px; height: 72px; transition: border-color var(--transition); flex-shrink: 0; }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.thumb-btn.active, .thumb-btn:hover { border-color: var(--pink); }
.gallery-main-wrap { position: relative; }
.gallery-main-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--pink-pale); cursor: zoom-in; }
.gallery-zoom-btn { position: absolute; bottom: 1rem; right: 1rem; background: rgba(255,255,255,.9); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: all var(--transition); }
.gallery-zoom-btn:hover { background: var(--white); box-shadow: var(--shadow); }
.product-info-col { padding-bottom: 4rem; }
.product-cat { font-size: .75rem; color: var(--pink); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .4rem; }
.product-detail-title { font-size: 2rem; margin-bottom: .5rem; line-height: 1.2; }
.product-rating-link { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--gray); margin-bottom: .75rem; }
.product-rating-link:hover { color: var(--pink); }
.product-detail-price { display: flex; align-items: baseline; gap: .8rem; margin: 1rem 0; flex-wrap: wrap; }
.detail-sale-price { font-size: 2rem; font-weight: 700; color: var(--pink); }
.detail-reg-price { font-size: 1.1rem; color: var(--gray); text-decoration: line-through; }
.detail-save { background: var(--pink-light); color: var(--pink); font-size: .82rem; font-weight: 700; padding: .2rem .65rem; border-radius: 4px; }
.product-short-desc { color: var(--gray); font-size: .95rem; line-height: 1.8; margin-bottom: 1rem; }
.product-age { font-size: .88rem; color: var(--gray); margin-bottom: .75rem; display: flex; align-items: center; gap: .4rem; }
.stock-status { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; padding: .5rem 0; margin-bottom: 1rem; }
.in-stock { color: #059669; }
.out-of-stock { color: #dc2626; }
.add-to-cart-form { display: flex; gap: .75rem; align-items: center; margin: 1.25rem 0; flex-wrap: wrap; }
.add-to-cart-main { flex: 1; min-width: 160px; }
.qty-selector { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; }
.qty-selector button { width: 40px; height: 46px; font-size: 1.2rem; transition: background var(--transition); }
.qty-selector button:hover { background: var(--pink-pale); }
.qty-selector input { width: 50px; text-align: center; border: none; font-size: 1rem; font-weight: 600; }
.wishlist-product-btn.wishlisted { background: var(--pink-pale); }
.trust-badges-inline { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 1.25rem 0; }
.trust-badge-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--gray); }

/* Free shipping progress */
.shipping-progress-bar { background: var(--pink-pale); border-radius: 4px; padding: .7rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; margin-bottom: .5rem; border: 1px solid var(--pink-light); }
.shipping-progress-bar.shipping-unlocked { background: #d1fae5; border-color: #a7f3d0; color: #065f46; font-weight: 600; align-items: center; }
.shipping-progress-text { font-size: .85rem; color: var(--charcoal); }
.shipping-progress-track { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; }
.shipping-progress-fill { height: 100%; background: linear-gradient(90deg, var(--pink), var(--pink-dark)); border-radius: 4px; transition: width .5s ease; }

/* Specs table */
.product-specs { margin-top: 1.5rem; }
.product-specs h3 { font-size: 1rem; margin-bottom: .75rem; }
.specs-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.specs-table th, .specs-table td { padding: .6rem .85rem; border: 1px solid var(--border); text-align: left; }
.specs-table th { background: var(--gray-light); font-weight: 600; color: var(--charcoal); width: 35%; }
.specs-table td { color: var(--charcoal); }

/* FAQ accordion */
.product-faq { margin-top: 1.5rem; border-top: 1px solid var(--border); }
.product-faq h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; color: var(--charcoal); }
.faq-toggle:hover { color: var(--pink); }
.faq-icon { font-size: 1.25rem; color: var(--pink); }
.faq-answer { display: none; padding: 0 0 .85rem; }
.faq-answer p { font-size: .88rem; color: var(--gray); line-height: 1.8; }

/* Product description */
.product-description { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.product-description h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.product-description-body { font-size: .92rem; line-height: 1.9; color: var(--charcoal); }
.product-description-body ul, .product-description-body ol { margin: .75rem 0 .75rem 1.25rem; }
.product-description-body li { margin-bottom: .35rem; }
.product-description-body strong { color: var(--charcoal); }

/* IMAGE ZOOM MODAL */
.zoom-modal { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.zoom-modal img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); }
.zoom-close { position: absolute; top: 1.5rem; right: 2rem; font-size: 2.5rem; color: var(--white); opacity: .8; z-index: 1001; line-height: 1; }
.zoom-close:hover { opacity: 1; }

/* STICKY MOBILE ADD TO CART */
.sticky-add-to-cart { position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--border); padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 150; transform: translateY(100%); transition: transform .3s ease; box-shadow: 0 -4px 20px rgba(0,0,0,.1); }
.sticky-add-to-cart.visible { transform: translateY(0); }
@media (min-width: 769px) { .sticky-add-to-cart { display: none !important; } }

/* REVIEWS */
.reviews-section { margin-top: 4rem; padding-top: 3rem; border-top: 2px solid var(--border); }
.reviews-header { margin-bottom: 2rem; }
.reviews-header h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.reviews-summary { display: flex; gap: 3rem; align-items: flex-start; padding: 1.5rem; background: var(--gray-light); border-radius: var(--radius); }
.reviews-avg { text-align: center; min-width: 80px; }
.avg-number { font-size: 3rem; font-family: var(--font-head); font-weight: 700; color: var(--charcoal); line-height: 1; }
.avg-count { font-size: .8rem; color: var(--gray); margin-top: .25rem; }
.reviews-breakdown { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.breakdown-row { display: flex; align-items: center; gap: .75rem; font-size: .82rem; }
.breakdown-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.review-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.review-item { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.review-item-header { display: flex; align-items: center; gap: .85rem; margin-bottom: .75rem; flex-wrap: wrap; }
.reviewer-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--pink); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.review-date { font-size: .75rem; color: var(--gray); }
.verified-badge { background: #d1fae5; color: #065f46; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 4px; }
.review-title { font-size: .95rem; font-weight: 600; color: var(--charcoal); margin-bottom: .4rem; }
.review-body { font-size: .9rem; color: var(--gray); line-height: 1.8; }
.admin-reply { background: var(--pink-pale); border-left: 3px solid var(--pink); padding: .75rem 1rem; margin-top: 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .88rem; color: var(--charcoal); }

/* STAR RATING INPUT */
.star-rating-input { display: flex; flex-direction: row-reverse; gap: .25rem; font-size: 2rem; }
.star-rating-input input { display: none; }
.star-rating-input label { color: var(--border); cursor: pointer; transition: color .1s; }
.star-rating-input input:checked ~ label,
.star-rating-input label:hover, .star-rating-input label:hover ~ label { color: #f59e0b; }

/* WRITE REVIEW */
.write-review { background: var(--gray-light); border-radius: var(--radius); padding: 2rem; margin-top: 2rem; }
.write-review h3 { font-size: 1.2rem; margin-bottom: 1.25rem; }
.review-form .form-control { background: var(--white); }

/* ── QUICK VIEW MODAL ────────────────────────────────────────── */
.quick-view-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.quick-view-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.quick-view-inner { position: relative; background: var(--white); border-radius: var(--radius); max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; z-index: 1; }
.quick-view-close { position: absolute; top: 1rem; right: 1rem; font-size: 1.8rem; color: var(--gray); z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all var(--transition); }
.quick-view-close:hover { background: var(--gray-light); color: var(--charcoal); }
.quick-view-content { padding: 2rem; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--pink); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── SHOP PAGE ─────────────────────────────────────────────────── */
.shop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.filter-bar { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding: 1rem 1.5rem; background: var(--white); border-radius: var(--radius); margin-bottom: 2rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.filter-select {
  padding: .6rem 2.4rem .6rem 1rem;
  border: 1.5px solid #e8d5de;
  border-radius: 4px;
  font-size: .85rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #faf8f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239b7a8c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .85rem center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  color: var(--charcoal);
}
.filter-select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(201,169,110,.13);
  background-color: #fff;
}
.filter-results { font-size: .85rem; color: var(--gray); }
.price-filter { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.price-input {
  width: 78px;
  padding: .55rem .75rem;
  border: 1.5px solid #e8d5de;
  border-radius: 10px;
  font-size: .85rem;
  outline: none;
  background: #faf8f3;
  color: var(--charcoal);
  transition: border-color .2s ease, box-shadow .2s ease;
  text-align: center;
}
.price-input::placeholder { color: #9a9590; }
.price-input:focus {
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,169,110,.13);
}
.filter-clear { font-size: .82rem; color: var(--gray); text-decoration: underline; }
.filter-clear:hover { color: var(--pink); }

/* ── CART PAGE ─────────────────────────────────────────────────── */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: .75rem 1rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gray); border-bottom: 2px solid var(--border); }
.cart-table td { padding: 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cart-item-img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-qty { display: flex; align-items: center; gap: .5rem; }
.qty-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border); font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all var(--transition); cursor: pointer; }
.qty-btn:hover { border-color: var(--pink); color: var(--pink); }
.cart-summary { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.cart-summary-row { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.cart-total { font-size: 1.2rem; font-weight: 700; color: var(--black); }

/* Coupon box */
.coupon-box { background: var(--pink-pale); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-top: 1rem; }
.coupon-box h4 { font-size: .88rem; margin-bottom: .6rem; }
.coupon-form { display: flex; gap: .5rem; }
.coupon-input {
  flex: 1;
  padding: .7rem 1.1rem;
  border: 1.5px solid #e8d5de;
  border-radius: 4px;
  font-size: .88rem;
  outline: none;
  background: #faf8f3;
  color: var(--charcoal);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.coupon-input::placeholder { color: #9a9590; }
.coupon-input:focus {
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(201,169,110,.13);
}

/* ── CHECKOUT ─────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; }
.checkout-form-card { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.checkout-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--pink-light); }
.payment-method { display: flex; gap: 1rem; flex-wrap: wrap; }
.payment-option { flex: 1; min-width: 140px; }
.payment-option input { display: none; }
.payment-option label { display: flex; flex-direction: column; align-items: center; padding: 1.2rem; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); font-size: .88rem; font-weight: 600; gap: .4rem; }
.payment-option label span:first-child { font-size: 1.8rem; }
.payment-option input:checked + label { border-color: var(--pink); background: var(--pink-pale); }
.order-summary-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); position: sticky; top: 100px; }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination { display: flex; gap: .5rem; justify-content: center; align-items: center; margin-top: 3rem; flex-wrap: wrap; }
.page-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .88rem; font-weight: 600; border: 1.5px solid var(--border); color: var(--charcoal); transition: all var(--transition); text-decoration: none; }
.page-btn:hover, .page-btn.active { background: var(--pink); color: var(--white); border-color: var(--pink); }
.page-btn-nav { width: auto !important; min-width: 88px; padding: 0 1.1rem; border-radius: 20px !important; gap: .3rem; font-size: .82rem; letter-spacing: .01em; color: var(--charcoal); }
.page-btn-nav:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
.page-btn-ellipsis { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: .88rem; color: var(--gray); pointer-events: none; }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 5rem 2rem; }
.empty-state span { font-size: 4rem; display: block; margin-bottom: 1rem; }
.empty-state h3 { margin-bottom: .5rem; }
.empty-state p { color: var(--gray); margin-bottom: 1.5rem; }

/* ── AUTH / ACCOUNT ─────────────────────────────────────────── */
.auth-container {
  min-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, #fff9fb 0%, #fdf0f5 100%);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 20px;
  padding: 2.75rem 2.5rem;
  box-shadow: 0 4px 6px rgba(201,169,110,.06), 0 20px 60px rgba(201,169,110,.1);
  border: 1px solid rgba(201,169,110,.12);
}
.auth-card h1 {
  font-size: 2rem;
  margin-bottom: .35rem;
}
.auth-card > div > p {
  color: var(--gray);
  font-size: .92rem;
  margin-bottom: 2rem;
}
.auth-links {
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
  font-size: .83rem;
  color: var(--gray);
}
.auth-links a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
}
.auth-links a:hover { opacity: .75; }

/* Icon-enhanced inputs for auth forms */
.auth-card .form-group { position: relative; }
.auth-card .field-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9a9590;
  pointer-events: none;
  width: 17px;
  height: 17px;
  margin-top: 13px;
}
.auth-card .form-input { padding-left: 2.8rem; }

/* ── POLICY PAGES ─────────────────────────────────────────────── */
.policy-body h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.policy-body h2:first-child { margin-top: 0; }
.policy-body p { color: var(--gray); line-height: 1.9; margin-bottom: 1rem; font-size: .95rem; }
.policy-body ul, .policy-body ol { margin: .5rem 0 1rem 1.5rem; }
.policy-body li { color: var(--gray); line-height: 1.8; font-size: .95rem; margin-bottom: .3rem; }
.policy-body a { color: var(--pink); }

/* ── CONTACT FORM ─────────────────────────────────────────────── */
.contact-form { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 4px; font-size: .72rem; font-weight: 700; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-gray    { background: var(--gray-light); color: var(--gray); }


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-bar-inner { gap: 1rem; }
  .nav-bar-inner a { font-size: .72rem; letter-spacing: .5px; }
}
@media (max-width: 900px) {
  .nav-bar { display: none !important; }
  .mobile-menu-btn { display: flex !important; }
  .mobile-nav { display: block; }
  .search-form { display: none !important; }
  .header-search-icon { display: flex !important; }
  .header-main { padding: .6rem 1rem; gap: .5rem; }
  .product-layout { grid-template-columns: 1fr; }
  .product-gallery-col { position: static; }
  .checkout-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .blog-grid-3 { grid-template-columns: 1fr 1fr; }
  .breadcrumb-nav { padding: .5rem 1rem; }
  .container-sm { padding: 0 1rem; }
}
@media (max-width: 640px) {
  .section { padding: 2.5rem 1rem; }
  .header-main { padding: .5rem .75rem; gap: .25rem; }
  .logo-img { height: 34px !important; }
  .newsletter-form { flex-direction: column; }
  .promo-banner { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .reviews-summary { flex-direction: column; gap: 1rem; }
  .reviews-grid { grid-template-columns: 1fr; }
  .blog-grid, .blog-grid-3 { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .trust-bar-inner { gap: 1rem; }
  .currency-selector { display: none; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .add-to-cart-form { flex-wrap: wrap; }
  .product-detail-title { font-size: 1.3rem; }
  .detail-sale-price { font-size: 1.3rem; }
  .breadcrumb-nav { padding: .4rem .75rem; }
  .breadcrumb { font-size: .72rem; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .cart-icon-btn { padding: .3rem; }
  .cart-icon-btn svg { width: 18px; height: 18px; }
  .announcement-bar { font-size: .68rem; padding: .35rem .75rem; letter-spacing: .5px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .payment-icons { justify-content: center; }
  .site-footer { padding: 3rem 1.25rem 1.5rem; }
}
@media (max-width: 400px) {
  .header-main { gap: .15rem; padding: .5rem .5rem; }
  .logo-img { height: 30px !important; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .cart-icon-btn svg { width: 17px; height: 17px; }
  .mobile-menu-btn { padding: .35rem; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG SYSTEM — Full Component Styles
═══════════════════════════════════════════════════════════════ */

/* ── Blog layout helpers ── */
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .admin-grid-2 { grid-template-columns: 1fr; } }

/* ── Blog category filter pills ── */
.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem 1rem;
  border-radius: 4px;
  border: 2px solid var(--border);
  font-size: .85rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: all var(--transition);
  background: var(--white);
}
.blog-cat-pill:hover,
.blog-cat-pill.active {
  border-color: var(--pink);
  background: var(--pink-pale);
  color: var(--pink);
}
.cat-count {
  font-size: .75em;
  background: var(--pink-light);
  color: var(--pink-dark);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ── Blog featured hero ── */
.blog-featured-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 3rem;
}
.blog-featured-img-wrap { display: block; height: 380px; overflow: hidden; }
.blog-featured-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-featured-img-wrap:hover .blog-featured-img { transform: scale(1.04); }
.blog-featured-body { padding: 2.5rem 2.5rem 2.5rem 0; }
.blog-featured-title { font-size: clamp(1.3rem, 2.5vw, 1.7rem); line-height: 1.25; margin: .75rem 0; }
.blog-featured-title a:hover { color: var(--pink); }
.blog-featured-excerpt { color: var(--gray); line-height: 1.7; font-size: .95rem; }
@media (max-width: 768px) {
  .blog-featured-hero { grid-template-columns: 1fr; }
  .blog-featured-img-wrap { height: 240px; }
  .blog-featured-body { padding: 1.5rem; }
}

/* ── Blog category label ── */
.blog-category-label {
  display: inline-block;
  background: var(--pink-pale);
  color: var(--pink);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .8rem;
  border-radius: 4px;
  margin-bottom: .5rem;
  transition: background var(--transition);
}
.blog-category-label:hover { background: var(--pink-light); }

/* ── Blog grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .blog-grid, .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .blog-grid, .blog-grid-3 { grid-template-columns: 1fr; }
}

/* ── Blog card ── */
.blog-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.blog-card-image {
  display: block;
  height: 200px;
  overflow: hidden;
  background: var(--pink-pale);
  position: relative;
}
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.05); }
.blog-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink-pale); color: var(--gray);
}
.blog-card-category {
  position: absolute; bottom: 8px; left: 10px;
  background: var(--pink); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 4px;
}
.blog-card-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta { font-size: .78rem; color: var(--gray); margin-bottom: .6rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.blog-card-title { font-size: 1.05rem; line-height: 1.35; margin-bottom: .6rem; }
.blog-card-title a:hover { color: var(--pink); }
.blog-card-excerpt { font-size: .88rem; color: var(--gray); line-height: 1.65; margin-bottom: .8rem; flex: 1; }
.blog-card-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }
.blog-read-more {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .85rem; font-weight: 600; color: var(--pink);
  transition: gap var(--transition);
  margin-top: auto;
}
.blog-read-more:hover { gap: .6rem; }

/* ── Blog tag pill ── */
.blog-tag-pill {
  display: inline-block;
  padding: .2rem .7rem;
  background: var(--pink-pale);
  color: var(--pink-dark);
  border: 1px solid var(--pink-light);
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
  transition: all var(--transition);
}
.blog-tag-pill:hover { background: var(--pink); color: #fff; border-color: var(--pink); }

/* ── Blog meta row ── */
.blog-meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; color: var(--gray); font-size: .85rem;
}
.blog-meta span { display: flex; align-items: center; gap: .2rem; }

/* ── Blog post header ── */
.blog-post-header { margin-bottom: 2rem; }
.blog-post-title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.2;
  margin: .75rem 0 1rem;
}
.blog-post-excerpt {
  font-size: 1.1rem; color: var(--gray); line-height: 1.7;
  border-left: 3px solid var(--pink); padding-left: 1rem;
  margin-bottom: 1rem;
}
.blog-post-hero-img {
  width: 100%; border-radius: var(--radius);
  max-height: 480px; object-fit: cover;
  box-shadow: var(--shadow);
}

/* ── Blog post body typography ── */
.blog-post-body {
  font-size: 1.05rem; line-height: 1.85; color: var(--charcoal);
  max-width: 72ch;
}
.blog-post-body h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.blog-post-body h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.blog-post-body p { margin-bottom: 1.3rem; }
.blog-post-body ul, .blog-post-body ol { padding-left: 1.5rem; margin-bottom: 1.3rem; }
.blog-post-body ul { list-style: disc; }
.blog-post-body ol { list-style: decimal; }
.blog-post-body li { margin-bottom: .4rem; }
.blog-post-body a { color: var(--pink); text-decoration: underline; }
.blog-post-body blockquote {
  border-left: 4px solid var(--pink); margin: 1.5rem 0;
  padding: 1rem 1.5rem; background: var(--pink-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--gray);
}
.blog-post-body img { border-radius: var(--radius-sm); margin: 1.5rem 0; max-width: 100%; }
.blog-figure {
  margin: 2rem 0; text-align: center;
}
.blog-figure img {
  width: 100%; max-width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.08); display: block; margin: 0 auto;
}
.blog-figure figcaption {
  font-size: .82rem; color: var(--gray); margin-top: .6rem;
  font-style: italic; text-align: center;
}

/* ── Blog post footer ── */
.blog-post-footer {
  padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 2rem 0;
}
.share-btn {
  display: inline-flex; align-items: center;
  padding: .4rem 1rem; border-radius: 4px; font-size: .82rem;
  font-weight: 600; transition: opacity var(--transition);
}
.share-btn:hover { opacity: .85; }
.share-twitter  { background: #000; color: #fff; }
.share-facebook { background: #1877f2; color: #fff; }

/* ── Sticky social share sidebar ── */
.sticky-share {
  position: fixed; left: 1rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .4rem;
  z-index: 100; opacity: 0; transition: opacity .3s;
}
.sticky-share-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  color: var(--charcoal); border: 1.5px solid var(--border);
  cursor: pointer; transition: all var(--transition);
}
.sticky-share-btn:hover { transform: scale(1.1); }
.sticky-share-fb  { color: #1877f2; }
.sticky-share-pin { color: #e60023; }
.sticky-share-copy { font-size: .75rem; }
@media (max-width: 1200px) { .sticky-share { display: none; } }

/* ── Prev/Next post nav ── */
.prevnext-link {
  padding: 1rem 1.25rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); display: flex;
  flex-direction: column; gap: .3rem;
  transition: all var(--transition); background: var(--white);
}
.prevnext-link:hover { border-color: var(--pink); background: var(--pink-pale); }
.prevnext-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray); font-weight: 600; }
.prevnext-title { font-size: .9rem; font-weight: 600; color: var(--charcoal); line-height: 1.3; }

/* ── Author bio box ── */
.author-bio-box {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--pink-pale); border-radius: var(--radius);
  padding: 1.5rem; margin: 2.5rem 0; border: 1px solid var(--pink-light);
}
.author-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700; flex-shrink: 0;
}

/* ── Breadcrumb ── */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .82rem; color: var(--gray); }
.breadcrumb a { color: var(--pink); }
.breadcrumb span { color: var(--gray); }

/* ── Comments ── */
.comments-list { display: flex; flex-direction: column; gap: 1.25rem; }
.comment {
  display: flex; gap: 1rem; padding: 1.25rem;
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.comment-reply { margin-left: 2.5rem; border-left: 3px solid var(--pink-light); }
.comment-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pink-light); color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; font-size: .9rem;
}
.comment-body { flex: 1; }
.comment-meta { font-size: .8rem; color: var(--gray); margin-bottom: .4rem; display: flex; gap: .4rem; }
.comment-meta strong { color: var(--charcoal); }
.comment-content { font-size: .92rem; line-height: 1.65; color: var(--charcoal); }
.comment-reply-btn {
  font-size: .78rem; color: var(--pink); font-weight: 600; margin-top: .5rem;
  background: none; border: none; cursor: pointer; padding: 0;
}
.comment-reply-btn:hover { text-decoration: underline; }

/* ── Comment form ── */
.comment-form-section { background: var(--gray-light); border-radius: var(--radius); padding: 2rem; }
.comment-form .form-group { margin-bottom: 1rem; }

/* ── Alert ── */
.alert { padding: .85rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

/* ── Badge info ── */
.badge-info { background: #dbeafe; color: #1e40af; }

/* ═══════════════════════════════════════════════════════════════
   UI/UX ENHANCEMENT LAYER v3.0
   ═══════════════════════════════════════════════════════════════ */

/* ── PAGE HERO BAND (shop, cart, about, etc.) ──────────────────── */
.page-hero {
  background: linear-gradient(135deg, #fff5f8 0%, #fde8f0 50%, #fff9fb 100%);
  padding: 2.75rem 2rem 2.25rem;
  border-bottom: 1px solid var(--pink-light);
}
.page-hero-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.page-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: .25rem 0 .1rem;
  line-height: 1.2;
}
.page-hero p { color: var(--gray); font-size: .92rem; margin-top: .25rem; }
.page-hero .page-hero-count {
  font-size: .82rem; color: var(--gray);
  background: var(--white); border: 1.5px solid var(--pink-light);
  padding: .3rem .85rem; border-radius: 4px;
  font-weight: 600; white-space: nowrap;
}

/* ── IMPROVED CATEGORY ICON (gradient circle) ─────────────────── */
.category-icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f0e5 0%, var(--pink-light) 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem;
  font-size: 2rem;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 6px 20px rgba(201,169,110,.2);
  flex-shrink: 0;
}
.category-card:hover .category-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 28px rgba(201,169,110,.35);
}

/* ── IMPROVED CATEGORY CARD ────────────────────────────────────── */
.category-card {
  background: var(--white);
  border-radius: 16px;
  text-align: center;
  padding: 2rem 1.25rem 1.5rem;
  border: 2px solid transparent;
  transition: all .28s cubic-bezier(.34,1.3,.64,1);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(201,169,110,.04) 100%);
  pointer-events: none;
}
.category-card:hover {
  border-color: var(--pink);
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(201,169,110,.22);
}

/* ── IMPROVED AGE CARDS ────────────────────────────────────────── */
.age-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 16px;
  padding: 2.25rem 1.5rem;
  text-align: center;
  border: 2px solid var(--border);
  transition: all .28s cubic-bezier(.34,1.3,.64,1);
}
.age-card::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(201,169,110,.06);
  transition: transform .3s;
}
.age-card:hover::after { transform: scale(2.2); }
.age-card:hover { border-color: var(--pink); transform: translateY(-5px); box-shadow: 0 12px 32px rgba(201,169,110,.2); }
.age-card-pink { background: var(--pink-pale); border-color: var(--pink-light); }
.age-card-pink::after { background: rgba(201,169,110,.1); }
.age-num { font-family: var(--font-head); font-size: 2.8rem; color: var(--pink); font-weight: 700; line-height: 1; margin-bottom: .5rem; }

/* ── IMPROVED FEATURE ITEMS ───────────────────────────────────── */
.feature-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-light) 0%, #f5f0e5 100%);
  color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 1.1rem;
  box-shadow: 0 4px 16px rgba(201,169,110,.2);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-item:hover .feature-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 24px rgba(201,169,110,.35);
}

/* ── IMPROVED REVIEW CARD ─────────────────────────────────────── */
.review-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  border: 1.5px solid var(--pink-light);
  transition: all var(--transition);
  position: relative;
}
.review-card::before {
  content: '\201C';
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-size: 5rem;
  font-family: var(--font-head);
  color: var(--pink-light);
  line-height: 1;
}
.review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(201,169,110,.18); }

/* ── IMPROVED PROMO BANNER ────────────────────────────────────── */
.promo-banner {
  background: linear-gradient(135deg, var(--pink) 0%, #c4457a 60%, #ad3367 100%);
  color: var(--white);
  padding: 3.5rem 3rem;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
.promo-banner::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.promo-banner::after {
  content: '';
  position: absolute;
  bottom: -80px; right: 100px;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.promo-banner h2 { color: var(--white); margin-bottom: .75rem; font-size: 1.8rem; }
.promo-banner p { opacity: .92; font-size: 1rem; max-width: 500px; line-height: 1.8; }
.promo-banner .promo-emoji {
  font-size: 5rem; text-align: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.2));
  position: relative; z-index: 1;
}

/* ── ABOUT PAGE ────────────────────────────────────────────────── */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.about-stat {
  background: var(--white);
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1.5px solid var(--pink-light);
  transition: all var(--transition);
}
.about-stat:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(201,169,110,.2); border-color: var(--pink); }
.about-stat-num { font-size: 2.4rem; font-family: var(--font-head); font-weight: 700; color: var(--pink); line-height: 1; margin-bottom: .4rem; }
.about-stat-label { font-size: .8rem; color: var(--gray); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.value-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 2px solid var(--pink-light);
  transition: all var(--transition);
}
.value-card:hover { border-color: var(--pink); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, #f5f0e5 0%, var(--pink-light) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; margin: 0 auto 1.1rem;
  box-shadow: 0 4px 14px rgba(201,169,110,.22);
  transition: transform var(--transition);
}
.value-card:hover .value-icon { transform: scale(1.1) rotate(-5deg); }
.value-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.value-card p { font-size: .85rem; color: var(--gray); line-height: 1.65; }

.about-img-placeholder {
  background: linear-gradient(135deg, var(--pink-pale) 0%, #f5f0e5 100%);
  border-radius: 20px;
  padding: 3rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--pink-light);
  min-height: 220px;
  box-shadow: inset 0 2px 12px rgba(201,169,110,.1);
}
.about-brand-icon { font-size: 7rem; filter: drop-shadow(0 8px 20px rgba(201,169,110,.35)); }

/* ── CART PAGE HEADER ──────────────────────────────────────────── */
.cart-page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--pink-light);
}
.cart-page-header h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.cart-icon-header {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--pink-light) 0%, #f5f0e5 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(201,169,110,.2);
  flex-shrink: 0;
}

/* ── ADMIN STAT CARD ICON ──────────────────────────────────────── */
.stat-card-icon {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray);
}
.stat-card.pink .stat-card-icon {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ── ADMIN DASHBOARD IMPROVEMENTS ─────────────────────────────── */
.admin-welcome-bar {
  background: linear-gradient(135deg, #1e1730 0%, #2a1f45 100%);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  color: #fff;
  flex-wrap: wrap;
}
.admin-welcome-bar h2 { color: #fff; font-size: 1.3rem; margin-bottom: .2rem; }
.admin-welcome-bar p { color: rgba(255,255,255,.6); font-size: .85rem; }
.admin-quick-links { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin-quick-link {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: 4px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
  font-size: .8rem; font-weight: 600; transition: all .2s;
  border: 1px solid rgba(255,255,255,.15);
}
.admin-quick-link:hover { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ── FOOTER IMPROVEMENTS ───────────────────────────────────────── */
.footer-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-size: 1.65rem;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: .9rem;
  letter-spacing: -.3px;
}
.footer-logo-bow {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(201,169,110,.4));
}
.payment-icons { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.payment-icon {
  background: rgba(255,255,255,.1);
  color: #e0e0e0;
  padding: .3rem .65rem;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
  letter-spacing: .3px;
  transition: all .2s;
}
.payment-icon:hover { background: rgba(255,255,255,.18); }
.payment-icon-visa   { color: #a8d4ff; }
.payment-icon-mc     { color: #ffb347; }
.payment-icon-pp     { color: #a8d4ff; }
.payment-icon-klarna { color: #ffb8d6; }

/* ── NEWSLETTER IMPROVEMENTS ───────────────────────────────────── */
.newsletter {
  background: linear-gradient(135deg, #fff0f7 0%, var(--pink-pale) 50%, #fff5fa 100%);
  border-radius: 20px;
  padding: 3.5rem 2rem;
  text-align: center;
  border: 1.5px solid var(--pink-light);
  box-shadow: 0 4px 24px rgba(201,169,110,.1);
  position: relative;
  overflow: hidden;
}
.newsletter::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(201,169,110,.07);
}
.newsletter::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -30px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(201,169,110,.05);
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter-icon { font-size: 3rem; margin-bottom: .75rem; filter: drop-shadow(0 4px 8px rgba(201,169,110,.3)); }
.newsletter h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .6rem; }

/* ── SHOP PAGE CATEGORY HEADER ─────────────────────────────────── */
.shop-cat-hero {
  background: linear-gradient(135deg, var(--pink-pale) 0%, #fce8f4 60%, #fff5fb 100%);
  padding: 2.5rem 2rem;
  margin: -1px 0 0;
  border-bottom: 1px solid var(--pink-light);
}
.shop-cat-hero-inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}
.shop-cat-hero-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #f5f0e5 0%, var(--pink-light) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(201,169,110,.25);
}
.shop-cat-hero-text h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .2rem; }
.shop-cat-hero-text p { color: var(--gray); font-size: .9rem; margin-top: .25rem; }

/* ── BLOG FEATURED HERO CARD ───────────────────────────────────── */
.blog-hero-card {
  background: linear-gradient(135deg, #1e1730 0%, #2e1a3f 100%);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  margin-bottom: 3rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  position: relative;
}
.blog-hero-card-content {
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.blog-hero-card-category {
  display: inline-block;
  background: var(--pink); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: .25rem .9rem;
  border-radius: 4px; margin-bottom: 1rem;
}
.blog-hero-card h2 { color: #fff; font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin-bottom: .75rem; line-height: 1.25; }
.blog-hero-card-excerpt { color: rgba(255,255,255,.7); font-size: .92rem; line-height: 1.7; margin-bottom: 1.5rem; }
.blog-hero-meta { color: rgba(255,255,255,.55); font-size: .82rem; margin-bottom: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.blog-hero-card-img {
  background: linear-gradient(135deg, rgba(201,169,110,.2) 0%, rgba(196,92,125,.15) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 8rem;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.3));
  position: relative; overflow: hidden;
}
.blog-hero-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-hero-card-img::before {
  content: '';
  position: absolute;
  left: -1px; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(to right, #1e1730, transparent);
  z-index: 1;
}

/* ── BLOG LIST IMPROVEMENTS ────────────────────────────────────── */
.blog-hero-header {
  background: linear-gradient(135deg, #1e1730 0%, #2d1a42 100%);
  padding: 4rem 2rem;
  text-align: center;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.blog-hero-header::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(201,169,110,.1);
}
.blog-hero-header::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(201,169,110,.06);
}
.blog-hero-header h1 { color: #fff; position: relative; z-index: 1; }
.blog-hero-header h1 span { color: var(--pink); }
.blog-hero-header p { color: rgba(255,255,255,.65); margin-top: .6rem; font-size: .95rem; position: relative; z-index: 1; }

.blog-cat-pills {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1rem 2rem;
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  max-width: 100%; overflow-x: auto;
}
.blog-cat-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem 1.1rem; border-radius: 4px;
  font-size: .83rem; font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--charcoal);
  background: var(--white);
  transition: all var(--transition);
  white-space: nowrap; cursor: pointer;
}
.blog-cat-pill:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-pale); }
.blog-cat-pill.active { background: var(--pink); color: #fff; border-color: var(--pink); }
.blog-cat-pill-count {
  background: rgba(0,0,0,.08); color: inherit;
  border-radius: 4px; font-size: .72rem;
  padding: .05rem .45rem; font-weight: 700;
}
.blog-cat-pill.active .blog-cat-pill-count { background: rgba(255,255,255,.25); }

/* ── IMPROVED EMPTY STATE ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
}
.empty-state-icon {
  width: 96px; height: 96px;
  background: linear-gradient(135deg, var(--pink-pale) 0%, #f5f0e5 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; margin: 0 auto 1.5rem;
  box-shadow: 0 6px 20px rgba(201,169,110,.2);
}
.empty-state h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.empty-state p { color: var(--gray); margin-bottom: 1.75rem; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.7; }

/* ── QUICK TRUST STRIP ─────────────────────────────────────────── */
.trust-strip {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.trust-strip-item {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--gray);
}

/* ── CART SUMMARY IMPROVEMENTS ─────────────────────────────────── */
.cart-summary {
  background: var(--white);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border: 1.5px solid var(--pink-light);
  position: sticky;
  top: 100px;
}
.cart-summary h3 { font-size: 1.05rem; font-weight: 700; border-bottom: 2px solid var(--pink-light); padding-bottom: 1rem; margin-bottom: 1rem; }

/* ── MOBILE IMPROVEMENTS ───────────────────────────────────────── */
@media (max-width: 768px) {
  .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .blog-hero-card { grid-template-columns: 1fr; }
  .blog-hero-card-img { height: 180px; }
  .promo-banner { grid-template-columns: 1fr; }
  .shop-cat-hero-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .about-stats-grid { grid-template-columns: 1fr 1fr; }
  .blog-hero-header { padding: 2.5rem 1rem; }
}

/* ── TOAST NOTIFICATIONS ──────────────────────────────────────── */
.toast-notification {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  background: var(--charcoal); color: #fff;
  padding: .75rem 1.5rem; border-radius: 4px;
  font-size: .875rem; font-weight: 500;
  z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  opacity: 0; transition: all .3s ease; white-space: nowrap;
  pointer-events: none;
}
.toast-notification.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-notification.toast-success { background: #059669; }
.toast-notification.toast-info { background: var(--pink); }
.toast-notification.toast-error { background: #dc2626; }

/* ── BACK TO TOP BUTTON ───────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 5rem; right: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(201,169,110,.4);
  z-index: 200; opacity: 0; transform: translateY(1rem);
  transition: all .3s ease; pointer-events: none;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--pink-dark); transform: translateY(-2px); }
@media (min-width: 769px) { .back-to-top { bottom: 2rem; } }

/* ── NEWSLETTER POPUP ANIMATION ──────────────────────────────── */
.newsletter-popup { transition: opacity .3s, transform .3s; transform: translate(-50%,-50%) scale(.95); opacity: 0; }
.newsletter-popup.popup-visible { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.popup-overlay { transition: opacity .3s; opacity: 0; }
.popup-overlay.popup-visible { opacity: 1; }

/* ── LOAD MORE BUTTON ─────────────────────────────────────────── */
.load-more-wrap { text-align: center; margin-top: 2.5rem; }
.btn-load-more {
  background: var(--white); border: 2px solid var(--pink);
  color: var(--pink); padding: .85rem 2.5rem;
  border-radius: 4px; font-weight: 600; font-size: .95rem;
  cursor: pointer; transition: all var(--transition);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-load-more:hover { background: var(--pink); color: #fff; }
.btn-load-more:disabled { opacity: .6; cursor: not-allowed; }

/* ── CATEGORY ADMIN SEO PREVIEW ──────────────────────────────── */
#catSerpTitle { transition: color .1s; }

/* ── ADMIN ABANDONED CARTS ───────────────────────────────────── */
.recovery-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .75rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   NEW ADMIN COMPONENTS — Pages, Media, Profile, Cache, Perf, etc.
   ══════════════════════════════════════════════════════════════ */

/* ── ADMIN TABS ──────────────────────────────────────────────── */
.admin-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 2px solid #eee; padding-bottom: 0;
}
.admin-tab {
  padding: 9px 16px; font-size: .85rem; font-weight: 500;
  color: var(--gray); text-decoration: none; border-radius: 6px 6px 0 0;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all .15s; white-space: nowrap;
}
.admin-tab:hover { color: var(--pink); background: rgba(201,169,110,.05); }
.admin-tab.active {
  color: var(--pink); border-bottom-color: var(--pink);
  background: rgba(201,169,110,.06); font-weight: 600;
}

/* ── MEDIA GRID ──────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.media-item {
  border: 2px solid #eee; border-radius: 10px; overflow: hidden;
  cursor: pointer; transition: all .15s; position: relative;
  background: #fafafa;
}
.media-item:hover { border-color: var(--pink); box-shadow: 0 4px 14px rgba(201,169,110,.15); }
.media-item.selected { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(201,169,110,.25); }
.media-item-info {
  padding: 6px 8px; border-top: 1px solid #f0f0f0; background: #fff;
}
.media-item-actions {
  position: absolute; top: 6px; right: 6px;
  display: none; gap: 4px; flex-direction: column;
}
.media-item:hover .media-item-actions { display: flex; }
.media-btn {
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  cursor: pointer; font-size: .9rem; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  text-decoration: none; transition: all .15s;
}
.media-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.media-btn-delete:hover { background: #fee2e2; }

/* ── ADMIN STAT CARDS ────────────────────────────────────────── */
.admin-stat-card {
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  padding: 20px 16px; transition: box-shadow .15s;
}
.admin-stat-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }

/* ── CACHE ACTION BUTTONS ────────────────────────────────────── */
.admin-cache-action-btn {
  width: 100%; padding: 20px 16px; background: #fff;
  border: 2px solid #eee; border-radius: 12px; cursor: pointer;
  text-align: center; transition: all .15s; display: block;
  font-family: inherit;
}
.admin-cache-action-btn:hover {
  border-color: var(--pink); background: #fff5f8;
  box-shadow: 0 4px 14px rgba(201,169,110,.12);
}

/* ── ADMIN TOOL CARDS ────────────────────────────────────────── */
.admin-tool-card {
  display: block; padding: 20px; background: #fff;
  border: 2px solid #eee; border-radius: 12px;
  text-decoration: none; color: inherit; transition: all .15s;
  text-align: center;
}
.admin-tool-card:hover {
  border-color: var(--pink); background: #fff5f8;
  box-shadow: 0 4px 14px rgba(201,169,110,.12); color: inherit;
}

/* ── ADMIN SIDEBAR TWEAKS ────────────────────────────────────── */
.admin-sidebar { overflow-y: auto; }
.nav-section {
  font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 16px 20px 4px; margin-top: 4px;
}

/* ── BADGE STYLES ────────────────────────────────────────────── */
.badge-success { background: #dcfce7; color: #16a34a; }
.badge-warning { background: #fef3c7; color: #b45309; }
.badge-danger  { background: #fee2e2; color: #dc2626; }
.badge-info    { background: #dbeafe; color: #1d4ed8; }
.badge-gray    { background: #f3f4f6; color: #6b7280; }

/* ── FORM TWEAKS ─────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb;
  border-radius: 8px; font-size: .9rem; font-family: inherit;
  background: #fff; transition: border-color .15s;
  box-sizing: border-box;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(201,169,110,.12);
}
.form-label {
  display: block; font-weight: 600; font-size: .85rem;
  color: #374151; margin-bottom: 5px;
}

/* ── SEO CHECK ITEMS ─────────────────────────────────────────── */
.seo-check { transition: color .2s; }
.seo-check-icon { transition: background .2s, color .2s; }

/* ── SYSTEM UPDATE PAGE ──────────────────────────────────────── */
.update-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #f0f0f0;
}
.update-step:last-child { border-bottom: none; }

/* ── PERFORMANCE PAGE ────────────────────────────────────────── */
.perf-tab-content { display: none; }
.perf-tab-content.active { display: block; }

/* ── TOPBAR BREADCRUMB ───────────────────────────────────────── */
.admin-topbar-actions {
  display: flex; align-items: center; gap: 12px; font-size: .85rem;
}

/* ── ADMIN LAYOUT MAIN AREA ─────────────────────────────────── */
.admin-content { min-height: calc(100vh - 64px); }

/* ── RESPONSIVE SIDEBAR ──────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-tabs { font-size: .78rem; }
  .admin-tab  { padding: 7px 10px; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   CONVERSION BOOSTER STYLES v3.0 — Psychology-driven UX
═══════════════════════════════════════════════════════════════ */

/* ── ROTATING ANNOUNCEMENT BAR ───────────────────────────────── */
.announcement-bar { position: relative; overflow: hidden; min-height: 34px; }
.announce-slides { display: flex; flex-direction: column; }
.announce-slide {
  display: none; padding: .4rem 1rem; text-align: center;
  font-size: .82rem; font-weight: 500; color: #fff;
  animation: slideIn .5s ease;
}
.announce-slide.active { display: block; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── AS SEEN IN / AUTHORITY BAR ──────────────────────────────── */
.authority-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 2rem;
}
.authority-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 2.5rem;
  flex-wrap: wrap; justify-content: center;
}
.authority-label {
  font-size: .72rem; font-weight: 700; color: var(--gray);
  text-transform: uppercase; letter-spacing: .12em; flex-shrink: 0;
  white-space: nowrap;
}
.authority-logos { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.authority-logo {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  color: #aab; letter-spacing: -.5px; opacity: .75;
  transition: opacity .2s; white-space: nowrap;
}
.authority-logo:hover { opacity: 1; color: var(--gray); }
.authority-logo small { font-size: .65rem; display: block; letter-spacing: .1em; font-family: var(--font-body); font-weight: 400; margin-top: -3px; }

/* ── UGC / PHOTO GRID ────────────────────────────────────────── */
.ugc-section { background: var(--cream); }
.ugc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 2rem;
}
@media (max-width: 768px) { .ugc-grid { grid-template-columns: repeat(2, 1fr); } }
.ugc-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1; cursor: pointer; group: true;
}
.ugc-card-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink-pale) 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .5rem; font-size: 3.5rem;
  transition: transform .3s ease;
  position: relative;
}
.ugc-card:hover .ugc-card-inner { transform: scale(1.05); }
.ugc-card-overlay {
  position: absolute; inset: 0; background: linear-gradient(0deg, rgba(201,169,110,.85) 0%, transparent 50%);
  opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end;
  padding: 1rem; color: #fff;
}
.ugc-card:hover .ugc-card-overlay { opacity: 1; }
.ugc-card-overlay p { font-size: .8rem; line-height: 1.3; font-style: italic; }
.ugc-card-img-wrap {
  width: 100%; height: 100%; object-fit: cover;
}
.ugc-cta { text-align: center; margin-top: 1.5rem; }
.ugc-cta p { color: var(--gray); font-size: .88rem; margin-bottom: 1rem; }

/* ── GIFT FINDER SECTION ─────────────────────────────────────── */
.gift-finder-section {
  background: linear-gradient(135deg, #faf8f3 0%, #faf8f3 50%, #faf8f3 100%);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
}
.gift-finder-options {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin: 2rem 0;
}
.gift-finder-option {
  background: var(--white); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  cursor: pointer; transition: all .22s; text-align: center;
  min-width: 130px; text-decoration: none; color: var(--charcoal);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.gift-finder-option:hover {
  border-color: var(--pink); background: var(--pink-pale);
  transform: translateY(-3px); box-shadow: var(--shadow);
  color: var(--charcoal);
}
.gift-finder-option .gfo-icon { font-size: 2.2rem; }
.gift-finder-option .gfo-age { font-weight: 700; font-size: .95rem; color: var(--pink); }
.gift-finder-option .gfo-label { font-size: .78rem; color: var(--gray); }

/* ── EMOTIONAL PRODUCT GUARANTEE ─────────────────────────────── */
.product-parent-promise {
  background: linear-gradient(135deg, #faf8f3 0%, #faf8f3 100%);
  border: 1.5px solid var(--pink-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  display: flex; align-items: flex-start; gap: 1rem;
}
.product-parent-promise .ppp-icon { font-size: 2rem; flex-shrink: 0; }
.product-parent-promise h4 { font-size: .95rem; color: var(--black); margin-bottom: .3rem; }
.product-parent-promise p { font-size: .82rem; color: var(--gray); line-height: 1.5; }

/* ── GIFT WRAP OPTION ────────────────────────────────────────── */
.gift-wrap-option {
  background: linear-gradient(135deg, #fff8f0 0%, #fef9fb 100%);
  border: 1.5px dashed #f0c0a0;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer; transition: all .2s;
}
.gift-wrap-option:hover { border-color: var(--pink); background: var(--pink-pale); }
.gift-wrap-option input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--pink); cursor: pointer; flex-shrink: 0; }
.gift-wrap-option label {
  cursor: pointer; flex: 1;
  display: flex; flex-direction: column; gap: .1rem;
}
.gift-wrap-option label strong { font-size: .9rem; color: var(--black); }
.gift-wrap-option label small { font-size: .78rem; color: var(--gray); }
.gift-wrap-option .gwo-price { font-weight: 700; color: var(--pink); font-size: .9rem; flex-shrink: 0; }

/* ── BLOG HERO — BRAND COLORS ────────────────────────────────── */
.blog-hero-header {
  background: linear-gradient(135deg, #fce4ef 0%, #faf8f3 40%, #f5f0e5 100%) !important;
  color: var(--charcoal) !important;
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-hero-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(201,169,110,.12) 0%, transparent 60%),
              radial-gradient(circle at 80% 50%, rgba(201,169,110,.1) 0%, transparent 60%);
  pointer-events: none;
}
.blog-hero-header h1 { color: var(--black) !important; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.blog-hero-header h1 span { color: var(--pink); }
.blog-hero-header p { color: var(--gray) !important; max-width: 520px; margin: .75rem auto 0; }

/* ── EXIT-INTENT POPUP ───────────────────────────────────────── */
.exit-popup {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.exit-popup.open { display: flex; }
.exit-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.exit-popup-box {
  position: relative; background: var(--white);
  border-radius: 20px; padding: 2.5rem 2.5rem 2rem;
  max-width: 520px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  text-align: center;
  animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.exit-popup-close {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 1.4rem; color: var(--gray); background: none;
  border: none; cursor: pointer; line-height: 1; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all .2s;
}
.exit-popup-close:hover { background: var(--gray-light); color: var(--black); }
.exit-popup-emoji { font-size: 3.5rem; margin-bottom: 1rem; display: block; }
.exit-popup-box h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: .5rem; }
.exit-popup-box .exit-subtitle { color: var(--gray); font-size: .9rem; margin-bottom: 1.5rem; line-height: 1.5; }
.exit-code-box {
  background: var(--pink-pale); border: 2px dashed var(--pink);
  border-radius: var(--radius); padding: .75rem 1.5rem;
  margin: 1rem 0; display: inline-block;
}
.exit-code-box .code-val { font-size: 1.6rem; font-weight: 700; color: var(--pink); letter-spacing: .12em; }
.exit-code-box .code-label { font-size: .72rem; color: var(--gray); }
.exit-popup-btns { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.exit-skip-btn { font-size: .8rem; color: var(--gray); background: none; border: none; cursor: pointer; text-decoration: underline; }
.exit-skip-btn:hover { color: var(--charcoal); }

/* ── DESKTOP STICKY ATC ──────────────────────────────────────── */
.sticky-product-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: var(--white); border-top: 2px solid var(--pink-light);
  box-shadow: 0 -4px 24px rgba(201,169,110,.15);
  padding: .85rem 2rem;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sticky-product-bar.visible { transform: translateY(0); }
.sticky-product-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  justify-content: space-between;
}
.sticky-bar-product { display: flex; align-items: center; gap: 1rem; }
.sticky-bar-thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 2px solid var(--pink-light); }
.sticky-bar-name { font-weight: 700; font-size: .95rem; color: var(--black); }
.sticky-bar-price { color: var(--pink); font-weight: 700; font-size: 1.05rem; }
.sticky-bar-old-price { color: var(--gray); text-decoration: line-through; font-size: .82rem; }
.sticky-bar-right { display: flex; align-items: center; gap: 1rem; }
.sticky-bar-guarantee { font-size: .78rem; color: var(--gray); text-align: center; }

/* ── PRODUCT COMPARISON TABLE ────────────────────────────────── */
.comparison-section { margin-top: 3rem; }
.comparison-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.comparison-table th {
  background: var(--pink-pale); padding: .9rem 1.2rem;
  font-size: .85rem; font-weight: 700; text-align: left;
  border-bottom: 2px solid var(--pink-light);
}
.comparison-table th:first-child { background: var(--gray-light); }
.comparison-table td {
  padding: .8rem 1.2rem; font-size: .85rem;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table td:first-child { font-weight: 600; color: var(--charcoal); background: #fafafa; }
.comparison-check { color: #16a34a; font-size: 1.1rem; font-weight: 700; }
.comparison-cross { color: #dc2626; font-size: 1.1rem; }

/* ── IMPROVED REVIEW CARDS ───────────────────────────────────── */
.review-card {
  position: relative;
  border: 1.5px solid var(--border);
}
.review-card::before {
  content: '"';
  position: absolute; top: .5rem; left: 1rem;
  font-family: var(--font-head); font-size: 5rem;
  color: var(--pink-light); line-height: 1;
  pointer-events: none;
}
.review-verified-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #dcfce7; color: #16a34a;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 4px;
  margin-bottom: .5rem;
}

/* ── SALE URGENCY BANNER ─────────────────────────────────────── */
.sale-countdown-banner {
  background: linear-gradient(135deg, #a68b52 0%, var(--pink) 100%);
  color: #fff; text-align: center;
  padding: .6rem 1rem; font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  flex-wrap: wrap;
}
.sale-timer-units { display: flex; gap: .5rem; align-items: center; }
.sale-timer-unit {
  background: rgba(255,255,255,.2); border-radius: 6px;
  padding: .2rem .5rem; font-weight: 700;
  font-size: .9rem; min-width: 32px; text-align: center;
}
.sale-timer-sep { font-weight: 300; opacity: .7; }

/* ── PRODUCT EMOTIONAL HOOKS ─────────────────────────────────── */
.product-emotional-hook {
  background: linear-gradient(135deg, #faf9f7 0%, #faf8f3 100%);
  border-left: 4px solid var(--pink);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-style: italic;
  color: var(--charcoal);
  font-size: .9rem;
  line-height: 1.6;
}
.product-emotional-hook cite {
  display: block; margin-top: .5rem;
  font-style: normal; font-size: .78rem;
  color: var(--gray); font-weight: 600;
}

/* ── TRUST SEAL ROW ──────────────────────────────────────────── */
.trust-seal-row {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 1rem; flex-wrap: wrap;
}
.trust-seal {
  display: flex; align-items: center; gap: .35rem;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 8px; padding: .4rem .75rem;
  font-size: .75rem; font-weight: 600; color: var(--charcoal);
  white-space: nowrap;
}
.trust-seal .ts-icon { font-size: .95rem; }

/* ── URGENCY PILL ────────────────────────────────────────────── */
.urgency-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fef3c7; border: 1px solid #f59e0b;
  color: #92400e; border-radius: 4px;
  padding: .3rem .85rem; font-size: .78rem; font-weight: 700;
  animation: pulse-border 2s ease-in-out infinite;
}
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}

/* ── HOMEPAGE COMPARISON STRIP ───────────────────────────────── */
.vs-section { background: var(--white); }
.vs-table-wrap { overflow-x: auto; margin-top: 2rem; }
.vs-table {
  width: 100%; border-collapse: collapse;
  font-size: .88rem; min-width: 500px;
}
.vs-table thead th {
  padding: 1rem 1.5rem; text-align: center; font-weight: 700;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
}
.vs-table thead th:nth-child(2) {
  background: var(--pink); color: #fff;
  border-radius: 12px 12px 0 0;
}
.vs-table thead th:nth-child(3) { color: var(--gray); }
.vs-table tbody tr:nth-child(even) { background: #fafafa; }
.vs-table tbody td {
  padding: .85rem 1.5rem; text-align: center;
  border-bottom: 1px solid var(--border);
}
.vs-table tbody td:first-child { text-align: left; font-weight: 500; }
.vs-table tbody td:nth-child(2) {
  background: rgba(201,169,110,.05);
  border-left: 2px solid var(--pink);
  border-right: 2px solid var(--pink);
}
.vs-table tbody tr:last-child td:nth-child(2) {
  border-bottom: 2px solid var(--pink);
  border-radius: 0 0 12px 12px;
}
.vs-check { color: #16a34a; font-size: 1.2rem; }
.vs-cross { color: #dc2626; font-size: 1.1rem; }
.vs-partial { color: #b45309; font-size: .85rem; }

/* ── STICKY BUNDLE PROMPT ────────────────────────────────────── */
.bundle-teaser {
  background: linear-gradient(135deg, #fff8f0 0%, #faf8f3 100%);
  border: 1.5px solid #f0c09a;
  border-radius: var(--radius); padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.bundle-teaser-icon { font-size: 1.8rem; flex-shrink: 0; }
.bundle-teaser-text { flex: 1; }
.bundle-teaser-text strong { font-size: .88rem; color: var(--black); display: block; }
.bundle-teaser-text small { font-size: .78rem; color: var(--gray); }
.bundle-teaser-btn { flex-shrink: 0; }

/* ── PHOTO TESTIMONIAL STRIP ─────────────────────────────────── */
.photo-reviews-strip {
  display: flex; gap: 1.25rem; overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--pink-light) transparent;
}
.photo-review-card {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  min-width: 260px; max-width: 280px; flex-shrink: 0;
  transition: box-shadow .2s, border-color .2s;
}
.photo-review-card:hover { border-color: var(--pink); box-shadow: var(--shadow); }
.photo-review-stars { color: #f59e0b; font-size: 1rem; margin-bottom: .5rem; }
.photo-review-text { font-size: .85rem; line-height: 1.55; color: var(--charcoal); margin-bottom: .75rem; }
.photo-review-author { display: flex; align-items: center; gap: .6rem; }
.photo-review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.photo-review-name { font-weight: 700; font-size: .82rem; }
.photo-review-product { font-size: .72rem; color: var(--gray); }
.photo-review-date { font-size: .7rem; color: var(--gray); margin-left: auto; }

/* ── MOBILE GIFT CTA BANNER ──────────────────────────────────── */
.gift-cta-strip {
  background: linear-gradient(135deg, var(--pink) 0%, #a68b52 100%);
  color: #fff; text-align: center;
  padding: 1.25rem 1.5rem; margin-top: 2rem;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; justify-content: space-between;
}
.gift-cta-strip .gcta-text { flex: 1; min-width: 200px; }
.gift-cta-strip .gcta-text h3 { color: #fff; font-size: 1.1rem; margin-bottom: .25rem; }
.gift-cta-strip .gcta-text p { font-size: .82rem; opacity: .9; }
.gift-cta-strip .gcta-btn {
  background: #fff; color: var(--pink);
  font-weight: 700; padding: .65rem 1.5rem;
  border-radius: 4px; font-size: .88rem;
  white-space: nowrap; flex-shrink: 0;
  transition: all .2s; text-decoration: none;
  display: inline-block;
}
.gift-cta-strip .gcta-btn:hover { background: var(--pink-pale); transform: scale(1.03); }

/* ── ANNOUNCEMENT PULSE ──────────────────────────────────────── */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(201,169,110,.4), 0 1px 3px rgba(201,169,110,.2); }
  50% { box-shadow: 0 6px 22px rgba(201,169,110,.7), 0 2px 8px rgba(201,169,110,.4); }
}
.btn-pulse { animation: btn-pulse 2.2s ease-in-out infinite; }

/* ── PRODUCT RATING VISUAL ───────────────────────────────────── */
.product-micro-rating {
  display: flex; align-items: center; gap: .5rem;
  background: #fef3c7; border-radius: 4px;
  padding: .3rem .85rem; width: fit-content;
  margin-bottom: .75rem;
}
.product-micro-rating .pmr-stars { color: #f59e0b; font-size: .85rem; }
.product-micro-rating .pmr-text { font-size: .78rem; font-weight: 600; color: #92400e; }

/* ── IMPROVED BENEFIT LIST ───────────────────────────────────── */
.benefit-list-enhanced {
  display: flex; flex-direction: column; gap: .6rem;
  margin: 1rem 0;
}
.benefit-list-enhanced .bli {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .88rem; line-height: 1.4; color: var(--charcoal);
}
.benefit-list-enhanced .bli .bli-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #dcfce7; color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; margin-top: 1px;
}

/* ── POPULAR BADGE ───────────────────────────────────────────── */
.popular-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff; font-size: .7rem; font-weight: 700;
  padding: .2rem .65rem; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .05em;
  display: inline-block; margin-left: .5rem;
  vertical-align: middle;
}

/* ── RESPONSIVE FIXES ────────────────────────────────────────── */
@media (max-width: 768px) {
  .sticky-product-bar { display: none; }
  .gift-finder-options { gap: .75rem; }
  .gift-finder-option { min-width: 100px; padding: 1rem; }
  .vs-table tbody td { padding: .65rem .85rem; }
  .ugc-grid { gap: .4rem; }
  .authority-logos { gap: 1.25rem; }
  .exit-popup-box { padding: 2rem 1.5rem; }
}

/* ════════════════════════════════════════════════════════════
   TIER 1-4 UPGRADE STYLES — 2026
   ════════════════════════════════════════════════════════════ */

/* ── GDPR COOKIE BANNER ─────────────────────────────────────── */
.gdpr-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: #1a1a2e; color: #e8e8e8;
  padding: 1rem 1.5rem;
  box-shadow: 0 -4px 24px rgba(0,0,0,.3);
  animation: slideUpIn .4s ease;
}
@keyframes slideUpIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.gdpr-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.gdpr-text { flex: 1; font-size: .875rem; line-height: 1.5; min-width: 280px; }
.gdpr-actions { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }
.gdpr-btn {
  padding: .5rem 1.25rem; border-radius: 4px; font-size: .85rem;
  font-weight: 600; cursor: pointer; border: 2px solid transparent;
  transition: all .2s;
}
.gdpr-reject {
  background: transparent; border-color: rgba(255,255,255,.3); color: #e8e8e8;
}
.gdpr-reject:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.gdpr-accept {
  background: var(--pink); border-color: var(--pink); color: #fff;
}
.gdpr-accept:hover { filter: brightness(1.1); }

/* ── QUICK VIEW MODAL ───────────────────────────────────────── */
.qv-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.qv-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.qv-inner {
  position: relative; background: var(--white);
  border-radius: var(--radius-lg); max-width: 860px; width: 100%;
  max-height: 90vh; overflow-y: auto; z-index: 1;
  box-shadow: 0 25px 80px rgba(0,0,0,.2);
  animation: qvIn .25s ease;
}
@keyframes qvIn { from { opacity:0; transform: scale(.97) translateY(10px); } to { opacity:1; transform: none; } }
.qv-close {
  position: absolute; top: 1rem; right: 1rem; font-size: 2rem; line-height: 1;
  color: var(--gray); z-index: 2; background: var(--gray-light);
  border: none; cursor: pointer; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all .2s;
}
.qv-close:hover { background: var(--pink); color: #fff; }
.qv-content { padding: 2rem; }
.qv-loading {
  text-align: center; padding: 3rem; color: var(--gray);
  font-size: 1rem;
}
.qv-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 640px) { .qv-grid { grid-template-columns: 1fr; } }
.qv-img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 1; }
.qv-name { font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.qv-price-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.qv-sale { font-size: 1.5rem; font-weight: 800; color: var(--pink); }
.qv-reg { font-size: 1rem; color: var(--gray); text-decoration: line-through; }
.qv-desc { color: var(--gray); font-size: .9rem; line-height: 1.6; margin-bottom: 1.25rem; }
.qv-stars { display: flex; align-items: center; gap: .35rem; margin-bottom: .75rem; font-size: .85rem; }
.qv-btns { display: flex; gap: .75rem; flex-direction: column; }
.qv-view-link {
  text-align: center; display: block; color: var(--pink);
  font-size: .85rem; font-weight: 600; margin-top: .5rem;
  text-decoration: underline;
}

/* ── SEARCH AUTOCOMPLETE ────────────────────────────────────── */
.search-dropdown {
  position: fixed; z-index: 800;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,.12);
  overflow: hidden; max-height: 380px; overflow-y: auto;
  min-width: 320px;
}
.search-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s; text-decoration: none; color: var(--charcoal);
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: var(--pink-pale); }
.search-item img {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0;
}
.search-item-img-placeholder {
  width: 44px; height: 44px; background: var(--pink-pale);
  border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.search-item-name { font-size: .88rem; font-weight: 600; }
.search-item-price { font-size: .8rem; color: var(--pink); font-weight: 700; margin-top: .1rem; }
.search-item-all {
  display: block; text-align: center; padding: .65rem 1rem;
  background: var(--pink-pale); color: var(--pink); font-weight: 600; font-size: .85rem;
  text-decoration: none;
}
.search-item-all:hover { background: var(--pink); color: var(--white); }

/* ── AGE FILTER PILLS ───────────────────────────────────────── */
.age-filter-pills {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
}
.age-pill {
  display: inline-block; padding: .35rem .85rem;
  border-radius: 4px; font-size: .8rem; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--gray);
  background: var(--white); text-decoration: none;
  transition: all .2s; white-space: nowrap;
}
.age-pill:hover { border-color: var(--pink); color: var(--pink); }
.age-pill.active {
  background: var(--pink); border-color: var(--pink);
  color: #fff !important;
}

/* ── IN-STOCK TOGGLE ────────────────────────────────────────── */
.instock-toggle {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--charcoal);
  user-select: none;
}
.instock-toggle input[type=checkbox] { display: none; }
.instock-toggle-track {
  width: 38px; height: 22px; border-radius: 11px;
  background: var(--border); transition: background .2s; position: relative; flex-shrink: 0;
}
.instock-toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .2s;
}
.instock-toggle input:checked + .instock-toggle-track { background: var(--pink); }
.instock-toggle input:checked + .instock-toggle-track::after { transform: translateX(16px); }

/* ── GIFT WRAP CHECKOUT ─────────────────────────────────────── */
.gift-wrap-label {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  border: 2px dashed var(--border); cursor: pointer;
  transition: all .2s;
}
.gift-wrap-label:hover { border-color: var(--pink); background: var(--pink-pale); }
.gift-wrap-label input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--pink); flex-shrink: 0; cursor: pointer;
}
.gift-wrap-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ── RECENTLY VIEWED STRIP ──────────────────────────────────── */
.recently-viewed-section {
  padding: 2rem 0; background: var(--gray-light);
}
.recently-viewed-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.recently-viewed-header h3 { font-size: 1.1rem; font-weight: 700; }
.recently-viewed-strip {
  display: flex; gap: 1rem; overflow-x: auto;
  scrollbar-width: thin; padding-bottom: .5rem;
}
.rv-card {
  flex-shrink: 0; width: 140px; text-decoration: none; color: var(--charcoal);
}
.rv-card img {
  width: 140px; height: 140px; object-fit: cover;
  border-radius: var(--radius); display: block;
  transition: transform .25s; border: 2px solid transparent;
}
.rv-card:hover img { transform: scale(1.04); border-color: var(--pink); }
.rv-card-name {
  font-size: .8rem; font-weight: 600; margin-top: .4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-card-price { font-size: .78rem; color: var(--pink); font-weight: 700; }

/* ── BACK IN STOCK FORM ─────────────────────────────────────── */
.back-in-stock-box {
  background: var(--pink-pale); border: 1.5px solid var(--pink-light);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
.back-in-stock-box h4 { font-size: .95rem; font-weight: 700; margin-bottom: .35rem; }
.back-in-stock-box p { font-size: .83rem; color: var(--gray); margin-bottom: .75rem; }
.bis-form { display: flex; gap: .5rem; }
.bis-form input {
  flex: 1; padding: .55rem 1rem; border-radius: 4px;
  border: 1.5px solid var(--border); font-size: .85rem; outline: none;
}
.bis-form input:focus { border-color: var(--pink); }
.bis-form button {
  background: var(--pink); color: #fff; border: none;
  padding: .55rem 1.25rem; border-radius: 4px;
  font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bis-form button:hover { filter: brightness(1.1); }

/* ── SIZE & AGE GUIDE MODAL ─────────────────────────────────── */
.size-guide-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.size-guide-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.size-guide-inner {
  position: relative; background: var(--white);
  border-radius: var(--radius-lg); max-width: 600px; width: 100%;
  max-height: 90vh; overflow-y: auto; z-index: 1;
  padding: 2rem; box-shadow: 0 25px 80px rgba(0,0,0,.2);
}
.size-guide-close {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 1.5rem; background: var(--gray-light);
  border: none; cursor: pointer; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.sg-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
.sg-table th {
  background: var(--pink); color: #fff; padding: .6rem 1rem;
  text-align: left; font-weight: 600;
}
.sg-table td { padding: .55rem 1rem; border-bottom: 1px solid var(--border); }
.sg-table tr:nth-child(even) td { background: var(--pink-pale); }

/* ── ORDER TRACKING PAGE ────────────────────────────────────── */
.track-form-card {
  max-width: 520px; margin: 3rem auto; background: var(--white);
  border-radius: var(--radius-lg); padding: 2.5rem;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
}
.track-result-card {
  max-width: 700px; margin: 2rem auto; background: var(--white);
  border-radius: var(--radius-lg); padding: 2rem;
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
}
.track-status-badge {
  display: inline-block; padding: .35rem 1rem; border-radius: 4px;
  font-weight: 700; font-size: .85rem;
}
.track-status-pending  { background: #fef3c7; color: #92400e; }
.track-status-paid     { background: #dbeafe; color: #1e40af; }
.track-status-shipped  { background: #d1fae5; color: #065f46; }
.track-status-delivered{ background: #dcfce7; color: #14532d; }
.track-status-cancelled{ background: #fee2e2; color: #991b1b; }
.track-timeline { display: flex; flex-direction: column; gap: 0; margin: 1.5rem 0; }
.track-step {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .75rem 0; position: relative;
}
.track-step::before {
  content: ''; position: absolute; left: 19px; top: 40px;
  width: 2px; height: calc(100% - 20px); background: var(--border);
}
.track-step:last-child::before { display: none; }
.track-step-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  background: var(--gray-light); border: 2px solid var(--border);
}
.track-step.done .track-step-icon { background: #d1fae5; border-color: #059669; }
.track-step.active .track-step-icon { background: var(--pink-pale); border-color: var(--pink); }
.track-step-label { font-size: .9rem; font-weight: 600; padding-top: .6rem; }
.track-step-date { font-size: .78rem; color: var(--gray); }

/* ── LOYALTY POINTS SECTION ─────────────────────────────────── */
.loyalty-card {
  background: linear-gradient(135deg, var(--pink) 0%, #c2185b 100%);
  color: #fff; border-radius: var(--radius-lg); padding: 2rem;
  text-align: center; margin-bottom: 1.5rem;
}
.loyalty-points-big { font-size: 3rem; font-weight: 800; }
.loyalty-points-label { font-size: .9rem; opacity: .85; margin-bottom: .25rem; }
.loyalty-how-it-works { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 1.5rem 0; }
.lhiw-step {
  flex: 1; min-width: 140px; background: var(--pink-pale);
  border-radius: var(--radius); padding: 1.25rem; text-align: center;
}
.lhiw-icon { font-size: 2rem; margin-bottom: .5rem; }
.lhiw-title { font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.lhiw-desc { font-size: .8rem; color: var(--gray); }

/* ── BACK TO TOP POLISHED ───────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 500;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pink); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(201,169,110,.4);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: all .3s;
}
.back-to-top.visible { opacity: 1; transform: none; pointer-events: all; }
.back-to-top:hover { filter: brightness(1.1); }

/* ── SEARCH FORM POSITION RELATIVE ─────────────────────────── */
.search-form { position: relative; }


/* ── PARENT TESTIMONIALS ─────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}
.testimonial-card:hover {
  box-shadow: 0 8px 32px rgba(201,169,110,.12);
  transform: translateY(-2px);
}
.testimonial-card.testimonial-featured {
  border-color: var(--pink);
  box-shadow: 0 4px 20px rgba(201,169,110,.15);
}
.testimonial-badge {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  margin-bottom: .5rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.testimonial-stars { color: #f59e0b; font-size: 1rem; margin-bottom: .75rem; }
.testimonial-text {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--black);
  margin-bottom: 1.25rem;
  font-style: italic;
}
.testimonial-text::before { content: '\201C'; }
.testimonial-text::after  { content: '\201D'; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}
.testimonial-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 1rem; flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: .9rem; }
.testimonial-author span { font-size: .78rem; color: var(--gray); }
.testimonial-product {
  font-size: .75rem;
  color: var(--pink);
  font-weight: 600;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.testimonials-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.testimonials-summary-item {
  text-align: center;
}
.testimonials-summary-item strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--pink);
}
.testimonials-summary-item span {
  font-size: .8rem;
  color: var(--gray);
}
.testimonials-summary-divider {
  width: 1px; height: 40px; background: var(--border);
}
@media (max-width: 640px) {
  .testimonials-summary-divider { display: none; }
  .testimonials-summary { gap: 1rem; }
}

/* ── AI CHAT WIDGET ──────────────────────────────────────── */
.ai-chat-widget {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.ai-chat-toggle {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #9333ea);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(147,51,234,.35);
  transition: transform .2s, box-shadow .2s;
  position: relative;
  flex-shrink: 0;
}
.ai-chat-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(147,51,234,.45);
}
.ai-unread-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.ai-chat-panel {
  width: 340px; max-height: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  opacity: 0;
  pointer-events: none;
  display: flex; flex-direction: column;
}
.ai-chat-panel.open {
  max-height: 520px;
  opacity: 1;
  pointer-events: all;
}
.ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1rem;
  background: linear-gradient(135deg, var(--pink), #9333ea);
  color: #fff;
  flex-shrink: 0;
}
.ai-chat-header-info { display: flex; align-items: center; gap: .625rem; }
.ai-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.ai-chat-name { font-weight: 700; font-size: .95rem; }
.ai-chat-status { font-size: .72rem; opacity: .85; display: flex; align-items: center; gap: 4px; }
.ai-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; flex-shrink: 0;
}
.ai-chat-close {
  background: none; border: none; color: #fff; font-size: 1.4rem;
  cursor: pointer; opacity: .8; line-height: 1; padding: 0;
}
.ai-chat-close:hover { opacity: 1; }
.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: .875rem;
  display: flex; flex-direction: column; gap: .625rem;
  max-height: 320px;
  scrollbar-width: thin;
}
.ai-chat-message { display: flex; }
.ai-msg-bot { justify-content: flex-start; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bubble {
  max-width: 82%;
  padding: .625rem .875rem;
  border-radius: 1rem;
  font-size: .875rem;
  line-height: 1.5;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--pink-pale);
  border-bottom-left-radius: .25rem;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, var(--pink), #c040a0);
  color: #fff;
  border-bottom-right-radius: .25rem;
}
.ai-msg-thinking .ai-msg-bubble {
  display: flex; gap: 4px; align-items: center; padding: .75rem 1rem;
}
.ai-thinking-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink); animation: thinkingPulse 1.2s infinite;
}
.ai-thinking-dot:nth-child(2) { animation-delay: .2s; }
.ai-thinking-dot:nth-child(3) { animation-delay: .4s; }
@keyframes thinkingPulse {
  0%, 80%, 100% { transform: scale(.8); opacity: .5; }
  40% { transform: scale(1.2); opacity: 1; }
}
.ai-chat-suggestions {
  display: flex; flex-wrap: wrap; gap: .375rem; padding: 0 .25rem;
}
.ai-suggestion {
  background: #fff; border: 1px solid var(--pink);
  color: var(--pink); border-radius: 1rem;
  padding: .3rem .75rem; font-size: .75rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.ai-suggestion:hover { background: var(--pink); color: #fff; }
.ai-chat-input-area {
  display: flex; gap: .5rem; padding: .75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-input {
  flex: 1; border: 1px solid var(--border); border-radius: 2rem;
  padding: .5rem .875rem; font-size: .875rem;
  outline: none; transition: border-color .15s;
  font-family: inherit;
}
.ai-chat-input:focus { border-color: var(--pink); }
.ai-chat-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), #9333ea);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .15s;
}
.ai-chat-send:hover { transform: scale(1.08); }
.ai-chat-footer {
  text-align: center; font-size: .7rem; color: var(--gray);
  padding: .375rem; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-footer a { color: var(--pink); }
@media (max-width: 640px) {
  .ai-chat-panel { width: calc(100vw - 1rem); right: .5rem; max-height: 75vh; }
  .ai-chat-widget { right: .75rem; bottom: 4.5rem; }
  .ai-chat-toggle { width: 50px; height: 50px; }
  .ai-chat-toggle svg { width: 22px; height: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE CRO & UI IMPROVEMENTS — Research-Backed 2026
   ═══════════════════════════════════════════════════════════════ */

/* ── You Save Callout (Product Page) ─────────────────────────── */
.you-save-callout {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #e8f5e9, #f1f8f3);
  border: 1.5px solid #81c784;
  border-radius: 10px;
  padding: .6rem 1rem;
  margin: .5rem 0 .25rem;
  font-size: .88rem;
}
.you-save-label { color: #2e7d32; font-weight: 600; }
.you-save-sale { color: var(--gray); font-size: .82rem; }

/* ── What's In The Box accordion ─────────────────────────────── */
.whats-in-box {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem 0;
}
.wib-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: #fafafa;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark);
  text-align: left;
  transition: background .2s;
}
.wib-toggle:hover { background: var(--pink-pale); }
.wib-chevron { transition: transform .2s; font-size: .9rem; color: var(--gray); }
.wib-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s;
}
.whats-in-box.wib-open .wib-content { max-height: 300px; }
.whats-in-box.wib-open .wib-chevron { transform: rotate(180deg); }
.wib-list {
  list-style: none;
  padding: .75rem 1rem .75rem 1.25rem;
  margin: 0;
  border-top: 1px solid var(--border);
  background: #fff;
}
.wib-list li {
  padding: .3rem 0;
  color: var(--dark);
  font-size: .88rem;
  position: relative;
  padding-left: 1.25rem;
}
.wib-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--pink);
  font-weight: 700;
}

/* ── Estimated Delivery ────────────────────────────────────────── */
.estimated-delivery {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff8e1;
  border: 1.5px solid #ffecb3;
  border-radius: 10px;
  padding: .65rem 1rem;
  margin: .75rem 0;
  font-size: .88rem;
}
.ed-icon { font-size: 1.2rem; flex-shrink: 0; }
.estimated-delivery div { display: flex; flex-direction: column; gap: .1rem; }
.estimated-delivery strong { font-size: .82rem; color: #795548; text-transform: uppercase; letter-spacing: .03em; }
.estimated-delivery span { color: var(--dark); font-weight: 500; }

/* ── Section Title Row (New Arrivals heading + CTA side by side) */
.section-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.section-title-row > div { flex: 1; }
.section-title-row .btn { white-space: nowrap; flex-shrink: 0; margin-bottom: .25rem; }

/* ── New Arrivals Eyebrow Label ──────────────────────────────── */
.new-arrivals-eyebrow {
  display: inline-block;
  background: linear-gradient(135deg, var(--pink), #e85d9a);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .25rem .75rem;
  border-radius: 4px;
  margin-bottom: .5rem;
}

/* ── NEW Badge on product cards ────────────────────────────────── */
.badge-new {
  background: linear-gradient(135deg, #4CAF50, #2e7d32) !important;
  color: #fff !important;
}

/* ── Brand Story Section ─────────────────────────────────────── */
.brand-story-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 768px) {
  .brand-story-row { grid-template-columns: 1fr; gap: 2rem; }
  .brand-story-image { display: none; }
}
.brand-story-img-wrap {
  position: relative;
  background: linear-gradient(135deg, #f5f0e8, #ebe4d4);
  border-radius: 24px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  box-shadow: 0 8px 40px rgba(201,169,110,.2);
}
.brand-story-badge-float {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--pink);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .4rem .9rem;
  border-radius: 4px;
  letter-spacing: .05em;
  box-shadow: 0 4px 12px rgba(201,169,110,.4);
}
.brand-story-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pink);
  margin-bottom: .5rem;
}
.brand-story-lead {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.6;
  margin: .75rem 0 1rem;
}
.brand-story-stats {
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--pink-pale);
  border-radius: 14px;
}
.bs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.bs-stat strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pink);
  display: block;
}
.bs-stat span {
  font-size: .75rem;
  color: var(--gray);
  text-align: center;
  margin-top: .1rem;
}

/* ── Product Card — Enhanced Polish ─────────────────────────── */
.product-card {
  transition: transform .22s cubic-bezier(.25,.46,.45,.94), box-shadow .22s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(201,169,110,.18);
}
.product-card .product-image {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.product-card .product-info {
  padding: 1rem;
}
.product-card .product-name {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dark);
  text-decoration: none;
  display: block;
  margin: .25rem 0;
}
.product-card .product-name:hover { color: var(--pink); }

/* ── Homepage Category Cards — Enhanced ─────────────────────── */
.category-card {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pink), #e85d9a);
  opacity: 0;
  transition: opacity .25s;
  border-radius: inherit;
  z-index: 0;
}
.category-card > * { position: relative; z-index: 1; }
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(201,169,110,.25);
}

/* ── Shop Page Product Grid — Better Spacing ─────────────────── */
@media (min-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Gift Finder options — Enhanced hover ─────────────────────── */
.gift-finder-option {
  transition: all .22s ease;
  border: 2px solid transparent;
}
.gift-finder-option:hover {
  border-color: var(--pink);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(201,169,110,.2);
}

/* ── Age Cards — Enhanced hover ─────────────────────────────── */
.age-card {
  transition: transform .22s ease, box-shadow .22s ease;
}
.age-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(201,169,110,.18);
}

/* ── Testimonial Cards — Enhanced ────────────────────────────── */
.testimonial-card {
  transition: transform .22s ease, box-shadow .22s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0,0,0,.1);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* ── Photo Reviews Strip — Horizontal Scroll ─────────────────── */
.photo-reviews-strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scroll-padding: 1rem;
}
.photo-reviews-strip::-webkit-scrollbar { height: 4px; }
.photo-reviews-strip::-webkit-scrollbar-track { background: var(--pink-pale); border-radius: 2px; }
.photo-reviews-strip::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 2px; }
.photo-review-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  border: 1px solid var(--border);
  transition: box-shadow .2s;
}
.photo-review-card:hover { box-shadow: 0 8px 30px rgba(201,169,110,.15); }
.photo-review-stars { color: #f59e0b; font-size: 1.1rem; margin-bottom: .5rem; }
.photo-review-text {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--dark);
  margin-bottom: 1rem;
  font-style: italic;
}
.photo-review-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
}
.photo-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.photo-review-name { font-weight: 600; font-size: .85rem; color: var(--dark); }
.photo-review-product { font-size: .75rem; color: var(--pink); }
.photo-review-date { margin-left: auto; font-size: .72rem; color: var(--gray); }

/* ── VS Table — Enhanced ─────────────────────────────────────── */
.vs-section { background: linear-gradient(180deg, var(--pink-pale) 0%, #fff 100%); }
.vs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vs-table th {
  padding: .75rem 1rem;
  background: var(--pink-pale);
  font-weight: 700;
}
.vs-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); }
.vs-table tr:hover td { background: #faf9f9; }
.vs-check { color: #2e7d32; font-weight: 700; font-size: 1rem; }
.vs-cross { color: #c62828; font-weight: 700; }
.vs-partial { color: #e65100; font-size: .82rem; font-weight: 600; }

/* ── Newsletter Section — Enhanced ────────────────────────────── */
.newsletter-input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(201,169,110,.15);
}

/* ── Sticky Add to Cart — More Prominent ─────────────────────── */
.sticky-atc {
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
}

/* ── Hero Micro Proof Avatars ─────────────────────────────────── */
.micro-proof-avatars {
  display: flex;
}
.micro-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  margin-left: -8px;
}
.micro-avatar:first-child { margin-left: 0; }
.hero-micro-proof {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .85rem;
  color: var(--gray);
  margin-top: 1rem;
}

/* ── Mobile Improvements ─────────────────────────────────────── */
@media (max-width: 768px) {
  .you-save-callout { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .brand-story-stats { gap: .75rem; }
  .section-title-row { flex-direction: column; align-items: flex-start; }
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ── Smooth Pulse on CTAs ────────────────────────────────────── */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(201,169,110,.4); }
  50% { box-shadow: 0 6px 25px rgba(201,169,110,.7); }
}
.btn-pulse { animation: softPulse 2.5s ease-in-out infinite; }

/* ── Sale Urgency Strip — More Visible ───────────────────────── */
.sale-urgency-strip {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: #c62828;
  font-weight: 600;
  padding: .35rem 0;
}
.urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c62828;
  display: inline-block;
  animation: blinkDot 1s ease-in-out infinite;
}
@keyframes blinkDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ── Feature Grid — Enhanced icons ──────────────────────────── */
.feature-item {
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(201,169,110,.15);
}
.feature-icon {
  font-size: 2.2rem;
  margin-bottom: .75rem;
  display: block;
}

/* ── Guarantee Banner — Enhanced ────────────────────────────── */
.guarantee-banner {
  background: linear-gradient(135deg, #fff9fb, var(--pink-pale));
  border: 2px solid var(--pink);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.guarantee-icon { font-size: 3rem; flex-shrink: 0; }
.guarantee-content { flex: 1; min-width: 200px; }
.guarantee-content h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.guarantee-badges { display: flex; gap: 1rem; flex-wrap: wrap; }
.g-badge {
  background: #fff;
  border: 1.5px solid var(--pink);
  border-radius: 10px;
  padding: .5rem .75rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--pink);
  min-width: 70px;
}
.g-badge span { display: block; font-size: 1.3rem; }

/* ── Trust Seals on Product Page — Enhanced ──────────────────── */
.trust-seal-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
.trust-seal {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray);
  background: #f9f9f9;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .3rem .65rem;
}
.ts-icon { font-size: 1rem; }

/* ── Benefit List on Product Page — Enhanced ─────────────────── */
.benefit-list-enhanced {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1rem 0;
}
.bli {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .88rem;
  color: var(--dark);
  line-height: 1.5;
}
.bli-icon {
  color: #2e7d32;
  font-weight: 700;
  margin-top: .1rem;
  flex-shrink: 0;
}

/* ── Breadcrumb — More elegant ────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--gray);
  flex-wrap: wrap;
  padding: .75rem 0;
}
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--pink); }
.breadcrumb .sep { opacity: .5; }

/* ── Blog Cards — Enhanced ───────────────────────────────────── */
.blog-card {
  border-radius: 16px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

/* ── CTA bottom of testimonials ──────────────────────────────── */
.testimonials-summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  overflow: hidden;
}
.testimonials-summary-item {
  flex: 1;
  min-width: 130px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.testimonials-summary-item strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--pink);
}
.testimonials-summary-item span {
  font-size: .78rem;
  color: var(--gray);
  display: block;
  margin-top: .2rem;
}
.testimonials-summary-divider {
  width: 1px;
  height: 60px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── BREADCRUMBS ────────────────────────────────────────────── */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
  font-size: .82rem;
  color: var(--gray);
}
.breadcrumbs li::after {
  content: '›';
  margin-left: .4rem;
  color: var(--border);
}
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs a { color: var(--gray); transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--pink); }
.breadcrumbs span[aria-current] { color: var(--charcoal); font-weight: 500; }

/* ── BNPL / KLARNA MESSAGING ───────────────────────────────── */
.bnpl-message {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--gray);
  margin: .5rem 0;
  flex-wrap: wrap;
}
.bnpl-klarna-logo {
  background: #FFB3C7;
  color: #17120F;
  font-weight: 800;
  font-size: .72rem;
  padding: .2rem .55rem;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: lowercase;
  font-family: Arial, sans-serif;
  flex-shrink: 0;
}
.bnpl-info {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border) !important;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition);
}
.bnpl-info:hover { border-color: var(--pink) !important; color: var(--pink); }

/* ── CART COUPON FIELD ──────────────────────────────────────── */
.cart-coupon-box {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--gray-light);
  border-radius: var(--radius-sm);
}
.coupon-form {
  display: flex;
  gap: .5rem;
}
.coupon-input {
  flex: 1;
  padding: .55rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: .85rem;
  background: var(--white);
  outline: none;
  transition: border-color var(--transition);
}
.coupon-input:focus { border-color: var(--pink); }
.coupon-apply-btn {
  padding: .55rem 1.2rem;
  background: var(--charcoal);
  color: var(--white);
  border: none;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.coupon-apply-btn:hover { background: var(--pink-dark); }
.coupon-hint {
  font-size: .75rem;
  color: var(--gray);
  margin-top: .5rem;
}
.cart-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: #065f46;
}
.coupon-remove-btn {
  background: none;
  border: none;
  color: #dc2626;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ── CART CROSS-SELL ────────────────────────────────────────── */
.cart-cross-sell {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1.5px solid var(--border);
}
.cart-cross-sell h3 {
  margin-bottom: 1rem;
  font-size: 1.15rem;
}
.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.cross-sell-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem .75rem;
  border: 1.5px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.cross-sell-item:hover {
  border-color: var(--pink-light);
  box-shadow: var(--shadow);
}
.cross-sell-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin-bottom: .75rem;
}
.cross-sell-info strong {
  display: block;
  font-size: .82rem;
  line-height: 1.3;
  margin-bottom: .3rem;
  color: var(--charcoal);
}
.cross-sell-price {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pink);
}
.cross-sell-price s {
  color: var(--gray);
  font-weight: 400;
  font-size: .75rem;
  margin-left: .3rem;
}

/* ── FOOTER TRUST BAR ──────────────────────────────────────── */
.footer-trust-bar {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin: 0 2rem;
  flex-wrap: wrap;
}
.footer-trust-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.85);
}
.fti-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.footer-trust-item div {
  display: flex;
  flex-direction: column;
}
.footer-trust-item strong {
  font-size: .88rem;
  color: #fff;
  line-height: 1.2;
}
.footer-trust-item span:not(.fti-icon) {
  font-size: .72rem;
  opacity: .65;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .cross-sell-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-trust-bar { gap: 1.5rem; }
  .cart-coupon-applied { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .footer-trust-bar {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin: 0 1rem;
  }
}

.blog-product-pick {
  margin: 2.5rem 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(201,169,110,.08);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.blog-product-pick:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--pink-light);
}
.blog-product-pick-label {
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .45rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.blog-product-pick-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
}
.blog-product-pick-img {
  position: relative;
  background: var(--pink-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 200px;
}
.blog-product-pick-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.blog-product-pick:hover .blog-product-pick-img img {
  transform: scale(1.04);
}
.blog-product-pick-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 4px;
  letter-spacing: .03em;
}
.blog-product-pick-info {
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-product-pick-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.blog-product-pick-name a {
  color: inherit;
  transition: color .2s;
}
.blog-product-pick-name a:hover {
  color: var(--pink);
}
.blog-product-pick-stars {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  color: var(--gray);
  margin-bottom: .5rem;
}
.blog-product-pick-stars .star-fill {
  color: #f59e0b;
}
.blog-product-pick-desc {
  font-size: .88rem;
  color: var(--gray);
  line-height: 1.55;
  margin-bottom: .8rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-product-pick-price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .8rem;
}
.blog-product-pick-price .current {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--pink-dark);
}
.blog-product-pick-price .was {
  font-size: .88rem;
  color: var(--gray);
  text-decoration: line-through;
}
.blog-product-pick-price .save-pct {
  font-size: .72rem;
  font-weight: 700;
  background: #fef2f2;
  color: #ef4444;
  padding: .15rem .45rem;
  border-radius: 4px;
}
.blog-product-pick-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(135deg, var(--pink), var(--pink-dark));
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  padding: .65rem 1.4rem;
  border-radius: var(--radius-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  width: fit-content;
}
.blog-product-pick-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,169,110,.35);
  color: #fff;
}
.blog-product-pick-trust {
  display: flex;
  gap: 1rem;
  margin-top: .6rem;
  font-size: .72rem;
  color: var(--gray);
}
.blog-product-pick-trust span {
  display: flex;
  align-items: center;
  gap: .25rem;
}

@media (max-width: 640px) {
  .blog-product-pick-inner {
    grid-template-columns: 1fr;
  }
  .blog-product-pick-img {
    min-height: 180px;
    max-height: 220px;
  }
  .blog-product-pick-info {
    padding: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HINAX STORE — Homepage Components
═══════════════════════════════════════════════════════════════ */

/* Hero */
.hinax-hero { background: #1a1a2e; color: #fff; position: relative; overflow: hidden; }
.hinax-hero-inner { display: grid; grid-template-columns: 1fr 1fr; max-width: 1400px; margin: 0 auto; min-height: 80vh; }
.hinax-hero-content { display: flex; flex-direction: column; justify-content: center; padding: 4rem 3rem 4rem 4rem; }
.hinax-hero-tag { text-transform: uppercase; letter-spacing: 4px; font-size: .78rem; color: #c9a96e; margin-bottom: 1.5rem; font-weight: 500; }
.hinax-hero-title { font-family: var(--font-head); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; margin-bottom: 1.5rem; font-weight: 400; color: #fff; }
.hinax-hero-title span { color: #c9a96e; font-style: italic; }
.hinax-hero-desc { font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.7); max-width: 480px; margin-bottom: 2rem; }
.hinax-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hinax-hero-image { position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.hinax-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

@media (max-width: 900px) {
  .hinax-hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hinax-hero-content { padding: 2.5rem 1.5rem; text-align: center; align-items: center; order: 2; }
  .hinax-hero-image { max-height: 45vh; min-height: 280px; order: 1; }
  .hinax-hero-actions { justify-content: center; }
  .hinax-hero-desc { font-size: .9rem; }
}
@media (max-width: 480px) {
  .hinax-hero-content { padding: 2rem 1.25rem 2.5rem; }
  .hinax-hero-tag { font-size: .7rem; letter-spacing: 3px; margin-bottom: 1rem; }
  .hinax-hero-title { font-size: 2rem; margin-bottom: 1rem; }
  .hinax-hero-desc { font-size: .85rem; line-height: 1.7; margin-bottom: 1.5rem; }
  .hinax-hero-actions { flex-direction: column; width: 100%; }
  .hinax-hero-actions .btn { width: 100%; text-align: center; padding: .85rem 1.5rem; }
  .hinax-hero-image { max-height: 40vh; min-height: 240px; }
}

/* Features Bar */
.hinax-features-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 1.2rem 0; }
.hinax-features-inner { display: flex; justify-content: center; gap: 3rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; flex-wrap: wrap; }
.hinax-feature { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--charcoal); font-weight: 500; }
.hinax-feature svg { color: #c9a96e; flex-shrink: 0; }

@media (max-width: 768px) {
  .hinax-features-inner { gap: 1rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 1rem; scrollbar-width: none; -ms-overflow-style: none; }
  .hinax-features-inner::-webkit-scrollbar { display: none; }
  .hinax-feature { white-space: nowrap; font-size: .78rem; flex-shrink: 0; }
  .hinax-feature svg { width: 18px; height: 18px; }
  .hinax-features-bar { padding: .8rem 0; }
}

/* Sections */
.hinax-section { padding: 4rem 0; }
.hinax-section-header { text-align: center; margin-bottom: 3rem; }
.hinax-section-header h2 { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--black); font-weight: 400; margin-bottom: .5rem; }
.hinax-section-header p { color: var(--gray); font-size: .95rem; }
@media (max-width: 640px) {
  .hinax-section { padding: 2.5rem 0; }
  .hinax-section-header { margin-bottom: 2rem; padding: 0 1rem; }
  .hinax-section-header h2 { font-size: 1.4rem; }
  .hinax-section-header p { font-size: .85rem; }
}

/* Categories Grid */
.hinax-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.hinax-cat-card { position: relative; overflow: hidden; display: block; aspect-ratio: 3/4; background: var(--gray-light); }
.hinax-cat-img { width: 100%; height: 100%; }
.hinax-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hinax-cat-card:hover .hinax-cat-img img { transform: scale(1.05); }
.hinax-cat-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(26,26,46,.85)); padding: 2rem 1.5rem 1.5rem; }
.hinax-cat-label h3 { color: #fff; font-family: var(--font-head); font-size: 1.2rem; font-weight: 400; margin-bottom: .25rem; }
.hinax-cat-label span { color: #c9a96e; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }

@media (max-width: 600px) {
  .hinax-categories-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: 0 .75rem; }
  .hinax-cat-label { padding: 1.25rem 1rem 1rem; }
  .hinax-cat-label h3 { font-size: 1rem; }
  .hinax-cat-label span { font-size: .7rem; letter-spacing: 1.5px; }
}

/* Split Banner */
.hinax-banner-split { display: grid; grid-template-columns: 1fr 1fr; max-width: 1400px; margin: 0 auto; gap: 1.5rem; padding: 2rem; }
.hinax-banner-left, .hinax-banner-right { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.hinax-banner-split img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hinax-banner-left:hover img, .hinax-banner-right:hover img { transform: scale(1.05); }
.hinax-banner-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; background: linear-gradient(transparent, rgba(26,26,46,.8)); }
.hinax-banner-overlay h3 { color: #fff; font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; margin-bottom: .5rem; }
.hinax-banner-overlay p { color: rgba(255,255,255,.8); font-size: .9rem; margin-bottom: 1rem; }

@media (max-width: 768px) {
  .hinax-banner-split { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; }
  .hinax-banner-overlay { padding: 1.5rem; }
  .hinax-banner-overlay h3 { font-size: 1.2rem; }
  .hinax-banner-overlay p { font-size: .82rem; }
}

/* Newsletter Section */
.hinax-newsletter-section { background: #1a1a2e; padding: 5rem 2rem; text-align: center; }
.hinax-newsletter-inner { max-width: 550px; margin: 0 auto; }
.hinax-newsletter-inner h2 { font-family: var(--font-head); color: #fff; font-size: 1.8rem; font-weight: 400; margin-bottom: .75rem; }
.hinax-newsletter-inner > p { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.7; margin-bottom: 2rem; }
.hinax-newsletter-form { display: flex; gap: .5rem; }
.hinax-newsletter-form input { flex: 1; padding: .85rem 1.2rem; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: #fff; font-size: .9rem; outline: none; transition: border-color .3s; }
.hinax-newsletter-form input:focus { border-color: #c9a96e; }
.hinax-newsletter-form input::placeholder { color: rgba(255,255,255,.4); }

@media (max-width: 600px) {
  .hinax-newsletter-section { padding: 3rem 1.25rem; }
  .hinax-newsletter-inner h2 { font-size: 1.4rem; }
  .hinax-newsletter-inner > p { font-size: .82rem; margin-bottom: 1.5rem; }
  .hinax-newsletter-form { flex-direction: column; }
  .hinax-newsletter-form input { padding: .75rem 1rem; }
}


/* Product card refinements */
.product-card { border: none; background: #fff; overflow: hidden; }
.product-card-image { aspect-ratio: 3/4; overflow: hidden; display: block; position: relative; }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; }
.pc-img-hover { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .4s ease; }
.product-card:hover .pc-img-hover { opacity: 1; }
.product-card-name { font-family: var(--font-head); font-weight: 400; font-size: .95rem; }
.product-card-name a { color: var(--charcoal); }
.product-card-info { padding: 1rem .75rem .5rem; }
.product-card-price { margin-top: .35rem; }
.price-current { font-weight: 600; color: var(--black); font-size: .95rem; }
.price-was { text-decoration: line-through; color: var(--gray); font-size: .85rem; margin-left: .5rem; }
.product-badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .75rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; z-index: 2; }
.badge-sale { background: #1a1a2e; color: #c9a96e; }
.product-card-actions { padding: 0 .75rem .75rem; }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0 1rem; } }

/* Button style overrides for fashion brand */
.btn-primary { background: #1a1a2e; color: #fff; border-color: #1a1a2e; box-shadow: none; }
.btn-primary:hover { background: #c9a96e; color: #1a1a2e; border-color: #c9a96e; transform: none; box-shadow: none; }
.btn-outline { background: transparent; color: #1a1a2e; border: 1.5px solid #1a1a2e; box-shadow: none; }
.btn-outline:hover { background: #1a1a2e; color: #fff; transform: none; box-shadow: none; }
.hinax-hero .btn-primary { background: #c9a96e; color: #1a1a2e; border-color: #c9a96e; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .82rem; }
.hinax-hero .btn-primary:hover { background: #fff; color: #1a1a2e; border-color: #fff; }
.hinax-hero .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; letter-spacing: 1px; text-transform: uppercase; font-size: .82rem; }
.hinax-hero .btn-outline:hover { background: #fff; color: #1a1a2e; border-color: #fff; }

/* Cart badge */
.cart-badge { background: #c9a96e; color: #1a1a2e; }
.icon-badge { background: #c9a96e; color: #1a1a2e; }

/* Mobile nav overrides */
.mobile-nav { background: #fff; }
.mobile-nav a { text-transform: uppercase; letter-spacing: 1.5px; font-size: .9rem; font-weight: 400; }
.mobile-nav-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; padding: .5rem; color: var(--charcoal); }
body.mobile-nav-open { overflow: hidden; }

/* Admin Orders - Mobile Cards */
.orders-mobile-list { display: none; }
.orders-table-desktop { display: table; }

.order-mobile-card {
  display: block; padding: 1rem 1.25rem; border-bottom: 1px solid #f0f0f0;
  text-decoration: none; color: inherit; transition: background .15s;
}
.order-mobile-card:hover { background: #f9f9f7; }
.order-mobile-card:active { background: #f3f2ef; }
.order-mobile-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem;
}
.order-mobile-number {
  font-family: monospace; font-size: .85rem; font-weight: 700; color: #1a1a2e;
}
.order-mobile-middle {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem;
}
.order-mobile-customer {
  font-size: .9rem; font-weight: 500; color: #333;
}
.order-mobile-price {
  font-size: .95rem; font-weight: 700; color: #1a1a2e;
}
.order-mobile-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.order-mobile-date {
  font-size: .75rem; color: #888;
}
.order-mobile-items {
  font-size: .75rem; color: #888;
}
.order-mobile-view {
  font-size: .78rem; font-weight: 600; color: #c9a96e;
}

@media (max-width: 900px) {
  .orders-table-desktop { display: none !important; }
  .orders-mobile-list { display: block; }
}