*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   /* Font fallback while loading */
   body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
   h1, h2, h3, .section-title, .hero-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; }

   :root {
     --cream: #F5F5F0;
     --warm-white: #FAFAF7;
     --sand: #EDEAE3;
     --terracotta: #4A5D3E;
     --terracotta-light: #5C7A4A;
     --dark: #1A1F16;
     --brown: #2E3B28;
     --brown-light: #5A6B52;
     --gold: #8B9E6B;
     --gold-light: #A3B88A;
     --text-muted: #7A7E72;
     --border: rgba(46,59,40,0.12);
     --nav-bg: rgba(250,250,247,0.95);
     --card-bg: #FFFFFF;
     --footer-bg: #1A1F16;
     --trust-bg: #EDEAE3;
     --trust-icon-bg: #F5F5F0;
     --testimonial-bg: #2E3B28;
   }

   [data-theme="dark"] {
     --cream: #1C2118;
     --warm-white: #141812;
     --sand: #242A1F;
     --terracotta: #A3B88A;
     --terracotta-light: #B8CCA0;
     --dark: #F2F0EB;
     --brown: #E8E5DE;
     --brown-light: #C8C4BB;
     --gold: #C8D9A8;
     --gold-light: #D4E6B5;
     --text-muted: #A8A59C;
     --border: rgba(200,196,187,0.15);
     --nav-bg: rgba(20,24,18,0.95);
     --card-bg: #1C2118;
     --footer-bg: #0E110C;
     --trust-bg: #1C2118;
     --trust-icon-bg: #2A3024;
     --testimonial-bg: #0E110C;
   }

   /* Dark mode overrides for elements with hardcoded colors */
   [data-theme="dark"] .announcement { background: #1C2118; color: #C8C4BB; }
   [data-theme="dark"] .announcement span { color: #D4E6B5; }
   [data-theme="dark"] .testi-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
   [data-theme="dark"] .testi-text { color: #E0DDD6; }
   [data-theme="dark"] .testi-name { color: #F2F0EB; }
   [data-theme="dark"] .testi-loc { color: rgba(255,255,255,0.55); }
   [data-theme="dark"] .testi-stars { color: #D4E6B5; }
   [data-theme="dark"] .testimonials .section-title { color: #F2F0EB; }
   [data-theme="dark"] .testimonials .section-eyebrow { color: #C8D9A8; }
   [data-theme="dark"] .footer-contact .contact-item { color: rgba(255,255,255,0.8); }
   [data-theme="dark"] .footer-contact strong { color: #F2F0EB !important; }
   [data-theme="dark"] .footer-col h4 { color: #C8D9A8; }
   [data-theme="dark"] .footer-col a { color: rgba(255,255,255,0.65); }
   [data-theme="dark"] .footer-col a:hover { color: #B8CCA0; }
   [data-theme="dark"] .footer-brand .nav-logo { color: #F2F0EB; }
   [data-theme="dark"] .footer-desc { color: rgba(255,255,255,0.6); }
   [data-theme="dark"] .footer-bottom { color: rgba(255,255,255,0.55); }
   [data-theme="dark"] .nav-logo { color: #F2F0EB; }
   [data-theme="dark"] .nav-logo span { color: #A3B88A; }
   [data-theme="dark"] .nav-icon { stroke: #C8C4BB; }
   [data-theme="dark"] .wishlist-btn { background: #242A1F; }
   [data-theme="dark"] .nl-input { background: #242A1F; border-color: rgba(255,255,255,0.12); color: #F2F0EB; }
   [data-theme="dark"] .nl-input::placeholder { color: #8A8880; }
   [data-theme="dark"] .section-title em { color: #A3B88A; }
   [data-theme="dark"] .newsletter-title em { color: #A3B88A; }
   [data-theme="dark"] .hero-title em { color: #A3B88A; }
   [data-theme="dark"] .contact-item { color: rgba(255,255,255,0.7); }
   [data-theme="dark"] .pay-badge { color: rgba(255,255,255,0.6); }

   html { scroll-behavior: smooth; }

   body {
     font-family: 'DM Sans', sans-serif;
     background: var(--warm-white);
     color: var(--dark);
     overflow-x: hidden;
     transition: background-color 0.3s, color 0.3s;
   }

   /* ── ANNOUNCEMENT BAR ── */
   .announcement {
     background: var(--brown);
     color: var(--sand);
     text-align: center;
     padding: 10px 20px;
     font-size: 13px;
     letter-spacing: 0.06em;
   }
   .announcement span { color: var(--gold-light); font-weight: 500; }

   /* ── NAVBAR ── */
   nav {
     position: sticky;
     top: 0;
     z-index: 100;
     background: var(--nav-bg);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border);
     padding: 0 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 72px;
   }

   .nav-logo {
     font-family: 'Cormorant Garamond', serif;
     font-size: 26px;
     font-weight: 600;
     letter-spacing: 0.04em;
     color: var(--brown);
     text-decoration: none;
   }
   .nav-logo span { color: var(--terracotta); }

   .nav-links {
     display: flex;
     gap: 36px;
     list-style: none;
   }
   .nav-links a {
     text-decoration: none;
     color: var(--brown-light);
     font-size: 14px;
     letter-spacing: 0.04em;
     font-weight: 400;
     transition: color 0.2s;
   }
   .nav-links a:hover { color: var(--terracotta); }

   .nav-right {
     display: flex;
     align-items: center;
     gap: 20px;
   }

   .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     background: none;
     border: none;
     cursor: pointer;
     padding: 4px;
   }
   .hamburger span {
     width: 22px; height: 2px;
     background: var(--brown);
     border-radius: 2px;
     transition: all 0.3s;
   }

   .mobile-menu {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 999;
     background: var(--warm-white);
     padding: 80px 32px 32px;
     flex-direction: column;
     gap: 0;
     animation: slideIn 0.3s ease;
   }
   .mobile-menu.open { display: flex; }
   .mobile-menu a {
     display: block;
     padding: 16px 0;
     font-size: 18px;
     color: var(--brown);
     text-decoration: none;
     border-bottom: 1px solid var(--border);
     font-weight: 400;
   }
   .mobile-menu a:hover { color: var(--terracotta); }
   .mobile-menu .close-menu {
     position: absolute;
     top: 20px;
     right: 20px;
     background: none;
     border: none;
     font-size: 28px;
     color: var(--brown);
     cursor: pointer;
   }
   @keyframes slideIn { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
   [data-theme="dark"] .mobile-menu { background: #141812; }
   [data-theme="dark"] .hamburger span { background: #C8C4BB; }
   .nav-icon {
     width: 22px; height: 22px;
     stroke: var(--brown-light);
     fill: none;
     cursor: pointer;
     transition: stroke 0.2s;
   }
   .nav-icon:hover { stroke: var(--terracotta); }

   .cart-btn {
     background: var(--terracotta);
     color: white;
     border: none;
     padding: 10px 22px;
     border-radius: 50px;
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.04em;
     cursor: pointer;
     transition: background 0.2s, transform 0.15s;
   }
   .cart-btn:hover { background: var(--brown); transform: translateY(-1px); }

   /* ── HERO ── */
   .hero {
     min-height: 70vh;
     display: grid;
     grid-template-columns: 1fr;
     position: relative;
     overflow: hidden;
     background: none;
     background-color: var(--dark);
   }
   .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(26,31,22, var(--hero-overlay, 0.45));
     z-index: 1;
   }

   .hero-left {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 50px 50px 50px 60px;
     position: relative;
     z-index: 2;
     max-width: 650px;
   }

   .hero-eyebrow {
     font-size: 12px;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: rgba(255,255,255,0.85);
     font-weight: 500;
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .hero-eyebrow::before {
     content: '';
     display: block;
     width: 40px;
     height: 1px;
     background: rgba(255,255,255,0.6);
   }

   .hero-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(52px, 6vw, 84px);
     font-weight: 300;
     line-height: 1.05;
     color: #FFFFFF;
     margin-bottom: 28px;
   }
   .hero-title em {
     font-style: italic;
     color: var(--gold-light);
   }

   .hero-subtitle {
     font-size: 15px;
     line-height: 1.7;
     color: rgba(255,255,255,0.8);
     max-width: 400px;
     margin-bottom: 32px;
     font-weight: 300;
   }

   .hero-ctas {
     display: flex;
     gap: 16px;
     align-items: center;
   }

   .btn-primary {
     background: var(--terracotta);
     color: white;
     padding: 16px 36px;
     border-radius: 50px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 0.05em;
     transition: background 0.25s, transform 0.15s;
     display: inline-block;
   }
   .btn-primary:hover { background: var(--terracotta-light); transform: translateY(-2px); }

   .btn-outline {
     color: white;
     padding: 16px 28px;
     border-radius: 50px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 0.04em;
     border: 1.5px solid rgba(255,255,255,0.5);
     transition: border-color 0.2s, background 0.2s;
     display: inline-block;
   }
   .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }

   .hero-right {
     display: none;
   }

   .hero-image-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     height: 100%;
     gap: 0;
   }

   .hero-img {
     overflow: hidden;
     position: relative;
   }
   .hero-img img {
     width: 100%; height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
   }
   .hero-img:hover img { transform: scale(1.05); }

   .hero-img.tall {
     grid-row: span 2;
   }

   /* ── TRUST BAR ── */
   .trust-bar {
     background: var(--trust-bg);
     padding: 22px 80px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
   }
   .trust-item {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .trust-icon {
     width: 36px; height: 36px;
     background: var(--trust-icon-bg);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   .trust-icon svg {
     width: 18px; height: 18px;
     stroke: var(--terracotta);
     fill: none;
   }
   .trust-label {
     font-size: 13px;
     font-weight: 500;
     color: var(--brown);
     letter-spacing: 0.02em;
   }
   .trust-sub {
     font-size: 11px;
     color: var(--text-muted);
   }

   /* ── SECTION HEADER ── */
   .section-header {
     text-align: center;
     margin-bottom: 60px;
   }
   .section-eyebrow {
     font-size: 11px;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: var(--terracotta);
     font-weight: 500;
     margin-bottom: 16px;
   }
   .section-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: clamp(36px, 4vw, 52px);
     font-weight: 400;
     color: var(--brown);
     line-height: 1.15;
   }
   .section-title em { font-style: italic; }
   .section-sub {
     margin-top: 16px;
     font-size: 15px;
     color: var(--text-muted);
     max-width: 520px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.7;
   }

   /* ── CATEGORIES ── */
   .categories {
     padding: 80px 0;
     background: #1A1410;
     overflow: hidden;
   }
   .categories .section-header { padding: 0 80px; }
   .categories .section-eyebrow { color: #A3B88A; }
   .categories .section-title { color: #F5F0EB; }
   .categories .section-sub { color: rgba(255,255,255,0.6); }

   .cat-grid {
     display: flex;
     gap: 0;
     padding: 0 40px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     justify-content: center;
     align-items: center;
     perspective: 1200px;
   }
   .cat-grid::-webkit-scrollbar { display: none; }

   .cat-scroll-bar { display: none; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin: 16px 80px 0; position: relative; overflow: hidden; }
   .cat-scroll-bar .thumb { position: absolute; height: 100%; background: #A3B88A; border-radius: 2px; transition: left 0.1s; }

   @media (max-width: 860px) {
     .cat-grid {
       justify-content: flex-start;
       padding: 0 16px;
       gap: 0;
     }
     .cat-scroll-bar { display: block; margin: 16px 16px 0; }
     .categories { padding: 50px 0; }
     .categories .section-header { padding: 0 16px; }
   }

   .scroll-dots {
     display: none;
     justify-content: flex-end;
     gap: 4px;
     margin-top: 14px;
     padding-right: 4px;
   }
   .scroll-dots .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: rgba(255,255,255,0.2);
     transition: all 0.3s;
   }
   .scroll-dots .dot.active {
     width: 16px;
     border-radius: 3px;
     background: #A3B88A;
   }

   @media (max-width: 860px) {
     .scroll-dots { display: flex; }
   }

   .cat-card {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     width: 230px;
     height: 230px;
     flex-shrink: 0;
     cursor: pointer;
     text-decoration: none;
     display: block;
     margin-left: -22px;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
     box-shadow: -12px 12px 40px rgba(0,0,0,0.85), -4px 4px 15px rgba(0,0,0,0.6);
     z-index: 1;
   }
   .cat-card:first-child { margin-left: 0; }

   /* Group hover: all cards dim + shrink, hovered one pops */
   .cat-grid:hover .cat-card {
     opacity: 0.55;
     transform: scale(0.96);
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
   }
   .cat-grid:hover .cat-card:hover {
     opacity: 1;
     transform: translateY(-18px) scale(1.02);
     z-index: 10;
     box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 15px 30px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.3);
   }

   .cat-img {
     width: 100%; height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .cat-card:hover .cat-img { transform: scale(1.1); }

   .cat-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(20,16,12,0.85) 0%, rgba(20,16,12,0.2) 50%, rgba(20,16,12,0.05) 100%);
     transition: background 0.4s ease;
   }
   .cat-card:hover .cat-overlay {
     background: linear-gradient(to top, rgba(20,16,12,0.75) 0%, rgba(20,16,12,0.1) 50%, transparent 100%);
   }

   .cat-info {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 20px;
     color: white;
     transform: translateY(4px);
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .cat-card:hover .cat-info { transform: translateY(0); }

   .cat-tag {
     font-size: 9px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     opacity: 0.6;
     margin-bottom: 6px;
     font-weight: 500;
   }
   .cat-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 20px;
     font-weight: 500;
     line-height: 1.2;
   }
   .cat-count {
     font-size: 12px;
     opacity: 0.55;
     margin-top: 4px;
   }

   @media (max-width: 860px) {
     .categories { padding: 50px 0; }
     .categories .section-header { padding: 0 20px; margin-bottom: 30px; }
     .cat-grid { justify-content: flex-start; padding: 0 20px; overflow-x: auto; }
     .cat-card { width: 170px; height: 170px; margin-left: -16px; border-radius: 14px; }
     .cat-info { padding: 14px; }
     .cat-name { font-size: 15px; }
     .cat-tag { font-size: 8px; }
     .cat-carousel-mobile { display: none !important; }
   }
   @media (max-width: 480px) {
     .cat-card { width: 150px; height: 150px; margin-left: -12px; border-radius: 12px; }
     .cat-name { font-size: 13px; }
     .cat-info { padding: 10px; }
   }

   /* ── PRODUCTS ── */
   .products {
     padding: 60px 80px;
     background: var(--cream);
   }

   .product-tabs {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-bottom: 50px;
   }
   .tab-btn {
     padding: 10px 26px;
     border-radius: 50px;
     border: 1.5px solid var(--border);
     background: transparent;
     color: var(--text-muted);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 400;
     cursor: pointer;
     transition: all 0.2s;
   }
   .tab-btn.active, .tab-btn:hover {
     background: var(--brown);
     color: white;
     border-color: var(--brown);
   }

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

   .product-card {
     background: var(--card-bg);
     border-radius: 14px;
     overflow: hidden;
     position: relative;
     transition: transform 0.25s, box-shadow 0.25s;
   }
   .product-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 60px rgba(0,0,0,0.1);
   }

   .product-img-wrap {
     position: relative;
     aspect-ratio: 1;
     overflow: hidden;
   }
   .product-img-wrap img {
     width: 100%; height: 100%;
     object-fit: cover;
     transition: transform 0.5s;
   }
   .product-card:hover .product-img-wrap img { transform: scale(1.08); }

   .product-badge {
     position: absolute;
     top: 14px;
     left: 14px;
     background: var(--terracotta);
     color: white;
     font-size: 11px;
     font-weight: 500;
     padding: 5px 12px;
     border-radius: 50px;
     letter-spacing: 0.04em;
   }
   .product-badge.new { background: var(--gold); }

   .wishlist-btn {
     position: absolute;
     top: 14px;
     right: 14px;
     width: 36px; height: 36px;
     background: white;
     border-radius: 50%;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 12px rgba(0,0,0,0.1);
     transition: transform 0.2s;
   }
   .wishlist-btn:hover { transform: scale(1.1); }
   .wishlist-btn svg { width: 16px; height: 16px; stroke: var(--terracotta); }

   .product-info {
     padding: 18px 20px 20px;
   }
   .product-cat {
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 6px;
   }
   .product-name {
     font-family: 'Cormorant Garamond', serif;
     font-size: 18px;
     font-weight: 500;
     color: var(--brown);
     margin-bottom: 8px;
     line-height: 1.3;
   }
   .product-rating {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-bottom: 12px;
   }
   .stars { color: var(--gold); font-size: 13px; }
   .rating-count { font-size: 12px; color: var(--text-muted); }

   .product-price-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .price-group { display: flex; align-items: baseline; gap: 8px; }
   .price-sale {
     font-size: 18px;
     font-weight: 600;
     color: var(--brown);
   }
   .price-original {
     font-size: 13px;
     color: var(--text-muted);
     text-decoration: line-through;
   }
   .add-btn {
     width: 38px; height: 38px;
     background: var(--terracotta);
     border: none;
     border-radius: 50%;
     color: white;
     font-size: 22px;
     line-height: 1;
     cursor: pointer;
     transition: background 0.2s, transform 0.15s;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .add-btn:hover { background: var(--brown); transform: scale(1.1); }
   .cart-qty-controls {
     display: flex;
     align-items: center;
     gap: 6px;
   }
   .cart-qty-controls button {
     width: 28px; height: 28px;
     border: 1.5px solid var(--border);
     border-radius: 50%;
     background: transparent;
     color: var(--brown);
     font-size: 16px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s;
   }
   .cart-qty-controls button:hover { background: var(--sand); }
   .cart-qty-controls .qty-num {
     font-size: 14px;
     font-weight: 600;
     color: var(--brown);
     min-width: 18px;
     text-align: center;
   }

   /* ── RECENTLY VIEWED / REC GRID ── */
   .rec-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 16px;
   }
   .rec-card {
     background: var(--cream);
     border-radius: 12px;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     transition: transform 0.2s;
   }
   .rec-card:hover { transform: translateY(-4px); }
   .rec-img { aspect-ratio: 1; overflow: hidden; }
   .rec-img img { width: 100%; height: 100%; object-fit: cover; }
   .rec-info { padding: 12px; }
   .rec-name { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--brown); margin-bottom: 4px; }
   .rec-price { font-size: 14px; font-weight: 600; color: var(--brown); }

   @media (max-width: 860px) {
     .rec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
     #recentlyViewedSection { padding: 40px 16px !important; }
   }

   /* ── STORY SECTION ── */
   .story {
     padding: 120px 80px;
     background: var(--warm-white);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 100px;
     align-items: center;
   }

   .story-images {
     position: relative;
     height: 560px;
   }
   .story-img-main {
     width: 72%;
     height: 85%;
     object-fit: cover;
     border-radius: 16px;
     position: absolute;
     top: 0; left: 0;
   }
   .story-img-accent {
     width: 50%;
     height: 55%;
     object-fit: cover;
     border-radius: 16px;
     position: absolute;
     bottom: 0; right: 0;
     border: 6px solid var(--warm-white);
     box-shadow: 0 12px 40px rgba(61,43,31,0.15);
   }
   .story-badge {
     position: absolute;
     top: 50%;
     left: 55%;
     transform: translate(-50%, -50%);
     width: 90px; height: 90px;
     background: var(--terracotta);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: white;
     text-align: center;
     box-shadow: 0 8px 30px rgba(196,113,74,0.4);
   }
   .story-badge .num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 24px;
     font-weight: 600;
     line-height: 1;
   }
   .story-badge .label { font-size: 10px; letter-spacing: 0.06em; opacity: 0.85; }

   .story-content {}
   .story-content .section-header { text-align: left; }

   .story-text {
     font-size: 15px;
     line-height: 1.9;
     color: var(--text-muted);
     margin-bottom: 20px;
   }

   .story-stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin: 40px 0;
     padding: 32px;
     background: var(--cream);
     border-radius: 16px;
   }
   .stat-item { text-align: center; }
   .stat-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 34px;
     font-weight: 600;
     color: var(--terracotta);
     line-height: 1;
     margin-bottom: 4px;
   }
   .stat-label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }

   /* ── TESTIMONIALS ── */
   .testimonials {
     padding: 100px 80px;
     background: var(--testimonial-bg);
     color: white;
   }
   .testimonials .section-title { color: var(--sand); }
   .testimonials .section-eyebrow { color: var(--gold-light); }

   .testi-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 60px;
   }
   .testi-card {
     background: rgba(255,255,255,0.06);
     border: 1px solid rgba(255,255,255,0.1);
     border-radius: 16px;
     padding: 32px;
   }
   .testi-stars { color: var(--gold-light); font-size: 16px; margin-bottom: 16px; }
   .testi-text {
     font-family: 'Cormorant Garamond', serif;
     font-size: 18px;
     line-height: 1.65;
     color: var(--sand);
     font-style: italic;
     margin-bottom: 24px;
   }
   .testi-author {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .testi-avatar {
     width: 42px; height: 42px;
     border-radius: 50%;
     background: var(--terracotta);
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Cormorant Garamond', serif;
     font-size: 18px;
     color: white;
     font-weight: 600;
     flex-shrink: 0;
   }
   .testi-name { font-size: 14px; font-weight: 500; color: var(--cream); }
   .testi-loc { font-size: 12px; color: rgba(255,255,255,0.45); }

   /* ── NEWSLETTER ── */
   .newsletter {
     padding: 100px 80px;
     background: var(--cream);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
   }
   .newsletter-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 48px;
     font-weight: 400;
     color: var(--brown);
     line-height: 1.1;
     margin-bottom: 16px;
   }
   .newsletter-title em { font-style: italic; color: var(--terracotta); }
   .newsletter-sub { font-size: 15px; color: var(--text-muted); line-height: 1.7; }

   .nl-form {
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   .nl-input-row {
     display: flex;
     gap: 12px;
   }
   .nl-input {
     flex: 1;
     padding: 16px 20px;
     border: 1.5px solid var(--border);
     border-radius: 12px;
     background: var(--warm-white);
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     color: var(--dark);
     outline: none;
     transition: border-color 0.2s;
   }
   .nl-input:focus { border-color: var(--terracotta); }
   .nl-input::placeholder { color: var(--text-muted); }
   .nl-btn {
     padding: 16px 32px;
     background: var(--terracotta);
     color: white;
     border: none;
     border-radius: 12px;
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     white-space: nowrap;
     transition: background 0.2s;
   }
   .nl-btn:hover { background: var(--brown); }
   .nl-note { font-size: 12px; color: var(--text-muted); }

   /* ── FOOTER ── */
   footer {
     background: var(--footer-bg);
     color: rgba(255,255,255,0.55);
     padding: 80px 80px 40px;
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 60px;
     padding-bottom: 60px;
     border-bottom: 1px solid rgba(255,255,255,0.08);
   }

   .footer-brand .nav-logo { color: var(--sand); margin-bottom: 18px; display: block; }
   .footer-desc { font-size: 14px; line-height: 1.8; max-width: 280px; margin-bottom: 28px; }
   .footer-socials { display: flex; gap: 12px; }
   .social-btn {
     width: 40px; height: 40px;
     border: 1px solid rgba(255,255,255,0.15);
     border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     transition: border-color 0.2s, background 0.2s;
     cursor: pointer;
   }
   .social-btn:hover { border-color: var(--terracotta); background: var(--terracotta); }
   .social-btn svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.7); }

   .footer-col h4 {
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--sand);
     margin-bottom: 20px;
   }
   .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
   .footer-col a {
     text-decoration: none;
     font-size: 14px;
     color: rgba(255,255,255,0.45);
     transition: color 0.2s;
   }
   .footer-col a:hover { color: var(--terracotta-light); }

   .footer-contact {
     padding: 28px 0;
     border-bottom: 1px solid rgba(255,255,255,0.08);
     display: flex;
     flex-wrap: wrap;
     gap: 20px 40px;
   }
   .contact-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 13px;
     color: rgba(255,255,255,0.55);
   }
   .contact-item svg { flex-shrink: 0; stroke: rgba(255,255,255,0.5); }
   .contact-item a:hover { color: var(--terracotta-light) !important; }

   .footer-bottom {
     padding-top: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 13px;
     flex-wrap: wrap;
     gap: 12px;
   }
   .footer-payments { display: flex; gap: 8px; align-items: center; }
   .pay-badge {
     background: rgba(255,255,255,0.08);
     border-radius: 6px;
     padding: 5px 10px;
     font-size: 11px;
     color: rgba(255,255,255,0.5);
     letter-spacing: 0.04em;
   }

   /* ── PLACEHOLDER IMAGES USING CSS ── */
   .img-placeholder {
     background: var(--sand);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     position: relative;
   }
   /* Lamp image using CSS art */
   .lamp-art {
     position: relative;
     width: 100%;
     height: 100%;
   }

   /* ── RESPONSIVE ── */
   @media (max-width: 1100px) {
     .product-grid { grid-template-columns: repeat(3, 1fr); }
     .footer-grid { grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 860px) {
     /* Navbar */
     nav { padding: 0 16px; height: 56px; gap: 12px; }
     .nav-links { display: none; }
     .nav-logo { font-size: 18px; order: 1; flex: 1; }
     .cart-btn { display: none; }
     .cart-icon-mobile { display: flex !important; }
     .nav-icon { width: 20px; height: 20px; }
     .nav-right { gap: 14px; order: 2; }
     .hamburger { display: flex; order: 0; }

     /* Announcement */
     .announcement { font-size: 11px; padding: 8px 12px; }

     /* Hero */
     .hero { grid-template-columns: 1fr; min-height: auto; }
     .hero-left { padding: 40px 20px 32px; }
     .hero-title { font-size: 36px; margin-bottom: 16px; }
     .hero-eyebrow { font-size: 10px; margin-bottom: 16px; }
     .hero-subtitle { font-size: 14px; margin-bottom: 28px; line-height: 1.6; }
     .hero-ctas { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
     .btn-primary { padding: 14px 28px; font-size: 13px; }
     .btn-outline { padding: 12px 22px; font-size: 13px; }
     .hero-right { display: none; }

     /* Trust Bar */
     .trust-bar { padding: 10px 12px; gap: 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
     .trust-item { flex-shrink: 0; gap: 6px; }
     .trust-icon { width: 22px; height: 22px; }
     .trust-icon svg { width: 11px; height: 11px; }
     .trust-label { font-size: 9px; }
     .trust-sub { display: none; }

     /* Section Headers */
     .section-header { margin-bottom: 32px; }
     .section-eyebrow { font-size: 10px; margin-bottom: 10px; }
     .section-title { font-size: 28px; }
     .section-sub { font-size: 13px; margin-top: 10px; }

     /* Categories */
     .categories { padding: 50px 0; }
     .cat-grid { gap: 0; }
     .cat-info { padding: 14px; }
     .cat-tag { font-size: 7px; letter-spacing: 0.08em; margin-bottom: 2px; }
     .cat-name { font-size: 12px; }
     .cat-count { font-size: 9px; margin-top: 2px; }

     /* Products */
     .products { padding: 40px 16px; }
     .product-tabs { gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
     .tab-btn { padding: 8px 14px; font-size: 11px; }
     .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
     .product-card { border-radius: 10px; }
     .product-img-wrap { aspect-ratio: 1; }
     .product-badge { top: 8px; left: 8px; font-size: 9px; padding: 3px 8px; }
     .wishlist-btn { top: 8px; right: 8px; width: 28px; height: 28px; }
     .wishlist-btn svg { width: 12px; height: 12px; }
     .product-info { padding: 12px 12px 14px; }
     .product-cat { font-size: 9px; margin-bottom: 4px; }
     .product-name { font-size: 14px; margin-bottom: 4px; }
     .product-rating { margin-bottom: 8px; }
     .stars { font-size: 11px; }
     .rating-count { font-size: 10px; }
     .price-sale { font-size: 15px; }
     .price-original { font-size: 11px; }
     .add-btn { width: 30px; height: 30px; font-size: 18px; }

     /* Story */
     .story { grid-template-columns: 1fr; gap: 32px; padding: 40px 16px; }
     .story-images { height: 280px; }
     .story-badge { width: 60px; height: 60px; }
     .story-badge .num { font-size: 18px; }
     .story-badge .label { font-size: 8px; }
     .story-text { font-size: 13px; line-height: 1.7; }
     .story-stats { padding: 20px; gap: 16px; margin: 24px 0; }
     .stat-num { font-size: 26px; }
     .stat-label { font-size: 10px; }

     /* Testimonials */
     .testimonials { padding: 40px 16px; }
     #blogSection { padding: 40px 16px !important; }
     #blogGrid { grid-template-columns: 1fr !important; }
     .testi-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
     .testi-card { padding: 20px; border-radius: 12px; }
     .testi-stars { font-size: 14px; margin-bottom: 12px; }
     .testi-text { font-size: 15px; margin-bottom: 16px; }
     .testi-avatar { width: 36px; height: 36px; font-size: 15px; }
     .testi-name { font-size: 13px; }
     .testi-loc { font-size: 11px; }

     /* Newsletter */
     .newsletter { grid-template-columns: 1fr; gap: 24px; padding: 40px 16px; }
     .newsletter-title { font-size: 32px; }
     .newsletter-sub { font-size: 13px; }
     .nl-input-row { flex-direction: column; gap: 10px; }
     .nl-input { padding: 14px 16px; font-size: 13px; }
     .nl-btn { padding: 14px 24px; font-size: 13px; }

     /* Footer */
     footer { padding: 40px 16px 24px; }
     .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 28px; }
     .footer-desc { font-size: 13px; }
     .footer-col h4 { font-size: 12px; margin-bottom: 14px; }
     .footer-col a { font-size: 13px; }
     .footer-contact { gap: 12px 20px; padding: 20px 0; }
     .contact-item { font-size: 11px; }
     .footer-bottom { padding-top: 20px; font-size: 11px; flex-direction: column; align-items: flex-start; }
     .footer-payments { flex-wrap: wrap; }
     .pay-badge { font-size: 10px; padding: 4px 8px; }
   }

   @media (max-width: 480px) {
     .hero-title { font-size: 30px; }
     .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
     .product-info { padding: 10px; }
     .product-name { font-size: 13px; }
     .price-sale { font-size: 14px; }
     .story-images { height: 220px; }
   }

   /* ── ANIMATIONS ── */
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(30px); }
     to { opacity: 1; transform: translateY(0); }
   }
   @keyframes shimmer {
     0% { background-position: -200% 0; }
     100% { background-position: 200% 0; }
   }
   .loading-skeleton {
     background: linear-gradient(90deg, var(--sand) 25%, var(--cream) 50%, var(--sand) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: 12px;
   }
   .page-loader {
     position: fixed; inset: 0; z-index: 9999;
     background: var(--warm-white);
     display: flex; align-items: center; justify-content: center;
     transition: opacity 0.4s, visibility 0.4s;
   }
   .page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
   .loader-spinner {
     width: 40px; height: 40px;
     border: 3px solid var(--sand);
     border-top-color: var(--terracotta);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   [data-theme="dark"] .page-loader { background: #141812; }
   [data-theme="dark"] .loader-spinner { border-color: #242A1F; border-top-color: #A3B88A; }
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   @keyframes slideLeft {
     from { opacity: 0; transform: translateX(-40px); }
     to { opacity: 1; transform: translateX(0); }
   }
   @keyframes slideRight {
     from { opacity: 0; transform: translateX(40px); }
     to { opacity: 1; transform: translateX(0); }
   }
   @keyframes scaleIn {
     from { opacity: 0; transform: scale(0.9); }
     to { opacity: 1; transform: scale(1); }
   }
   .hero-eyebrow { animation: fadeUp 0.6s ease 0.1s both; }
   .hero-title { animation: fadeUp 0.7s ease 0.25s both; }
   .hero-subtitle { animation: fadeUp 0.7s ease 0.4s both; }
   .hero-ctas { animation: fadeUp 0.7s ease 0.55s both; }

   /* Scroll reveal classes — modern smooth style */
   .reveal { opacity: 0; transform: translateY(60px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
   .reveal.visible { opacity: 1; transform: translateY(0); }
   .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
   .reveal-left.visible { opacity: 1; transform: translateX(0); }
   .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
   .reveal-right.visible { opacity: 1; transform: translateX(0); }
   .reveal-scale { opacity: 0; transform: scale(0.88); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
   .reveal-scale.visible { opacity: 1; transform: scale(1); }

   /* Stagger children with smooth spring easing */
   .stagger-children > * { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
   .stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }
   .stagger-children.visible > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }

   /* Product card hover — lift + glow */
   .product-card {
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .product-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(0,0,0,0.12), 0 10px 20px rgba(0,0,0,0.06);
   }

   /* Smooth parallax for section headers */
   .section-header { transition: transform 0.3s ease-out; }

   /* Button hover micro-interactions */
   .btn-primary, .btn-outline, .cart-btn, .add-btn, .nl-btn {
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
   .btn-primary:active, .cart-btn:active, .add-btn:active, .nl-btn:active {
     transform: scale(0.95);
   }

   /* Testimonial cards — tilt on hover */
   .testi-card {
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
   }
   .testi-card:hover {
     transform: translateY(-6px) rotate(-0.5deg);
     box-shadow: 0 20px 40px rgba(0,0,0,0.15);
   }

   /* Trust bar items — subtle bounce on scroll */
   .trust-item {
     transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .trust-bar.visible .trust-item { transform: translateY(0); }

   /* Smooth nav shadow on scroll */
   nav { transition: box-shadow 0.3s ease, background 0.3s ease; }
   nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.08); }

   /* Image reveal effect */
   .product-img-wrap img, .cat-img {
     transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
   }
   .product-card:hover .product-img-wrap img { transform: scale(1.1); }
   .cat-card:hover .cat-img { transform: scale(1.08); }

   /* Floating buttons pulse */
   @keyframes gentlePulse {
     0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.25); }
     50% { box-shadow: 0 4px 30px rgba(0,0,0,0.35), 0 0 0 6px rgba(37,211,102,0.15); }
   }
   .whatsapp-btn { animation: gentlePulse 3s ease-in-out infinite; }

   /* Smooth text reveal for hero */
   @keyframes smoothReveal {
     from { opacity: 0; transform: translateY(40px) rotateX(10deg); filter: blur(4px); }
     to { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
   }
   .hero-eyebrow { animation: smoothReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
   .hero-title { animation: smoothReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
   .hero-subtitle { animation: smoothReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
   .hero-ctas { animation: smoothReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
   /* ── FLOATING BUTTONS ── */
   .floating-btns {
     position: fixed;
     bottom: 28px;
     right: 28px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     z-index: 200;
     align-items: center;
   }
   .wheel-ring { stroke: rgba(46,59,40,0.25); }
   .wheel-text { fill: rgba(46,59,40,0.6); }
   [data-theme="dark"] .wheel-ring { stroke: rgba(255,255,255,0.15); }
   [data-theme="dark"] .wheel-text { fill: rgba(255,255,255,0.5); }
   .float-btn {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 20px rgba(0,0,0,0.25);
     transition: transform 0.2s, box-shadow 0.2s;
     text-decoration: none;
   }
   .float-btn:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 28px rgba(0,0,0,0.35);
   }
   .whatsapp-btn { background: #25D366; }
   .call-btn { background: var(--terracotta); }

   @media (max-width: 860px) {
     .floating-btns { bottom: 16px; right: 16px; gap: 10px; }
     .float-btn { width: 46px; height: 46px; }
     .float-btn svg { width: 22px; height: 22px; }
     .back-to-top { bottom: 16px; left: 16px; width: 40px; height: 40px; font-size: 16px; }
   }

   /* ── BACK TO TOP ── */
   .back-to-top {
     position: fixed;
     bottom: 28px;
     left: 28px;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: var(--brown);
     color: white;
     border: none;
     font-size: 20px;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s, visibility 0.3s, transform 0.2s;
     z-index: 200;
     box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }
   .back-to-top.visible {
     opacity: 1;
     visibility: visible;
   }
   .back-to-top:hover {
     background: var(--terracotta);
     transform: translateY(-3px);
   }

   @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
   @media (max-width: 600px) {
     #soundPopup { flex-direction: column; gap: 10px; padding: 14px 16px; text-align: center; }
     #soundPopup span { font-size: 13px; }
   }

@keyframes popIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
#announcementText { transition: opacity 0.3s; }

@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (max-width: 600px) { #soundPopup { flex-direction: column; gap: 10px; padding: 14px 16px; text-align: center; } #soundPopup span { font-size: 13px; } }