/* ═══════════════════════════════════════════════════════════════════════
   JU Group Limited — Royal Blue Premium Theme
   ═══════════════════════════════════════════════════════════════════════ */

/* ── THEME SYSTEM ────────────────────────────────────────────────────────
   Change only the values in :root to restyle the entire site.
   Every colour used in rules below references a CSS variable — meaning
   a single edit here cascades across all components instantly.
   ─────────────────────────────────────────────────────────────────────── */

:root {
   /* ── THEME: Royal Blue & White — clean, modern, premium, glassy ── */

   /* Backgrounds */
   --color-bg-primary:    #F3F6FC;   /* page background */
   --color-bg-secondary:  #FFFFFF;   /* cards, panels, inputs */
   --color-bg-tertiary:   #EAF0FB;   /* hover states, nested panels */

   /* Brand / Accent (kept as --color-gold for compatibility — now Royal Blue) */
   --color-gold:          #1E40AF;   /* primary accent */
   --color-gold-hover:    #2F55D4;   /* accent hover */
   --color-gold-muted:    rgba(30,64,175,.09); /* tinted backgrounds */

   /* Extra accent steps used for gradients / glow */
   --color-accent-light:  #3B82F6;
   --color-accent-lighter:#60A5FA;
   --color-accent-deep:   #0F2870;

   /* Text */
   --color-text-primary:  #0B1739;   /* headings, body */
   --color-text-secondary:#5B6B8C;   /* subtext, labels */
   --color-text-inverse:  #FFFFFF;   /* text on blue buttons */
   --color-text-link:     #1E40AF;   /* links */

   /* Borders */
   --color-border:        #E1E8F5;   /* dividers, input borders */
   --color-border-focus:  #1E40AF;   /* focused input border */

   /* Buttons */
   --color-btn-primary-bg:    #1E40AF;
   --color-btn-primary-text:  #FFFFFF;
   --color-btn-primary-hover: #2F55D4;
   --color-btn-ghost-border:  #CBD8EF;
   --color-btn-ghost-text:    #0B1739;

   /* Header — solid white bar, identical on every page */
   --color-header-bg:        #FFFFFF;
   --color-header-scrolled:  #FFFFFF;
   --color-header-top-bg:    #1E40AF;
   --color-header-top-text:  #FFFFFF;
   --color-nav-text:         #14235A;
   --color-nav-text-hover:   #1E40AF;

   /* Footer */
   --color-footer-bg:      #0B1739;
   --color-footer-text:    #A9B7DA;
   --color-footer-heading: #FFFFFF;

   /* Cards */
   --color-card-bg:           #FFFFFF;
   --color-card-border:       #E1E8F5;
   --color-card-hover-border: #1E40AF;

   /* Status colours */
   --color-success: #16a34a;
   --color-warning: #d97706;
   --color-danger:  #dc2626;
   --color-info:    #2980b9;

   /* Typography */
   --font-serif: 'Fraunces', Georgia, serif;
   --font-sans: 'Inter', sans-serif;

   /* Spacing & shape */
   --radius: 12px;
   --radius-lg: 22px;
   --trans: 0.3s ease;
   --container: 1280px;
   --shadow: 0 12px 40px rgba(15, 40, 112, 0.12);
   --shadow-lg: 0 24px 64px rgba(15, 40, 112, 0.18);
   --glass-blur: blur(18px) saturate(160%);
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   font-size: 16px
}

body {
   background: var(--color-bg-primary);
   color: var(--color-text-primary);
   font-family: var(--font-sans);
   font-weight: 300;
   line-height: 1.7;
   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
}

input,
textarea,
select {
   font-family: inherit
}

ul {
   list-style: none
}

/* ── Typography ──────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
   font-family: var(--font-serif);
   font-weight: 400;
   line-height: 1.2
}

h1 {
   font-size: clamp(2.2rem, 6vw, 4.5rem)
}

h2 {
   font-size: clamp(1.8rem, 4vw, 3rem)
}

h3 {
   font-size: clamp(1.2rem, 2.5vw, 1.8rem)
}

em {
   font-style: italic;
   color: var(--color-gold)
}

/* ── Container ───────────────────────────────────────────────────────── */
.container {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 24px
}

.section {
   padding: 100px 0
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 32px;
   font-family: var(--font-sans);
   font-size: .85rem;
   font-weight: 600;
   letter-spacing: .12em;
   text-transform: uppercase;
   border-radius: 999px;
   transition: all var(--trans);
   cursor: pointer;
   white-space: nowrap
}

.btn--gold {
   background: linear-gradient(135deg, var(--color-accent-light), var(--color-gold));
   color: var(--color-text-inverse);
   border: 2px solid transparent;
   box-shadow: 0 4px 18px rgba(30, 64, 175, .25)
}

.btn--gold:hover {
   background: linear-gradient(135deg, var(--color-accent-lighter), var(--color-gold-hover));
   border-color: transparent;
   transform: translateY(-2px);
   box-shadow: 0 10px 34px rgba(30, 64, 175, .38)
}

.btn--outline {
   background: transparent;
   color: var(--color-gold);
   border: 2px solid var(--color-gold)
}

.btn--outline:hover {
   background: var(--color-gold);
   color: var(--color-text-inverse)
}

.btn--ghost {
   background: transparent;
   color: var(--color-text-primary);
   border: 2px solid var(--color-border)
}

.btn--ghost:hover {
   border-color: var(--color-gold);
   color: var(--color-gold)
}

.btn--lg {
   padding: 16px 42px;
   font-size: .9rem
}

.btn--xl {
   padding: 20px 48px;
   font-size: 1rem;
   width: 100%;
   justify-content: center
}

.btn--sm {
   padding: 8px 18px;
   font-size: .78rem
}

.btn--full {
   width: 100%;
   justify-content: center
}

.btn--social {
   flex: 1;
   background: var(--color-bg-secondary);
   color: var(--color-text-secondary);
   border: 1px solid var(--color-border);
   gap: 8px
}

.btn--social:hover {
   border-color: var(--color-gold);
   color: var(--color-gold)
}

/* ── Input ───────────────────────────────────────────────────────────── */
.input {
   width: 100%;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   color: var(--color-text-primary);
   padding: 13px 16px;
   border-radius: var(--radius);
   font-size: .9rem;
   transition: border var(--trans);
   outline: none
}

.input:focus {
   border-color: var(--color-border-focus)
}

.input--sm {
   padding: 9px 14px;
   font-size: .82rem
}

.input--icon {
   padding-left: 44px
}

.input--error {
   border-color: var(--color-danger) !important
}

.input-icon-wrap {
   position: relative
}

.input-icon-wrap>i:first-child {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--color-text-secondary);
   pointer-events: none
}

.input-eye {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--color-text-secondary);
   background: none;
   border: none;
   cursor: pointer
}

.input-eye:hover {
   color: var(--color-gold)
}

textarea.input {
   resize: vertical
}

/* ── Form groups ─────────────────────────────────────────────────────── */
.form-group {
   display: flex;
   flex-direction: column;
   gap: 7px
}

.form-group label {
   font-size: .78rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--color-text-secondary);
   font-weight: 500
}

.form-grid {
   display: grid;
   gap: 16px
}

.form-grid--2 {
   grid-template-columns: 1fr 1fr
}

@media(max-width:580px) {
   .form-grid--2 {
      grid-template-columns: 1fr
   }
}

.checkbox-label {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: .85rem;
   cursor: pointer;
   color: var(--color-text-secondary)
}

.checkbox-label input[type=checkbox] {
   accent-color: var(--color-gold);
   width: 16px;
   height: 16px
}

.field-error {
   font-size: .75rem;
   color: var(--color-danger);
   margin-top: 2px
}

/* ── Flash messages ─────────────────────────────────────────────────── */
.messages-container {
   position: fixed;
   top: 90px;
   right: 24px;
   z-index: 3000;
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-width: 380px;
   transition: opacity .4s ease
}

.site-message {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 18px;
   border-radius: var(--radius-lg);
   font-size: .85rem;
   font-weight: 500;
   box-shadow: var(--shadow);
   animation: slideIn .3s ease
}

@keyframes slideIn {
   from {
      transform: translateX(40px);
      opacity: 0
   }

   to {
      transform: translateX(0);
      opacity: 1
   }
}

.site-message {
   background: rgba(255,255,255,.85);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur)
}

.site-message--success {
   background: #ecfdf3;
   border: 1px solid var(--color-success);
   color: #15803d
}

.site-message--error {
   background: #fef2f2;
   border: 1px solid var(--color-danger);
   color: #b91c1c
}

.site-message--warning {
   background: #fffbeb;
   border: 1px solid var(--color-warning);
   color: #b45309
}

.site-message--info {
   background: #eff6ff;
   border: 1px solid var(--color-info);
   color: #1d64a3
}

.site-message__close {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 1.1rem;
   color: inherit;
   opacity: .7;
   flex-shrink: 0
}

.site-message__close:hover {
   opacity: 1
}

/* ── Auth alerts ─────────────────────────────────────────────────────── */
.auth-error {
   background: rgba(231, 76, 60, .1);
   border: 1px solid rgba(231, 76, 60, .3);
   color: #e74c3c;
   padding: 12px 16px;
   border-radius: var(--radius);
   font-size: .85rem;
   margin-bottom: 4px;
   display: flex;
   align-items: flex-start;
   gap: 10px
}

.auth-error--list ul {
   margin-top: 4px;
   padding-left: 4px;
   list-style: disc inside
}

.auth-error--list ul li {
   margin-top: 4px
}

.auth-success {
   background: rgba(39, 174, 96, .1);
   border: 1px solid rgba(39, 174, 96, .3);
   color: #27ae60;
   padding: 12px 16px;
   border-radius: var(--radius);
   font-size: .85rem;
   margin-bottom: 4px
}

.coupon-applied {
   font-size: .83rem;
   color: var(--color-gold);
   display: flex;
   align-items: center;
   gap: 8px
}

.coupon-remove-btn {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--color-text-secondary);
   font-size: .78rem;
   transition: color var(--trans)
}

.coupon-remove-btn:hover {
   color: var(--color-danger)
}

/* ── Cart drawer empty state ─────────────────────────────────────────── */
.cart-drawer-empty {
   text-align: center;
   padding: 40px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   color: var(--color-text-secondary)
}

.cart-drawer-empty i {
   font-size: 2.5rem;
   opacity: .4
}

.cart-drawer-empty p {
   font-size: .88rem
}

.cart-drawer-item__noimg {
   width: 70px;
   height: 70px;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
   flex-shrink: 0
}

/* ── Shop empty & pagination ──────────────────────────────────────────── */
.shop-empty {
   padding: 80px 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   color: var(--color-text-secondary)
}

.shop-empty i {
   font-size: 3rem;
   opacity: .3
}

.shop-empty h3 {
   color: var(--color-text-primary)
}

.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 40px 0
}

.page-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: 999px;
   font-size: .82rem;
   border: 1px solid var(--color-border);
   color: var(--color-text-secondary);
   transition: all var(--trans)
}

.page-btn:hover {
   border-color: var(--color-gold);
   color: var(--color-gold)
}

.page-btn--active {
   background: var(--color-gold);
   color: var(--color-text-inverse);
   border-color: var(--color-gold)
}

/* ── Product no-image placeholders ──────────────────────────────────── */
.product-card__no-img {
   width: 100%;
   aspect-ratio: 1/1.1;
   background: var(--color-bg-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
   font-size: 3rem;
   opacity: .3
}

.product-no-img {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
   font-size: 5rem;
   opacity: .2;
   background: var(--color-bg-secondary)
}

.cart-row__no-img {
   width: 70px;
   height: 70px;
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
   flex-shrink: 0
}

.co-item__no-img {
   width: 52px;
   height: 52px;
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-text-secondary);
   flex-shrink: 0
}

/* ══════════════════════════════════════════════════════════════════════
   LUXURY HEADER
   ══════════════════════════════════════════════════════════════════════ */
.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, 0.94);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border-bottom: 1px solid rgba(30, 64, 175, 0.08);
   box-shadow: 0 4px 24px rgba(15, 40, 112, 0.06);
   transition: all 0.3s ease;
}

.header.scrolled {
   background: rgba(255, 255, 255, 0.98);
   box-shadow: 0 10px 36px rgba(15, 40, 112, 0.12);
}

.header__top {
   background: linear-gradient(90deg, #0B1739 0%, #1E40AF 50%, #0B1739 100%);
   color: #FFFFFF;
   padding: 7px 0;
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.04em;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header__top-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.header__top-item {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.header__top-item i {
   color: #93C5FD;
}

.header__nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding-top: 14px;
   padding-bottom: 14px;
}

/* ── Logo Crest ── */
.header__logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
}

.logo-crest {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: linear-gradient(135deg, #0B1739 0%, #1E40AF 100%);
   border: 1.5px solid rgba(212, 175, 55, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 14px rgba(30, 64, 175, 0.25);
   position: relative;
   overflow: hidden;
}

.logo-crest::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
   animation: shimmer 4s infinite linear;
}

.logo-crest__letter {
   font-family: var(--font-serif);
   font-weight: 900;
   font-size: 1.15rem;
   color: #FFFFFF;
   letter-spacing: 1px;
}

.logo-text {
   display: flex;
   flex-direction: column;
}

.logo-title {
   font-family: var(--font-serif);
   font-size: 1.28rem;
   font-weight: 700;
   color: #0B1739;
   letter-spacing: 0.06em;
   line-height: 1.1;
}

.logo-subtitle {
   font-size: 0.58rem;
   font-weight: 700;
   letter-spacing: 0.2em;
   color: var(--color-gold);
   text-transform: uppercase;
   margin-top: 2px;
}

/* ── Nav Links ── */
.header__links {
   display: flex;
   align-items: center;
   gap: 28px;
   list-style: none;
}

.nav-link {
   font-size: 0.82rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #14235A;
   font-weight: 600;
   padding: 6px 0;
   position: relative;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: color 0.25s ease;
}

.nav-link::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--color-gold);
   border-radius: 2px;
   transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover,
.nav-link.active {
   color: var(--color-gold);
}

.nav-link:hover::after,
.nav-link.active::after {
   width: 100%;
}

.nav-arrow {
   font-size: 0.65rem;
   transition: transform 0.3s ease;
}

.has-dropdown:hover .nav-arrow {
   transform: rotate(180deg);
}

.nav-badge-pill {
   background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
   color: #FFFFFF;
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   box-shadow: 0 3px 10px rgba(30, 64, 175, 0.25);
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

/* ── Megamenu / Dropdown ── */
.has-dropdown {
   position: relative;
}

.has-dropdown:hover .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

.dropdown-menu {
   position: absolute;
   top: calc(100% + 14px);
   left: 50%;
   transform: translateX(-50%) translateY(-10px);
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--color-border);
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(15, 40, 112, 0.16);
   padding: 16px;
   width: 540px;
   opacity: 0;
   visibility: hidden;
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 100;
}

.dropdown-menu__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
}

.dropdown-menu__item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   border-radius: 10px;
   text-decoration: none;
   transition: all 0.2s ease;
}

.dropdown-menu__item:hover {
   background: var(--color-bg-tertiary);
   transform: translateX(4px);
}

.dropdown-icon {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: var(--color-bg-tertiary);
   color: var(--color-gold);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   flex-shrink: 0;
   transition: all 0.2s ease;
}

.dropdown-menu__item:hover .dropdown-icon {
   background: var(--color-gold);
   color: #FFFFFF;
}

.dropdown-menu__item strong {
   display: block;
   font-size: 0.84rem;
   color: #0B1739;
   font-weight: 600;
}

.dropdown-menu__item span {
   display: block;
   font-size: 0.7rem;
   color: var(--color-text-secondary);
   margin-top: 1px;
}

.dropdown-menu__footer {
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--color-border);
   text-align: center;
}

.dropdown-menu__footer a {
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--color-gold);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.dropdown-menu__footer a:hover {
   gap: 10px;
}

/* ── Actions / Quick Search ── */
.header__actions {
   display: flex;
   align-items: center;
   gap: 12px;
}

.header-search-wrap {
   position: relative;
   display: flex;
   align-items: center;
}

.header-quick-search {
   position: relative;
   display: flex;
   align-items: center;
}

.header-quick-search input {
   background: var(--color-bg-tertiary);
   border: 1px solid transparent;
   border-radius: 24px;
   height: 40px;
   padding: 0 38px 0 16px;
   font-size: 0.82rem;
   width: 220px;
   color: var(--color-text-primary);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
   box-sizing: border-box;
}

.header-quick-search input:focus {
   width: 260px;
   background: #FFFFFF;
   border-color: var(--color-gold);
   box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.header-quick-search button {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--color-text-secondary);
   font-size: 0.85rem;
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   width: 20px;
   height: 20px;
}

.header-quick-search input:focus + button {
   color: var(--color-gold);
}

.icon-btn--user,
.icon-btn--auth {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 40px;
   padding: 0 16px;
   border-radius: 24px;
   background: var(--color-bg-tertiary);
   color: var(--color-gold);
   font-weight: 600;
   font-size: 0.84rem;
   border: 1px solid transparent;
   box-sizing: border-box;
   transition: all 0.25s ease;
   white-space: nowrap;
   line-height: 1;
   text-decoration: none;
}

.icon-btn--auth {
   color: #14235A;
}

.icon-btn--auth:hover,
.icon-btn--user:hover {
   background: var(--color-gold);
   color: #FFFFFF;
   box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}

.cart-trigger {
   position: relative;
   width: 40px;
   height: 40px;
   min-width: 40px;
   border-radius: 50%;
   background: var(--color-bg-tertiary);
   color: var(--color-gold);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   cursor: pointer;
   box-sizing: border-box;
   transition: all 0.25s ease;
   padding: 0;
}

.cart-trigger i {
   font-size: 0.95rem;
}

.cart-trigger:hover {
   background: var(--color-gold);
   color: #FFFFFF;
   transform: scale(1.05);
}

.cart-badge {
   position: absolute;
   top: -4px;
   right: -4px;
   min-width: 19px;
   height: 19px;
   padding: 0 5px;
   background: #DC2626;
   color: #FFFFFF;
   border-radius: 10px;
   font-size: 0.65rem;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid #FFFFFF;
   box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
   line-height: 1;
   pointer-events: none;
   z-index: 5;
}

.cart-badge.is-hidden {
   display: none;
}

@keyframes pulse-badge {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.12); }
}

.header__hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   padding: 8px;
   cursor: pointer;
   background: none;
   border: none;
}

.header__hamburger span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--color-text-primary);
   transition: all var(--trans);
}

@media(max-width:900px) {
   .header__links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(255,255,255,.96);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      box-shadow: var(--shadow-lg);
      flex-direction: column;
      padding: 20px;
      gap: 0;
      border-bottom: 1px solid var(--color-border)
   }

   .header__links.open {
      display: flex
   }

   .header__links li {
      width: 100%
   }

   .header__links a {
      padding: 12px 0;
      justify-content: space-between
   }

   .dropdown {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      background: transparent;
      border: none;
      padding: 0 16px
   }

   .header__hamburger {
      display: flex
   }

   .header__top {
      gap: 20px;
      overflow-x: auto;
      justify-content: flex-start;
      padding: 8px 16px;
      font-size: .67rem;
      scrollbar-width: none
   }

   .header__top::-webkit-scrollbar {
      display: none
   }
}

@media(max-width:600px) {
   .header__top {
      gap: 16px;
      font-size: .63rem;
      padding: 7px 14px
   }

   .header__nav {
      padding-top: 12px;
      padding-bottom: 12px;
      gap: 16px
   }

   .header__logo {
      font-size: 1.2rem
   }
}

/* ══════════════════════════════════════════════════════════════════════
   AGE GATE
   ══════════════════════════════════════════════════════════════════════ */
.age-gate {
   position: fixed;
   inset: 0;
   background: rgba(11, 23, 57, .8);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(8px)
}

.age-gate.hidden {
   display: none
}

.age-gate__box {
   text-align: center;
   max-width: 480px;
   padding: 60px 40px;
   border: 1px solid rgba(255,255,255,.5);
   background: rgba(255,255,255,.95);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   box-shadow: var(--shadow-lg);
   border-radius: var(--radius-lg)
}

.age-gate__logo {
   font-family: var(--font-serif);
   font-size: 2rem;
   color: var(--color-gold);
   margin-bottom: 16px;
   letter-spacing: .08em
}

.age-gate__divider {
   width: 60px;
   height: 1px;
   background: var(--color-gold);
   margin: 0 auto 24px
}

.age-gate__title {
   font-size: 1.6rem;
   margin-bottom: 12px
}

.age-gate__sub {
   color: var(--color-text-secondary);
   font-size: .9rem;
   margin-bottom: 32px
}

.age-gate__actions {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.age-gate__legal {
   font-size: .75rem;
   color: var(--color-text-secondary)
}

.age-gate__legal a {
   color: var(--color-gold)
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — shared typography
   ══════════════════════════════════════════════════════════════════════ */
.hero__eyebrow {
   font-size: .75rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--color-accent-lighter);
   margin-bottom: 16px;
   font-weight: 500
}

.hero__title {
   font-family: var(--font-serif);
   font-size: clamp(2.4rem, 7vw, 6.5rem);
   line-height: 1.05;
   margin-bottom: 20px;
   color: #fff;
   text-shadow: 0 2px 20px rgba(0, 0, 0, .8)
}

.hero__title em {
   color: var(--color-accent-lighter)
}

.hero__subtitle {
   font-size: clamp(.9rem, 2.2vw, 1.05rem);
   color: rgba(255, 255, 255, .85);
   max-width: 480px;
   margin-bottom: 32px;
   line-height: 1.8;
   text-shadow: 0 1px 8px rgba(0, 0, 0, .9)
}

.hero__ctas {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 40px
}

.hero__ctas .btn--ghost {
   color: #fff;
   border-color: rgba(255, 255, 255, .4)
}

.hero__ctas .btn--ghost:hover {
   border-color: #fff;
   color: #fff;
   background: rgba(255, 255, 255, .12)
}

.hero__stats {
   display: flex;
   align-items: center;
   gap: 0;
   flex-wrap: wrap
}

.stat {
   text-align: center;
   padding: 0 24px
}

.stat:first-child {
   padding-left: 0
}

.stat__num {
   display: block;
   font-family: var(--font-serif);
   font-size: clamp(1.6rem, 4vw, 2.2rem);
   color: var(--color-accent-lighter);
   font-weight: 300
}

.stat__label {
   font-size: .68rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .7)
}

.stat__sep {
   width: 1px;
   height: 40px;
   background: rgba(255, 255, 255, .25)
}

.hero__scroll-hint {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   z-index: 10;
   animation: bob 2s ease-in-out infinite
}

.hero__scroll-hint span {
   font-size: .68rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .7)
}

.hero__scroll-line {
   width: 1px;
   height: 40px;
   background: linear-gradient(to bottom, var(--color-gold), transparent)
}

@keyframes bob {

   0%,
   100% {
      transform: translateX(-50%) translateY(0)
   }

   50% {
      transform: translateX(-50%) translateY(8px)
   }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO CAROUSEL (DYNAMIC LUXURY SYSTEM)
   ══════════════════════════════════════════════════════════════════════ */
.hero-carousel {
   position: relative;
   min-height: 90vh;
   background: #060B1E;
   overflow: hidden;
}

.hero-carousel__track {
   position: relative;
   width: 100%;
   min-height: 90vh;
}

.hero-carousel__slide {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(1.04);
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-top: 135px;
   padding-bottom: 60px;
}

.hero-carousel__slide.is-active {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
   z-index: 2;
}

.hero-carousel__backdrop {
   position: absolute;
   inset: 0;
   z-index: 1;
   overflow: hidden;
}

.hero-carousel__bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center right;
   filter: brightness(0.65) contrast(1.1);
   transform: scale(1.02);
   transition: transform 7s ease-out;
}

.hero-carousel__slide.is-active .hero-carousel__bg-img {
   transform: scale(1.08);
}

.hero-carousel__bg-glow {
   position: absolute;
   inset: 0;
   background:
      radial-gradient(ellipse 70% 60% at 75% 45%, rgba(30, 64, 175, 0.45) 0%, transparent 70%),
      radial-gradient(ellipse 50% 50% at 20% 60%, rgba(212, 175, 55, 0.15) 0%, transparent 60%),
      linear-gradient(135deg, #060B1E 0%, #0B1739 50%, #060B1E 100%);
}

.hero-carousel__overlay {
   position: absolute;
   inset: 0;
   background:
      linear-gradient(90deg, rgba(6, 11, 30, 0.96) 0%, rgba(6, 11, 30, 0.75) 45%, rgba(6, 11, 30, 0.25) 100%),
      linear-gradient(to bottom, rgba(6, 11, 30, 0.6) 0%, transparent 30%, rgba(6, 11, 30, 0.8) 100%);
   pointer-events: none;
}

.hero-carousel__container {
   position: relative;
   z-index: 3;
   width: 100%;
   padding-top: 10px;
   padding-bottom: 20px;
}

@media(max-width:768px) {
   .hero-carousel,
   .hero-carousel__track {
      min-height: 85vh;
   }
   .hero-carousel__slide {
      padding-top: 125px;
      padding-bottom: 45px;
   }
}

.hero-carousel__content {
   max-width: 680px;
}

.hero-carousel__meta-tags {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px;
   flex-wrap: wrap;
}

.hero-carousel__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(212, 175, 55, 0.4);
   color: #F3E5AB;
   padding: 5px 14px;
   border-radius: 30px;
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   backdrop-filter: blur(10px);
}

.hero-carousel__eyebrow i {
   color: #D4AF37;
}

.hero-carousel__badge {
   background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
   color: #FFFFFF;
   font-size: 0.7rem;
   font-weight: 800;
   letter-spacing: 0.1em;
   padding: 5px 12px;
   border-radius: 30px;
   text-transform: uppercase;
   box-shadow: 0 4px 14px rgba(30, 64, 175, 0.35);
}

.hero-carousel__title {
   font-family: var(--font-serif);
   font-size: clamp(2.4rem, 5.5vw, 4.4rem);
   font-weight: 700;
   color: #FFFFFF;
   line-height: 1.1;
   margin: 0 0 20px;
   letter-spacing: -0.02em;
}

.gradient-text {
   font-style: italic;
   font-weight: 400;
   background: linear-gradient(135deg, #FFFFFF 0%, #93C5FD 40%, #60A5FA 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: inline-block;
}

.hero-carousel__subtitle {
   font-size: 1.1rem;
   line-height: 1.7;
   color: #CBD8EF;
   margin: 0 0 34px;
   max-width: 580px;
   font-weight: 300;
}

.hero-carousel__actions {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 40px;
   flex-wrap: wrap;
}

.hero-btn-main {
   box-shadow: 0 10px 30px rgba(30, 64, 175, 0.4);
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.hero-btn-main:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 40px rgba(30, 64, 175, 0.55);
}

.hero-btn-sec {
   background: rgba(255, 255, 255, 0.08);
   color: #FFFFFF;
   border-color: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(10px);
}

.hero-btn-sec:hover {
   background: #FFFFFF;
   color: #0B1739;
   border-color: #FFFFFF;
}

/* ── Hero Stats ── */
.hero-carousel__stats {
   display: inline-flex;
   align-items: center;
   gap: 0;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 14px;
   padding: 12px 24px;
   backdrop-filter: blur(14px);
}

.hero-stat {
   display: flex;
   flex-direction: column;
   padding: 0 16px;
}

.hero-stat:first-child {
   padding-left: 0;
}

.hero-stat:last-child {
   padding-right: 0;
}

.hero-stat__num {
   font-size: 1.45rem;
   font-weight: 800;
   color: #93C5FD;
   line-height: 1;
}

.hero-stat__label {
   font-size: 0.72rem;
   color: #A9B7DA;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   margin-top: 4px;
}

.hero-stat__sep {
   width: 1px;
   height: 32px;
   background: rgba(255, 255, 255, 0.12);
}

/* ── Carousel Controls ── */
.hero-carousel__nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   backdrop-filter: blur(12px);
   transition: all 0.25s ease;
}

.hero-carousel__prev { left: 24px; }
.hero-carousel__next { right: 24px; }

.hero-carousel__nav:hover {
   background: #1E40AF;
   border-color: #3B82F6;
   color: #FFFFFF;
   transform: translateY(-50%) scale(1.1);
   box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
}

.hero-carousel__dots-wrap {
   position: absolute;
   bottom: 24px;
   left: 0;
   right: 0;
   z-index: 10;
   pointer-events: none;
}

.hero-carousel__dots {
   display: flex;
   align-items: center;
   gap: 8px;
   pointer-events: all;
}

.hero-carousel__dot {
   width: 10px;
   height: 10px;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.3);
   border: none;
   cursor: pointer;
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   padding: 0;
}

.hero-carousel__dot.is-active {
   width: 32px;
   background: #60A5FA;
   box-shadow: 0 0 12px rgba(96, 165, 250, 0.8);
}

.hero-carousel__progress {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: rgba(255, 255, 255, 0.08);
   z-index: 10;
}

.hero-carousel__progress-bar {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, #1E40AF, #60A5FA);
}

/* ══════════════════════════════════════════════════════════════════════
   MARQUEE STRIP
   ══════════════════════════════════════════════════════════════════════ */
.marquee-strip {
   background: linear-gradient(90deg, #0B1739 0%, #1E40AF 50%, #0B1739 100%);
   overflow: hidden;
   padding: 13px 0;
   white-space: nowrap;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee-track {
   display: inline-block;
   animation: marquee 35s linear infinite;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: #CBD8EF;
   text-transform: uppercase;
}

@keyframes marquee {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════════════ */
.section__header {
   text-align: center;
   margin-bottom: 50px;
}

.section__header--between {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   text-align: left;
   margin-bottom: 40px;
   flex-wrap: wrap;
   gap: 20px;
}

.section__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 0.75rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--color-gold);
   margin-bottom: 10px;
   font-weight: 700;
}

.section__title {
   font-family: var(--font-serif);
   font-size: clamp(1.8rem, 3.5vw, 2.5rem);
   color: #0B1739;
   margin-bottom: 10px;
   line-height: 1.2;
}

.section__subtitle {
   font-size: 0.95rem;
   color: var(--color-text-secondary);
   max-width: 540px;
   margin: 0 auto;
}

.section__header-cta {
   margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════════════
   CATEGORIES GRID
   ══════════════════════════════════════════════════════════════════════ */
.categories__grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 18px;
}

@media(max-width:1100px) {
   .categories__grid { grid-template-columns: repeat(3, 1fr); }
}

@media(max-width:640px) {
   .categories__grid { grid-template-columns: repeat(2, 1fr); }
}

.category-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 16px;
   padding: 24px 16px;
   text-align: center;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 0 4px 16px rgba(15, 40, 112, 0.04);
   text-decoration: none;
   position: relative;
   overflow: hidden;
}

.category-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, #1E40AF, #60A5FA);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.category-card:hover {
   border-color: rgba(30, 64, 175, 0.3);
   transform: translateY(-6px);
   box-shadow: 0 16px 36px rgba(30, 64, 175, 0.12);
}

.category-card:hover::before {
   opacity: 1;
}

.category-card__icon-wrap {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: var(--color-bg-tertiary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   color: var(--color-gold);
   margin-bottom: 14px;
   transition: all 0.3s ease;
}

.category-card:hover .category-card__icon-wrap {
   background: var(--color-gold);
   color: #FFFFFF;
   transform: scale(1.08);
}

.category-card__img {
   width: 32px;
   height: 32px;
   object-fit: cover;
   border-radius: 6px;
}

.category-card__info h3 {
   font-family: var(--font-serif);
   font-size: 1.05rem;
   font-weight: 700;
   color: #0B1739;
   margin-bottom: 4px;
}

.category-card__count {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
   font-weight: 500;
}

.category-card__arrow {
   margin-top: 14px;
   color: var(--color-gold);
   font-size: 0.8rem;
   opacity: 0;
   transform: translateY(6px);
   transition: all 0.25s ease;
}

.category-card:hover .category-card__arrow {
   opacity: 1;
   transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════
   LUXURY PRODUCT CARDS & GRID
   ══════════════════════════════════════════════════════════════════════ */
.products-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
}

.products-grid--3col {
   grid-template-columns: repeat(3, 1fr);
}

@media(max-width:1100px) {
   .products-grid { grid-template-columns: repeat(3, 1fr); }
}

@media(max-width:800px) {
   .products-grid,
   .products-grid--3col { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media(max-width:520px) {
   .products-grid,
   .products-grid--3col { grid-template-columns: 1fr; }
}

.product-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 18px;
   overflow: hidden;
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   display: flex;
   flex-direction: column;
   box-shadow: 0 4px 20px rgba(15, 40, 112, 0.05);
}

.product-card:hover {
   border-color: rgba(30, 64, 175, 0.35);
   transform: translateY(-8px);
   box-shadow: 0 20px 48px rgba(30, 64, 175, 0.16);
}

.product-card__header-badges {
   position: absolute;
   top: 14px;
   left: 14px;
   right: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 5;
   pointer-events: none;
}

.product-card__badge {
   padding: 4px 10px;
   font-size: 0.65rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-card__badge--bestseller {
   background: linear-gradient(135deg, #1E40AF, #3B82F6);
   color: #FFFFFF;
}

.product-card__badge--featured {
   background: linear-gradient(135deg, #D97706, #F59E0B);
   color: #FFFFFF;
}

.product-card__badge--onoffer {
   background: linear-gradient(135deg, #DC2626, #EF4444);
   color: #FFFFFF;
}

.product-card__badge--sponsored {
   background: rgba(11, 23, 57, 0.85);
   color: #93C5FD;
}

.product-card__badge--newarrival {
   background: linear-gradient(135deg, #16A34A, #22C55E);
   color: #FFFFFF;
}

.product-card__badge--discounted {
   background: linear-gradient(135deg, #DC2626, #EF4444);
   color: #FFFFFF;
}

.product-card__save-pill {
   background: #DC2626;
   color: #FFFFFF;
   font-size: 0.68rem;
   font-weight: 800;
   padding: 3px 8px;
   border-radius: 6px;
   letter-spacing: 0.04em;
   box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.product-card__img-container {
   position: relative;
   aspect-ratio: 1 / 1.05;
   background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F9 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.product-card__img-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 20px;
   position: relative;
}

.product-card__img-glow {
   position: absolute;
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(30, 64, 175, 0.12) 0%, transparent 70%);
   pointer-events: none;
   transition: transform 0.4s ease;
}

.product-card:hover .product-card__img-glow {
   transform: scale(1.4);
}

.product-card__img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
}

.product-card:hover .product-card__img {
   transform: scale(1.08) translateY(-4px);
}

.product-card__no-img {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: #94A3B8;
   font-size: 2.5rem;
}

.product-card__no-img span {
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
}

.product-card__quick-actions {
   position: absolute;
   bottom: 12px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   opacity: 0;
   transform: translateY(8px);
   transition: all 0.25s ease;
   z-index: 4;
}

.product-card:hover .product-card__quick-actions {
   opacity: 1;
   transform: translateY(0);
}

.product-card__quick-view-btn {
   background: rgba(11, 23, 57, 0.88);
   color: #FFFFFF;
   font-size: 0.75rem;
   font-weight: 600;
   padding: 6px 14px;
   border-radius: 20px;
   backdrop-filter: blur(8px);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: background 0.2s ease;
}

.product-card__quick-view-btn:hover {
   background: #1E40AF;
   color: #FFFFFF;
}

/* Discount Countdown Strip */
.discount-countdown {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(90deg, #991B1B, #DC2626);
   color: #FFFFFF;
   font-size: 0.68rem;
   font-weight: 700;
   text-align: center;
   padding: 5px 8px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   letter-spacing: 0.04em;
}

.discount-countdown i {
   animation: spin-pulse 3s infinite linear;
}

@keyframes spin-pulse {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.product-card__body {
   padding: 18px 20px 20px;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.product-card__meta {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--color-gold);
   margin-bottom: 6px;
}

.product-card__origin {
   color: var(--color-text-secondary);
}

.product-card__name {
   font-family: var(--font-serif);
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.35;
   margin-bottom: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 2.7em;
}

.product-card__name a {
   color: #0B1739;
   text-decoration: none;
   transition: color 0.2s ease;
}

.product-card__name a:hover {
   color: var(--color-gold);
}

.product-card__pricing {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
   padding-top: 4px;
}

.product-card__price-group {
   display: flex;
   align-items: baseline;
   gap: 8px;
}

.product-card__price {
   font-size: 1.25rem;
   font-weight: 800;
   color: #0B1739;
}

.product-card__old {
   font-size: 0.88rem;
   color: #94A3B8;
   text-decoration: line-through;
   font-weight: 500;
}

.product-card__stock-tag {
   font-size: 0.7rem;
   color: #16A34A;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.product-card__footer {
   margin-top: auto;
}

.product-card__atc {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 18px;
   font-size: 0.85rem;
   font-weight: 700;
   border-radius: 10px;
   transition: all 0.25s ease;
}

.product-card__atc i {
   transition: transform 0.25s ease;
}

.product-card__atc:hover i {
   transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════
   DYNAMIC OFFERS PAGE STYLES
   ══════════════════════════════════════════════════════════════════════ */
.offers-hero-dynamic {
   position: relative;
   background: #060B1E;
   padding: 155px 0 75px;
   overflow: hidden;
   text-align: center;
}

@media(max-width:768px) {
   .offers-hero-dynamic {
      padding: 135px 0 55px;
   }
}

.offers-hero-dynamic__backdrop {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.offers-hero-dynamic__bg-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.45);
}

.offers-hero-dynamic__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(6, 11, 30, 0.95) 0%, rgba(30, 64, 175, 0.8) 50%, rgba(6, 11, 30, 0.95) 100%);
}

.offers-hero-dynamic__glow {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(96, 165, 250, 0.3) 0%, transparent 70%);
}

.offers-hero-dynamic__container {
   position: relative;
   z-index: 3;
}

.offers-hero-dynamic__content {
   max-width: 760px;
   margin: 0 auto;
}

.offers-hero-dynamic__badge-group {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 20px;
   flex-wrap: wrap;
}

.offers-tag-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(96, 165, 250, 0.16);
   border: 1px solid rgba(96, 165, 250, 0.4);
   border-radius: 30px;
   padding: 6px 18px;
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #93C5FD;
}

.offers-badge-highlight {
   background: #DC2626;
   color: #FFFFFF;
   font-size: 0.7rem;
   font-weight: 800;
   letter-spacing: 1px;
   padding: 5px 12px;
   border-radius: 20px;
   text-transform: uppercase;
}

.offers-hero-dynamic__title {
   font-family: var(--font-serif);
   font-size: clamp(2.2rem, 5vw, 3.8rem);
   font-weight: 700;
   color: #FFFFFF;
   line-height: 1.15;
   margin: 0 0 16px;
   letter-spacing: -0.02em;
}

.offers-hero-dynamic__sub {
   font-size: 1.05rem;
   color: #CBD8EF;
   max-width: 620px;
   margin: 0 auto 36px;
   line-height: 1.7;
   font-weight: 300;
}

.offers-hero-dynamic__stats {
   display: inline-flex;
   align-items: center;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 16px;
   padding: 14px 28px;
   backdrop-filter: blur(14px);
}

.offers-stat-box {
   padding: 0 20px;
   text-align: center;
}

.offers-stat-box__val {
   font-size: 1.8rem;
   font-weight: 800;
   color: #93C5FD;
   line-height: 1;
   display: block;
}

.offers-stat-box__lbl {
   font-size: 0.72rem;
   color: #A9B7DA;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-top: 4px;
   display: block;
}

.offers-stat-box__sep {
   width: 1px;
   height: 36px;
   background: rgba(255, 255, 255, 0.16);
}

/* ── Offers Ticker Strip ── */
.offers-ticker {
   background: linear-gradient(90deg, #0B1739 0%, #1E40AF 50%, #0B1739 100%);
   padding: 13px 0;
   overflow: hidden;
   white-space: nowrap;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offers-ticker__inner {
   display: inline-flex;
   align-items: center;
   gap: 50px;
   animation: ticker-scroll 32s linear infinite;
   white-space: nowrap;
}

.offers-ticker__inner span {
   font-size: 0.78rem;
   font-weight: 700;
   color: #CBD8EF;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
}

.offers-ticker__inner span i {
   color: #93C5FD;
   font-size: 0.82rem;
}

@keyframes ticker-scroll {
   0%   { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}

.offers-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 36px;
   padding: 40px 0 60px;
}

@media(max-width:960px) {
   .offers-layout { grid-template-columns: 1fr; }
   .offers-sidebar { position: static; }
}

.offers-sidebar {
   position: sticky;
   top: 100px;
   align-self: start;
}

.offers-sidebar-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 14px;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 4px 16px rgba(15, 40, 112, 0.04);
}

.offers-sidebar-heading {
   font-size: 0.78rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--color-gold);
   margin: 0 0 16px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.offers-sort-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.sort-option {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border-radius: 8px;
   font-size: 0.85rem;
   color: var(--color-text-secondary);
   text-decoration: none;
   transition: all 0.2s ease;
   font-weight: 500;
}

.sort-option:hover,
.sort-option.active {
   background: rgba(30, 64, 175, 0.08);
   color: var(--color-gold);
   font-weight: 600;
}

.sort-option i {
   font-size: 0.8rem;
   color: var(--color-gold);
}

.offers-promo-box {
   background: linear-gradient(135deg, #0B1739 0%, #1E40AF 100%);
   border: 1px solid rgba(96, 165, 250, 0.3);
   border-radius: 14px;
   padding: 24px;
   text-align: center;
   margin-bottom: 20px;
   color: #FFFFFF;
}

.offers-promo-box__icon {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(96, 165, 250, 0.16);
   border: 1px solid rgba(96, 165, 250, 0.35);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px;
   font-size: 1.3rem;
   color: #93C5FD;
}

.offers-promo-box h4 {
   font-size: 1rem;
   font-weight: 700;
   margin: 0 0 8px;
}

.offers-promo-box p {
   font-size: 0.8rem;
   color: #CBD8EF;
   line-height: 1.5;
   margin: 0 0 16px;
}

.offers-promo-btn {
   width: 100%;
   display: block;
   text-align: center;
}

.offers-guarantee-box {
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border);
   border-radius: 14px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.offers-guarantee-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 0.78rem;
}

.offers-guarantee-item i {
   color: var(--color-gold);
   font-size: 1rem;
   margin-top: 2px;
}

.offers-guarantee-item strong {
   display: block;
   color: #0B1739;
   font-weight: 600;
}

.offers-guarantee-item span {
   color: var(--color-text-secondary);
   font-size: 0.72rem;
}

.offers-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--color-border);
}

.offers-toolbar__count {
   font-size: 0.88rem;
   color: var(--color-text-secondary);
}

.offers-toolbar__count strong {
   color: var(--color-gold);
}

.offers-pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 40px;
}

/* ══════════════════════════════════════════════════════════════════════
   LUXURY BANNER (COLLECTOR'S CORNER SHOWCASE)
   ══════════════════════════════════════════════════════════════════════ */
.luxury-banner-section {
   padding: 40px 0 80px;
}

.luxury-banner-card {
   position: relative;
   border-radius: 32px;
   background: linear-gradient(135deg, #060B1E 0%, #0F204E 50%, #060B1E 100%);
   border: 1px solid rgba(212, 175, 55, 0.35);
   box-shadow: 
      0 30px 80px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
   overflow: hidden;
   padding: 64px 60px;
}

@media(max-width:960px) {
   .luxury-banner-card {
      padding: 40px 24px;
      border-radius: 24px;
   }
}

.luxury-banner-card__ambient-glow {
   position: absolute;
   inset: 0;
   background: 
      radial-gradient(ellipse 60% 60% at 85% 45%, rgba(30, 64, 175, 0.45) 0%, transparent 65%),
      radial-gradient(ellipse 50% 50% at 15% 55%, rgba(212, 175, 55, 0.18) 0%, transparent 60%);
   pointer-events: none;
}

.luxury-banner-card__inner {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: 56px;
   align-items: center;
}

@media(max-width:960px) {
   .luxury-banner-card__inner {
      grid-template-columns: 1fr;
      gap: 40px;
   }
}

.luxury-banner__eyebrow-pill {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: rgba(212, 175, 55, 0.12);
   border: 1px solid rgba(212, 175, 55, 0.45);
   border-radius: 30px;
   padding: 6px 18px;
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #F3E5AB;
   margin-bottom: 20px;
}

.luxury-banner__eyebrow-pill i {
   color: #D4AF37;
   font-size: 0.85rem;
}

.pulse-gold-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #D4AF37;
   box-shadow: 0 0 8px #D4AF37;
   animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.4; transform: scale(0.7); }
}

.luxury-banner__title {
   font-family: var(--font-serif);
   font-size: clamp(2.2rem, 4.2vw, 3.6rem);
   font-weight: 700;
   color: #FFFFFF;
   line-height: 1.12;
   margin: 0 0 18px;
   letter-spacing: -0.02em;
}

.gold-gradient-text {
   font-style: italic;
   background: linear-gradient(135deg, #FFF1B8 0%, #D4AF37 50%, #F59E0B 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: inline-block;
}

.luxury-banner__desc {
   font-size: 1.05rem;
   color: #CBD8EF;
   line-height: 1.75;
   margin: 0 0 28px;
   max-width: 580px;
   font-weight: 300;
}

.luxury-banner__perks {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-bottom: 36px;
   padding-bottom: 32px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media(max-width:600px) {
   .luxury-banner__perks {
      grid-template-columns: 1fr;
      gap: 12px;
   }
}

.perk-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.perk-icon {
   width: 32px;
   height: 32px;
   min-width: 32px;
   border-radius: 8px;
   background: rgba(212, 175, 55, 0.15);
   border: 1px solid rgba(212, 175, 55, 0.3);
   color: #D4AF37;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.82rem;
}

.perk-info strong {
   display: block;
   font-size: 0.8rem;
   font-weight: 700;
   color: #FFFFFF;
   line-height: 1.2;
}

.perk-info span {
   display: block;
   font-size: 0.72rem;
   color: #94A3B8;
   line-height: 1.3;
   margin-top: 2px;
}

.luxury-banner__ctas {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
}

.btn--gold-shimmer {
   background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
   color: #060B1E !important;
   font-weight: 700;
   border: 1px solid #F3E5AB;
   box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
   border-radius: 30px;
   padding: 14px 28px;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.84rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   text-decoration: none;
}

.btn--gold-shimmer:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 32px rgba(212, 175, 55, 0.5);
   background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 100%);
}

.btn--glass-gold {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(212, 175, 55, 0.4);
   color: #F3E5AB !important;
   font-weight: 600;
   border-radius: 30px;
   padding: 14px 26px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 0.84rem;
   letter-spacing: 0.04em;
   transition: all 0.3s ease;
   backdrop-filter: blur(10px);
   text-decoration: none;
}

.btn--glass-gold:hover {
   background: rgba(212, 175, 55, 0.18);
   border-color: #D4AF37;
   color: #FFFFFF !important;
   transform: translateY(-3px);
}

/* ── Showcase Frame ── */
.luxury-banner__showcase {
   display: flex;
   justify-content: center;
   align-items: center;
}

.luxury-showcase-frame {
   position: relative;
   width: 100%;
   max-width: 440px;
}

.showcase-glow-back {
   position: absolute;
   inset: -20px;
   background: radial-gradient(circle, rgba(212, 175, 55, 0.25) 0%, rgba(30, 64, 175, 0.3) 50%, transparent 70%);
   filter: blur(30px);
   z-index: 1;
   pointer-events: none;
}

.showcase-img-wrap {
   position: relative;
   z-index: 2;
   border-radius: 24px;
   overflow: hidden;
   border: 1px solid rgba(212, 175, 55, 0.4);
   box-shadow: 
      0 24px 60px rgba(0, 0, 0, 0.6),
      0 0 0 6px rgba(255, 255, 255, 0.05);
   aspect-ratio: 4/4.5;
   background: #060B1E;
}

.showcase-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transform: scale(1.02);
   transition: transform 0.8s ease;
}

.luxury-showcase-frame:hover .showcase-img {
   transform: scale(1.08);
}

.showcase-badge-top {
   position: absolute;
   top: 18px;
   right: 18px;
   background: rgba(6, 11, 30, 0.85);
   border: 1px solid rgba(212, 175, 55, 0.6);
   padding: 6px 14px;
   border-radius: 20px;
   color: #F3E5AB;
   font-size: 0.72rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   backdrop-filter: blur(10px);
}

.showcase-badge-top i {
   color: #D4AF37;
}

.showcase-badge-bottom {
   position: absolute;
   bottom: 18px;
   left: 18px;
   right: 18px;
   background: rgba(6, 11, 30, 0.88);
   border: 1px solid rgba(212, 175, 55, 0.4);
   padding: 12px 16px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   backdrop-filter: blur(14px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.seal-icon {
   width: 36px;
   height: 36px;
   min-width: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, #D4AF37 0%, #AA771C 100%);
   color: #060B1E;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.seal-info strong {
   display: block;
   font-size: 0.82rem;
   font-weight: 700;
   color: #FFFFFF;
   line-height: 1.2;
}

.seal-info span {
   display: block;
   font-size: 0.72rem;
   color: #CBD8EF;
   line-height: 1.3;
   margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   WHY US / THE JU PROMISE
   ══════════════════════════════════════════════════════════════════════ */
.why-us__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
}

@media(max-width:1024px) {
   .why-us__grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width:540px) {
   .why-us__grid { grid-template-columns: 1fr; }
}

.why-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 18px;
   padding: 32px 24px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 20px rgba(15, 40, 112, 0.04);
}

.why-card:hover {
   transform: translateY(-6px);
   border-color: rgba(30, 64, 175, 0.3);
   box-shadow: 0 16px 40px rgba(30, 64, 175, 0.12);
}

.why-card__icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   margin-bottom: 20px;
   box-shadow: 0 8px 20px rgba(30, 64, 175, 0.25);
}

.why-card h3 {
   font-family: var(--font-serif);
   font-size: 1.15rem;
   font-weight: 700;
   color: #0B1739;
   margin-bottom: 8px;
}

.why-card p {
   font-size: 0.88rem;
   color: var(--color-text-secondary);
   line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════
   TESTIMONIALS & REVIEWS
   ══════════════════════════════════════════════════════════════════════ */
.testimonials__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

@media(max-width:960px) {
   .testimonials__grid { grid-template-columns: 1fr; }
}

.testimonial-card {
   background: #FFFFFF;
   border: 1px solid var(--color-border);
   border-radius: 18px;
   padding: 32px 26px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   box-shadow: 0 4px 20px rgba(15, 40, 112, 0.04);
}

.stars {
   color: #F59E0B;
   font-size: 1rem;
   letter-spacing: 2px;
}

.testimonial-card p {
   font-size: 0.95rem;
   line-height: 1.7;
   color: #14235A;
   font-style: italic;
   flex: 1;
}

.testimonial-card__author {
   display: flex;
   align-items: center;
   gap: 14px;
   padding-top: 14px;
   border-top: 1px solid var(--color-border);
}

.avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--color-bg-tertiary);
   color: var(--color-gold);
   font-weight: 700;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1.5px solid var(--color-gold);
}

.testimonial-card__author strong {
   display: block;
   color: #0B1739;
   font-size: 0.9rem;
}

.testimonial-card__author span {
   font-size: 0.75rem;
   color: var(--color-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   VIP NEWSLETTER / CONNOISSEUR CIRCLE
   ══════════════════════════════════════════════════════════════════════ */
.newsletter {
   background: linear-gradient(135deg, #060B1E 0%, #0B1739 100%);
   padding: 70px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   color: #FFFFFF;
}

.newsletter__inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: center;
}

@media(max-width:860px) {
   .newsletter__inner { grid-template-columns: 1fr; text-align: center; }
}

.newsletter__tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #93C5FD;
   margin-bottom: 12px;
}

.newsletter__text h2 {
   font-family: var(--font-serif);
   font-size: clamp(1.8rem, 3.5vw, 2.5rem);
   margin: 0 0 10px;
   color: #FFFFFF;
}

.newsletter__text p {
   color: #CBD8EF;
   font-size: 0.95rem;
   line-height: 1.6;
   margin: 0;
}

.newsletter__form {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.newsletter__input-wrap {
   display: flex;
   gap: 10px;
}

@media(max-width:540px) {
   .newsletter__input-wrap { flex-direction: column; }
}

.newsletter__input-wrap input {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #FFFFFF;
   border-radius: 10px;
   padding: 14px 18px;
   font-size: 0.9rem;
   flex: 1;
   outline: none;
}

.newsletter__input-wrap input::placeholder {
   color: #94A3B8;
}

.newsletter__input-wrap input:focus {
   border-color: #60A5FA;
   box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.newsletter__footnote {
   font-size: 0.72rem;
   color: #94A3B8;
   display: flex;
   align-items: center;
   gap: 6px;
}

@media(max-width:860px) {
   .newsletter__footnote { justify-content: center; }
}

/* Empty State Box */
.empty-state-box {
   text-align: center;
   padding: 60px 20px;
   grid-column: 1 / -1;
   background: #FFFFFF;
   border: 1px dashed var(--color-border);
   border-radius: 16px;
}

.empty-state-box__icon {
   font-size: 3rem;
   color: #94A3B8;
   margin-bottom: 16px;
}

.empty-state-box h3 {
   font-family: var(--font-serif);
   font-size: 1.3rem;
   color: #0B1739;
   margin-bottom: 8px;
}

.empty-state-box p {
   color: var(--color-text-secondary);
   margin-bottom: 20px;
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}



/* ══════════════════════════════════════════════════════════════════════
   WHY US
   ══════════════════════════════════════════════════════════════════════ */
.why-us__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px
}

@media(max-width:900px) {
   .why-us__grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:500px) {
   .why-us__grid {
      grid-template-columns: 1fr
   }
}

.why-card {
   background: var(--color-card-bg);
   border: 1px solid var(--color-card-border);
   border-radius: var(--radius-lg);
   padding: 36px 28px;
   text-align: center;
   transition: all var(--trans)
}

.why-card:hover {
   border-color: var(--color-gold);
   transform: translateY(-4px)
}

.why-card__icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--color-gold-muted);
   border: 1px solid var(--color-gold);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 1.4rem;
   color: var(--color-gold)
}

.why-card h3 {
   font-family: var(--font-serif);
   font-size: 1.2rem;
   margin-bottom: 10px
}

.why-card p {
   color: var(--color-text-secondary);
   font-size: .88rem;
   line-height: 1.7
}

/* ══════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════════════════ */
.testimonials {
   background: var(--color-bg-secondary);
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border)
}

.testimonials__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

@media(max-width:800px) {
   .testimonials__grid {
      grid-template-columns: 1fr
   }
}

.testimonial-card {
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 32px
}

.stars {
   color: var(--color-gold);
   font-size: 1rem;
   margin-bottom: 14px;
   display: block
}

.testimonial-card p {
   color: var(--color-text-secondary);
   font-style: italic;
   margin-bottom: 20px;
   line-height: 1.8
}

.testimonial-card__author {
   display: flex;
   align-items: center;
   gap: 12px
}

.avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--color-gold);
   color: var(--color-text-inverse);
   font-weight: 700;
   font-size: .8rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.testimonial-card__author div strong {
   display: block;
   font-size: .9rem
}

.testimonial-card__author div span {
   font-size: .78rem;
   color: var(--color-text-secondary)
}

/* ══════════════════════════════════════════════════════════════════════
   NEWSLETTER
   ══════════════════════════════════════════════════════════════════════ */
.newsletter {
   background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-gold) 55%, var(--color-accent-deep) 100%);
   padding: 80px 0
}

.newsletter__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap
}

.newsletter h2 {
   font-family: var(--font-serif);
   font-size: 2.2rem;
   color: var(--color-text-inverse);
   margin-bottom: 8px
}

.newsletter p {
   color: rgba(255, 255, 255, .82);
   font-size: .92rem
}

.newsletter__form {
   display: flex;
   gap: 12px;
   flex: 0 0 auto;
   width: 100%;
   max-width: 440px
}

.newsletter__form .input {
   background: rgba(255, 255, 255, .16);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   border-color: rgba(255, 255, 255, .35);
   color: var(--color-text-inverse)
}

.newsletter__form .input::placeholder {
   color: rgba(255, 255, 255, .65)
}

.newsletter__form .btn--gold {
   background: #fff;
   color: var(--color-gold);
   border-color: #fff
}

.newsletter__form .btn--gold:hover {
   background: var(--color-accent-deep);
   border-color: var(--color-accent-deep);
   color: #fff
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════ */
.footer {
   background: var(--color-footer-bg);
   border-top: 3px solid transparent;
   border-image: linear-gradient(90deg, var(--color-gold), var(--color-accent-lighter), var(--color-gold)) 1;
   padding-top: 80px
}

.footer__top {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 48px;
   padding-bottom: 60px;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

@media(max-width:900px) {
   .footer__top {
      grid-template-columns: 1fr 1fr
   }
}

@media(max-width:500px) {
   .footer__top {
      grid-template-columns: 1fr
   }
}

.footer__logo {
   font-family: var(--font-serif);
   font-size: 1.8rem;
   color: #fff;
   margin-bottom: 16px;
   letter-spacing: .05em
}

.footer__brand p {
   color: var(--color-footer-text);
   font-size: .88rem;
   line-height: 1.8;
   margin-bottom: 24px
}

.footer__social {
   display: flex;
   gap: 12px
}

.footer__social a {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .16);
   background: rgba(255, 255, 255, .05);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-footer-text);
   transition: all var(--trans)
}

.footer__social a:hover {
   border-color: var(--color-accent-lighter);
   background: rgba(96, 165, 250, .12);
   color: var(--color-accent-lighter);
   transform: translateY(-2px)
}

.footer__col h4 {
   font-family: var(--font-sans);
   font-size: .72rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--color-accent-lighter);
   margin-bottom: 20px;
   font-weight: 600
}

.footer__col ul {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.footer__col ul a {
   font-size: .86rem;
   color: var(--color-footer-text);
   transition: color var(--trans)
}

.footer__col ul a:hover {
   color: var(--color-accent-lighter)
}

.footer__trust {
   display: flex;
   gap: 12px;
   margin-top: 24px;
   font-size: 1.8rem;
   color: var(--color-footer-text)
}

.footer__bottom {
   padding: 24px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, .08)
}

.footer__bottom p {
   font-size: .78rem;
   color: var(--color-footer-text)
}

.footer__legal-links {
   display: flex;
   gap: 24px
}

.footer__legal-links a {
   font-size: .75rem;
   color: var(--color-footer-text);
   transition: color var(--trans)
}

.footer__legal-links a:hover {
   color: var(--color-accent-lighter)
}

/* ══════════════════════════════════════════════════════════════════════
   CART SIDEBAR
   ══════════════════════════════════════════════════════════════════════ */
.cart-sidebar {
   position: fixed;
   top: 0;
   right: -480px;
   width: 460px;
   max-width: 100vw;
   height: 100%;
   background: var(--color-bg-secondary);
   border-left: 1px solid var(--color-border);
   z-index: 2000;
   transition: right .4s cubic-bezier(.4, 0, .2, 1);
   display: flex;
   flex-direction: column;
   overflow-y: auto
}

.cart-sidebar.open {
   right: 0
}

.overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .7);
   z-index: 1999;
   opacity: 0;
   visibility: hidden;
   transition: all var(--trans)
}

.overlay.visible {
   opacity: 1;
   visibility: visible
}

.cart-sidebar__inner {
   display: flex;
   flex-direction: column;
   height: 100%
}

.cart-sidebar__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 24px;
   border-bottom: 1px solid var(--color-border)
}

.cart-sidebar__header h3 {
   font-family: var(--font-serif);
   font-size: 1.3rem
}

.cart-sidebar__close {
   font-size: 1.5rem;
   color: var(--color-text-secondary);
   transition: color var(--trans)
}

.cart-sidebar__close:hover {
   color: var(--color-gold)
}

.cart-sidebar__items {
   flex: 1;
   overflow-y: auto;
   padding: 16px 24px;
   display: flex;
   flex-direction: column;
   gap: 16px
}

.cart-drawer-item {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 14px;
   background: var(--color-bg-primary);
   border-radius: var(--radius-lg);
   border: 1px solid var(--color-border)
}

.cart-drawer-item img {
   width: 70px;
   height: 70px;
   object-fit: cover;
   border-radius: var(--radius);
   flex-shrink: 0
}

.cart-drawer-item__info {
   flex: 1
}

.cart-drawer-item__info .name {
   font-size: .85rem;
   margin-bottom: 4px;
   line-height: 1.3
}

.cart-drawer-item__info .price {
   font-size: .85rem;
   color: var(--color-gold);
   font-weight: 600;
   margin-bottom: 8px
}

.cart-drawer-item__remove {
   color: var(--color-text-secondary);
   font-size: 1.2rem;
   flex-shrink: 0;
   transition: color var(--trans)
}

.cart-drawer-item__remove:hover {
   color: var(--color-danger)
}

.qty-control {
   display: inline-flex;
   align-items: center;
   gap: 0;
   border: 1px solid var(--color-border);
   border-radius: var(--radius)
}

.qty-control button {
   width: 28px;
   height: 28px;
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
   font-size: .9rem;
   transition: all var(--trans)
}

.qty-control button:hover {
   background: var(--color-gold);
   color: var(--color-text-inverse)
}

.qty-control span {
   width: 36px;
   text-align: center;
   font-size: .85rem
}

.cart-sidebar__footer {
   padding: 20px 24px;
   border-top: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   gap: 12px
}

.cart-sidebar__coupon {
   display: flex;
   gap: 8px
}

.cart-sidebar__totals {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.cart-sidebar__totals .row {
   display: flex;
   justify-content: space-between;
   font-size: .85rem;
   color: var(--color-text-secondary)
}

.cart-sidebar__totals .free span:last-child {
   color: var(--color-success);
   font-weight: 600
}

.cart-sidebar__totals .total {
   border-top: 1px solid var(--color-border);
   padding-top: 10px;
   font-weight: 700;
   font-size: 1rem;
   color: var(--color-text-primary)
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════════════════════ */
.page-hero {
   background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
   border-bottom: 1px solid var(--color-border);
   text-align: center;
   padding-top: 140px
}

.page-hero--short {
   padding-bottom: 40px
}

.page-hero h1 {
   margin-bottom: 12px
}

.page-hero p {
   color: var(--color-text-secondary);
   font-size: .92rem
}

/* ══════════════════════════════════════════════════════════════════════
   SHOP PAGE
   ══════════════════════════════════════════════════════════════════════ */
.shop-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 40px;
   padding-top: 60px;
   padding-bottom: 80px;
   align-items: start
}

@media(max-width:900px) {
   .shop-layout {
      grid-template-columns: 1fr
   }

   .shop-sidebar {
      display: none
   }
}

.sidebar-widget {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 24px;
   margin-bottom: 20px
}

.sidebar-widget h4 {
   font-family: var(--font-sans);
   font-size: .72rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--color-gold);
   margin-bottom: 16px;
   font-weight: 600
}

.sidebar-cats {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.sidebar-cats a {
   display: flex;
   justify-content: space-between;
   padding: 8px 12px;
   border-radius: var(--radius);
   font-size: .85rem;
   color: var(--color-text-secondary);
   transition: all var(--trans)
}

.sidebar-cats a:hover,
.sidebar-cats a.active {
   background: var(--color-gold-muted);
   color: var(--color-gold)
}

.sidebar-cats a span {
   font-size: .75rem;
   background: var(--color-border);
   padding: 2px 8px;
   border-radius: 20px
}

.range-slider {
   width: 100%;
   accent-color: var(--color-gold);
   cursor: pointer
}

.price-range__labels {
   display: flex;
   justify-content: space-between;
   font-size: .78rem;
   color: var(--color-text-secondary);
   margin-top: 8px
}

.toggle-label {
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
   font-size: .85rem;
   color: var(--color-text-secondary)
}

.toggle {
   width: 40px;
   height: 22px;
   background: var(--color-border);
   border-radius: 20px;
   position: relative;
   transition: background var(--trans)
}

.toggle-label input {
   display: none
}

.toggle-label input:checked+.toggle {
   background: var(--color-gold)
}

.toggle::after {
   content: '';
   position: absolute;
   top: 3px;
   left: 3px;
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 50%;
   transition: transform var(--trans)
}

.toggle-label input:checked+.toggle::after {
   transform: translateX(18px)
}

.shop-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
   gap: 16px
}

.shop-toolbar__count {
   font-size: .85rem;
   color: var(--color-text-secondary)
}

select.input {
   width: auto;
   cursor: pointer
}

/* ══════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ══════════════════════════════════════════════════════════════════════ */
.breadcrumb-wrap {
   padding-top: 120px;
   padding-bottom: 20px
}

.breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .8rem;
   color: var(--color-text-secondary)
}

.breadcrumb a:hover {
   color: var(--color-gold)
}

.breadcrumb span {
   color: var(--color-border)
}

.breadcrumb span:last-child {
   color: var(--color-text-secondary)
}

/* ── Product detail layout ── */
.product-detail {
  display: grid;
  /* gallery column | info column — zoom panel floats outside via JS */
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 80px;
  position: relative;
}

@media(max-width:900px){
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Gallery column: thumbs on left, main in centre ── */
.product-detail__gallery {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}

/* Thumbnail strip — vertical, left side. Hidden when only 1 thumb */
.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.gallery-thumbs:has(.gallery-thumb:only-child) {
  display: none;
}

.gallery-thumb {
  width: 68px;
  height: 68px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-secondary);
  padding: 0;
  transition: border-color var(--trans), transform var(--trans);
  opacity: .65;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-thumb.active,
.gallery-thumb:hover {
  border-color: var(--color-gold);
  opacity: 1;
  transform: scale(1.04);
}

/* Main image area */
.gallery-main {
  flex: 1;
  position: relative;
}

/* Zoom container — the hover target */
.zoom-container {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
}

.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Magnifier lens — the glowing square that follows the cursor */
.zoom-lens {
  display: none;
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid var(--color-gold);
  border-radius: 4px;
  background: rgba(30,64,175,.08);
  box-shadow: 0 0 0 1px rgba(30,64,175,.3), inset 0 0 16px rgba(30,64,175,.06);
  pointer-events: none;
  z-index: 10;
  backdrop-filter: brightness(1.15);
}

/* Zoomed result panel — sits in the product-detail grid as its own column */
.zoom-result {
  display: none;
  position: absolute;
  /* positioned by JS relative to the zoom-container */
  width: 400px;
  height: 400px;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  overflow: hidden;
  z-index: 200;
  box-shadow: 0 24px 64px rgba(15,40,112,.25), 0 0 0 1px rgba(30,64,175,.2);
  pointer-events: none;
  top: 0;
  left: 0;
}

/* On narrow screens, show result below instead of beside */
@media(max-width:900px){
  .zoom-result {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    z-index: 5000;
    border-color: var(--color-gold);
  }
}

/* When product detail is in single-column, result goes to side of viewport */
@media(max-width:900px){
  .gallery-thumbs { flex-direction: row; }
  .gallery-thumb  { width: 56px; height: 56px; }
}

.product-detail__cat {
   font-size: .72rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--color-gold);
   margin-bottom: 8px
}

.product-detail__name {
   font-family: var(--font-serif);
   font-size: clamp(1.6rem, 4vw, 2.8rem);
   margin-bottom: 12px
}

.product-detail__rating {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 20px
}

.rating-count {
   font-size: .8rem;
   color: var(--color-text-secondary)
}

.product-detail__price {
   display: flex;
   align-items: baseline;
   gap: 12px;
   margin-bottom: 6px
}

.price-main {
   font-family: var(--font-serif);
   font-size: 2.2rem;
   color: var(--color-gold)
}

.price-old {
   font-size: 1rem;
   color: var(--color-text-secondary);
   text-decoration: line-through
}

.price-saving {
   font-size: .8rem;
   color: var(--color-success);
   font-weight: 600
}

.product-detail__vat {
   font-size: .75rem;
   color: var(--color-text-secondary);
   margin-bottom: 20px
}

.product-detail__desc {
   color: var(--color-text-secondary);
   font-size: .92rem;
   line-height: 1.9;
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
   padding: 20px 0;
   margin-bottom: 20px
}

.product-detail__specs {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: 28px
}

.spec {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 12px;
   text-align: center
}

.spec span {
   display: block;
   font-size: .68rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-text-secondary);
   margin-bottom: 4px
}

.spec strong {
   font-size: .9rem
}

.product-detail__actions {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-bottom: 24px;
   flex-wrap: wrap
}

.qty-selector {
   display: flex;
   border: 1px solid var(--color-border);
   border-radius: var(--radius)
}

.qty-btn {
   width: 44px;
   height: 48px;
   background: var(--color-bg-secondary);
   color: var(--color-text-primary);
   font-size: 1.1rem;
   transition: all var(--trans)
}

.qty-btn:hover {
   background: var(--color-gold);
   color: var(--color-text-inverse)
}

.qty-input {
   width: 56px;
   height: 48px;
   background: transparent;
   color: var(--color-text-primary);
   text-align: center;
   font-size: 1rem;
   border: none;
   outline: none
}

.product-detail__trust {
   display: flex;
   gap: 20px;
   flex-wrap: wrap
}

.product-detail__trust span {
   font-size: .78rem;
   color: var(--color-text-secondary);
   display: flex;
   align-items: center;
   gap: 6px
}

.product-detail__trust i {
   color: var(--color-gold)
}

/* ══════════════════════════════════════════════════════════════════════
   CART PAGE
   ══════════════════════════════════════════════════════════════════════ */
.cart-page {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 40px;
   padding-top: 60px;
   padding-bottom: 80px;
   align-items: start
}

@media(max-width:900px) {
   .cart-page {
      grid-template-columns: 1fr
   }
}

.cart-page__header {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 40px;
   gap: 16px;
   padding: 12px 20px;
   font-size: .7rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-text-secondary);
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 12px
}

.cart-row {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 40px;
   gap: 16px;
   align-items: center;
   padding: 16px 20px;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   margin-bottom: 8px
}

@media(max-width:700px) {
   .cart-page__header {
      display: none
   }

   .cart-row {
      grid-template-columns: 1fr;
      text-align: center
   }
}

.cart-row__product {
   display: flex;
   gap: 16px;
   align-items: center
}

.cart-row__product img {
   width: 70px;
   height: 70px;
   object-fit: cover;
   border-radius: var(--radius);
   flex-shrink: 0
}

.cart-row__name {
   font-size: .9rem;
   margin-bottom: 4px
}

.cart-row__meta {
   font-size: .75rem;
   color: var(--color-text-secondary)
}

.cart-row__price,
.cart-row__total {
   font-weight: 600
}

.cart-row__remove {
   color: var(--color-text-secondary);
   font-size: 1.2rem;
   transition: color var(--trans);
   justify-self: center
}

.cart-row__remove:hover {
   color: var(--color-danger)
}

.cart-page__coupon {
   display: flex;
   gap: 12px;
   margin-top: 16px;
   padding: 16px;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg)
}

.cart-page__summary {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 28px;
   position: sticky;
   top: 120px
}

.cart-page__summary h3 {
   font-family: var(--font-serif);
   font-size: 1.4rem;
   margin-bottom: 20px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--color-border)
}

.summary-row {
   display: flex;
   justify-content: space-between;
   padding: 8px 0;
   font-size: .88rem;
   color: var(--color-text-secondary)
}

.summary-row--free span:last-child {
   color: var(--color-success);
   font-weight: 600
}

.summary-row--total {
   border-top: 1px solid var(--color-border);
   padding-top: 16px;
   margin-top: 8px;
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-text-primary)
}

.summary-vat-note,
.co-vat-note {
   font-size: .73rem;
   color: var(--color-text-secondary);
   margin-bottom: 16px
}

.cart-free-msg {
   font-size: .78rem;
   color: var(--color-gold);
   padding: 8px 0
}

.cart-trust {
   display: flex;
   gap: 12px;
   justify-content: center;
   font-size: 1.6rem;
   color: var(--color-text-secondary);
   margin-top: 12px
}

/* ══════════════════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════════════════ */
.checkout-steps {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-top: 16px;
   font-size: .78rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-text-secondary)
}

.step.active {
   color: var(--color-gold);
   font-weight: 600
}

.step-sep {
   color: var(--color-border)
}

.checkout-layout {
   display: grid;
   grid-template-columns: 1fr 400px;
   gap: 40px;
   padding-top: 60px;
   padding-bottom: 80px;
   align-items: start
}

@media(max-width:1000px) {
   .checkout-layout {
      grid-template-columns: 1fr
   }
}

.checkout-forms {
   display: flex;
   flex-direction: column;
   gap: 20px
}

.checkout-card {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 28px
}

.checkout-card h3 {
   font-family: var(--font-serif);
   font-size: 1.25rem;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px
}

.checkout-card h3 i {
   color: var(--color-gold);
   font-size: 1rem
}

.coupon-row {
   display: flex;
   gap: 10px
}

.coupon-hint {
   font-size: .8rem;
   margin-top: 8px
}

.stripe-badge {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   background: var(--color-gold-muted);
   border: 1px solid rgba(30, 64, 175, .2);
   border-radius: var(--radius);
   margin-bottom: 20px;
   font-size: .8rem;
   color: var(--color-text-secondary)
}

.stripe-badge i {
   color: var(--color-gold)
}

.stripe-element-wrap {
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-bottom: 16px
}

.stripe-element-wrap label {
   font-size: .73rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-text-secondary);
   font-weight: 500
}

.stripe-mock-field {
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 14px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--color-text-secondary);
   font-size: .9rem
}

.stripe-mock-field i {
   color: var(--color-text-secondary)
}

.stripe-brand {
   margin-left: auto;
   font-size: 1.4rem;
   color: #1a4bc0
}

.stripe-logos {
   display: flex;
   gap: 12px;
   font-size: 1.6rem;
   color: var(--color-text-secondary);
   margin-top: 4px
}

.checkout-legal {
   font-size: .75rem;
   color: var(--color-text-secondary);
   text-align: center;
   margin-top: 12px
}

.checkout-legal a {
   color: var(--color-gold)
}

.checkout-summary .checkout-card {
   position: sticky;
   top: 120px
}

.co-item {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px
}

.co-item img {
   width: 52px;
   height: 52px;
   object-fit: cover;
   border-radius: var(--radius);
   flex-shrink: 0
}

.co-item__info {
   flex: 1
}

.co-item__info p {
   font-size: .85rem;
   line-height: 1.3;
   margin-bottom: 2px
}

.co-item__info span {
   font-size: .75rem;
   color: var(--color-text-secondary)
}

.co-item__price {
   font-weight: 600;
   font-size: .9rem;
   white-space: nowrap
}

.co-divider {
   height: 1px;
   background: var(--color-border);
   margin: 14px 0
}

.co-row {
   display: flex;
   justify-content: space-between;
   font-size: .88rem;
   color: var(--color-text-secondary);
   padding: 5px 0
}

.co-row--free span:last-child {
   color: var(--color-success);
   font-weight: 600
}

.co-row--total {
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--color-text-primary)
}

.sticky-card {
   position: sticky;
   top: 120px
}

/* ══════════════════════════════════════════════════════════════════════
   CONFIRMATION
   ══════════════════════════════════════════════════════════════════════ */
.confirmation-page {
   min-height: 70vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 100px 24px
}

.confirmation-box {
   text-align: center;
   max-width: 560px;
   width: 100%;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 60px 48px
}

.confirmation-icon {
   font-size: 4rem;
   color: var(--color-gold);
   margin-bottom: 20px
}

.confirmation-box h1 {
   margin-bottom: 8px
}

.confirmation-num {
   font-size: .9rem;
   color: var(--color-text-secondary);
   margin-bottom: 16px
}

.confirmation-box p {
   color: var(--color-text-secondary);
   font-size: .9rem;
   line-height: 1.8;
   margin-bottom: 28px
}

.confirmation-details {
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 16px;
   margin-bottom: 20px;
   text-align: left
}

.confirmation-actions {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.confirmation-trust {
   display: flex;
   gap: 12px;
   justify-content: center;
   font-size: 1.6rem;
   color: var(--color-text-secondary)
}

/* ══════════════════════════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════════════════════════ */
.auth-body {
   background: var(--color-bg-primary);
   margin: 0;
   overflow: hidden
}

.auth-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 100vh
}

@media(max-width:800px) {
   .auth-layout {
      grid-template-columns: 1fr
   }

   .auth-panel--brand {
      display: none
   }
}

.auth-panel--brand {
   background-color: #0B1739;
   background-size: cover;
   background-position: center;
   border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 48px;
   overflow: hidden;
   position: relative
}

.auth-logo {
   font-family: var(--font-serif);
   font-size: 1.6rem;
   color: #fff;
   letter-spacing: .06em
}

.auth-brand-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.auth-brand-content h2 {
   font-family: var(--font-serif);
   font-size: 2.4rem;
   line-height: 1.25;
   margin-bottom: 16px;
   color: #fff
}

.auth-brand-content h2 em {
   color: var(--color-accent-lighter)
}

.auth-brand-content p {
   color: rgba(255,255,255,.75);
   font-size: .92rem
}

.auth-brand-footer {
   display: flex;
   gap: 16px;
   font-size: 2rem;
   color: rgba(255,255,255,.6)
}

.auth-panel--form {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow-y: auto;
   padding: 48px 32px
}

.auth-form-wrap {
   width: 100%;
   max-width: 420px
}

.auth-title {
   font-family: var(--font-serif);
   font-size: 2.2rem;
   margin-bottom: 6px
}

.auth-sub {
   color: var(--color-text-secondary);
   font-size: .9rem;
   margin-bottom: 32px
}

.auth-form {
   display: flex;
   flex-direction: column;
   gap: 18px
}

.auth-form__row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px
}

.auth-link {
   color: var(--color-gold);
   font-size: .82rem;
   transition: opacity var(--trans)
}

.auth-link:hover {
   opacity: .75
}

.auth-divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 4px 0;
   color: var(--color-text-secondary);
   font-size: .78rem
}

.auth-divider::before,
.auth-divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--color-border)
}

.auth-socials {
   display: flex;
   gap: 12px
}

.auth-switch {
   text-align: center;
   font-size: .85rem;
   color: var(--color-text-secondary);
   margin-top: 8px
}

.auth-back {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--color-text-secondary);
   font-size: .8rem;
   margin-bottom: 24px;
   transition: color var(--trans)
}

.auth-back:hover {
   color: var(--color-gold)
}

/* ══════════════════════════════════════════════════════════════════════
   ACCOUNT PAGES
   ══════════════════════════════════════════════════════════════════════ */
.account-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: 40px;
   padding-top: 60px;
   padding-bottom: 80px;
   align-items: start
}

@media(max-width:900px) {
   .account-layout {
      grid-template-columns: 1fr
   }
}

.account-sidebar {
   position: sticky;
   top: 120px
}

.account-sidebar__user {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 20px;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   margin-bottom: 12px
}

.account-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--color-gold);
   color: var(--color-text-inverse);
   font-weight: 700;
   font-size: .85rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.account-sidebar__user strong {
   display: block;
   font-size: .9rem;
   margin-bottom: 2px
}

.account-sidebar__user span {
   font-size: .75rem;
   color: var(--color-text-secondary)
}

.account-nav {
   display: flex;
   flex-direction: column;
   gap: 4px;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   padding: 8px
}

.account-nav a,
.account-nav button {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   font-size: .85rem;
   color: var(--color-text-secondary);
   border-radius: var(--radius);
   transition: all var(--trans);
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   cursor: pointer;
   font-family: inherit;
   letter-spacing: normal;
   text-transform: none
}

.account-nav a i,
.account-nav button i {
   width: 16px;
   color: var(--color-text-secondary);
   transition: color var(--trans)
}

.account-nav a:hover,
.account-nav a.active {
   background: var(--color-gold-muted);
   color: var(--color-gold)
}

.account-nav a:hover i,
.account-nav a.active i {
   color: var(--color-gold)
}

.account-nav__logout {
   border-top: 1px solid var(--color-border) !important;
   margin-top: 8px !important;
   padding-top: 12px !important;
   color: var(--color-danger) !important
}

.account-nav__logout:hover {
   background: rgba(231, 76, 60, .08) !important;
   color: var(--color-danger) !important
}

.account-title {
   font-family: var(--font-serif);
   font-size: 1.8rem;
   margin-bottom: 24px
}

.account-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-bottom: 24px
}

.acc-stat {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 24px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px
}

.acc-stat i {
   font-size: 1.3rem;
   color: var(--color-gold)
}

.acc-stat__num {
   font-family: var(--font-serif);
   font-size: 1.8rem;
   color: var(--color-text-primary)
}

.acc-stat span:last-child {
   font-size: .72rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-text-secondary)
}

.account-card {
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: 28px;
   margin-bottom: 20px
}

.account-card__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px
}

.account-card__header h3 {
   font-family: var(--font-serif);
   font-size: 1.2rem
}

.orders-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .85rem
}

.orders-table th {
   text-align: left;
   font-size: .7rem;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-text-secondary);
   font-weight: 500;
   padding: 8px 12px;
   border-bottom: 1px solid var(--color-border)
}

.orders-table td {
   padding: 12px 12px;
   border-bottom: 1px solid var(--color-border);
   color: var(--color-text-secondary)
}

.orders-table tr:last-child td {
   border-bottom: none
}

.order-num {
   font-family: var(--font-sans);
   font-weight: 600;
   color: var(--color-gold);
   font-size: .82rem
}

.status-badge {
   padding: 4px 12px;
   border-radius: 20px;
   font-size: .7rem;
   font-weight: 600;
   letter-spacing: .06em;
   text-transform: uppercase
}

.status-badge--delivered,
.status-badge--paymentreceived {
   background: rgba(39, 174, 96, .15);
   color: var(--color-success)
}

.status-badge--dispatched,
.status-badge--processing {
   background: rgba(243, 156, 18, .15);
   color: var(--color-warning)
}

.status-badge--pendingpayment {
   background: rgba(41, 128, 185, .15);
   color: var(--color-info)
}

.status-badge--cancelled {
   background: rgba(231, 76, 60, .15);
   color: var(--color-danger)
}

/* ══════════════════════════════════════════════════════════════════════
   FRAME ANIMATION LOADER
   ══════════════════════════════════════════════════════════════════════ */
.seq-loader__inner {
   text-align: center;
   padding: 40px
}

.seq-loader__logo {
   font-family: var(--font-serif);
   font-size: 2rem;
   color: var(--color-gold);
   letter-spacing: .08em;
   margin-bottom: 32px
}

.seq-loader__bar {
   width: 240px;
   height: 2px;
   background: var(--color-border);
   border-radius: 2px;
   overflow: hidden;
   margin: 0 auto 16px
}

.seq-loader__fill {
   height: 100%;
   width: 0%;
   background: var(--color-gold);
   border-radius: 2px;
   transition: width .15s linear
}

.seq-loader__txt {
   font-size: .75rem;
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--color-text-secondary)
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — HERO & GLOBAL
   ══════════════════════════════════════════════════════════════════════ */

@media(max-width:1024px) {
   .seq-content {
      padding-top: 105px;
   }
}

@media(max-width:768px) {
   .seq-content {
      padding-top: 95px;
      padding-bottom: 60px;
   }

   .hero__subtitle {
      max-width: 100%;
   }

   .hero__ctas {
      gap: 10px;
   }

   .hero__ctas .btn {
      padding: 13px 24px;
      font-size: .8rem;
   }

   .stat {
      padding: 0 18px;
   }

   .stat__sep {
      height: 30px;
   }
}

@media(max-width:600px) {
   .seq-content {
      padding-top: 88px;
      padding-bottom: 50px;
      justify-content: flex-end;
   }

   .hero__eyebrow {
      font-size: .65rem;
      margin-bottom: 10px;
   }

   .hero__subtitle {
      display: none;
   }

   .hero__ctas {
      margin-bottom: 24px;
   }

   .hero__ctas .btn--ghost {
      display: none;
   }

   .hero__stats {
      gap: 0;
      justify-content: flex-start;
   }

   .stat {
      padding: 0 14px;
   }

   .stat:first-child {
      padding-left: 0;
   }

   .stat__num {
      font-size: 1.5rem;
   }

   .stat__label {
      font-size: .6rem;
   }

   .hero__scroll-hint {
      display: none;
   }

   .section {
      padding: 60px 0;
   }
}

@media(max-width:400px) {
   .seq-content {
      padding-top: 80px;
   }

   .hero__title {
      font-size: 2rem;
   }

   .hero__ctas .btn {
      padding: 12px 20px;
      font-size: .78rem;
      letter-spacing: .08em;
   }

   .stat {
      padding: 0 10px;
   }

   .stat__sep {
      display: none;
   }

   .stat__num {
      font-size: 1.3rem;
   }
}

@media(max-width:480px) {
   .product-detail__specs {
      grid-template-columns: repeat(2, 1fr);
   }

   .account-stats {
      grid-template-columns: 1fr 1fr;
   }

   .newsletter__inner {
      flex-direction: column;
      gap: 24px;
   }

   .newsletter__form {
      flex-direction: column;
   }

   .newsletter__form .input {
      width: 100%;
   }

   .newsletter__form .btn {
      width: 100%;
      justify-content: center;
   }

   .age-gate__box {
      padding: 40px 24px;
      margin: 16px;
   }

   .cart-sidebar {
      width: 100vw;
   }

   .confirmation-box {
      padding: 40px 24px;
   }
}

@media(max-width:360px) {
   .header__logo {
      font-size: 1.1rem;
   }

   .icon-btn {
      width: 36px;
      height: 36px;
      font-size: .9rem;
   }

   .hero__title {
      font-size: 1.8rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM GLASS SURFACES — Royal Blue theme finishing pass
   Elevated, soft-shadowed, subtly glassy cards across the whole site.
   ══════════════════════════════════════════════════════════════════════ */
.product-card,
.category-card,
.why-card,
.testimonial-card,
.checkout-card,
.account-card,
.sidebar-widget,
.cart-row,
.cart-page__summary,
.cart-page__coupon,
.confirmation-box,
.acc-stat,
.account-sidebar__user,
.account-nav,
.cart-drawer-item,
.stripe-mock-field,
.spec {
   background: rgba(255, 255, 255, .88);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   box-shadow: var(--shadow);
   transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}

.product-card:hover,
.category-card:hover,
.why-card:hover,
.testimonial-card:hover {
   box-shadow: var(--shadow-lg);
}

.cart-sidebar {
   background: rgba(255, 255, 255, .92);
   backdrop-filter: var(--glass-blur);
   -webkit-backdrop-filter: var(--glass-blur);
   box-shadow: var(--shadow-lg);
}

.overlay {
   background: rgba(11, 23, 57, .55);
}

/* Buttons pick up a touch of shine on hover — reinforces the premium feel */
.btn--outline:hover,
.btn--ghost:hover {
   box-shadow: 0 6px 20px rgba(30, 64, 175, .15);
}

/* Scrollbar tuned to the royal-blue palette */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-tertiary); }
::-webkit-scrollbar-thumb { background: var(--color-btn-ghost-border); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* Selection highlight */
::selection { background: var(--color-gold); color: #fff; }