/* ============================================================ Kaazhagam — Premium Home (kz-home) Scoped under .kz-home so it never disturbs the template shell. ============================================================ */ .kz-home{ --kz-maroon:#6b1a3a; --kz-maroon-deep:#4e1129; --kz-gold:#B79557; --kz-gold-deep:#9a7d44; --kz-gold-bright:#D4A44A; --kz-ivory:#F8F4EE; --kz-beige:#f9f5ee; --kz-ink:#2b2420; --kz-muted:#857a70; --kz-line:#ece4d6; font-family:'Montserrat',sans-serif; color:var(--kz-ink); background:#fff; overflow-x:hidden; } .kz-home *{ box-sizing:border-box; } .kz-wrap{ max-width:1280px; margin:0 auto; padding:0 24px; } /* ── Section heading ── */ .kz-section{ padding:64px 0; } .kz-section.kz-tight{ padding:44px 0; } .kz-head{ text-align:center; margin-bottom:40px; } .kz-eyebrow{ display:inline-block; font-size:12px; letter-spacing:3.5px; text-transform:uppercase; color:var(--kz-gold-deep); font-weight:600; margin-bottom:10px; } .kz-title{ font-family:'Cormorant',serif; font-weight:700; color:var(--kz-maroon); font-size:42px; line-height:1.1; margin:0; } .kz-sub{ color:var(--kz-muted); font-size:15px; margin:12px 0 0; } .kz-rule{ display:block; width:64px; height:2px; margin:16px auto 0; background:linear-gradient(90deg,transparent,var(--kz-gold),transparent); } /* ── Buttons ── */ .kz-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px; letter-spacing:.6px; text-transform:uppercase; text-decoration:none; border:none; border-radius:2px; padding:14px 32px; transition:background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } .kz-btn-primary{ background:var(--kz-maroon); color:#fff; } .kz-btn-primary:hover{ background:var(--kz-maroon-deep); color:#fff; box-shadow:0 10px 24px rgba(107,26,58,.28); } .kz-btn-gold{ background:var(--kz-gold); color:#fff; } .kz-btn-gold:hover{ background:var(--kz-gold-deep); color:#fff; box-shadow:0 10px 24px rgba(183,149,87,.32); } /* Christmas-only: santa hat perched on the Promo banner's "Explore Collections" button, tilted over the top-right corner. Hidden by default so every other theme's button is untouched. */ .kz-xmas-btn-hat{ display:none; } html.theme-christmas #kz-promo1-link{ position:relative; overflow:visible; } html.theme-christmas #kz-promo1-link .kz-xmas-btn-hat{ display:block; position:absolute; top:-7px; right:-4px; width:42px; height:auto; transform:rotate(14deg); transform-origin:bottom left; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.28)); } .kz-btn-ghost{ background:transparent; color:var(--kz-maroon); border:1.5px solid var(--kz-maroon); } .kz-btn-ghost:hover{ background:var(--kz-maroon); color:#fff; } .kz-btn-light{ background:#fff; color:var(--kz-maroon); } .kz-btn-light:hover{ background:var(--kz-ivory); color:var(--kz-maroon-deep); } .kz-btn .kz-ar{ width:15px; height:15px; } /* ── USP marquee strip ── */ .kz-usp{ background:var(--kz-maroon); color:var(--kz-ivory); } .kz-usp .kz-wrap{ display:flex; flex-wrap:wrap; justify-content:space-around; gap:14px 26px; padding:14px 24px; } .kz-usp-item{ display:flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.4px; } .kz-usp-item svg{ width:20px; height:20px; color:var(--kz-gold-bright); flex-shrink:0; } /* ── Category circles ── */ .kz-cats-wrap{ position:relative; } .kz-cats-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:var(--kz-ivory); border:1px solid var(--kz-line); border-radius:50%; width:38px; height:38px; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.1); transition:background .2s, color .2s, opacity .2s; color:var(--kz-maroon); padding:0; margin-top:-7px; } .kz-cats-arrow:hover{ background:var(--kz-gold); color:#fff; border-color:var(--kz-gold); } .kz-cats-prev{ left:-19px; } .kz-cats-next{ right:-19px; } .kz-cats-arrow.is-hidden{ opacity:0; pointer-events:none; } /* overflow-x:auto forces overflow-y to compute to auto, so anything hanging outside the padding box gets clipped — the gold ring (-6px) plus the 4px hover lift both live in this top padding, as do the mascot/ornament that hang below. Sized to clear all of them. */ .kz-cats{ display:flex; gap:30px; overflow-x:auto; padding:14px 2px 18px; scrollbar-width:none; } .kz-cats::-webkit-scrollbar{ display:none; } .kz-cat{ flex:0 0 auto; width:130px; text-align:center; text-decoration:none; cursor:pointer; } .kz-cat-img{ width:130px; height:130px; border-radius:50%; overflow:hidden; position:relative; border:2px solid var(--kz-line); padding:5px; background:#fff; transition:border-color .25s ease; } .kz-cat-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; } /* The hover lift lives on the wrapper, not the image, so the seasonal gold ring (a wrapper pseudo-element) travels with the photo instead of the photo sliding out of its own ring. Visually identical when unthemed. */ .kz-cat:hover .kz-cat-img{ border-color:var(--kz-gold); } .kz-cat-name{ display:block; margin-top:14px; font-size:13px; font-weight:600; letter-spacing:.4px; color:var(--kz-ink); transition:color .25s ease; } .kz-cat:hover .kz-cat-name{ color:var(--kz-maroon); } .kz-cat-badge{ position:absolute; top:4px; right:4px; background:var(--kz-maroon); color:#fff; font-size:9px; font-weight:700; letter-spacing:.5px; padding:3px 7px; border-radius:20px; z-index:2; } /* Diwali theme: mascot + diya standing beside each category circle. Wrapped in its own box (not inside .kz-cat-img, which clips to a circle) so both can extend past the circle's edge the way they do in the reference. */ .kz-cat-circle-wrap { position: relative; display: inline-block; transition: transform .25s ease; } .kz-cat:hover .kz-cat-circle-wrap { transform: translateY(-4px); } /* ── Seasonal category-circle gold medallion ring ────────────────────────── Turns each category circle into a gilt medallion whenever ANY seasonal theme is live. Built entirely from the wrapper's two pseudo-elements so a single negation rule below can switch the whole treatment off — nothing here needs per-theme duplication, and adding a 6th theme later means adding one more :not() rather than another copy of this block. ::before is the metal band (sits behind the opaque photo circle, so only its outer annulus shows). ::after lays a pale hairline exactly over the photo's own grey border, which is what makes it read as a double ring rather than one thick edge. */ .kz-cat-circle-wrap::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; /* Alternating highlight/shadow stops read as light travelling around a polished band — a flat gold fill looks like paint, not metal. */ background: conic-gradient(from 150deg, #7C5619 0deg, #B98C33 20deg, #EBD293 45deg, #FFF6E0 62deg, #DCB765 82deg, #9A7226 110deg, #7C5619 138deg, #A87C2C 160deg, #E2C179 186deg, #FFF9EA 205deg, #D3A855 228deg, #8A6222 258deg, #74501A 282deg, #AD8330 305deg, #E8C87E 330deg, #FFF6E0 344deg, #B98C33 356deg, #7C5619 360deg); box-shadow: 0 0 0 1px rgba(94,64,18,.34), 0 5px 14px rgba(94,64,18,.20); transition: transform .3s ease, box-shadow .3s ease; } .kz-cat-circle-wrap::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,246,224,.92); pointer-events: none; } /* Rotating a conic gradient sweeps its highlights around the band, so the metal appears to catch the light — motion that expresses "this is metal", not decoration for its own sake. No scale: the strip clips vertically. */ .kz-cat:hover .kz-cat-circle-wrap::before { transform: rotate(20deg); box-shadow: 0 0 0 1px rgba(94,64,18,.44), 0 7px 20px rgba(94,64,18,.30); } .kz-cat-mascot { position: absolute; left: -30px; bottom: -4px; width: 50px; height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(43,26,14,.16)); transition: transform .25s ease; } .kz-cat:hover .kz-cat-mascot { transform: translateY(-3px); } .kz-cat-diya { position: absolute; right: -8px; bottom: -8px; width: 28px; height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(43,26,14,.14)); } /* ── Deal cards (Steal the Deal) ── */ .kz-deals{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .kz-deal{ position:relative; border-radius:6px; overflow:hidden; text-decoration:none; display:block; aspect-ratio:3/4; cursor:pointer; box-shadow:0 8px 24px rgba(43,36,32,.08); } .kz-deal img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .kz-deal:hover img{ transform:scale(1.06); } .kz-deal-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(43,17,30,.82) 100%); } .kz-deal-body{ position:absolute; left:0; right:0; bottom:0; padding:20px; color:#fff; } .kz-deal-body h3{ font-family:'Cormorant',serif; font-weight:700; font-size:24px; margin:0 0 8px; color:#fff; } .kz-deal-off{ display:inline-block; background:var(--kz-gold); color:#fff; font-size:12px; font-weight:700; letter-spacing:.5px; padding:5px 12px; border-radius:2px; } /* ── Split promo banner ── */ .kz-promo{ position:relative; overflow:hidden; border-radius:8px; min-height:340px; display:flex; align-items:center; } .kz-promo-bg{ position:absolute; inset:0; } .kz-promo-bg img{ width:100%; height:100%; object-fit:cover; } .kz-promo-veil{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(78,17,41,.92) 0%,rgba(107,26,58,.78) 42%,rgba(107,26,58,.15) 100%); } .kz-promo-inner{ position:relative; padding:54px 8%; max-width:560px; color:#fff; } .kz-promo-inner .kz-eyebrow{ color:var(--kz-gold-bright); } .kz-promo-inner h2{ font-family:'Cormorant',serif; font-weight:700; font-size:46px; line-height:1.08; margin:6px 0 14px; color:#fff; } .kz-promo-inner h2 em{ font-style:italic; color:var(--kz-gold-bright); } .kz-promo-inner p{ font-size:16px; color:#f4e9e0; margin:0 0 26px; max-width:420px; } /* ── Occasion cards ── */ .kz-occasions{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .kz-occ{ position:relative; border-radius:8px; overflow:hidden; aspect-ratio:4/5; text-decoration:none; display:block; cursor:pointer; box-shadow:0 10px 30px rgba(43,36,32,.10); background-size:cover; background-position:center; transition:background-size .7s ease; } .kz-occ img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; } .kz-occ:hover img{ transform:scale(1.07); } .kz-occ:hover{ background-size:107%; } .kz-occ-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(43,17,30,.78) 100%); } .kz-occ-body{ position:absolute; left:0; right:0; bottom:0; padding:26px; text-align:center; color:#fff; } .kz-occ-body span{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--kz-gold-bright); } .kz-occ-body h3{ font-family:'Cormorant',serif; font-weight:700; font-size:30px; margin:6px 0 16px; color:#fff; } .kz-occ-link{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#fff; border-bottom:1.5px solid var(--kz-gold); padding-bottom:3px; transition:gap .25s ease; } .kz-occ:hover .kz-occ-link{ gap:14px; } /* ── Product grid (bestsellers) ── */ .kz-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .kz-card{ background:#fff; border:1px solid var(--kz-line); border-radius:6px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; cursor:pointer; transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .kz-card:hover{ box-shadow:0 16px 38px rgba(43,36,32,.14); transform:translateY(-5px); border-color:#e2d6c2; } .kz-card-img{ position:relative; width:100%; height:290px; overflow:hidden; background:var(--kz-beige); } .kz-card-img img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s ease; } .kz-card:hover .kz-card-img img{ transform:scale(1.05); } .kz-card-tag{ position:absolute; top:12px; left:12px; background:var(--kz-maroon); color:#fff; font-size:10px; font-weight:700; letter-spacing:.5px; padding:4px 10px; border-radius:2px; z-index:2; } .kz-card-tag.kz-sale{ background:var(--kz-gold); } .kz-card-wish{ position:absolute !important; top:10px !important; right:10px !important; width:34px !important; height:34px !important; border-radius:50% !important; background:rgba(255,255,255,.92) !important; border:none !important; outline:none !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; z-index:2 !important; cursor:pointer !important; box-shadow:0 2px 8px rgba(0,0,0,.12) !important; transition:background .2s ease, transform .2s ease !important; } .kz-card-wish svg{ width:18px; height:18px; flex-shrink:0; display:block; color:var(--kz-maroon); } .kz-card-wish:hover{ background:#fff !important; transform:scale(1.1) !important; } /* Same theme mascot/ornament pair the Shop by Category circles use, scaled down onto the Bestsellers/Limited-Time product photos, bottom-left corner (wish button already owns the top-right; the tag owns the top-left). !important throughout because .kz-card-img img{width:100%; height:100%;...} (a class+element selector, higher specificity than a single class) was otherwise stretching these to fill the whole photo — the "one giant blurry mascot" bug. */ .kz-card-mascot{ position:absolute !important; left:6px !important; bottom:6px !important; top:auto !important; right:auto !important; width:64px !important; height:64px !important; object-fit:contain !important; transform:none !important; z-index:2; pointer-events:none; filter:drop-shadow(0 3px 6px rgba(0,0,0,.28)); } .kz-card-orn{ position:absolute !important; right:8px !important; bottom:8px !important; top:auto !important; left:auto !important; width:34px !important; height:34px !important; object-fit:contain !important; transform:none !important; z-index:2; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.24)); } @media (max-width:640px){ .kz-card-mascot{ width:44px !important; height:44px !important; } .kz-card-orn{ width:24px !important; height:24px !important; } } .kz-card-wish.active svg, .kz-card-wish:hover svg { fill:var(--kz-gold) !important; stroke:var(--kz-gold) !important; color:var(--kz-gold) !important; } .kz-card-wish .ec-btn-tooltip { display:none !important; } .kz-card-body{ padding:8px 12px 10px; text-align:center; } .kz-card-name{ font-size:13.5px; font-weight:600; color:#2b2420; margin:0 0 4px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .kz-card-stars{ margin:0 0 4px; display:flex; align-items:center; justify-content:center; gap:4px; } .kz-card-s{ font-size:11px; color:#D4A44A; letter-spacing:1px; } .kz-card-rc{ font-size:10px; color:#b7ada1; } .kz-card-price{ display:flex; align-items:center; justify-content:center; gap:8px; } .kz-now{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; color:var(--kz-maroon); } .kz-was{ font-size:12px; font-weight:700; color:#6b6259; text-decoration:line-through; } .kz-off{ font-size:10px; font-weight:700; color:var(--kz-gold-deep); } /* ── Seasonal product-card dividers ─────────────────────────────────────── When any seasonal theme is live, each product card gains a small ornament flanked by fading hairlines: one between the photo and the title, and a lighter echo of it under the price. Both are pure pseudo-elements on .kz-card-body, so no card markup changes and both product grids (Deals and Bestsellers) pick it up automatically. The whole treatment is driven by exactly two custom properties, so each theme below is a two-line override rather than a duplicated block. The :root values are the fallback that keeps the shorthand valid; unthemed pages never show them (the negation rule further down hides both). */ :root { --kz-sep: #B79557; --kz-sep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B79557'%3E%3Ccircle cx='12' cy='6.6' r='3'/%3E%3Ccircle cx='12' cy='17.4' r='3'/%3E%3Ccircle cx='6.6' cy='12' r='3'/%3E%3Ccircle cx='17.4' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%236b1a3a'/%3E%3C/svg%3E"); } .kz-card-body::before, .kz-card-body::after { content: ''; display: block; background-repeat: no-repeat; background-position: left center, right center, center; background-image: linear-gradient(90deg, transparent, var(--kz-sep)), linear-gradient(90deg, var(--kz-sep), transparent), var(--kz-sep-icon); } /* Sits just under the photo edge — the piece the reference calls for. */ .kz-card-body::before { height: 18px; width: 76%; margin: 0 auto 9px; background-size: calc(50% - 13px) 1px, calc(50% - 13px) 1px, 18px 18px; } /* Quieter echo beneath the price, so the card closes the way it opened instead of the ornament reading as a one-off. */ .kz-card-body::after { height: 12px; width: 56%; margin: 9px auto 1px; background-size: calc(50% - 9px) 1px, calc(50% - 9px) 1px, 12px 12px; opacity: .62; } html.theme-diwali { --kz-sep: #B79557; --kz-sep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B79557'%3E%3Ccircle cx='12' cy='6.6' r='3'/%3E%3Ccircle cx='12' cy='17.4' r='3'/%3E%3Ccircle cx='6.6' cy='12' r='3'/%3E%3Ccircle cx='17.4' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%236b1a3a'/%3E%3C/svg%3E"); } html.theme-christmas { --kz-sep: #9ec2b0; --kz-sep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fa896' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 2.6v18.8M4.1 7.2l15.8 9.6M19.9 7.2L4.1 16.8'/%3E%3Cpath d='M12 6.8 9.5 4.4M12 6.8l2.5-2.4M12 17.2l-2.5 2.4M12 17.2l2.5 2.4'/%3E%3C/svg%3E"); } html.theme-pongal { --kz-sep: #e0a93c; --kz-sep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4l2 6.8 6.6-2.2-4.2 6 4.2 6-6.6-2.2-2 6.8-2-6.8-6.6 2.2 4.2-6-4.2-6 6.6 2.2z' fill='%23e0a93c'/%3E%3C/svg%3E"); } html.theme-bakrid { --kz-sep: #7fa8bd; --kz-sep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 14.6A8.6 8.6 0 1 1 9.4 4.6a6.8 6.8 0 0 0 10 10z' fill='%236f9bb2'/%3E%3C/svg%3E"); } /* ── Sale strip banner ── */ .kz-sale-banner{ position:relative; overflow:hidden; border-radius:8px; min-height:300px; display:flex; align-items:center; justify-content:flex-end; text-align:right; } .kz-sale-banner .kz-promo-bg img{ object-position:center 30%; } .kz-sale-veil{ position:absolute; inset:0; background:linear-gradient(270deg,rgba(78,17,41,.9) 0%,rgba(107,26,58,.6) 45%,rgba(0,0,0,0) 100%); } .kz-sale-inner{ position:relative; padding:48px 8%; max-width:520px; color:#fff; } .kz-sale-inner h2{ font-family:'Cormorant',serif; font-weight:700; font-size:42px; line-height:1.1; margin:0 0 6px; color:#fff; } .kz-sale-inner .kz-big{ font-size:30px; font-weight:800; color:var(--kz-gold-bright); display:block; margin-bottom:18px; letter-spacing:1px; } /* ── Rewards banner ── */ .kz-rewards{ background:linear-gradient(120deg,var(--kz-maroon-deep),var(--kz-maroon)); border-radius:10px; position:relative; overflow:hidden; padding:46px 6%; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; } .kz-rewards::before{ content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(212,164,74,.28),transparent 70%); } .kz-rewards-text{ position:relative; max-width:620px; } .kz-rewards-text .kz-eyebrow{ color:var(--kz-gold-bright); } .kz-rewards-text h2{ font-family:'Cormorant',serif; font-weight:700; font-size:38px; margin:6px 0 10px; color:#fff; } .kz-rewards-steps{ display:flex; gap:22px; flex-wrap:wrap; margin-top:6px; } .kz-rewards-steps span{ display:flex; align-items:center; gap:8px; font-size:13px; color:#f3e7dd; } .kz-rewards-steps svg{ width:18px; height:18px; color:var(--kz-gold-bright); } /* ── Testimonials (dark luxury marquee) ── */ .kz-reviews-section { background: linear-gradient(180deg, #1a0810 0%, #2d0d1a 40%, #2d0d1a 60%, #1a0810 100%); padding: 72px 0 60px; position: relative; overflow: hidden; } .kz-reviews-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 700px 450px at 12% 50%, rgba(183,149,87,.07) 0%, transparent 100%), radial-gradient(ellipse 700px 450px at 88% 50%, rgba(107,26,58,.25) 0%, transparent 100%); } .kz-reviews-head { text-align: center; padding: 0 24px; margin-bottom: 48px; position: relative; } .kz-reviews-eyebrow { display: block; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--kz-gold); margin-bottom: 14px; } .kz-reviews-title { font-family: 'Cormorant', serif; font-size: 38px; font-weight: 700; color: #fef0e2; margin: 0 0 18px; line-height: 1.15; } .kz-reviews-rule { display: block; width: 80px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--kz-gold), transparent); margin: 0 auto; } .kz-rev-viewport { overflow: hidden; position: relative; } .kz-rev-viewport::before, .kz-rev-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .kz-rev-viewport::before { left: 0; background: linear-gradient(90deg, #1a0810, transparent); } .kz-rev-viewport::after { right: 0; background: linear-gradient(270deg, #1a0810, transparent); } .kz-rev-track { display: flex; gap: 20px; padding: 10px 0 28px; width: max-content; will-change: transform; } .kz-rev-card { flex-shrink: 0; width: 310px; background: rgba(255,255,255,.045); border: 1px solid rgba(183,149,87,.22); border-radius: 12px; padding: 28px 24px 24px; position: relative; overflow: hidden; transition: border-color .3s ease, background .3s ease; } .kz-rev-card:hover { border-color: rgba(183,149,87,.55); background: rgba(255,255,255,.08); } .kz-rev-card::before { content: '\201C'; font-family: 'Cormorant', serif; font-size: 140px; line-height: 1; color: rgba(183,149,87,.09); position: absolute; top: -14px; left: 10px; pointer-events: none; user-select: none; } .kz-rev-stars { font-size: 15px; color: #D4A44A; letter-spacing: 2px; margin-bottom: 12px; display: block; } .kz-rev-quote { font-family: 'Cormorant', serif; font-size: 17px; line-height: 1.6; color: #f0e4d0; font-style: italic; margin: 0 0 20px; position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .kz-rev-by { display: flex; align-items: center; gap: 12px; } .kz-rev-av { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(183,149,87,.45); background: rgba(183,149,87,.13); color: #D4A44A; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kz-rev-name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: #f0e4d0; display: block; } .kz-rev-tag { font-size: 11px; color: rgba(212,164,74,.65); letter-spacing: .5px; margin-top: 2px; display: block; } .kz-rev-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; } .kz-rev-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(183,149,87,.35); background: transparent; color: #B79557; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .22s ease; flex-shrink: 0; } .kz-rev-btn:hover { background: rgba(183,149,87,.15); border-color: #B79557; transform: scale(1.08); } .kz-rev-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .kz-rev-count { font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 500; color: rgba(212,164,74,.65); letter-spacing: 1px; } /* ── Trust strip ── */ .kz-trust{ background:var(--kz-beige); border-top:1px solid var(--kz-line); border-bottom:1px solid var(--kz-line); } .kz-trust .kz-wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:38px 24px; } .kz-trust-item{ display:flex; align-items:center; gap:14px; } .kz-trust-item svg{ width:34px; height:34px; color:var(--kz-gold-deep); flex-shrink:0; } .kz-trust-item b{ display:block; font-size:14px; color:var(--kz-ink); } .kz-trust-item small{ font-size:12px; color:var(--kz-muted); } /* ── Skeleton ── */ .kz-skel{ background:linear-gradient(90deg,#efe7d6 25%,#e8d9a0 50%,#efe7d6 75%); background-size:1200px 100%; animation:kz-shimmer 1.6s infinite linear; border-radius:4px; } @keyframes kz-shimmer{ 0%{background-position:-600px 0} 100%{background-position:600px 0} } /* ── Responsive ── */ @media (max-width:1199px){ .kz-title{ font-size:36px; } .kz-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:991px){ .kz-deals{ grid-template-columns:repeat(2,1fr); } .kz-occasions{ grid-template-columns:repeat(2,1fr); } .kz-grid{ grid-template-columns:repeat(2,1fr); } .kz-rev-card{ width: 270px; } .kz-trust .kz-wrap{ grid-template-columns:repeat(2,1fr); } .kz-promo-inner h2,.kz-sale-inner h2{ font-size:34px; } } @media (max-width:767px){ .kz-reviews-section{ padding: 52px 0 44px; } .kz-reviews-title{ font-size: 28px; } .kz-rev-card{ width: 260px; } .kz-rev-viewport::before,.kz-rev-viewport::after{ width: 48px; } .kz-section{ padding:46px 0; } .kz-wrap{ padding:0 16px; } .kz-title{ font-size:29px; } .kz-cat,.kz-cat-img{ width:104px; } .kz-cat-img{ height:104px; } /* Thinner band + hairline on the smaller circle, so the ring keeps the same visual weight relative to the photo instead of overpowering it. */ .kz-cat-circle-wrap::before{ inset:-4px; } .kz-cat-circle-wrap::after{ border-width:1.5px; } .kz-cat-mascot{ width:38px; left:-20px; bottom:-2px; } .kz-cat-diya{ width:21px; right:-5px; bottom:-6px; } /* Keep Diwali's height-based figure sizing on the smaller circles too. */ html.theme-diwali .kz-cat-mascot{ width:auto; height:52px; } html.theme-diwali .kz-cat-diya{ width:27px; } html.theme-christmas .kz-cat-mascot{ width:auto; height:52px; } html.theme-christmas .kz-cat-diya{ width:32px; } html.theme-bakrid .kz-cat-mascot{ width:auto; height:52px; } html.theme-bakrid .kz-cat-diya{ width:30px; } html.theme-pongal .kz-cat-mascot{ width:auto; height:52px; } html.theme-pongal .kz-cat-diya{ width:26px; } html.theme-tamilnewyear .kz-cat-mascot{ width:auto; height:52px; } html.theme-tamilnewyear .kz-cat-diya{ width:29px; } .kz-cats-prev{ left:2px; } .kz-cats-next{ right:2px; } .kz-promo{ min-height:auto; } .kz-promo-veil{ background:linear-gradient(180deg,rgba(78,17,41,.55),rgba(78,17,41,.92)); } .kz-promo-inner{ padding:40px 22px; max-width:100%; } .kz-sale-banner{ justify-content:center; text-align:center; } .kz-sale-veil{ background:rgba(78,17,41,.78); } .kz-sale-inner{ padding:40px 22px; } .kz-rewards{ padding:34px 22px; } .kz-rewards-text h2{ font-size:30px; } .kz-occasions{ grid-template-columns:1fr; } #rt-wa-float{ display:none !important; } } /* ── Header top message — consistent font across all pages ── */ .header-top-message { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.4px; } .header-top-message span { font-family: 'Montserrat', sans-serif !important; } /* ══════════════════════════════════════════════════════════════════════ DIWALI SEASONAL OVERLAY — index.html only (this file isn't loaded on any other page). Every selector below is scoped under html.theme-diwali, a class the storefront's theme-loader script adds to only when the admin has Diwali enabled (Settings → Theme). With no class present (normal theme, or another seasonal theme active), every rule in this block is inert and the homepage renders as if this block didn't exist — the underlying decor markup stays in index.html either way, it just doesn't get styled/shown. Every motif reuses the existing brand tokens (--kz-maroon / --kz-gold / --kz-ivory) plus one warm flame accent, is aria-hidden + pointer-events:none since it's decorative-only, and respects prefers-reduced-motion. ══════════════════════════════════════════════════════════════════════ */ :root { --kz-flame: #ffb648; } @keyframes kz-diya-flicker { 0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; } 25% { transform: scaleY(1.08) scaleX(.96); opacity: .92; } 50% { transform: scaleY(.94) scaleX(1.04); opacity: 1; } 75% { transform: scaleY(1.05) scaleX(.98); opacity: .95; } } @keyframes kz-pendant-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes kz-sparkle-twinkle { 0%, 100% { opacity: .18; transform: scale(.9); } 50% { opacity: .5; transform: scale(1.05); } } /* -based diyas (real asset files) can't target their internal flame path the way inline SVGs can, so the flicker is approximated as a whole- icon brightness pulse instead. */ @keyframes kz-diya-img-flicker { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.12); } 55% { filter: brightness(.95); } 80% { filter: brightness(1.08); } } /* .kz-cat-diya is a shared "small ornament at the circle's base" slot reused across themes (diya for Diwali, bauble for Christmas — see kz-home.js's THEME_CAT_ASSETS), so this flicker isn't Diwali-scoped; .kz-mc-diya (the hero marigold-diya cluster) IS Diwali-only artwork, so that one stays scoped to it. */ .kz-cat-diya { animation: kz-diya-img-flicker 2.6s ease-in-out infinite; } html.theme-diwali .kz-mc-diya { animation: kz-diya-img-flicker 2.6s ease-in-out infinite; } /* Diwali's illustrated characters are sized by HEIGHT rather than the shared width, so all five stand level on the same baseline — figures read as the same "size" when their heads line up, not when their boxes are equally wide, and one of them (girl-with-rocket) is a noticeably wider composite that would otherwise render short and stunted next to the others. Deliberately Diwali-scoped: the other themes' mascot slots hold landscape composites (Pongal/Bakrid's category-base-cluster is 2:1), which a global height rule would blow up to ~136px wide. */ html.theme-diwali .kz-cat-mascot { width: auto; height: 68px; } /* Both Diwali ornaments are landscape (diya-on-rangoli, gift-with-diya), so they need more width than the squarer baubles/pots the shared 28px slot was tuned for. */ html.theme-diwali .kz-cat-diya { width: 36px; } /* Same height-based approach for Christmas's illustrated mascots — the rotation spans a slender reindeer (ratio .55) to a broader Santa-with-tree (.83), so sizing by width would leave the reindeer looking shrunken next to the rest. */ html.theme-christmas .kz-cat-mascot { width: auto; height: 68px; } /* The gift-pair ornament is a wide landscape composite (two boxes + a greenery sprig) — needs more width than the round baubles the shared 28px slot was tuned for, or its detail turns to mud at that size. */ html.theme-christmas .kz-cat-diya { width: 42px; } /* Same height-based approach for Bakrid's illustrated lantern/animal mascots — ratios are fairly close (.89-1.22) but height-sizing keeps them consistent with how every other theme's mascot row is handled. */ html.theme-bakrid .kz-cat-mascot { width: auto; height: 68px; } /* Ornament (the alternate lantern-and-dates composition) is a landscape piece, same reasoning as the other themes' wider-than-round ornaments. */ html.theme-bakrid .kz-cat-diya { width: 40px; } /* Same height-based approach for Pongal's illustrated pot/kite mascots — the rotation spans a slender kite (ratio .77) to a broad pot cluster (1.37), so sizing by width would leave the kite looking shrunken. */ html.theme-pongal .kz-cat-mascot { width: auto; height: 68px; } /* Ornament (pot with coins) is near-square but detailed enough that it benefits from a touch more room than the shared 28px slot gives it. */ html.theme-pongal .kz-cat-diya { width: 34px; } /* Same height-based approach for Tamil New Year's illustrated children — the rotation spans ratio .56 to .71, the same portrait-mascot situation Diwali's kids and Christmas's reindeer both needed height-sizing for. */ html.theme-tamilnewyear .kz-cat-mascot { width: auto; height: 68px; } /* Ornament (kalash with fruit) is landscape, same reasoning as Diwali's diya-on-rangoli and Christmas's gift-pair. */ html.theme-tamilnewyear .kz-cat-diya { width: 38px; } /* Category mascot/ornament images are only inserted into the DOM by kz-home.js when a theme that defines them is active, but this hides them defensively too in case of a stale-cache mismatch between the two. */ html:not(.theme-diwali):not(.theme-christmas):not(.theme-pongal):not(.theme-bakrid):not(.theme-tamilnewyear) .kz-cat-mascot, html:not(.theme-diwali):not(.theme-christmas):not(.theme-pongal):not(.theme-bakrid):not(.theme-tamilnewyear) .kz-cat-diya, html:not(.theme-diwali):not(.theme-christmas):not(.theme-pongal):not(.theme-bakrid):not(.theme-tamilnewyear) .kz-cat-circle-wrap::before, html:not(.theme-diwali):not(.theme-christmas):not(.theme-pongal):not(.theme-bakrid):not(.theme-tamilnewyear) .kz-cat-circle-wrap::after, html:not(.theme-diwali):not(.theme-christmas):not(.theme-pongal):not(.theme-bakrid):not(.theme-tamilnewyear) .kz-card-body::before, html:not(.theme-diwali):not(.theme-christmas):not(.theme-pongal):not(.theme-bakrid):not(.theme-tamilnewyear) .kz-card-body::after { display: none !important; } html.theme-diwali .kz-diwali-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } html.theme-diwali .kz-diwali-decor svg, html.theme-diwali .kz-diwali-decor img, html.theme-diwali .kz-diwali-decor .kz-marigold-diya { position: absolute; } html.theme-diwali .kz-diwali-decor .kz-flame { transform-origin: 50% 85%; animation: kz-diya-flicker 2.4s ease-in-out infinite; } html.theme-diwali .kz-diwali-decor .kz-pendant { transform-origin: 50% 0%; animation: kz-pendant-swing 4.5s ease-in-out infinite; } html.theme-diwali .kz-diwali-decor .kz-spark { animation: kz-sparkle-twinkle 3s ease-in-out infinite; } html.theme-diwali .kz-diwali-decor .kz-mandala { opacity: .13; } html.theme-diwali .kz-diwali-decor .kz-marigold-diya { width: 92px; filter: drop-shadow(0 3px 6px rgba(43,26,14,.12)); } html.theme-diwali .kz-diwali-decor .kz-marigold-diya .kz-mc-flowers { display: block; width: 100%; } html.theme-diwali .kz-diwali-decor .kz-marigold-diya .kz-mc-diya { display: block; width: 52%; margin: -14px 0 0 34%; } html.theme-diwali .kz-diwali-decor .kz-marigold-diya.kz-mirror { transform: scaleX(-1); } /* Section 1: Shop by Category — warm wash + hanging pendants + sparkles */ html.theme-diwali .kz-diwali-cats { position: relative; overflow: hidden; } /* The garland PNG carries a sliver of transparent margin above the flowers (source asset), which reads as a gap between the section's top edge and the toran — pull the decor container up so the garland sits flush, hanging right off the top of the section as intended. */ html.theme-diwali .kz-diwali-cats .kz-diwali-decor { inset: -18px 0 auto 0; height: 130px; } html.theme-diwali .kz-diwali-cats::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(183,149,87,.10), transparent 70%), radial-gradient(ellipse 55% 50% at 88% 8%, rgba(107,26,58,.06), transparent 70%); } html.theme-diwali .kz-diwali-cats .kz-wrap, html.theme-diwali .kz-diwali-cats .kz-head, html.theme-diwali .kz-diwali-cats .kz-cats-wrap { position: relative; z-index: 1; } /* Section 2: Bestselling Sarees — diya + gift flourishes beside the heading */ html.theme-diwali .kz-diwali-fest { background: linear-gradient(180deg, #fdf3ec 0%, #f9ede2 100%) !important; position: relative; overflow: hidden; } html.theme-diwali .kz-diwali-fest .kz-wrap { position: relative; z-index: 1; } /* Corner diya sits low enough to fall under the product grid's own bottom row on shorter viewports — lift it above .kz-wrap so it reads as a flourish in front of the card corner instead of vanishing behind it. */ html.theme-diwali .kz-diwali-fest .kz-diwali-decor { z-index: 2; inset: -18px 0 auto 0; height: 130px; } html.theme-diwali .kz-fest-flourish { display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: -4px; } html.theme-diwali .kz-fest-flourish svg { flex-shrink: 0; } html.theme-diwali .kz-fest-flourish .kz-flame { transform-origin: 50% 85%; animation: kz-diya-flicker 2.2s ease-in-out infinite; } @keyframes kz-lantern-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } html.theme-diwali .kz-diwali-decor .kz-lantern { transform-origin: 50% 0%; animation: kz-lantern-sway 5s ease-in-out infinite; } /* Hero banner slider — pendants dangle from the very top edge down over the slide image; the decor layer sits ABOVE .kz-hero (z-index:2) since .kz-hero itself has overflow:hidden and would clip anything hung from its own edge. */ html.theme-diwali .kz-diwali-hero-wrap { position: relative; } html.theme-diwali .kz-diwali-hero-wrap > .kz-diwali-decor { z-index: 2; } html.theme-diwali .kz-diwali-decor .kz-hero-mixboard { filter: drop-shadow(0 6px 14px rgba(43,26,14,.22)); } html.theme-diwali .kz-diwali-decor .kz-hero-toran-corner { filter: drop-shadow(0 4px 10px rgba(43,26,14,.18)); } /* Section: USP strip (dark maroon bar) — thin gold hairline + two soft sparkles */ html.theme-diwali .kz-usp.kz-diwali-usp { position: relative; } html.theme-diwali .kz-usp.kz-diwali-usp::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--kz-gold-bright), transparent); } /* Section: Limited Time Deals — lantern corner + sparkles over the beige wash */ html.theme-diwali .kz-diwali-deals { position: relative; overflow: hidden; } html.theme-diwali .kz-diwali-deals .kz-wrap { position: relative; z-index: 1; } /* Section: Promo banner — small sparkle cluster tucked above the image, not over it */ html.theme-diwali .kz-diwali-promo { position: relative; } html.theme-diwali .kz-diwali-promo .kz-diwali-decor { inset: -18px 0 auto 0; height: 46px; } /* Section: Made for Celebrations — kalash + sparkle */ html.theme-diwali .kz-diwali-occ { position: relative; overflow: hidden; } html.theme-diwali .kz-diwali-occ .kz-wrap { position: relative; z-index: 1; } /* Corner flourish sits low enough to fall under the occasion-card row on shorter viewports — lift above .kz-wrap so it stays visible in front. */ html.theme-diwali .kz-diwali-occ .kz-diwali-decor { z-index: 2; } /* Section: Sale banner — sparkler accent tucked above the banner */ html.theme-diwali .kz-diwali-sale-wrap { position: relative; } /* The rocket renders taller than this strip (its 48x108 viewBox scales past the 48px box at the widths used here) — the shared .kz-diwali-decor rule sets overflow:hidden, which was silently cropping its bottom third. */ html.theme-diwali .kz-diwali-sale-wrap .kz-diwali-decor { inset: -20px 0 auto 0; height: 48px; overflow: visible; z-index: 2; } /* Section: Heritage Promise — diya + rangoli-dot divider under the heading */ html.theme-diwali .kz-diwali-rewards { position: relative; overflow: hidden; } html.theme-diwali .kz-diwali-rewards .kz-wrap { position: relative; z-index: 1; } /* The corner diya sits near the top edge of the opaque maroon banner box, which lives inside .kz-wrap (z-index:1) — with the decor layer left at its default z-index:0 the banner was drawn over almost all of it, only a sliver peeking out above the box's rounded top corner. */ html.theme-diwali .kz-diwali-rewards .kz-diwali-decor { z-index: 2; } /* Footer — small marigold toran pair at the top corners, carrying the festive dressing through to the very end of the page. */ html.theme-diwali .kz-diwali-footer { position: relative; overflow: hidden; } html.theme-diwali .kz-diwali-footer .kz-diwali-decor { z-index: 2; } /* Footer — full-width hanging garland across the top edge, carrying the festive dressing through to the very end of the page (Christmas analog of the Diwali corner-toran pair above). */ html.theme-christmas .kz-xmas-footer { position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-footer .kz-xmas-decor { z-index: 2; } /* Repeats the garland photo horizontally at a fixed 140px band height — shows the full artwork (branch, lights, hanging baubles and snowflakes) at a consistent scale regardless of footer width, rather than stretching one copy to width:100% (which would blow the height up on a wide screen) or cropping it down to a flat strip (which was losing the ornaments). */ html.theme-christmas .kz-xmas-footer .kz-xmas-footer-garland { position: absolute; height: 98px; pointer-events: none; background-image: url('../images/christmas_theme/footer-garland-baubles-wide.png'); background-repeat: repeat-x; background-position: top left; background-size: auto 98px; } /* Clears the 98px garland band with a bit of breathing room, instead of the column headings sitting flush under it (only 20px of padding exists there by default). */ html.theme-christmas .kz-xmas-footer .footer-top { padding-top: 116px; } /* Footer — marigold pair at the top-right corner + a small pot cluster beside the address block, the Pongal analogs of the Diwali toran pair and Christmas footer Santa in this same section. */ html.theme-pongal .kz-pongal-footer { position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-footer .kz-pongal-decor { z-index: 2; } /* Footer — marigold/banana/bell cluster at the top-right corner, the Tamil New Year analog of the Diwali toran pair in this same section. */ html.theme-tamilnewyear .kz-tamilnewyear-footer { position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-footer .kz-tamilnewyear-decor { z-index: 2; } /* Footer — lantern/crescent pair at both top corners, the Bakrid analog of the other themes' footer corner pieces in this same section. */ html.theme-bakrid .kz-bakrid-footer { position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-footer .kz-bakrid-decor { z-index: 2; } /* The left lantern (up to 132px wide, ~91px tall) sits right where the logo does — decor is z-index:2 above the static footer-top, so at that size it was painting over the logo instead of just framing the corner. Extra top padding gives the logo clearance instead of shrinking the lantern back down. */ html.theme-bakrid .kz-bakrid-footer .footer-top { padding-top: 108px; } @media (max-width: 640px) { html.theme-bakrid .kz-bakrid-footer .footer-top { padding-top: 56px; } } html.theme-diwali .kz-rangoli-dots { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 10px 0 18px; } html.theme-diwali .kz-rangoli-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--kz-gold); opacity: .55; } html.theme-diwali .kz-rangoli-dots span:nth-child(2) { background: var(--kz-maroon); opacity: .4; } html.theme-diwali .kz-rangoli-dots span:nth-child(4) { background: var(--kz-maroon); opacity: .4; } html:not(.theme-diwali) .kz-rangoli-dots { display: none; } /* Section: Testimonials — sparkles flanking the heading */ html.theme-diwali .kz-reviews-section.kz-diwali-reviews { position: relative; overflow: hidden; } html.theme-diwali .kz-reviews-head { position: relative; z-index: 1; } /* Section: Trust strip (dark maroon bar) — matching gold hairline */ html.theme-diwali .kz-trust.kz-diwali-trust { position: relative; } html.theme-diwali .kz-trust.kz-diwali-trust::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--kz-gold-bright), transparent); } /* Default state (normal theme, or a different seasonal theme active): every decor layer is hidden outright rather than just unstyled, so nothing flashes visible for a frame before the theme-loader script resolves. */ html:not(.theme-diwali) .kz-diwali-decor, html:not(.theme-diwali) .kz-fest-flourish { display: none !important; } @media (prefers-reduced-motion: reduce) { html.theme-diwali .kz-diwali-decor .kz-flame, html.theme-diwali .kz-diwali-decor .kz-pendant, html.theme-diwali .kz-diwali-decor .kz-lantern, html.theme-diwali .kz-diwali-decor .kz-spark, html.theme-diwali .kz-fest-flourish .kz-flame, html.theme-diwali .kz-mc-diya, .kz-cat-diya, .kz-cat-mascot { animation: none; transition: none; } /* Ring stays — it's the design; only its light-sweep motion is dropped. */ .kz-cat-circle-wrap, .kz-cat-circle-wrap::before { transition: none; } .kz-cat:hover .kz-cat-circle-wrap { transform: none; } .kz-cat:hover .kz-cat-circle-wrap::before { transform: none; } } @media (max-width: 640px) { html.theme-diwali .kz-diwali-decor .kz-pendant-side { display: none; } /* hanging side ornaments only suit wider viewports */ html.theme-diwali .kz-diwali-decor .kz-corner-lg { transform: scale(.75); transform-origin: bottom; } html.theme-diwali .kz-diwali-decor .kz-mandala { display: none; } html.theme-diwali .kz-diwali-decor .kz-marigold-diya { transform: scale(.65); transform-origin: bottom; } html.theme-diwali .kz-diwali-decor .kz-marigold-diya.kz-mirror { transform: scale(-.65, .65); transform-origin: bottom; } html.theme-diwali .kz-diwali-decor .kz-hero-mixboard { width: min(38%, 150px) !important; } html.theme-diwali .kz-fest-flourish { gap: 12px; } html.theme-diwali .kz-fest-flourish svg { width: 30px; height: 30px; } } /* ══════════════════════════════════════════════════════════════════════ CHRISTMAS SEASONAL OVERLAY — index.html only. Mirrors the Diwali block's structure exactly: every selector is scoped under html.theme-christmas, a class the storefront's theme-loader script adds to only when the admin has Christmas enabled (Settings → Theme). With no class present, every rule here is inert. Assets live in assets/images/christmas_theme/ and are referenced as real files (no inline SVG), matching the approach used for the Diwali assets. ══════════════════════════════════════════════════════════════════════ */ @keyframes kz-snow-drift { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(6px) rotate(8deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes kz-bauble-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes kz-lights-twinkle { 0%, 100% { opacity: .75; } 50% { opacity: 1; filter: brightness(1.25); } } html.theme-christmas .kz-xmas-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } html.theme-christmas .kz-xmas-decor img { position: absolute; } html.theme-christmas .kz-xmas-decor .kz-snow { animation: kz-snow-drift 4.5s ease-in-out infinite; } html.theme-christmas .kz-xmas-decor .kz-bauble { transform-origin: 50% 0%; animation: kz-bauble-swing 4.2s ease-in-out infinite; } html.theme-christmas .kz-xmas-decor .kz-lights { animation: kz-lights-twinkle 2.4s ease-in-out infinite; } html.theme-christmas .kz-xmas-decor .kz-corner-lg.kz-mirror { transform: scaleX(-1); } /* Hero figure cluster (Santa/tree/reindeer/gift-pair) — a soft ground shadow so they read as standing ON the hero rather than pasted over it, plus the same gentle bob every standing character gets elsewhere on the page, staggered per figure so all four don't rise and fall in lockstep. */ html.theme-christmas .kz-xmas-decor .kz-xmas-figure { filter: drop-shadow(0 6px 5px rgba(20,15,10,.22)); animation: kz-balloon-bob 4.2s ease-in-out infinite; /* Per-figure stagger comes from each 's own inline animation-delay (same convention the sparkle/snow elements already use elsewhere on this page) rather than :nth-of-type — this div mixes baubles, snowflakes and garlands in with the figures, so nth-of-type would count position among ALL sibling tags, not just the figures. */ } /* Shared structural wrapper reused by both seasonal themes on the hero — harmless to leave unguarded since position:relative alone renders nothing. */ .kz-diwali-hero-wrap { position: relative; } html.theme-christmas .kz-diwali-hero-wrap > .kz-xmas-decor { z-index: 2; } /* Dark corner wash the pine-branch photos sit on top of — see the comment by their tags for why. Sits behind the pine images in the same decor layer (earlier in DOM order = painted first = underneath). */ html.theme-christmas .kz-xmas-decor .kz-xmas-corner-glow { position: absolute; width: 260px; height: 220px; pointer-events: none; } html.theme-christmas .kz-xmas-decor .kz-corner-glow-l { background: radial-gradient(ellipse at top left, rgba(10,20,12,.38) 0%, rgba(10,20,12,.16) 45%, transparent 72%); } html.theme-christmas .kz-xmas-decor .kz-corner-glow-r { background: radial-gradient(ellipse at top right, rgba(10,20,12,.38) 0%, rgba(10,20,12,.16) 45%, transparent 72%); } /* Section 1: Shop by Category — icy wash + hanging baubles/star + snow */ html.theme-christmas .kz-xmas-cats { position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-cats::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(30,110,90,.08), transparent 70%), radial-gradient(ellipse 55% 50% at 88% 8%, rgba(107,26,58,.05), transparent 70%); } html.theme-christmas .kz-xmas-cats .kz-wrap, html.theme-christmas .kz-xmas-cats .kz-head, html.theme-christmas .kz-xmas-cats .kz-cats-wrap { position: relative; z-index: 1; } /* Section 2: Bestselling Sarees — candy cane + gift flourishes beside the heading */ html.theme-christmas .kz-xmas-fest { background: linear-gradient(180deg, #eef6f0 0%, #f3f8f4 100%) !important; position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-fest .kz-wrap { position: relative; z-index: 1; } /* Corner candy-cane/gift-box sit low enough to fall under the product grid's own bottom row on shorter viewports — lift above .kz-wrap so they read as a flourish in front of the card corner instead of vanishing behind it. */ html.theme-christmas .kz-xmas-fest .kz-xmas-decor { z-index: 2; } /* Corner pine images here are smaller (150px) than the hero's (230px) — scale the glow wash down to match, or it reads as a diffuse haze around a comparatively small branch. */ html.theme-christmas .kz-xmas-fest .kz-xmas-corner-glow { width: 170px; height: 145px; } /* Section: USP strip — icy hairline */ html.theme-christmas .kz-usp.kz-xmas-usp { position: relative; } html.theme-christmas .kz-usp.kz-xmas-usp::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #cfe3d8, transparent); } /* Section: Limited Time Deals — pine garland corner + snow over the beige wash */ html.theme-christmas .kz-xmas-deals { position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-deals .kz-wrap { position: relative; z-index: 1; } /* Section: Promo banner — snow tucked above the image, not over it */ html.theme-christmas .kz-xmas-promo { position: relative; } html.theme-christmas .kz-xmas-promo .kz-xmas-decor { inset: -18px 0 auto 0; height: 46px; } /* Section: Made for Celebrations — gift stack + snow */ html.theme-christmas .kz-xmas-occ { position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-occ .kz-wrap { position: relative; z-index: 1; } /* Corner flourish sits low enough to fall under the occasion-card row on shorter viewports — lift above .kz-wrap so it stays visible in front. */ html.theme-christmas .kz-xmas-occ .kz-xmas-decor { z-index: 2; } /* Section: Sale banner — string lights strip tucked above the banner */ html.theme-christmas .kz-xmas-sale-wrap { position: relative; } /* string-lights.svg is a 320x80 (4:1) graphic — at the widths used here (up to 420px) it renders ~100-105px tall, well past this 50px strip. The shared .kz-xmas-decor rule sets overflow:hidden, which was cropping the lower portion of every bulb (worse toward the middle of the sagging wire, where they hang lowest) — the truncated, "not visible properly" look reported. Let it overflow the strip so the full garland renders. */ html.theme-christmas .kz-xmas-sale-wrap .kz-xmas-decor { inset: -22px 0 auto 0; height: 50px; overflow: visible; z-index: 2; } /* Section: Heritage Promise — bell + snow-dot divider under the heading */ html.theme-christmas .kz-xmas-rewards { position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-rewards .kz-wrap { position: relative; z-index: 1; } html.theme-christmas .kz-xmas-rewards .kz-xmas-decor { z-index: 2; } html.theme-christmas .kz-snow-dots { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 10px 0 18px; } html.theme-christmas .kz-snow-dots span { width: 5px; height: 5px; border-radius: 50%; background: #8fb5a3; opacity: .6; } html.theme-christmas .kz-snow-dots span:nth-child(2) { background: var(--kz-maroon); opacity: .35; } html.theme-christmas .kz-snow-dots span:nth-child(4) { background: var(--kz-maroon); opacity: .35; } html:not(.theme-christmas) .kz-snow-dots { display: none; } /* Section: Testimonials — snow flanking the heading */ html.theme-christmas .kz-reviews-section.kz-xmas-reviews { position: relative; overflow: hidden; } html.theme-christmas .kz-xmas-reviews .kz-reviews-head { position: relative; z-index: 1; } /* Section: Trust strip — matching icy hairline */ html.theme-christmas .kz-trust.kz-xmas-trust { position: relative; } html.theme-christmas .kz-trust.kz-xmas-trust::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #cfe3d8, transparent); } /* Default state: hide outright rather than just unstyled, so nothing flashes visible for a frame before the theme-loader script resolves. */ html:not(.theme-christmas) .kz-xmas-decor { display: none !important; } @media (prefers-reduced-motion: reduce) { html.theme-christmas .kz-xmas-decor .kz-snow, html.theme-christmas .kz-xmas-decor .kz-bauble, html.theme-christmas .kz-xmas-decor .kz-lights, html.theme-christmas .kz-xmas-decor .kz-xmas-figure { animation: none; } } @media (max-width: 640px) { html.theme-christmas .kz-xmas-decor .kz-pendant-side { display: none; } html.theme-christmas .kz-xmas-footer .kz-xmas-footer-garland { height: 60px; background-size: auto 60px; } html.theme-christmas .kz-xmas-footer .footer-top { padding-top: 76px; } html.theme-christmas .kz-xmas-decor .kz-corner-lg { transform: scale(.75); transform-origin: bottom; } html.theme-christmas .kz-xmas-decor .kz-corner-lg.kz-mirror { transform: scale(-.75, .75); transform-origin: bottom; } html.theme-christmas .kz-xmas-decor .kz-xmas-corner-glow { width: 190px; height: 160px; } /* Four standing figures plus the garland is too much at phone width — shrink the figures rather than dropping any, so the scene still reads as "Santa's corner / reindeer's corner" instead of going bare. A dedicated keyframe (not a static transform) because the bob animation's own `transform: translateY(...)` would otherwise replace a plain `transform: scale()` outright rather than combine with it — the two need to be baked into one set of keyframes to coexist. */ html.theme-christmas .kz-xmas-decor .kz-xmas-figure { transform-origin: bottom; animation-name: kz-balloon-bob-sm; } } /* Shared grounded-figure bob. Defined here (not inside any one theme block) because Christmas, Bakrid and Pongal figures all reference it — it used to live in the New Year block, which no longer exists now that Christmas and New Year are one theme. */ @keyframes kz-balloon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes kz-balloon-bob-sm { 0%, 100% { transform: scale(.62) translateY(0); } 50% { transform: scale(.62) translateY(-7px); } } /* ══════════════════════════════════════════════════════════════════════ PONGAL SEASONAL OVERLAY — index.html only. Mirrors the Diwali/Christmas blocks' structure: every selector scoped under html.theme-pongal, a class the storefront's theme-loader script adds to only when the admin has Pongal enabled (Settings → Theme). Assets live in assets/images/pongal_theme/ (marigold torans, pongal pot, sugarcane, kites, sparkles) — harvest-festival motifs rather than a character mascot set, since the source pack doesn't include one for Pongal. ══════════════════════════════════════════════════════════════════════ */ @keyframes kz-toran-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes kz-kite-drift { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } } html.theme-pongal .kz-pongal-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } html.theme-pongal .kz-pongal-decor img { position: absolute; } html.theme-pongal .kz-pongal-decor .kz-toran { transform-origin: 50% 0%; animation: kz-toran-sway 4.8s ease-in-out infinite; } html.theme-pongal .kz-pongal-decor .kz-kite { animation: kz-kite-drift 5.5s ease-in-out infinite; } html.theme-pongal .kz-pongal-decor .kz-spark { animation: kz-sparkle-twinkle 3s ease-in-out infinite; } /* Hero pot-cluster pair — same soft ground shadow and bob every standing/ grounded piece gets elsewhere on the page (Christmas's figures, Bakrid's sheep/goat), so the two read as resting ON the hero rather than pasted over it. Stagger comes from each 's own inline animation-delay, not :nth-of-type (see the Christmas/Bakrid comments on why). */ html.theme-pongal .kz-pongal-decor .kz-pongal-figure { filter: drop-shadow(0 6px 5px rgba(20,15,10,.22)); animation: kz-balloon-bob 4.2s ease-in-out infinite; } html.theme-pongal .kz-diwali-hero-wrap > .kz-pongal-decor { z-index: 2; } /* Kolam watermark — the source art is already near-white line work (unlike the bold gold Diwali mandala SVG this class was written for), so it needs a much lighter touch than that rule's opacity:.13 to stay visible at all against the hero photo. */ html.theme-pongal .kz-pongal-decor .kz-mandala { opacity: .4; } @media (max-width: 640px) { html.theme-pongal .kz-pongal-decor .kz-mandala { display: none; } } /* Section 1: Shop by Category — warm harvest wash + torans + sparkles */ html.theme-pongal .kz-pongal-cats { position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-cats::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(217,151,46,.09), transparent 70%), radial-gradient(ellipse 55% 50% at 88% 8%, rgba(107,26,58,.05), transparent 70%); } html.theme-pongal .kz-pongal-cats .kz-wrap, html.theme-pongal .kz-pongal-cats .kz-head, html.theme-pongal .kz-pongal-cats .kz-cats-wrap { position: relative; z-index: 1; } /* Section 2: Bestselling Sarees — kite + pongal pot flourish beside heading */ html.theme-pongal .kz-pongal-fest { background: linear-gradient(180deg, #fdf6ea 0%, #faf0dc 100%) !important; position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-fest .kz-wrap { position: relative; z-index: 1; } /* Corner kite/pongal-pot sit low enough to fall under the product grid's own bottom row on shorter viewports — lift above .kz-wrap so they read as a flourish in front of the card corner instead of vanishing behind it. */ html.theme-pongal .kz-pongal-fest .kz-pongal-decor { z-index: 2; } /* Section: USP / Trust strips — warm turmeric-gold hairline */ html.theme-pongal .kz-usp.kz-pongal-usp, html.theme-pongal .kz-trust.kz-pongal-trust { position: relative; } html.theme-pongal .kz-usp.kz-pongal-usp::before, html.theme-pongal .kz-trust.kz-pongal-trust::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #e8b84a, transparent); } /* Section: Limited Time Deals — sugarcane corner + sparkles */ html.theme-pongal .kz-pongal-deals { position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-deals .kz-wrap { position: relative; z-index: 1; } /* The decor layer was left at its default z-index:0 here, so it was painting BEHIND .kz-wrap (z-index:1) — the pot scene wasn't just small, it was mostly hidden under the product grid. Same fix already applied to this section's Diwali/Christmas/Bakrid equivalents. */ html.theme-pongal .kz-pongal-deals .kz-pongal-decor { z-index: 2; } /* Section: Promo banner — sparkles tucked above the image */ html.theme-pongal .kz-pongal-promo { position: relative; } html.theme-pongal .kz-pongal-promo .kz-pongal-decor { inset: -18px 0 auto 0; height: 46px; } /* Section: Made for Celebrations — flower-cane cluster + sparkle */ html.theme-pongal .kz-pongal-occ { position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-occ .kz-wrap { position: relative; z-index: 1; } /* Corner flourish sits low enough to fall under the occasion-card row on shorter viewports — lift above .kz-wrap so it stays visible in front. */ html.theme-pongal .kz-pongal-occ .kz-pongal-decor { z-index: 2; } /* Section: Sale banner — divider ornament strip tucked above the banner */ html.theme-pongal .kz-pongal-sale-wrap { position: relative; } html.theme-pongal .kz-pongal-sale-wrap .kz-pongal-decor { inset: -20px 0 auto 0; height: 48px; } /* Section: Heritage Promise — gold bell flourish + cane-dot divider */ html.theme-pongal .kz-pongal-rewards { position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-rewards .kz-wrap { position: relative; z-index: 1; } html.theme-pongal .kz-pongal-rewards .kz-pongal-decor { z-index: 2; } html.theme-pongal .kz-cane-dots { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 10px 0 18px; } html.theme-pongal .kz-cane-dots span { width: 5px; height: 5px; border-radius: 50%; background: #e8b84a; opacity: .6; } html.theme-pongal .kz-cane-dots span:nth-child(2) { background: var(--kz-maroon); opacity: .35; } html.theme-pongal .kz-cane-dots span:nth-child(4) { background: var(--kz-maroon); opacity: .35; } html:not(.theme-pongal) .kz-cane-dots { display: none; } /* Section: Testimonials — sparkles flanking the heading */ html.theme-pongal .kz-reviews-section.kz-pongal-reviews { position: relative; overflow: hidden; } html.theme-pongal .kz-pongal-reviews .kz-reviews-head { position: relative; z-index: 1; } /* Default state: hide outright rather than just unstyled, so nothing flashes visible for a frame before the theme-loader script resolves. */ html:not(.theme-pongal) .kz-pongal-decor { display: none !important; } @media (prefers-reduced-motion: reduce) { html.theme-pongal .kz-pongal-decor .kz-toran, html.theme-pongal .kz-pongal-decor .kz-kite, html.theme-pongal .kz-pongal-decor .kz-spark, html.theme-pongal .kz-pongal-decor .kz-pongal-figure { animation: none; } } @media (max-width: 640px) { html.theme-pongal .kz-pongal-decor .kz-pendant-side { display: none; } html.theme-pongal .kz-pongal-decor .kz-corner-lg { transform: scale(.75); transform-origin: bottom; } /* Same reasoning as Christmas/Bakrid's figure pairs: a static transform:scale() would be silently replaced (not combined) by the bob animation's own transform during playback, so mobile reuses the shared scaled-down keyframe instead. */ html.theme-pongal .kz-pongal-decor .kz-pongal-figure { transform-origin: bottom; animation-name: kz-balloon-bob-sm; } } /* ══════════════════════════════════════════════════════════════════════ BAKRID SEASONAL OVERLAY — index.html only. Mirrors the Diwali/Christmas/ Pongal blocks' structure: every selector scoped under html.theme-bakrid, a class the storefront's theme-loader script adds to only when the admin has Bakrid enabled (Settings → Theme). Assets live in assets/images/bakrid_theme/ (crescents, lanterns, mosque silhouettes, arabesque ornaments, palm fronds) — Eid-al-Adha motifs. ══════════════════════════════════════════════════════════════════════ */ @keyframes kz-crescent-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes kz-lantern-hang-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } } /* Lit-lantern flicker for the palm-and-lantern corner pieces — a raster photo can't have its flame path animated separately the way an inline SVG can (same limitation noted for the -based diyas), so the whole image gets a brightness pulse plus a warm drop-shadow bloom that grows and fades with it. The glow is what sells "light spilling through the glass" rather than just the photo itself dimming and brightening. */ @keyframes kz-lantern-glow-flicker { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,196,92,0)); } 30% { filter: brightness(1.14) drop-shadow(0 0 14px rgba(255,196,92,.55)); } 55% { filter: brightness(.97) drop-shadow(0 0 6px rgba(255,196,92,.28)); } 80% { filter: brightness(1.1) drop-shadow(0 0 11px rgba(255,196,92,.45)); } } html.theme-bakrid .kz-bakrid-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } html.theme-bakrid .kz-bakrid-decor img { position: absolute; } html.theme-bakrid .kz-bakrid-decor .kz-crescent { transform-origin: 50% 0%; animation: kz-crescent-sway 4.5s ease-in-out infinite; } html.theme-bakrid .kz-bakrid-decor .kz-lantern-hang { transform-origin: 50% 0%; animation: kz-lantern-hang-sway 5s ease-in-out infinite; } html.theme-bakrid .kz-bakrid-decor .kz-spark { animation: kz-sparkle-twinkle 3s ease-in-out infinite; } html.theme-bakrid .kz-bakrid-decor .kz-mandala { opacity: .13; } /* Stagger comes from each 's own inline animation-delay, not :nth-of-type — this div mixes sparks/mandala/figures in among the lanterns, so nth-of-type would count position among ALL sibling tags rather than just the two glow elements (same pitfall hit and fixed for Christmas's figure pair). */ html.theme-bakrid .kz-bakrid-decor .kz-lantern-glow { animation: kz-lantern-glow-flicker 3.2s ease-in-out infinite; } /* Hero figure pair (sheep-with-lantern / goat-with-crescent) — same soft ground shadow and staggered bob every standing character gets elsewhere on the page (Christmas's Santa/reindeer cluster uses the identical pattern), so the two read as standing ON the hero rather than pasted over it. */ html.theme-bakrid .kz-bakrid-decor .kz-bakrid-figure { filter: drop-shadow(0 6px 5px rgba(20,15,10,.22)); animation: kz-balloon-bob 4.2s ease-in-out infinite; } html.theme-bakrid .kz-diwali-hero-wrap > .kz-bakrid-decor { z-index: 2; } /* Section 1: Shop by Category — warm wash + hanging crescents/lanterns + stars */ html.theme-bakrid .kz-bakrid-cats { position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-cats::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(58,110,140,.09), transparent 70%), radial-gradient(ellipse 55% 50% at 88% 8%, rgba(107,26,58,.05), transparent 70%); } html.theme-bakrid .kz-bakrid-cats .kz-wrap, html.theme-bakrid .kz-bakrid-cats .kz-head, html.theme-bakrid .kz-bakrid-cats .kz-cats-wrap { position: relative; z-index: 1; } /* Section 2: Bestselling Sarees — lantern + crescent-mosque flourish beside heading */ html.theme-bakrid .kz-bakrid-fest { background: linear-gradient(180deg, #f2f6f8 0%, #eef3f6 100%) !important; position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-fest .kz-wrap { position: relative; z-index: 1; } /* Corner lantern/crescent-mosque sit low enough to fall under the product grid's own bottom row on shorter viewports — lift above .kz-wrap so they read as a flourish in front of the card corner instead of vanishing behind it. */ html.theme-bakrid .kz-bakrid-fest .kz-bakrid-decor { z-index: 2; } /* Section: USP / Trust strips — steel-blue hairline */ html.theme-bakrid .kz-usp.kz-bakrid-usp, html.theme-bakrid .kz-trust.kz-bakrid-trust { position: relative; } html.theme-bakrid .kz-usp.kz-bakrid-usp::before, html.theme-bakrid .kz-trust.kz-bakrid-trust::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #7fa8bd, transparent); } /* Section: Limited Time Deals — palm corner + stars over the beige wash */ html.theme-bakrid .kz-bakrid-deals { position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-deals .kz-wrap { position: relative; z-index: 1; } /* The decor layer was left at its default z-index:0 here, so it was painting BEHIND .kz-wrap (z-index:1) — same bug already fixed in this section's Pongal/Tamil New Year equivalents. */ html.theme-bakrid .kz-bakrid-deals .kz-bakrid-decor { z-index: 2; } /* Section: Promo banner — stars tucked above the image */ html.theme-bakrid .kz-bakrid-promo { position: relative; } html.theme-bakrid .kz-bakrid-promo .kz-bakrid-decor { inset: -18px 0 auto 0; height: 46px; } /* Section: Made for Celebrations — lantern-dome cluster + star */ html.theme-bakrid .kz-bakrid-occ { position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-occ .kz-wrap { position: relative; z-index: 1; } /* Corner flourish sits low enough to fall under the occasion-card row on shorter viewports — lift above .kz-wrap so it stays visible in front. */ html.theme-bakrid .kz-bakrid-occ .kz-bakrid-decor { z-index: 2; } /* Section: Sale banner — divider ornament strip tucked above the banner */ html.theme-bakrid .kz-bakrid-sale-wrap { position: relative; } html.theme-bakrid .kz-bakrid-sale-wrap .kz-bakrid-decor { inset: -20px 0 auto 0; height: 48px; } /* Section: Heritage Promise — crescent flourish + crescent-dot divider */ html.theme-bakrid .kz-bakrid-rewards { position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-rewards .kz-wrap { position: relative; z-index: 1; } html.theme-bakrid .kz-bakrid-rewards .kz-bakrid-decor { z-index: 2; } html.theme-bakrid .kz-crescent-dots { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 10px 0 18px; } html.theme-bakrid .kz-crescent-dots span { width: 5px; height: 5px; border-radius: 50%; background: #7fa8bd; opacity: .6; } html.theme-bakrid .kz-crescent-dots span:nth-child(2) { background: var(--kz-maroon); opacity: .35; } html.theme-bakrid .kz-crescent-dots span:nth-child(4) { background: var(--kz-maroon); opacity: .35; } html:not(.theme-bakrid) .kz-crescent-dots { display: none; } /* Section: Testimonials — stars flanking the heading */ html.theme-bakrid .kz-reviews-section.kz-bakrid-reviews { position: relative; overflow: hidden; } html.theme-bakrid .kz-bakrid-reviews .kz-reviews-head { position: relative; z-index: 1; } /* Default state: hide outright rather than just unstyled, so nothing flashes visible for a frame before the theme-loader script resolves. */ html:not(.theme-bakrid) .kz-bakrid-decor { display: none !important; } @media (prefers-reduced-motion: reduce) { html.theme-bakrid .kz-bakrid-decor .kz-crescent, html.theme-bakrid .kz-bakrid-decor .kz-lantern-hang, html.theme-bakrid .kz-bakrid-decor .kz-spark, html.theme-bakrid .kz-bakrid-decor .kz-bakrid-figure, html.theme-bakrid .kz-bakrid-decor .kz-lantern-glow { animation: none; } } @media (max-width: 640px) { html.theme-bakrid .kz-bakrid-decor .kz-pendant-side { display: none; } html.theme-bakrid .kz-bakrid-decor .kz-corner-lg { transform: scale(.75); transform-origin: bottom; } html.theme-bakrid .kz-bakrid-decor .kz-mandala { display: none; } /* Same reasoning as Christmas's figure pair: a static transform:scale() would be silently replaced (not combined) by the bob animation's own transform during playback, so the scale is baked into the same reusable mobile keyframe instead. */ html.theme-bakrid .kz-bakrid-decor .kz-bakrid-figure { transform-origin: bottom; animation-name: kz-balloon-bob-sm; } } /* ══════════════════════════════════════════════════════════════════════ TAMIL NEW YEAR SEASONAL OVERLAY — index.html only. Mirrors the Diwali/ Christmas/Pongal/Bakrid blocks' structure: every selector scoped under html.theme-tamilnewyear, a class the storefront's theme-loader script adds to only when the admin has this theme enabled (Settings → Theme). Covers Puthandu, Vishu & Ugadi — kalash pots, mango leaves, a temple gopuram, a banana plant and festive children, live in assets/images/tamilnewyear_theme/. .kz-toran carries the pendant sway (shared keyframe, already used by Pongal's marigold torans), .kz-cat-diya carries the shared flame-flicker (the kids are holding lit diyas, so this is a literal fit, not a reuse of convenience), .kz-corner-lg carries the shared mobile scale-down. Only the hero's grounded figure pair and the sparkle needed their own rules, same as every other theme block. */ html.theme-tamilnewyear .kz-tamilnewyear-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } html.theme-tamilnewyear .kz-tamilnewyear-decor img { position: absolute; } html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-toran { transform-origin: 50% 0%; animation: kz-toran-sway 4.8s ease-in-out infinite; } html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-spark { animation: kz-sparkle-twinkle 3s ease-in-out infinite; } /* Hero kalash/banana-plant/gopuram pair — same soft ground shadow and bob every standing/grounded piece gets elsewhere on the page. Stagger comes from each 's own inline animation-delay, not :nth-of-type (see the Christmas/Bakrid/Pongal comments on why). */ html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tamilnewyear-figure { filter: drop-shadow(0 6px 5px rgba(20,15,10,.22)); animation: kz-balloon-bob 4.2s ease-in-out infinite; } /* The gopuram has no ground plane of its own the way the banana plant and kalash do (roots, a resting surface) — it's just a tall transparent silhouette that stops. Flush against a busy hero photo, a hard stop reads as a pasted cutout rather than a standing monument, especially at the height this piece needs to be legible. Fading the base into the photo with a mask gradient is the fix; sizing alone can't solve it. */ html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tamilnewyear-gopuram { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); } /* Hero garland — flower row everywhere, long bell-drops ONLY at the two outer corners. The artwork bakes both into one square PNG: the dense flower row occupies the top ~16% of its height, and exactly two long drops hang below that, at 8.4% and 94.2% of its width. Tiling it across the banner therefore produced a drop roughly every 20% — they fell straight through the headline and across the model's face, which is the disturbance being fixed here. The corner drops were fine and are kept. Splitting it in CSS rather than commissioning a second "row-only" PNG keeps one asset and one scale, so the row can never drift out of alignment with the corner pieces: .kz-tny-band masks a copy down to just the flower row (fades out right below the short bells, so the severed strands dissolve instead of ending on a hard cut — same mask trick the gopuram above uses for the same reason). .kz-tny-drop-* re-reveals ONE drop, by clipping a full unmasked copy to the narrow window that contains it. Because it is the same image at the same size and position as the band copy beneath it, the overlapping row pixels are identical and the seam is invisible. */ html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tny-band { -webkit-mask-image: linear-gradient(to bottom, #000 16%, transparent 23%); mask-image: linear-gradient(to bottom, #000 16%, transparent 23%); } /* Windows chosen to contain the drop (8.4% / 94.2%) and nothing else. */ html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tny-drop-l { clip-path: inset(0 86% 0 0); } html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tny-drop-r { clip-path: inset(0 0 0 88%); } html.theme-tamilnewyear .kz-diwali-hero-wrap > .kz-tamilnewyear-decor { z-index: 2; } /* Kolam watermark — same near-white line art as the Pongal theme's copy of this asset, needs the same lighter opacity to stay visible at all. */ html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-mandala { opacity: .4; } @media (max-width: 640px) { html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-mandala { display: none; } } /* Section 1: Shop by Category — fresh mango-leaf-green wash + torans + sparkles */ html.theme-tamilnewyear .kz-tamilnewyear-cats { position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-cats::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(90,140,70,.10), transparent 70%), radial-gradient(ellipse 55% 50% at 88% 8%, rgba(107,26,58,.05), transparent 70%); } html.theme-tamilnewyear .kz-tamilnewyear-cats .kz-wrap, html.theme-tamilnewyear .kz-tamilnewyear-cats .kz-head, html.theme-tamilnewyear .kz-tamilnewyear-cats .kz-cats-wrap { position: relative; z-index: 1; } /* Section 2: Bestselling Sarees — a child-with-diya + kalash flourish beside heading */ html.theme-tamilnewyear .kz-tamilnewyear-fest { background: linear-gradient(180deg, #f6f9f0 0%, #f1f6e9 100%) !important; position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-fest .kz-wrap { position: relative; z-index: 1; } /* Corner pieces sit low enough to fall under the product grid's own bottom row on shorter viewports — lift above .kz-wrap so they read as a flourish in front of the card corner instead of vanishing behind it. */ html.theme-tamilnewyear .kz-tamilnewyear-fest .kz-tamilnewyear-decor { z-index: 2; } /* Section: USP / Trust strips — fresh leaf-green hairline */ html.theme-tamilnewyear .kz-usp.kz-tamilnewyear-usp, html.theme-tamilnewyear .kz-trust.kz-tamilnewyear-trust { position: relative; } html.theme-tamilnewyear .kz-usp.kz-tamilnewyear-usp::before, html.theme-tamilnewyear .kz-trust.kz-tamilnewyear-trust::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #7fae57, transparent); } /* Section: Limited Time Deals — kalash corner + sparkles */ html.theme-tamilnewyear .kz-tamilnewyear-deals { position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-deals .kz-wrap { position: relative; z-index: 1; } /* The decor layer was left at its default z-index:0 here, so it was painting BEHIND .kz-wrap (z-index:1) — same bug already fixed in this section's Pongal equivalent. */ html.theme-tamilnewyear .kz-tamilnewyear-deals .kz-tamilnewyear-decor { z-index: 2; } /* Section: Promo banner — sparkles tucked above the image */ html.theme-tamilnewyear .kz-tamilnewyear-promo { position: relative; } /* overflow:visible + z-index:2: same two fixes already needed on the Sale banner's equivalent decor layer — the shared 46px-strip rule clips anything taller than that by default, and this section's promo photo was otherwise painting over an unlifted decor layer. */ html.theme-tamilnewyear .kz-tamilnewyear-promo .kz-tamilnewyear-decor { inset: -18px 0 auto 0; height: 46px; overflow: visible; z-index: 2; } /* Section: Made for Celebrations — temple-gopuram flourish + sparkle */ html.theme-tamilnewyear .kz-tamilnewyear-occ { position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-occ .kz-wrap { position: relative; z-index: 1; } html.theme-tamilnewyear .kz-tamilnewyear-occ .kz-tamilnewyear-decor { z-index: 2; } /* Section: Sale banner — hanging mango cluster tucked above the banner */ html.theme-tamilnewyear .kz-tamilnewyear-sale-wrap { position: relative; } html.theme-tamilnewyear .kz-tamilnewyear-sale-wrap .kz-tamilnewyear-decor { inset: -20px 0 auto 0; height: 48px; } /* Section: Heritage Promise — child-with-diya flourish + leaf-dot divider */ html.theme-tamilnewyear .kz-tamilnewyear-rewards { position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-rewards .kz-wrap { position: relative; z-index: 1; } html.theme-tamilnewyear .kz-tamilnewyear-rewards .kz-tamilnewyear-decor { z-index: 2; } html.theme-tamilnewyear .kz-leaf-dots { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 10px 0 18px; } html.theme-tamilnewyear .kz-leaf-dots span { width: 5px; height: 5px; border-radius: 50%; background: #7fae57; opacity: .6; } html.theme-tamilnewyear .kz-leaf-dots span:nth-child(2) { background: var(--kz-maroon); opacity: .35; } html.theme-tamilnewyear .kz-leaf-dots span:nth-child(4) { background: var(--kz-maroon); opacity: .35; } html:not(.theme-tamilnewyear) .kz-leaf-dots { display: none; } /* Section: Testimonials — sparkles flanking the heading */ html.theme-tamilnewyear .kz-reviews-section.kz-tamilnewyear-reviews { position: relative; overflow: hidden; } html.theme-tamilnewyear .kz-tamilnewyear-reviews .kz-reviews-head { position: relative; z-index: 1; } /* Default state: hide outright rather than just unstyled, so nothing flashes visible for a frame before the theme-loader script resolves. */ html:not(.theme-tamilnewyear) .kz-tamilnewyear-decor { display: none !important; } @media (prefers-reduced-motion: reduce) { html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-toran, html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-spark, html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tamilnewyear-figure { animation: none; } } @media (max-width: 640px) { html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-pendant-side { display: none; } html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-corner-lg { transform: scale(.75); transform-origin: bottom; } /* Same reasoning as the other themes' figure pairs: a static transform:scale() would be silently replaced (not combined) by the bob animation's own transform during playback, so mobile reuses the shared scaled-down keyframe instead. */ html.theme-tamilnewyear .kz-tamilnewyear-decor .kz-tamilnewyear-figure { transform-origin: bottom; animation-name: kz-balloon-bob-sm; } } /* ══════════════════════════════════════════════════════════════════════ SEASONAL AMBIENT FX — index.html only. Mounted by kz-seasonal-fx.js, never by markup already in the page, so no theme-scoping selector is needed here: the element only exists at all when its theme is active. Fixed full-viewport, aria-hidden, pointer-events:none — pure ambiance that never intercepts a tap/click or enters the tab order. Sits above ordinary page content (z-index:500) but below the header/nav stack and any modal/toast/offcanvas layer (all 998+ in this codebase), so real UI always wins. ══════════════════════════════════════════════════════════════════════ */ #kz-fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 500; } #kz-fx-moon { position: fixed; top: 84px; right: 5%; width: 74px; height: 74px; pointer-events: none; z-index: 500; filter: drop-shadow(0 0 18px rgba(234, 243, 248, .55)) drop-shadow(0 0 36px rgba(234, 243, 248, .28)); animation: kz-moon-glow 6s ease-in-out infinite; } @keyframes kz-moon-glow { 0%, 100% { opacity: .88; transform: scale(1); } 50% { opacity: 1; transform: scale(1.045); } } @media (max-width: 640px) { #kz-fx-moon { width: 50px; height: 50px; top: 76px; right: 6%; } } @media (prefers-reduced-motion: reduce) { #kz-fx-moon { animation: none; } }