:root{ /* Padmora palette v2 — revised after feedback that v1's olive-forward accent read dull and buried the pink. Pink is now the dominant interactive color (buttons/links/icons); green is demoted to a hover- only accent (a "petal → leaf" moment on primary buttons, see .btn-primary:hover below) rather than a base UI color. Sampled the actual logo artwork's petal/leaf tones as a starting point, then darkened/saturated where the raw sample was too light or too muddy for UI duty. --ink stays a neutral dark (readable body text), everything else leans into rose/pink so "pink everywhere" doesn't fight legibility. */ --ivory:#FFF0E6; --ivory-deep:#FCE8D9; --maroon:#AD3B5C; --maroon-deep:#7A2740; --gold:#B87F55; --gold-soft:#D9A97C; --teal:#7EA043; --blush:#F2B9BB; --ink:#3D2229; --ink-soft:#8C5A63; --white:#FFFFFF; --shadow:0 10px 30px rgba(61,34,41,0.12); --font-display:'Marcellus', serif; --font-body:'Jost', sans-serif; /* Reused everywhere the brand's outlined-lotus motif appears (page banners, the hero separator, etc.) so every instance stays visually identical. */ --lotus-outline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23F2B9BB' stroke-width='1.1'%3E%3Cpath d='M20 34 C16 26 15 17 20 6 C25 17 24 26 20 34 Z'/%3E%3Cpath d='M20 32 C12 27 8 20 10 12 C17 15 20 22 20 32 Z'/%3E%3Cpath d='M20 32 C28 27 32 20 30 12 C23 15 20 22 20 32 Z'/%3E%3Cpath d='M20 30 C8 27 3 19 6 10 C14 14 19 21 20 30 Z' opacity='0.6'/%3E%3Cpath d='M20 30 C32 27 37 19 34 10 C26 14 21 21 20 30 Z' opacity='0.6'/%3E%3C/svg%3E"); } *{box-sizing:border-box;margin:0;padding:0;} /* Responsiveness safety net — every genuinely-scrollable-on-purpose element (category/reel rails, admin tables) scrolls on its OWN axis via its own overflow-x:auto, so clipping it at the document root here never hides anything intentional; it only ever catches an accidental overflow. min-height uses the dvh/svh pair so iOS Safari's address-bar show/hide doesn't leave a gap or clip content the way a bare 100vh does — vh is a safe fallback for browsers that don't know dvh yet (an unsupported value is ignored, not applied, so this is a pure upgrade, no regression). */ html{overflow-x:hidden;} body{font-family:var(--font-body);background:var(--ivory);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} input,select{font-family:inherit;} ul{list-style:none;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--maroon-deep);} .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;} .container{max-width:1240px;margin:0 auto;padding:0 28px;width:100%;} main{flex:1;animation:pageFadeIn .6s ease;} :focus-visible{outline:2px solid var(--teal);outline-offset:3px;} .zari-border{height:14px;position:relative;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7c4-7 10-7 14 0s10 7 14 0 10-7 14 0 10 7 14 0' fill='none' stroke='%23B87F55' stroke-width='1.1' opacity='0.75'/%3E%3Cg fill='none' stroke='%23B87F55' stroke-width='1'%3E%3Cpath d='M7 10.3 C4.3 9 4.3 5 7 3.7 C9.7 5 9.7 9 7 10.3 Z'/%3E%3Cpath d='M7 7 L7 10.3 M7 7 L7 3.7' opacity='0.55'/%3E%3Cpath d='M21 10.3 C18.3 9 18.3 5 21 3.7 C23.7 5 23.7 9 21 10.3 Z'/%3E%3Cpath d='M35 10.3 C32.3 9 32.3 5 35 3.7 C37.7 5 37.7 9 35 10.3 Z'/%3E%3Cpath d='M49 10.3 C46.3 9 46.3 5 49 3.7 C51.7 5 51.7 9 49 10.3 Z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat-x;background-size:56px 14px;background-position:center;opacity:.85;} .zari-border::after{content:'';position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg, transparent, rgba(255,255,255,0.65), transparent);animation:zariShine 4s ease-in-out infinite;} /* ---------- Decorative lotus-trail side borders (wide screens only) ---------- */ body::before, body::after{ content:''; position:fixed; top:0; bottom:0; width:22px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='70' viewBox='0 0 22 70'%3E%3Cpath d='M11 26 C9.5 20 9 14.5 11 10 C13 14.5 12.5 20 11 26 Z' fill='%23B87F55' fill-opacity='0.16' stroke='%23B87F55' stroke-width='0.7' opacity='0.65'/%3E%3Cpath d='M11 25 C7.8 21.5 6.3 17.5 6.8 13.5 C10 16.3 11 20 11 25 Z' fill='%23B87F55' fill-opacity='0.13' stroke='%23B87F55' stroke-width='0.6' opacity='0.55'/%3E%3Cpath d='M11 25 C14.2 21.5 15.7 17.5 15.2 13.5 C12 16.3 11 20 11 25 Z' fill='%23B87F55' fill-opacity='0.13' stroke='%23B87F55' stroke-width='0.6' opacity='0.55'/%3E%3Cpath d='M10.6 24 C7.2 22 5 19.3 5.3 16.3 C8.1 17.9 9.9 20.6 10.6 24 Z' fill='%23B87F55' fill-opacity='0.1' stroke='%23B87F55' stroke-width='0.5' opacity='0.45'/%3E%3Cpath d='M11.4 24 C14.8 22 17 19.3 16.7 16.3 C13.9 17.9 12.1 20.6 11.4 24 Z' fill='%23B87F55' fill-opacity='0.1' stroke='%23B87F55' stroke-width='0.5' opacity='0.45'/%3E%3Cpath d='M11 22.5 C9.4 21.2 10 19.4 11 19.4 C12 19.4 12.6 21.2 11 22.5 Z' fill='%23AD3B5C' fill-opacity='0.5' opacity='0.5'/%3E%3Ccircle cx='11' cy='27.2' r='0.9' fill='%23B87F55' opacity='0.5'/%3E%3Cpath d='M11 28 C9.3 36 12.7 42 11 50' fill='none' stroke='%23B87F55' stroke-width='0.5' opacity='0.25'/%3E%3Ccircle cx='11' cy='52' r='1' fill='%23B87F55' opacity='0.35'/%3E%3Ccircle cx='11.5' cy='61' r='0.6' fill='%23AD3B5C' opacity='0.3'/%3E%3C/svg%3E"); background-repeat:repeat-y; background-position:top center; pointer-events:none; opacity:0; z-index:5; animation:embFadeIn 1.2s ease forwards, embDrift 46s linear infinite; animation-delay:.2s, 1.4s; } body::before{left:0;} body::after{right:0;transform:scaleX(-1);} @media (max-width:1360px){ body::before, body::after{ display:none; } } /* The border is viewport-fixed, so it would otherwise draw over the footer as it scrolls into view — the footer's own opaque background sits above it (see z-index below) so the lotus trail stops at the footer's edge. */ /* ---------- Buffer / loading bar (shown during API calls, styled like a moving zari thread) ---------- */ .loader-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;overflow:hidden;opacity:0;transition:opacity .2s ease;pointer-events:none;} .loader-bar.active{opacity:1;} .loader-bar span{position:absolute;top:0;left:0;height:100%;width:26%;background:linear-gradient(90deg, transparent, var(--gold-soft), var(--gold), var(--maroon), transparent);animation:loomWeave 1s linear infinite;} /* ---------- Inline spinner (used in loading states across pages) ---------- */ .zari-spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid rgba(173,59,92,0.15);border-top-color:var(--maroon);animation:spin .7s linear infinite;vertical-align:middle;margin-right:10px;} .loading-state{display:flex;align-items:center;justify-content:center;gap:2px;padding:30px 0;color:var(--ink-soft);font-size:13.5px;} /* ---------- Hover / interaction animations ---------- */ .btn{position:relative;overflow:hidden;} .btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent);transform:skewX(-15deg);transition:left .55s ease;z-index:2;} .btn:hover::after{left:130%;} .btn:hover{transform:translateY(-2px);} .btn-outline:hover::after{background:linear-gradient(110deg, transparent, rgba(173,59,92,0.12), transparent);} /* Two small two-line lotus buds bloom open on opposite corners (top-right / bottom-left) behind the label on hover, underneath the shine sweep. Both live on one ::before so a single scale animation makes them bloom outward from the button's center together. Stroke is cream/ivory at high opacity — primary buttons hover to green (see .btn-primary:hover), so the buds need to read clearly against that, not just against the resting pink. Sized up from the original 20px for visibility. */ .btn::before{content:'';position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF6EF' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF6EF' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E"); background-repeat:no-repeat, no-repeat; background-position:calc(100% - 8px) 5px, 8px calc(100% - 5px); background-size:26px 26px, 26px 26px; opacity:0;transform:scale(.35) rotate(-20deg);transform-origin:center; transition:opacity .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0;} .btn:hover::before{opacity:.9;transform:scale(1) rotate(0deg);} .btn-gold::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2740' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A2740' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 21 C6 17 5 9 12 2'/%3E%3Cpath d='M12 21 C18 17 19 9 12 2'/%3E%3C/svg%3E");} .btn-gold:hover::before{opacity:.65;} .product-card{transition:box-shadow .3s ease, transform .3s ease;} .product-media{transition:transform .5s ease;} .product-card:hover .product-media{transform:scale(1.055);} .wishlist-toggle{transition:transform .25s ease, background .25s ease, border-color .25s ease;} .wishlist-toggle:hover{transform:scale(1.12);} .wishlist-toggle:hover svg{animation:heartBeat .7s ease;} .wishlist-toggle.active{background:var(--blush);border:2px solid var(--maroon);} .wishlist-toggle.active svg{animation:heartPop .35s ease;} .cat-item{transition:transform .3s ease;} .cat-swatch{transition:transform .35s ease, box-shadow .35s ease;} .cat-item:hover .cat-swatch{transform:scale(1.07) rotate(-4deg);box-shadow:var(--shadow);} .swatch-dot{transition:transform .2s ease, border-color .2s ease;} .swatch-dot:hover{transform:scale(1.16);} .icon-btn{transition:background .2s ease, transform .2s ease;} .icon-btn:hover{transform:translateY(-2px);} .badge-count{transition:transform .2s ease;} .icon-btn:hover .badge-count{transform:scale(1.15);} .main-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s ease;} .main-nav a.active::after{width:100%;} .main-nav a:hover::after{width:100%;} .footer-grid ul li a{transition:color .2s ease, padding-left .2s ease;display:inline-block;} .footer-grid ul li a:hover{color:var(--gold-soft);padding-left:4px;} .product-badge.sale,.product-badge.new{animation:badgePulse 2.4s ease-in-out infinite;} .occasion-card{transition:transform .4s ease;} .occasion-card:hover{transform:scale(1.02);} .occasion-card::before{transition:background .4s ease;} .weave-card,.trousseau-card,.authenticity-card{transition:transform .3s ease, box-shadow .3s ease;} .weave-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} @keyframes pageFadeIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} } @keyframes embFadeIn{ from{opacity:0;} to{opacity:0.9;} } @keyframes embDrift{ from{background-position:top center;} to{background-position:top -280px center;} } @keyframes zariShine{ 0%{left:-40%;} 55%{left:120%;} 100%{left:120%;} } @keyframes loomWeave{ from{transform:translateX(-140%);} to{transform:translateX(480%);} } @keyframes spin{ to{transform:rotate(360deg);} } @keyframes heartBeat{ 0%,100%{transform:scale(1);} 30%{transform:scale(1.25);} 50%{transform:scale(0.95);} 70%{transform:scale(1.15);} } @keyframes heartPop{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} } @keyframes badgePulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;} } /* Topbar */ .topbar{background:var(--maroon-deep);color:var(--ivory-deep);font-size:12.5px;padding:8px 0;text-align:center;} /* Header */ .site-header{position:sticky;top:0;z-index:60;background:rgba(250,245,236,0.96);backdrop-filter:blur(6px);border-bottom:1px solid rgba(173,59,92,0.12);} .header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1240px;margin:0 auto;gap:24px;} .logo{font-family:var(--font-display);font-size:26px;color:var(--maroon);letter-spacing:.03em;display:flex;align-items:baseline;gap:9px;} .logo-mark{height:38px;width:auto;align-self:center;flex-shrink:0;border-radius:3px;} .admin-view-store{font-size:12.5px;color:var(--ink-soft);border:1px solid rgba(173,59,92,0.18);border-radius:20px;padding:7px 16px;transition:border-color .15s,color .15s;} .admin-view-store:hover{color:var(--maroon);border-color:var(--maroon);} .logo span.by-yashi{color:var(--gold);font-size:11px;font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;} @media (max-width:420px){ .logo span.by-yashi{display:none;} } @media (max-width:480px){ .logo-mark{height:32px;} } .main-nav{display:flex;gap:26px;} .main-nav a{font-size:14px;letter-spacing:.03em;color:var(--ink);position:relative;padding:6px 0;} .main-nav a.active,.main-nav a:hover{color:var(--maroon);} .main-nav a.active::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);} .header-actions{display:flex;align-items:center;gap:4px;} .icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;position:relative;transition:background .2s ease;} .icon-btn:hover{background:var(--blush);} .icon-btn svg{width:19px;height:19px;stroke:var(--maroon-deep);} .badge-count{position:absolute;top:-2px;right:-2px;background:var(--gold);color:var(--maroon-deep);font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .account-chip{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid rgba(173,59,92,0.2);} .hamburger{display:none;width:38px;height:38px;align-items:center;justify-content:center;} .hamburger svg{width:22px;height:22px;stroke:var(--maroon-deep);} .mobile-nav{display:none;flex-direction:column;padding:0 28px 20px;gap:14px;} .mobile-nav a{font-size:14px;} /* Header, narrow phones (confirmed via layout audit: hamburger + logo + search/account/wishlist/cart icons genuinely don't fit side by side under ~400px at the CSS's original sizes — the icons were shrinking/deforming instead of the row reflowing). Icons keep flex-shrink:0 so they never distort; the logo and the logged-in account name shrink instead, since those are the parts that can lose size without losing function. Nothing here is hidden or removed — same icons, same links, same click targets, just smaller on the narrowest phones. */ .hamburger,.icon-btn,.logo-mark{flex-shrink:0;} .account-chip{max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} @media (max-width:480px){ .header-inner{gap:8px;} .header-actions{gap:2px;} .icon-btn,.hamburger{width:34px;height:34px;} .logo{font-size:20px;gap:6px;} .account-chip{max-width:70px;padding:6px 9px;gap:5px;font-size:12px;} } @media (max-width:360px){ .header-inner{padding:14px 10px;} .icon-btn,.hamburger{width:30px;height:30px;} .icon-btn svg,.hamburger svg{width:17px;height:17px;} .logo{font-size:17px;} .logo-mark{height:26px;} /* Icon-only account pill on the very narrowest phones — the SVG has its own width/height attributes (unaffected by font-size), only the name text collapses, so the button still works exactly the same, just without a name label there's no room for. */ .account-chip{font-size:0;max-width:none;padding:6px;gap:0;} } /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:2px;transition:all .25s ease;} .btn-primary{background:var(--maroon);color:var(--ivory);} /* Petal → leaf: the one deliberate spot green shows up as the main accent, not a base UI color — pink at rest, green the moment you interact. */ .btn-primary:hover{background:var(--teal);} .btn-outline{border:1px solid var(--maroon);color:var(--maroon);} .btn-outline.wishlisted{background:var(--blush);border:1.5px solid var(--maroon);color:var(--maroon-deep);font-weight:700;} .btn-outline:hover{background:var(--maroon);color:var(--ivory);} .btn-gold{background:var(--gold);color:var(--maroon-deep);} .btn-block{width:100%;} .btn-sm{padding:9px 16px;font-size:11.5px;} .btn[disabled]{opacity:.5;cursor:not-allowed;} /* Page header banner */ .page-banner{background:linear-gradient(120deg,var(--ivory),var(--ivory-deep));padding:48px 0 34px;text-align:center;position:relative;overflow:hidden;} .page-banner .container{position:relative;z-index:1;} .page-banner h1{font-size:34px;} .page-banner p{color:var(--ink-soft);margin-top:10px;font-size:14px;} /* A fuller scatter of outlined lotus blooms — one large one via ::before, five more (varied size/position) layered on ::after — applies to every page that uses .page-banner with this one change. */ .page-banner::before,.page-banner::after{content:'';position:absolute;pointer-events:none;z-index:0;background-repeat:no-repeat;} .page-banner::before{ width:110px;height:110px;left:-18px;top:-16px;opacity:.3;transform:rotate(-14deg); background-image:var(--lotus-outline); background-size:110px 110px; } .page-banner::after{ width:100%;height:100%;right:0;top:0; background-image:var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline),var(--lotus-outline); background-position: right 3% top 8px, right 16% bottom -10px, left 6% bottom -14px, left 22% top 4px, center bottom -6px, right 38% top -12px, left 40% bottom -22px, right 8% bottom 30%, left 12% top 30%; background-size:64px 64px, 46px 46px, 56px 56px, 30px 30px, 38px 38px, 26px 26px, 34px 34px, 42px 42px, 24px 24px; opacity:.24; } @media (max-width:640px){ .page-banner::before,.page-banner::after{ display:none; } } .promo-band{background:linear-gradient(120deg,var(--maroon-deep),var(--maroon) 60%,#D9749A);color:var(--ivory);text-align:center;padding:56px 28px;display:flex;flex-direction:column;align-items:center;} .promo-band h2{color:var(--ivory);font-size:32px;} .promo-band p{color:var(--gold-soft);margin:12px 0 22px;font-size:14px;} .breadcrumb{font-size:12px;color:var(--ink-soft);margin-bottom:10px;} .breadcrumb a:hover{color:var(--maroon);} .section{padding:48px 0;} .section-head{text-align:center;max-width:560px;margin:0 auto 36px;} .section-head h2{font-size:30px;margin-top:8px;} /* Product grid & card (shop / home / product pages) */ .toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;} .result-count{font-size:13.5px;color:var(--ink-soft);} .sort-select{border:1px solid rgba(173,59,92,0.25);padding:9px 14px;border-radius:2px;font-size:13px;background:var(--white);} /* Custom-styled dropdown (used for the shop sort control) */ .custom-select{position:relative;min-width:210px;} .custom-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:1px solid rgba(173,59,92,0.25);padding:10px 14px;border-radius:2px;font-size:13px;background:var(--white);transition:border-color .2s ease;} .custom-select-trigger:hover{border-color:var(--maroon);} .custom-select-trigger svg{width:13px;height:13px;stroke:var(--maroon);flex-shrink:0;transition:transform .25s ease;} .custom-select.open .custom-select-trigger svg{transform:rotate(180deg);} .custom-select.open .custom-select-trigger{border-color:var(--maroon);} .custom-select-menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--white); border-radius:8px;box-shadow:var(--shadow);padding:6px;z-index:45; opacity:0;transform:translateY(-8px);pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .custom-select.open .custom-select-menu{opacity:1;transform:translateY(0);pointer-events:auto;} .custom-select-option{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:11px 13px;font-size:13px;border-radius:5px;color:var(--ink);transition:background .15s ease, color .15s ease;} .custom-select-option:hover{background:var(--ivory);} .custom-select-option.active{color:var(--maroon-deep);font-weight:600;background:var(--blush);} .custom-select-option .check-mark{opacity:0;color:var(--maroon);font-size:12px;} .custom-select-option.active .check-mark{opacity:1;} @media (max-width:560px){ .custom-select{min-width:0;} .custom-select-menu{right:0;left:0;min-width:0;} } /* Order history action buttons */ .order-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center;} .order-action-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:20px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:all .2s ease;border:1.5px solid transparent;} .order-action-btn svg{width:14px;height:14px;flex-shrink:0;} .order-action-btn.track{border-color:var(--teal);color:var(--teal);} .order-action-btn.track:hover{background:var(--teal);color:var(--ivory);transform:translateY(-1px);} .order-action-btn.cancel{border-color:rgba(173,59,92,0.3);color:var(--ink-soft);} .order-action-btn.cancel:hover{border-color:var(--maroon);color:var(--maroon);background:rgba(173,59,92,0.06);} .order-action-btn.return{border-color:var(--gold);color:#8a6a1f;} .order-action-btn.return:hover{background:var(--gold);color:var(--maroon-deep);transform:translateY(-1px);} .order-locked-note{font-size:11.5px;color:var(--ink-soft);font-style:italic;} /* Post-delivery return request panel — expands inline under an order card */ .return-request-panel{margin-top:14px;padding:16px;border:1px solid rgba(201,162,39,0.35);background:rgba(201,162,39,0.06);border-radius:4px;} .return-request-panel h4{font-family:var(--font-body);font-size:14px;font-weight:600;margin:0 0 4px;color:var(--ink);} .return-item-list{margin:14px 0;display:flex;flex-direction:column;gap:8px;} .return-item-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:9px 12px;background:var(--surface,#fff);border:1px solid rgba(173,59,92,0.1);border-radius:4px;cursor:pointer;} .return-item-row input[type="checkbox"]{flex-shrink:0;width:16px;height:16px;accent-color:var(--maroon);} .return-item-name{flex:1;} .return-item-qty{font-size:11.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;} .return-item-qty select{padding:3px 6px;font-size:12px;border-radius:3px;border:1px solid rgba(173,59,92,0.25);} .return-photo-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .return-photo-thumb{width:64px;height:64px;object-fit:cover;border-radius:4px;border:1px solid rgba(173,59,92,0.2);display:block;} .admin-return-photo{width:110px;height:110px;transition:transform .15s ease;} .admin-return-photo:hover{transform:scale(1.04);} /* Product-page "add to bag" quantity stepper (shown once the item is in the bag) */ .cart-control-stepper{border-color:var(--maroon);} .cart-control-stepper button{color:var(--maroon-deep);font-weight:600;} .cart-control-stepper span{font-weight:600;color:var(--maroon-deep);} .shop-layout{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:flex-start;} .shop-layout > *{min-width:0;} .filters{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:22px;position:sticky;top:100px;} .filter-group{border-bottom:1px solid rgba(173,59,92,0.1);padding:16px 0;} .filter-group:first-child{padding-top:0;} .filter-group:last-child{border-bottom:none;} .filter-group h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;color:var(--maroon-deep);font-weight:600;font-family:var(--font-body);} .filter-option{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:5px 0;color:var(--ink-soft);cursor:pointer;} .filter-option input{accent-color:var(--maroon);} .price-range{width:100%;accent-color:var(--maroon);} .clear-filters{font-size:12px;color:var(--teal);margin-top:14px;text-decoration:underline;} .search-page-input{width:100%;border:1px solid rgba(173,59,92,0.25);padding:11px 14px;border-radius:2px;font-size:13.5px;margin-bottom:14px;} .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .product-card{background:var(--white);border-radius:3px;overflow:hidden;position:relative;box-shadow:0 1px 3px rgba(43,26,29,0.06);transition:box-shadow .3s ease, transform .3s ease;} .product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);} .product-media{aspect-ratio:3/4;position:relative;overflow:hidden;background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 24px);} .product-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.35' stroke-width='1'%3E%3Cpath d='M0 15c7-10 14-10 21 0s14 10 21 0'/%3E%3Ccircle cx='10' cy='15' r='1.2' fill='%23ffffff' fill-opacity='0.4' stroke='none'/%3E%3Ccircle cx='31' cy='15' r='1.2' fill='%23ffffff' fill-opacity='0.4' stroke='none'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;} .product-badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:2px;font-weight:600;} .product-badge.sale{background:var(--maroon);color:var(--ivory);} .product-badge.new{background:var(--teal);color:var(--ivory);} .product-badge.bestseller{background:var(--gold);color:var(--maroon-deep);} .wishlist-toggle{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;transition:transform .2s ease, background .2s ease, border-color .2s ease;} .wishlist-toggle:hover{transform:scale(1.1);} .wishlist-toggle svg{width:16px;height:16px;stroke:var(--maroon);fill:none;transition:fill .2s ease, stroke .2s ease;} .wishlist-toggle.active{background:var(--blush);border-color:var(--maroon);} .wishlist-toggle.active svg{fill:#D6336C;stroke:#D6336C;} .quick-add{position:absolute;left:12px;right:12px;bottom:-46px;z-index:2;background:var(--ivory);color:var(--maroon-deep);text-align:center;padding:12px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;border-radius:2px;transition:bottom .25s ease;} .product-card:hover .quick-add{bottom:12px;} .wishlist-alert-badge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:10px;margin-bottom:6px;} .wishlist-alert-badge.drop{background:rgba(58,140,80,0.14);color:#2E7D45;} .wishlist-alert-badge.out{background:rgba(173,59,92,0.1);color:var(--maroon);} /* Sold out — still browsable (never hidden), just visibly unavailable: a grey, semi-transparent wash over the photo and a diagonal ribbon, with the quick-add slot repurposed into "Pre Book" instead of "Add to Bag". */ .product-card.sold-out .product-media{filter:grayscale(65%) brightness(0.92);} .product-card.sold-out .product-media::before{ content:''; position:absolute; inset:0; z-index:1; background:rgba(247,241,232,0.4); } .sold-out-ribbon{ position:absolute; top:23px; left:-42px; z-index:3; width:170px; transform:rotate(-45deg); transform-origin:center; background:linear-gradient(120deg, var(--maroon) 0%, var(--maroon-deep) 100%); color:var(--ivory); text-align:center; padding:6px 0; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; box-shadow:0 3px 10px rgba(43,16,21,0.3); display:flex; align-items:center; justify-content:center; gap:5px; pointer-events:none; } .sold-out-ribbon .ribbon-lotus{display:inline-flex; color:var(--gold-soft);} .sold-out-ribbon .ribbon-lotus svg{width:10px;height:10px;display:block;} .product-card.sold-out .quick-add{background:var(--maroon-deep);color:var(--ivory);} .product-card.sold-out .wishlist-toggle{z-index:3;} .product-info{padding:16px 16px 18px;} .product-fabric{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);font-weight:600;} .product-name{font-size:15px;margin:5px 0 6px;font-weight:500;color:var(--ink);} .product-rating{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:8px;} .stars{color:var(--gold);letter-spacing:1px;} .product-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} .price-now{font-size:16px;font-weight:600;color:var(--maroon-deep);} .price-mrp{font-size:13px;color:var(--ink-soft);text-decoration:line-through;} .price-off{font-size:12px;color:var(--teal);font-weight:600;} .load-more-wrap{text-align:center;margin-top:44px;} .empty-state{text-align:center;padding:70px 20px;color:var(--ink-soft);} .empty-state svg{width:48px;height:48px;stroke:var(--blush);margin:0 auto 16px;} /* Product detail page */ .pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;} .pd-grid > *{min-width:0;} .pd-media{aspect-ratio:3/4;border-radius:4px;position:relative;overflow:hidden;box-shadow:var(--shadow);background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 24px);} .pd-info h1{font-size:28px;margin:10px 0;} .pd-desc{font-size:14px;color:var(--ink-soft);margin:16px 0;line-height:1.75;} .swatch-row{display:flex;gap:10px;margin:8px 0 20px;} .swatch-dot{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;} .swatch-dot.active{border-color:var(--maroon);} .pd-meta{display:flex;gap:22px;font-size:12.5px;color:var(--ink-soft);margin:18px 0;flex-wrap:wrap;} .pd-meta strong{color:var(--ink);} .pd-actions{display:flex;gap:12px;margin-top:24px;} .qty-stepper{display:flex;align-items:center;border:1px solid rgba(173,59,92,0.2);width:fit-content;border-radius:2px;} .qty-stepper button{width:34px;height:38px;font-size:16px;} .qty-stepper span{width:34px;text-align:center;font-size:14px;} /* Cart / Wishlist pages */ .cart-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:flex-start;} .cart-layout > *{min-width:0;} .cart-line{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(173,59,92,0.1);align-items:center;} .cart-thumb{width:80px;height:104px;border-radius:2px;flex-shrink:0;position:relative;overflow:hidden;} .cart-line-info{flex:1;} .cart-line-info h4{font-size:15px;font-weight:500;margin-bottom:4px;font-family:var(--font-body);} .cart-line-info span{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:8px;} .cart-line-price{text-align:right;font-size:14.5px;font-weight:600;color:var(--maroon-deep);min-width:90px;} .remove-line{font-size:11.5px;color:var(--ink-soft);text-decoration:underline;margin-top:8px;cursor:pointer;} .summary-card{background:var(--white);border:1px solid rgba(173,59,92,0.12);border-radius:4px;padding:24px;position:sticky;top:100px;} .summary-card h3{font-size:18px;margin-bottom:16px;} .summary-row{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:10px;color:var(--ink-soft);} .summary-row.total{font-size:17px;font-weight:600;color:var(--ink);margin-top:12px;border-top:1px solid rgba(173,59,92,0.1);padding-top:12px;} .promo-row{display:flex;gap:8px;margin:16px 0;} .promo-row input{flex:1;border:1px solid rgba(173,59,92,0.25);padding:10px 12px;font-size:13px;border-radius:2px;} .promo-row button{border:1px solid var(--maroon);color:var(--maroon);padding:0 16px;font-size:12px;text-transform:uppercase;border-radius:2px;} /* Forms (login/register/account/checkout) */ .auth-shell{max-width:440px;margin:0 auto;background:var(--white);padding:44px;border-radius:4px;box-shadow:var(--shadow);} .auth-shell h1{font-size:26px;text-align:center;margin-bottom:6px;} .auth-shell p.sub{text-align:center;color:var(--ink-soft);font-size:13.5px;margin-bottom:28px;} .form-field{margin-bottom:16px;} .form-field label{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:6px;} .form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid rgba(173,59,92,0.25);padding:12px 14px;border-radius:2px;font-size:13.5px;background:var(--white);} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .form-note{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:20px;} .form-note a{color:var(--maroon);text-decoration:underline;} .form-error{background:rgba(173,59,92,0.08);color:var(--maroon-deep);font-size:13px;padding:10px 14px;border-radius:2px;margin-bottom:16px;display:none;} .form-error.show{display:block;} .password-field{position:relative;} .password-field input{padding-right:56px;} .password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--maroon);text-transform:uppercase;letter-spacing:.03em;font-weight:600;} .field-hint{display:block;font-size:11.5px;color:var(--maroon);margin-top:5px;min-height:14px;} .strength-meter{height:4px;border-radius:2px;background:var(--ivory-deep);margin-top:8px;overflow:hidden;} .strength-meter span{display:block;height:100%;width:0;transition:width .25s ease, background .25s ease;} .strength-meter.level-1 span{width:25%;background:var(--maroon);} .strength-meter.level-2 span{width:50%;background:#C98A1F;} .strength-meter.level-3 span{width:75%;background:var(--gold);} .strength-meter.level-4 span{width:100%;background:var(--teal);} /* Account page */ /* min-width:0 on both tracks: a grid item's default min-width is 'auto', meaning it won't shrink below its content's intrinsic size — without this, admin.html's wide tables (min-width:640px, meant to scroll inside their own overflow-x:auto wrapper) instead blow out this whole grid column wider than the viewport on mobile, dragging the entire page into horizontal scroll. This one property lets the column actually respect the viewport so that wrapper's own scrolling can do its job. */ .account-layout{display:grid;grid-template-columns:230px 1fr;gap:36px;} .account-layout > *{min-width:0;} .account-nav{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:12px;} .account-nav button{display:block;width:100%;text-align:left;padding:12px 14px;font-size:13.5px;border-radius:2px;color:var(--ink-soft);} .account-nav button.active{background:var(--blush);color:var(--maroon-deep);font-weight:600;} .account-panel{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:32px;} .account-panel h2{font-size:22px;margin-bottom:20px;} .order-card{border:1px solid rgba(173,59,92,0.12);border-radius:3px;padding:18px;margin-bottom:14px;} .order-card-head{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:10px;} .order-status{background:var(--teal);color:var(--ivory);font-size:10.5px;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;} .order-item-row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--ink-soft);} /* Admin dashboard */ .stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;} .stat-card{background:var(--ivory);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:18px;text-align:center;} .stat-card strong{display:block;font-family:var(--font-display);font-size:22px;color:var(--maroon-deep);} .stat-card span{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;} .stat-card-warn{border-color:rgba(173,59,92,0.35);background:rgba(173,59,92,0.05);} .stat-card-warn strong{color:var(--maroon);} .admin-form{background:var(--ivory);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:20px;margin-bottom:20px;} .admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;} .admin-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid rgba(173,59,92,0.12);} .admin-table td{padding:10px;border-bottom:1px solid rgba(173,59,92,0.08);vertical-align:top;} .admin-input{border:1px solid rgba(173,59,92,0.25);padding:7px 9px;border-radius:2px;font-size:12.5px;width:85px;font-family:inherit;} select.admin-input{width:auto;min-width:150px;} /* Product editor (General / Variants tabs) */ .editor-card{background:var(--white);border:1px solid rgba(173,59,92,0.15);border-radius:6px;padding:24px;margin-top:8px;} .editor-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid rgba(173,59,92,0.1);} .editor-tabs button{padding:10px 16px;font-size:12.5px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;text-transform:uppercase;letter-spacing:.03em;} .editor-tabs button.active{color:var(--maroon-deep);border-bottom-color:var(--maroon);} .variant-card{border:1px solid rgba(173,59,92,0.15);border-radius:4px;padding:16px;margin-bottom:16px;background:var(--ivory);} .variant-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;} .variant-card-head h4{font-size:14px;font-family:var(--font-body);font-weight:700;color:var(--maroon-deep);display:flex;align-items:center;gap:8px;} .variant-swatch-dot{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,0.15);} .default-tag{font-size:10px;background:var(--gold);color:var(--maroon-deep);padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;} .variant-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;} .variant-fields .form-field{margin-bottom:0;} .variant-fields label{font-size:10.5px;} .variant-media-strip{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;} .media-thumb{position:relative;width:64px;height:64px;border-radius:4px;overflow:hidden;border:2px solid transparent;background:var(--ivory-deep);} .media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;display:block;} .media-thumb.is-primary{border-color:var(--gold);} .media-thumb .media-del{position:absolute;top:2px;right:2px;background:rgba(43,26,29,0.75);color:#fff;width:18px;height:18px;border-radius:50%;font-size:11px;line-height:18px;text-align:center;} .media-thumb .media-primary-btn{position:absolute;bottom:0;left:0;right:0;background:rgba(43,26,29,0.7);color:#fff;font-size:9px;text-align:center;padding:2px 0;text-transform:uppercase;} .upload-label{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1.5px dashed rgba(173,59,92,0.35);border-radius:4px;font-size:22px;color:var(--maroon);cursor:pointer;} @media (max-width:760px){ .variant-fields{grid-template-columns:1fr 1fr;} } /* Order filter chips + order/inventory detail panels */ .order-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;} .order-filter-row button{padding:7px 14px;font-size:12px;border:1px solid rgba(173,59,92,0.25);border-radius:20px;color:var(--ink-soft);} .order-filter-row button.active{background:var(--maroon);border-color:var(--maroon);color:var(--ivory);font-weight:600;} .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0;} .detail-block{background:var(--ivory);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:16px;} .detail-block h5{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:10px;} .detail-block p{font-size:13px;line-height:1.7;} .manual-override-flag{display:inline-block;background:var(--gold);color:var(--maroon-deep);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:10px;margin-left:8px;} .status-pill{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:10px;margin:2px 4px 2px 0;} .status-pill.status-confirmed{background:rgba(58,140,80,0.14);color:#2E7D45;} .status-pill.status-cancelled{background:rgba(173,59,92,0.12);color:var(--maroon);} .status-pill.status-pending{background:rgba(201,162,75,0.18);color:#8a6a1a;} .mini-timeline{display:flex;gap:4px;margin:16px 0;} .mini-timeline span{flex:1;text-align:center;font-size:10.5px;padding:8px 4px;border-radius:3px;background:var(--ivory-deep);color:var(--ink-soft);} .mini-timeline span.done{background:var(--teal);color:var(--ivory);font-weight:600;} @media (max-width:760px){ .detail-grid{grid-template-columns:1fr;} } @media (max-width:980px){ .stat-grid{grid-template-columns:repeat(2,1fr);} } /* Checkout steps */ .checkout-steps{display:flex;justify-content:center;gap:0;margin-bottom:36px;} .step{display:flex;align-items:center;gap:10px;padding:0 18px;position:relative;} .step-num{width:26px;height:26px;border-radius:50%;border:1px solid rgba(173,59,92,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-soft);} .step.active .step-num{background:var(--maroon);color:var(--ivory);border-color:var(--maroon);} .step span.step-label{font-size:12px;color:var(--ink-soft);} .step.active span.step-label{color:var(--maroon-deep);font-weight:600;} .step:not(:last-child)::after{content:'';width:36px;height:1px;background:rgba(173,59,92,0.2);margin-left:8px;} /* Confirmed via layout audit: 3 steps at their default padding/connector width genuinely don't fit a 320-390px phone screen — reduce padding, connector length and label size so all 3 stay on one row and in view. */ @media (max-width:480px){ .step{padding:0 6px;gap:5px;} .step-num{width:22px;height:22px;font-size:11px;} .step span.step-label{font-size:10.5px;} .step:not(:last-child)::after{width:14px;margin-left:5px;} } @media (max-width:380px){ .step{padding:0 4px;gap:4px;} .step:not(:last-child)::after{width:9px;margin-left:4px;} } .pay-options{display:grid;gap:12px;margin:16px 0;} .pay-option{display:flex;align-items:center;gap:12px;border:1px solid rgba(173,59,92,0.2);border-radius:2px;padding:14px 16px;cursor:pointer;} .pay-option.active{border-color:var(--maroon);background:rgba(173,59,92,0.04);} .pay-option input{accent-color:var(--maroon);} .pay-subpanel{border:1px solid rgba(173,59,92,0.14);border-radius:2px;padding:16px;margin:-4px 0 16px;background:rgba(173,59,92,0.02);} .upi-app-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;} .upi-app-btn{display:flex;align-items:center;gap:8px;border:1px solid rgba(173,59,92,0.2);background:var(--ivory);border-radius:20px;padding:8px 16px;font-size:13px;font-family:var(--font-body);cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s;} .upi-app-btn:hover{border-color:var(--maroon);} .upi-app-btn.active{border-color:var(--maroon);background:rgba(173,59,92,0.06);font-weight:600;} .upi-app-dot{width:10px;height:10px;border-radius:50%;display:inline-block;} .success-box{text-align:center;padding:50px 20px;} .success-icon{width:70px;height:70px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;} .success-icon svg{width:32px;height:32px;stroke:var(--ivory);} /* Footer */ footer{background:var(--maroon-deep);color:var(--ivory-deep);padding:50px 0 0;margin-top:60px;position:relative;overflow:hidden;z-index:10;} .footer-lotus-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;} .footer-lotus-bg span{position:absolute;color:var(--gold);display:block;} .footer-lotus-bg svg{width:100%;height:100%;display:block;} .footer-lotus-bg .fl-a{width:230px;height:230px;right:-55px;bottom:-45px;opacity:.11;transform:rotate(8deg);} .footer-lotus-bg .fl-b{width:210px;height:210px;left:-50px;bottom:-40px;opacity:.1;transform:rotate(-12deg);} .footer-lotus-bg .fl-c{width:150px;height:150px;left:26%;bottom:-30px;opacity:.09;transform:rotate(5deg);} .footer-lotus-bg .fl-d{width:110px;height:110px;right:22%;bottom:-16px;opacity:.08;transform:rotate(-8deg);} .footer-lotus-bg .fl-e{width:75px;height:75px;left:12%;bottom:-10px;opacity:.07;transform:rotate(14deg);} .footer-lotus-bg .fl-f{width:60px;height:60px;left:45%;bottom:-4px;opacity:.06;transform:rotate(-20deg);} .footer-lotus-bg .fl-g{width:100px;height:100px;right:41%;bottom:-24px;opacity:.075;transform:rotate(18deg);} .footer-lotus-bg .fl-h{width:55px;height:55px;left:19%;bottom:4px;opacity:.055;transform:rotate(26deg);} .footer-lotus-bg .fl-i{width:85px;height:85px;left:35%;bottom:-18px;opacity:.065;transform:rotate(-14deg);} .footer-lotus-bg .fl-j{width:70px;height:70px;right:30%;bottom:-2px;opacity:.06;transform:rotate(10deg);} .footer-lotus-bg .fl-k{width:45px;height:45px;left:7%;bottom:10px;opacity:.05;transform:rotate(-30deg);} .footer-lotus-bg .fl-l{width:95px;height:95px;right:12%;bottom:16px;opacity:.065;transform:rotate(-22deg);} .footer-lotus-bg .fl-m{width:65px;height:65px;left:55%;bottom:-8px;opacity:.055;transform:rotate(16deg);} .footer-lotus-bg .fl-n{width:130px;height:130px;left:-30px;top:-40px;opacity:.08;transform:rotate(30deg);} .footer-lotus-bg .fl-o{width:120px;height:120px;right:2%;top:-30px;opacity:.07;transform:rotate(-18deg);} .footer-lotus-bg .fl-p{width:50px;height:50px;left:63%;bottom:8px;opacity:.06;transform:rotate(-10deg);} @media (max-width:900px){ .footer-lotus-bg .fl-i,.footer-lotus-bg .fl-j,.footer-lotus-bg .fl-k,.footer-lotus-bg .fl-l,.footer-lotus-bg .fl-m,.footer-lotus-bg .fl-n,.footer-lotus-bg .fl-o,.footer-lotus-bg .fl-p{display:none;} } @media (max-width:900px){ .footer-lotus-bg .fl-c,.footer-lotus-bg .fl-d,.footer-lotus-bg .fl-e,.footer-lotus-bg .fl-f,.footer-lotus-bg .fl-g,.footer-lotus-bg .fl-h{display:none;} } .footer .container,.footer-bottom{position:relative;z-index:1;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;} .footer-grid h5{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-soft);margin-bottom:16px;} .footer-grid ul li{margin-bottom:9px;font-size:13.5px;color:rgba(250,245,236,0.75);} .footer-logo{font-family:var(--font-display);font-size:22px;color:var(--ivory);margin-bottom:12px;} .footer-logo .by-yashi{font-family:var(--font-body);font-size:12px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-left:4px;} .footer-grid p{font-size:13px;color:rgba(250,245,236,0.65);line-height:1.7;max-width:280px;} .footer-mail{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:rgba(250,245,236,0.85);transition:color .2s ease;} .footer-mail svg{width:16px;height:16px;stroke:var(--gold-soft);flex-shrink:0;} .footer-mail:hover{color:var(--gold-soft);} .footer-social{display:flex;gap:10px;margin-top:16px;} .social-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(250,245,236,0.3);display:flex;align-items:center;justify-content:center;color:var(--ivory-deep);transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease;} .social-btn svg{width:16px;height:16px;stroke:currentColor;} .social-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--maroon-deep);transform:translateY(-2px);} .footer-bottom{border-top:1px solid rgba(250,245,236,0.15);padding:18px 28px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(250,245,236,0.55);max-width:1240px;margin:0 auto;flex-wrap:wrap;gap:10px;} .footer-lotus-mark{display:inline-flex;align-items:center;color:var(--gold-soft);opacity:.85;} .footer-lotus-mark svg{width:13px;height:13px;} /* Toasts — animated, top of screen, typed (success/error/info) */ .toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;} .toast{ position:relative;overflow:hidden;pointer-events:auto; display:flex;align-items:center;gap:12px; min-width:270px;max-width:400px;padding:14px 18px 14px 16px; background:var(--white);color:var(--ink);border-radius:8px; border-left:4px solid var(--teal);box-shadow:var(--shadow); font-size:13.5px;font-weight:500; opacity:0;transform:translateY(-18px) scale(.95); transition:opacity .35s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1); } .toast.show{opacity:1;transform:translateY(0) scale(1);} .toast.hide{opacity:0;transform:translateY(-12px) scale(.96);transition:opacity .3s ease, transform .3s ease;} .toast-icon{display:flex;flex-shrink:0;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;} .toast-icon svg{width:16px;height:16px;} .toast-msg{flex:1;line-height:1.4;} .toast-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;animation:toastShrink 3.2s linear forwards;} .toast-success{border-left-color:var(--teal);} .toast-success .toast-icon{background:rgba(31,75,74,0.12);} .toast-success .toast-icon svg{stroke:var(--teal);} .toast-success .toast-progress{background:var(--teal);} .toast-error{border-left-color:var(--maroon);} .toast-error .toast-icon{background:rgba(173,59,92,0.1);} .toast-error .toast-icon svg{stroke:var(--maroon);} .toast-error .toast-progress{background:var(--maroon);} .toast-info{border-left-color:var(--gold);} .toast-info .toast-icon{background:rgba(201,162,39,0.14);} .toast-info .toast-icon svg{stroke:var(--gold);} .toast-info .toast-progress{background:var(--gold);} @keyframes toastShrink{from{width:100%;}to{width:0%;}} @media (max-width:560px){ .toast-wrap{top:14px;width:92vw;} .toast{min-width:0;width:100%;max-width:none;} } /* Confirm dialog — animated modal replacing native confirm() */ .confirm-backdrop{position:fixed;inset:0;background:rgba(20,10,10,0.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:700;} .confirm-backdrop.open{opacity:1;pointer-events:auto;} .confirm-dialog{ position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.94);width:min(380px,88vw); background:var(--white);border-radius:10px;box-shadow:var(--shadow);padding:30px 26px 26px;text-align:center; z-index:701;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); } .confirm-dialog.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;} .confirm-icon{width:52px;height:52px;border-radius:50%;background:rgba(31,75,74,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;} .confirm-icon svg{width:24px;height:24px;stroke:var(--teal);} .confirm-icon.danger{background:rgba(173,59,92,0.1);} .confirm-icon.danger svg{stroke:var(--maroon);} .confirm-dialog h3{font-size:19px;margin-bottom:10px;} .confirm-dialog p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:24px;} .confirm-actions{display:flex;gap:12px;} .confirm-actions .btn{flex:1;justify-content:center;} .confirm-danger-btn{background:var(--maroon) !important;} .confirm-danger-btn:hover{background:var(--maroon-deep) !important;} /* Weaver / authenticity block (product page) */ .authenticity-card{display:flex;gap:16px;background:var(--white);border:1px solid rgba(201,162,39,0.35);border-radius:4px;padding:18px 20px;margin:22px 0;} .authenticity-card svg{width:30px;height:30px;stroke:var(--gold);flex-shrink:0;} .authenticity-card h4{font-size:13.5px;color:var(--maroon-deep);margin-bottom:4px;} .authenticity-card p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;} .authenticity-card .loom-tag{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--blush);color:var(--maroon-deep);margin-top:6px;} .stock-note{font-size:12.5px;font-weight:600;margin:10px 0;} .stock-note.low{color:var(--maroon);} .stock-note.ok{color:var(--teal);} .size-guide-link{background:none;border:none;color:var(--maroon);text-decoration:underline;font-size:12px;cursor:pointer;padding:0;margin-top:10px;display:inline-block;} .size-guide-dialog{ position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.96);width:min(520px,90vw);max-height:82vh;overflow-y:auto; background:var(--white);border-radius:10px;box-shadow:var(--shadow);padding:30px 30px 26px; z-index:701;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); } .size-guide-dialog.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;} .size-guide-dialog .sg-close{position:absolute;top:16px;right:18px;font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;background:none;border:none;} .size-guide-dialog h3{font-size:19px;margin-bottom:4px;padding-right:24px;} .size-guide-dialog h4{font-size:13px;color:var(--maroon-deep);margin:18px 0 6px;text-transform:uppercase;letter-spacing:.03em;} .size-guide-dialog p{font-size:13px;color:var(--ink-soft);line-height:1.65;} .size-guide-dialog table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px;} .size-guide-dialog th,.size-guide-dialog td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(173,59,92,0.1);} .prebook-dialog{width:min(420px,90vw);} .prebook-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;} .prebook-btn .ribbon-lotus{display:inline-flex;color:var(--gold-soft);} .prebook-btn .ribbon-lotus svg{width:14px;height:14px;display:block;} /* Reviews */ .review-summary{display:flex;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap;} .review-summary .big-rating{font-family:var(--font-display);font-size:44px;color:var(--maroon-deep);} .star-input{display:flex;gap:6px;margin:8px 0 16px;} .star-input button{font-size:26px;color:var(--gold-soft);line-height:1;} .star-input button.active,.star-input button:hover{color:var(--gold);} .review-card{border-bottom:1px solid rgba(173,59,92,0.1);padding:18px 0;} .review-card-head{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:6px;flex-wrap:wrap;} .review-card-head strong{font-size:13.5px;} .verified-tag{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);font-weight:600;border:1px solid var(--teal);border-radius:20px;padding:2px 9px;} .review-card .stars{font-size:13px;} .review-card p{font-size:13.5px;color:var(--ink-soft);margin-top:6px;line-height:1.6;} .review-form{background:var(--white);border:1px solid rgba(173,59,92,0.1);border-radius:4px;padding:22px;margin:18px 0 30px;} /* Order tracking timeline */ .order-timeline{display:flex;gap:0;margin:14px 0 6px;} .order-timeline .tl-step{flex:1;text-align:center;position:relative;} .order-timeline .tl-dot{width:14px;height:14px;border-radius:50%;background:rgba(173,59,92,0.15);margin:0 auto 6px;} .order-timeline .tl-step.done .tl-dot{background:var(--teal);} .order-timeline .tl-step:not(:last-child)::after{content:'';position:absolute;top:6px;left:55%;width:90%;height:2px;background:rgba(173,59,92,0.15);} .order-timeline .tl-step.done:not(:last-child)::after{background:var(--teal);} .order-timeline .tl-label{font-size:10.5px;color:var(--ink-soft);} .order-timeline .tl-step.done .tl-label{color:var(--teal);font-weight:600;} .order-status.cancelled{background:var(--maroon);} .order-status.low{background:var(--gold);color:var(--maroon-deep);} .order-status.ok{background:var(--teal);} .cancel-order-btn{font-size:11.5px;color:var(--maroon);text-decoration:underline;margin-top:10px;cursor:pointer;} /* Content pages: About / Our Weaves / FAQ / Policies */ .story-band{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;} .story-band > *{min-width:0;} .story-band .story-art{aspect-ratio:4/3;border-radius:4px;box-shadow:var(--shadow);} .logo-showcase{background:var(--ivory-deep);display:flex;align-items:center;justify-content:center;padding:26px;border:1px solid rgba(201,162,39,0.4);} .logo-showcase img{width:100%;height:100%;object-fit:contain;} .story-band h2{font-size:28px;margin-bottom:14px;} .story-band p{color:var(--ink-soft);font-size:14px;line-height:1.8;margin-bottom:12px;} .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;background:var(--white);border-top:1px solid rgba(173,59,92,0.1);border-bottom:1px solid rgba(173,59,92,0.1);} .stats-strip div{padding:30px 20px;border-right:1px solid rgba(173,59,92,0.1);} .stats-strip div:last-child{border-right:none;} .stats-strip strong{display:block;font-family:var(--font-display);font-size:32px;color:var(--maroon-deep);} .stats-strip span{font-size:12px;color:var(--ink-soft);} .weave-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .weave-card{background:var(--white);border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(43,26,29,0.06);} .weave-card .weave-art{aspect-ratio:16/10;} .weave-card-body{padding:18px 20px;} .weave-card-body h4{font-size:16px;margin-bottom:4px;} .weave-card-body span{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;font-weight:600;} .weave-card-body p{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.6;} .faq-item{border-bottom:1px solid rgba(173,59,92,0.12);} .faq-q{width:100%;text-align:left;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:500;color:var(--ink);} .faq-q svg{width:16px;height:16px;stroke:var(--maroon);transition:transform .2s ease;flex-shrink:0;} .faq-item.open .faq-q svg{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:13.5px;color:var(--ink-soft);line-height:1.7;} .faq-item.open .faq-a{max-height:240px;padding-bottom:18px;} .prose h2{font-size:20px;margin:28px 0 10px;} .prose h2:first-child{margin-top:0;} .prose p,.prose li{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-bottom:10px;} .prose ul{list-style:disc;padding-left:22px;} .contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;} .contact-layout > *{min-width:0;} .contact-info-card{background:var(--maroon-deep);color:var(--ivory);border-radius:4px;padding:32px;} .contact-info-card h3{color:var(--ivory);font-size:20px;margin-bottom:14px;} .contact-info-card p{font-size:13.5px;color:rgba(250,245,236,0.8);line-height:1.9;margin-bottom:8px;} .trousseau-card{background:var(--white);border:1px solid rgba(173,59,92,0.12);border-radius:4px;padding:22px;} @media (max-width:980px){ .story-band{grid-template-columns:1fr;} .stats-strip{grid-template-columns:repeat(2,1fr);} .weave-grid{grid-template-columns:repeat(2,1fr);} .contact-layout{grid-template-columns:1fr;} } @media (max-width:560px){ .weave-grid{grid-template-columns:1fr;} } @media (max-width:980px){ .main-nav{display:none;} .hamburger{display:flex;} .shop-layout{grid-template-columns:1fr;} .filters{position:static;} .product-grid{grid-template-columns:repeat(2,1fr);} .pd-grid{grid-template-columns:1fr;} .cart-layout{grid-template-columns:1fr;} .summary-card{position:static;} .account-layout{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .product-grid{grid-template-columns:1fr 1fr;gap:14px;} .header-inner{padding:14px 18px;} .container{padding:0 18px;} .auth-shell{padding:28px;} .form-row-2{grid-template-columns:1fr;} } /* iOS Safari zooms the whole page in when a focused text input's computed font-size is under 16px — every real text input a visitor types into (login/register/checkout/account/address forms, shop search, the promo code box, order tracking, the instant-search overlay) gets bumped to 16px on phone-sized viewports only; desktop keeps its original 12.5-15px sizing untouched. Native