/** Shopify CDN: Minification failed Line 156:40 The "+" operator only works if there is whitespace on both sides Line 1435:57 The "+" operator only works if there is whitespace on both sides **/ /* ===== Vastrangam global styles — transplanted verbatim from mockup 01-HOMEPAGE.html ===== */ :root{ --lav:#7B5EA7;--deep:#4A2D82;--gold:#C4963A;--glight:#E8C47A; --dark:#12091C;--cream:#FAF7F2;--warm:#F5EFE6;--white:#fff; --border:rgba(123,94,167,0.13);--text:#1A1025;--muted:#6B5C7E;--lt:#9B8FAA; } /* ══ FONT COLOR RULES ══ White bg → black text Purple bg → white text Applied globally via bg class helpers */ .bg-white,.bg-cream,.bg-warm{color:var(--text)!important;} .bg-white *,.bg-cream *,.bg-warm *{color:var(--text);} .bg-purple,.bg-deep,.bg-dark-sec{color:#fff!important;} .bg-purple *,.bg-deep *,.bg-dark-sec *{color:#fff;} /* Section-level automatic rules */ .sec:not(.sec-alt):not(.revs):not(.story) .stitle, .sec:not(.sec-alt):not(.revs):not(.story) .eyebrow, .sec:not(.sec-alt):not(.revs):not(.story) .ssub, .sec:not(.sec-alt):not(.revs):not(.story) .sall, .sec:not(.sec-alt):not(.revs):not(.story) .pname, .sec:not(.sec-alt):not(.revs):not(.story) .pbrand, .sec:not(.sec-alt):not(.revs):not(.story) .pcurr, .sec:not(.sec-alt):not(.revs):not(.story) .pold, .sec:not(.sec-alt):not(.revs):not(.story) .scnt{color:var(--text);} /* sec-alt (warm bg) — same rule, black text */ .sec-alt .stitle,.sec-alt .eyebrow,.sec-alt .ssub,.sec-alt .sall, .sec-alt .pname,.sec-alt .pbrand,.sec-alt .pcurr,.sec-alt .scnt{color:var(--text);} /* Purple/dark sections — white text */ .revs .stitle,.revs .eyebrow,.revs .ssub, .story .stit,.story .seyebrow,.story .sbody, .story .ssn,.story .ssl{color:var(--white)!important;} /* Ticker (dark bg) */ .ticker *{color:rgba(255,255,255,.85)!important;} /* Trust bar (warm bg) */ .ttxt strong{color:var(--text)!important;} .ttxt span{color:var(--muted)!important;} /* Header (white bg) */ .nlink,.logo,.hico{color:var(--text)!important;} .nlink.act{color:var(--lav)!important;} /* Newsletter (warm bg) */ .nwsl-t,.nwsl-s{color:var(--text)!important;} /* Footer (dark bg) */ footer,.ft,.fbl,.fct,.flink,.fbl-t{color:rgba(255,255,255,.75);} .flogo, *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;} body{font-family:'Poppins',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden;} a{text-decoration:none;color:inherit;} /* ── TICKER ── */ .ticker{background:#000;height:34px;overflow:hidden;display:flex;align-items:center;} .ticker-track{display:flex;white-space:nowrap;animation:tick 28s linear infinite;} .ticker-track:hover{animation-play-state:paused;} .t-item{font-size:12px;letter-spacing:1.5px;font-family:'Poppins',sans-serif;text-transform:uppercase;color:rgba(255,255,255,.9);padding:0 36px;display:flex;align-items:center;gap:8px;} .t-dot{color:rgba(255,255,255,.4);font-size:7.64px;} @keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ── HEADER SHARED ── */ .header{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);position:sticky;top:0;z-index:900;border-bottom:1px solid var(--border);} /* language switcher removed site-wide (translation disabled per brand) */ .lang-wrap,#mob-lang-wrap,.mob-lang-btn,.mob-lang-drop{display:none!important;} /* keep Shopify section wrapper from clipping the sticky header */ .shopify-section-group-header-group{overflow:visible;} /* marquees must keep auto-scrolling on touch devices — a tap makes :hover stick and freezes them */ @media(hover:none){ .vgcat .vgcat-track, .vgp .pg-track, .vgrvw .rvw-slider, .insta-slider-track{ animation-play-state:running !important; } } /* Avone's built-in newsletter popup duplicates our own AND locks page scroll (breaks the sticky header) — neutralise it */ .tingle-modal.nwPopup{ display:none !important; } /* sticky header fix: Avone sets body{overflow-x:hidden} which forces overflow-y:auto, making a scroll container — position:sticky then can't pin. Clip horizontally on instead so stays the scroller. */ html{ overflow-x:hidden; } body{ overflow-x:visible !important; overflow-y:visible !important; } /* ── DESKTOP HEADER (single row) ── */ .hdr-desk{max-width:1300px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:64px;} .logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;} .logo-png{height:38px;width:auto;max-width:150px;object-fit:contain;display:block;} .logo-txt{font-family:'Playfair Display',serif;font-size:24px;font-weight:600;color:var(--dark);letter-spacing:1px;line-height:1.1;} .logo-txt b{color:var(--lav);} .logo-txt small{display:block;font-size:8.73px;font-weight:300;letter-spacing:4px;text-transform:uppercase;color:var(--lt);margin-top:2px;} .nav{display:flex;gap:0;} .nitem{position:relative;} .nlink{font-size:12.55px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--text)!important;padding:22px 13px;display:flex;align-items:center;gap:4px;transition:color .2s;cursor:pointer;border-bottom:2px solid transparent;} .nlink:hover,.nlink.act{color:var(--lav)!important;border-bottom-color:var(--lav);} .arr{font-size:7.64px;transition:transform .2s;display:inline-block;} .nitem:hover .arr{transform:rotate(180deg);} .mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:white;border-bottom:2px solid var(--lav);box-shadow:0 16px 48px rgba(0,0,0,.11);min-width:560px;padding:24px 28px;display:none;gap:20px;border-radius:0 0 10px 10px;z-index:999;} .nitem:hover .mega{display:flex;} .mcol{flex:1;} .mctitle{font-size:9.82px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--lav);margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border);} .mlinks{display:flex;flex-direction:column;gap:1px;} .mlink{font-size:13.64px;color:var(--text)!important;padding:5px 0;transition:all .2s;font-weight:300;cursor:pointer;} .mlink:hover{color:var(--lav)!important;padding-left:5px;} .mimg{width:140px;flex-shrink:0;border-radius:7px;overflow:hidden;aspect-ratio:3/4;position:relative;} .mimg-in{width:100%;height:100%;display:flex;align-items:flex-end;padding:14px;} .hicons-desk{display:flex;align-items:center;gap:2px;} .hico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;transition:background .2s;font-size:16.36px;position:relative;color:var(--text)!important;} .hico:hover{background:var(--warm);} .cbadge{position:absolute;top:4px;right:4px;width:15px;height:15px;background:var(--lav);color:white!important;border-radius:50%;font-size:8.73px;font-weight:700;display:flex;align-items:center;justify-content:center;} /* ── MOBILE HEADER (2 rows) ── */ /* ── MOBILE HEADER (2-line, ≤900px) ── */ .mob-hdr { display:none; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:900; } @media(max-width:900px){ .mob-hdr { display:block; } .hdrp,.hdrp-subbar { display:none; } } @media(min-width:901px){ .mob-hdr { display:none !important; } } /* Line 1: Logo + Search */ .mob-hdr-l1 { display:flex; align-items:center; justify-content:space-between; padding:0 16px; height:50px; } .mob-hdr-logo img { height:30px; width:auto; } .mob-hdr-search { background:none; border:none; cursor:pointer; color:var(--dark); padding:6px; display:flex; align-items:center; } /* Line 2: Categories + Icons */ .mob-hdr-l2 { display:flex; align-items:center; justify-content:space-between; padding:0 14px; height:40px; border-top:1px solid var(--border); } .mob-menu-btn { display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-size:13.09px; font-weight:600; letter-spacing:.8px; color:var(--dark); text-transform:uppercase; } .mob-hdr-icons { display:flex; align-items:center; gap:2px; } .mob-hdr-ico { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--dark); text-decoration:none; border-radius:50%; transition:background .2s; position:relative; } .mob-hdr-ico:hover { background:rgba(123,94,167,.08); } .mob-cbadge { position:absolute; top:2px; right:2px; width:15px; height:15px; border-radius:50%; background:var(--lav); color:#fff; font-size:8.73px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; } .mob-lang-btn { font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.8px; color:var(--dark); background:none; border:1px solid rgba(0,0,0,.12); border-radius:3px; padding:3px 6px; cursor:pointer; } /* Mobile search overlay */ .mob-search-bar { display:none; padding:10px 14px; background:#fff; border-bottom:1px solid var(--border); } .mob-search-bar.open { display:flex; align-items:center; gap:8px; } .mob-search-input { flex:1; border:none; outline:none; font-size:15.27px; font-family:'Poppins',sans-serif; background:transparent; } .mob-search-close { background:none; border:none; font-size:16.36px; cursor:pointer; color:var(--muted); } /* ── DRAWER: 2-panel slide ── */ /* Row 1: Logo + Search */ .hdr-row1{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(123,94,167,.07);} .mob-logo-wrap{display:flex;align-items:center;flex-shrink:0;text-decoration:none;} .mob-logo-wrap .logo-png{height:32px;max-width:120px;} .mob-logo-wrap .logo-txt{font-size:19.64px;} .mob-logo-wrap .logo-txt small{font-size:7.64px;letter-spacing:3px;} .mob-searchbar{flex:1;display:flex;align-items:center;background:var(--warm);border-radius:8px;border:1px solid var(--border);overflow:hidden;height:36px;} .mob-searchbar input{flex:1;border:none;outline:none;background:transparent;padding:0 11px;font-family:'Poppins',sans-serif;font-size:13.64px;color:var(--text)!important;} .mob-searchbar input::placeholder{color:var(--lt);} .mob-search-btn{width:36px;height:36px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:15.27px;} /* Row 2: Burger (left) + Icons (right) */ .hdr-row2{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;height:42px;} .mob-burger{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.55px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text)!important;background:none;border:1px solid var(--border);border-radius:7px;font-family:'Poppins',sans-serif;padding:5px 10px;} .mob-burger-lines{display:flex;flex-direction:column;gap:4px;} .mob-burger-lines span{width:16px;height:1.5px;background:var(--dark);display:block;transition:all .3s;} .mob-icons-right{display:flex;align-items:center;gap:1px;} .mico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;transition:background .2s;position:relative;font-size:16.36px;color:var(--text)!important;} .mico:hover{background:var(--warm);} .mico .cbadge{top:3px;right:3px;width:14px;height:14px;font-size:7.64px;} /* Language selector */ .mob-lang{display:flex;align-items:center;gap:3px;padding:4px 7px;border-radius:7px;cursor:pointer;transition:background .2s;font-size:12px;font-weight:600;color:var(--text)!important;border:1px solid var(--border);background:var(--white);height:28px;margin-left:2px;position:relative;} .mob-lang:hover{background:var(--warm);} .lang-dd{position:absolute;top:calc(100%+6px);right:0;background:white;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);min-width:88px;display:none;z-index:999;overflow:hidden;} .mob-lang.open .lang-dd{display:block;} .lang-opt{padding:10px 13px;font-size:13.09px;font-weight:500;color:var(--text)!important;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;} .lang-opt:hover{background:var(--warm);} .lang-opt.sel{color:var(--lav)!important;font-weight:600;} /* ── MOBILE MENU DRAWER (left slide) ── */ .mob-ov{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:980;opacity:0;pointer-events:none;transition:opacity .3s;} .mob-ov.show{opacity:1;pointer-events:all;} .mob-drw{position:fixed;top:0;left:0;width:82vw;max-width:320px;height:100vh;background:#fff;z-index:990;transform:translateX(-100%);transition:transform .3s cubic-bezier(.77,0,.175,1);display:flex;flex-direction:column;overflow:hidden;box-shadow:4px 0 32px rgba(0,0,0,.14);} .mob-drw.open{transform:translateX(0);} /* Drawer header */ .mdrw-hd{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:54px;border-bottom:1px solid var(--border);flex-shrink:0;} .mdrw-hd img{height:28px;width:auto;} .mdrw-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:21.82px;line-height:1;padding:4px;} .mdrw-close:hover{color:var(--dark);} /* Drawer body */ .mdrw-body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;} /* Nav level 1 */ .mdrw-nav{padding:8px 0;} .mdrw-item{border-bottom:1px solid rgba(0,0,0,.04);} .mdrw-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:none;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-size:15.27px;font-weight:500;color:var(--dark);text-align:left;transition:background .15s;} .mdrw-btn:hover{background:rgba(123,94,167,.04);color:var(--lav);} .mdrw-btn span{display:flex;align-items:center;gap:6px;} a.mdrw-btn{text-decoration:none;display:flex;} .mdrw-luxe{color:var(--gold) !important;font-weight:600;} .mdrw-sale{color:#dc2626 !important;font-weight:700;} .mdrw-wedding{font-family:'Playfair Display',serif;font-size:16.36px;font-style:italic;} .mdrw-chevron{color:var(--lt);flex-shrink:0;} /* Divider & small links */ .mdrw-sep{height:1px;background:var(--border);margin:8px 16px;} .mdrw-sm-links{padding:8px 0 16px;} a.mdrw-sm-link{display:block;padding:9px 18px;font-family:'Poppins',sans-serif;font-size:13.09px;color:var(--muted);text-decoration:none;transition:color .15s;} a.mdrw-sm-link:hover{color:var(--dark);} /* Sub-panel (slides in over level 1) */ .mdrw-sub{position:absolute;top:0;left:100%;width:100%;height:100%;background:#fff;transition:left .25s ease;overflow-y:auto;} .mdrw-sub.open{left:0;} .mdrw-sub-hd{display:flex;align-items:center;gap:10px;padding:0 16px;height:50px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:1;} .mdrw-sub-back{background:none;border:none;cursor:pointer;color:var(--lav);font-family:'Poppins',sans-serif;font-size:13.09px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:4px;padding:0;} .mdrw-sub-title{font-family:'Playfair Display',serif;font-size:17.45px;font-weight:600;color:var(--dark);} .mdrw-sub-body{padding:8px 0 24px;} .mdrw-sub-sec{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);padding:14px 18px 6px;display:block;} a.mdrw-sub-link{display:block;padding:10px 18px;font-family:'Poppins',sans-serif;font-size:15.27px;font-weight:400;color:var(--dark);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.04);transition:color .15s,padding-left .15s;} a.mdrw-sub-link:hover{color:var(--lav);padding-left:22px;} /* ── Mobile MEGA MENU (rich tiles cloned from desktop) ── */ .mmega{padding:4px 0 8px;} .mmega-acc{border-bottom:1px solid rgba(0,0,0,.06);} .mmega-acc-hd{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;padding:14px 16px;font-family:'Poppins',sans-serif;font-size:14.18px;font-weight:700;letter-spacing:.5px;color:var(--dark);text-transform:uppercase;} .mmega-acc-hd .mmega-chev{transition:transform .25s;color:var(--lav);} .mmega-acc.open .mmega-chev{transform:rotate(90deg);} .mmega-acc-bd{display:none;} .mmega-acc.open .mmega-acc-bd{display:block;} .mdrw-sub-body .hoi-sec-hd{font-family:'Poppins',sans-serif;font-size:10.91px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:none;border-radius:0;display:block;margin:6px 0 2px;padding:8px 16px 2px;} .mdrw-sub-body .hoi-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 6px;padding:8px 14px 14px;margin:0;} .mdrw-sub-body a.hoi-tile{width:auto;gap:6px;} .mdrw-sub-body .hoi-circle{width:54px;height:54px;font-size:24px;margin-bottom:0;border:1px solid rgba(0,0,0,.06);} .mdrw-sub-body .hoi-lbl{font-size:11.45px;max-width:none;line-height:1.25;} .mob-drw.open{transform:translateX(0);} .mdh{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--deep),var(--lav));} .mdh-logo{font-family:'Playfair Display',serif;font-size:20.73px;font-weight:600;color:white;} .mdh-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;font-size:18.55px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);border:none;transition:background .2s;} .mdh-close:hover{background:rgba(255,255,255,.2);} .mdb{flex:1;overflow-y:auto;} .md-sec-lbl{padding:12px 16px 4px;font-size:9.82px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--lt);} .md-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14.73px;font-weight:500;color:var(--text)!important;border-bottom:1px solid rgba(123,94,167,.06);cursor:pointer;transition:all .2s;text-decoration:none;} .md-item:hover{background:var(--warm);color:var(--lav)!important;padding-left:20px;} .md-item .md-cnt{font-size:10.91px;color:var(--lt);font-weight:300;} .md-item.sale{color:#dc2626!important;} .md-item.newlbl{color:var(--lav)!important;} .md-divider{height:7px;background:var(--warm);} .mdf{padding:14px 16px;border-top:1px solid var(--border);background:var(--warm);} .mdf-row{display:flex;align-items:center;gap:8px;font-size:12.55px;color:var(--muted);margin-bottom:7px;} /* ── SHOW/HIDE ── */ @media(min-width:901px){.mob-hdr,.mob-drw,.mob-ov{display:none!important;}} /* mobile media query handled above */ /* ── HERO ── */ .hero{position:relative;height:90vh;max-height:680px;overflow:hidden;background:var(--dark);touch-action:pan-y;} .hslides{display:flex;width:100%;height:100%;transition:transform .7s cubic-bezier(.77,0,.175,1);} .hslide{width:100%;height:100%;flex-shrink:0;position:relative;} .hs1{background:linear-gradient(140deg,#1a0533,#2D1B5E 50%,#7B5EA7);} .hs2{background:linear-gradient(140deg,#0d1117,#1a2744 50%,#2d4a7a);} .hs3{background:linear-gradient(160deg,#1a0a0a,#4a1515 50%,#8B2635);} .hpat{position:absolute;inset:0;opacity:.06;} .hcon{position:absolute;inset:0;display:flex;align-items:center;padding:50px 7% 80px;} .htxt{color:white;max-width:460px;} .htag{display:inline-block;border:1px solid rgba(74,45,130,.4);color:var(--lav);font-size:12px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;padding:5px 13px;border-radius:20px;margin-bottom:18px;background:rgba(123,94,167,.1);} .htitle{font-family:'Playfair Display',serif;font-size:clamp(37.09px,7.64vw,72px);font-weight:600;line-height:1.05;margin-bottom:14px;letter-spacing:-.5px;color:var(--dark);} .htitle em{font-style:italic;color:var(--lav);} .hdesc{font-size:14.18px;font-weight:300;line-height:1.75;color:var(--muted);margin-bottom:26px;max-width:340px;} .hctas{display:flex;gap:11px;flex-wrap:wrap;} .btn-p{background:var(--gold);color:white;font-size:11.45px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;padding:13px 26px;border-radius:3px;cursor:pointer;transition:all .2s;border:none;font-family:'Poppins',sans-serif;} .btn-p:hover{background:#a87a2a;} .btn-o{border:1.5px solid var(--dark);color:var(--dark);font-size:11.45px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;padding:13px 26px;border-radius:3px;cursor:pointer;transition:all .2s;background:transparent;font-family:'Poppins',sans-serif;} .btn-o:hover{background:rgba(255,255,255,.08);} /* hero deco card - desktop only */ .hdeco{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:min(300px,36vw);aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:rgba(123,94,167,.15);backdrop-filter:blur(6px);border:1px solid rgba(123,94,167,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;} .hdeco-visual{font-size:87.27px;opacity:.25;} .hdeco-name{font-family:'Playfair Display',serif;font-size:18.55px;color:var(--dark);font-weight:600;} .hdeco-sub{font-size:10.91px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);} .hdeco-price{font-size:19.64px;font-weight:600;color:var(--lav);} /* dots & arrows */ .hdots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:7px;} .hdot{width:22px;height:2px;background:rgba(74,45,130,.25);border-radius:2px;cursor:pointer;transition:all .3s;} .hdot.on{width:38px;background:var(--lav);} .harrows{position:absolute;bottom:14px;right:50px;display:flex;gap:7px;} .harr{width:38px;height:38px;border:1px solid rgba(74,45,130,.3);color:var(--lav);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;font-size:14.18px;transition:all .2s;background:rgba(255,255,255,.7);} .harr:hover{background:var(--lav);color:white;border-color:var(--lav);} /* ── TRUST BAR — 2×2 mobile grid / 4-col desktop ── */ /* ── Trust Bar — slider, newsletter purple gradient ── */ .trust2 { background:linear-gradient(135deg,#4A2D82 0%,#7B5EA7 100%); overflow:hidden; padding:0; } .trust2-in { display:flex; white-space:nowrap; width:max-content; animation:trustScroll 18s linear infinite; } .trust2:hover .trust2-in { animation-play-state:paused; } @keyframes trustScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } .t2item { display:inline-flex; align-items:center; gap:12px; padding:16px 40px; border-right:1px solid rgba(255,255,255,.12); flex-shrink:0; white-space:nowrap; } .t2icon { flex-shrink:0; width:36px; height:36px; } .t2icon svg { width:36px; height:36px; } /* Recolor SVG fills/strokes to white on dark bg */ .t2icon svg rect:first-child { fill:rgba(255,255,255,.12) !important; } .t2icon svg path, .t2icon svg circle { stroke:rgba(255,255,255,.9) !important; } .t2txt strong { display:block; font-size:14.18px; font-weight:700; font-family:'Poppins',sans-serif; color:#fff; letter-spacing:.3px; } .t2txt span { font-size:12.55px; color:rgba(255,255,255,.7); font-family:'Poppins',sans-serif; font-weight:300; display:block; margin-top:2px; } /* MOBILE: 2×2 grid */ @media(max-width:860px){ .trust2-in{ grid-template-columns:repeat(2,1fr); padding:0; } .t2item{ padding:16px 14px; border-right:1px solid rgba(196,150,58,.12); border-bottom:1px solid rgba(196,150,58,.12); } /* remove right border on 2nd column */ .t2item:nth-child(2n){ border-right:none; } /* remove bottom border on last row */ .t2item:nth-last-child(-n+2){ border-bottom:none; } .t2icon{ width:34px; height:34px; } .t2icon svg{ width:34px; height:34px; } .t2txt strong{ font-size:12.55px; } .t2txt span{ font-size:10.91px; } } /* ── SECTIONS ── */ .sec{padding:60px 0;} .sec-alt{background:var(--warm);} .con{max-width:1760px;width:94%;margin:0 auto;padding:0 24px;} @media(max-width:760px){ .con{ width:auto; padding:0 16px; } } .eyebrow{font-size:12px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--lav);display:flex;align-items:center;gap:9px;margin-bottom:8px;} .eyebrow::before{content:'';width:26px;height:1px;background:var(--lav);} .stitle{font-family:'Playfair Display',serif;font-size:clamp(28.36px,4.36vw,43.64px);font-weight:600;color:var(--dark);letter-spacing:-.4px;line-height:1.15;} .stitle em{font-style:italic;color:var(--lav);} .ssub{font-size:14.18px;font-weight:300;color:var(--muted);margin-top:6px;} .shead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap;} .sall{font-size:11.45px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--lav);display:flex;align-items:center;gap:5px;transition:gap .2s;flex-shrink:0;cursor:pointer;} .sall:hover{gap:9px;} /* ══════════════════════════════════════ CAROUSEL SYSTEM — universal ══════════════════════════════════════ */ .crsl-wrap{position:relative;overflow:hidden;touch-action:pan-y;} .crsl-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform;} /* gap between items handled by padding-right on each item */ .crsl-item{flex-shrink:0;padding-right:14px;box-sizing:border-box;} /* desktop: 4 across */ .crsl-4 .crsl-item{width:25%;} /* mobile: 2 across — set via JS + CSS var */ /* nav arrows */ .crsl-nav{display:flex;align-items:center;gap:8px;margin-top:20px;justify-content:center;} .cnav-dot{width:28px;height:2.5px;background:rgba(0,0,0,.12);border-radius:2px;cursor:pointer;transition:all .3s;} .cnav-dot.on{background:var(--lav);width:44px;} .cnav-arr{width:36px;height:36px;border:1px solid var(--border);background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14.18px;color:var(--text);transition:all .2s;flex-shrink:0;} .cnav-arr:hover{background:var(--lav);color:white;border-color:var(--lav);} /* dark variant for dark bg */ .cnav-dark .cnav-dot{background:rgba(255,255,255,.15);} .cnav-dark .cnav-dot.on{background:var(--gold);} .cnav-dark .cnav-arr{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:white;} .cnav-dark .cnav-arr:hover{background:var(--gold);border-color:var(--gold);} /* ── PRODUCT CARD ── */ .pcard{cursor:pointer;} .pimg{aspect-ratio:3/4;border-radius:7px;overflow:hidden;position:relative;background:var(--warm);} .pimg-in{width:100%;height:100%;transition:transform .5s;} .pcard:hover .pimg-in{transform:scale(1.04);} .pbadge{position:absolute;top:9px;left:9px;font-size:9.27px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:20px;z-index:2;} .b-new{background:var(--dark);color:white;} .b-sale{background:#dc2626;color:white;} .b-hot{background:var(--gold);color:white;} .pwish{position:absolute;top:9px;right:9px;width:30px;height:30px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14.18px;opacity:0;transition:opacity .2s;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:2;cursor:pointer;} .pcard:hover .pwish,.pwish.vis{opacity:1;} .pquick{position:absolute;bottom:10px;left:10px;right:10px;background:rgba(18,9,28,.88);backdrop-filter:blur(4px);color:white;font-size:10.36px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:9px;text-align:center;border-radius:4px;opacity:0;transform:translateY(5px);transition:all .25s;cursor:pointer;} .pcard:hover .pquick{opacity:1;transform:translateY(0);} .pinfo{padding:10px 2px 4px;} .pbrand{font-size:9.27px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--lav);margin-bottom:3px;} .pname{font-size:14.18px;font-weight:400;color:var(--dark);line-height:1.3;margin-bottom:5px;} .pprice{display:flex;align-items:center;gap:7px;flex-wrap:wrap;} .pcurr{font-size:15.27px;font-weight:600;color:var(--dark);} .pold{font-size:12.55px;color:var(--lt);text-decoration:line-through;} .poff{font-size:10.36px;font-weight:700;color:#16a34a;background:rgba(22,163,74,.09);padding:2px 6px;border-radius:10px;} .pcolors{display:flex;gap:5px;margin-top:6px;} .cdot{width:11px;height:11px;border-radius:50%;border:1.5px solid white;box-shadow:0 0 0 1px rgba(0,0,0,.1);cursor:pointer;transition:transform .2s;} .cdot:hover{transform:scale(1.25);} /* ══ SIZE SELECTOR ══ */ .psizes{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px;} .sz{min-width:34px;padding:3px 5px;border:1px solid var(--border);border-radius:4px;font-size:10.36px;font-weight:500;color:var(--text);text-align:center;cursor:pointer;transition:all .18s;letter-spacing:.3px;background:var(--white);} .sz:hover{border-color:var(--lav);color:var(--lav);} .sz.act{background:var(--deep);color:#fff!important;border-color:var(--deep);} .sz.oos{color:var(--lt)!important;border-color:var(--border);text-decoration:line-through;cursor:not-allowed;opacity:.55;} /* on dark/purple section bg, size pills stay white */ .sec-alt .sz{background:var(--white);} .pstars{display:flex;align-items:center;gap:4px;margin-top:4px;} .stars{color:var(--gold);font-size:11.45px;letter-spacing:-1px;} .scnt{font-size:10.91px;color:var(--muted);} /* product visuals */ .pv1::before{background:linear-gradient(160deg,#e8d5f5,#c4a8e8 40%,#7B5EA7);} .pv2::before{background:linear-gradient(160deg,#f5e8d5,#e8c498 40%,#c4963A);} .pv3::before{background:linear-gradient(160deg,#d5e8f5,#98c4e8 40%,#3a6a9a);} .pv4::before{background:linear-gradient(160deg,#f5d5d5,#e89898 40%,#8B2635);} .pv5::before{background:linear-gradient(160deg,#d5f5e8,#98e8c4 40%,#2d7a5a);} .pv6::before{background:linear-gradient(160deg,#f5f5d5,#e8e898 40%,#8a8a3a);} .pv7::before{background:linear-gradient(160deg,#e8d5e8,#c498c4 40%,#7a3a7a);} .pv8::before{background:linear-gradient(160deg,#d5d5f5,#9898e8 40%,#3a3a8B);} .pv-in{width:100%;height:100%;position:relative;overflow:hidden;} .pv-in::before{content:'';position:absolute;inset:0;} .pshape{position:absolute;width:42%;aspect-ratio:1/2.5;border-radius:60px;opacity:.45;left:50%;top:50%;transform:translate(-50%,-50%);} .pv1 .pshape{background:linear-gradient(to bottom,#4A2D82,#9B7EC7);} .pv2 .pshape{background:linear-gradient(to bottom,#8a6a2a,#c4963A);} .pv3 .pshape{background:linear-gradient(to bottom,#1a4a7a,#3a7ab0);} .pv4 .pshape{background:linear-gradient(to bottom,#5a1520,#8B2635);} .pv5 .pshape{background:linear-gradient(to bottom,#1a5a3a,#2d8a5a);} .pv6 .pshape{background:linear-gradient(to bottom,#5a5a1a,#8a8a3a);} .pv7 .pshape{background:linear-gradient(to bottom,#5a1a5a,#8a3a8a);} .pv8 .pshape{background:linear-gradient(to bottom,#1a1a5a,#2d2d8B);} .plabel{position:absolute;bottom:12px;left:12px;font-size:9.82px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45);} /* ── CATEGORY CAROUSEL ── */ .catcard{cursor:pointer;border-radius:8px;overflow:hidden;position:relative;} .cat-in{width:100%;aspect-ratio:3/4;position:relative;overflow:hidden;} .catcard.wide .cat-in{aspect-ratio:16/9;} .cat-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,9,28,.72) 0%,rgba(18,9,28,.05) 65%,transparent);} .cat-bg{width:100%;height:100%;transition:transform .55s;} .catcard:hover .cat-bg{transform:scale(1.05);} .clbl{position:absolute;bottom:0;left:0;right:0;padding:18px;} .cname{font-family:'Playfair Display',serif;font-size:21.82px;font-weight:600;color:white;display:block;line-height:1.1;} .ccnt{font-size:10.91px;color:rgba(255,255,255,.55);letter-spacing:1px;margin-top:3px;display:block;font-weight:300;} .carr{position:absolute;top:14px;right:14px;width:28px;height:28px;background:rgba(255,255,255,.14);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:white;opacity:0;transition:all .3s;} .catcard:hover .carr{opacity:1;} .cv1{background:linear-gradient(135deg,#4a2d82,#9b7ec7);} .cv2{background:linear-gradient(135deg,#1a2744,#4a6fa5);} .cv3{background:linear-gradient(135deg,#7a3a1a,#e8963a);} .cv4{background:linear-gradient(135deg,#4a1515,#c45a6a);} .cv5{background:linear-gradient(135deg,#3a1a4a,#9a5aaa);} .cv6{background:linear-gradient(135deg,#1a3a1a,#4aaa5a);} /* ══════════════════════════════════════════ CUSTOM STITCHING — Your Perfect Fit ══════════════════════════════════════════ */ .custitch{ background:linear-gradient(135deg,#4A2D82 0%,#7B5EA7 100%); overflow:hidden; } .custitch-in{ max-width:1300px; margin:0 auto; padding:72px 20px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } /* LEFT */ .cs-eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; } .cs-title{ font-family:'Playfair Display',serif; font-size:clamp(37.09px,5.45vw,56.73px); font-weight:600; color:white; line-height:1.1; letter-spacing:-.5px; margin-bottom:18px; } .cs-title em{ font-style:italic; color:var(--glight); } .cs-body{ font-size:15.27px; font-weight:300; line-height:1.8; color:rgba(255,255,255,.75); margin-bottom:32px; } /* Feature list */ .cs-features{ list-style:none; display:flex; flex-direction:column; gap:18px; } .cs-feat{ display:flex; align-items:center; gap:14px; font-size:14.73px; color:rgba(255,255,255,.75); font-weight:300; line-height:1.4; } .cs-feat-icon{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:21.82px; flex-shrink:0; border:1px solid rgba(255,255,255,.1); } /* RIGHT */ .cs-right{ display:flex; flex-direction:column; gap:28px; } .cs-note{ font-size:15.27px; line-height:1.75; font-weight:300; color:rgba(255,255,255,.55); text-align:center; } /* Toggle row */ .cs-toggle-row{ display:flex; align-items:center; justify-content:center; gap:16px; } /* Toggle button */ .cs-toggle{ width:60px; height:32px; border-radius:20px; background:rgba(255,255,255,.15); border:none; cursor:pointer; position:relative; transition:background .3s; flex-shrink:0; } .cs-toggle.on{ background:var(--gold); } .cs-toggle-knob{ position:absolute; top:4px; width:24px; height:24px; border-radius:50%; background:var(--dark); transition:left .3s cubic-bezier(.4,0,.2,1); left:4px; } .cs-toggle.on .cs-toggle-knob{ left:32px; } /* Label */ .cs-toggle-label{ font-size:16.36px; font-weight:600; color:white; } .cs-toggle-label span{ color:var(--gold); } .cs-toggle.off + .cs-toggle-label span{ color:rgba(255,255,255,.35); } /* CTA links */ .cs-link{ display:block; text-align:center; font-size:13.09px; font-weight:400; letter-spacing:1.5px; color:rgba(255,255,255,.75); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:12px; transition:color .2s; } .cs-link:hover{ color:white; border-bottom-color:rgba(255,255,255,.5); } .cs-wa{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.64px; font-weight:500; color:#4ade80; text-decoration:none; transition:color .2s; } .cs-wa:hover{ color:#86efac; } /* MOBILE: single column */ @media(max-width:860px){ .custitch-in{ grid-template-columns:1fr; gap:40px; padding:52px 20px; } .cs-note{ text-align:left; } .cs-toggle-row{ justify-content:flex-start; } .cs-link{ text-align:left; } .cs-wa{ justify-content:flex-start; } } @media(max-width:580px){ .cs-title{ font-size:34.91px; } .cs-feat-icon{ width:38px; height:38px; font-size:18.55px; } } /* ── OCCASION TABS ── */ .otabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:28px;overflow-x:auto;scrollbar-width:none;} .otabs::-webkit-scrollbar{display:none;} .otab{font-size:12.55px;font-weight:500;letter-spacing:.3px;padding:11px 18px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;margin-bottom:-1px;} .otab.on,.otab:hover{color:var(--lav);border-bottom-color:var(--lav);} /* ── REVIEWS ── */ .revs{background:linear-gradient(135deg,var(--dark),#1e0a3c);} .rhead{text-align:center;margin-bottom:40px;} .rhead .eyebrow{justify-content:center;} .rhead .eyebrow::before{display:none;} .rhead .stitle{color:white;} .rscore{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:14px;flex-wrap:wrap;} .rbig{font-family:'Playfair Display',serif;font-size:65.45px;color:var(--glight);font-weight:600;line-height:1;} .rdtl .rstars{color:var(--gold);font-size:18.55px;letter-spacing:2px;} .rdtl p{font-size:12px;color:rgba(255,255,255,.45);margin-top:3px;} .rcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:18px;} .rtop{display:flex;align-items:center;gap:10px;margin-bottom:11px;} .ravatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--lav),var(--deep));display:flex;align-items:center;justify-content:center;font-size:13.09px;font-weight:600;color:white;flex-shrink:0;} .rname{font-size:13.64px;font-weight:500;color:white;} .rloc{font-size:10.91px;color:rgba(255,255,255,.35);} .rcstars{color:var(--gold);font-size:12.55px;margin-bottom:7px;letter-spacing:1px;} .rtxt{font-size:12.55px;color:rgba(255,255,255,.75);line-height:1.65;font-weight:300;} .rprod{font-size:10.91px;color:var(--lav);margin-top:7px;} .rver{font-size:10.36px;color:rgba(22,163,74,.75);margin-top:2px;} /* ── INSTAGRAM ── */ .insta-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;} .ihandle{display:flex;align-items:center;gap:10px;} .ilogo{width:34px;height:34px;border-radius:50%;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);display:flex;align-items:center;justify-content:center;font-size:16.36px;} .iname{font-weight:600;font-size:14.73px;} .isub{font-size:12px;color:var(--muted);font-weight:300;} .icard{aspect-ratio:1;border-radius:7px;overflow:hidden;position:relative;cursor:pointer;} .iimg{width:100%;height:100%;transition:transform .4s;} .icard:hover .iimg{transform:scale(1.07);} .iov{position:absolute;inset:0;background:rgba(74,45,130,.55);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;font-size:21.82px;color:white;} .icard:hover .iov{opacity:1;} .iv1{background:linear-gradient(135deg,#7B5EA7 20%,#e8c4f5);} .iv2{background:linear-gradient(135deg,#C4963A 20%,#f5e8c4);} .iv3{background:linear-gradient(135deg,#2d4a7a 20%,#c4d8f5);} .iv4{background:linear-gradient(135deg,#8B2635 20%,#f5c4cc);} .iv5{background:linear-gradient(135deg,#2d7a5a 20%,#c4f5e8);} .iv6{background:linear-gradient(135deg,#4A2D82 20%,#d4c4f5);} .ipat{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34.91px;opacity:.35;} /* ── NEWSLETTER ── */ .nwsl{background:var(--warm);text-align:center;padding:60px 20px;} .nwsl-in{max-width:480px;margin:0 auto;} .nwsl-t{font-family:'Playfair Display',serif;font-size:clamp(28.36px,5.45vw,39.27px);font-weight:600;color:var(--dark);margin-bottom:7px;} .nwsl-s{font-size:13.64px;color:var(--muted);font-weight:300;margin-bottom:24px;} .nwsl-f{display:flex;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:white;} .nwsl-i{flex:1;border:none;outline:none;padding:13px 16px;font-family:'Poppins',sans-serif;font-size:13.64px;color:var(--text);} .nwsl-b{background:var(--deep);color:white;border:none;padding:13px 22px;font-family:'Poppins',sans-serif;font-size:11.45px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .2s;white-space:nowrap;} .nwsl-b:hover{background:var(--lav);} .nwsl-n{font-size:11.45px;color:var(--lt);margin-top:10px;} /* ── FOOTER ── */ .fbl{display:flex;flex-direction:column;} /* We Accept strip */ .faccept{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;} .faccept-in{max-width:1300px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .faccept-label{font-size:10.36px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;} .faccept-icons{display:flex;gap:8px;flex-wrap:wrap;} .fpb2{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;font-size:12px;font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:.5px;border:1px solid rgba(255,255,255,.25);border-radius:4px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);} .fpb2:hover{border-color:rgba(255,255,255,.25);} @media(max-width:860px){ .faccept-in{gap:12px;} } /* TOP CATEGORIES */ .flinks{display:flex;flex-direction:column;gap:0;} .flink:last-child{border-bottom:none;} .fci{display:flex;align-items:flex-start;gap:9px;margin-bottom:10px;font-size:13.64px;color:rgba(255,255,255,.5);} .fcico{font-size:14.18px;opacity:.5;flex-shrink:0;margin-top:1px;} .fpay{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;} .fpb{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:4px;padding:5px 10px;font-size:10.91px;font-weight:500;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;} .fbot{border-top:1px solid rgba(255,255,255,.06);padding:18px 20px;max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;} .fbl-t a{color:rgba(255,255,255,.42);text-decoration:none;} /* Logo area */ .fbl-t{font-size:11.45px;color:rgba(255,255,255,.28);} /* ── WHATSAPP FLOAT ── */ .waf{position:fixed;bottom:22px;left:18px;z-index:890;} .wab{width:50px;height:50px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 18px rgba(37,211,102,.4);cursor:pointer;transition:transform .2s;text-decoration:none;} .wab:hover{transform:scale(1.08);} /* ── CART DRAWER ── */ .c-ov{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:940;opacity:0;pointer-events:none;transition:opacity .3s;} .c-ov.sh{opacity:1;pointer-events:all;} .cdraw{position:fixed;top:0;right:0;width:360px;max-width:100vw;height:100vh;background:white;z-index:950;transform:translateX(100%);transition:transform .35s cubic-bezier(.77,0,.175,1);display:flex;flex-direction:column;box-shadow:-4px 0 28px rgba(0,0,0,.1);} .cdraw.op{transform:translateX(0);} .cdh{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;} .cdt{font-family:'Playfair Display',serif;font-size:20.73px;font-weight:600;} .cdx{width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;font-size:18.55px;transition:background .2s;} .cdx:hover{background:var(--warm);} .cdi{flex:1;overflow-y:auto;padding:14px 22px;} .cditem{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);} .cdiimg{width:64px;aspect-ratio:3/4;border-radius:5px;overflow:hidden;flex-shrink:0;} .cdiinfo{flex:1;} .cdinn{font-size:13.64px;font-weight:500;color:var(--dark);margin-bottom:2px;} .cdiv{font-size:11.45px;color:var(--muted);} .cdip{font-size:14.73px;font-weight:600;color:var(--dark);margin-top:5px;} .cdiqty{display:flex;align-items:center;gap:7px;margin-top:7px;} .qb{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15.27px;background:none;transition:background .2s;} .qb:hover{background:var(--warm);} .qn{font-size:13.09px;font-weight:500;min-width:22px;text-align:center;} .cdf{padding:18px 22px;border-top:1px solid var(--border);} .cdtr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;} .cdtl{font-size:12.55px;color:var(--muted);} .cdta{font-family:'Playfair Display',serif;font-size:24px;font-weight:600;} .ckout{width:100%;background:var(--deep);color:white;border:none;padding:15px;font-family:'Poppins',sans-serif;font-size:12.55px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;cursor:pointer;border-radius:3px;transition:background .2s;margin-bottom:9px;} .ckout:hover{background:var(--lav);} .ccont{width:100%;background:transparent;color:var(--muted);border:none;padding:9px;font-family:'Poppins',sans-serif;font-size:11.45px;cursor:pointer;text-align:center;} /* ══════════════════════════════════════════ SHOP BY OCCASION — Landscape Grid ══════════════════════════════════════════ */ .ocsec{ background:#EDE5F8; padding:56px 0 48px; } .oc-head{ text-align:center; margin-bottom:36px; } .oc-eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--lav); margin-bottom:12px; } .oc-title{ font-family:'Playfair Display',serif; font-size:clamp(37.09px,7.64vw,58.91px); font-weight:600; color:var(--text); letter-spacing:-.5px; line-height:1.1; margin-bottom:14px; } .oc-line{ width:44px; height:2.5px; background:var(--lav); border-radius:2px; margin:0 auto; } /* 2-col grid — always even */ .oc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } @media(max-width:580px){ .oc-grid{ gap:10px; } } /* LANDSCAPE CARD */ .occard{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/10; cursor:pointer; } @media(max-width:580px){ .occard{ aspect-ratio:4/3; } } .occard-bg{ position:absolute; inset:0; transition:transform .5s ease; } .occard:hover .occard-bg{ transform:scale(1.05); } .occard-spot{ position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 30% 40%, rgba(255,255,255,.12) 0%, transparent 65%); pointer-events:none; } .occard-ov{ position:absolute; inset:0; background:linear-gradient(160deg,rgba(18,8,40,.15) 0%,rgba(18,8,40,.58) 100%); pointer-events:none; } /* Large emoji — bottom-right, overlapping */ .occard-emoji{ position:absolute; right:-4px; bottom:-4px; font-size:clamp(58.91px,10.91vw,93.82px); line-height:1; opacity:.82; filter:drop-shadow(0 4px 14px rgba(0,0,0,.25)); transition:transform .4s ease,opacity .3s; pointer-events:none; z-index:2; user-select:none; } .occard:hover .occard-emoji{ transform:scale(1.1) translate(-4px,-4px); opacity:1; } .occard-emoji img{ width:clamp(60px,11vw,100px); height:auto; object-fit:contain; display:block; filter:drop-shadow(0 4px 14px rgba(0,0,0,.25)); } /* Text — bottom-left */ .occard-body{ position:absolute; inset:0; padding:16px 18px; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; } .occard-badge{ display:inline-block; font-size:9.82px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:5px; width:fit-content; } .occard-name{ font-family:'Playfair Display',serif; font-size:clamp(19.64px,3.82vw,28.36px); font-weight:600; color:white; line-height:1.15; margin-bottom:5px; letter-spacing:-.2px; } .occard-sub{ font-size:clamp(11.45px,2.18vw,13.64px); font-weight:300; color:rgba(255,255,255,.68); line-height:1.4; } .occard::after{ content:''; position:absolute; inset:0; border-radius:14px; border:1.5px solid rgba(255,255,255,0); transition:border-color .3s; pointer-events:none; z-index:4; } .occard:hover::after{ border-color:rgba(255,255,255,.28); } @keyframes ocFade{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } .occard{ animation:ocFade .35s ease both; } @media(max-width:580px){ .ocsec{ padding:44px 0 48px; } .occard-body{ padding:11px 12px; } .occard-name{ font-size:17.45px; } .occard-emoji{ font-size:54.55px; } } /* ══════════════════════════════════════════ REVIEWS SECTION ══════════════════════════════════════════ */ .rvw-sec{ background:linear-gradient(135deg,#4A2D82 0%,#34205E 55%,#3F2670 100%); padding:56px 0 48px; color:#fff; } /* header */ .rvw-head{ text-align:center; margin-bottom:36px; } .rvw-eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; } .rvw-title{ font-family:'Playfair Display',serif; font-size:clamp(37.09px,7.64vw,56.73px); font-weight:600; color:var(--text); letter-spacing:-.5px; line-height:1.1; margin-bottom:12px; } .rvw-sub{ font-size:14.73px; color:var(--muted); font-weight:300; margin-bottom:16px; } .rvw-line{ width:44px; height:2.5px; background:var(--lav); border-radius:2px; margin:0 auto; } /* platform stat columns */ .rvw-stats{ display:flex; margin:32px 0 0; border:1px solid rgba(255,255,255,.18); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.05); } .rvw-stat{ flex:1; padding:20px 14px; text-align:center; border-right:1px solid rgba(255,255,255,.14); } .rvw-stat:last-child{ border-right:none; } .rvw-stat-label{ font-size:9.82px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.72); display:block; margin-bottom:10px; } .rvw-stat-num{ font-family:'Playfair Display',serif; font-size:clamp(34.91px,6.55vw,48px); font-weight:700; color:var(--glight); display:block; line-height:1; } .rvw-stat-stars{ color:var(--glight); font-size:14.18px; letter-spacing:1px; display:block; margin:5px 0; } .rvw-stat-count{ font-size:12px; color:rgba(255,255,255,.66); font-weight:300; } /* tabs */ .rvw-tabs{ display:flex; gap:0; margin:24px 0 20px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.2); } .rvw-tab{ flex:1; padding:13px 10px; font-size:12.55px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; border:none; cursor:pointer; transition:all .22s; font-family:'Poppins',sans-serif; background:#fff; color:#1a1a1a; text-align:center; } .rvw-tab.on{ background:var(--deep); color:#fff; box-shadow:inset 0 -3px 0 var(--glight); } .rvw-tab:hover:not(.on){ background:rgba(123,94,167,.12); color:var(--deep); } /* slider wrap */ .rvw-slider-wrap{ overflow:hidden; cursor:grab; } .rvw-slider-wrap:active{ cursor:grabbing; } .rvw-slider{ display:flex; transition:transform .4s cubic-bezier(.4,0,.2,1); will-change:transform; } /* individual review card */ .rvw-card{ flex-shrink:0; width:calc(100% - 0px); padding:0 8px; box-sizing:border-box; } @media(min-width:700px){ .rvw-card{ width:50%; } } .rvw-card-inner{ border:1.5px solid rgba(123,94,167,.2); border-radius:14px; padding:22px 20px; background:white; } /* reviewer info */ .rvw-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .rvw-avatar{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--deep),var(--lav)); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:19.64px; font-weight:600; color:white; flex-shrink:0; } .rvw-info-name{ font-size:15.27px; font-weight:700; color:var(--text); } .rvw-info-meta{ font-size:12px; color:var(--muted); margin-top:2px; font-weight:300; } .rvw-stars{ color:var(--gold); font-size:15.27px; letter-spacing:1px; margin-bottom:10px; } .rvw-text{ font-family:'Playfair Display',serif; font-style:italic; font-size:14.18px; line-height:1.65; color:var(--text); margin-bottom:12px; } .rvw-source{ font-size:11.45px; color:var(--muted); font-weight:400; } .rvw-verified{ font-size:10.91px; color:#16a34a; margin-top:3px; } /* live note */ .rvw-live-note{ font-size:12px; color:var(--lt); text-align:center; margin-top:16px; font-weight:300; } @media(max-width:580px){ .rvw-stat-num{ font-size:30.55px; } .rvw-stat{ padding:14px 8px; } .rvw-stat-label{ font-size:8.73px; letter-spacing:1px; } } /* ══════════════════════════════════════════ JOIN THE VASTRANGAM FAMILY — Newsletter ══════════════════════════════════════════ */ .jvf-wrap{ margin-top:0; background:linear-gradient(135deg,#4A2D82 0%,#7B5EA7 100%); padding:64px 20px; } .jvf-in{ max-width:540px; margin:0 auto; text-align:center; } .jvf-title{ font-family:'Playfair Display',serif; font-size:clamp(37.09px,7.64vw,56.73px); font-weight:600; color:white; line-height:1.1; margin-bottom:14px; } .jvf-sub{ font-size:15.27px; font-weight:300; color:rgba(255,255,255,.58); margin-bottom:28px; line-height:1.6; } .jvf-form{ display:flex; border-radius:8px; overflow:hidden; background:white; margin-bottom:12px; } .jvf-input{ flex:1; border:none; outline:none; padding:16px 18px; font-family:'Poppins',sans-serif; font-size:14.18px; color:var(--text); background:transparent; min-width:0; } .jvf-input::placeholder{ color:var(--lt); } .jvf-btn{ background:var(--gold); color:white; border:none; padding:16px 24px; font-family:'Poppins',sans-serif; font-size:11.45px; font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background .22s; white-space:nowrap; flex-shrink:0; } .jvf-btn:hover{ background:#a87a2a; } .jvf-note{ font-size:12px; color:rgba(255,255,255,.45); margin-top:10px; } @media(max-width:480px){ .jvf-form{ flex-direction:column; border-radius:10px; } .jvf-btn{ padding:14px; border-radius:0 0 8px 8px; } } /* ── MOBILE FIRST RESPONSIVE ── */ @media(max-width:1024px){ .hdeco{display:none;} } @media(max-width:860px){ .nav,.mega{display:none!important;} .hburg{display:flex;} .story-in{grid-template-columns:1fr;} .svis{display:none;} /* Brand sits in its own cell (paired with Company) */ .ft>div:first-child{border-bottom:none;padding-bottom:0;margin-bottom:0;} /* Legal & Connect side by side on last row */ .crsl-4 .crsl-item{width:50%;} } @media(max-width:580px){ .hero{height:88vh;max-height:580px;} .hdr{height:56px;} .logo{font-size:21.82px;} .sec{padding:44px 0;} .fbt:nth-child(n+3){display:none;} .crsl-4 .crsl-item{width:50%;} .htitle{font-size:34.91px;} .harrows{display:none;} .nwsl-f{flex-direction:column;border-radius:6px;} .nwsl-b{padding:13px;} .hdots{bottom:14px;} } /* ══════════════════════════════════════════ POPULAR CATEGORIES — Circular Cards ══════════════════════════════════════════ */ .popcats{background:#EDE5F8;padding:56px 0 48px;} .popcats-head{text-align:center;margin-bottom:36px;} .popcats-eyebrow{ display:block; font-size:12px;font-weight:600; letter-spacing:4px;text-transform:uppercase; color:var(--gold);margin-bottom:10px; } .popcats-title{ font-family:'Playfair Display',serif; font-size:clamp(32.73px,6.55vw,52.36px); font-weight:600;color:var(--text); letter-spacing:-.5px;line-height:1.1; } /* each carousel item wrapper */ .pc-item{ flex-shrink:0; padding:0 10px; box-sizing:border-box; display:flex;flex-direction:column;align-items:center; cursor:pointer; } /* THE CIRCLE */ .pc-circle{ width:100%; /* keep it square so border-radius:50% makes a perfect circle */ aspect-ratio:1; border-radius:50%; overflow:hidden; position:relative; transition:transform .35s ease, box-shadow .35s ease; box-shadow:0 4px 18px rgba(74,45,130,.13); margin-bottom:14px; } .pc-item:hover .pc-circle{ transform:translateY(-5px) scale(1.03); box-shadow:0 12px 32px rgba(74,45,130,.22); } /* gradient background layer */ .pc-bg{ position:absolute;inset:0; border-radius:50%; transition:transform .45s ease; } .pc-item:hover .pc-bg{transform:scale(1.06);} /* emoji / image centered inside circle */ .pc-img{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; } .pc-emoji{ font-size:clamp(34.91px,8.73vw,56.73px); /* when a real is used instead, this wrapper stays the same */ line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); transition:transform .35s ease; } .pc-item:hover .pc-emoji{transform:scale(1.12);} /* real image inside circle (optional) */ .pc-img img{ width:68%;height:68%; object-fit:contain; transition:transform .35s ease; filter:drop-shadow(0 3px 8px rgba(0,0,0,.2)); } .pc-item:hover .pc-img img{transform:scale(1.1);} /* active ring on hover */ .pc-circle::after{ content:''; position:absolute;inset:-3px; border-radius:50%; border:2.5px solid var(--gold); opacity:0; transition:opacity .3s; } .pc-item:hover .pc-circle::after{opacity:1;} /* label below circle */ .pc-name{ font-size:clamp(13.09px,3.82vw,16.36px); font-weight:600; color:var(--text); /* white bg → black text */ text-align:center; letter-spacing:.2px; line-height:1.2; transition:color .2s; } .pc-item:hover .pc-name{color:var(--lav);} /* Desktop: 5 visible, mobile: 2 visible (even) */ @media(max-width:860px){ .popcats{padding:40px 0 32px;} .pc-circle{margin-bottom:10px;} } /* ══════════════════════════════════════════ SHOP THE WAY YOU WANT — Category Grid ══════════════════════════════════════════ */ .shopway{ background:#EDE5F8; padding:56px 0 48px; } /* Section header */ .sw-head{ text-align:center; margin-bottom:32px; } .sw-eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } .sw-title{ font-family:'Playfair Display',serif; font-size:clamp(34.91px,6.55vw,56.73px); font-weight:600; color:var(--text); letter-spacing:-.5px; line-height:1.1; } /* Tab switcher */ .sw-tabs{ display:flex; border-bottom:1.5px solid var(--border); margin-bottom:28px; gap:0; overflow-x:auto; scrollbar-width:none; } .sw-tabs::-webkit-scrollbar{ display:none; } .sw-tab{ font-family:'Poppins',sans-serif; font-size:12.55px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--lt); padding:12px 20px; cursor:pointer; border:none; background:none; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; white-space:nowrap; transition:all .22s; } .sw-tab.on{ color:var(--deep); border-bottom-color:var(--deep); } .sw-tab:hover:not(.on){ color:var(--lav); } /* THE GRID — 2 cols mobile, 4 cols desktop */ .sw-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:860px){ .sw-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } } /* GRID CARD */ .sw-card{ position:relative; border-radius:12px; overflow:hidden; cursor:pointer; aspect-ratio:3/4; /* grid always even — enforced by CSS grid */ } /* Background gradient — customisable per card via inline style */ .sw-card-bg{ position:absolute; inset:0; transition:transform .5s ease; } .sw-card:hover .sw-card-bg{ transform:scale(1.04); } /* Default gradient (overridden inline per card) */ .sw-card-bg{ background:linear-gradient(145deg,#5a3890 0%,#7B5EA7 45%,#3a2060 100%); } /* Radial spotlight in center — gives the screenshot's lighter center effect */ .sw-card-spot{ position:absolute; inset:0; background:radial-gradient(ellipse 65% 55% at 55% 42%, rgba(255,255,255,.13) 0%, transparent 70%); pointer-events:none; } /* Bottom gradient overlay — darkens toward label area */ .sw-card-ov{ position:absolute; inset:0; background:linear-gradient( to bottom, transparent 30%, rgba(18,5,40,.3) 60%, rgba(18,5,40,.72) 100% ); } /* Emoji / image in center */ .sw-card-img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); font-size:clamp(48px,8.73vw,69.82px); line-height:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,.22)); transition:transform .4s ease; z-index:2; } .sw-card:hover .sw-card-img{ transform:translate(-50%,-62%) scale(1.08); } /* Real image inside card */ .sw-card-img img{ width:clamp(60px,11vw,90px); height:auto; object-fit:contain; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.22)); transition:transform .4s ease; } .sw-card:hover .sw-card-img img{ transform:scale(1.08); } /* Label text at bottom */ .sw-card-label{ position:absolute; bottom:0; left:0; right:0; padding:14px 14px 16px; z-index:3; } .sw-card-type{ display:block; font-size:9.82px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:4px; } .sw-card-name{ display:block; font-family:'Playfair Display',serif; font-size:clamp(19.64px,4.36vw,24px); font-weight:600; color:#fff; line-height:1.15; letter-spacing:-.2px; } /* Hover ring */ .sw-card::after{ content:''; position:absolute; inset:0; border-radius:12px; border:1.5px solid rgba(255,255,255,0); transition:border-color .3s; pointer-events:none; z-index:4; } .sw-card:hover::after{ border-color:rgba(255,255,255,.3); } /* Fade-in animation when tab switches */ @keyframes swFade{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} } .sw-card{ animation:swFade .35s ease both; } /* Mobile padding tweak */ @media(max-width:580px){ .shopway{ padding:44px 0 48px; } .sw-card-img{ font-size:43.64px; } .sw-card-name{ font-size:18.55px; } .sw-card-label{ padding:10px 10px 12px; } } /* ══════════════════════════════════════════ NEW ARRIVALS + BEST SELLERS — Product Grid ══════════════════════════════════════════ */ .pgsec{ background:#EDE5F8; padding:56px 0 48px; } .pgsec-bs{ background:#EDE5F8; padding:56px 0 48px; } /* Section header */ .pgsec-head{ text-align:center; margin-bottom:32px; } .pgsec-eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } .pgsec-title{ font-family:'Playfair Display',serif; font-size:clamp(37.09px,7.64vw,56.73px); font-weight:600; color:var(--text); letter-spacing:-.5px; line-height:1.1; margin-bottom:14px; } .pgsec-line{ width:44px; height:2.5px; background:var(--lav); border-radius:2px; margin:0 auto; } /* 2-col mobile, 4-col desktop grid */ .pg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; } @media(max-width:860px){ .pg-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } } /* ── PRODUCT CARD ── */ .pgcard{ background:var(--white); border-radius:12px; overflow:hidden; cursor:pointer; } .pgcard-img{ position:relative; aspect-ratio:4/4.2; border-radius:10px; overflow:hidden; } /* card background gradient */ .pgcard-bg{ position:absolute; inset:0; transition:transform .45s ease; } .pgcard:hover .pgcard-bg{ transform:scale(1.04); } /* radial center highlight */ .pgcard-spot{ position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255,255,255,.16) 0%, transparent 70%); pointer-events:none; } /* emoji / image */ .pgcard-emoji{ position:absolute; top:50%; left:50%; transform:translate(-50%,-55%); font-size:clamp(54.55px,9.82vw,76.36px); line-height:1; filter:drop-shadow(0 3px 10px rgba(0,0,0,.18)); transition:transform .35s ease; z-index:2; } .pgcard:hover .pgcard-emoji{ transform:translate(-50%,-60%) scale(1.07); } .pgcard-emoji img{ width:clamp(60px,11vw,85px); height:auto; object-fit:contain; display:block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.18)); } /* badges top-left */ .pgcard-badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; z-index:3; } .pgbadge{ font-size:10.36px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:6px; color:white; display:inline-block; width:fit-content; } .pgb-new{ background:var(--lav); } .pgb-sale{ background:#dc2626; } .pgb-hot{ background:var(--gold); } .pgb-custom{ background:var(--dark); } /* wishlist circle top-right */ .pgcard-wish{ position:absolute; top:10px; right:10px; width:34px; height:34px; background:white; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.12); cursor:pointer; z-index:3; transition:transform .2s; border:none; } .pgcard-wish:hover{ transform:scale(1.1); } .pgcard-wish svg{ transition:fill .2s; } .pgcard-wish.liked svg{ fill:#e11d48; stroke:#e11d48; } /* Info below card */ .pgcard-info{ padding:11px 2px 4px; } .pgcard-name{ font-size:14.73px; font-weight:600; color:var(--text); line-height:1.3; margin-bottom:6px; } .pgcard-prices{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:8px; } .pgp-curr{ font-size:16.36px; font-weight:700; color:var(--text); } .pgp-old{ font-size:12.55px; color:var(--lt); text-decoration:line-through; } .pgp-off{ font-size:11.45px; font-weight:700; color:#16a34a; } .pgcard-colors{ display:flex; gap:6px; margin-bottom:10px; } .pgc-dot{ width:13px; height:13px; border-radius:50%; border:2px solid white; box-shadow:0 0 0 1.5px rgba(0,0,0,.12); cursor:pointer; transition:transform .2s; } .pgc-dot:hover{ transform:scale(1.25); } /* ADD TO CART button */ .pgcard-atc{ width:100%; padding:11px 10px; border:1.5px solid var(--border); border-radius:7px; background:var(--white); font-family:'Poppins',sans-serif; font-size:11.45px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--text); cursor:pointer; transition:all .22s; } .pgcard-atc:hover{ background:var(--deep); color:white; border-color:var(--deep); } /* Best Sellers card ATC on lavender bg */ .pgsec-bs .pgcard-atc{ background:white; } .pgsec-bs .pgcard-atc:hover{ background:var(--deep); color:white; } /* View All button */ .pg-viewall{ display:block; width:100%; padding:14px 20px; margin-top:4px; border:1.5px solid var(--lav); border-radius:8px; text-align:center; font-size:11.45px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--lav); text-decoration:none; transition:all .22s; } .pg-viewall:hover{ background:var(--lav); color:white; } .pg-viewall-bs{ border-color:var(--deep); color:var(--deep); } .pg-viewall-bs:hover{ background:var(--deep); color:white; } /* fade-in */ @keyframes pgFade{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } .pgcard{ animation:pgFade .3s ease both; } @media(max-width:580px){ .pgsec{ padding:44px 0 36px; } .pgcard-name{ font-size:13.64px; } .pgp-curr{ font-size:15.27px; } } /* touch swipe visual hint on mobile */ @media(max-width:860px){ .crsl-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:36px;background:linear-gradient(to right,transparent,rgba(255,255,255,.55));pointer-events:none;border-radius:0 7px 7px 0;} .sec-alt .crsl-wrap::after{background:linear-gradient(to right,transparent,rgba(245,239,230,.7));} } /* ══════════════════════════════════════════════════════════════ PREMIUM HEADER — DESKTOP (3 rows) Row 1: Ticker (existing) Row 2: Nav | Logo | Icons Row 3: Always-visible subcategory bar ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ HEADER — KALKI EXACT STRUCTURE (desktop ≥901px) Row 1: Black announcement bar (existing .ticker) Row 2: Left nav | Center logo | Right search+icons Row 3: Subcategory pill bar ══════════════════════════════════════════════════════ */ .hdrp, .hdrp-subbar { display:none; } @media(min-width:901px){ .hdrp, .hdrp-subbar { display:block !important; } .mob-hdr { display:none !important; } } header.header { display:none !important; } /* old header hidden on ALL screens */ /* Row 2 */ .hdrp { background:#fff; border-bottom:1px solid #e8e8e8; position:sticky; top:0; z-index:900; } .hdrp-inner { max-width:1440px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1fr auto 1fr; column-gap:20px; align-items:center; height:72px; position:relative; } /* Left nav */ .hdrp-nav { display:flex; align-items:center; gap:0; min-width:0; } .hnl { font-family:'Poppins',sans-serif; font-size:14.18px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#111; text-decoration:none; padding:7px 10px; white-space:nowrap; transition:color .18s; display:inline-block; } .hnl:hover, .hni:hover > .hnl { color:var(--lav); } .hnl-luxe { color:var(--gold) !important; } .hnl-sale { color:#e00 !important; } .hnl-wedding { font-style:italic; } /* Center logo */ .hdrp-logo { display:flex; align-items:center; justify-content:center; } .hdrp-logo-img { height:48px; width:auto; object-fit:contain; } /* Right: search bar + icons */ .hdrp-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:0; } /* Search bar — Kalki style full bar */ .hdr-search-bar { position:relative; display:flex; align-items:center; background:#fff; border:1px solid #e3dcec; border-radius:6px; overflow:hidden; height:38px; flex:0 1 250px; min-width:150px; margin-right:8px; transition:border-color .2s, box-shadow .2s; } .hdr-search-bar:focus-within { border-color:var(--lav); box-shadow:0 0 0 3px rgba(123,94,167,.12); } .hdr-search-input { flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent; font-family:'Poppins',sans-serif; font-size:13.09px; color:#111; padding:0 10px; } .hdr-search-input::placeholder { color:#999; font-size:12.55px; } .hdr-search-btn { width:38px; height:38px; flex-shrink:0; background:var(--deep); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; border-radius:0; transition:background .18s; } .hdr-search-btn:hover { background:var(--lav); } /* Icon buttons */ .hda { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; color:#2a1a3e; text-decoration:none; flex-shrink:0; transition:background .18s, color .18s; } .hda:hover { background:rgba(123,94,167,.12); color:var(--lav); } .hda-cart { position:relative; } .hda-badge { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:var(--lav); color:#fff; font-size:9.82px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; } .hda-lang-btn { font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.8px; color:#111; border:1px solid #ddd; border-radius:3px; padding:4px 8px; background:#fff; cursor:pointer; transition:background .18s; } .hda-lang-btn:hover { background:var(--lav); color:#fff; border-color:var(--lav); } .hda-lang-drop { display:none; position:absolute; right:0; top:calc(100%+4px); background:#fff; border:1px solid #eee; border-radius:4px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.1); min-width:130px; z-index:999; } .hda-lang-drop.open { display:block; } .hda-lang-drop a { display:block; padding:10px 16px; font-size:13.09px; color:#111; text-decoration:none; transition:background .15s; } .hda-lang-drop a:hover { background:rgba(123,94,167,.07); } .hda-lang { position:relative; } /* Search slide-down */ .hdrp-search-bar { display:none; border-top:1px solid #eee; padding:12px 0; background:#fff; } .hdrp-search-bar.open { display:block; } .hdrp-search-wrap { max-width:1440px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:10px; } .hdrp-search-input { flex:1; border:none; outline:none; font-size:16.36px; font-family:'Poppins',sans-serif; color:#111; } .hdrp-search-input::placeholder { color:#bbb; } .hdrp-search-close { background:none; border:none; cursor:pointer; font-size:17.45px; color:#999; } /* Row 3: Subcategory bar */ .hdrp-subbar { background:#fff; border-bottom:1px solid #e8e8e8; position:sticky; top:72px; z-index:890; } .hdrp-subbar-inner { max-width:1440px; margin:0 auto; padding:0 28px; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; white-space:nowrap; } .hdrp-subbar-inner::-webkit-scrollbar { display:none; } a.hsb-link { font-family:'Poppins',sans-serif; font-size:13.09px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#111; text-decoration:none; padding:11px 0; margin-right:24px; white-space:nowrap; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; display:inline-block; } a.hsb-link:hover { color:#111; border-bottom-color:#111; } a.hsb-new { color:var(--lav); border-bottom-color:var(--lav); } a.hsb-new:hover { border-bottom-color:var(--lav); } a.hsb-sale { color:#e00; border-bottom-color:#e00; } a.hsb-luxe { color:var(--gold); } /* ════════════════════════════════════════════════════════ MEGA MENU — HOUSE OF INDYA STYLE Left sidebar | Circular tile panels Typography: Kalki-inspired (bold, tracked, hierarchical) ════════════════════════════════════════════════════════ */ .hmega { display:none; position:absolute; left:0; right:0; top:72px; background:#fff; border-top:3px solid #111; box-shadow:0 20px 60px rgba(0,0,0,.13); z-index:800; } .hoi-wrap { display:flex; align-items:stretch; max-width:1440px; margin:0 auto; min-height:340px; max-height:78vh; } /* ── Left sidebar ── */ .hoi-sidebar { width:200px; flex-shrink:0; border-right:1px solid #eee; background:#fafafa; overflow-y:auto; padding:20px 0; } .hoi-sb-sec { display:block; font-family:'Poppins',sans-serif; font-size:9.82px; font-weight:900; letter-spacing:3px; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,#4A2D82,#7B5EA7); padding:9px 20px; margin-top:4px; } a.hoi-sb-item { display:block; font-family:'Poppins',sans-serif; font-size:14.18px; font-weight:500; color:#222; text-decoration:none; padding:11px 20px; border-left:3px solid transparent; transition:all .15s; } a.hoi-sb-item:hover { color:var(--lav); background:#fff; border-left-color:var(--lav); } a.hoi-sb-item.active { color:var(--lav); background:#fff; border-left-color:var(--lav); font-weight:700; } /* ── Right content area ── */ .hoi-content { flex:1; padding:28px 36px; overflow-y:auto; overflow-x:hidden; } .hoi-panel { display:none; } .hoi-panel.active { display:block; } /* ── Section heading — Kalki tracked bold ── */ .hoi-sec-hd { font-family:'Poppins',sans-serif; font-size:12px; font-weight:900; letter-spacing:3.5px; text-transform:uppercase; color:#fff; margin:22px 0 14px; padding:8px 12px; background:var(--lav); border-radius:3px; display:inline-block; } .hoi-sec-hd:first-child { margin-top:0; } .hoi-sec-hd:first-child { margin-top:0; } /* ── Circular tiles ── */ .hoi-tiles { display:flex; flex-wrap:wrap; gap:14px 20px; margin-bottom:4px; } a.hoi-tile { display:flex; flex-direction:column; align-items:center; width:74px; text-decoration:none; cursor:pointer; transition:transform .2s; } a.hoi-tile:hover { transform:translateY(-3px); } a.hoi-tile:hover .hoi-circle { box-shadow:0 6px 18px rgba(123,94,167,.28); border-color:var(--lav); } a.hoi-tile:hover .hoi-lbl { color:var(--lav); } .hoi-circle { width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28.36px; margin-bottom:7px; border:2px solid transparent; transition:box-shadow .2s, border-color .2s; flex-shrink:0; } .hoi-lbl { font-family:'Poppins',sans-serif; font-size:12px; font-weight:400; color:#333; text-align:center; line-height:1.35; max-width:72px; transition:color .15s; } /* Small mega (Men/Kids — no sidebar) */ .hmega-sm .hoi-wrap { min-height:auto; } /* mega open via JS — see initMegaMenus() */ .hmega-inner { max-width:1420px; margin:0 auto; padding:28px 24px 32px; display:flex; gap:0; align-items:flex-start; } /* Sections: Ethnic | divider | Western */ .hmega-section { flex:1; min-width:0; } .hmega-western { flex:0 0 160px; } .hmega-divider { width:1px; background:var(--border); margin:0 24px; align-self:stretch; flex-shrink:0; } .hmega-sec-title { font-size:12px; font-weight:700; letter-spacing:2px; font-family:'Poppins',sans-serif; text-transform:uppercase; color:var(--gold); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--border); } /* Columns */ .hmega-cols { display:flex; gap:0; align-items:flex-start; } .hmega-col { flex:1; padding:0 16px; min-width:0; border-right:1px solid rgba(0,0,0,.05); } .hmega-col:first-child { padding-left:0; } .hmega-col:last-child { border-right:none; } /* Column heading (Sarees, Lehenga...) */ a.hmega-col-hd { display:block; font-family:'Playfair Display',serif; font-size:17.45px; font-weight:600; color:var(--dark); text-decoration:none; margin-bottom:12px; transition:color .15s; } a.hmega-col-hd:hover { color:var(--lav); } /* Group */ .hmega-grp { margin-bottom:12px; } .hmega-grp-lbl { display:block; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(123,94,167,.65); margin-bottom:6px; font-family:'Poppins',sans-serif; } /* Mega links */ a.hml { display:block; font-size:14.18px; font-weight:400; font-family:'Poppins',sans-serif; color:var(--muted); text-decoration:none; line-height:1.9; transition:color .15s, padding-left .15s; } a.hml:hover { color:var(--lav); padding-left:4px; } /* Western links */ .hmega-western a.hml { font-size:14.18px; font-weight:400; line-height:2.2; } /* Small mega (Men, Kids) */ .hmega-sm .hmega-inner { padding:20px 24px 24px; } .hmega-sm .hmega-section { flex:0 0 auto; } .hmega-sm .hmega-cols { gap:32px; } .hmega-sm .hmega-col { border-right:none; padding:0; flex:0 0 auto; min-width:140px; } /* ══════════════════════════════════════════ ROW 3: Subcategory bar (always visible) ══════════════════════════════════════════ */ .hdrp-subbar { background:#fff; border-bottom:1px solid #e8e8e8; position:sticky; top:72px; z-index:890; } .hdrp-subbar-inner { max-width:1420px; margin:0 auto; padding:0 24px; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; white-space:nowrap; } .hdrp-subbar-inner::-webkit-scrollbar { display:none; } a.hsb-link { font-family:'Poppins',sans-serif; font-size:13.64px; font-weight:400; letter-spacing:.2px; color:#111; text-decoration:none; padding:11px 0; transition:color .18s; white-space:nowrap; flex-shrink:0; } a.hsb-link:hover { color:var(--dark); } a.hsb-new { color:var(--lav) !important; font-weight:600; } a.hsb-sale { color:#dc2626 !important; font-weight:600; } a.hsb-luxe { color:var(--gold) !important; font-weight:600; } .hsb-sep { color:rgba(0,0,0,.15); font-size:12px; padding:0 10px; user-select:none; flex-shrink:0; } .ctick-wrap { background:#7B5EA7; overflow:hidden; padding:0; height:44px; display:flex; align-items:center; } .ctick-track { display:flex; align-items:center; gap:0; white-space:nowrap; animation:ctickScroll 35s linear infinite; } .ctick-wrap:hover .ctick-track { animation-play-state:paused; } @keyframes ctickScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } .ctick-item { display:inline-flex; align-items:center; font-family:'Poppins',sans-serif; font-size:13.09px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.88); text-decoration:none; padding:0 4px; transition:color .2s; white-space:nowrap; } .ctick-item:hover { color:#fff; } .ctick-sep { color:var(--gold); font-size:9.82px; padding:0 14px; flex-shrink:0; } /* ── Pure black text on lavender sections ── */ .popcats, .pgsec, .pgsec-bs, .shopway, .ocsec, .rvw-sec, .sec, .popcats *, .pgsec *, .pgsec-bs *, .shopway *, .ocsec *, .sec * { color: inherit; } .pgsec-title, .popcats-title, .pgsec-title, .shopway-title, .ocsec-title { color: #111 !important; } .pgsec-eyebrow, .popcats-eyebrow { color: var(--gold) !important; } /* ══════════════════════════════════════════ INSTAGRAM FEED — Auto-scroll slider ══════════════════════════════════════════ */ .insta-head { text-align:center; margin-bottom:36px; } .insta-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; font-family:'Poppins',sans-serif; } .insta-title { font-family:'Playfair Display',serif; font-size:clamp(30.55px,4.36vw,43.64px); font-weight:600; color:#111; margin-bottom:6px; } .insta-handle { font-size:14.18px; color:var(--lav); font-family:'Poppins',sans-serif; font-weight:400; } /* Slider track */ .insta-slider-wrap { overflow:hidden; position:relative; margin-bottom:28px; } .insta-slider-wrap::before, .insta-slider-wrap::after { content:''; position:absolute; top:0; width:80px; height:100%; z-index:2; pointer-events:none; } .insta-slider-wrap::before { left:0; background:linear-gradient(90deg,#EDE5F8,transparent); } .insta-slider-wrap::after { right:0; background:linear-gradient(-90deg,#EDE5F8,transparent); } .insta-track { display:flex; gap:14px; width:max-content; animation:instaScroll 28s linear infinite; } .insta-slider-wrap:hover .insta-track { animation-play-state:paused; } @keyframes instaScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } .insta-tile { width:200px; flex-shrink:0; border-radius:10px; overflow:hidden; position:relative; cursor:pointer; display:block; transition:transform .25s, box-shadow .25s; text-decoration:none; } @media(max-width:600px){ .insta-tile{ width:140px; } } .insta-tile:hover { transform:scale(1.04); box-shadow:0 10px 28px rgba(74,45,130,.22); } .insta-tile:hover .insta-ov { opacity:1; } .insta-tile-inner { width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:43.64px; } .insta-ov { position:absolute; inset:0; background:rgba(74,45,130,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; } .insta-ov svg { color:white; } .insta-cta { text-align:center; } .insta-follow-btn { display:inline-flex; align-items:center; gap:8px; background:var(--lav); color:white; font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:13px 32px; border-radius:3px; text-decoration:none; transition:background .2s; } .insta-follow-btn:hover { background:var(--deep); color:white; } /* ══ GLOBAL FONT: Lato everywhere ══ */ *, *::before, *::after { font-family: 'Poppins', sans-serif; } /* ══ Playfair Display ONLY for display headings ══ */ h1, h2, h3, .pgsec-title, .popcats-title, .shopway-title, .ocsec-title, .rvw-title, .jvf-title, .insta-title, .custitch-title, .htitle, .hmega-col-hd, .mdrw-sub-title, .hdrp-logo-img { font-family: inherit; } h1, h2, h3, .pgsec-title, .popcats-title, .shopway-title, .ocsec-title, .rvw-title, .jvf-title, .insta-title, .custitch-title, .htitle { font-family:'Playfair Display',serif !important; } /* ══ INSTAGRAM SLIDER ══ */ .insta-sec { background:#EDE5F8; padding:56px 0 48px; } .insta-head { text-align:center; margin-bottom:36px; } .insta-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } .insta-title { font-family:'Playfair Display',serif !important; font-size:clamp(30.55px,4.36vw,43.64px); font-weight:600; color:#111; margin-bottom:6px; } .insta-handle { font-size:14.18px; color:var(--lav); font-weight:500; } .insta-slider-wrap { position:relative; overflow:hidden; } .insta-slider-track { display:flex; gap:12px; animation: instaScroll 22s linear infinite; width:max-content; } .insta-slider-wrap:hover .insta-slider-track { animation-play-state:paused; } @keyframes instaScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } .insta-slide { width:220px; height:260px; flex-shrink:0; border-radius:10px; overflow:hidden; position:relative; cursor:pointer; transition:transform .25s, box-shadow .25s; } .insta-slide:hover { transform:scale(1.03); box-shadow:0 10px 28px rgba(74,45,130,.2); } .insta-slide:hover .insta-slide-ov { opacity:1; } .insta-slide-bg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:56.73px; } .insta-slide-ov { position:absolute; inset:0; background:rgba(74,45,130,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; } .insta-slide-ov svg { color:white; } .insta-cta { text-align:center; margin-top:32px; } .insta-follow-btn { display:inline-flex; align-items:center; gap:8px; background:var(--lav); color:white; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:13px 32px; border-radius:3px; text-decoration:none; transition:background .2s; } .insta-follow-btn:hover { background:var(--deep); color:#fff; } @media(max-width:600px){ .insta-slide { width:160px; height:200px; font-size:41.45px; } } .ftopcat-in { max-width:1300px; margin:0 auto; padding:0 20px; } .ftopcat-label { font-family:'Poppins',sans-serif; font-size:10.91px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.55); display:block; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); width:100%; } .ftopcat-pills { display:flex; flex-wrap:wrap; gap:8px; } .fpill:hover { background:var(--lav); color:#fff !important; border-color:var(--lav); } .fpill.fpill-active { background:var(--lav); color:#fff !important; border-color:var(--lav); font-weight:600; } /* ══════════════════════════════════════════ FOOTER — ORIGINAL DARK VERSION (restored) ══════════════════════════════════════════ */ footer { background:#0f0820; color:rgba(255,255,255,.6); } .ft { max-width:1420px; margin:0 auto; padding:56px 24px 40px; display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 0.9fr 1fr; gap:36px; } @media(max-width:900px){ .ft { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px 20px; padding:36px 16px 28px; } /* 2-column on mobile — exactly as the HTML mockup */ .fbl { grid-column:auto; } .fbl .flogo-img { height:40px; } .fbl .ftag { font-size:12px; margin-top:8px; } .fbl .fdesc { font-size:13.09px; margin-top:10px; } .fbl .fsoc-row { margin-top:14px; } /* natural DOM order on mobile = Brand|Company / Quick Shop|Legal / Customer Care|Connect */ } .fct { font-family:'Poppins',sans-serif; font-size:13.09px; font-weight:900; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:18px; padding-bottom:13px; border-bottom:2px solid rgba(255,255,255,.15); display:block; width:100%; } .flinks { display:flex; flex-direction:column; } .flink { font-size:14.73px; color:rgba(255,255,255,.6); font-weight:300; text-decoration:none; padding:8px 6px; display:block; border-bottom:1px solid rgba(255,255,255,.05); transition:background .18s, color .18s, padding-left .18s; font-family:'Poppins',sans-serif; border-radius:3px; } .flink:hover { color:#fff !important; background:var(--lav); padding-left:12px; border-bottom-color:transparent; } /* Brand col */ .fbl {} .flogo-img { height:48px; width:auto; max-width:200px; object-fit:contain; align-self:flex-start; margin-bottom:16px; display:block; } .ftag { font-size:9.82px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:block; } .fdesc { font-size:14.18px; line-height:1.7; color:rgba(255,255,255,.45); margin-bottom:18px; } .fsoc-row { display:flex; gap:8px; } .fsoc { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); text-decoration:none; font-size:15.27px; transition:background .18s, color .18s; } .fsoc:hover { background:var(--lav); color:#fff; } /* We Accept */ /* Connect col */ .fcon-item { display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; font-size:14.18px; color:rgba(255,255,255,.6); } .fcon-item svg { flex-shrink:0; margin-top:2px; } .fcon-item a { color:rgba(255,255,255,.6); text-decoration:none; transition:color .18s; } .fcon-item a:hover { color:var(--gold); } /* Top categories */ .ftopcat { border-top:1px solid rgba(255,255,255,.07); padding:28px 24px; } .ftopcat-in { max-width:1420px; margin:0 auto; } .ftopcat-label { font-family:'Poppins',sans-serif; font-size:10.91px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.55); display:block; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); width:100%; } .ftopcat-pills { display:flex; flex-wrap:wrap; gap:8px; } .fpill { display:inline-block; padding:6px 14px; border:1px solid rgba(255,255,255,.15); border-radius:20px; font-size:14.18px; font-weight:400; color:rgba(255,255,255,.65); text-decoration:none; transition:all .18s; font-family:'Poppins',sans-serif; } .fpill:hover { background:var(--lav); color:#fff !important; border-color:var(--lav); } .fpill.fpill-active { background:var(--lav); color:#fff !important; border-color:var(--lav); font-weight:600; } /* Sitemap */ .fsmap { display:flex; flex-wrap:wrap; gap:4px 0; padding:14px 24px; max-width:1420px; margin:0 auto; border-top:1px solid rgba(255,255,255,.06); } .fsite-link { font-size:13.09px; color:rgba(255,255,255,.4); text-decoration:none; font-family:'Poppins',sans-serif; transition:color .18s; padding:2px 4px; border-radius:2px; } .fsite-link:hover { color:#fff !important; background:var(--lav); } .fsite-sep { color:rgba(255,255,255,.15); padding:0 8px; font-size:10.91px; } /* Footer bar */ .fbar { background:rgba(0,0,0,.3); padding:14px 24px; text-align:center; } .fbar-txt { font-size:12.55px; color:rgba(255,255,255,.3); font-family:'Poppins',sans-serif; } /* Reviews — deep purple band: white + gold on purple, pure black on white cards */ .rvw-sec .rvw-eyebrow { color:var(--glight) !important; } .rvw-sec .rvw-title { color:#fff !important; } .rvw-sec .rvw-sub { color:rgba(255,255,255,.82) !important; } .rvw-sec .rvw-line { background:var(--glight) !important; } .rvw-sec .rvw-card .rvw-name { color:#111 !important; font-weight:700; } .rvw-sec .rvw-card .rvw-meta-sub { color:#888 !important; } .rvw-sec .rvw-card .rvw-text { color:#111 !important; } /* ════════════════════════════════════════════════════ MOBILE HEADER (≤900px) — 2 lines Line 1: Logo | Search bar | WhatsApp Line 2: ☰ Categories | Wishlist | Account | Cart | Lang ════════════════════════════════════════════════════ */ @media(max-width:900px){ .hdrp, .hdrp-subbar { display:none !important; } .mob-hdr { display:block !important; } } .mob-hdr { display:none; background:#fff; border-bottom:1px solid #e8e8e8; position:sticky; top:0; z-index:900; } /* Line 1: Logo | Search | WhatsApp */ .mob-l1 { display:flex; align-items:center; gap:8px; padding:8px 14px; height:52px; } .mob-logo { flex-shrink:0; } .mob-logo img { height:28px; width:auto; display:block; } /* Search bar (full width) */ .mob-search-wrap { flex:1; display:flex; align-items:center; border:1px solid #ddd; border-radius:4px; background:#f8f8f8; height:36px; overflow:hidden; transition:border-color .2s; } .mob-search-wrap:focus-within { border-color:var(--lav); } .mob-search-inp { flex:1; border:none; outline:none; background:transparent; font-family:'Poppins',sans-serif; font-size:13.09px; color:#111; padding:0 8px; } .mob-search-inp::placeholder { color:#aaa; font-size:12.55px; } .mob-search-btn { width:34px; height:36px; flex-shrink:0; background:#111; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s; } .mob-search-btn:hover { background:var(--lav); } /* Voice and image search buttons */ .mob-srch-icon { width:30px; height:36px; flex-shrink:0; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#888; transition:color .2s; border-left:1px solid #eee; } .mob-srch-icon:hover { color:var(--lav); } .mob-srch-icon.listening { color:#e00; animation:pulse .8s infinite; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} } /* WhatsApp button */ .mob-wa { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#25D366; border-radius:50%; color:#fff; text-decoration:none; transition:background .2s; } .mob-wa:hover { background:#128C7E; } /* Line 2: Menu + Icons */ .mob-l2 { display:flex; align-items:center; justify-content:space-between; padding:0 14px; height:38px; border-top:1px solid #f0f0f0; } .mob-menu-btn { display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#111; padding:0; } .mob-l2-icons { display:flex; align-items:center; gap:0; } .mob-ico { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:#111; text-decoration:none; transition:background .18s; position:relative; } .mob-ico:hover { background:rgba(123,94,167,.09); color:var(--lav); } .mob-cbadge { position:absolute; top:1px; right:1px; width:15px; height:15px; border-radius:50%; background:var(--lav); color:#fff; font-size:8.73px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; } .mob-lang { font-family:'Poppins',sans-serif; font-size:10.91px; font-weight:700; letter-spacing:.8px; color:#111; border:1px solid #ddd; border-radius:3px; padding:3px 6px; background:#fff; cursor:pointer; transition:background .18s; } .mob-lang:hover { background:var(--lav); color:#fff; border-color:var(--lav); } /* ── Desktop search enhancements ── */ /* Already has .hdr-search-bar — add voice + image icons */ .hdr-search-icon { width:36px; height:38px; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#888; transition:color .18s; border-left:1px solid #e0e0e0; } .hdr-search-icon:hover { color:var(--lav); } .hdr-search-icon.listening { color:#e00; animation:pulse .8s infinite; } /* ═══ MOBILE HEADER OVERRIDE — 2 lines ═══ */ @media(max-width:900px){ .mob-hdr{display:block!important;} .hdrp,.hdrp-subbar{display:none!important;} } @media(min-width:901px){ .mob-hdr{display:none!important;} } .mob-hdr{background:#fff;border-bottom:1px solid #e8e8e8;position:sticky;top:34px;z-index:900;} .mob-hdr-l1{display:flex;align-items:center;gap:10px;padding:8px 14px;height:52px;} .mob-logo img{height:30px;width:auto;display:block;} .mob-search-wrap{flex:1;display:flex;align-items:center;background:#f5f5f5;border:1px solid #e8e8e8;border-radius:4px;height:36px;overflow:hidden;transition:border-color .2s;min-width:0;} .mob-search-wrap:focus-within{border-color:var(--lav);} .mob-search-input{flex:1;border:none;outline:none;background:transparent;font-family:'Poppins',sans-serif;font-size:13.09px;color:#111;padding:0 8px;min-width:0;} .mob-search-input::placeholder{color:#aaa;font-size:12px;} .mob-srch-btn{width:30px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:#666;transition:color .18s;flex-shrink:0;} .mob-srch-btn:hover,.mob-srch-btn:focus{color:var(--lav);} .mob-srch-btn.voice-active{color:#e00!important;} .mob-srch-div{width:1px;height:18px;background:#ddd;flex-shrink:0;} .mob-wa{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;color:#25D366;text-decoration:none;} .mob-hdr-l2{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:40px;border-top:1px solid #f0f0f0;} .mob-menu-btn{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;color:#111;text-transform:uppercase;} .mob-icons{display:flex;align-items:center;gap:2px;} .mob-ico{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#111;text-decoration:none;border-radius:50%;transition:background .18s;position:relative;} .mob-ico:hover{background:rgba(123,94,167,.1);color:var(--lav);} .mob-cart-badge{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:var(--lav);color:#fff;font-size:8.73px;font-weight:700;display:flex;align-items:center;justify-content:center;} .mob-lang-btn{font-family:'Poppins',sans-serif;font-size:10.91px;font-weight:700;letter-spacing:.8px;color:#111;background:none;border:1px solid #ddd;border-radius:3px;padding:3px 7px;cursor:pointer;} .mob-lang-btn:hover{background:var(--lav);color:#fff;border-color:var(--lav);} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}} /* Desktop search extras */ .hdr-srch-ico { width:30px; height:38px; display:flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; color:#888; transition:color .18s; flex-shrink:0; } .hdr-srch-ico:hover{color:var(--lav);} .hdr-srch-ico.voice-active{color:#e00!important;animation:pulse .7s infinite;} .hdr-srch-div{width:1px;height:18px;background:#ddd;flex-shrink:0;} /* Single line mobile header adjustments */ .mob-hdr-l2 { height:50px; padding:0 12px; } .mob-search-panel { display:none; padding:10px 12px; background:#fff; border-top:1px solid #eee; } .mob-search-panel.open { display:block; } .mob-search-lang-sel { appearance:none; -webkit-appearance:none; } /* ── Language dropdown ── */ .lang-wrap { position:relative; } .lang-drop { display:none; position:absolute; right:0; bottom:calc(100% + 6px); background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; box-shadow:0 -8px 24px rgba(0,0,0,.12); min-width:170px; z-index:9999; } .lang-drop.open { display:block; } .lang-opt { display:flex; align-items:center; gap:8px; padding:11px 14px; font-family:'Poppins',sans-serif; font-size:14.18px; font-weight:400; color:#111; text-decoration:none; transition:background .15s; cursor:pointer; border:none; background:none; width:100%; text-align:left; } .lang-opt:hover { background:rgba(123,94,167,.08); color:var(--lav); } .lang-opt.active { background:rgba(123,94,167,.1); font-weight:700; color:var(--lav); } .lang-flag { font-size:16.36px; flex-shrink:0; } /* Desktop lang drop goes DOWN */ .hda-lang .lang-drop { bottom:auto; top:calc(100% + 6px); right:0; box-shadow:0 8px 24px rgba(0,0,0,.12); } /* ── Review card — Screenshot 2 style ── */ .rvw-card { background:#fff; border-radius:14px; overflow:hidden; border:1px solid rgba(123,94,167,.1); box-shadow:0 4px 20px rgba(0,0,0,.07); flex-shrink:0; width:300px; } .rvw-card-img { background:linear-gradient(135deg,#C8B5F5,#B8A4EE); height:160px; display:flex; align-items:center; justify-content:center; font-size:61.09px; } .rvw-card-body { padding:16px; } .rvw-card .rvw-stars { font-size:18.55px; color:var(--gold); margin-bottom:8px; } .rvw-card .rvw-text { font-style:italic; font-size:14.73px; line-height:1.7; color:#333; margin-bottom:12px; } .rvw-hr { border:none; border-top:1px solid #f0f0f0; margin:12px 0; } .rvw-card-footer { display:flex; align-items:center; gap:10px; } .rvw-card .rvw-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14.18px; font-weight:700; color:#fff; flex-shrink:0; font-family:'Poppins',sans-serif; } .rvw-card-meta { flex:1; min-width:0; } .rvw-card .rvw-name { font-size:14.18px; font-weight:700; color:#111; font-family:'Poppins',sans-serif; } .rvw-card .rvw-meta-sub { font-size:12px; color:#aaa; font-family:'Poppins',sans-serif; } .rvw-platform-badge { flex-shrink:0; background:rgba(123,94,167,.12); color:var(--lav); font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; font-family:'Poppins',sans-serif; } /* ── Review slider: 4 desktop / 2 mobile ── */ .rvw-slider-wrap { overflow:hidden; } .rvw-slider { display:flex; gap:16px; transition:transform .4s cubic-bezier(.4,0,.2,1); } .rvw-card { flex-shrink:0; width:calc(25% - 12px); background:#fff; border-radius:14px; overflow:hidden; border:1px solid rgba(123,94,167,.12); box-shadow:0 4px 20px rgba(0,0,0,.07); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .rvw-card:hover{ transform:translateY(-4px); border-color:var(--lav); box-shadow:0 12px 32px rgba(74,45,130,.22); } @media(max-width:900px){ .rvw-card { width:calc(50% - 8px); } } @media(max-width:480px){ .rvw-card { width:calc(50% - 6px); } } /* Review section text colors — visible on lavender */ .rvw-sec .rvw-eyebrow { color:var(--glight) !important; font-family:'Poppins',sans-serif !important; } .rvw-sec .rvw-title { color:#fff !important; font-family:'Playfair Display',serif !important; } .rvw-sec .rvw-sub { color:rgba(255,255,255,.82) !important; font-family:'Poppins',sans-serif !important; } .rvw-sec .rvw-stat-label { color:rgba(255,255,255,.72) !important; font-family:'Poppins',sans-serif !important; } .rvw-sec .rvw-stat-num { color:var(--glight) !important; font-family:'Playfair Display',serif !important; font-weight:700; } .rvw-sec .rvw-stat-stars { color:var(--glight) !important; } .rvw-sec .rvw-stat-count { color:rgba(255,255,255,.66) !important; font-family:'Poppins',sans-serif !important; } .rvw-tab { font-family:'Poppins',sans-serif !important; font-size:12px !important; font-weight:700 !important; letter-spacing:1px !important; } .rvw-card .rvw-text { font-family:'Poppins',sans-serif !important; color:#111 !important; } .rvw-card .rvw-name { font-family:'Poppins',sans-serif !important; font-weight:700 !important; color:#111 !important; } .rvw-card .rvw-meta-sub { font-family:'Poppins',sans-serif !important; } .rvw-platform-badge { font-family:'Poppins',sans-serif !important; } .rvw-card .rvw-stars { font-family:'Poppins',sans-serif !important; } .rvw-card:hover .rvw-name { color:var(--lav) !important; } /* --- rvw-fix --- */ .rvw-card{ width:100% !important; } @media(min-width:640px){ .rvw-card{ width:calc(50% - 8px) !important; } } @media(min-width:1000px){ .rvw-card{ width:calc(33.333% - 10.67px) !important; } } .rvw-card-footer{ flex-wrap:nowrap; align-items:center; } .rvw-card-meta{ flex:1; min-width:0; } .rvw-meta-sub{ white-space:normal; } .rvw-platform-badge{ display:none !important; } /* --- desk-lang --- */ #desk-lang-wrap{position:relative;display:flex;align-items:center;margin-right:6px;} .desk-lang-btn{background:none;border:1px solid #e3dcef;border-radius:30px;cursor:pointer;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;color:#12091C;padding:7px 12px;white-space:nowrap;line-height:1;} .desk-lang-btn:hover{border-color:#7B5EA7;color:#7B5EA7;} #desk-lang-drop{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid #ece5f6;border-radius:14px;box-shadow:0 18px 44px rgba(18,9,28,.18);min-width:210px;max-height:360px;overflow-y:auto;z-index:99980;display:none;padding:6px;} #desk-lang-drop.open{display:block;} #desk-lang-drop .lang-opt{display:block;width:100%;text-align:left;padding:9px 14px;background:none;border:none;font-family:'Poppins',sans-serif;font-size:13px;color:#2a2235;cursor:pointer;border-radius:8px;} #desk-lang-drop .lang-opt:hover{background:#f6f1fc;color:#7B5EA7;} #desk-lang-drop .lang-opt.active{color:#7B5EA7;font-weight:600;} #desk-lang-drop .lang-flag{margin-right:8px;} @media(max-width:1024px){#desk-lang-wrap{display:none;}} /* --- footerbar --- */ footer .fsoc-row{display:flex!important;flex-wrap:wrap;gap:10px!important;align-items:center;justify-content:flex-start!important;margin-top:16px!important;padding-left:6px;}footer .fsoc{flex:0 0 auto;} .fbar{display:flex!important;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;} .fbar-pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .fbar-pay .fbar-pay-l{font-size:11px;color:#9b8fc0;font-weight:600;letter-spacing:.6px;text-transform:uppercase;} .fbar-pay .fpb2{font-size:11px;padding:4px 9px;} @media(max-width:640px){.fbar{justify-content:center;text-align:center;}.fbar-pay{justify-content:center;}} /* --- nlfix --- */ @media(max-width:640px){#vbx-nl{grid-template-columns:1fr!important;max-width:380px;max-height:90vh;overflow-y:auto;}#vbx-nl .vbx-nl-r{display:block!important;padding:18px 22px 24px;}#vbx-nl .vbx-nl-r h4{margin-bottom:12px;}#vbx-nl .vbx-bs{grid-template-columns:1fr 1fr;gap:9px;}} /* ===== Round-2 header refinements (Vastrangam) ===== */ #desk-lang-wrap{display:none !important;} /* remove duplicate language after logo */ .hdr-search-bar{flex:0 1 470px !important;min-width:300px !important;} .hdr-search-input{padding:0 12px !important;font-size:13.5px !important;} .hdr-srch-lang{border:none;border-right:1px solid #eee;outline:none;background:#f8f7ff;font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;color:var(--lav);height:38px;padding:0 10px;cursor:pointer;flex-shrink:0;border-radius:5px 0 0 5px;text-align-last:center;} .hdr-srch-ico{height:38px;display:flex;align-items:center;flex-shrink:0;} .hdrp-actions{gap:8px;} /* subbar: categories scroll left, WhatsApp + language grouped at the right */ .hsb-right{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto;padding-left:18px;} .hsb-right > a{margin-left:0 !important;} .hsb-right #subcat-lang{margin-left:0 !important;height:30px;} /* ===== Round-3 refinements ===== */ /* Search bar: smaller, balanced, everything vertically centred */ .hdr-search-bar{flex:0 0 320px !important;min-width:0 !important;height:40px !important;border-radius:8px !important;align-items:center !important;} .hdr-search-input{padding:0 12px !important;font-size:13px !important;height:40px !important;line-height:40px !important;} .hdr-srch-lang{height:40px !important;line-height:40px !important;font-size:11px !important;padding:0 10px !important;text-align-last:center;border-radius:8px 0 0 8px;} .hdr-srch-ico{height:40px !important;width:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .hdr-search-btn{height:40px !important;width:44px !important;flex-shrink:0;} .hdrp-actions{gap:12px !important;} /* Sub-bar: WhatsApp + language vertically centred & aligned with categories */ .hdrp-subbar-inner{align-items:center !important;} .hsb-right{display:flex !important;align-items:center !important;gap:14px !important;flex-shrink:0;margin-left:auto;padding-left:20px;} .hsb-right > a{display:inline-flex !important;align-items:center !important;height:32px !important;margin-left:0 !important;padding:0 12px !important;} .hsb-right #subcat-lang{height:32px !important;margin-left:0 !important;} /* ===== Round-4: search bar — clean centred pill ===== */ .hdrp-actions{align-items:center !important;} .hdr-search-bar{display:flex !important;align-items:center !important;height:42px !important;overflow:hidden !important;border-radius:21px !important;border:1px solid #e3dcec !important;flex:0 0 340px !important;min-width:0 !important;background:#fff !important;} .hdr-search-bar > *{align-self:center !important;margin:0 !important;} .hdr-srch-lang{height:42px !important;border:0 !important;border-right:1px solid #ece5f6 !important;background:#f8f7ff !important;padding:0 8px 0 16px !important;font-size:11px !important;font-weight:700 !important;color:var(--lav) !important;text-align-last:center;cursor:pointer;} .hdr-search-input{height:42px !important;line-height:42px !important;padding:0 14px !important;font-size:13.5px !important;border:0 !important;background:transparent !important;color:#1A1025 !important;} .hdr-srch-ico{height:42px !important;width:34px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;background:transparent !important;border:0 !important;color:var(--muted) !important;} .hdr-srch-ico svg,.hdr-search-btn svg{display:block !important;} .hdr-srch-div{height:20px !important;width:1px !important;background:#e3dcec !important;align-self:center !important;} .hdr-search-btn{height:42px !important;width:48px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border:0 !important;} /* ===== Round-5: Google Translate banner hidden + subbar align ===== */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate{display:none !important;} body{top:0 !important;position:static !important;} #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip{display:none !important;} .goog-text-highlight{background:none !important;box-shadow:none !important;} #gt-element, .goog-te-gadget{display:none !important;} .hdrp-subbar-inner{align-items:center !important;min-height:44px;} .hsb-right{align-self:center !important;align-items:center !important;} .hsb-right > a, .hsb-right #subcat-lang{display:inline-flex !important;align-items:center !important;height:30px !important;line-height:1 !important;}