:root{
  /* Deeper, richer cosmetic luxury pink */
  --gold: #C72E63;
  --gold-light: #E25282;
  --gold-dark: #8E1E45;
  --rose: #C72E63;
  --rose-light: #E25282;
  --ivory: #FDF9F4;
  --card: #FDF9F4; /* Applied --card to --ivory */
  --charcoal: #2B2420;
  --muted: #7A6F63;
  --line: #F0CCD8;
  --font-heading: 'Lora', Georgia, 'Times New Roman', 'Hind Siliguri', serif;
  --font-body: 'Inter', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-bangla: 'Hind Siliguri', -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font-body);background:var(--ivory);color:var(--charcoal);line-height:1.6;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6,.serif{font-family:var(--font-heading);font-weight:700;letter-spacing:0.01em;}
.bn,[lang="bn"],.bangla{font-family:var(--font-bangla);}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.i{font-size:19px;line-height:1;}
.icon-svg{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;}
i.icon-host{display:inline-flex;align-items:center;}
.visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}

.announce{background:#5E0C28;color:#FFE4EC;border-bottom:1px solid rgba(255,255,255,0.08);text-align:center;font-size:12.5px;padding:8px 12px;letter-spacing:0.02em;}

/* Header - Dark Luxury Cosmetics Pink (#8E1E45) */
header{background:#8E1E45;border-bottom:1px solid rgba(255,255,255,0.15);position:sticky;top:0;z-index:80;backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(116,19,52,0.18);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:16px;max-width:1200px;margin:0 auto;}
/* 2x Logo & Company Name beside it */
.logo-mark{display:flex;align-items:center;gap:14px;text-decoration:none;}
.logo-mark img{height:76px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.28));transition:transform .2s ease;}
.logo-mark:hover img{transform:scale(1.03);}
.logo-text{font-family:var(--font-heading);font-size:32px;font-weight:800;letter-spacing:0.04em;line-height:1.05;color:#ffffff;}
.logo-text small{display:block;font-size:12px;letter-spacing:0.22em;color:#FFE4EC;font-family:'Inter',sans-serif;font-weight:600;opacity:0.95;margin-top:3px;}
nav.desktop-nav{display:none;}
.desktop-nav ul{display:flex;gap:26px;list-style:none;}
.desktop-nav a{font-size:13.5px;color:#ffffff;letter-spacing:0.01em;font-weight:500;transition:color .2s ease;}
.desktop-nav a:hover{color:#FFD2E1;}
.header-icons{display:flex;align-items:center;gap:16px;}
.header-icons button,.header-icons a{background:none;border:none;color:#ffffff;cursor:pointer;position:relative;display:flex;transition:color .2s ease;}
.header-icons button:hover,.header-icons a:hover{color:#FFD2E1;}
.cart-count{position:absolute;top:-6px;right:-8px;background:#ffffff;color:#8E1E45;font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;box-shadow:0 2px 6px rgba(0,0,0,0.3);}
.menu-btn{display:flex;font-size:22px;background:none;border:none;color:#ffffff;cursor:pointer;}

.search-row{padding:0 20px 12px;}
.search-box{display:flex;align-items:center;border:1px solid rgba(255,255,255,0.4);border-radius:24px;padding:9px 16px;background:#ffffff;gap:8px;max-width:1160px;margin:0 auto;box-shadow:0 3px 12px rgba(0,0,0,0.12);}
.search-box .i{color:#8E1E45;font-size:16px;}
.search-box input{border:none;outline:none;flex:1;font-size:14px;font-family:'Inter',sans-serif;background:transparent;color:#2B2420;}
.search-box input::placeholder{color:#9A9086;}

/* Mobile menu drawer */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;}
.drawer.open{visibility:visible;}
.drawer-overlay{position:absolute;inset:0;background:rgba(43,36,32,0.4);opacity:0;transition:opacity .25s;}
.drawer.open .drawer-overlay{opacity:1;}
.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:78%;max-width:320px;background:#fff;transform:translateX(-100%);transition:transform .28s ease;padding:22px;overflow-y:auto;}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-panel a{display:block;padding:13px 0;font-size:15px;border-bottom:1px solid var(--line);}
.drawer-close{background:none;border:none;font-size:22px;color:var(--charcoal);margin-bottom:14px;}

/* Buttons */
.btn{display:inline-block;padding:13px 30px;border-radius:2px;font-size:12.5px;letter-spacing:.07em;font-weight:600;cursor:pointer;border:1px solid transparent;}
.btn-light{background:#fff;color:var(--charcoal);}
.btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#fff;border:none;}
.btn-outline{border-color:var(--charcoal);color:var(--charcoal);background:transparent;}

/* Hero slideshow (homepage) - Elegant Boxed Image Carousel */
.hero-container{max-width:1240px;margin:18px auto 28px;padding:0 16px;}
.hero-slider{position:relative;overflow:hidden;height:clamp(240px, 34vw, 420px);border-radius:20px;box-shadow:0 14px 38px rgba(142,30,69,0.07), 0 2px 10px rgba(0,0,0,0.03);border:1px solid rgba(240,204,216,0.7);background:var(--ivory);user-select:none;touch-action:pan-y;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s cubic-bezier(0.4, 0, 0.2, 1);background-size:cover;background-position:center center;background-repeat:no-repeat;cursor:grab;border-radius:20px;}
.slide:active{cursor:grabbing;}
.slide.active{opacity:1;z-index:2;}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);color:var(--gold-dark);border:1px solid rgba(240,204,216,0.9);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:10;transition:all .25s ease;box-shadow:0 6px 20px rgba(0,0,0,0.12);padding:0;}
.slider-arrow:hover{background:#ffffff;transform:translateY(-50%) scale(1.08);color:var(--rose);box-shadow:0 8px 26px rgba(142,30,69,0.22);}
.slider-arrow.slider-prev{left:18px;}
.slider-arrow.slider-next{right:18px;}
.slider-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:10;}
.dot{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.15);cursor:pointer;padding:0;transition:all .25s ease;}
.dot.active{background:var(--gold);width:32px;border-color:#ffffff;box-shadow:0 2px 6px rgba(199,46,99,0.4);}

/* Page hero (inner pages) */
.page-hero{padding:30px 20px;text-align:center;background:var(--card);border-bottom:1px solid var(--line);}
.page-hero h1{font-size:26px;font-weight:500;}
.breadcrumb{font-size:12px;color:var(--muted);margin-top:6px;}
.breadcrumb a{color:var(--gold-dark);}

.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);max-width:1200px;margin:0 auto;}
.trust-item{text-align:center;}
.trust-item .i{font-size:22px;color:var(--gold-dark);margin-bottom:6px;}
.trust-item p{font-size:11.5px;color:var(--muted);}

.section{padding:44px 20px;scroll-margin-top:70px;max-width:1200px;margin:0 auto;}
.section-head{text-align:center;margin-bottom:26px;}
.section-head .tag{color:var(--rose);font-size:11.5px;letter-spacing:.08em;font-weight:500;}
.section-head h2{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:0.01em;}

/* Category Section - Compact berry banner (#8E1E45) allowing bestsellers to peek above the fold */
.category-section{background:linear-gradient(180deg, #8E1E45 0%, #7d173b 100%) !important;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12);padding:20px 16px 18px !important;margin:0 !important;max-width:100% !important;}
.category-section .section-head{margin-bottom:10px !important;}
.category-section .section-head .tag{color:#ffd2e1 !important;font-size:11px !important;letter-spacing:.12em;font-weight:600;}
.category-section .section-head h2{color:#ffffff !important;font-size:21px !important;font-weight:600;margin-top:2px !important;}
.category-inner{max-width:960px;margin:0 auto;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:880px;margin:0 auto;}
.cat-card{position:relative;background:#ffffff;border:1.5px solid rgba(255,255,255,0.4);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;text-align:center;text-decoration:none;transition:all .25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 14px rgba(0,0,0,0.12);cursor:pointer;}
.cat-card:hover{transform:translateY(-4px);border-color:#ffffff;box-shadow:0 8px 22px rgba(0,0,0,0.2);background:#ffffff;}

/* 4 Distinct Shapes */
.cat-card.shape-skin{border-radius:30px 30px 30px 6px;}
.cat-card.shape-makeup{border-radius:12px 30px 12px 30px;}
.cat-card.shape-hair{border-radius:30px 8px 30px 8px;}
.cat-card.shape-body{border-radius:30px 30px 6px 30px;}

.cat-icon-badge{width:36px;height:36px;border-radius:50%;background:#FCECEF;display:flex;align-items:center;justify-content:center;color:#8E1E45;margin-bottom:5px;border:1px solid #F0CCD8;transition:all .25s;}
.cat-card:hover .cat-icon-badge{background:#8E1E45;color:#ffffff;border-color:#8E1E45;}
.cat-card:hover .cat-icon-badge svg{stroke:#ffffff !important;}
.cat-icon-badge svg{width:18px;height:18px;stroke:#8E1E45;transition:stroke .25s;}
.cat-shape-name{font-family:'Playfair Display',Georgia,serif;font-size:14.5px;font-weight:700;color:#8E1E45;margin-bottom:1px;letter-spacing:.2px;display:block;line-height:1.2;}
.cat-shape-sub{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;color:#6E6358;display:block;}

/* Skeleton Shimmer Loaders (Smooth Transition Without Placeholder Flash) */
@keyframes shimmerAnim{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0ece9 25%,#faecee 50%,#f0ece9 75%);background-size:200% 100%;animation:shimmerAnim 1.6s infinite ease-in-out;border-radius:6px;}
.skeleton-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;padding:12px;display:flex;flex-direction:column;gap:10px;}
.skeleton-img{width:100%;aspect-ratio:1/1;border-radius:8px;}
.skeleton-line{height:14px;width:80%;}
.skeleton-line.short{width:45%;height:16px;}

.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.prod-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;}
.prod-img{aspect-ratio:1/1;background:linear-gradient(135deg,#FAE3E9,#F2C4D2);display:flex;align-items:center;justify-content:center;color:var(--gold-dark);font-size:11px;position:relative;}
.badge{position:absolute;top:8px;left:8px;background:var(--rose);color:#fff;font-size:10px;letter-spacing:.03em;padding:3px 8px;border-radius:2px;}
.wish-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--charcoal);border:none;cursor:pointer;}
.prod-info{padding:12px;}
.prod-info .brand{font-size:10.5px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;}
.prod-info .name{font-size:13.5px;font-weight:500;margin:4px 0 6px;line-height:1.3;min-height:35px;}
.rating{font-size:11px;color:var(--gold-dark);margin-bottom:6px;}
.price-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.price{font-weight:600;font-size:15px;color:var(--charcoal);}
.price-old{font-size:11.5px;color:var(--muted);text-decoration:line-through;}
.btn-row{display:flex;gap:6px;}
.btn-add,.btn-buy{flex:1;padding:9px 4px;font-size:11px;letter-spacing:.02em;border-radius:2px;cursor:pointer;font-weight:600;}
.btn-add{border:1px solid var(--charcoal);background:transparent;color:var(--charcoal);}
.btn-buy{border:1px solid var(--gold-dark);background:var(--gold-dark);color:#fff;}
.prod-card a.prod-link{display:block;}

/* Products/listing page */
.listing-layout{display:flex;flex-direction:column;gap:22px;}
.filters{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff;height:fit-content;}
.filters h4{font-size:13.5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.filter-group{margin-bottom:18px;}
.filter-group p.label{font-size:12px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
.filter-chip{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;cursor:pointer;}
.sort-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px;}
.sort-row select{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:12.5px;font-family:'Inter',sans-serif;background:#fff;}

.promo-banner{margin:0 20px 44px;border-radius:12px;padding:34px 22px;text-align:center;background:linear-gradient(135deg,#2B2420,#3d332c);color:var(--ivory);max-width:1160px;margin-left:auto;margin-right:auto;}
.promo-banner .tag{color:var(--gold-light);font-size:11.5px;letter-spacing:.1em;}
.promo-banner h3{font-size:24px;margin:10px 0 8px;font-weight:500;}
.promo-banner p{color:#CFC5B8;font-size:12.5px;margin-bottom:18px;}

/* Certification - 1:1 Logos */
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:960px;margin:0 auto;}
@media (min-width: 768px){.cert-grid{grid-template-columns:repeat(4,1fr);gap:16px;}}
.cert-card{border:1px solid var(--line);border-radius:12px;padding:18px 12px;text-align:center;background:#fff;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 12px rgba(142,30,69,0.04);}
.cert-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 20px rgba(142,30,69,0.12);}
.cert-logo-wrap{width:72px;height:72px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#ffffff;border-radius:12px;padding:6px;margin:0 auto 10px;border:1px solid #F0CCD8;box-shadow:0 2px 8px rgba(0,0,0,0.03);transition:transform .25s ease;}
.cert-card:hover .cert-logo-wrap{transform:scale(1.05);border-color:var(--gold);}
.cert-logo-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
.cert-card h3, .cert-card h4{font-size:14px;font-weight:700;color:var(--charcoal);margin-bottom:4px;line-height:1.25;}
.cert-card p{font-size:11.5px;color:var(--muted);line-height:1.35;margin:0;}

.video-wrap{max-width:720px;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;}
.video-wrap iframe{width:100%;height:100%;border:none;display:block;}

/* Reviews */
.review-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;}
.review-card{min-width:260px;border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff;scroll-snap-align:start;}
.review-card .stars{color:var(--gold-dark);font-size:13px;margin-bottom:8px;}
.review-card p.txt{font-size:13px;color:var(--charcoal);margin-bottom:12px;}
.review-card .who{display:flex;align-items:center;gap:8px;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--gold-dark);}
.who span{font-size:12.5px;font-weight:500;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:16px;}
.contact-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:10px;padding:16px;background:#fff;transition:transform .2s ease, box-shadow .2s ease;}
.contact-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.contact-card .i{font-size:20px;color:var(--gold-dark);width:40px;height:40px;background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-card h3, .contact-card h4{font-size:13.5px;margin-bottom:2px;}
.contact-card p{font-size:12.5px;color:var(--muted);word-break:break-all;}

.newsletter{background:var(--card);padding:40px 20px;text-align:center;}
.newsletter h3{font-size:22px;margin-bottom:8px;font-weight:500;}
.newsletter p{color:var(--muted);font-size:12.5px;margin-bottom:18px;}
.nl-form{display:flex;max-width:380px;margin:0 auto;gap:8px;}
.nl-form input{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-size:13px;font-family:'Inter',sans-serif;}

/* Complete Black Footer */
footer{background:#000000 !important;color:#D8CFC3;padding:48px 20px 100px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:1200px;margin:0 auto;}
footer h3, footer h4{color:#ffffff;font-size:13.5px;margin-bottom:12px;font-weight:600;letter-spacing:.02em;}
footer ul{list-style:none;}
footer li{margin-bottom:8px;font-size:12.5px;}
footer a{color:#C5BCB1;transition:color .2s ease;}
footer a:hover{color:var(--gold-light);}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.footer-logo img{height:54px;width:auto;filter:drop-shadow(0 2px 5px rgba(255,255,255,0.15));}
.social-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.social-row a{width:36px;height:36px;border-radius:50%;border:1px solid #2B2B2B;background:#141414;color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden;white-space:nowrap;transition:all .2s ease;}
.social-row a:hover{background:#262626;border-color:var(--gold-light);color:var(--gold-light);transform:translateY(-2px);}
.footer-bottom{text-align:center;font-size:11.5px;color:#888888;margin-top:32px;padding-top:20px;border-top:1px solid #1E1E1E;max-width:1200px;margin-left:auto;margin-right:auto;line-height:1.7;}

/* Floating stack */
.float-stack{position:fixed;right:16px;bottom:76px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.float-btn{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);border:none;cursor:pointer;}
.float-btn.wa{background:#25D366;}
.float-btn.top{background:var(--charcoal);width:42px;height:42px;font-size:16px;}

/* Sign in modal */
.modal-overlay{position:fixed;inset:0;background:rgba(43,36,32,.45);display:none;align-items:center;justify-content:center;z-index:120;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:14px;padding:28px 24px;max-width:380px;width:100%;position:relative;}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;}
.modal-box h3{font-size:22px;margin-bottom:6px;}
.modal-box .sub{font-size:12.5px;color:var(--muted);margin-bottom:20px;}
.tab-switch{display:flex;border:1px solid var(--line);border-radius:24px;padding:3px;margin-bottom:18px;}
.tab-switch button{flex:1;border:none;background:transparent;padding:8px;font-size:12.5px;border-radius:20px;cursor:pointer;font-weight:500;color:var(--muted);}
.tab-switch button.active{background:var(--charcoal);color:#fff;}
.field-group{margin-bottom:14px;}
.field-group label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
.field-group input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;font-family:'Inter',sans-serif;}
.modal-box .btn-primary{width:100%;text-align:center;padding:12px;margin-top:4px;}
.modal-foot{text-align:center;font-size:12px;color:var(--muted);margin-top:16px;}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:9px 0 7px;z-index:60;}
.bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--muted);gap:3px;background:none;border:none;font-family:'Inter',sans-serif;}
.bottom-nav a.active{color:var(--gold-dark);}
.bottom-nav .i{font-size:19px;}

/* Product detail page */
.pd-layout{display:flex;flex-direction:column;gap:26px;}
.pd-gallery-main{position:relative;aspect-ratio:1/1;border-radius:12px;background:#ffffff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold-dark);font-size:13px;overflow:hidden;}
.pd-gallery-main img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.pd-gallery-main iframe{width:100%;height:100%;border:none;border-radius:12px;}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;}
.pd-thumb{width:68px;height:68px;border-radius:8px;background:var(--ivory);border:2px solid transparent;flex-shrink:0;cursor:pointer;position:relative;overflow:hidden;transition:all .2s ease;display:flex;align-items:center;justify-content:center;}
.pd-thumb.active{border-color:var(--rose);}
.pd-thumb img{width:100%;height:100%;object-fit:cover;}
.pd-thumb.video-thumb{background:#1E171B;color:#fff;}
.pd-thumb.video-thumb .vid-icon-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9.5px;font-weight:700;color:#fff;letter-spacing:0.5px;}
.pd-thumb.video-thumb .vid-icon-overlay svg{width:20px;height:20px;fill:#fff;}
.pd-info .brand{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.pd-info h1{font-size:24px;margin:6px 0 8px;}
.pd-rating{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gold-dark);margin-bottom:14px;}
.pd-rating span.count{color:var(--muted);}
.pd-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.pd-price{font-size:26px;font-weight:600;}
.pd-price-old{font-size:15px;color:var(--muted);text-decoration:line-through;}
.pd-save{font-size:12px;background:var(--rose);color:#fff;padding:3px 8px;border-radius:2px;}
.option-group{margin-bottom:18px;}
.option-group p.label{font-size:12.5px;font-weight:600;margin-bottom:8px;}
.shade-row{display:flex;gap:10px;}
.shade-dot{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.shade-dot.active{border-color:var(--gold-dark);}
.size-row{display:flex;gap:8px;}
.size-chip{border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;background:#fff;}
.size-chip.active{border-color:var(--charcoal);background:var(--charcoal);color:#fff;}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;}
.qty-box button{width:36px;height:36px;background:none;border:none;font-size:16px;cursor:pointer;}
.qty-box span{width:30px;text-align:center;font-size:14px;}
.pd-actions{display:flex;gap:10px;margin-bottom:20px;}
.pd-actions .btn-add,.pd-actions .btn-buy{padding:14px 0;font-size:13px;}
.pd-trust{display:flex;flex-direction:column;gap:10px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;}
.pd-trust div{display:flex;align-items:center;gap:8px;}
.pd-trust .i{color:var(--gold-dark);}

.tabs{border-bottom:1px solid var(--line);display:flex;gap:26px;margin-bottom:22px;overflow-x:auto;}
.tab-btn{background:none;border:none;padding:12px 0;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.tab-btn.active{color:var(--charcoal);border-color:var(--gold-dark);font-weight:600;}
.tab-panel{display:none;font-size:13.5px;color:var(--charcoal);line-height:1.8;}
.tab-panel.active{display:block;}
.ingredient-list{columns:1;font-size:13px;color:var(--muted);}

/* Cart page */
.cart-item{display:flex;gap:14px;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:#fff;}
.cart-item .thumb{width:72px;height:72px;border-radius:8px;background:linear-gradient(135deg,#FAE3E9,#F2C4D2);flex-shrink:0;}
.cart-item-info{flex:1;}
.cart-item-info .name{font-size:13.5px;font-weight:500;margin-bottom:4px;}
.cart-item-info .variant{font-size:11.5px;color:var(--muted);margin-bottom:8px;}
.cart-item-info .row{display:flex;justify-content:space-between;align-items:center;}
.remove-link{font-size:12px;color:var(--rose);background:none;border:none;cursor:pointer;}
.summary-box{border:1px solid var(--line);border-radius:10px;padding:20px;background:#fff;}
.summary-row{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:10px;color:var(--muted);}
.summary-row.total{color:var(--charcoal);font-weight:600;font-size:15px;border-top:1px solid var(--line);padding-top:12px;margin-top:6px;}
.promo-input{display:flex;gap:8px;margin-bottom:16px;}
.promo-input input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:13px;}
.pay-method{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;cursor:pointer;}
.pay-method.active{border-color:var(--gold-dark);background:#FCECEF;}
.pay-method .i{font-size:20px;color:var(--gold-dark);}
.pay-method .radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);margin-left:auto;flex-shrink:0;}
.pay-method.active .radio{border-color:var(--gold-dark);background:var(--gold-dark);}
.empty-cart{text-align:center;padding:60px 20px;}
.empty-cart .i{font-size:48px;color:var(--line);margin-bottom:16px;}

/* Checkout form */
.checkout-form{border:1px solid var(--line);border-radius:10px;padding:20px;background:#fff;margin-bottom:20px;}
.checkout-form h3{font-size:16px;margin-bottom:16px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
.form-row input,.form-row textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;font-family:'Inter',sans-serif;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;margin:16px 0;}
.account-note{font-size:12px;color:var(--muted);background:var(--card);padding:10px 12px;border-radius:6px;margin-top:10px;}

@media(min-width:900px){
  .menu-btn{display:none;}
  nav.desktop-nav{display:block;}
  .bottom-nav{display:none;}
  .float-stack{bottom:26px;}
  footer{padding-bottom:40px;}
  .hero-slider{height:400px;border-radius:20px;}
  .slide{padding:36px 30px;border-radius:20px;}
  .slide .eyebrow{font-size:12px;margin-bottom:10px;}
  .slide h2{font-size:38px;}
  .slide p{font-size:15px;max-width:480px;}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .prod-grid{grid-template-columns:repeat(4,1fr);}
  .trust{grid-template-columns:repeat(4,1fr);}
  .cert-grid{grid-template-columns:repeat(4,1fr);}
  .contact-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}
  .section-head h2{font-size:33px;}
  .listing-layout{flex-direction:row;align-items:flex-start;}
  .filters{width:240px;flex-shrink:0;position:sticky;top:100px;}
  .listing-main{flex:1;}
  .prod-grid.listing{grid-template-columns:repeat(3,1fr);}
  .pd-layout{flex-direction:row;gap:44px;}
  .pd-gallery{width:44%;}
  .pd-info{flex:1;}
  .cart-layout{display:flex;gap:30px;align-items:flex-start;}
  .cart-items{flex:1;}
  .summary-box{width:340px;flex-shrink:0;position:sticky;top:100px;}
}

@media(max-width:480px){
  .hero-container{padding:0 10px;margin:12px auto 18px;}
  .hero-slider{height:220px;border-radius:14px;}
  .slide{border-radius:14px;}
  .logo-mark img{height:52px;}
  .logo-text{font-size:22px;}
  .logo-text small{font-size:9px;letter-spacing:0.16em;}
  .slider-arrow{width:34px;height:34px;font-size:15px;}
  .slider-arrow.slider-prev{left:8px;}
  .slider-arrow.slider-next{right:8px;}
}

/* ---------- Subtle motion (lightweight, GPU-friendly only) ---------- */
a, button, .btn, .prod-card, .cat-card, .cert-card, .contact-card, .pay-method,
.wish-btn, .size-chip, .shade-dot, .float-btn, .icon-svg, input, textarea, select {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, color .18s ease;
}
.prod-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43,36,32,0.08); }
.cat-card:hover{ transform: translateY(-2px) scale(1.03); }
.cert-card:hover, .contact-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43,36,32,0.06); }
.btn:hover, .btn-add:hover, .btn-buy:hover, .btn-outline:hover{ transform: translateY(-1px); }
.btn:active, .btn-add:active, .btn-buy:active{ transform: translateY(0) scale(0.98); }
.wish-btn:hover{ transform: scale(1.12); }
.wish-btn:active{ transform: scale(0.92); }
.float-btn:hover{ transform: translateY(-2px) scale(1.05); }
.size-chip:hover{ border-color: var(--gold-dark); }
.shade-dot:hover{ transform: scale(1.1); }
input:focus, textarea:focus, select:focus{ outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(212,106,135,0.12); }

/* Fade-up reveal for sections as they scroll into view */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* Modal/drawer animation smoothed */
.modal-box{ animation: modalPop .22s ease; }
@keyframes modalPop{ from{ opacity:0; transform: scale(.97);} to{ opacity:1; transform: scale(1);} }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* iOS Safari zooms the whole page in when a focused input's font-size is under 16px,
   which looks like an unwanted horizontal shift/scroll on tap. Forcing 16px here fixes it
   on iPhone without changing how anything looks on Android (which never had this issue). */
input, textarea, select {
  font-size: 16px !important;
}

/* Typographic balance: Headings bold, body text normal readability */
/* Responsive Category Grid */
@media (max-width: 768px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    max-width: 440px !important;
  }
  .cat-card {
    padding: 12px 8px !important;
  }
  .cat-shape-name {
    font-size: 14px !important;
  }
}

/* Top Announcement Ticker - Very Light Pink */
.top-announcement {
  background: #FDF0F4 !important;
  color: #8E1E45 !important;
  border-bottom: 1px solid #F6DDE4;
  padding: 8px 16px;
  font-size: 12.5px;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.3px;
}
.top-announcement.hidden { display: none !important; }
.top-announcement a { color: #8E1E45; text-decoration: underline; }

/* Factory Production Gallery */
.factory-section {
  padding: 44px 20px;
  background: var(--ivory);
  max-width: 1200px;
  margin: 0 auto;
}
.factory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.factory-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.factory-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.factory-img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: #201a1d;
}
.factory-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.factory-card:hover .factory-img-wrap img {
  transform: scale(1.05);
}
.factory-info {
  padding: 14px 16px;
}
.factory-info h3, .factory-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
  line-height: 1.3;
}
.factory-info p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Customer Account Portal */
.account-modal-box {
  max-width: 520px !important;
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px !important;
}
.account-user-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.account-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.account-user-info h3 {
  font-size: 18px;
  margin: 0 0 2px 0;
  color: var(--charcoal);
}
.account-user-info p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}
.account-nav-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
}
.account-nav-tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.account-nav-tabs button.active {
  color: var(--gold-dark);
  border-bottom-color: var(--gold-dark);
}
.account-order-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.account-order-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.account-order-code {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--gold-dark);
}
.account-order-date {
  font-size: 11.5px;
  color: var(--muted);
}
.account-order-items {
  font-size: 12.5px;
  color: var(--charcoal);
  margin-bottom: 8px;
  line-height: 1.4;
}
.account-order-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  font-size: 12.5px;
}
.account-order-total {
  font-weight: 700;
  color: var(--charcoal);
}
.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.status-badge.pending { background: #FCECEF; color: #8E1E45; }
.status-badge.confirmed { background: #CCE5FF; color: #004085; }
.status-badge.shipped { background: #E2E3E5; color: #383D41; }
.status-badge.delivered { background: #D4EDDA; color: #155724; }
.status-badge.cancelled { background: #F8D7DA; color: #721C24; }
.logged-in-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E9E5B;
  border: 1.5px solid #fff;
}

/* Wishlist System */
.wish-btn.active, .wish-btn.in-wishlist {
  background: #FFF0F5 !important;
  color: #D46A87 !important;
}
.wish-btn.active svg, .wish-btn.in-wishlist svg {
  fill: #D46A87 !important;
  stroke: #D46A87 !important;
}
.wishlist-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gold-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* About Section Styles */
.about-section {
  background: #FAF7F5;
  padding: 64px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-container {
  max-width: 1140px;
  margin: 0 auto;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 36px;
}
.about-lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--charcoal);
  margin-bottom: 14px;
}
.about-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #63584E;
  margin-bottom: 18px;
}
.about-quote {
  border-left: 3px solid var(--rose);
  padding: 14px 20px;
  margin: 22px 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--wine);
  background: #FFF5F7;
  border-radius: 0 10px 10px 0;
}
.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-pillar-card {
  background: #ffffff;
  border: 1px solid #EFEAE4;
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.about-pillar-card .pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #FCECEF;
  color: var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.about-pillar-card .pillar-icon svg {
  width: 22px;
  height: 22px;
}
.about-pillar-card h3, .about-pillar-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 6px 0;
  line-height: 1.35;
}
.about-pillar-card p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
@media (max-width: 520px) {
  .about-pillars {
    grid-template-columns: 1fr;
  }
}