/* ========================================================================== Prakriti — storefront theme for Ayurvedic medicine & wellness stores -------------------------------------------------------------------------- Plain CSS (not processed by Tailwind), loaded from ThemeRegistry by master.blade.php / DefaultComponent::injectThemeAssets(). Every rule is scoped under html.theme-prakriti, which only exists on storefront routes while this theme is active. The accent is the admin's dynamic --color-primary; the rest of the palette (sandalwood cream, forest ink, turmeric, terracotta) is fixed. Motion is progressive: hidden "before" states and every loop (falling leaves, turning mandalas, marquees) exist only under html.pk-motion, set unless the visitor prefers reduced motion. Without it the leaves still show, placed and still. Layout parts, shop listing, product page and cart drawer follow Optica's structure (same class contracts with a pk- prefix), re-themed. 1. Tokens 9. Hero 17. Reviews wall 2. Base 10. Trust ribbon 18. Consult 3. Primitives 11. (removed) 19. Newsletter 4. Motion 12. Product tabs 20. Product card 5. Leaves, mandala, 13. Root to remedy 21. Skin for inherited pages vine 14. (removed) 22. Shop listing 6. Navigation 15. Flash rail, promo 23. Product page 7. Mobile tab bar 16. Dosha quiz 24. Cart drawer 8. Footer 25. Reduced motion 28. Product page v2 29. Checkout 30. Cart page 31. Order history 32. Account shell 33. Account overview 34. Return orders 35. Account forms + account info 36. Change password + address book 37. Help desk 38. Search overlay 39. Mobile categories drawer 40. Mobile profile drawer ========================================================================== */ /* 1. Tokens --------------------------------------------------------------- */ html.theme-prakriti { --pk-accent: var(--color-primary, 46 106 79); --pk-bg: 250 246 236; /* sandalwood cream */ --pk-bg-2: 243 236 220; --pk-surface: 255 253 247; --pk-ink: 27 45 35; /* deep forest */ --pk-ink-2: 60 77 65; --pk-muted: 109 119 104; --pk-line: 229 221 202; --pk-danger: 185 56 42; --pk-sun: 201 149 44; /* turmeric */ --pk-sun-ink: 132 92 14; --pk-clay: 178 86 50; /* terracotta */ --pk-forest: 26 54 40; /* dark bands */ --pk-forest-2: 38 77 56; --pk-cream-ink: 244 238 222; /* text on forest */ --pk-vata: 92 140 176; --pk-pitta: 214 106 52; --pk-kapha: 74 140 108; /* Leaf tones, shade to sun (full colours: used as `color`). */ --pk-leaf-1: rgb(52 110 72); --pk-leaf-2: rgb(118 156 100); --pk-leaf-3: rgb(146 156 70); --pk-leaf-4: rgb(82 128 92); --pk-leaf-5: rgb(201 149 44); /* Soft tile tints: sage, turmeric, clay, mist, lotus. */ --pk-tone-1: rgb(229 238 222); --pk-tone-2: rgb(247 234 205); --pk-tone-3: rgb(244 224 210); --pk-tone-4: rgb(226 235 231); --pk-tone-5: rgb(242 228 234); --pk-radius: 28px; --pk-radius-sm: 16px; --pk-arch: 999px 999px 28px 28px; --pk-ease: cubic-bezier(.22, 1, .36, 1); --pk-spring: cubic-bezier(.34, 1.56, .64, 1); --pk-font-display: "Fraunces", Georgia, "Times New Roman", serif; --pk-font-deva: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif; --pk-shadow-1: 0 1px 2px rgb(27 45 35 / .05), 0 6px 16px -8px rgb(27 45 35 / .12); --pk-shadow-2: 0 2px 6px rgb(27 45 35 / .05), 0 20px 44px -18px rgb(27 45 35 / .24); --pk-shadow-3: 0 32px 80px -28px rgb(27 45 35 / .38); --pk-tabbar-h: 0px; scroll-padding-top: calc(var(--header-h, 72px) + 12px); } @media (max-width: 1023.98px) { html.theme-prakriti { --pk-tabbar-h: 84px; } } /* 2. Base ----------------------------------------------------------------- */ /* A faint paper grain under everything (one tiny tiled SVG, no request). */ html.theme-prakriti body { background-color: rgb(var(--pk-bg)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: rgb(var(--pk-ink)); -webkit-font-smoothing: antialiased; } html.theme-prakriti ::selection { background: rgb(var(--pk-sun) / .28); } html.theme-prakriti .pk-home { overflow-x: clip; } html.theme-prakriti .pk-deva { font-family: var(--pk-font-deva); font-weight: 400; letter-spacing: 0; text-transform: none; } /* 3. Primitives ----------------------------------------------------------- */ html.theme-prakriti .pk-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 640px) { html.theme-prakriti .pk-container { padding-inline: 24px; } } @media (min-width: 1280px) { html.theme-prakriti .pk-container { padding-inline: 32px; } } html.theme-prakriti .pk-section { padding-block: clamp(44px, 7vw, 96px); } html.theme-prakriti .pk-section--tight { padding-block: clamp(20px, 3vw, 40px); } html.theme-prakriti .pk-h2 { font-family: var(--pk-font-display); font-size: clamp(28px, 4.2vw, 48px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pk-font-display); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-eyebrow--light { color: rgb(255 255 255 / .75); } html.theme-prakriti .pk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3.4vw, 44px); } html.theme-prakriti .pk-head-text { display: flex; flex-direction: column; gap: 10px; max-width: 640px; } html.theme-prakriti .pk-head-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } html.theme-prakriti .pk-head-sub { color: rgb(var(--pk-muted)); font-size: 15px; line-height: 1.6; } html.theme-prakriti .pk-link-arrow { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; font-weight: 600; font-size: 14px; color: rgb(var(--pk-ink)); position: relative; } html.theme-prakriti .pk-link-arrow::after { content: ""; position: absolute; inset-inline: 4px; bottom: 6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--pk-ease); } html.theme-prakriti .pk-link-arrow:hover::after { transform: scaleX(1); } html.theme-prakriti .pk-link-arrow .pk-icon { transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-link-arrow:hover .pk-icon { transform: translateX(4px); } html.theme-prakriti .pk-btn { --pk-mx: 0px; --pk-my: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding-inline: 26px; border-radius: 999px; font-family: var(--pk-font-display); font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform .4s var(--pk-ease), box-shadow .4s var(--pk-ease), background-color .25s, color .25s; transform: translate(var(--pk-mx), var(--pk-my)); position: relative; isolation: isolate; overflow: hidden; } html.theme-prakriti .pk-btn--sm { height: 46px; padding-inline: 20px; font-size: 14px; } html.theme-prakriti .pk-btn--primary { background: rgb(var(--pk-ink)); color: #fff; box-shadow: 0 14px 30px -14px rgb(var(--pk-ink) / .7); } html.theme-prakriti .pk-btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--pk-accent)); transform: translateY(101%); transition: transform .5s var(--pk-ease); } html.theme-prakriti .pk-btn--primary:hover::before { transform: translateY(0); } html.theme-prakriti .pk-btn--primary:hover { box-shadow: 0 18px 40px -14px rgb(var(--pk-accent) / .75); } html.theme-prakriti .pk-btn--primary .pk-icon { transition: transform .4s var(--pk-ease); } html.theme-prakriti .pk-btn--primary:hover .pk-icon { transform: translateX(4px); } html.theme-prakriti .pk-btn--ghost { color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html.theme-prakriti .pk-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-ink)); } html.theme-prakriti .pk-btn:active { transform: translate(var(--pk-mx), var(--pk-my)) scale(.97); } html.theme-prakriti .pk-btn:disabled { opacity: .6; cursor: not-allowed; } html.theme-prakriti .pk-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; color: rgb(var(--pk-ink)); transition: background-color .2s, transform .3s var(--pk-ease), color .2s; } html.theme-prakriti .pk-icon-btn:hover { background: rgb(var(--pk-ink) / .06); } html.theme-prakriti .pk-icon-btn:active { transform: scale(.92); } html.theme-prakriti .pk-icon-btn--outline { box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-icon-btn--outline:hover { box-shadow: inset 0 0 0 1px rgb(var(--pk-ink)); background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; padding-inline: 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: rgb(var(--pk-ink)); box-shadow: 0 0 0 2px rgb(var(--pk-surface)); } html.theme-prakriti .pk-badge--accent { background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-badge--ink { background: rgb(var(--pk-ink)); top: -4px; inset-inline-end: -6px; } html.theme-prakriti .pk-chip { display: inline-flex; align-items: center; height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, box-shadow .2s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-chip:hover { color: rgb(var(--pk-accent)); box-shadow: inset 0 0 0 1px rgb(var(--pk-accent) / .5); transform: translateY(-2px); } html.theme-prakriti .pk-chips { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-prakriti .pk-tag { display: inline-flex; align-items: center; height: 24px; padding-inline: 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } html.theme-prakriti .pk-tag--accent { color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-tag--ink { color: #fff; background: rgb(var(--pk-ink)); } html.theme-prakriti .pk-tag--muted { color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-star { fill: #F5B70A; color: #F5B70A; } html.theme-prakriti .pk-flag { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; } /* Dropdowns (language, account): open on hover and on keyboard focus. */ html.theme-prakriti .pk-dropdown { position: relative; } html.theme-prakriti .pk-dropdown-menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 5; min-width: 180px; padding: 8px; border-radius: 18px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-line)); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .25s var(--pk-ease), transform .35s var(--pk-ease), visibility .25s; } html.theme-prakriti .pk-dropdown-menu::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; } html.theme-prakriti .pk-dropdown:hover .pk-dropdown-menu, html.theme-prakriti .pk-dropdown:focus-within .pk-dropdown-menu { opacity: 1; visibility: visible; transform: none; } html.theme-prakriti .pk-dropdown-menu--wide { min-width: 240px; } html.theme-prakriti .pk-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: rgb(var(--pk-ink-2)); text-align: start; transition: background-color .15s, color .15s; } html.theme-prakriti .pk-dropdown-item:hover { background: rgb(var(--pk-bg-2)); color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-dropdown-item.is-danger { color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-dropdown-profile { display: flex; flex-direction: column; padding: 8px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-dropdown-profile small { color: rgb(var(--pk-muted)); } /* Prakriti additions and re-tunes to the shared primitives above. */ html.theme-prakriti .pk-h2 { font-weight: 500; letter-spacing: -.025em; line-height: 1.06; font-size: clamp(30px, 4.4vw, 54px); } html.theme-prakriti .pk-h2 em { font-style: italic; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-h3 { font-family: var(--pk-font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-eyebrow { font-family: inherit; font-weight: 700; letter-spacing: .16em; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-eyebrow--light { color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-head--center { flex-direction: column; align-items: center; text-align: center; } html.theme-prakriti .pk-head--center .pk-head-text { align-items: center; } html.theme-prakriti .pk-btn { font-family: inherit; font-weight: 700; letter-spacing: .01em; } html.theme-prakriti .pk-btn--primary { background: rgb(var(--pk-forest)); box-shadow: 0 14px 30px -14px rgb(var(--pk-forest) / .8); } html.theme-prakriti .pk-btn--ghost { background: rgb(var(--pk-surface) / .75); } html.theme-prakriti .pk-btn--sun { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 14px 30px -14px rgb(var(--pk-sun) / .9); } html.theme-prakriti .pk-btn--sun:hover { filter: brightness(1.06); } html.theme-prakriti .pk-btn--glass { color: #fff; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); } html.theme-prakriti .pk-btn--glass:hover { background: rgb(255 255 255 / .14); } html.theme-prakriti .pk-btn .pk-icon { flex-shrink: 0; } html.theme-prakriti .pk-chip { background: rgb(var(--pk-surface) / .85); } html.theme-prakriti .pk-tag--sun { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } /* Offer seal: a round stamp with a dashed inner ring. */ html.theme-prakriti .pk-seal { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; z-index: 2; color: #fff; background: rgb(var(--pk-clay)); box-shadow: 0 10px 20px -10px rgb(var(--pk-clay) / .9); font-family: var(--pk-font-display); font-size: 14px; font-weight: 700; letter-spacing: -.02em; rotate: -12deg; transition: rotate .6s var(--pk-spring); } html.theme-prakriti .pk-seal::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1px dashed rgb(255 255 255 / .55); } html.theme-prakriti .pk-seal { position: absolute; } /* Stars: fixed glyph row filled by --pk-rate (0–1). */ html.theme-prakriti .pk-stars { --pk-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E"); display: inline-block; width: 90px; height: 18px; flex-shrink: 0; background: linear-gradient(90deg, rgb(var(--pk-sun)) calc(var(--pk-rate, 0) * 100%), rgb(var(--pk-line)) 0); -webkit-mask: var(--pk-star) 0 0 / 18px 18px repeat-x; mask: var(--pk-star) 0 0 / 18px 18px repeat-x; } html.theme-prakriti .pk-stars--lg { width: 140px; height: 28px; -webkit-mask-size: 28px 28px; mask-size: 28px 28px; } /* Grids and rails shared by home, listing and product page. */ html.theme-prakriti .pk-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { html.theme-prakriti .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1024px) { html.theme-prakriti .pk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } } html.theme-prakriti .pk-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 18px; } html.theme-prakriti .pk-rail::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-rail-item { flex: 0 0 72%; scroll-snap-align: start; } @media (min-width: 640px) { html.theme-prakriti .pk-rail-item { flex-basis: 42%; } } @media (min-width: 1024px) { html.theme-prakriti .pk-rail-item { flex-basis: calc((100% - 48px) / 4); } } html.theme-prakriti .pk-rail-nav { display: flex; gap: 8px; } /* Glider tab bar (home product tabs, product page tabs). */ html.theme-prakriti .pk-tabbar { position: relative; display: flex; gap: 4px; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-tabbar::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-tabbar-glider { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px; background: rgb(var(--pk-forest)); box-shadow: 0 8px 18px -8px rgb(var(--pk-forest) / .7); transition: transform .5s var(--pk-ease), width .5s var(--pk-ease), opacity .3s; } html.theme-prakriti .pk-tabbar-btn { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 18px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .3s; } html.theme-prakriti .pk-tabbar-btn:hover { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-tabbar-btn.is-active { color: #fff; } html.theme-prakriti .pk-tabbar-btn em { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; font-style: normal; font-size: 11px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-tabbar-btn.is-active em { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } /* Skeletons */ html.theme-prakriti .pk-skel { display: flex; flex-direction: column; gap: 10px; } html.theme-prakriti .pk-skel > span { border-radius: 12px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)), rgb(var(--pk-line)), rgb(var(--pk-bg-2))); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } html.theme-prakriti .pk-skel-img { aspect-ratio: 1 / 1; border-radius: var(--pk-radius) !important; } html.theme-prakriti .pk-skel-line { height: 14px; width: 80%; } html.theme-prakriti .pk-skel-line--short { width: 40%; } @keyframes pk-shimmer { to { background-position: -200% 0; } } @keyframes pk-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } } @keyframes pk-pulse { 50% { opacity: .35; } } @keyframes pk-heart { 40% { transform: scale(1.35); } } @keyframes pk-marquee { to { transform: translateX(-50%); } } @keyframes pk-turn { to { rotate: 360deg; } } @keyframes pk-float { 50% { translate: 0 -10px; } } @keyframes pk-drift-a { to { transform: translate(-6vw, 5vw) scale(1.12); } } @keyframes pk-drift-b { to { transform: translate(7vw, -4vw) scale(1.18); } } /* 4. Motion --------------------------------------------------------------- */ /* Scroll reveal: rise + a soft de-blur, like mist lifting. Uses the individual `translate` / `scale` properties, never `transform`, so it composes with the tilt / parallax / magnetic transforms on the same elements. */ html.pk-motion.theme-prakriti .pk-reveal:not(.pk-reveal--stagger) { opacity: 0; translate: 0 30px; filter: blur(6px); transition: opacity .9s var(--pk-ease) var(--pk-delay, 0ms), translate 1.1s var(--pk-ease) var(--pk-delay, 0ms), scale 1.1s var(--pk-ease) var(--pk-delay, 0ms), filter .9s var(--pk-ease) var(--pk-delay, 0ms); } html.pk-motion.theme-prakriti .pk-reveal--scale:not(.pk-reveal--stagger) { translate: none; scale: .94; } html.pk-motion.theme-prakriti .pk-reveal--left:not(.pk-reveal--stagger) { translate: -40px 0; } html.pk-motion.theme-prakriti .pk-reveal--right:not(.pk-reveal--stagger) { translate: 40px 0; } html.pk-motion.theme-prakriti .pk-reveal.is-in:not(.pk-reveal--stagger) { opacity: 1; translate: none; scale: none; filter: none; } html.pk-motion.theme-prakriti .pk-reveal--stagger > * { opacity: 0; translate: 0 36px; filter: blur(5px); transition: opacity .8s var(--pk-ease), translate .95s var(--pk-ease), filter .8s var(--pk-ease), transform .5s var(--pk-ease), box-shadow .4s; transition-delay: calc(var(--pk-i, 0) * 75ms + var(--pk-delay, 0ms)); } html.pk-motion.theme-prakriti .pk-reveal--stagger.is-in > * { opacity: 1; translate: none; filter: none; } /* Once in, hover/tilt transitions must not inherit the stagger delay. */ html.pk-motion.theme-prakriti .pk-reveal--stagger.is-in > *:hover, html.pk-motion.theme-prakriti .pk-reveal--stagger.is-in > .is-tilting { transition-delay: 0ms; } html.pk-motion.theme-prakriti .pk-reveal--stagger.is-in > .is-tilting { transition: transform .12s linear, box-shadow .4s; } /* Page-load choreography. `bloom`: a word unfurls upward, the way a leaf opens. */ @keyframes pk-intro { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes pk-bloom-in { 0% { opacity: 0; filter: blur(14px); transform: translateY(.35em) rotate(3deg); } 100% { opacity: 1; filter: none; transform: none; } } html.pk-motion.theme-prakriti .pk-intro { animation: pk-intro 1s var(--pk-ease) both; animation-delay: calc(var(--pk-d, 0) * 110ms + 150ms); } html.pk-motion.theme-prakriti .pk-bloom, html.pk-motion.theme-prakriti .pk-rotator { display: inline-block; transform-origin: 0 100%; animation: pk-bloom-in 1.2s var(--pk-ease) both; animation-delay: calc(var(--pk-d, 0) * 120ms + 150ms); } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .pk-word-enter-active, .pk-word-leave-active { transition: opacity .5s var(--pk-ease, ease), transform .6s var(--pk-ease, ease), filter .5s ease; } .pk-word-enter-from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(8px); } .pk-word-leave-to { opacity: 0; transform: translateY(-.35em); filter: blur(8px); } .pk-swap-enter-active, .pk-swap-leave-active { transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1), filter .55s ease; } .pk-swap-enter-from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(10px); } .pk-swap-leave-to { opacity: 0; transform: translateY(-14px) scale(1.04); filter: blur(10px); } .pk-chip-swap-enter-active, .pk-chip-swap-leave-active { transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); } .pk-chip-swap-enter-from { opacity: 0; transform: translateY(12px); } .pk-chip-swap-leave-to { opacity: 0; transform: translateY(-8px); } .pk-pop-enter-active { transition: transform .45s cubic-bezier(.34,1.56,.64,1); } .pk-pop-enter-from { transform: scale(0); } .pk-mega-enter-active, .pk-mega-leave-active { transition: opacity .25s ease, transform .4s cubic-bezier(.22,1,.36,1); } .pk-mega-enter-from, .pk-mega-leave-to { opacity: 0; transform: translate(-50%, -8px); } .pk-tab-swap-enter-active, .pk-tab-swap-leave-active { transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .3s ease; } .pk-tab-swap-enter-from { opacity: 0; transform: translateY(16px); filter: blur(6px); } .pk-tab-swap-leave-to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } .pk-step-enter-active, .pk-step-leave-active { transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease; } .pk-step-enter-from { opacity: 0; transform: translateX(28px); filter: blur(6px); } .pk-step-leave-to { opacity: 0; transform: translateX(-28px); filter: blur(6px); } html[dir="rtl"] .pk-step-enter-from { transform: translateX(-28px); } html[dir="rtl"] .pk-step-leave-to { transform: translateX(28px); } /* 5. Leaves, mandala, vine ----------------------------------------------- */ html.theme-prakriti .pk-leaf-svg { display: block; width: 100%; height: 100%; overflow: visible; } html.theme-prakriti .pk-leaf-body { fill: currentColor; } html.theme-prakriti .pk-leaf-rib { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1.6; stroke-linecap: round; } html.theme-prakriti .pk-leaf-vein { fill: none; stroke: rgb(255 255 255 / .32); stroke-width: 1.1; stroke-linecap: round; } /* LeafLayer. Without pk-motion the leaves sit still where --x / --y put them. */ html.theme-prakriti .pk-leaves { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } html.theme-prakriti .pk-leaf { position: absolute; left: var(--x); color: var(--tone); opacity: calc(.28 + var(--z) * .5); filter: blur(calc((1 - var(--z)) * 1.4px)); /* Pointer depth from the hero (--pk-px / --pk-py, -0.5…0.5): near leaves move more. */ transform: translate(calc(var(--pk-px, 0) * var(--z) * -46px), calc(var(--pk-py, 0) * var(--z) * -34px)); transition: transform 1s var(--pk-ease); } html.theme-prakriti .pk-leaf-fall, html.theme-prakriti .pk-leaf-sway { display: block; } html.theme-prakriti .pk-leaf-sway { width: var(--s); height: var(--s); transform: rotate(var(--r0)); } /* fall: each leaf owns a full-height column, so translateY(%) of the column is the section's height. */ html.theme-prakriti .pk-leaves--fall .pk-leaf { top: 0; bottom: 0; width: var(--s); } html.theme-prakriti .pk-leaves--fall .pk-leaf-fall { height: 100%; transform: translateY(var(--y)); } html.theme-prakriti .pk-leaves--float .pk-leaf { top: var(--y); } html.pk-motion.theme-prakriti .pk-leaves--fall .pk-leaf-fall { animation: pk-leaf-fall var(--dur) linear var(--delay) infinite; } html.pk-motion.theme-prakriti .pk-leaves--fall .pk-leaf-sway { animation: pk-leaf-sway var(--sway) ease-in-out var(--delay) infinite alternate; } html.pk-motion.theme-prakriti .pk-leaves--float .pk-leaf-sway { animation: pk-leaf-bob var(--dur) ease-in-out var(--delay) infinite alternate; } html.theme-prakriti .pk-leaves.is-paused .pk-leaf-fall, html.theme-prakriti .pk-leaves.is-paused .pk-leaf-sway { animation-play-state: paused; } @keyframes pk-leaf-fall { from { transform: translateY(calc(var(--s) * -1.6)); } to { transform: translateY(calc(100% + 20px)); } } @keyframes pk-leaf-sway { from { transform: translateX(calc(var(--amp) * -1)) rotate(var(--r0)) rotateX(0deg); } to { transform: translateX(var(--amp)) rotate(calc(var(--r0) + var(--spin))) rotateX(50deg); } } @keyframes pk-leaf-bob { from { transform: rotate(var(--r0)) translateY(0); } to { transform: rotate(calc(var(--r0) + 16deg)) translateY(-14px); } } @media (max-width: 639.98px) { html.theme-prakriti .pk-leaves .pk-leaf:nth-child(n+7) { display: none; } } html.theme-prakriti .pk-mandala { display: block; width: 100%; height: 100%; overflow: visible; } /* Vine divider: the stem draws, then leaves unfurl one by one. */ html.theme-prakriti .pk-vine { position: relative; height: 60px; max-width: 1280px; margin: clamp(4px, 2vw, 20px) auto; padding-inline: 16px; color: rgb(var(--pk-accent) / .5); } html.theme-prakriti .pk-vine svg { width: 100%; height: 100%; overflow: visible; } html.theme-prakriti .pk-vine-stem { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } html.theme-prakriti .pk-vine-leaf { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; color: var(--pk-leaf-2); transform: translate(-50%, -50%) rotate(var(--r)); transform-origin: 50% 100%; } html.theme-prakriti .pk-vine-leaf:nth-child(3n) { color: var(--pk-leaf-1); } html.theme-prakriti .pk-vine-leaf:nth-child(4n) { color: var(--pk-leaf-5); } html.pk-motion.theme-prakriti .pk-vine.pk-reveal { opacity: 1; translate: none; filter: none; } html.pk-motion.theme-prakriti .pk-vine .pk-vine-stem { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-vine.is-in .pk-vine-stem { stroke-dashoffset: 0; } html.pk-motion.theme-prakriti .pk-vine .pk-vine-leaf { transform: translate(-50%, -50%) rotate(var(--r)) scale(0); transition: transform .9s var(--pk-spring) calc(var(--i) * 130ms + 500ms); } html.pk-motion.theme-prakriti .pk-vine.is-in .pk-vine-leaf { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } /* Soft glows used behind heroes. */ html.theme-prakriti .pk-glow { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .6; will-change: transform; } html.theme-prakriti .pk-glow--sage { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8vw; top: -12vw; background: rgb(var(--pk-accent) / .26); } html.theme-prakriti .pk-glow--sun { width: 36vw; height: 36vw; max-width: 500px; max-height: 500px; left: -10vw; bottom: -14vw; background: rgb(var(--pk-sun) / .28); } html.pk-motion.theme-prakriti .pk-glow--sage { animation: pk-drift-a 20s ease-in-out infinite alternate; } html.pk-motion.theme-prakriti .pk-glow--sun { animation: pk-drift-b 24s ease-in-out infinite alternate; } /* 6. Navigation ----------------------------------------------------------- */ html.theme-prakriti .pk-nav { position: fixed; top: 0; inset-inline: 0; z-index: 25; padding-top: 12px; transition: transform .5s var(--pk-ease), padding .4s var(--pk-ease); } html.theme-prakriti .pk-nav.is-hidden { transform: translateY(-110%); } html.theme-prakriti .pk-nav-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; border-radius: 999px; padding-inline: 10px 10px; background: rgb(var(--pk-surface) / .78); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line) / .9); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); transition: background-color .4s, box-shadow .4s, max-width .5s var(--pk-ease); max-width: 1288px; } @media (min-width: 640px) { html.theme-prakriti .pk-nav-bar { width: calc(100% - 32px); padding-inline: 16px 10px; } } @media (max-width: 639.98px) { html.theme-prakriti .pk-nav-bar { width: calc(100% - 24px); padding-inline: 6px; } html.theme-prakriti .pk-nav { padding-top: 8px; } } html.theme-prakriti .pk-nav.is-over-hero .pk-nav-bar { background: rgb(var(--pk-surface) / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); } html.theme-prakriti .pk-nav.is-scrolled .pk-nav-bar { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line) / .9); } html.theme-prakriti .pk-nav-spacer { height: calc(var(--header-h, 76px) + 8px); } html.theme-prakriti .pk-nav-logo { display: flex; align-items: center; flex-shrink: 0; height: 40px; font-family: var(--pk-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; } html.theme-prakriti .pk-nav-logo img { height: 34px; width: auto; max-width: 150px; object-fit: contain; } html.theme-prakriti .pk-nav-burger { display: none; } html.theme-prakriti .pk-nav-links { display: none; align-items: center; gap: 2px; margin-inline-start: 12px; flex: 1; min-width: 0; height: 100%; } html.theme-prakriti .pk-nav-item { height: 100%; display: flex; align-items: center; } html.theme-prakriti .pk-nav-link { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding-inline: 14px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .2s, background-color .2s; } html.theme-prakriti .pk-nav-link:hover, html.theme-prakriti .pk-nav-link.is-open { color: rgb(var(--pk-ink)); background: rgb(var(--pk-ink) / .05); } html.theme-prakriti .pk-nav-link.active { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-nav-link .pk-icon { transition: transform .3s var(--pk-ease); } html.theme-prakriti .pk-nav-link.is-open .pk-icon { transform: rotate(180deg); } html.theme-prakriti .pk-nav-link--hot { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-nav-link--hot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; margin-inline-end: 4px; animation: pk-pulse 2s infinite; } html.theme-prakriti .pk-mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(980px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 280px; gap: 24px; padding: 24px; border-radius: 28px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-mega::before { content: ""; position: absolute; inset-inline: 0; top: -14px; height: 14px; } html.theme-prakriti .pk-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 24px; align-content: start; } html.theme-prakriti .pk-mega-col { display: flex; flex-direction: column; gap: 6px; } html.theme-prakriti .pk-mega-title { font-family: var(--pk-font-display); font-weight: 600; font-size: 15px; text-transform: capitalize; color: rgb(var(--pk-ink)); margin-bottom: 2px; } html.theme-prakriti .pk-mega-title:hover, html.theme-prakriti .pk-mega-link:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-mega-link { font-size: 14px; color: rgb(var(--pk-muted)); text-transform: capitalize; transition: color .15s, transform .25s var(--pk-ease); } html.theme-prakriti .pk-mega-link:hover { transform: translateX(3px); } html.theme-prakriti .pk-mega-feature { position: relative; display: block; border-radius: 20px; overflow: hidden; min-height: 220px; background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--pk-ease); } html.theme-prakriti .pk-mega-feature:hover img { transform: scale(1.06); } html.theme-prakriti .pk-mega-feature-label { position: absolute; inset-inline: 12px; bottom: 12px; display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html.theme-prakriti .pk-mega-feature-label small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-mega-feature-label strong { font-family: var(--pk-font-display); font-size: 17px; text-transform: capitalize; } html.theme-prakriti .pk-nav-actions { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } html.theme-prakriti .pk-search-pill { display: none; align-items: center; gap: 10px; height: 42px; padding-inline: 14px 8px; margin-inline-end: 6px; border-radius: 999px; min-width: 230px; color: rgb(var(--pk-muted)); font-size: 14px; background: rgb(var(--pk-bg-2) / .9); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .2s, color .2s; } html.theme-prakriti .pk-search-pill:hover { box-shadow: inset 0 0 0 1px rgb(var(--pk-ink) / .4); color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-search-pill kbd { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; font: 600 12px/1 var(--pk-font-display); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-avatar-btn { overflow: hidden; background: rgb(var(--pk-accent)); color: #fff; font-size: 13px; font-weight: 700; width: 38px; height: 38px; margin-inline-start: 4px; } html.theme-prakriti .pk-avatar-btn:hover { background: rgb(var(--pk-accent)); filter: brightness(1.08); } html.theme-prakriti .pk-avatar-btn img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) { html.theme-prakriti .pk-nav-links { display: flex; } html.theme-prakriti .pk-search-icon { display: none; } } @media (min-width: 1200px) { html.theme-prakriti .pk-search-pill { display: inline-flex; } html.theme-prakriti .pk-nav-actions .pk-search-icon { display: none; } } @media (min-width: 1024px) and (max-width: 1199.98px) { html.theme-prakriti .pk-search-icon { display: inline-flex; } } @media (max-width: 1023.98px) { html.theme-prakriti .pk-nav-burger { display: inline-flex; } html.theme-prakriti .pk-hide-sm { display: none; } html.theme-prakriti .pk-nav-logo { margin-inline: auto; position: absolute; left: 50%; transform: translateX(-50%); } } /* Search overlay: see §38. */ /* 7. Mobile tab bar ------------------------------------------------------- */ /* Own class (.pk-mnav): it used to share .pk-tabbar with §3's in-page glider bars, whose `width: fit-content` + `overflow-x: auto` shrank this bar to its contents and clipped the raised cart orb. */ html.theme-prakriti .pk-mnav { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-around; height: 66px; padding-inline: 6px; border-radius: 24px; background: rgb(var(--pk-surface) / .88); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } html.pk-motion.theme-prakriti .pk-mnav { animation: pk-mnav-in .8s var(--pk-ease) .3s backwards; } @keyframes pk-mnav-in { from { opacity: 0; translate: 0 120%; } } @media (min-width: 1024px) { html.theme-prakriti .pk-mnav { display: none; } } html.theme-prakriti .pk-tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; border-radius: 18px; font-size: 10.5px; font-weight: 600; color: rgb(var(--pk-muted)); -webkit-tap-highlight-color: transparent; transition: color .25s; } html.theme-prakriti .pk-tab > span:not(.pk-tab-orb) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-tab .pk-icon { transition: transform .45s var(--pk-spring), color .25s; } html.theme-prakriti .pk-tab:active .pk-icon { transform: scale(.86); } /* Active: a soft sage pill behind the icon, the icon lifts, a sun dot underneath. */ html.theme-prakriti .pk-tab::before { content: ""; position: absolute; top: 5px; left: 50%; width: 46px; height: 28px; margin-left: -23px; border-radius: 999px; background: var(--pk-tone-1); transform: scale(.4); opacity: 0; transition: transform .45s var(--pk-spring), opacity .25s; z-index: -1; } html.theme-prakriti .pk-tab.is-active { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-tab.is-active::before { transform: none; opacity: 1; } html.theme-prakriti .pk-tab.is-active .pk-icon { color: rgb(var(--pk-accent)); transform: translateY(-1px); } html.theme-prakriti .pk-mnav .pk-tab { isolation: isolate; } html.theme-prakriti .pk-tab--cart { flex: 0 0 auto; width: 70px; height: 66px; } html.theme-prakriti .pk-tab--cart::before { display: none; } html.theme-prakriti .pk-tab-orb { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -30px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 12px 26px -8px rgb(var(--pk-forest) / .7), 0 0 0 5px rgb(var(--pk-bg)); transition: transform .4s var(--pk-spring), background-color .3s; } html.theme-prakriti .pk-tab--cart:active .pk-tab-orb { transform: scale(.9); } html.theme-prakriti .pk-tab-orb .pk-badge { top: -2px; inset-inline-end: -4px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 2px rgb(var(--pk-forest)); } /* 8. Footer --------------------------------------------------------------- Light, airy, three tiers: help card → brand + link columns → bottom bar. Link columns are always open on desktop and collapse to tap-to-open sections below 768px (grid-rows 0fr → 1fr for a smooth expand). */ html.theme-prakriti .pk-footer { position: relative; margin-top: clamp(24px, 4vw, 48px); padding-top: clamp(28px, 4vw, 48px); padding-bottom: calc(20px + var(--pk-tabbar-h)); background: rgb(var(--pk-surface)); border-top: 1px solid rgb(var(--pk-line)); color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-footer::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--pk-accent) / .6), transparent); } html.theme-prakriti .pk-fhelp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 20px; padding: 22px; border-radius: var(--pk-radius); background: linear-gradient(120deg, rgb(var(--pk-accent) / .09), rgb(var(--pk-accent) / .02) 60%), rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-accent) / .14); } html.theme-prakriti .pk-fhelp-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: rgb(var(--pk-accent)); box-shadow: 0 12px 24px -12px rgb(var(--pk-accent) / .8); } html.theme-prakriti .pk-fhelp-text h3 { font-family: var(--pk-font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -.02em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-fhelp-text p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: rgb(var(--pk-muted)); max-width: 520px; } html.theme-prakriti .pk-fhelp-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; } html.theme-prakriti .pk-fhelp-actions .pk-btn { flex: 1 1 140px; } html.theme-prakriti .pk-fhelp-actions .pk-btn--ghost { background: rgb(var(--pk-surface)); } @media (min-width: 900px) { html.theme-prakriti .pk-fhelp { grid-template-columns: auto 1fr auto; padding: 26px 28px; } html.theme-prakriti .pk-fhelp-actions { grid-column: auto; } html.theme-prakriti .pk-fhelp-actions .pk-btn { flex: 0 0 auto; } } html.theme-prakriti .pk-fmain { display: grid; gap: 28px; padding-block: clamp(32px, 4.5vw, 56px); } @media (min-width: 1024px) { html.theme-prakriti .pk-fmain { grid-template-columns: minmax(280px, 1.1fr) 2fr; gap: 64px; } } html.theme-prakriti .pk-fbrand { display: flex; flex-direction: column; gap: 16px; } html.theme-prakriti .pk-fbrand-logo { display: inline-flex; width: fit-content; } html.theme-prakriti .pk-fbrand-logo img { height: 38px; width: auto; max-width: 180px; object-fit: contain; } html.theme-prakriti .pk-fbrand-logo strong { font-family: var(--pk-font-display); font-size: 24px; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-fbrand > p { font-size: 14px; line-height: 1.65; color: rgb(var(--pk-muted)); max-width: 360px; } html.theme-prakriti .pk-fcontact { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } html.theme-prakriti .pk-fcontact li { display: flex; align-items: flex-start; gap: 10px; } html.theme-prakriti .pk-fcontact .pk-icon { flex-shrink: 0; margin-top: 2px; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-fcontact a { color: rgb(var(--pk-ink-2)); transition: color .2s; word-break: break-word; } html.theme-prakriti .pk-fcontact a:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-fsocial { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } html.theme-prakriti .pk-fsocial a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, background-color .2s, box-shadow .2s, transform .35s var(--pk-spring); } html.theme-prakriti .pk-fsocial a:hover { color: #fff; background: rgb(var(--pk-accent)); box-shadow: 0 10px 20px -10px rgb(var(--pk-accent) / .8); transform: translateY(-3px); } html.theme-prakriti .pk-fcols { display: grid; grid-template-columns: 1fr; } html.theme-prakriti .pk-fcol { border-bottom: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-fcol:first-child { border-top: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-fcol h4 button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; font-family: var(--pk-font-display); font-size: 15px; font-weight: 600; color: rgb(var(--pk-ink)); text-align: start; } html.theme-prakriti .pk-fcol-chev { color: rgb(var(--pk-muted)); transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-fcol.is-open .pk-fcol-chev { transform: rotate(180deg); color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-fcol-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--pk-ease); } html.theme-prakriti .pk-fcol.is-open .pk-fcol-body { grid-template-rows: 1fr; } html.theme-prakriti .pk-fcol-body > ul { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; } html.theme-prakriti .pk-fcol.is-open .pk-fcol-body > ul { padding-bottom: 14px; } html.theme-prakriti .pk-fcol-body a { position: relative; display: inline-flex; align-items: center; min-height: 36px; font-size: 14.5px; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .2s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-fcol-body a::before { content: ""; width: 0; height: 1.5px; margin-inline-end: 0; background: rgb(var(--pk-accent)); transition: width .3s var(--pk-ease), margin .3s var(--pk-ease); } html.theme-prakriti .pk-fcol-body a:hover { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-fcol-body a:hover::before { width: 12px; margin-inline-end: 8px; } @media (min-width: 768px) { html.theme-prakriti .pk-fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } html.theme-prakriti .pk-fcol, html.theme-prakriti .pk-fcol:first-child { border: 0; } html.theme-prakriti .pk-fcol h4 button { min-height: 0; margin-bottom: 14px; pointer-events: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-fcol-chev { display: none; } html.theme-prakriti .pk-fcol-body { grid-template-rows: 1fr; } html.theme-prakriti .pk-fcol-body > ul, html.theme-prakriti .pk-fcol.is-open .pk-fcol-body > ul { padding-bottom: 0; } html.theme-prakriti .pk-fcol-body a { min-height: 32px; } } html.theme-prakriti .pk-fbottom { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgb(var(--pk-line)); font-size: 13px; color: rgb(var(--pk-muted)); text-align: center; } html.theme-prakriti .pk-flegal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; } html.theme-prakriti .pk-flegal a, html.theme-prakriti .pk-fbottom-end a { color: rgb(var(--pk-ink-2)); transition: color .2s; } html.theme-prakriti .pk-flegal a:hover, html.theme-prakriti .pk-fbottom-end a:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-fbottom-end { display: flex; align-items: center; gap: 14px; } html.theme-prakriti .pk-ftop { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, background-color .2s, transform .35s var(--pk-ease); } html.theme-prakriti .pk-ftop:hover { color: #fff; background: rgb(var(--pk-ink)); transform: translateY(-3px); } /* Phones: the last accordion row already draws the divider. */ @media (max-width: 767.98px) { html.theme-prakriti .pk-fmain { padding-bottom: 8px; } html.theme-prakriti .pk-fbottom { border-top: 0; } } @media (min-width: 900px) { html.theme-prakriti .pk-fbottom { flex-direction: row; justify-content: space-between; text-align: start; } } /* Prakriti re-tunes for the navigation, tab bar and footer above. */ html.theme-prakriti .pk-nav-bar { background: rgb(var(--pk-surface) / .82); } html.theme-prakriti .pk-nav.is-over-hero .pk-nav-bar { background: rgb(var(--pk-surface) / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); } html.theme-prakriti .pk-nav-logo { font-family: var(--pk-font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-nav-link { font-weight: 600; } html.theme-prakriti .pk-nav-link--hot { color: rgb(var(--pk-clay)); } html.theme-prakriti .pk-mega-title { font-family: var(--pk-font-display); font-weight: 500; font-size: 17px; } html.theme-prakriti .pk-mega-feature-label strong { font-family: var(--pk-font-display); font-weight: 500; } /* Mega-menu tile for a category without an image. */ html.theme-prakriti .pk-bento-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(var(--pk-accent) / .5); background: radial-gradient(70% 70% at 50% 40%, rgb(var(--pk-surface)), var(--pk-tone-1)); } html.theme-prakriti .pk-footer { overflow: clip; isolation: isolate; background: linear-gradient(180deg, rgb(var(--pk-surface)), rgb(var(--pk-bg-2))); } html.theme-prakriti .pk-footer::before { background: linear-gradient(90deg, transparent, rgb(var(--pk-sun) / .7), transparent); } html.theme-prakriti .pk-footer > .pk-leaves { z-index: -1; } /* Faint: they drift behind contact details and the legal notice, which must stay readable. */ html.theme-prakriti .pk-footer .pk-leaf { opacity: calc(.08 + var(--z) * .14); } html.theme-prakriti .pk-footer-mandala { position: absolute; z-index: -1; right: -180px; top: -140px; width: 560px; height: 560px; color: rgb(var(--pk-accent) / .08); pointer-events: none; } html.pk-motion.theme-prakriti .pk-footer-mandala .pk-mandala { animation: pk-turn 200s linear infinite; } html.theme-prakriti .pk-fhelp { background: linear-gradient(120deg, rgb(var(--pk-sun) / .14), rgb(var(--pk-accent) / .06) 60%), rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-sun) / .25); } html.theme-prakriti .pk-fhelp-icon { border-radius: var(--pk-arch); background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-fhelp-text h3, html.theme-prakriti .pk-fbrand-logo strong { font-family: var(--pk-font-display); font-weight: 500; } html.theme-prakriti .pk-fnotice { display: flex; flex-direction: column; gap: 8px; padding-block: 18px; border-top: 1px solid rgb(var(--pk-line)); font-size: 12.5px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-fnotice p { display: flex; align-items: flex-start; gap: 8px; max-width: 920px; } html.theme-prakriti .pk-fnotice .pk-icon { flex-shrink: 0; margin-top: 2px; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-fnotice-licence { font-weight: 600; color: rgb(var(--pk-ink-2)); } @media (max-width: 767.98px) { html.theme-prakriti .pk-fnotice { border-top: 0; } } /* Countdown + rail (shared with Optica's structure; re-tuned in §15 below). */ html.theme-prakriti .pk-flash { position: relative; } html.theme-prakriti .pk-countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } html.theme-prakriti .pk-countdown-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--pk-muted)); margin-inline-end: 6px; } html.theme-prakriti .pk-countdown-cell { display: flex; align-items: baseline; gap: 2px; min-width: 52px; justify-content: center; padding: 8px 10px; border-radius: 14px; background: rgb(var(--pk-ink)); color: #fff; } html.theme-prakriti .pk-countdown-cell strong { font-family: var(--pk-font-display); font-size: 20px; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-countdown-cell small { font-size: 11px; opacity: .6; } html.theme-prakriti .pk-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 18px; scrollbar-width: none; } html.theme-prakriti .pk-rail::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-rail-item { flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start; } @media (min-width: 768px) { html.theme-prakriti .pk-rail-item { flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 1024px) { html.theme-prakriti .pk-rail-item { flex-basis: calc((100% - 48px) / 4); } html.theme-prakriti .pk-rail { gap: 16px; } } html.theme-prakriti .pk-rail-nav { display: flex; justify-content: flex-end; gap: 8px; } /* 9. Hero ----------------------------------------------------------------- */ html.theme-prakriti .pk-hero { --pk-px: 0; --pk-py: 0; position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3vw, 36px); min-height: min(100svh, 960px); padding-top: calc(var(--header-h, 76px) + clamp(20px, 3vw, 44px)); padding-bottom: clamp(56px, 7vw, 88px); } html.theme-prakriti .pk-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 70% at 78% 30%, rgb(var(--pk-sun) / .12), transparent 62%); } html.theme-prakriti .pk-hero-sun { position: absolute; right: 4%; top: 12%; width: min(40vw, 560px); aspect-ratio: 1; border-radius: 999px; background: radial-gradient(closest-side, rgb(var(--pk-sun) / .16), rgb(var(--pk-sun) / .04) 70%, transparent); box-shadow: inset 0 0 0 1px rgb(var(--pk-sun) / .18); } html.theme-prakriti .pk-hero-inner { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { html.theme-prakriti .pk-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; } } html.theme-prakriti .pk-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; } html.theme-prakriti .pk-hero-copy > .pk-eyebrow { gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; color: rgb(var(--pk-ink-2)); letter-spacing: .12em; background: rgb(var(--pk-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hero-copy > .pk-eyebrow .pk-deva { /* Tiro centres its line box on matra-to-descender, so the headline-to-baseline body reads ~2px high: bias the padding down. */ padding: 4px 10px 0; border-radius: 999px; font-size: 15px; color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-eyebrow-dot { width: 5px; height: 5px; border-radius: 999px; background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hero-title { font-family: var(--pk-font-display); font-weight: 500; font-size: clamp(44px, 7.2vw, 96px); line-height: .98; letter-spacing: -.035em; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-rotator { display: block; position: relative; padding-bottom: .12em; } html.theme-prakriti .pk-rotator em { position: relative; display: inline-block; font-style: italic; font-weight: 400; color: rgb(var(--pk-accent)); } /* A hand-drawn turmeric brushstroke under the rotating word. */ html.theme-prakriti .pk-rotator em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.08em; height: .2em; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C60 4 140 3 297 9c-60 1-170 4-280 10' fill='none' stroke='%23C9952C' stroke-width='6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } html.theme-prakriti .pk-hero-sub { max-width: 520px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } html.theme-prakriti .pk-hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 6px; } html.theme-prakriti .pk-hero-proof li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-hero-proof .pk-icon { display: block; width: 32px; height: 32px; padding: 7px; border-radius: 999px; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-hero-visual { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1.06; margin-inline: auto; } html.theme-prakriti .pk-hero-mandala { position: absolute; left: 50%; top: 46%; width: 112%; aspect-ratio: 1; color: rgb(var(--pk-accent) / .2); transform: translate(-50%, -50%) translate(calc(var(--pk-px) * 14px), calc(var(--pk-py) * 14px)); transition: transform 1s var(--pk-ease); pointer-events: none; } html.pk-motion.theme-prakriti .pk-hero-mandala .pk-mandala { animation: pk-turn 140s linear infinite; } html.theme-prakriti .pk-hero-ringtext { position: absolute; z-index: 3; top: 1%; inset-inline-end: 1%; width: clamp(104px, 11vw, 140px); overflow: visible; } html.theme-prakriti .pk-hero-ringtext text { font: 700 15px/1 system-ui, sans-serif; letter-spacing: .32em; fill: rgb(var(--pk-forest)); } html.theme-prakriti .pk-hero-ringtext::before { content: ""; } html.pk-motion.theme-prakriti .pk-hero-ringtext { animation: pk-turn 26s linear infinite; } /* The arch is a round framed window: a cream mat, the product photo filling it edge to edge (cover), a gilded hairline over the photo and a soft shade at the foot. No multiply blend — it only flattered white packshots and turned every lifestyle photo into a hard rectangle floating on a shadow. */ html.theme-prakriti .pk-hero-arch, html.theme-prakriti .pk-hero-arch-frame { position: absolute; left: 50%; top: 46%; width: 76%; aspect-ratio: 1; border-radius: 50%; } html.theme-prakriti .pk-hero-arch { z-index: 1; overflow: hidden; isolation: isolate; padding: 10px; background: rgb(var(--pk-surface)); box-shadow: 0 40px 70px -30px rgb(var(--pk-forest) / .45), 0 0 0 1px rgb(var(--pk-line)); transform: translate(-50%, -50%) translate(calc(var(--pk-px) * -10px), calc(var(--pk-py) * -8px)); transition: transform 1s var(--pk-ease); } html.theme-prakriti .pk-hero-arch-frame { z-index: 0; border: 1.5px solid rgb(var(--pk-sun) / .55); pointer-events: none; transform: translate(-50%, -50%) translate(calc(16px + var(--pk-px) * 6px), calc(14px + var(--pk-py) * 6px)); transition: transform 1s var(--pk-ease); } html.theme-prakriti .pk-hero-arch::before { content: ""; position: absolute; inset: 22px; z-index: 3; border-radius: 50%; border: 1px solid rgb(255 255 255 / .7); pointer-events: none; } html.theme-prakriti .pk-hero-product { position: absolute; inset: 10px; z-index: 1; display: block; overflow: hidden; border-radius: 50%; background: rgb(var(--pk-bg-2)); box-shadow: 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hero-product img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: scale 1.2s var(--pk-ease); } html.theme-prakriti .pk-hero-product:hover img { scale: 1.04; } html.pk-motion.theme-prakriti .pk-hero-product img { animation: pk-breathe 14s ease-in-out infinite alternate; } @keyframes pk-breathe { from { transform: scale(1); } to { transform: scale(1.07); } } /* Inside a framed window a vertical slide reads as a glitch; cross-fade with a slight zoom instead. */ html.theme-prakriti .pk-hero-product.pk-swap-enter-from { transform: scale(1.06); } html.theme-prakriti .pk-hero-product.pk-swap-leave-to { transform: scale(.98); } html.theme-prakriti .pk-hero-arch-shade { position: absolute; inset: 10px; z-index: 2; border-radius: 50%; background: linear-gradient(180deg, transparent 62%, rgb(var(--pk-forest) / .28)); pointer-events: none; } html.theme-prakriti .pk-hero-arch-empty { position: absolute; inset: 22%; color: rgb(var(--pk-accent) / .5); } @keyframes pk-arch-in { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(50% at 50% 50%); } } html.pk-motion.theme-prakriti .pk-hero-arch { animation: pk-arch-in 1.5s var(--pk-ease) .25s both; } @keyframes pk-frame-in { from { opacity: 0; } } html.pk-motion.theme-prakriti .pk-hero-arch-frame { animation: pk-frame-in 1.2s ease 1.2s both; } /* Herb chips orbiting the arch: pop in (scale), then bob (transform) for ever. */ html.theme-prakriti .pk-hero-herb { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgb(var(--pk-forest)); white-space: nowrap; background: rgb(var(--pk-surface) / .9); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); translate: calc(var(--pk-px) * var(--pk-depth, 24px)) calc(var(--pk-py) * var(--pk-depth, 24px)); transition: translate 1s var(--pk-ease); } html.theme-prakriti .pk-hero-herb .pk-leaf-svg { width: 24px; height: 24px; color: var(--pk-leaf-1); rotate: -30deg; } html.theme-prakriti .pk-hero-herb--1 { top: 14%; inset-inline-start: -4%; --pk-depth: 30px; } html.theme-prakriti .pk-hero-herb--2 { top: 36%; inset-inline-end: -5%; --pk-depth: 18px; } html.theme-prakriti .pk-hero-herb--3 { top: 58%; inset-inline-start: -7%; --pk-depth: 36px; } html.theme-prakriti .pk-hero-herb--4 { top: 66%; inset-inline-end: -3%; --pk-depth: 22px; } html.theme-prakriti .pk-hero-herb--2 .pk-leaf-svg { color: var(--pk-leaf-3); } html.theme-prakriti .pk-hero-herb--3 .pk-leaf-svg { color: var(--pk-leaf-5); } @keyframes pk-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } } @keyframes pk-bob { 50% { transform: translateY(-10px) rotate(-1.5deg); } } html.pk-motion.theme-prakriti .pk-hero-herb { animation: pk-pop .9s var(--pk-spring) both, pk-bob 6s ease-in-out infinite; } html.pk-motion.theme-prakriti .pk-hero-herb--1 { animation-delay: 1.1s, 1.1s; } html.pk-motion.theme-prakriti .pk-hero-herb--2 { animation-delay: 1.3s, 2.4s; } html.pk-motion.theme-prakriti .pk-hero-herb--3 { animation-delay: 1.5s, 3.1s; } html.pk-motion.theme-prakriti .pk-hero-herb--4 { animation-delay: 1.7s, 1.8s; } html.theme-prakriti .pk-hero-tag { position: absolute; z-index: 3; inset-inline-start: 2%; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; max-width: 78%; padding: 12px 12px 12px 18px; border-radius: 22px; color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface) / .92); box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .4s var(--pk-ease); } html.theme-prakriti .pk-hero-tag:hover { transform: translateY(-3px); } html.theme-prakriti .pk-hero-tag-name { grid-column: 1; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } html.theme-prakriti .pk-hero-tag-price { grid-column: 1; display: flex; align-items: baseline; gap: 8px; } html.theme-prakriti .pk-hero-tag-price strong { font-family: var(--pk-font-display); font-size: 18px; font-weight: 600; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-hero-tag-price del { font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hero-tag-go { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-hero-dots { position: absolute; z-index: 3; inset-inline-end: 0; bottom: 4px; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(var(--pk-surface) / .85); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hero-dot { width: 40px; height: 40px; border-radius: 999px; overflow: hidden; background: #fff; opacity: .55; transition: opacity .25s, box-shadow .25s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-hero-dot img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-hero-dot:hover { opacity: 1; transform: translateY(-2px); } html.theme-prakriti .pk-hero-dot.is-active { opacity: 1; box-shadow: 0 0 0 2px rgb(var(--pk-sun)); } html.theme-prakriti .pk-hero-concerns { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } html.theme-prakriti .pk-hero-concerns small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-scroll-cue { position: absolute; z-index: 1; left: 50%; bottom: 16px; width: 26px; height: 40px; translate: -50% 0; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-scroll-cue .pk-leaf-svg { rotate: 180deg; } @keyframes pk-cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: .5; } } html.pk-motion.theme-prakriti .pk-scroll-cue .pk-leaf-svg { animation: pk-cue 2.2s ease-in-out infinite; } @media (max-width: 1023.98px) { html.theme-prakriti .pk-hero { min-height: 0; } html.theme-prakriti .pk-hero-visual { width: min(100%, 440px); } html.theme-prakriti .pk-scroll-cue { display: none; } } @media (max-width: 639.98px) { html.theme-prakriti .pk-hero-herb { height: 34px; font-size: 12px; padding-inline: 6px 12px; } html.theme-prakriti .pk-hero-herb .pk-leaf-svg { width: 20px; height: 20px; } html.theme-prakriti .pk-hero-herb--1 { inset-inline-start: 0; } html.theme-prakriti .pk-hero-herb--2 { inset-inline-end: 0; } html.theme-prakriti .pk-hero-herb--3 { inset-inline-start: 0; } html.theme-prakriti .pk-hero-herb--4 { display: none; } html.theme-prakriti .pk-hero-tag { max-width: 56%; padding: 10px 10px 10px 14px; gap: 2px 8px; } html.theme-prakriti .pk-hero-tag-go { width: 34px; height: 34px; } html.theme-prakriti .pk-hero-dot { width: 30px; height: 30px; } html.theme-prakriti .pk-hero-dots { gap: 4px; padding: 4px; } } /* 10. Trust ribbon -------------------------------------------------------- */ html.theme-prakriti .pk-ribbon { position: relative; z-index: 2; isolation: isolate; padding-block: 26px; overflow: clip; } html.theme-prakriti .pk-ribbon::before { content: ""; position: absolute; z-index: -1; left: -2%; right: -2%; top: 30px; bottom: 30px; background: rgb(var(--pk-sun) / .85); transform: rotate(1.3deg); } html.theme-prakriti .pk-ribbon-band { margin-inline: -2%; padding-block: 16px; color: rgb(var(--pk-cream-ink)); background: rgb(var(--pk-forest)); transform: rotate(-1.4deg); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-ribbon-track { display: flex; width: max-content; } html.pk-motion.theme-prakriti .pk-ribbon-track { animation: pk-marquee 46s linear infinite; } html.theme-prakriti .pk-ribbon:hover .pk-ribbon-track { animation-play-state: paused; } html.theme-prakriti .pk-ribbon-list { display: flex; align-items: center; gap: 44px; padding-inline-end: 44px; } html.theme-prakriti .pk-ribbon-list li { display: inline-flex; align-items: center; gap: 12px; font-family: var(--pk-font-display); font-style: italic; font-size: clamp(17px, 1.8vw, 22px); white-space: nowrap; } html.theme-prakriti .pk-ribbon-list .pk-leaf-svg { width: 22px; height: 22px; color: rgb(var(--pk-sun)); rotate: -40deg; } /* 12. Product tabs -------------------------------------------------------- */ html.theme-prakriti .pk-ptabs .pk-head { align-items: flex-end; } /* 13. Root to remedy ------------------------------------------------------ */ html.theme-prakriti .pk-ritual { position: relative; isolation: isolate; margin-inline: clamp(0px, 1.6vw, 24px); border-radius: clamp(28px, 4vw, 56px); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); overflow: clip; } html.theme-prakriti .pk-ritual > .pk-leaves { z-index: -1; } html.theme-prakriti .pk-ritual .pk-leaf, html.theme-prakriti .pk-consult .pk-leaf { opacity: calc(.12 + var(--z) * .22); } html.theme-prakriti .pk-ritual-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { html.theme-prakriti .pk-ritual-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } html.theme-prakriti .pk-ritual-pin { position: sticky; top: calc(var(--header-h, 76px) + 40px); } } html.theme-prakriti .pk-ritual-visual { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; } html.theme-prakriti .pk-ritual-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; } html.theme-prakriti .pk-ritual-ring circle { fill: none; stroke-width: 1.5; } html.theme-prakriti .pk-ritual-ring-track { stroke: rgb(var(--pk-line)); } html.theme-prakriti .pk-ritual-ring-fill { stroke: rgb(var(--pk-sun)); stroke-width: 3 !important; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset .9s var(--pk-ease); } html.theme-prakriti .pk-ritual-mandala { position: absolute; inset: 6%; color: rgb(var(--pk-accent) / .16); } html.theme-prakriti .pk-ritual-mandala .pk-mandala { rotate: calc(var(--pk-step, 0) * 45deg); transition: rotate 1.4s var(--pk-ease); } /* A full circle inside the ring, the photo covering it (no multiply: lifestyle photos showed as hard boxes). */ html.theme-prakriti .pk-ritual-arch { position: absolute; inset: 17%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: linear-gradient(180deg, var(--pk-tone-2), var(--pk-tone-1)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(255 255 255 / .7); } html.theme-prakriti .pk-ritual-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-ritual-arch-leaf { width: 70%; color: var(--pk-leaf-1); opacity: .6; } html.theme-prakriti .pk-ritual-badge { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-inline: 14px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; color: #fff; background: rgb(var(--pk-forest)); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-ritual-badge .pk-icon { color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ritual-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } html.theme-prakriti .pk-ritual-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; border-radius: 24px; opacity: .5; transition: opacity .5s, background-color .5s, box-shadow .5s, transform .6s var(--pk-ease); } html.theme-prakriti .pk-ritual-step.is-active { opacity: 1; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transform: translateX(6px); } html.theme-prakriti .pk-ritual-step.is-done { opacity: .8; } html.theme-prakriti .pk-ritual-num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); transition: background-color .5s, color .5s; } html.theme-prakriti .pk-ritual-step.is-active .pk-ritual-num { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-ritual-step h3 { font-family: var(--pk-font-display); font-size: 21px; font-weight: 500; margin-bottom: 4px; } html.theme-prakriti .pk-ritual-step p { font-size: 15px; line-height: 1.65; color: rgb(var(--pk-ink-2)); } @media (max-width: 1023.98px) { html.theme-prakriti .pk-ritual-visual { width: min(100%, 380px); } html.theme-prakriti .pk-ritual-step { opacity: 1; } } /* 15. Flash rail + promo -------------------------------------------------- */ html.theme-prakriti .pk-flash { background: linear-gradient(180deg, transparent, rgb(var(--pk-sun) / .08) 30%, rgb(var(--pk-sun) / .08) 70%, transparent); } html.theme-prakriti .pk-countdown-cell { background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-promo { --pk-p: 0; position: relative; display: block; overflow: hidden; border-radius: 32px; background: rgb(var(--pk-bg-2)); box-shadow: var(--pk-shadow-1); transition: transform .5s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-promo:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow-3); } html.theme-prakriti img.pk-promo-img { width: 100%; display: block; transform: scale(1.1) translateY(calc(var(--pk-p) * 24px)); transition: transform .2s linear; } /* 16. Dosha quiz ---------------------------------------------------------- */ html.theme-prakriti .pk-quiz { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(24px, 5vw, 64px); border-radius: clamp(28px, 4vw, 44px); color: rgb(var(--pk-cream-ink) / .82); background: radial-gradient(80% 90% at 0% 0%, rgb(var(--pk-forest-2)), transparent 70%), rgb(var(--pk-forest)); } @media (min-width: 1024px) { html.theme-prakriti .pk-quiz { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } } html.theme-prakriti .pk-quiz-mandala { position: absolute; z-index: -1; right: -14%; top: -30%; width: 720px; height: 720px; color: rgb(var(--pk-sun) / .14); pointer-events: none; } html.pk-motion.theme-prakriti .pk-quiz-mandala .pk-mandala { animation: pk-turn 160s linear infinite reverse; } html.theme-prakriti .pk-quiz-side { display: flex; flex-direction: column; gap: 14px; } html.theme-prakriti .pk-quiz-side .pk-h2 { color: #fff; } html.theme-prakriti .pk-quiz-side > p { font-size: 15.5px; line-height: 1.7; max-width: 460px; } html.theme-prakriti .pk-doshas { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } html.theme-prakriti .pk-dosha { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 20px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); transition: background-color .4s, box-shadow .4s; } html.theme-prakriti .pk-dosha { position: relative; overflow: hidden; } html.theme-prakriti .pk-dosha-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; } /* Live share of each dosha while answering: a number and a meter along the bottom edge. */ html.theme-prakriti .pk-dosha-share { font-family: var(--pk-font-display); font-size: 18px; font-variant-numeric: tabular-nums; color: #fff; } html.theme-prakriti .pk-dosha-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--pk-sun)); transform-origin: left; transition: transform .6s var(--pk-ease); } html[dir="rtl"].theme-prakriti .pk-dosha-meter { transform-origin: right; } html.theme-prakriti .pk-dosha--vata .pk-dosha-meter { background: rgb(var(--pk-vata)); } html.theme-prakriti .pk-dosha--pitta .pk-dosha-meter { background: rgb(var(--pk-pitta)); } html.theme-prakriti .pk-dosha--kapha .pk-dosha-meter { background: rgb(var(--pk-kapha)); } html.theme-prakriti .pk-dosha strong { font-family: var(--pk-font-display); font-weight: 500; font-size: 18px; color: #fff; } html.theme-prakriti .pk-dosha small { font-size: 12.5px; letter-spacing: .06em; } html.theme-prakriti .pk-dosha.is-mine { background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-sun)); } html.theme-prakriti .pk-dosha-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-dosha--vata .pk-dosha-icon, html.theme-prakriti .pk-dosha-icon--vata, html.theme-prakriti .pk-doshafit-item--vata .pk-dosha-icon { background: rgb(var(--pk-vata)); } html.theme-prakriti .pk-dosha--pitta .pk-dosha-icon, html.theme-prakriti .pk-dosha-icon--pitta, html.theme-prakriti .pk-doshafit-item--pitta .pk-dosha-icon { background: rgb(var(--pk-pitta)); } html.theme-prakriti .pk-dosha--kapha .pk-dosha-icon, html.theme-prakriti .pk-dosha-icon--kapha, html.theme-prakriti .pk-doshafit-item--kapha .pk-dosha-icon { background: rgb(var(--pk-kapha)); } html.theme-prakriti .pk-quiz-card { position: relative; min-height: 440px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3); overflow: hidden; } html.theme-prakriti .pk-quiz-progress { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-quiz-progress { position: relative; } html.theme-prakriti .pk-quiz-progress::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px; background: rgb(var(--pk-line)); } html.theme-prakriti .pk-quiz-progress i { position: relative; z-index: 1; display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform-origin: left; transition: transform .6s var(--pk-ease); } html[dir="rtl"].theme-prakriti .pk-quiz-progress i { transform-origin: right; } html.theme-prakriti .pk-quiz-q h3 { font-family: var(--pk-font-display); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.2; margin-bottom: 18px; } html.theme-prakriti .pk-quiz-options { display: flex; flex-direction: column; gap: 10px; } html.theme-prakriti .pk-quiz-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: start; font-size: 15px; font-weight: 500; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .25s, background-color .25s, transform .4s var(--pk-ease), color .25s; } html.theme-prakriti .pk-quiz-opt:hover { color: rgb(var(--pk-ink)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent) / .6); transform: translateX(4px); } html.theme-prakriti .pk-quiz-opt.is-on { color: rgb(var(--pk-ink)); background: rgb(var(--pk-accent) / .1); box-shadow: inset 0 0 0 2px rgb(var(--pk-accent)); } /* The option's number doubles as its keyboard shortcut (and no longer hints at a dosha). */ html.theme-prakriti .pk-quiz-opt-key { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-accent)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: background-color .25s, color .25s; } html.theme-prakriti .pk-quiz-opt.is-on .pk-quiz-opt-key { color: #fff; background: rgb(var(--pk-accent)); box-shadow: none; } html.theme-prakriti .pk-quiz-opt:focus-visible { outline: 2px solid rgb(var(--pk-accent)); outline-offset: 2px; } html.theme-prakriti .pk-quiz-card h3:focus { outline: none; } html.theme-prakriti .pk-quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; margin-top: 16px; } html.theme-prakriti .pk-quiz-nav .pk-quiz-back { margin-top: 0; } html.theme-prakriti .pk-quiz-keys { margin-inline-start: auto; font-size: 12px; color: rgb(var(--pk-muted)); } @media (hover: none) { html.theme-prakriti .pk-quiz-keys { display: none; } } html.theme-prakriti .pk-quiz-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-quiz-back:hover { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-quiz-result { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } html.theme-prakriti .pk-quiz-result-icons { display: flex; gap: 8px; } html.theme-prakriti .pk-quiz-result-icons .pk-dosha-icon { width: 56px; height: 56px; } html.theme-prakriti .pk-quiz-result-head { display: flex; align-items: center; gap: 18px; width: 100%; } html.theme-prakriti .pk-quiz-result-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html.theme-prakriti .pk-quiz-result-title > small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } /* The mix as a ring: three arcs end to end from 12 o'clock, strongest first. */ html.theme-prakriti .pk-ring { position: relative; flex-shrink: 0; width: 112px; height: 112px; margin: 0; } html.theme-prakriti .pk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } html[dir="rtl"].theme-prakriti .pk-ring svg { transform: rotate(-90deg) scaleY(-1); } html.theme-prakriti .pk-ring circle { fill: none; stroke-width: 9; } html.theme-prakriti .pk-ring-track { stroke: rgb(var(--pk-line)); } html.theme-prakriti .pk-ring-arc { stroke-linecap: butt; transition: stroke-dasharray .9s var(--pk-ease), stroke-dashoffset .9s var(--pk-ease); } html.theme-prakriti .pk-ring-arc--vata { stroke: rgb(var(--pk-vata)); } html.theme-prakriti .pk-ring-arc--pitta { stroke: rgb(var(--pk-pitta)); } html.theme-prakriti .pk-ring-arc--kapha { stroke: rgb(var(--pk-kapha)); } html.theme-prakriti .pk-ring-core { position: absolute; inset: 22px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ring-core.pk-dosha-icon--vata { background: rgb(var(--pk-vata)); } html.theme-prakriti .pk-ring-core.pk-dosha-icon--pitta { background: rgb(var(--pk-pitta)); } html.theme-prakriti .pk-ring-core.pk-dosha-icon--kapha { background: rgb(var(--pk-kapha)); } html.theme-prakriti .pk-ring-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ring-legend li { display: inline-flex; align-items: center; gap: 6px; } html.theme-prakriti .pk-ring-legend i { width: 9px; height: 9px; border-radius: 999px; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ring-legend--vata i { background: rgb(var(--pk-vata)); } html.theme-prakriti .pk-ring-legend--pitta i { background: rgb(var(--pk-pitta)); } html.theme-prakriti .pk-ring-legend--kapha i { background: rgb(var(--pk-kapha)); } html.theme-prakriti .pk-ring-legend strong { font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } @media (max-width: 420px) { html.theme-prakriti .pk-ring { width: 88px; height: 88px; } html.theme-prakriti .pk-ring-core { inset: 17px; } } html.theme-prakriti .pk-quiz-result > p.pk-quiz-dual { font-size: 14px; font-style: italic; color: rgb(var(--pk-muted)); } /* The season now. */ html.theme-prakriti .pk-quiz-ritu { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; background: rgb(var(--pk-sun) / .12); box-shadow: inset 0 0 0 1px rgb(var(--pk-sun) / .35); } html.theme-prakriti .pk-quiz-ritu-icon { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: rgb(var(--pk-sun-ink)); background: rgb(var(--pk-sun) / .25); } html.theme-prakriti .pk-quiz-ritu strong { font-size: 13.5px; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-quiz-ritu p { margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-quiz-ritu .pk-quiz-ritu-yours { font-weight: 600; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-quiz-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-quiz-saved a { font-weight: 600; color: rgb(var(--pk-accent)); text-decoration: underline; text-underline-offset: 3px; } html.theme-prakriti .pk-quiz-result > small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-quiz-result h3 { font-family: var(--pk-font-display); font-size: clamp(32px, 4vw, 44px); font-weight: 500; line-height: 1; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-quiz-result > p { font-size: 15px; line-height: 1.65; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-quiz-tips { display: flex; flex-direction: column; gap: 6px; } html.theme-prakriti .pk-quiz-tips li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-quiz-tips .pk-icon { flex-shrink: 0; margin-top: 3px; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-quiz-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 6px; } @media (min-width: 640px) { html.theme-prakriti .pk-quiz-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } } html.theme-prakriti .pk-quiz-picks-head { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-quiz-pick { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 18px; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .4s var(--pk-ease), box-shadow .3s; } html.theme-prakriti .pk-quiz-pick:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-quiz-pick img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; mix-blend-mode: multiply; } html.theme-prakriti .pk-quiz-pick span { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: capitalize; } html.theme-prakriti .pk-quiz-pick strong { font-family: var(--pk-font-display); font-size: 14px; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-quiz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } html.theme-prakriti .pk-quiz-actions .pk-btn--glass { color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-quiz-note { font-size: 12px; color: rgb(var(--pk-muted)); } /* 17. Reviews wall -------------------------------------------------------- */ html.theme-prakriti .pk-wall { display: flex; flex-direction: column; gap: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } html.theme-prakriti .pk-wall-track { display: flex; gap: 18px; width: max-content; padding-block: 6px; } html.pk-motion.theme-prakriti .pk-wall-track { animation: pk-marquee 70s linear infinite; } html.pk-motion.theme-prakriti .pk-wall-row.is-reverse .pk-wall-track { animation-direction: reverse; animation-duration: 80s; } html.theme-prakriti .pk-wall:hover .pk-wall-track { animation-play-state: paused; } html.theme-prakriti .pk-quote { position: relative; flex: 0 0 340px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 26px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-quote-mark { position: absolute; top: 20px; inset-inline-end: 20px; color: rgb(var(--pk-sun) / .5); } html.theme-prakriti .pk-quote blockquote { flex: 1; font-family: var(--pk-font-display); font-size: 16.5px; font-style: italic; line-height: 1.55; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-quote figcaption { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-quote-avatar { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; font-weight: 700; color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-quote-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } html.theme-prakriti .pk-quote-who strong { font-size: 14px; } html.theme-prakriti .pk-quote-who a { font-size: 12.5px; color: rgb(var(--pk-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } html.theme-prakriti .pk-quote-who a:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-quote-thumb { flex-shrink: 0; width: 44px; height: 44px; margin-inline-start: auto; border-radius: 12px; object-fit: cover; background: #fff; } @media (max-width: 639.98px) { html.theme-prakriti .pk-quote { flex-basis: 280px; } } /* 18. Consult ------------------------------------------------------------- */ html.theme-prakriti .pk-consult { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: clamp(28px, 4vw, 40px); background: linear-gradient(120deg, rgb(var(--pk-sun) / .16), rgb(var(--pk-accent) / .1)), rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } @media (min-width: 900px) { html.theme-prakriti .pk-consult { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } } html.theme-prakriti .pk-consult > .pk-leaves { z-index: -1; } html.theme-prakriti .pk-consult-art { position: relative; width: min(260px, 70%); aspect-ratio: 1; margin-inline: auto; } html.theme-prakriti .pk-consult-mandala { position: absolute; inset: 0; color: rgb(var(--pk-accent) / .28); } html.pk-motion.theme-prakriti .pk-consult-mandala .pk-mandala { animation: pk-turn 90s linear infinite; } html.theme-prakriti .pk-consult-arch { position: absolute; inset: 16% 24% 8%; display: grid; place-items: center; border-radius: var(--pk-arch); color: rgb(var(--pk-sun)); background: rgb(var(--pk-forest)); box-shadow: var(--pk-shadow-3); } html.theme-prakriti .pk-consult-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } html.theme-prakriti .pk-consult-copy > p { max-width: 560px; font-size: 15.5px; line-height: 1.7; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-consult-ctas { display: flex; flex-wrap: wrap; gap: 10px; } html.theme-prakriti .pk-consult-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--pk-muted)); } /* 19. Newsletter ---------------------------------------------------------- */ html.theme-prakriti .pk-news { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: clamp(28px, 4vw, 40px); color: rgb(var(--pk-cream-ink) / .78); background: radial-gradient(70% 90% at 100% 100%, rgb(var(--pk-forest-2)), transparent 70%), rgb(var(--pk-forest)); } @media (min-width: 1024px) { html.theme-prakriti .pk-news { grid-template-columns: 1fr 1fr; } } html.theme-prakriti .pk-news > .pk-leaves { z-index: -1; } html.theme-prakriti .pk-news .pk-leaf { opacity: calc(.12 + var(--z) * .22); } html.theme-prakriti .pk-news-mandala { position: absolute; z-index: -1; left: -140px; bottom: -220px; width: 520px; height: 520px; color: rgb(var(--pk-sun) / .14); } html.pk-motion.theme-prakriti .pk-news-mandala .pk-mandala { animation: pk-turn 150s linear infinite; } html.theme-prakriti .pk-news .pk-h2 { color: #fff; margin-block: 12px 10px; } html.theme-prakriti .pk-news-form { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); } html.theme-prakriti .pk-news-form input { flex: 1; min-width: 160px; height: 54px; padding-inline: 20px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 15px; } html.theme-prakriti .pk-news-form input::placeholder { color: rgb(255 255 255 / .5); } html.theme-prakriti .pk-news-form .pk-btn--primary { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-news-form .pk-btn--primary::before { background: #fff; } html.theme-prakriti .pk-news-error { flex-basis: 100%; padding-inline: 20px 0; color: #fca5a5; } @media (max-width: 479.98px) { html.theme-prakriti .pk-news-form { border-radius: 24px; } html.theme-prakriti .pk-news-form .pk-btn { width: 100%; } } /* 20. Product card -------------------------------------------------------- */ html.theme-prakriti .pk-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; } html.theme-prakriti .pk-card-stage { --pk-rx: 0deg; --pk-ry: 0deg; --pk-gx: 50%; --pk-gy: 50%; position: relative; aspect-ratio: 1 / 1; border-radius: var(--pk-radius); overflow: hidden; isolation: isolate; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transform: perspective(900px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .6s var(--pk-ease), box-shadow .5s var(--pk-ease); } html.theme-prakriti .pk-card-stage.is-tilting { transition: transform .12s linear, box-shadow .5s var(--pk-ease); } html.theme-prakriti .pk-card:hover .pk-card-stage { box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-sun) / .35); } /* Glare that follows the tilt. */ html.theme-prakriti .pk-card-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(360px circle at var(--pk-gx) var(--pk-gy), rgb(255 255 255 / .4), transparent 40%); opacity: 0; transition: opacity .4s; } html.theme-prakriti .pk-card-stage.is-tilting::after { opacity: 1; } /* Photo window: cream mat around a photo that fills the window (cover). No multiply blend — it only flattered white packshots and left lifestyle photos as boxes floating in a pastel arch. The tone gradient behind it only shows while the image loads. */ html.theme-prakriti .pk-card-media { position: absolute; inset: 8px; display: block; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, var(--pk-tone-1), var(--pk-tone-2)); box-shadow: 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-grid > :nth-child(4n+2) .pk-card-media, html.theme-prakriti .pk-rail-item:nth-child(4n+2) .pk-card-media { background: linear-gradient(180deg, var(--pk-tone-2), var(--pk-tone-3)); } html.theme-prakriti .pk-grid > :nth-child(4n+3) .pk-card-media, html.theme-prakriti .pk-rail-item:nth-child(4n+3) .pk-card-media { background: linear-gradient(180deg, var(--pk-tone-4), var(--pk-tone-1)); } html.theme-prakriti .pk-grid > :nth-child(4n) .pk-card-media, html.theme-prakriti .pk-rail-item:nth-child(4n) .pk-card-media { background: linear-gradient(180deg, var(--pk-tone-5), var(--pk-tone-2)); } /* AppImage sets an inline 1:1 aspect-ratio; the window decides the shape here. */ html.theme-prakriti img.pk-card-img { display: block; width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; object-position: center; transition: transform 1.1s var(--pk-ease), opacity .3s, filter .3s; } html.theme-prakriti .pk-card:hover img.pk-card-img { transform: scale(1.06); } /* Hairline that draws in on hover, inside the window edge. */ html.theme-prakriti .pk-card-media::after { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .8); opacity: 0; transform: scale(1.03); transition: opacity .5s, transform .7s var(--pk-ease); pointer-events: none; } html.theme-prakriti .pk-card:hover .pk-card-media::after { opacity: 1; transform: none; } html.theme-prakriti .pk-card-shade { position: absolute; inset: auto 8px 8px; z-index: 1; height: 34%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, transparent, rgb(var(--pk-forest) / .32)); opacity: .55; transition: opacity .5s; pointer-events: none; } html.theme-prakriti .pk-card:hover .pk-card-shade { opacity: 1; } html.theme-prakriti .pk-card-stage .pk-seal { top: 10px; inset-inline-start: 10px; } html.theme-prakriti .pk-card:hover .pk-seal { rotate: 0deg; } html.theme-prakriti .pk-card-badges { position: absolute; z-index: 3; bottom: 18px; inset-inline-start: 18px; display: flex; flex-wrap: wrap; gap: 6px; transition: opacity .3s; } html.theme-prakriti .pk-card:hover .pk-card-badges { opacity: 0; } html.theme-prakriti .pk-card-wish { position: absolute; z-index: 3; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: rgb(var(--pk-ink-2)); background: rgb(255 255 255 / .92); box-shadow: var(--pk-shadow-1); transition: transform .35s var(--pk-spring), color .2s; } html.theme-prakriti .pk-card-wish:hover { transform: scale(1.12); color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-card-wish.is-on { color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-card-wish.is-on .pk-icon { fill: currentColor; animation: pk-heart .5s var(--pk-spring); } html.theme-prakriti .pk-card-cta { position: absolute; z-index: 3; inset-inline: 16px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 46px; padding-inline: 18px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #fff; background: rgb(var(--pk-forest) / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(calc(100% + 16px)); transition: transform .5s var(--pk-ease), background-color .25s; } html.theme-prakriti .pk-card-cta:hover { background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-card:hover .pk-card-cta, html.theme-prakriti .pk-card:focus-within .pk-card-cta { transform: none; } @media (hover: none) { html.theme-prakriti .pk-card-cta { display: none; } html.theme-prakriti .pk-card-badges { opacity: 1 !important; } } html.theme-prakriti .pk-card.is-out img.pk-card-img { opacity: .55; filter: grayscale(.6); } html.theme-prakriti .pk-card-body { display: flex; flex-direction: column; gap: 5px; padding-inline: 4px; } html.theme-prakriti .pk-card-name { font-family: var(--pk-font-display); font-size: 17px; font-weight: 500; line-height: 1.3; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-card-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: capitalize; transition: color .2s; } html.theme-prakriti .pk-card-name a:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-card-price { display: flex; align-items: baseline; gap: 8px; min-width: 0; } html.theme-prakriti .pk-card-price strong { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-card-price del { font-size: 12.5px; color: rgb(var(--pk-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-prakriti .pk-card-off { font-size: 12px; font-weight: 700; white-space: nowrap; color: rgb(var(--pk-accent)); } @media (max-width: 639.98px) { html.theme-prakriti .pk-card-name { font-size: 15px; } html.theme-prakriti .pk-card-wish { width: 32px; height: 32px; } html.theme-prakriti .pk-card-stage { border-radius: 20px; } html.theme-prakriti .pk-card-media { inset: 6px; border-radius: 14px; } html.theme-prakriti .pk-card-shade { inset: auto 6px 6px; border-radius: 0 0 14px 14px; } html.theme-prakriti .pk-card-stage .pk-seal { width: 46px; height: 46px; font-size: 12px; } } /* 21. Skin for inherited default pages ------------------------------------ Checkout, account and auth keep the default components (and their logic). These narrow, colour/shape-only rules bring them into the theme. */ html.theme-prakriti main, html.theme-prakriti .container { --tw-ring-color: rgb(var(--pk-accent) / .3); } html.theme-prakriti :is(h1, h2, h3).font-display, html.theme-prakriti .font-display { font-family: var(--pk-font-display); font-weight: 500; letter-spacing: -.015em; } html.theme-prakriti :is(.rounded-2xl, .rounded-3xl) { border-radius: var(--pk-radius); } html.theme-prakriti :is(.shadow-card, .shadow-xs, .shadow-e1) { box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)) !important; } html.theme-prakriti :is(.shadow-xl, .shadow-e2, .shadow-paper) { box-shadow: var(--pk-shadow-2) !important; } html.theme-prakriti .field-button { height: 54px; line-height: 54px; border-radius: 999px; font-weight: 700; transition: transform .3s var(--pk-ease), box-shadow .3s, filter .2s; box-shadow: 0 12px 28px -12px rgb(var(--pk-accent) / .7); } html.theme-prakriti .field-button:hover { filter: brightness(1.06); } html.theme-prakriti .field-button:active { transform: scale(.98); } html.theme-prakriti :is(.field-control, .frontend-select) { border-radius: 14px; } html.theme-prakriti :is(.field-control, .frontend-select):focus-within { border-color: rgb(var(--pk-accent)); box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .14); } html.theme-prakriti .modal { background: rgb(var(--pk-ink) / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html.theme-prakriti .modal-dialog { border-radius: var(--pk-radius); box-shadow: var(--pk-shadow-3); } html.theme-prakriti .profile-link { border-radius: 12px; } html.theme-prakriti .profile-link.active { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .08); } /* Default product cards on lists this theme doesn't fork (offers, sections, wishlist). */ html.theme-prakriti .group.rounded-2xl > .relative.isolate { background: linear-gradient(180deg, var(--pk-tone-1), var(--pk-tone-2)); } @media (max-width: 1023.98px) { html.theme-prakriti #cart-canvas > div { padding-bottom: env(safe-area-inset-bottom); } } /* 22. Shop listing (prakriti/product/ProductComponent) ----------------------- Default listing logic, Prakriti markup (mirrors Optica's): blooming hero, category glider, sticky glass toolbar, sidebar/drawer filters, staggered grid, pager. */ html.theme-prakriti .pk-shop { overflow-x: clip; padding-bottom: 24px; } /* Hero */ html.theme-prakriti .pk-shop-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 48px); } html.theme-prakriti .pk-shop-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); } html.theme-prakriti .pk-shop-hero-inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 900px) { html.theme-prakriti .pk-shop-hero-inner { grid-template-columns: 1fr auto; } } html.theme-prakriti .pk-shop-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-prakriti .pk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-crumbs a { text-transform: capitalize; transition: color .2s; } html.theme-prakriti .pk-crumbs a:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-crumbs a:last-child { color: rgb(var(--pk-ink)); font-weight: 500; } html.theme-prakriti .pk-crumbs .pk-icon { opacity: .5; } html[dir="rtl"].theme-prakriti .pk-crumbs .pk-icon { transform: scaleX(-1); } html.theme-prakriti .pk-shop-title { font-family: var(--pk-font-display); font-size: clamp(36px, 6vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.045em; color: rgb(var(--pk-ink)); text-transform: capitalize; overflow-wrap: anywhere; } html.theme-prakriti .pk-shop-title-pre { display: block; font-size: .4em; letter-spacing: -.02em; color: rgb(var(--pk-muted)); margin-bottom: .2em; text-transform: none; } html.theme-prakriti .pk-shop-count { font-size: 15px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-shop-count strong { font-family: var(--pk-font-display); font-size: 18px; color: rgb(var(--pk-accent)); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-shop-search { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); height: 58px; padding-inline: 18px 6px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .3s; } html.theme-prakriti .pk-shop-search:focus-within { box-shadow: var(--pk-shadow-2), inset 0 0 0 1.5px rgb(var(--pk-accent)), 0 0 0 5px rgb(var(--pk-accent) / .12); } html.theme-prakriti .pk-shop-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-shop-search input::-webkit-search-cancel-button { display: none; } html.theme-prakriti .pk-shop-search-clear { display: flex; padding: 6px; border-radius: 999px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-shop-search-clear:hover { color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-shop-hero-art { display: none; } @media (min-width: 900px) { html.theme-prakriti .pk-shop-hero-art { display: block; } } @keyframes pk-spin-plain { to { transform: rotate(360deg); } } /* Category rail */ html.theme-prakriti .pk-shop-rail { position: relative; flex: 0 1 auto; min-width: 0; display: flex; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); width: fit-content; max-width: 100%; } html.theme-prakriti .pk-shop-rail::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-shop-glider { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px; background: rgb(var(--pk-ink)); box-shadow: 0 8px 18px -8px rgb(var(--pk-ink) / .6); transition: transform .5s var(--pk-ease), width .5s var(--pk-ease), opacity .3s; pointer-events: none; } html.theme-prakriti .pk-shop-rail-item { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; height: 36px; padding-inline: 18px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .35s; } html.theme-prakriti .pk-shop-rail-item:hover { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-shop-rail-item.is-active { color: #fff; } /* Sticky toolbar */ html.theme-prakriti .pk-shop-toolbar { position: sticky; top: 0; z-index: 15; padding-block: 10px; background: rgb(var(--pk-bg) / .94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: top .5s var(--pk-ease), border-color .3s; } html.theme-prakriti:has(.pk-nav:not(.is-hidden)) .pk-shop-toolbar { top: var(--header-h, 76px); } html.theme-prakriti .pk-shop-toolbar-inner { display: flex; align-items: center; gap: 10px; } html.theme-prakriti .pk-shop-filter-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .2s; } html.theme-prakriti .pk-shop-filter-btn:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-ink)); } html.theme-prakriti .pk-shop-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-shop-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } html.theme-prakriti .pk-shop-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); transition: background-color .2s; } html.theme-prakriti .pk-shop-chip:hover { background: rgb(var(--pk-accent) / .18); } html.theme-prakriti .pk-shop-chip--clear { color: rgb(var(--pk-ink-2)); background: transparent; text-decoration: underline; text-underline-offset: 3px; } .pk-chip-list-enter-active, .pk-chip-list-leave-active { transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); } .pk-chip-list-enter-from, .pk-chip-list-leave-to { opacity: 0; transform: scale(.6); } .pk-chip-list-leave-active { position: absolute; } html.theme-prakriti .pk-shop-tools { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } html.theme-prakriti .pk-shop-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding-inline: 16px 12px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); cursor: pointer; } html.theme-prakriti .pk-shop-sort-label { font-size: 13px; color: rgb(var(--pk-muted)); white-space: nowrap; } html.theme-prakriti .pk-shop-sort select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; font-size: 14px; font-weight: 600; color: rgb(var(--pk-ink)); padding-inline-end: 22px; margin-inline-end: -22px; cursor: pointer; max-width: 170px; } html.theme-prakriti .pk-shop-sort .pk-icon { pointer-events: none; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-shop-density { display: none; padding: 4px; gap: 2px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-shop-density button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: rgb(var(--pk-muted)); transition: background-color .25s, color .25s; } html.theme-prakriti .pk-shop-density button.is-active { color: #fff; background: rgb(var(--pk-ink)); } html.theme-prakriti .pk-dens-icon { display: grid; gap: 2px; } html.theme-prakriti .pk-dens-icon--3 { grid-template-columns: repeat(3, 4px); } html.theme-prakriti .pk-dens-icon--4 { grid-template-columns: repeat(4, 3px); } html.theme-prakriti .pk-dens-icon i { height: 12px; border-radius: 1.5px; background: currentColor; } @media (min-width: 1024px) { html.theme-prakriti .pk-shop-density { display: flex; } html.theme-prakriti .pk-shop-filter-btn { display: none; } } @media (max-width: 639.98px) { html.theme-prakriti .pk-shop-sort-label { display: none; } html.theme-prakriti .pk-shop-toolbar .pk-shop-filter-btn { display: none; } } html.theme-prakriti .pk-shop-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; } html.theme-prakriti .pk-shop-progress.is-busy { opacity: 1; } html.theme-prakriti .pk-shop-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(var(--pk-accent)), transparent); animation: pk-indeterminate 1.1s ease-in-out infinite; } @keyframes pk-indeterminate { from { left: -40%; } to { left: 100%; } } /* Body: sidebar + results */ html.theme-prakriti .pk-shop-body { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 20px; } @media (min-width: 1024px) { html.theme-prakriti .pk-shop-body { grid-template-columns: 270px minmax(0, 1fr); } } html.theme-prakriti .pk-filters { display: flex; flex-direction: column; } html.theme-prakriti .pk-filters-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; } html.theme-prakriti .pk-filters-head h2 { font-family: var(--pk-font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; } html.theme-prakriti .pk-filters-reset { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-filters-close, html.theme-prakriti .pk-filters-foot { display: none; } html.theme-prakriti .pk-filters-empty { padding-block: 16px; font-size: 14px; color: rgb(var(--pk-muted)); } @media (min-width: 1024px) { html.theme-prakriti .pk-filters { position: sticky; top: calc(var(--toolbar-h, 64px) + var(--header-h, 76px) + 16px); align-self: start; max-height: calc(100vh - var(--toolbar-h, 64px) - var(--header-h, 76px) - 32px); } html.theme-prakriti .pk-filters-scroll { overflow-y: auto; scrollbar-width: thin; padding-inline-end: 6px; } html.theme-prakriti .pk-filters-backdrop { display: none; } } @media (max-width: 1023.98px) { html.theme-prakriti .pk-filters { position: fixed; z-index: 45; inset-block: 0; inset-inline-end: 0; width: min(400px, 92vw); padding: 18px 20px 0; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3); transform: translateX(105%); visibility: hidden; transition: transform .5s var(--pk-ease), visibility .5s; } html[dir="rtl"].theme-prakriti .pk-filters { transform: translateX(-105%); } html.theme-prakriti .pk-filters.is-open { transform: none; visibility: visible; } html.theme-prakriti .pk-filters-close { display: inline-flex; } html.theme-prakriti .pk-filters-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; } html.theme-prakriti .pk-filters-foot { display: block; padding-block: 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-filters-foot .pk-btn { width: 100%; } html.theme-prakriti .pk-filters-backdrop { position: fixed; inset: 0; z-index: 44; background: rgb(var(--pk-ink) / .4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } html.theme-prakriti .pk-filters-backdrop.is-open { opacity: 1; visibility: visible; } html.theme-prakriti .pk-filters.is-open .pk-fgroup { animation: pk-intro .6s var(--pk-ease) both; } html.theme-prakriti .pk-filters.is-open .pk-fgroup:nth-child(2) { animation-delay: 60ms; } html.theme-prakriti .pk-filters.is-open .pk-fgroup:nth-child(3) { animation-delay: 120ms; } html.theme-prakriti .pk-filters.is-open .pk-fgroup:nth-child(n+4) { animation-delay: 180ms; } } html.theme-prakriti .pk-fgroup { border-top: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-fgroup-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; font-family: var(--pk-font-display); font-size: 14px; font-weight: 600; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-fgroup-head em { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; margin-inline-start: 6px; border-radius: 999px; font-style: normal; font-size: 11px; color: #fff; background: rgb(var(--pk-accent)); vertical-align: 1px; } html.theme-prakriti .pk-fgroup-head .pk-icon { color: rgb(var(--pk-muted)); transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-fgroup.is-open .pk-fgroup-head .pk-icon { transform: rotate(180deg); } html.theme-prakriti .pk-fgroup-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--pk-ease); } html.theme-prakriti .pk-fgroup.is-open .pk-fgroup-body { grid-template-rows: 1fr; } html.theme-prakriti .pk-fgroup-body > div { min-height: 0; overflow: hidden; } html.theme-prakriti .pk-fgroup.is-open .pk-fgroup-body > div { padding-bottom: 18px; } html.theme-prakriti .pk-price-inputs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-price-inputs input { width: 100%; min-width: 0; height: 42px; padding-inline: 12px; border: 0; border-radius: 12px; outline: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .2s; } html.theme-prakriti .pk-price-inputs input:focus { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)), 0 0 0 4px rgb(var(--pk-accent) / .12); } html.theme-prakriti .pk-price-slider { padding-inline: 4px; } html.theme-prakriti .pk-check-list { display: flex; flex-direction: column; gap: 2px; } html.theme-prakriti .pk-check-list.is-scroll { max-height: 260px; overflow-y: auto; } html.theme-prakriti .pk-check { display: flex; align-items: center; gap: 12px; min-height: 38px; padding-inline: 6px; border-radius: 10px; cursor: pointer; transition: background-color .15s; } html.theme-prakriti .pk-check:hover { background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-check input { position: absolute; opacity: 0; pointer-events: none; } html.theme-prakriti .pk-check-box { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); background: rgb(var(--pk-surface)); transition: background-color .2s, box-shadow .2s; } html.theme-prakriti .pk-check-box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--pk-ease); } html.theme-prakriti .pk-check.is-on .pk-check-box { background: rgb(var(--pk-accent)); box-shadow: none; } html.theme-prakriti .pk-check.is-on .pk-check-box svg { stroke-dashoffset: 0; } html.theme-prakriti .pk-check input:focus-visible + .pk-check-box { box-shadow: 0 0 0 3px rgb(var(--pk-accent) / .3); } html.theme-prakriti .pk-check-label { font-size: 14px; text-transform: capitalize; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-check.is-on .pk-check-label { color: rgb(var(--pk-ink)); font-weight: 500; } html.theme-prakriti .pk-pill-list { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-prakriti .pk-pill { display: inline-flex; align-items: center; height: 36px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, background-color .2s, box-shadow .2s, transform .3s var(--pk-spring); } html.theme-prakriti .pk-pill:hover { box-shadow: inset 0 0 0 1px rgb(var(--pk-ink) / .4); } html.theme-prakriti .pk-pill:active { transform: scale(.94); } html.theme-prakriti .pk-pill.is-on { color: #fff; background: rgb(var(--pk-ink)); box-shadow: none; } /* Results grid */ html.theme-prakriti .pk-shop-results { min-width: 0; } @media (min-width: 1024px) { html.theme-prakriti .pk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.theme-prakriti .pk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { html.theme-prakriti .pk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } } html.theme-prakriti .pk-shop-grid { transition: opacity .3s, filter .3s; } html.theme-prakriti .pk-shop-grid.is-busy { opacity: .45; filter: blur(2px); pointer-events: none; } /* Cells reveal on scroll via v-reveal (§4); see §24 for the density morph. */ /* Empty state */ html.theme-prakriti .pk-shop-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(40px, 8vw, 80px) 20px; border-radius: 32px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-shop-empty h3 { font-family: var(--pk-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } html.theme-prakriti .pk-shop-empty p { max-width: 380px; color: rgb(var(--pk-muted)); font-size: 14.5px; } html.theme-prakriti .pk-shop-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } /* Pager */ html.theme-prakriti .pk-pager { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; } html.theme-prakriti .pk-pager-info { font-size: 14px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pager-info strong { color: rgb(var(--pk-ink)); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-pager-track { width: 200px; height: 3px; border-radius: 3px; overflow: hidden; background: rgb(var(--pk-line)); } html.theme-prakriti .pk-pager-bar { display: block; height: 100%; background: rgb(var(--pk-accent)); transform-origin: left; transition: transform .6s var(--pk-ease); } html.theme-prakriti .pk-pager-btns { display: flex; align-items: center; gap: 6px; } html.theme-prakriti .pk-pager-btns .pk-icon-btn:disabled { opacity: .35; pointer-events: none; } html.theme-prakriti .pk-pager-num { min-width: 42px; height: 42px; padding-inline: 8px; border-radius: 999px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink-2)); transition: background-color .2s, color .2s, transform .3s var(--pk-spring); } html.theme-prakriti .pk-pager-num:hover:not(.is-gap):not(.is-active) { background: rgb(var(--pk-ink) / .06); } html.theme-prakriti .pk-pager-num.is-active { color: #fff; background: rgb(var(--pk-ink)); transform: scale(1.05); } html.theme-prakriti .pk-pager-num.is-gap { min-width: 20px; color: rgb(var(--pk-muted)); cursor: default; } @media (max-width: 479.98px) { html.theme-prakriti .pk-pager-num:not(.is-active):not(.is-gap) { display: none; } html.theme-prakriti .pk-pager-num.is-gap { display: none; } } /* Mobile floating filter pill */ html.theme-prakriti .pk-shop-fab { position: fixed; z-index: 21; left: 50%; bottom: calc(var(--pk-tabbar-h) + 16px); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: #fff; background: rgb(var(--pk-ink)); box-shadow: 0 14px 30px -10px rgb(var(--pk-ink) / .6); transform: translateX(-50%); transition: transform .5s var(--pk-ease), opacity .3s; } html.theme-prakriti .pk-shop-fab.is-hidden { transform: translate(-50%, 140%); opacity: 0; } html.pk-motion.theme-prakriti .pk-shop-fab:not(.is-hidden) { animation: pk-fab-in .7s var(--pk-spring) .6s both; } @keyframes pk-fab-in { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: none; } } @media (min-width: 640px) { html.theme-prakriti .pk-shop-fab { display: none; } } /* 23. Product page (prakriti/product/ProductDetailsComponent) ---------------- Default PDP logic, Prakriti markup: arch gallery with a magnifier loupe, sticky buy panel, Ayurveda sections, tabs, rails, buy dock, fly-to-cart. */ html.theme-prakriti .pk-pdp { overflow-x: clip; } html.theme-prakriti .pk-pdp-hero { position: relative; isolation: isolate; padding-block: 12px clamp(32px, 5vw, 64px); } html.theme-prakriti .pk-pdp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); } html.theme-prakriti .pk-pdp-hero .pk-crumbs { margin-bottom: 18px; } html.theme-prakriti .pk-pdp-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 1024px) { html.theme-prakriti .pk-pdp-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; } } /* Gallery */ @media (min-width: 1024px) { html.theme-prakriti .pk-pdp-gallery { position: sticky; top: calc(var(--header-h, 76px) + 16px); } } html.theme-prakriti .pk-pdp-stage { /* Square, but never taller than the screen beside the buy panel. */ width: min(100%, calc(100vh - var(--header-h, 76px) - 150px)); min-width: min(100%, 320px); margin-inline: auto; position: relative; aspect-ratio: 1; border-radius: 36px; overflow: hidden; isolation: isolate; touch-action: pan-y; display: flex; align-items: center; justify-content: center; background: radial-gradient(80% 70% at 50% 42%, #fff 0%, rgb(var(--pk-bg-2)) 100%); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; user-select: none; cursor: crosshair; } html.theme-prakriti .pk-pdp-img-ph { color: rgb(var(--pk-ink) / .2); } html.theme-prakriti .pk-pdp-img-skel { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .6), transparent) 0 0 / 50% 100% no-repeat; animation: pk-skel-sweep 1.3s linear infinite; } @keyframes pk-skel-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } } html.theme-prakriti .pk-pdp-counter { position: absolute; top: 20px; inset-inline-start: 24px; z-index: 2; font-family: var(--pk-font-display); font-size: 15px; font-weight: 600; color: rgb(var(--pk-ink)); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-pdp-counter small { color: rgb(var(--pk-muted)); font-size: 12px; } html.theme-prakriti .pk-pdp-nav { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: -23px; border-radius: 999px; color: rgb(var(--pk-ink)); background: rgb(255 255 255 / .85); box-shadow: var(--pk-shadow-1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s, transform .4s var(--pk-ease), background-color .2s, color .2s; } html.theme-prakriti .pk-pdp-nav--prev { left: 16px; transform: translateX(-8px); } html.theme-prakriti .pk-pdp-nav--next { right: 16px; transform: translateX(8px); } html.theme-prakriti .pk-pdp-stage:hover .pk-pdp-nav { opacity: 1; transform: none; } html.theme-prakriti .pk-pdp-nav:hover { background: rgb(var(--pk-ink)); color: #fff; } @media (hover: none) { html.theme-prakriti .pk-pdp-nav { opacity: 1; transform: none; width: 38px; height: 38px; margin-top: -19px; } } html.theme-prakriti .pk-pdp-hint { position: absolute; bottom: 16px; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgb(var(--pk-ink-2)); background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transform: translateX(-50%); transition: opacity .3s; pointer-events: none; } html.theme-prakriti .pk-pdp-stage:hover .pk-pdp-hint { opacity: 0; } html.theme-prakriti .pk-loupe { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 999px; pointer-events: none; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 0 0 5px rgb(var(--pk-ink)), 0 0 0 6px rgb(255 255 255 / .7), 0 24px 50px -12px rgb(var(--pk-ink) / .5); will-change: transform; } html.theme-prakriti .pk-loupe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgb(255 255 255 / .35), transparent 45%); } html.theme-prakriti .pk-pdp-thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; } html.theme-prakriti .pk-pdp-thumbs::-webkit-scrollbar { display: none; } @media (max-width: 1023.98px) { html.theme-prakriti .pk-pdp-stage { width: 100%; } html.theme-prakriti .pk-pdp-thumbs { justify-content: flex-start; } } html.theme-prakriti .pk-pdp-thumb { flex-shrink: 0; width: 76px; height: 76px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); opacity: .65; transition: opacity .25s, box-shadow .25s, transform .35s var(--pk-ease); } html.theme-prakriti .pk-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-pdp-thumb:hover { opacity: 1; transform: translateY(-2px); } html.theme-prakriti .pk-pdp-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px rgb(var(--pk-accent)), var(--pk-shadow-1); } html.theme-prakriti .pk-pdp-thumb--video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 600; color: rgb(var(--pk-accent)); opacity: 1; background: rgb(var(--pk-accent) / .08); } /* Buy panel */ html.theme-prakriti .pk-pdp-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; } html.theme-prakriti .pk-pdp-info--skel { gap: 16px; } html.theme-prakriti .pk-pdp-info--skel .pk-skel-line { display: block; height: 16px; border-radius: 10px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)), rgb(var(--pk-line)), rgb(var(--pk-bg-2))); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } html.theme-prakriti .pk-pdp-title { font-family: var(--pk-font-display); font-size: clamp(30px, 4vw, 50px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pdp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pdp-rating { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--pk-muted)); transition: color .2s; } html.theme-prakriti .pk-pdp-rating strong { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pdp-rating:hover span:last-child { color: rgb(var(--pk-accent)); text-decoration: underline; text-underline-offset: 3px; } html.theme-prakriti .pk-pdp-lead { font-size: 16px; line-height: 1.7; color: rgb(var(--pk-ink-2)); max-width: 560px; } html.theme-prakriti .pk-pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-block: 4px; } html.theme-prakriti .pk-pdp-price strong { font-family: var(--pk-font-display); font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pdp-price del { font-size: 18px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pdp-save { display: inline-flex; align-items: center; height: 28px; padding-inline: 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(22 140 74); background: rgb(22 163 74 / .1); } /* Variations: re-skin of the shared VariationComponent (nested levels included). */ html.theme-prakriti .pk-pdp-variations { position: relative; padding: 18px 0 4px; border-top: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-variations dl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; } html.theme-prakriti .pk-pdp-variations dt { font-family: var(--pk-font-display); font-size: 14px; font-weight: 600; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pdp-variations dd { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-prakriti .pk-pdp-variations dd button { height: 42px; min-width: 48px; padding-inline: 16px; line-height: 42px; border-radius: 14px; font-size: 14px; font-weight: 500; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, background-color .2s, box-shadow .2s, transform .3s var(--pk-spring); } html.theme-prakriti .pk-pdp-variations dd button:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-ink) / .5); } html.theme-prakriti .pk-pdp-variations dd button:active { transform: scale(.94); } html.theme-prakriti .pk-pdp-variations dd button.bg-primary { color: #fff; background: rgb(var(--pk-ink)); box-shadow: 0 10px 20px -10px rgb(var(--pk-ink) / .7); } html.theme-prakriti .pk-pdp-buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } html.theme-prakriti .pk-stepper { display: inline-flex; align-items: center; height: 52px; padding: 5px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-stepper button { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; color: rgb(var(--pk-ink)); transition: background-color .2s, transform .25s var(--pk-spring); } html.theme-prakriti .pk-stepper button:hover:not(:disabled) { background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-stepper button:active:not(:disabled) { transform: scale(.88); } html.theme-prakriti .pk-stepper button:disabled { opacity: .35; cursor: not-allowed; } html.theme-prakriti .pk-stepper input { width: 44px; height: 100%; border: 0; outline: 0; text-align: center; font-family: var(--pk-font-display); font-size: 17px; font-weight: 600; background: transparent; color: rgb(var(--pk-ink)); -moz-appearance: textfield; } html.theme-prakriti .pk-stepper input::-webkit-inner-spin-button, html.theme-prakriti .pk-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } html.theme-prakriti .pk-stock { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 600; } html.theme-prakriti .pk-stock i { position: relative; width: 8px; height: 8px; border-radius: 999px; background: currentColor; } html.theme-prakriti .pk-stock i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-stock--in { color: rgb(22 140 74); background: rgb(22 163 74 / .1); } html.theme-prakriti .pk-stock--low { color: rgb(194 110 0); background: rgb(245 158 11 / .14); } html.theme-prakriti .pk-stock--out { color: rgb(var(--pk-danger)); background: rgb(var(--pk-danger) / .1); } html.theme-prakriti .pk-stock--out i::after { animation: none; } html.theme-prakriti .pk-pdp-note { margin-top: -8px; font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pdp-note strong { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pdp-cta { display: flex; gap: 10px; } html.theme-prakriti .pk-pdp-add { flex: 1; height: 60px; font-size: 16px; } html.theme-prakriti .pk-pdp-add::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%); transform: translateX(-120%); animation: pk-shine 4.5s ease-in-out 1.5s infinite; } @keyframes pk-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } html.theme-prakriti .pk-pdp-add:disabled { background: rgb(var(--pk-ink) / .35); box-shadow: none; } html.theme-prakriti .pk-pdp-add:disabled::before, html.theme-prakriti .pk-pdp-add:disabled::after { display: none; } html.theme-prakriti .pk-pdp-iconbtn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 999px; color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, box-shadow .2s, transform .35s var(--pk-spring); } html.theme-prakriti .pk-pdp-iconbtn:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-ink)); transform: translateY(-2px); } html.theme-prakriti .pk-pdp-iconbtn.is-on { color: rgb(var(--pk-danger)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-danger) / .5); } html.theme-prakriti .pk-pdp-iconbtn.is-on .pk-icon { fill: currentColor; animation: pk-heart .5s var(--pk-spring); } @media (max-width: 479.98px) { html.theme-prakriti .pk-pdp-iconbtn { width: 52px; height: 52px; } html.theme-prakriti .pk-pdp-add { height: 56px; } } html.theme-prakriti .pk-pdp-delivery { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-delivery-head { display: flex; align-items: center; gap: 12px; } html.theme-prakriti .pk-pdp-delivery-head strong { font-family: var(--pk-font-display); font-size: 15px; } html.theme-prakriti .pk-pdp-delivery-head p { font-size: 13.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pdp-delivery-head b { color: rgb(var(--pk-ink)); font-weight: 600; } html.theme-prakriti .pk-pdp-delivery-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-pin { display: flex; align-items: center; gap: 10px; height: 50px; padding-inline: 16px 6px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .2s; } html.theme-prakriti .pk-pin:focus-within { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)), 0 0 0 4px rgb(var(--pk-accent) / .12); } html.theme-prakriti .pk-pin.is-error { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-danger)); } html.theme-prakriti .pk-pin input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pin-value { flex: 1; font-weight: 600; letter-spacing: .06em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pin button { height: 38px; padding-inline: 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgb(var(--pk-ink)); transition: background-color .2s, opacity .2s; } html.theme-prakriti .pk-pin button:hover:not(:disabled) { background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-pin button:disabled { opacity: .35; cursor: not-allowed; } html.theme-prakriti .pk-pin.is-done button { color: rgb(var(--pk-ink)); background: transparent; text-decoration: underline; text-underline-offset: 3px; } html.theme-prakriti .pk-pin-msg { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pin-msg.is-error { color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-pin-msg.is-ok { color: rgb(22 140 74); font-weight: 600; } html.theme-prakriti .pk-pdp-assure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html.theme-prakriti .pk-pdp-assure li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13px; font-weight: 500; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-assure .pk-icon { flex-shrink: 0; color: rgb(var(--pk-accent)); } /* Prose (overview, shipping) */ html.theme-prakriti .pk-prose { max-width: 780px; font-size: 15.5px; line-height: 1.8; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-prose :is(h1, h2, h3, h4) { font-family: var(--pk-font-display); color: rgb(var(--pk-ink)); letter-spacing: -.02em; margin: 1.2em 0 .5em; } html.theme-prakriti .pk-prose ul { list-style: disc; padding-inline-start: 1.3em; } html.theme-prakriti .pk-prose img { border-radius: 18px; } html.theme-prakriti .pk-pdp-videos { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 1000px; } @media (min-width: 768px) { html.theme-prakriti .pk-pdp-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html.theme-prakriti .pk-pdp-videos iframe, html.theme-prakriti .pk-pdp-video-link { width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-pdp-video-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: rgb(var(--pk-muted)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-reviews { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 900px) { html.theme-prakriti .pk-reviews { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; } } html.theme-prakriti .pk-reviews-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px; border-radius: 28px; background: linear-gradient(140deg, rgb(var(--pk-accent) / .1), transparent 70%), rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } @media (min-width: 900px) { html.theme-prakriti .pk-reviews-summary { position: sticky; top: calc(var(--header-h, 76px) + 20px); } } html.theme-prakriti .pk-reviews-summary strong { font-family: var(--pk-font-display); font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.05em; } html.theme-prakriti .pk-reviews-summary p { font-size: 14px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-reviews-list { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } html.theme-prakriti .pk-reviews-empty { padding: 24px; width: 100%; border-radius: 22px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-review { width: 100%; padding: 22px; border-radius: 22px; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); animation: pk-intro .6s var(--pk-ease) both; animation-delay: calc(var(--pk-i, 0) * 60ms); } html.theme-prakriti .pk-review header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } html.theme-prakriti .pk-review-avatar { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-review h4 { font-weight: 600; text-transform: capitalize; margin-bottom: 2px; } html.theme-prakriti .pk-review p { font-size: 15px; line-height: 1.7; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-review-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } html.theme-prakriti .pk-review-imgs img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; } html.theme-prakriti .pk-section--rail { padding-block: clamp(36px, 5vw, 64px); } /* Buy dock */ html.theme-prakriti .pk-dock { position: fixed; z-index: 22; left: 50%; bottom: calc(var(--pk-tabbar-h) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(620px, calc(100% - 24px)); padding: 8px 8px 8px 10px; border-radius: 22px; background: rgb(var(--pk-surface) / .9); box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } html.theme-prakriti .pk-dock-img { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-dock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } html.theme-prakriti .pk-dock-text strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; } html.theme-prakriti .pk-dock-text span { font-family: var(--pk-font-display); font-weight: 600; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-dock .pk-btn { flex-shrink: 0; } html.theme-prakriti .pk-dock .pk-btn:disabled { background: rgb(var(--pk-ink) / .35); box-shadow: none; } .pk-dock-enter-active, .pk-dock-leave-active { transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .pk-dock-enter-from, .pk-dock-leave-to { transform: translate(-50%, 140%) !important; opacity: 0; } @media (max-width: 479.98px) { html.theme-prakriti .pk-dock-img { display: none; } html.theme-prakriti .pk-dock { padding-inline-start: 16px; } } /* Fly-to-cart ghost (appended to body) */ .pk-fly { position: fixed; z-index: 70; object-fit: cover; pointer-events: none; background: #fff; box-shadow: 0 20px 40px -10px rgba(11, 13, 19, .4); } html.theme-prakriti .pk-bump { animation: pk-bump .5s var(--pk-spring); } @keyframes pk-bump { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } } /* Prakriti re-tunes for the listing and product page above. */ html.theme-prakriti .pk-shop-title, html.theme-prakriti .pk-pdp-title { font-weight: 500; letter-spacing: -.03em; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-shop-hero-art { position: relative; width: clamp(220px, 22vw, 290px); aspect-ratio: 1; } html.theme-prakriti .pk-shop-mandala { position: absolute; inset: -14%; color: rgb(var(--pk-accent) / .22); } html.pk-motion.theme-prakriti .pk-shop-mandala .pk-mandala { animation: pk-turn 120s linear infinite; } html.theme-prakriti .pk-shop-arch { position: absolute; inset: 8% 18% 0; display: flex; align-items: center; justify-content: center; padding: 12%; border-radius: var(--pk-arch); background: linear-gradient(180deg, var(--pk-tone-2), var(--pk-tone-1)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(255 255 255 / .7); color: var(--pk-leaf-1); } html.theme-prakriti .pk-shop-glider, html.theme-prakriti .pk-pill.is-on, html.theme-prakriti .pk-shop-density button.is-active, html.theme-prakriti .pk-pager-num.is-active { background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-shop-toolbar { background: rgb(var(--pk-bg) / .92); } html.theme-prakriti .pk-shop-empty-art { color: var(--pk-leaf-2); background: var(--pk-tone-1); } html.theme-prakriti .pk-shop-empty-art .pk-leaf-svg { position: absolute; width: 70%; height: 70%; opacity: .45; rotate: -24deg; } html.theme-prakriti .pk-shop-empty-art .pk-icon { position: relative; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-shop-empty h3, html.theme-prakriti .pk-filters-head h2 { font-weight: 500; } /* Gallery: the product sits in an arch, a mandala turning behind it. */ html.theme-prakriti .pk-pdp-stage { border-radius: 50% 50% 36px 36px / 34% 34% 36px 36px; background: radial-gradient(70% 60% at 50% 45%, rgb(255 255 255 / .9), transparent 72%), linear-gradient(180deg, var(--pk-tone-1), var(--pk-tone-2)); } html.theme-prakriti .pk-pdp-arch { position: absolute; inset: 14px; z-index: 1; border-radius: inherit; border: 1px solid rgb(255 255 255 / .8); pointer-events: none; } html.theme-prakriti .pk-pdp-mandala { position: absolute; inset: 4%; z-index: 0; color: rgb(var(--pk-accent) / .14); pointer-events: none; } html.pk-motion.theme-prakriti .pk-pdp-mandala .pk-mandala { animation: pk-turn 160s linear infinite; } html.theme-prakriti .pk-pdp-img { position: relative; z-index: 1; padding: 12%; filter: drop-shadow(0 26px 24px rgb(var(--pk-forest) / .2)); } html.theme-prakriti .pk-pdp-img-ph { position: relative; z-index: 1; width: 50%; color: var(--pk-leaf-1); opacity: .5; } html.theme-prakriti .pk-pdp-seal { top: 18%; inset-inline-end: 8%; width: 64px; height: 64px; font-size: 16px; } html.theme-prakriti .pk-pdp-counter { top: auto; bottom: 22px; } html.theme-prakriti .pk-pdp-thumb.is-active { box-shadow: 0 0 0 2px rgb(var(--pk-sun)), var(--pk-shadow-1); } html.theme-prakriti .pk-loupe { box-shadow: 0 0 0 4px rgb(var(--pk-forest)), 0 0 0 5px rgb(var(--pk-sun) / .8), 0 24px 50px -12px rgb(var(--pk-ink) / .5); } /* Buy panel */ html.theme-prakriti .pk-pdp-sanskrit { margin-top: -10px; font-family: var(--pk-font-display); font-style: italic; font-size: 18px; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-dosha-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-dosha-chip--vata { color: rgb(var(--pk-vata)); background: rgb(var(--pk-vata) / .12); } html.theme-prakriti .pk-dosha-chip--pitta { color: rgb(var(--pk-pitta)); background: rgb(var(--pk-pitta) / .12); } html.theme-prakriti .pk-dosha-chip--kapha { color: rgb(var(--pk-kapha)); background: rgb(var(--pk-kapha) / .12); } html.theme-prakriti .pk-pdp-quick { display: flex; flex-direction: column; gap: 6px; } html.theme-prakriti .pk-pdp-quick li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-pdp-quick .pk-icon { flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; padding: 3px; border-radius: 999px; color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-pdp-price strong { color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-pdp-taxnote { margin-top: -16px; font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pdp-variations dd button.bg-primary { background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-certs { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-prakriti .pk-cert { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .14); box-shadow: inset 0 0 0 1px rgb(var(--pk-sun) / .3); } html.theme-prakriti .pk-cert .pk-icon { color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-pdp-delivery-icon { border-radius: var(--pk-arch); } html.theme-prakriti .pk-pin button { background: rgb(var(--pk-forest)); } /* Ayurveda sections */ html.theme-prakriti .pk-ingredients { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { html.theme-prakriti .pk-ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { html.theme-prakriti .pk-ingredients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } html.theme-prakriti .pk-ingredient { --pk-rx: 0deg; --pk-ry: 0deg; display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 26px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transform: perspective(900px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .6s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-ingredient:hover { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ingredient.is-tilting { transition: transform .12s linear, box-shadow .4s; } html.theme-prakriti .pk-ingredient-art { flex-shrink: 0; position: relative; width: 74px; height: 88px; border-radius: var(--pk-arch); background: var(--pk-tone); overflow: hidden; } html.theme-prakriti .pk-ingredient-art .pk-leaf-svg { position: absolute; left: 18%; top: 12%; width: 64%; height: 76%; color: var(--pk-leaf-1); rotate: -18deg; transition: rotate .8s var(--pk-spring); } html.theme-prakriti .pk-ingredient:hover .pk-ingredient-art .pk-leaf-svg { rotate: 0deg; } html.theme-prakriti .pk-ingredient-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } html.theme-prakriti .pk-ingredient-text h3 { font-family: var(--pk-font-display); font-size: 19px; font-weight: 500; text-transform: capitalize; } html.theme-prakriti .pk-ingredient-text em { font-family: var(--pk-font-display); font-size: 14px; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-ingredient-part { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ingredient-text p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-pdp-ritual-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { html.theme-prakriti .pk-pdp-ritual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } html.theme-prakriti .pk-benefits-card, html.theme-prakriti .pk-howto-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: 32px; } html.theme-prakriti .pk-benefits-card { color: rgb(var(--pk-cream-ink) / .85); background: radial-gradient(80% 80% at 100% 0%, rgb(var(--pk-forest-2)), transparent 70%), rgb(var(--pk-forest)); } html.theme-prakriti .pk-benefits-card .pk-h3 { color: #fff; } html.theme-prakriti .pk-benefits-card .pk-eyebrow { color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-benefits-leaf { position: absolute; z-index: -1; right: -50px; bottom: -60px; width: 260px; height: 260px; color: rgb(255 255 255 / .06); rotate: -30deg; } html.theme-prakriti .pk-benefit-list { display: grid; gap: 12px; margin-top: 6px; } html.theme-prakriti .pk-benefit-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; } html.theme-prakriti .pk-benefit-tick { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-howto-card { background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-howto-steps { display: flex; flex-direction: column; margin-top: 6px; } html.theme-prakriti .pk-howto-steps li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; } html.theme-prakriti .pk-howto-steps li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 2px; width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, rgb(var(--pk-line)) 0 6px, transparent 6px 10px); } html[dir="rtl"].theme-prakriti .pk-howto-steps li:not(:last-child)::before { left: auto; right: 18px; } html.theme-prakriti .pk-howto-num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; font-family: var(--pk-font-display); font-weight: 600; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-howto-steps p { padding-top: 7px; font-size: 15px; line-height: 1.6; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-howto-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } html.theme-prakriti .pk-howto-fact { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-howto-fact > span { display: flex; flex-direction: column; } html.theme-prakriti .pk-howto-fact small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-howto-fact .pk-icon { flex-shrink: 0; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-doshafit { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: 32px; background: linear-gradient(120deg, var(--pk-tone-2), var(--pk-tone-1)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } @media (min-width: 900px) { html.theme-prakriti .pk-doshafit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 36px; } } html.theme-prakriti .pk-doshafit-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } html.theme-prakriti .pk-doshafit-list { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } html.theme-prakriti .pk-doshafit-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 16px; border-radius: 24px; text-align: center; background: rgb(var(--pk-surface) / .6); opacity: .55; transition: opacity .4s, transform .5s var(--pk-ease); } html.theme-prakriti .pk-doshafit-item.is-on { opacity: 1; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2); transform: translateY(-4px); } html.theme-prakriti .pk-doshafit-item strong { font-family: var(--pk-font-display); font-size: 18px; font-weight: 500; } html.theme-prakriti .pk-doshafit-item small { font-size: 11.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-doshafit-mark { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-doshafit-item.is-on .pk-doshafit-mark { color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-caution { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 24px; background: rgb(var(--pk-sun) / .1); box-shadow: inset 0 0 0 1px rgb(var(--pk-sun) / .3); } html.theme-prakriti .pk-caution-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgb(var(--pk-sun-ink)); background: rgb(var(--pk-sun) / .18); } html.theme-prakriti .pk-caution h3 { font-family: var(--pk-font-display); font-size: 19px; font-weight: 500; margin-bottom: 4px; } html.theme-prakriti .pk-caution p { font-size: 14.5px; line-height: 1.6; color: rgb(var(--pk-ink-2)); white-space: pre-line; } html.theme-prakriti .pk-caution .pk-caution-legal { margin-top: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); white-space: normal; } /* Reviews + dock */ html.theme-prakriti .pk-reviews-summary { background: linear-gradient(140deg, rgb(var(--pk-sun) / .14), transparent 70%), rgb(var(--pk-bg)); } html.theme-prakriti .pk-reviews-summary strong { font-weight: 500; } html.theme-prakriti .pk-review-avatar { background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-dock-text span { color: rgb(var(--pk-forest)); } /* Cart drawer building blocks (Optica's checkout primitives: meter, qty, rows, total). */ html.theme-prakriti .pk-co-qty { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-co-qty button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(var(--pk-ink)); transition: background-color .2s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-co-qty button:hover:not(:disabled) { background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-co-qty button:active:not(:disabled) { transform: scale(.88); } html.theme-prakriti .pk-co-qty button:disabled { opacity: .35; cursor: not-allowed; } html.theme-prakriti .pk-co-qty input { width: 36px; text-align: center; font-size: 14px; font-weight: 600; background: transparent; -moz-appearance: textfield; } html.theme-prakriti .pk-co-qty input::-webkit-inner-spin-button, html.theme-prakriti .pk-co-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } html.theme-prakriti .pk-co-meter { margin-bottom: 16px; padding: 12px 14px 16px; border-radius: 16px; background: rgb(var(--pk-bg)); transition: background-color .5s; } html.theme-prakriti .pk-co-meter.is-done { background: rgb(22 163 74 / .08); } html.theme-prakriti .pk-co-meter-text { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-co-meter.is-done .pk-co-meter-text { color: rgb(21 128 61); font-weight: 600; } html.theme-prakriti .pk-co-meter-track { position: relative; height: 6px; margin-top: 12px; border-radius: 999px; background: rgb(var(--pk-line)); } html.theme-prakriti .pk-co-meter-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--pk-accent)), rgb(56 189 248)); transform-origin: left; transition: transform .9s var(--pk-ease); } html.theme-prakriti .pk-co-meter.is-done .pk-co-meter-fill { background: rgb(22 163 74); } html.theme-prakriti .pk-co-meter-truck { position: absolute; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-inline-start: -13px; border-radius: 999px; color: #fff; background: rgb(var(--pk-ink)); transform: translateY(-50%); box-shadow: 0 0 0 3px rgb(var(--pk-surface)); transition: inset-inline-start .9s var(--pk-ease), background-color .4s; } html.theme-prakriti .pk-co-meter.is-done .pk-co-meter-truck { background: rgb(22 163 74); } html.theme-prakriti .pk-co-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } html.theme-prakriti .pk-co-sum-head h3 { font-family: var(--pk-font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; text-transform: capitalize; } html.theme-prakriti .pk-co-rows { display: flex; flex-direction: column; gap: 10px; } html.theme-prakriti .pk-co-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; } html.theme-prakriti .pk-co-row dt { text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-co-row dd { font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); overflow: hidden; } html.theme-prakriti .pk-co-row dd > span { display: inline-block; } html.theme-prakriti .pk-co-row.is-good dd, html.theme-prakriti .pk-co-free { color: rgb(22 163 74); text-transform: capitalize; } html.theme-prakriti .pk-co-row .is-muted { color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-co-total span { font-size: 14px; font-weight: 600; text-transform: capitalize; } html.theme-prakriti .pk-co-total strong { font-family: var(--pk-font-display); font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-co-spinner { flex-shrink: 0; width: 18px; height: 18px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: pk-spin-plain .7s linear infinite; } /* 24. Cart drawer (layouts/…/prakriti/FrontendCartComponent) ------------------- Optica's drawer, re-themed: same #cart-canvas / .canvas-active contract as the default, so the navbar, tab bar and product page open it by id. */ html.theme-prakriti .pk-cart-up-add { position: absolute; bottom: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: #fff; background: rgb(var(--pk-ink)); box-shadow: 0 10px 20px -10px rgb(var(--pk-ink) / .7); transition: background-color .25s, transform .4s var(--pk-spring); } html.theme-prakriti .pk-cart-up-add:hover:not(:disabled) { background: rgb(var(--pk-accent)); transform: rotate(90deg) scale(1.08); } html.theme-prakriti .pk-cart-up-add:disabled { opacity: .7; } html.theme-prakriti .pk-cart-up-add.is-sm { position: static; width: 32px; height: 32px; } html.theme-prakriti .pk-cart-area { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 12px; padding-inline: 14px 12px; border-radius: 14px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-cart-area:focus-within { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-cart-area select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; appearance: none; -webkit-appearance: none; background: transparent; font-size: 14px; color: rgb(var(--pk-ink)); cursor: pointer; } html.theme-prakriti .pk-cart-area .pk-icon:last-child { pointer-events: none; } html.theme-prakriti .pk-cart-coupon { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 6px 10px 10px; border-radius: 16px; background: rgb(22 163 74 / .08); box-shadow: inset 0 0 0 1px rgb(22 163 74 / .3); } html.theme-prakriti .pk-cart-coupon-icon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: rgb(22 163 74); } html.theme-prakriti .pk-cart-coupon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } html.theme-prakriti .pk-cart-coupon-text strong { font-size: 13.5px; color: rgb(21 128 61); text-transform: capitalize; } html.theme-prakriti .pk-cart-coupon-text small { font-size: 12px; color: rgb(var(--pk-ink-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-cart-note { margin-top: 8px; font-size: 12px; color: rgb(var(--pk-muted)); } /* Empty */ html.theme-prakriti .pk-cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(36px, 7vw, 72px) 20px; border-radius: 36px; background: radial-gradient(60% 60% at 50% 0%, rgb(var(--pk-accent) / .08), transparent 70%), rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-cart-empty > p { max-width: 420px; color: rgb(var(--pk-muted)); font-size: 15px; line-height: 1.6; } html.theme-prakriti .pk-cart-empty-art { position: relative; width: 220px; height: 220px; margin-bottom: 4px; } html.theme-prakriti .pk-cart-orb { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 999px; color: #fff; background: rgb(var(--pk-ink)); box-shadow: 0 18px 40px -12px rgb(var(--pk-ink) / .6), 0 0 0 6px rgb(var(--pk-surface)); animation: pk-cart-bob 3.2s ease-in-out infinite; } html.theme-prakriti .pk-cart-orb.is-small { position: relative; left: auto; top: auto; width: 76px; height: 76px; margin: 0 0 6px; } @keyframes pk-cart-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -8px; rotate: -6deg; } 60% { translate: 0 -3px; rotate: 4deg; } } /* Drawer — staged entrance: backdrop blurs in, panel springs across, then the head / meter / lines / footer arrive in sequence (--pk-s). Everything renders visible; the hidden "before" frames only exist under html.pk-motion. */ html.theme-prakriti .pk-cd { position: fixed; inset: 0; z-index: 40; visibility: hidden; opacity: 0; background: rgb(var(--pk-forest) / .42); -webkit-backdrop-filter: blur(0px) saturate(1); backdrop-filter: blur(0px) saturate(1); transition: opacity .45s ease, visibility .45s, backdrop-filter .6s var(--pk-ease), -webkit-backdrop-filter .6s var(--pk-ease); } html.theme-prakriti .pk-cd.canvas-active { visibility: visible; opacity: 1; -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); } html.theme-prakriti .pk-cd-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: min(460px, 100%); height: 100dvh; margin-inline-start: auto; background: rgb(var(--pk-bg)); box-shadow: var(--pk-shadow-3), -1px 0 0 rgb(var(--pk-line)); transform: translateX(100%); transition: transform .7s cubic-bezier(.16, 1, .3, 1); } html[dir="rtl"].theme-prakriti .pk-cd-panel { transform: translateX(-100%); } @media (min-width: 640px) { html.theme-prakriti .pk-cd-panel { height: calc(100dvh - 24px); margin: 12px; margin-inline-start: auto; border-radius: 28px; } html.theme-prakriti .pk-cd-panel { transform: translateX(calc(100% + 24px)); } html[dir="rtl"].theme-prakriti .pk-cd-panel { transform: translateX(calc(-100% - 24px)); } } html.theme-prakriti .pk-cd.canvas-active .pk-cd-panel, html[dir="rtl"].theme-prakriti .pk-cd.canvas-active .pk-cd-panel { transform: none; } /* Ambient decor: a slow turmeric/sage glow and a neem sprig that sways. */ html.theme-prakriti .pk-cd-glow { position: absolute; z-index: -1; inset: -30% -40% auto auto; width: 120%; aspect-ratio: 1; border-radius: 999px; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--pk-sun) / .16), rgb(var(--pk-accent) / .08) 55%, transparent 72%); } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-glow { animation: pk-cd-glow 14s ease-in-out infinite alternate; } @keyframes pk-cd-glow { to { translate: -18% 22%; scale: 1.15; } } html.theme-prakriti .pk-cd-sprig { position: absolute; z-index: -1; top: -18px; inset-inline-end: 56px; width: 78px; height: 78px; color: var(--pk-leaf-2); opacity: .22; rotate: 160deg; pointer-events: none; transform-origin: 50% 0; } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-sprig { animation: pk-cd-sway 6s ease-in-out infinite; } @keyframes pk-cd-sway { 50% { rotate: 172deg; } } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-stage { animation: pk-cd-stage .8s var(--pk-ease) backwards; animation-delay: calc(var(--pk-s, 0) * 80ms + 140ms); } @keyframes pk-cd-stage { from { opacity: 0; translate: 0 18px; filter: blur(6px); } } html.theme-prakriti .pk-cd-head { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; transition: box-shadow .3s; } html.theme-prakriti .pk-cd-head.is-scrolled { box-shadow: 0 12px 20px -18px rgb(var(--pk-ink) / .45); } html.theme-prakriti .pk-cd-title { display: flex; align-items: center; gap: 10px; min-width: 0; } html.theme-prakriti .pk-cd-head h3 { font-family: var(--pk-font-display); font-size: 24px; font-weight: 500; letter-spacing: -.03em; text-transform: capitalize; } html.theme-prakriti .pk-cd-count { display: inline-flex; align-items: center; height: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--pk-forest)); background: var(--pk-tone-1); white-space: nowrap; } html.theme-prakriti .pk-cd-close { transition: transform .5s var(--pk-spring), background-color .2s; } html.theme-prakriti .pk-cd-close:hover { transform: rotate(90deg); } html.theme-prakriti .pk-cd-meter { position: relative; flex-shrink: 0; margin: 0 20px 12px; background: rgb(var(--pk-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-cd-meter .pk-co-meter-text { min-height: 20px; } html.theme-prakriti .pk-cd-meter-msg { display: inline-flex; align-items: center; gap: 6px; } html.theme-prakriti .pk-co-meter-fill { overflow: hidden; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); } html.theme-prakriti .pk-co-meter-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); background-size: 220% 100%; } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-co-meter-fill::after { animation: pk-cd-shimmer 2.4s linear infinite; } @keyframes pk-cd-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-meter:not(.is-done) .pk-co-meter-truck .pk-icon { animation: pk-cd-truck .7s ease-in-out infinite; } @keyframes pk-cd-truck { 50% { translate: 0 -1.5px; } } html.theme-prakriti .pk-cd-meter.is-celebrating .pk-co-meter-truck { animation: pk-cd-pop .6s var(--pk-spring); } @keyframes pk-cd-pop { 40% { scale: 1.45; } } html.theme-prakriti .pk-cd-burst { position: absolute; inset-inline-end: 22px; bottom: 14px; width: 0; height: 0; pointer-events: none; } html.theme-prakriti .pk-cd-burst .pk-leaf-svg { position: absolute; width: 16px; height: 16px; margin: -8px; color: var(--pk-leaf-1); opacity: 0; animation: pk-cd-burst 1.3s var(--pk-ease) forwards; animation-delay: calc(var(--pk-n) * 18ms); } html.theme-prakriti .pk-cd-burst .pk-leaf-svg:nth-child(3n) { color: var(--pk-leaf-5); } html.theme-prakriti .pk-cd-burst .pk-leaf-svg:nth-child(3n + 1) { color: var(--pk-leaf-3); } @keyframes pk-cd-burst { 0% { opacity: 1; transform: rotate(calc(var(--pk-n) * 36deg)) translateY(0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--pk-n) * 36deg + 90deg)) translateY(-64px) scale(1); } } html.theme-prakriti .pk-cd-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; scrollbar-width: thin; } html.theme-prakriti .pk-cd-lines { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } html.theme-prakriti .pk-cd-line { position: relative; border-radius: 20px; touch-action: pan-y; } html.theme-prakriti .pk-cd-line-inner { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 10px; border-radius: inherit; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); translate: var(--pk-swipe, 0) 0; transition: translate .45s var(--pk-ease), box-shadow .35s var(--pk-ease); } html.theme-prakriti .pk-cd-line.is-swiping .pk-cd-line-inner { transition: none; } @media (hover: hover) { html.theme-prakriti .pk-cd-line:hover .pk-cd-line-inner { box-shadow: inset 0 0 0 1px rgb(var(--pk-accent) / .35), var(--pk-shadow-2); } html.theme-prakriti .pk-cd-line:hover .pk-cd-media img { scale: 1.07; } } html.theme-prakriti .pk-cd-swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: 22px; border-radius: inherit; color: #fff; background: rgb(var(--pk-danger) / .78); opacity: 0; transition: opacity .2s, background-color .2s; } html.theme-prakriti .pk-cd-line.is-swiping .pk-cd-swipe-bg { opacity: 1; } html.theme-prakriti .pk-cd-line.is-armed .pk-cd-swipe-bg { background: rgb(var(--pk-danger)); } html.theme-prakriti .pk-cd-line.is-armed .pk-cd-swipe-bg .pk-icon { animation: pk-cd-pop .4s var(--pk-spring); } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-line { animation: pk-cd-in .7s var(--pk-ease) backwards; animation-delay: calc(min(var(--pk-i, 0), 8) * 70ms + 260ms); } @keyframes pk-cd-in { from { opacity: 0; translate: 36px 0; filter: blur(6px); } } /* Lines: a new one drops in with a sage flash; a removed one slides out and the rest close up. */ .pk-cd-line-enter-active { transition: opacity .45s ease, translate .6s cubic-bezier(.34, 1.56, .64, 1), scale .6s cubic-bezier(.34, 1.56, .64, 1); } .pk-cd-line-enter-active .pk-cd-line-inner { animation: pk-cd-flash 1.4s ease-out; } .pk-cd-line-enter-from { opacity: 0; translate: 0 -14px; scale: .94; } @keyframes pk-cd-flash { 0%, 30% { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)), 0 0 0 6px rgb(var(--pk-accent) / .14); } } .pk-cd-line-leave-active { position: absolute; margin: 0; transition: opacity .35s ease, translate .45s cubic-bezier(.22, 1, .36, 1), scale .45s ease; } .pk-cd-line-leave-to { opacity: 0; translate: 48px 0; scale: .96; } .pk-cd-line-move { transition: transform .55s cubic-bezier(.22, 1, .36, 1); } html.theme-prakriti .pk-cd-media { display: block; border-radius: 14px; overflow: hidden; background: rgb(var(--pk-bg-2)); align-self: start; } html.theme-prakriti .pk-cd-media img { width: 100%; transition: scale .8s var(--pk-ease); } html.theme-prakriti .pk-cd-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } html.theme-prakriti .pk-cd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } html.theme-prakriti .pk-cd-top h4 { font-size: 14.5px; font-weight: 600; line-height: 1.3; text-transform: capitalize; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.theme-prakriti .pk-cd-remove { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; margin: -5px -5px 0 0; border-radius: 999px; color: rgb(var(--pk-muted)); transition: color .2s, background-color .2s, transform .4s var(--pk-spring); } html.theme-prakriti .pk-cd-remove:hover { color: rgb(var(--pk-danger)); background: rgb(var(--pk-danger) / .08); transform: rotate(-12deg) scale(1.08); } html.theme-prakriti .pk-cd-variant { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; letter-spacing: .02em; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); text-transform: capitalize; } html.theme-prakriti .pk-cd-lens { margin: 0; font-size: 12px; } html.theme-prakriti .pk-cd-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; } html.theme-prakriti .pk-cd-foot .pk-co-qty { background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-cd-foot .pk-co-qty button { width: 30px; height: 30px; } html.theme-prakriti .pk-cd-foot .pk-co-qty button:hover:not(:disabled) { color: #fff; background: rgb(var(--pk-ink)); } html.theme-prakriti .pk-cd-foot .pk-co-qty input { width: 28px; font-size: 13.5px; } html.theme-prakriti .pk-cd-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-cd-price strong { display: inline-block; font-family: var(--pk-font-display); font-size: 16.5px; font-weight: 600; } html.theme-prakriti .pk-cd-price del { font-size: 11.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-cd-price small { font-size: 11px; color: rgb(var(--pk-muted)); } .pk-cd-tick-enter-active, .pk-cd-tick-leave-active { transition: opacity .18s ease, transform .28s cubic-bezier(.22, 1, .36, 1); } .pk-cd-tick-enter-from { opacity: 0; transform: translateY(8px); } .pk-cd-tick-leave-to { opacity: 0; transform: translateY(-8px); } html.theme-prakriti .pk-cd-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: rgb(var(--pk-muted)); } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-hint .pk-icon { animation: pk-cd-nudge 1.8s ease-in-out 3; } @keyframes pk-cd-nudge { 50% { translate: -4px 0; } } html.theme-prakriti .pk-cd-upsell { margin-top: 24px; } html.theme-prakriti .pk-cd-upsell-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; margin: 12px -20px 0; padding: 4px 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; } html.theme-prakriti .pk-cd-upsell-rail::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-cd-up { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; scroll-snap-align: start; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: translate .45s var(--pk-ease), box-shadow .35s; } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-up { animation: pk-cd-up-in .7s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 80ms + 480ms); } @keyframes pk-cd-up-in { from { opacity: 0; translate: 0 22px; scale: .94; } } @media (hover: hover) { html.theme-prakriti .pk-cd-up:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgb(var(--pk-accent) / .3), var(--pk-shadow-2); } html.theme-prakriti .pk-cd-up:hover .pk-cd-up-media img { scale: 1.08; } } .pk-cd-up-leave-active { position: absolute; transition: opacity .3s ease, scale .4s ease; } .pk-cd-up-leave-to { opacity: 0; scale: .8; } .pk-cd-up-move { transition: transform .5s cubic-bezier(.22, 1, .36, 1); } html.theme-prakriti .pk-cd-up-media { display: block; border-radius: 12px; overflow: hidden; background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-cd-up-media img { width: 100%; transition: scale .8s var(--pk-ease); } html.theme-prakriti .pk-cd-up-name { font-size: 12.5px; font-weight: 500; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-prakriti .pk-cd-up-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; font-variant-numeric: tabular-nums; } /* Undo toast: floats above the footer, with a draining timer. */ html.theme-prakriti .pk-cd-toast { position: absolute; z-index: 3; inset-inline: 16px; bottom: var(--pk-cd-toast-y, 20px); display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px 16px; overflow: hidden; border-radius: 18px; color: rgb(var(--pk-cream-ink)); background: rgb(var(--pk-forest)); box-shadow: var(--pk-shadow-3); } html.theme-prakriti .pk-cd-toast-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; } html.theme-prakriti .pk-cd-toast-copy strong { font-size: 13.5px; color: #fff; } html.theme-prakriti .pk-cd-toast-copy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; text-transform: capitalize; } html.theme-prakriti .pk-cd-toast-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-forest)); background: rgb(var(--pk-cream-ink)); transition: transform .35s var(--pk-spring), background-color .2s; } html.theme-prakriti .pk-cd-toast-btn:hover:not(:disabled) { background: #fff; transform: scale(1.05); } html.theme-prakriti .pk-cd-toast-btn:disabled { opacity: .6; } html.theme-prakriti .pk-cd-toast-timer { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgb(var(--pk-sun)); transform-origin: left; animation: pk-cd-drain linear forwards; } html[dir="rtl"].theme-prakriti .pk-cd-toast-timer { transform-origin: right; } html.theme-prakriti .pk-cd-toast-timer.is-paused { animation-play-state: paused; } @keyframes pk-cd-drain { to { transform: scaleX(0); } } .pk-cd-toast-enter-active, .pk-cd-toast-leave-active { transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); } .pk-cd-toast-enter-from, .pk-cd-toast-leave-to { opacity: 0; transform: translateY(20px) scale(.96); } html.theme-prakriti .pk-cd-footer { position: relative; z-index: 2; flex-shrink: 0; padding: 16px 20px calc(14px + env(safe-area-inset-bottom)); background: rgb(var(--pk-surface) / .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgb(var(--pk-line)); box-shadow: 0 -20px 40px -30px rgb(var(--pk-ink) / .3); } html.theme-prakriti .pk-cd-footer .pk-cart-coupon { margin: 0 0 12px; } html.theme-prakriti .pk-cd-savings { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: rgb(21 128 61); background: rgb(22 163 74 / .08); } html.theme-prakriti .pk-cd-footer .pk-co-total { margin-top: 12px; padding-top: 12px; } html.theme-prakriti .pk-cd-footer .pk-co-total strong { font-size: 26px; } html.theme-prakriti .pk-cd-ctas { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; margin-top: 14px; } html.theme-prakriti .pk-cd-ctas .pk-btn { width: 100%; } /* Checkout: a slow sheen passes every few seconds so the next step is never in doubt. */ html.theme-prakriti .pk-cd-checkout::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%); translate: -110% 0; } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-checkout::after { animation: pk-cd-sheen 4.5s var(--pk-ease) 1.2s infinite; } @keyframes pk-cd-sheen { 0% { translate: -110% 0; } 35%, 100% { translate: 110% 0; } } html.theme-prakriti .pk-cd-secure { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; font-size: 11.5px; color: rgb(var(--pk-muted)); text-transform: capitalize; } /* Short screens: keep the list visible — drop the fine print, tighten the totals. */ @media (max-height: 760px) { html.theme-prakriti .pk-cd-footer { padding-top: 12px; } html.theme-prakriti .pk-cd-footer .pk-co-rows { gap: 6px; } html.theme-prakriti .pk-cd-footer .pk-co-total { margin-top: 8px; padding-top: 8px; } html.theme-prakriti .pk-cd-footer .pk-co-total strong { font-size: 22px; } html.theme-prakriti .pk-cd-footer .pk-cart-note, html.theme-prakriti .pk-cd-secure { display: none; } html.theme-prakriti .pk-cd-ctas { margin-top: 10px; } } /* Empty: leaves drift around a breathing arch. */ html.theme-prakriti .pk-cd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-cd-empty-art { position: relative; display: grid; place-items: center; width: 220px; height: 200px; } html.theme-prakriti .pk-cd-empty .pk-cart-orb { position: relative; left: auto; top: auto; margin: 0; translate: none; display: grid; place-items: center; width: 120px; height: 140px; border-radius: var(--pk-arch); color: rgb(var(--pk-forest)); background: var(--pk-tone-1); box-shadow: 0 0 0 8px rgb(var(--pk-surface)), 0 24px 50px -20px rgb(var(--pk-forest) / .5); } html.theme-prakriti .pk-cd-empty .pk-cart-orb .pk-leaf-svg { position: absolute; inset: 14% 18%; width: 64%; height: 72%; color: var(--pk-leaf-2); opacity: .5; rotate: -20deg; } html.theme-prakriti .pk-cd-empty .pk-cart-orb .pk-icon { position: relative; } html.theme-prakriti .pk-cd-drift { position: absolute; width: 26px; height: 26px; color: var(--pk-leaf-2); opacity: .55; } html.theme-prakriti .pk-cd-drift:nth-child(1) { top: 8%; left: 6%; } html.theme-prakriti .pk-cd-drift:nth-child(2) { top: 2%; right: 12%; width: 20px; color: var(--pk-leaf-5); } html.theme-prakriti .pk-cd-drift:nth-child(3) { bottom: 12%; left: 0; width: 18px; color: var(--pk-leaf-3); } html.theme-prakriti .pk-cd-drift:nth-child(4) { bottom: 4%; right: 4%; width: 30px; } html.theme-prakriti .pk-cd-drift:nth-child(5) { top: 46%; right: -2%; width: 16px; color: var(--pk-leaf-1); } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-drift { animation: pk-cd-drift calc(5s + var(--pk-n) * .7s) ease-in-out infinite alternate; animation-delay: calc(var(--pk-n) * -.9s); } @keyframes pk-cd-drift { from { translate: 0 0; rotate: -12deg; } to { translate: 6px -14px; rotate: 18deg; } } html.pk-motion.theme-prakriti .pk-cd.canvas-active .pk-cd-empty .pk-cart-orb { animation: pk-cd-breathe 4s ease-in-out infinite; } @keyframes pk-cd-breathe { 50% { scale: 1.04; translate: 0 -4px; } } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-cart-orb { animation: none; } html.theme-prakriti .pk-cd-burst { display: none; } } /* 25. Reduced motion: no loops, no drift — everything visible and still. ---- */ @media (prefers-reduced-motion: reduce) { html.theme-prakriti *, html.theme-prakriti *::before, html.theme-prakriti *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html.theme-prakriti .pk-ribbon-track, html.theme-prakriti .pk-wall-track { animation: none; } html.theme-prakriti .pk-wall-track { flex-wrap: wrap; width: auto; justify-content: center; padding-inline: 16px; } html.theme-prakriti .pk-wall-track > [aria-hidden="true"] { display: none; } html.theme-prakriti .pk-ribbon-list[aria-hidden="true"] { display: none; } html.theme-prakriti .pk-ribbon-track { width: auto; justify-content: center; overflow-x: auto; } } /* 24. Shop landing hero + listing motion (prakriti/product/ProductComponent) -- Pointer position arrives as --pk-mx / --pk-my (-0.5…0.5) on .pk-shop-hero. Everything that loops is gated on html.pk-motion. */ html.theme-prakriti .pk-shop-hero { --pk-mx: 0; --pk-my: 0; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 900px) { html.theme-prakriti .pk-shop-hero { min-height: clamp(500px, 64vh, 640px); padding-bottom: 88px; } html.theme-prakriti .pk-shop-hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 80px); } } /* Aurora: three soft colour fields that slowly turn; a dot grid that leans against the pointer. */ html.theme-prakriti .pk-aurora { position: absolute; inset: -25%; opacity: .9; background: radial-gradient(32% 40% at 22% 32%, rgb(var(--pk-accent) / .2), transparent 70%), radial-gradient(28% 36% at 78% 22%, rgb(var(--pk-sun) / .24), transparent 70%), radial-gradient(30% 34% at 62% 82%, rgb(var(--pk-clay) / .14), transparent 70%); } html.pk-motion.theme-prakriti .pk-aurora { animation: pk-aurora 28s ease-in-out infinite alternate; } @keyframes pk-aurora { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12) translate(2%, -2%); } 100% { transform: rotate(-8deg) scale(1.05) translate(-3%, 2%); } } html.theme-prakriti .pk-shop-dots { position: absolute; inset: -40px; opacity: .55; background-image: radial-gradient(rgb(var(--pk-ink) / .16) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(60% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 70% 40%, #000, transparent 75%); translate: calc(var(--pk-mx) * -18px) calc(var(--pk-my) * -18px); transition: translate .8s var(--pk-ease); } /* Eyebrow with a live dot */ html.theme-prakriti .pk-shop-eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding-inline: 12px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-prakriti .pk-live-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; } html.pk-motion.theme-prakriti .pk-live-dot::after { animation: pk-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } /* Title: every word rises out of its own mask; the last word carries a slow turmeric sheen. */ html.theme-prakriti .pk-split { display: block; } html.theme-prakriti .pk-split-word { display: inline-block; overflow: clip; overflow-clip-margin: .2em; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: bottom; margin-inline-end: .24em; } html.theme-prakriti .pk-split-word:last-child { margin-inline-end: 0; } html.theme-prakriti .pk-split-word > span { display: inline-block; } html.theme-prakriti .pk-split-word.is-last > span { background: linear-gradient(100deg, rgb(var(--pk-forest)) 0%, rgb(var(--pk-accent)) 35%, rgb(var(--pk-sun)) 50%, rgb(var(--pk-accent)) 65%, rgb(var(--pk-forest)) 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes pk-word-rise { from { opacity: 0; transform: translateY(105%) rotate(6deg); } to { opacity: 1; transform: none; } } @keyframes pk-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } } html.pk-motion.theme-prakriti .pk-split-word > span { transform-origin: 0 100%; animation: pk-word-rise 1.1s var(--pk-ease) both; animation-delay: calc(var(--pk-w, 0) * 90ms + 220ms); } html.pk-motion.theme-prakriti .pk-split-word.is-last > span { animation: pk-word-rise 1.1s var(--pk-ease) both, pk-sheen 6s ease-in-out infinite alternate; animation-delay: calc(var(--pk-w, 0) * 90ms + 220ms), 1.6s; } /* Popular brand chips */ html.theme-prakriti .pk-shop-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html.theme-prakriti .pk-shop-quick-label { font-size: 13px; color: rgb(var(--pk-muted)); margin-inline-end: 2px; } html.theme-prakriti .pk-shop-quick-chip { height: 32px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: capitalize; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .35s var(--pk-spring), background-color .25s, color .25s, box-shadow .25s; } html.theme-prakriti .pk-shop-quick-chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(var(--pk-ink) / .35), var(--pk-shadow-1); } html.theme-prakriti .pk-shop-quick-chip:active { transform: scale(.95); } html.theme-prakriti .pk-shop-quick-chip.is-on { color: #fff; background: rgb(var(--pk-forest)); box-shadow: none; } /* Stats */ html.theme-prakriti .pk-shop-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 6px; } html.theme-prakriti .pk-shop-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding-inline: 22px; border-inline-start: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-shop-stats > div:first-child { padding-inline-start: 0; border-inline-start: 0; } html.theme-prakriti .pk-shop-stats dd { font-family: var(--pk-font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: rgb(var(--pk-forest)); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-shop-stats dt { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--pk-muted)); } /* Hero art: a fanned stack of real products that shuffles itself and leans with the pointer. */ html.theme-prakriti .pk-shop-hero-art { width: clamp(300px, 30vw, 430px); aspect-ratio: 1 / 1; translate: calc(var(--pk-mx) * -10px) calc(var(--pk-my) * -10px); transition: translate .8s var(--pk-ease); } html.theme-prakriti .pk-shop-mandala { inset: -6%; } html.theme-prakriti .pk-stack-card { --pk-depth: 0; position: absolute; top: 14%; left: 18%; width: 64%; aspect-ratio: 1 / 1; display: block; border-radius: 28px; outline-offset: 6px; translate: calc(var(--pk-mx) * var(--pk-depth) * 1px) calc(var(--pk-my) * var(--pk-depth) * 1px); transition: transform 1s var(--pk-ease), filter 1s var(--pk-ease), translate .7s var(--pk-ease), z-index 0s linear .35s; } html.theme-prakriti .pk-stack-card[data-slot="0"] { z-index: 3; --pk-depth: 34; transform: rotate(-3deg); } html.theme-prakriti .pk-stack-card[data-slot="1"] { z-index: 2; --pk-depth: 20; transform: translate(-36%, 5%) rotate(-12deg) scale(.84); filter: saturate(.85) brightness(.97); } html.theme-prakriti .pk-stack-card[data-slot="2"] { z-index: 1; --pk-depth: 12; transform: translate(36%, 8%) rotate(11deg) scale(.8); filter: saturate(.8) brightness(.95); } html.theme-prakriti .pk-stack-card.is-front:hover { transform: rotate(0deg) scale(1.03); } html.theme-prakriti .pk-stack-inner { position: relative; display: block; height: 100%; padding: 8px; border-radius: inherit; overflow: hidden; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-line)); } html.pk-motion.theme-prakriti .pk-stack-inner { animation: pk-float 6s ease-in-out infinite; animation-delay: calc(var(--pk-i, 0) * -2s); } html.theme-prakriti .pk-stack-inner img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; background: linear-gradient(180deg, var(--pk-tone-2), var(--pk-tone-1)); transition: transform 1.2s var(--pk-ease); } html.theme-prakriti .pk-stack-card.is-front:hover img { transform: scale(1.06); } html.theme-prakriti .pk-stack-cap { position: absolute; inset-inline: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--pk-shadow-1); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--pk-ease); } html.theme-prakriti .pk-stack-card.is-front .pk-stack-cap { opacity: 1; transform: none; transition-delay: .35s; } html.theme-prakriti .pk-stack-cap strong { font-family: var(--pk-font-display); font-size: 14.5px; font-weight: 500; line-height: 1.25; color: rgb(var(--pk-ink)); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-prakriti .pk-stack-cap span { font-size: 13px; font-weight: 800; color: rgb(var(--pk-accent)); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-stack-dots { position: absolute; z-index: 4; left: 50%; bottom: 2%; display: flex; gap: 6px; transform: translateX(-50%); } html.theme-prakriti .pk-stack-dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: rgb(var(--pk-ink) / .2); transition: width .5s var(--pk-ease), background-color .3s; } html.theme-prakriti .pk-stack-dots button.is-on { width: 24px; background: rgb(var(--pk-forest)); } /* Scroll cue */ html.theme-prakriti .pk-shop-cue { display: none; } @media (min-width: 900px) { html.theme-prakriti .pk-shop-cue { position: absolute; left: 50%; bottom: 18px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% 0; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--pk-muted)); transition: color .25s; } html.theme-prakriti .pk-shop-cue:hover { color: rgb(var(--pk-ink)); } } html.theme-prakriti .pk-shop-cue-mouse { display: flex; justify-content: center; width: 22px; height: 34px; padding-top: 6px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px currentColor; } html.theme-prakriti .pk-shop-cue-mouse i { width: 3px; height: 7px; border-radius: 3px; background: currentColor; } html.pk-motion.theme-prakriti .pk-shop-cue-mouse i { animation: pk-cue 1.8s ease-in-out infinite; } html.pk-motion.theme-prakriti .pk-shop-cue { animation: pk-intro 1s var(--pk-ease) 1.2s both; } /* Toolbar lifts off the page once it sticks. */ html.theme-prakriti .pk-shop-toolbar { transition: top .5s var(--pk-ease), border-color .3s, box-shadow .4s; } html.theme-prakriti .pk-shop-toolbar.is-stuck { border-bottom-color: rgb(var(--pk-line)); box-shadow: 0 14px 30px -22px rgb(var(--pk-ink) / .45); } /* Grid density morph (View Transitions; names exist only while morphing). */ html.theme-prakriti .pk-shop-grid.is-morphing .pk-shop-cell { view-transition-name: var(--pk-vt); } ::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } /* Back to top with a scroll-progress ring */ html.theme-prakriti .pk-shop-top { position: fixed; z-index: 21; right: 20px; bottom: calc(var(--pk-tabbar-h) + 20px); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 999px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-surface) / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--pk-shadow-2); opacity: 0; scale: .6; pointer-events: none; transition: opacity .35s, scale .5s var(--pk-spring), translate .3s var(--pk-ease); } html[dir="rtl"].theme-prakriti .pk-shop-top { right: auto; left: 20px; } html.theme-prakriti .pk-shop-top.is-shown { opacity: 1; scale: 1; pointer-events: auto; } html.theme-prakriti .pk-shop-top:hover { translate: 0 -3px; } html.theme-prakriti .pk-shop-top-track { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; stroke-width: 2.5; } html.theme-prakriti .pk-shop-top-track circle:first-child { stroke: rgb(var(--pk-line)); } html.theme-prakriti .pk-shop-top-ring { stroke: rgb(var(--pk-accent)); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } /* 26. Wishlist (prakriti/wishlist/*) ------------------------------------------ Mirrors Optica's wishlist contract: blooming hero with count-up totals and saved remedies orbiting a turning mandala, sticky glass toolbar (§22) with counts and an in-list search, FLIP grid where removed cards mist away, undo toast, empty state. */ html.theme-prakriti .pk-wl { overflow-x: clip; padding-bottom: 32px; } /* Hero */ html.theme-prakriti .pk-wl-hero { --pk-mx: 0; --pk-my: 0; position: relative; isolation: isolate; overflow: clip; padding-block: clamp(20px, 3vw, 36px) clamp(32px, 5vw, 60px); } html.theme-prakriti .pk-wl-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); } html.theme-prakriti .pk-wl-glow { position: absolute; border-radius: 999px; filter: blur(60px); opacity: .8; } html.theme-prakriti .pk-wl-glow--a { width: 480px; height: 480px; right: -80px; top: -200px; background: radial-gradient(circle, rgb(var(--pk-sun) / .32), transparent 70%); } html.theme-prakriti .pk-wl-glow--b { width: 380px; height: 380px; left: -140px; bottom: -220px; background: radial-gradient(circle, rgb(var(--pk-accent) / .26), transparent 70%); } html.pk-motion.theme-prakriti .pk-wl-glow--a { animation: pk-drift-a 16s ease-in-out infinite alternate; } html.pk-motion.theme-prakriti .pk-wl-glow--b { animation: pk-drift-b 19s ease-in-out infinite alternate; } html.theme-prakriti .pk-wl-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; } @media (min-width: 900px) { html.theme-prakriti .pk-wl-hero-inner { grid-template-columns: minmax(0, 1fr) auto; } } html.theme-prakriti .pk-wl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-prakriti .pk-wl-eyebrow-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--pk-clay)); } html.theme-prakriti .pk-wl-eyebrow-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-wl-title { font-family: var(--pk-font-display); font-size: clamp(42px, 6.6vw, 84px); font-weight: 500; line-height: .98; letter-spacing: -.04em; color: rgb(var(--pk-ink)); text-transform: capitalize; } html.theme-prakriti .pk-wl-title .is-accent { font-style: italic; padding-inline-end: .06em; background: linear-gradient(100deg, rgb(var(--pk-accent)) 0%, rgb(var(--pk-sun)) 45%, rgb(var(--pk-clay)) 60%, rgb(var(--pk-accent)) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } html.pk-motion.theme-prakriti .pk-wl-title .is-accent { animation: pk-bloom-in 1.2s var(--pk-ease) both, pk-wl-sheen 7s ease-in-out 1.6s infinite; animation-delay: calc(var(--pk-d, 0) * 120ms + 150ms), 1.6s; } @keyframes pk-wl-sheen { 50% { background-position: 100% 0; } } html.theme-prakriti .pk-wl-lede { max-width: 520px; font-size: 16px; line-height: 1.65; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-wl-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } html.theme-prakriti .pk-wl-stat { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 22px; background: rgb(var(--pk-surface) / .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: translate .45s var(--pk-spring), box-shadow .4s var(--pk-ease); } html.theme-prakriti .pk-wl-stat:hover { translate: 0 -4px; box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-sun) / .4); } html.theme-prakriti .pk-wl-stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; color: rgb(var(--pk-clay)); background: var(--pk-tone-3); transition: rotate .6s var(--pk-spring); } html.theme-prakriti .pk-wl-stat:hover .pk-wl-stat-icon { rotate: -12deg; } html.theme-prakriti .pk-wl-stat:first-child .pk-wl-stat-icon .pk-icon { fill: currentColor; } html.theme-prakriti .pk-wl-stat:nth-child(2) .pk-wl-stat-icon { color: rgb(var(--pk-accent)); background: var(--pk-tone-1); } html.theme-prakriti .pk-wl-stat.is-sun .pk-wl-stat-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-wl-stat-text { display: flex; flex-direction: column; line-height: 1.15; } html.theme-prakriti .pk-wl-stat-text strong { font-family: var(--pk-font-display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-wl-stat-text small { font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-wl-stats.is-loading strong { color: transparent; border-radius: 8px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)), rgb(var(--pk-line)), rgb(var(--pk-bg-2))); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } /* Hero art: mandala + dashed orbit carrying saved covers (kept upright), beating heart, rising hearts. */ html.theme-prakriti .pk-wl-art { position: relative; display: none; width: clamp(280px, 28vw, 380px); aspect-ratio: 1; translate: calc(var(--pk-mx) * 14px) calc(var(--pk-my) * 14px); transition: translate .8s var(--pk-ease); } @media (min-width: 900px) { html.theme-prakriti .pk-wl-art { display: block; } } html.theme-prakriti .pk-wl-art-mandala { position: absolute; inset: 0; color: rgb(var(--pk-accent) / .2); } html.pk-motion.theme-prakriti .pk-wl-art-mandala .pk-mandala { animation: pk-turn 120s linear infinite; } html.theme-prakriti .pk-wl-art-ring { position: absolute; inset: 14%; border-radius: 999px; border: 1.5px dashed rgb(var(--pk-sun) / .55); } html.theme-prakriti .pk-wl-orbit { position: absolute; inset: 14%; translate: calc(var(--pk-mx) * -10px) calc(var(--pk-my) * -10px); transition: translate .8s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-wl-orbit, html.pk-motion.theme-prakriti .pk-wl-moon-face { animation: pk-turn 48s linear infinite; } html.pk-motion.theme-prakriti .pk-wl-moon-face { animation-direction: reverse; } html.theme-prakriti .pk-wl-moon { position: absolute; inset: 0; transform: rotate(var(--pk-a)); pointer-events: none; } html.theme-prakriti .pk-wl-moon-face { position: absolute; left: 50%; top: 0; width: 36%; aspect-ratio: 1; margin: -18% 0 0 -18%; transform: rotate(calc(-1 * var(--pk-a))); } html.theme-prakriti .pk-wl-moon-face img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3), 0 0 0 5px rgb(var(--pk-surface)), 0 0 0 6px rgb(var(--pk-line)); } html.pk-motion.theme-prakriti .pk-wl-moon-face img { animation: pk-wl-moon-in 1.1s var(--pk-spring) both; } html.pk-motion.theme-prakriti .pk-wl-moon:nth-child(2) img { animation-delay: .12s; } html.pk-motion.theme-prakriti .pk-wl-moon:nth-child(3) img { animation-delay: .24s; } html.pk-motion.theme-prakriti .pk-wl-moon:nth-child(4) img { animation-delay: .36s; } @keyframes pk-wl-moon-in { from { opacity: 0; scale: .3; } } html.theme-prakriti .pk-wl-orb { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 999px; color: #fff; background: radial-gradient(circle at 30% 25%, rgb(var(--pk-clay) / .85), rgb(var(--pk-clay))); box-shadow: 0 18px 38px -10px rgb(var(--pk-clay) / .75), 0 0 0 7px rgb(var(--pk-surface)); } html.theme-prakriti .pk-wl-orb .pk-icon { position: relative; z-index: 1; fill: currentColor; } html.theme-prakriti .pk-wl-orb.is-solo { width: 132px; height: 132px; margin: -66px 0 0 -66px; } html.theme-prakriti .pk-wl-orb i { position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgb(var(--pk-clay) / .5); opacity: 0; } html.pk-motion.theme-prakriti .pk-wl-orb { animation: pk-wl-beat 1.7s ease-in-out infinite; } html.pk-motion.theme-prakriti .pk-wl-orb i { animation: pk-wl-ripple 3.4s cubic-bezier(0, 0, .2, 1) infinite; } html.pk-motion.theme-prakriti .pk-wl-orb i:nth-of-type(2) { animation-delay: 1.7s; } @keyframes pk-wl-beat { 0%, 40%, 100% { scale: 1; } 12% { scale: 1.12; } 26% { scale: 1.04; } 32% { scale: 1.1; } } @keyframes pk-wl-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } } html.theme-prakriti .pk-wl-float { position: absolute; z-index: 4; left: calc(12% + var(--pk-i) * 12%); bottom: 18%; color: rgb(var(--pk-clay)); opacity: 0; } html.theme-prakriti .pk-wl-float:nth-child(even) { color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-wl-float .pk-icon { fill: currentColor; } html.pk-motion.theme-prakriti .pk-wl-float { animation: pk-wl-rise 5.8s ease-in infinite; animation-delay: calc(var(--pk-i) * -0.97s); } @keyframes pk-wl-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6) rotate(-10deg); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(16px, -240px) scale(1.1) rotate(18deg); } } /* Toolbar: §22 sticky glass bar + tab counts + search */ html.theme-prakriti .pk-wl-toolbar-inner { flex-wrap: wrap; } html.theme-prakriti .pk-wl-toolbar .pk-shop-rail-item:disabled { opacity: .4; cursor: not-allowed; } html.theme-prakriti .pk-wl-tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; line-height: 1; margin-inline-start: 8px; padding-inline: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); transition: color .35s, background-color .35s; } html.theme-prakriti .pk-wl-toolbar .pk-shop-rail-item.is-active .pk-wl-tab-count { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-wl-find { display: flex; align-items: center; gap: 8px; width: 220px; height: 44px; padding-inline: 14px 8px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: width .5s var(--pk-ease), box-shadow .3s, color .3s; cursor: text; } html.theme-prakriti .pk-wl-find:focus-within, html.theme-prakriti .pk-wl-find.has-value { width: 280px; color: rgb(var(--pk-accent)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)), 0 0 0 4px rgb(var(--pk-accent) / .12); } html.theme-prakriti .pk-wl-find input { flex: 1; width: 0; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-wl-find input::-webkit-search-cancel-button { display: none; } html.theme-prakriti .pk-wl-find-clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg-2)); transition: color .2s, transform .3s var(--pk-spring); } html.theme-prakriti .pk-wl-find-clear:hover { color: rgb(var(--pk-danger)); transform: rotate(90deg); } @media (max-width: 767.98px) { html.theme-prakriti .pk-wl-toolbar-inner > .pk-shop-rail { flex: 1 1 100%; width: auto; } html.theme-prakriti .pk-wl-tools { flex: 1 1 100%; margin-inline-start: 0; } html.theme-prakriti .pk-wl-find, html.theme-prakriti .pk-wl-find:focus-within, html.theme-prakriti .pk-wl-find.has-value { flex: 1 1 0; width: auto; min-width: 0; } html.theme-prakriti .pk-wl-tools .pk-shop-sort { flex-shrink: 0; } html.theme-prakriti .pk-wl-tools .pk-shop-sort select { max-width: 130px; } } /* Grid + card */ html.theme-prakriti .pk-wl-body { padding-top: clamp(20px, 3vw, 32px); } html.theme-prakriti .pk-wl-grid { position: relative; transition: opacity .3s, filter .3s; } html.theme-prakriti .pk-wl-grid.is-busy { opacity: .45; filter: blur(2px); pointer-events: none; } /* `backwards`, not `both`: a held end frame would pin opacity and the leave fade would never show. */ html.pk-motion.theme-prakriti .pk-wl-card { animation: pk-wl-card-in .9s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 70ms + 150ms); } @keyframes pk-wl-card-in { from { opacity: 0; translate: 0 36px; filter: blur(6px); } } .pk-wl-card-move { transition: transform .7s cubic-bezier(.22, 1, .36, 1); } .pk-wl-card-leave-active { position: absolute; z-index: 0; transition: opacity .5s ease, scale .6s cubic-bezier(.22, 1, .36, 1), filter .5s ease, translate .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .pk-wl-card-leave-to { opacity: 0; scale: .8; translate: 0 -18px; filter: blur(12px); } .pk-wl-card-enter-active { transition: opacity .5s ease, scale .65s cubic-bezier(.34, 1.56, .64, 1); } .pk-wl-card-enter-from { opacity: 0; scale: .85; } html.theme-prakriti .pk-wl-card .pk-card-body { flex: 1; } html.theme-prakriti .pk-wl-card .pk-wl-cta { margin-top: auto; } html.theme-prakriti .pk-wl-remove { overflow: hidden; } html.theme-prakriti .pk-wl-remove .pk-icon { position: absolute; transition: opacity .25s, transform .4s var(--pk-spring); } html.theme-prakriti .pk-wl-remove-x { opacity: 0; transform: rotate(-90deg) scale(.5); } html.theme-prakriti .pk-wl-remove:hover, html.theme-prakriti .pk-wl-remove:focus-visible { color: #fff; background: rgb(var(--pk-danger)); } html.theme-prakriti .pk-wl-remove:hover .pk-wl-remove-heart, html.theme-prakriti .pk-wl-remove:focus-visible .pk-wl-remove-heart { opacity: 0; transform: scale(.4); } html.theme-prakriti .pk-wl-remove:hover .pk-wl-remove-x, html.theme-prakriti .pk-wl-remove:focus-visible .pk-wl-remove-x { opacity: 1; transform: none; } html.theme-prakriti .pk-wl-low { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: rgb(var(--pk-clay)); } html.theme-prakriti .pk-wl-low-dot { position: relative; width: 7px; height: 7px; border-radius: 999px; background: currentColor; } html.theme-prakriti .pk-wl-low-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-wl-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 8px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .3s, box-shadow .3s, transform .3s var(--pk-spring); } html.theme-prakriti .pk-wl-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--pk-forest)); transform: translateY(101%); transition: transform .5s var(--pk-ease); } html.theme-prakriti .pk-wl-cta:hover { color: #fff; box-shadow: none; } html.theme-prakriti .pk-wl-cta:hover::before { transform: none; } html.theme-prakriti .pk-wl-cta:active { transform: scale(.97); } html.theme-prakriti .pk-wl-cta-arrow { transition: transform .4s var(--pk-ease); } html.theme-prakriti .pk-wl-cta:hover .pk-wl-cta-arrow { transform: translateX(4px); } html[dir="rtl"].theme-prakriti .pk-wl-cta-arrow { scale: -1 1; } html.theme-prakriti .pk-wl-cta.is-notify::before { background: rgb(var(--pk-accent)); } /* The always-visible CTA below replaces the stage's hover CTA here. */ html.theme-prakriti .pk-wl-card .pk-card-badges { opacity: 1 !important; } @media (max-width: 639.98px) { html.theme-prakriti .pk-wl-cta { height: 40px; font-size: 12.5px; } } /* Empty states */ html.theme-prakriti .pk-wl-nomatch { margin-top: 8px; } html.theme-prakriti .pk-wl-nomatch-art { position: relative; display: grid; place-items: center; width: 120px; height: 120px; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-wl-nomatch-art .pk-mandala { position: absolute; inset: 0; color: rgb(var(--pk-sun) / .5); } html.pk-motion.theme-prakriti .pk-wl-nomatch-art .pk-mandala { animation: pk-turn 40s linear infinite; } html.theme-prakriti .pk-wl-empty { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(36px, 7vw, 72px) 20px; border-radius: 40px; background: radial-gradient(60% 60% at 50% 0%, rgb(var(--pk-sun) / .14), transparent 70%), rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-wl-empty > .pk-leaves { z-index: -1; opacity: .7; } html.theme-prakriti .pk-wl-empty > p { max-width: 420px; color: rgb(var(--pk-muted)); font-size: 15px; line-height: 1.6; } html.theme-prakriti .pk-wl-empty-art { position: relative; width: 240px; height: 240px; margin-bottom: 4px; } html.theme-prakriti .pk-wl-empty-art .pk-wl-orb.is-solo { width: 112px; height: 112px; margin: -56px 0 0 -56px; } html.theme-prakriti .pk-wl-empty-orbit { position: absolute; inset: 22px; border-radius: 999px; border: 1.5px dashed rgb(var(--pk-sun) / .6); } html.theme-prakriti .pk-wl-empty-sat { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; margin: -21px; border-radius: 999px; color: rgb(var(--pk-accent)); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } html.pk-motion.theme-prakriti .pk-wl-empty-orbit { animation: pk-turn 22s linear infinite; } html.pk-motion.theme-prakriti .pk-wl-empty-sat { animation: pk-turn 22s linear infinite reverse; } html.theme-prakriti .pk-wl-empty-sat.is-0 { left: 50%; top: 0; } html.theme-prakriti .pk-wl-empty-sat.is-1 { left: 93.3%; top: 75%; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-wl-empty-sat.is-2 { left: 6.7%; top: 75%; color: rgb(var(--pk-clay)); } html.theme-prakriti .pk-wl-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: min(760px, 100%); margin: 10px 0 14px; padding: 0; list-style: none; } @media (min-width: 640px) { html.theme-prakriti .pk-wl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } html.theme-prakriti .pk-wl-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 34px 14px 14px; line-height: 1.35; border-radius: 20px; text-align: start; font-size: 14px; font-weight: 600; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-wl-step-num { position: absolute; top: 8px; inset-inline-end: 12px; font-family: var(--pk-font-display); font-size: 13px; font-style: italic; color: rgb(var(--pk-sun-ink) / .7); } html.theme-prakriti .pk-wl-step-icon { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); } html.theme-prakriti .pk-wl-steps li:nth-child(2) .pk-wl-step-icon { color: rgb(var(--pk-clay)); background: var(--pk-tone-3); } html.theme-prakriti .pk-wl-steps li:nth-child(2) .pk-wl-step-icon .pk-icon { fill: currentColor; } html.theme-prakriti .pk-wl-steps li:nth-child(3) .pk-wl-step-icon { color: rgb(var(--pk-sun-ink)); background: var(--pk-tone-2); } /* Keep exploring / ask a Vaidya band */ html.theme-prakriti .pk-wl-more { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(28px, 4vw, 52px); border-radius: 36px; color: rgb(var(--pk-cream-ink)); background: radial-gradient(80% 120% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 60%); } html.theme-prakriti .pk-wl-more > .pk-leaves { z-index: -1; opacity: .5; } html.theme-prakriti .pk-wl-more-mandala { position: absolute; z-index: -1; width: 440px; height: 440px; inset-inline-end: -120px; top: 50%; margin-top: -220px; color: rgb(var(--pk-sun) / .22); } html.pk-motion.theme-prakriti .pk-wl-more-mandala .pk-mandala { animation: pk-turn 90s linear infinite; } html.theme-prakriti .pk-wl-more-copy { display: flex; flex-direction: column; gap: 10px; max-width: 560px; } html.theme-prakriti .pk-wl-more h2 { font-family: var(--pk-font-display); font-size: clamp(26px, 3.6vw, 42px); font-weight: 500; line-height: 1.06; letter-spacing: -.025em; color: #fff; } html.theme-prakriti .pk-wl-more-actions { display: flex; flex-wrap: wrap; gap: 10px; } html.theme-prakriti .pk-wl-more .pk-btn .pk-icon { transition: transform .4s var(--pk-ease); } html.theme-prakriti .pk-wl-more .pk-btn:hover .pk-icon:last-child { transform: translateX(4px); } /* Undo toast (teleported to body, so not scoped by .pk-wl) */ html.theme-prakriti .pk-wl-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--pk-tabbar-h) + 18px); display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 10px; border-radius: 22px; overflow: hidden; color: #fff; background: rgb(var(--pk-forest) / .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--pk-shadow-3); translate: -50% 0; } html.theme-prakriti .pk-wl-toast-thumb { flex-shrink: 0; width: 46px; height: 46px; border-radius: 999px; object-fit: cover; background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-wl-toast-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } html.theme-prakriti .pk-wl-toast-copy strong { font-size: 14px; font-weight: 700; } html.theme-prakriti .pk-wl-toast-copy span { font-size: 12.5px; color: rgb(255 255 255 / .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.theme-prakriti .pk-wl-toast-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transition: transform .3s var(--pk-spring), filter .2s; } html.theme-prakriti .pk-wl-toast-btn:hover { filter: brightness(1.08); } html.theme-prakriti .pk-wl-toast-btn:active { transform: scale(.94); } html.theme-prakriti .pk-wl-toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(var(--pk-sun)); transform-origin: left; animation: pk-wl-timer linear forwards; } html.theme-prakriti .pk-wl-toast-timer.is-paused { animation-play-state: paused; } @keyframes pk-wl-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } .pk-wl-toast-enter-active { transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); } .pk-wl-toast-leave-active { transition: opacity .25s ease, transform .3s ease; } .pk-wl-toast-enter-from, .pk-wl-toast-leave-to { opacity: 0; transform: translateY(30px) scale(.94); } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-wl-float { display: none; } html.theme-prakriti .pk-wl-art, html.theme-prakriti .pk-wl-orbit { translate: none; } } /* 27. Offers (prakriti/product/OfferProductComponent) ----------------------------- Blooming hero (count-up "up to" pill, flip countdown, deals orbiting a mandala), offer ribbon, forest "deal of the moment" card, sticky glider toolbar (§22 classes), staggered grid with a per-deal strip (saving · stock · timer) and window meter, forest closing band. Pointer arrives as --pk-mx / --pk-my (-0.5…0.5) on the hero. */ html.theme-prakriti .pk-of { overflow-x: clip; padding-bottom: 32px; } /* Hero */ html.theme-prakriti .pk-of-hero { --pk-mx: 0; --pk-my: 0; position: relative; isolation: isolate; overflow: clip; padding-block: clamp(20px, 3vw, 36px) clamp(36px, 5vw, 56px); } html.theme-prakriti .pk-of-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); } html.theme-prakriti .pk-of-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; } @media (min-width: 900px) { html.theme-prakriti .pk-of-hero { min-height: clamp(560px, 74vh, 720px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 96px; } html.theme-prakriti .pk-of-hero-inner { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 88px); } } html.theme-prakriti .pk-of-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } html.theme-prakriti .pk-of-title { font-size: clamp(40px, 6.4vw, 82px); max-width: 11em; text-transform: none; } /* "Up to N% off": a turmeric pill with a light sweep passing over it. */ html.theme-prakriti .pk-of-upto { position: relative; margin-top: 10px; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding-inline: 16px 20px; border-radius: 999px; font-family: var(--pk-font-display); font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 14px 30px -16px rgb(var(--pk-sun) / .95); } html.theme-prakriti .pk-of-upto .pk-icon { padding: 4px; width: 26px; height: 26px; border-radius: 999px; color: rgb(var(--pk-sun)); background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-of-upto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); translate: -120% 0; } html.pk-motion.theme-prakriti .pk-of-upto::after { animation: pk-of-sweep 3.6s var(--pk-ease) 1.6s infinite; } @keyframes pk-of-sweep { 0% { translate: -120% 0; } 45%, 100% { translate: 120% 0; } } html.theme-prakriti .pk-of-lede { max-width: 46ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; color: rgb(var(--pk-ink-2)); } /* Flip countdown */ html.theme-prakriti .pk-of-count { display: flex; flex-direction: column; gap: 10px; } html.theme-prakriti .pk-of-count-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-clay)); } html.theme-prakriti .pk-of-count-cells { display: flex; align-items: flex-start; gap: 8px; } html.theme-prakriti .pk-of-count-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; } html.theme-prakriti .pk-of-count-num { position: relative; display: grid; place-items: center; width: clamp(54px, 5vw, 66px); height: clamp(58px, 5.4vw, 70px); overflow: hidden; border-radius: 16px; font-family: var(--pk-font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: rgb(var(--pk-cream-ink)); background: linear-gradient(180deg, rgb(var(--pk-forest-2)), rgb(var(--pk-forest))); box-shadow: var(--pk-shadow-2), inset 0 1px 0 rgb(255 255 255 / .1); } /* The fold line across the middle of each tile. */ html.theme-prakriti .pk-of-count-num::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .25); box-shadow: 0 1px 0 rgb(255 255 255 / .06); } html.theme-prakriti .pk-of-count-num > span { display: block; } html.theme-prakriti .pk-of-count-cell small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-of-count-sep { padding-top: 14px; font-family: var(--pk-font-display); font-size: 24px; font-weight: 600; color: rgb(var(--pk-forest) / .4); } html.pk-motion.theme-prakriti .pk-of-count-sep { animation: pk-pulse 1s steps(1) infinite; } .pk-of-tick-enter-active, .pk-of-tick-leave-active { transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .32s ease, filter .32s ease; } .pk-of-tick-enter-from { transform: translateY(-70%) rotateX(70deg); opacity: 0; filter: blur(3px); } .pk-of-tick-leave-to { transform: translateY(70%) rotateX(-70deg); opacity: 0; filter: blur(3px); } html.theme-prakriti .pk-of-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } html.theme-prakriti .pk-of-stats { margin-top: 8px; transition: opacity .4s; } html.theme-prakriti .pk-of-stats.is-loading { opacity: .45; } /* Orbit art: mandala, circling ring text, the spotlighted deal in a round window, the rest in orbit. */ html.theme-prakriti .pk-of-art { position: relative; justify-self: center; width: min(360px, 88vw); aspect-ratio: 1 / 1; translate: calc(var(--pk-mx) * -14px) calc(var(--pk-my) * -14px); transition: translate .8s var(--pk-ease); } @media (min-width: 900px) { html.theme-prakriti .pk-of-art { width: clamp(360px, 36vw, 500px); } } html.theme-prakriti .pk-of-mandala { position: absolute; inset: 4%; color: rgb(var(--pk-accent) / .2); } html.pk-motion.theme-prakriti .pk-of-mandala .pk-mandala { animation: pk-turn 120s linear infinite; } html.theme-prakriti .pk-of-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: rgb(var(--pk-ink-2) / .75); font-size: 9px; font-weight: 700; letter-spacing: .1em; } html.pk-motion.theme-prakriti .pk-of-ring { animation: pk-turn 50s linear infinite reverse; } html.theme-prakriti .pk-of-window { position: absolute; inset: 21%; z-index: 2; display: block; overflow: hidden; border-radius: 999px; background: linear-gradient(180deg, var(--pk-tone-2), var(--pk-tone-1)); box-shadow: 0 0 0 8px rgb(var(--pk-surface)), 0 0 0 9px rgb(var(--pk-line)), var(--pk-shadow-3); translate: calc(var(--pk-mx) * 16px) calc(var(--pk-my) * 16px); transition: translate .7s var(--pk-ease), scale .6s var(--pk-ease); } html.theme-prakriti a.pk-of-window:hover { scale: 1.03; } html.theme-prakriti .pk-of-window-in, html.theme-prakriti .pk-of-window img { display: block; width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-of-window img { transition: transform 1.4s var(--pk-ease); } html.theme-prakriti a.pk-of-window:hover img { transform: scale(1.08); } html.theme-prakriti .pk-of-window.is-empty { display: grid; place-items: center; color: var(--pk-leaf-2); } html.theme-prakriti .pk-of-window.is-empty .pk-leaf-svg { width: 55%; height: 55%; rotate: -24deg; } html.theme-prakriti .pk-of-hero-seal { top: 17%; inset-inline-end: 15%; z-index: 4; width: 76px; height: 76px; font-size: 18px; } html.pk-motion.theme-prakriti .pk-of-hero-seal { animation: pk-of-seal 5s ease-in-out infinite; } @keyframes pk-of-seal { 50% { rotate: 6deg; translate: 0 -6px; } } html.theme-prakriti .pk-of-cap { position: absolute; z-index: 4; left: 50%; bottom: 24%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 52%; padding: 8px 16px; border-radius: 18px; text-align: center; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-of-cap strong { max-width: 100%; font-family: var(--pk-font-display); font-size: 15px; font-weight: 500; color: rgb(var(--pk-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; } html.theme-prakriti .pk-of-cap span { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-of-cap b { font-weight: 800; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-of-cap del { font-size: 12px; color: rgb(var(--pk-muted)); } /* The orbit turns as a whole; every satellite counter-turns so its photo stays upright. */ html.theme-prakriti .pk-of-orbit { position: absolute; inset: 0; z-index: 3; } html.pk-motion.theme-prakriti .pk-of-orbit, html.pk-motion.theme-prakriti .pk-of-sat-in { animation: pk-turn 60s linear infinite; } html.pk-motion.theme-prakriti .pk-of-sat-in { animation-direction: reverse; } html.theme-prakriti .pk-of-art:hover .pk-of-orbit, html.theme-prakriti .pk-of-art:hover .pk-of-sat-in, html.theme-prakriti .pk-of-art:focus-within .pk-of-orbit, html.theme-prakriti .pk-of-art:focus-within .pk-of-sat-in { animation-play-state: paused; } html.theme-prakriti .pk-of-sat { position: absolute; top: 50%; left: 50%; width: 15%; aspect-ratio: 1 / 1; margin: -7.5% 0 0 -7.5%; padding: 0; border-radius: 999px; transform: rotate(var(--pk-a)) translateY(-262%) rotate(calc(var(--pk-a) * -1)); } html.theme-prakriti .pk-of-sat-in { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: rgb(var(--pk-surface)); box-shadow: 0 0 0 3px rgb(var(--pk-surface)), var(--pk-shadow-2); transition: box-shadow .4s, scale .5s var(--pk-spring); } html.theme-prakriti .pk-of-sat img { display: block; width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-of-sat:hover .pk-of-sat-in { scale: 1.12; } html.theme-prakriti .pk-of-sat.is-on .pk-of-sat-in { scale: 1.18; box-shadow: 0 0 0 3px rgb(var(--pk-surface)), 0 0 0 6px rgb(var(--pk-sun)), var(--pk-shadow-2); } html.theme-prakriti .pk-of-sat:focus-visible { outline: 2px solid rgb(var(--pk-accent)); outline-offset: 6px; } html.theme-prakriti .pk-of-hero .pk-shop-cue { z-index: 5; } /* Ribbon sits closer to the hero here. */ html.theme-prakriti .pk-of-ribbon { margin-top: -28px; } /* Deal of the moment: a forest card with an arched photo window. */ html.theme-prakriti .pk-of-feature-wrap { padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 36px); } html.theme-prakriti .pk-of-feature { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(20px, 3.4vw, 48px); border-radius: clamp(28px, 3vw, 44px); color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 90% at 85% 10%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 60%); box-shadow: var(--pk-shadow-3); } @media (min-width: 900px) { html.theme-prakriti .pk-of-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); } } html.theme-prakriti .pk-of-feature-mandala { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -22%; top: -30%; color: rgb(var(--pk-sun) / .09); } html.pk-motion.theme-prakriti .pk-of-feature-mandala .pk-mandala { animation: pk-turn 140s linear infinite; } html.theme-prakriti .pk-of-feature-media { --pk-rx: 0deg; --pk-ry: 0deg; position: relative; display: block; width: min(100%, 440px); justify-self: center; transform: perspective(1000px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .7s var(--pk-ease); } html.theme-prakriti .pk-of-feature-media.is-tilting { transition: transform .12s linear; } html.theme-prakriti .pk-of-feature-arch { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--pk-arch); background: linear-gradient(180deg, var(--pk-tone-2), var(--pk-tone-1)); box-shadow: 0 0 0 6px rgb(255 255 255 / .08), 0 40px 80px -30px rgb(0 0 0 / .6); } html.theme-prakriti .pk-of-feature-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--pk-ease); } html.theme-prakriti .pk-of-feature-media:hover .pk-of-feature-arch img { transform: scale(1.06); } html.theme-prakriti .pk-of-feature-seal { top: 6%; inset-inline-end: -10px; width: 92px; height: 92px; font-size: 22px; background: rgb(var(--pk-sun)); color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-of-feature-seal::before { border-color: rgb(var(--pk-forest) / .35); } html.pk-motion.theme-prakriti .pk-of-feature-seal { animation: pk-of-seal 5s ease-in-out infinite; } html.theme-prakriti .pk-of-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } html.theme-prakriti .pk-of-feature-name { font-family: var(--pk-font-display); font-size: clamp(30px, 4vw, 56px); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; text-transform: capitalize; overflow-wrap: anywhere; } html.theme-prakriti .pk-of-feature-name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--pk-ease); } html.theme-prakriti .pk-of-feature-name a:hover { background-size: 100% 2px; } html.theme-prakriti .pk-of-feature-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-of-feature-price strong { font-family: var(--pk-font-display); font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-of-feature-price del { font-size: 18px; color: rgb(var(--pk-cream-ink) / .5); } html.theme-prakriti .pk-of-feature-price .pk-tag { align-self: center; height: 28px; font-size: 12px; } html.theme-prakriti .pk-of-feature-window { display: flex; flex-direction: column; gap: 10px; width: min(100%, 420px); } html.theme-prakriti .pk-of-feature-left { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--pk-cream-ink) / .8); } html.theme-prakriti .pk-of-feature-body .pk-btn { margin-top: 6px; } /* Toolbar: §22's sticky glass bar, with the glider tab bar inside it. */ html.theme-prakriti .pk-of-toolbar { margin-top: 12px; } /* .pk-tabbar is also §7's fixed mobile nav (hidden ≥1024px): restate the glider-bar box here, as the PDP does. */ html.theme-prakriti .pk-tabbar.pk-of-tabs { position: relative; inset: auto; z-index: auto; display: flex; flex: 0 1 auto; justify-content: flex-start; min-width: 0; height: auto; padding: 5px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: none; backdrop-filter: none; } html.theme-prakriti .pk-of-tabs .pk-tabbar-btn { height: 38px; padding-inline: 16px; } html.theme-prakriti .pk-of-tabs .pk-tabbar-btn:disabled { opacity: .4; cursor: not-allowed; } @media (max-width: 639.98px) { html.theme-prakriti .pk-of-toolbar .pk-shop-toolbar-inner { flex-wrap: wrap; } html.theme-prakriti .pk-of-toolbar .pk-shop-tools { margin-inline-start: 0; } } /* Grid + per-deal strip */ html.theme-prakriti .pk-of-body { padding-top: 24px; } html.theme-prakriti .pk-of-grid { transition: opacity .3s; } html.theme-prakriti .pk-of-grid.is-busy { opacity: .5; pointer-events: none; } html.theme-prakriti .pk-of-cell { display: flex; flex-direction: column; gap: 10px; min-width: 0; } html.theme-prakriti .pk-of-strip { display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 4px; } html.theme-prakriti .pk-of-strip > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-inline: 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-of-strip-save { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-of-strip-stock { color: rgb(var(--pk-clay)); background: rgb(var(--pk-clay) / .1); } html.theme-prakriti .pk-of-strip-time { color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-of-strip-time.is-urgent { color: #fff; background: rgb(var(--pk-clay)); box-shadow: 0 8px 18px -10px rgb(var(--pk-clay)); } html.pk-motion.theme-prakriti .pk-of-strip-time.is-urgent .pk-icon { animation: pk-of-shake 1.6s ease-in-out infinite; } html.theme-prakriti .pk-of-strip-time.is-over { color: rgb(var(--pk-muted)); text-decoration: line-through; } @keyframes pk-of-shake { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -14deg; } 80% { rotate: 12deg; } 90% { rotate: -6deg; } } html.theme-prakriti .pk-of-meter { height: 3px; margin-inline: 4px; overflow: hidden; border-radius: 3px; background: rgb(var(--pk-line)); } html.theme-prakriti .pk-of-meter span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, rgb(var(--pk-accent)), rgb(var(--pk-sun)), rgb(var(--pk-clay))); transition: transform 1s linear; } html[dir="rtl"].theme-prakriti .pk-of-meter span { transform-origin: right; } html.theme-prakriti .pk-of-meter.is-big { height: 6px; margin-inline: 0; background: rgb(255 255 255 / .14); } /* Empty state */ html.theme-prakriti .pk-of-empty-art { position: relative; display: grid; place-items: center; width: 140px; height: 140px; margin-bottom: 8px; border-radius: 999px; color: var(--pk-leaf-2); background: var(--pk-tone-2); } html.theme-prakriti .pk-of-empty-mandala { position: absolute; inset: -14%; color: rgb(var(--pk-sun) / .55); } html.pk-motion.theme-prakriti .pk-of-empty-mandala .pk-mandala { animation: pk-turn 40s linear infinite; } html.theme-prakriti .pk-of-empty-art .pk-leaf-svg { position: absolute; width: 64%; height: 64%; opacity: .45; rotate: -24deg; } html.theme-prakriti .pk-of-empty-art .pk-icon { position: relative; color: rgb(var(--pk-forest)); } /* Closing band */ html.theme-prakriti .pk-of-close-wrap { padding-top: clamp(48px, 7vw, 96px); } html.theme-prakriti .pk-of-close { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4.4vw, 60px); border-radius: clamp(28px, 3vw, 44px); color: rgb(var(--pk-cream-ink)); background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-of-close .pk-leaves { z-index: -1; } html.theme-prakriti .pk-of-close-mandala { position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -10%; top: 50%; translate: 0 -50%; color: rgb(var(--pk-sun) / .16); } html.pk-motion.theme-prakriti .pk-of-close-mandala .pk-mandala { animation: pk-turn 90s linear infinite; } html.theme-prakriti .pk-of-close-copy { display: flex; flex-direction: column; gap: 10px; max-width: 620px; } html.theme-prakriti .pk-of-close h2 { font-family: var(--pk-font-display); font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; line-height: 1.06; letter-spacing: -.025em; } /* Phones: a shorter hero (buttons share a row) and a square feature photo. */ @media (max-width: 639.98px) { html.theme-prakriti .pk-of-hero-copy { gap: 14px; } html.theme-prakriti .pk-of-actions { gap: 8px; } html.theme-prakriti .pk-of-actions .pk-btn { height: 48px; padding-inline: 16px; gap: 8px; font-size: 14px; } html.theme-prakriti .pk-of-count-num { width: 52px; height: 56px; border-radius: 14px; } html.theme-prakriti .pk-of-stats { flex-wrap: nowrap; } html.theme-prakriti .pk-of-stats > div { padding-inline: 12px; } html.theme-prakriti .pk-of-stats dd { font-size: 21px; } html.theme-prakriti .pk-of-stats dt { font-size: 10px; letter-spacing: .06em; } html.theme-prakriti .pk-of-art { width: min(330px, 86vw); } html.theme-prakriti .pk-of-hero-seal { width: 62px; height: 62px; font-size: 15px; } html.theme-prakriti .pk-of-cap { padding: 6px 12px; } html.theme-prakriti .pk-of-cap strong { font-size: 13px; } html.theme-prakriti .pk-of-cap span { font-size: 12px; } html.theme-prakriti .pk-of-feature-media { width: 78%; } html.theme-prakriti .pk-of-feature-arch { aspect-ratio: 1 / 1; } html.theme-prakriti .pk-of-feature-seal { width: 70px; height: 70px; font-size: 17px; inset-inline-end: -18px; } html.theme-prakriti .pk-of-strip > span { height: 24px; padding-inline: 8px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-of-art, html.theme-prakriti .pk-of-window { translate: none; } } /* 28. Product page v2 (prakriti/product/ProductDetailsComponent) ------------------ Landing-style upgrade over §23: reading-progress bar, full-bleed arch photo with a mandala halo and side thumbnails, clip-path slide between photos, fullscreen viewer with tap-to-zoom, word-by-word title, counting price box, add-to-cart states + Buy now, sticky scroll-spy section nav replacing the tabs, overview + at-a-glance card, reviews band, rail arrows. */ /* Reading progress (CSS scroll timeline; absent where unsupported). */ html.theme-prakriti .pk-pdp-progress { display: none; } @keyframes pk-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @supports (animation-timeline: scroll()) { html.pk-motion.theme-prakriti .pk-pdp-progress { display: block; position: fixed; inset: 0 0 auto; z-index: 26; height: 3px; pointer-events: none; transform-origin: 0 50%; background: linear-gradient(90deg, rgb(var(--pk-accent)), rgb(var(--pk-sun))); animation: pk-progress linear both; animation-timeline: scroll(root); } html[dir="rtl"].pk-motion.theme-prakriti .pk-pdp-progress { transform-origin: 100% 50%; } } /* Gallery: thumbnails beside the stage on desktop, below it on phones. */ html.theme-prakriti .pk-pdp-media { display: flex; flex-direction: column; gap: 14px; } html.theme-prakriti .pk-pdp-stagewrap { position: relative; isolation: isolate; width: min(100%, calc(100vh - var(--header-h, 76px) - 90px)); min-width: min(100%, 320px); margin-inline: auto; } html.theme-prakriti .pk-pdp-stage { width: 100%; cursor: zoom-in; } html.theme-prakriti .pk-pdp-stage::after { content: ""; position: absolute; inset: 12px; z-index: 2; border-radius: inherit; border: 1px solid rgb(255 255 255 / .75); pointer-events: none; } html.theme-prakriti .pk-pdp-halo { position: absolute; inset: -9%; z-index: -1; color: rgb(var(--pk-accent) / .16); pointer-events: none; } html.theme-prakriti .pk-pdp-halo::before { content: ""; position: absolute; inset: 14%; border-radius: 999px; background: radial-gradient(closest-side, rgb(var(--pk-sun) / .22), transparent); filter: blur(10px); } html.pk-motion.theme-prakriti .pk-pdp-halo .pk-mandala { animation: pk-turn 140s linear infinite; } /* The photo fills the arch (product images are 1:1 padded, so cover never crops). */ html.theme-prakriti .pk-pdp-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; object-fit: cover; mix-blend-mode: normal; filter: none; cursor: zoom-in; } html.theme-prakriti .pk-pdp-img-ph { position: absolute; inset: 25%; width: auto; } html.theme-prakriti .pk-pdp-counter { z-index: 3; bottom: 22px; inset-inline-start: 26px; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-prakriti .pk-pdp-seal { z-index: 3; } html.theme-prakriti .pk-pdp-hint { z-index: 3; left: auto; transform: none; inset-inline-end: 22px; bottom: 20px; cursor: pointer; pointer-events: auto; transition: background-color .2s, color .2s, opacity .3s; } html.theme-prakriti .pk-pdp-stage:hover .pk-pdp-hint { opacity: 1; } html.theme-prakriti .pk-pdp-hint:hover { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-pdp-dots { position: absolute; z-index: 3; left: 50%; top: 18px; display: flex; gap: 6px; translate: -50% 0; } html.theme-prakriti .pk-pdp-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(255 255 255 / .7); box-shadow: 0 0 0 1px rgb(var(--pk-ink) / .12); transition: width .45s var(--pk-ease), background-color .3s; } html.theme-prakriti .pk-pdp-dots i.is-on { width: 20px; background: rgb(var(--pk-forest)); } @media (min-width: 1024px) { html.theme-prakriti .pk-pdp-dots { display: none; } html.theme-prakriti .pk-pdp-media.has-thumbs { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; align-items: center; } html.theme-prakriti .pk-pdp-media.has-thumbs .pk-pdp-thumbs { order: -1; flex-direction: column; justify-content: flex-start; margin: 0; max-height: calc(100vh - var(--header-h, 76px) - 90px); overflow: hidden auto; padding: 5px; scrollbar-width: none; } } @media (max-width: 1023.98px) { html.theme-prakriti .pk-pdp-stagewrap { width: 100%; } /* Phones: dots replace the counter at the foot of the arch; the hint shrinks to an icon. */ html.theme-prakriti .pk-pdp-dots { top: auto; bottom: 24px; } html.theme-prakriti .pk-pdp-stage:has(.pk-pdp-dots) .pk-pdp-counter { display: none; } html.theme-prakriti .pk-pdp-hint { width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; font-size: 0; bottom: 14px; inset-inline-end: 14px; } } html.pk-motion.theme-prakriti .pk-pdp-thumb { animation: pk-intro .7s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 70ms + 450ms); } html.theme-prakriti .pk-pdp-thumb.is-active { transform: scale(1.04); } /* Full circle: corners are clipped, so every overlay sits on the circle's axes. */ html.theme-prakriti .pk-pdp-stage { border-radius: 50%; } html.theme-prakriti .pk-pdp-stage::after { inset: 14px; border-radius: 50%; } html.theme-prakriti .pk-pdp-seal { top: 13%; inset-inline-end: 13%; } /* The counter would sit on the subject's head in a circle; thumbs (desktop) and dots (phones) show position. */ html.theme-prakriti .pk-pdp-stage .pk-pdp-counter { display: none; } html.theme-prakriti .pk-pdp-hint { left: 50%; inset-inline-end: auto; bottom: 22px; translate: -50% 0; white-space: nowrap; } html.theme-prakriti .pk-pdp-nav--prev { left: 14px; } html.theme-prakriti .pk-pdp-nav--next { right: 14px; } @media (max-width: 1023.98px) { html.theme-prakriti .pk-pdp-dots { bottom: 7%; } html.theme-prakriti .pk-pdp-hint { left: auto; translate: none; bottom: 13%; inset-inline-end: 13%; } } /* Photo change: the new one wipes in (clip-path) while the old one drifts away. */ .pk-slide-next-enter-active, .pk-slide-next-leave-active, .pk-slide-prev-enter-active, .pk-slide-prev-leave-active { transition: clip-path .8s cubic-bezier(.77, 0, .18, 1), transform 1s cubic-bezier(.22, 1, .36, 1), opacity .6s ease; } .pk-slide-next-enter-active, .pk-slide-prev-enter-active { z-index: 2 !important; } .pk-slide-next-enter-from { clip-path: inset(0 0 0 100%); transform: scale(1.14); } .pk-slide-prev-enter-from { clip-path: inset(0 100% 0 0); transform: scale(1.14); } .pk-slide-next-enter-to, .pk-slide-prev-enter-to { clip-path: inset(0 0 0 0); } .pk-slide-next-leave-to { transform: translateX(-10%) scale(.96); opacity: .2; } .pk-slide-prev-leave-to { transform: translateX(10%) scale(.96); opacity: .2; } /* Buy panel */ html.theme-prakriti .pk-pdp-toprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } html.theme-prakriti .pk-pdp-toprow .pk-pdp-rating { font-size: 13.5px; } html.theme-prakriti .pk-pdp-title { display: flex; flex-wrap: wrap; column-gap: .24em; margin-top: -4px; } html.theme-prakriti .pk-pdp-word { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } html.theme-prakriti .pk-pdp-word > span { display: inline-block; } @keyframes pk-word-up { from { opacity: 0; transform: translateY(110%) rotate(5deg); } to { opacity: 1; transform: none; } } html.pk-motion.theme-prakriti .pk-pdp-word > span { transform-origin: 0 100%; animation: pk-word-up 1s var(--pk-ease) both; animation-delay: calc(var(--pk-w, 0) * 90ms + 260ms); } html.theme-prakriti .pk-pdp-pricebox { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-radius: 22px; background: linear-gradient(120deg, rgb(var(--pk-sun) / .13), rgb(var(--pk-accent) / .05) 70%), rgb(var(--pk-surface) / .6); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-price { align-items: center; padding: 0; } html.theme-prakriti .pk-pdp-price strong { line-height: 1; } html.theme-prakriti .pk-pdp-off { display: inline-flex; align-items: center; height: 28px; padding-inline: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgb(var(--pk-clay)); box-shadow: 0 8px 18px -8px rgb(var(--pk-clay) / .8); } html.pk-motion.theme-prakriti .pk-pdp-off { animation: pk-off-pop .7s var(--pk-spring) .9s both; } @keyframes pk-off-pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } } html.theme-prakriti .pk-pdp-taxnote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; } html.theme-prakriti .pk-pdp-save { gap: 6px; height: 26px; font-size: 12.5px; } html.theme-prakriti .pk-pdp-cta { flex-direction: column; } html.theme-prakriti .pk-pdp-cta-row { display: flex; gap: 10px; } html.theme-prakriti .pk-pdp-add-in { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; } html.theme-prakriti .pk-pdp-add.is-adding:disabled { background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-pdp-add.is-added:disabled { background: rgb(22 140 74); box-shadow: 0 16px 34px -14px rgb(22 140 74 / .8); } html.theme-prakriti .pk-pdp-add.is-added .pk-icon { animation: pk-heart .5s var(--pk-spring); } html.theme-prakriti .pk-pdp-buynow { width: 100%; height: 54px; color: rgb(var(--pk-forest)); background: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--pk-forest)); } html.theme-prakriti .pk-pdp-buynow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--pk-forest)); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--pk-ease); } html.theme-prakriti .pk-pdp-buynow:hover:not(:disabled) { color: #fff; } html.theme-prakriti .pk-pdp-buynow:hover:not(:disabled)::before { transform: scaleX(1); transform-origin: 0 50%; } html.theme-prakriti .pk-pdp-buynow .pk-icon { transition: transform .4s var(--pk-ease); } html.theme-prakriti .pk-pdp-buynow:hover:not(:disabled) .pk-icon { transform: translateX(5px); } html.theme-prakriti .pk-pdp-buynow:disabled { opacity: .4; cursor: not-allowed; } html.theme-prakriti .pk-pdp-assure li { transition: transform .4s var(--pk-ease), box-shadow .3s, background-color .3s; } html.theme-prakriti .pk-pdp-assure li:hover { transform: translateY(-2px); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-assure-icon { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgb(var(--pk-accent) / .1); } /* Sticky section nav with a gliding pill; tucks under where the header was once it hides. */ html.theme-prakriti .pk-pdp-spy { position: sticky; z-index: 20; top: calc(var(--header-h, 76px) + 6px); padding-block: 8px; } html.theme-prakriti:has(.pk-nav.is-hidden) .pk-pdp-spy { top: 8px; } html.theme-prakriti .pk-pdp-spy-bar { position: relative; display: flex; gap: 4px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(var(--pk-surface) / .82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-spy-bar::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-pdp-spy-glider { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; border-radius: 999px; background: rgb(var(--pk-forest)); box-shadow: 0 8px 18px -8px rgb(var(--pk-forest) / .7); transition: transform .55s var(--pk-ease), width .55s var(--pk-ease), opacity .3s; } html.theme-prakriti .pk-pdp-spy-btn { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 18px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .3s; } html.theme-prakriti .pk-pdp-spy-btn:hover:not(.is-active) { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pdp-spy-btn.is-active { color: #fff; } html.theme-prakriti .pk-pdp-spy-btn em { display: grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; font-size: 11px; font-style: normal; background: rgb(var(--pk-ink) / .08); transition: background-color .3s; } html.theme-prakriti .pk-pdp-spy-btn.is-active em { background: rgb(255 255 255 / .2); } @media (max-width: 639.98px) { html.theme-prakriti .pk-pdp-spy-bar { margin-inline: 0; } html.theme-prakriti .pk-pdp-spy-btn { height: 36px; padding-inline: 14px; font-size: 13px; } } /* Overview: description beside a sticky at-a-glance card. */ html.theme-prakriti .pk-pdp-overview-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { html.theme-prakriti .pk-pdp-overview-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } } html.theme-prakriti .pk-pdp-overview-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; } html.theme-prakriti .pk-pdp-overview-copy .pk-prose { font-size: 17px; } html.theme-prakriti .pk-pdp-glance { padding: clamp(20px, 2.4vw, 28px); border-radius: 28px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } @media (min-width: 1024px) { html.theme-prakriti .pk-pdp-glance { position: sticky; top: calc(var(--header-h, 76px) + 90px); } } html.theme-prakriti .pk-pdp-glance h3 { display: flex; align-items: center; gap: 8px; font-family: var(--pk-font-display); font-size: 19px; font-weight: 500; color: rgb(var(--pk-forest)); } html.theme-prakriti .pk-pdp-glance h3 .pk-icon { color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-pdp-glance dl { display: flex; flex-direction: column; margin-top: 12px; } html.theme-prakriti .pk-pdp-glance-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 13px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-pdp-glance-row dt { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13.5px; text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pdp-glance-row dt .pk-icon { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-pdp-glance-row dd { min-width: 0; font-size: 14px; font-weight: 600; text-align: end; overflow-wrap: anywhere; color: rgb(var(--pk-ink)); } /* Reviews band */ html.theme-prakriti .pk-pdp-reviews-sec { background: rgb(var(--pk-surface)); border-radius: clamp(28px, 4vw, 48px); margin-inline: clamp(0px, 1.5vw, 20px); } html.theme-prakriti .pk-reviews-summary { box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-reviews-summary strong { font-variant-numeric: tabular-nums; } @property --pk-rate { syntax: ""; inherits: true; initial-value: 0; } html.theme-prakriti .pk-stars--grow { transition: --pk-rate 1.4s var(--pk-ease) .3s; } html.pk-motion.theme-prakriti .pk-reveal:not(.is-in) .pk-stars--grow { --pk-rate: 0 !important; } html.theme-prakriti .pk-review { animation: none; transition: transform .4s var(--pk-ease), box-shadow .3s; } html.theme-prakriti .pk-review:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } /* Dock: struck-through old price beside the live one. */ html.theme-prakriti .pk-dock-text del { margin-inline-start: 8px; font-family: inherit; font-size: 12px; font-weight: 400; color: rgb(var(--pk-muted)); } /* Fullscreen viewer (teleported to body). */ html.pk-viewer-open { overflow: hidden; } html.theme-prakriti .pk-viewer { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 16px clamp(16px, 4vw, 48px) 20px; color: rgb(var(--pk-cream-ink)); background: rgb(14 28 21 / .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.theme-prakriti .pk-viewer-bar { display: flex; align-items: center; gap: 16px; } html.theme-prakriti .pk-viewer-bar strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-family: var(--pk-font-display); font-size: 18px; font-weight: 500; text-transform: capitalize; } html.theme-prakriti .pk-viewer-count { min-width: 48px; font-family: var(--pk-font-display); font-size: 16px; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-viewer-count small { opacity: .6; font-size: 12px; } html.theme-prakriti .pk-viewer-btn { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); transition: background-color .2s, color .2s, transform .35s var(--pk-spring); } html.theme-prakriti .pk-viewer-btn:hover { color: rgb(var(--pk-forest)); background: rgb(var(--pk-cream-ink)); } html.theme-prakriti .pk-viewer-btn:active { transform: scale(.9); } html.theme-prakriti .pk-viewer-stage { position: relative; overflow: hidden; border-radius: 24px; cursor: zoom-in; touch-action: none; } html.theme-prakriti .pk-viewer-stage.is-zoomed { cursor: zoom-out; } html.theme-prakriti .pk-viewer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; transition: transform .5s var(--pk-ease); } html.theme-prakriti .pk-viewer-stage.is-zoomed .pk-viewer-img { transform: scale(2.2); transition: transform .5s var(--pk-ease), transform-origin .12s linear; } html.theme-prakriti .pk-viewer-nav { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; } html.theme-prakriti .pk-viewer-nav--prev { inset-inline-start: clamp(10px, 2vw, 28px); } html.theme-prakriti .pk-viewer-nav--next { inset-inline-end: clamp(10px, 2vw, 28px); } html[dir="rtl"].theme-prakriti .pk-viewer-nav .pk-icon { transform: scaleX(-1); } html.theme-prakriti .pk-viewer-thumbs { display: flex; justify-content: center; gap: 10px; overflow-x: auto; padding: 4px; scrollbar-width: none; } html.theme-prakriti .pk-viewer-thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: 14px; overflow: hidden; opacity: .45; transition: opacity .25s, box-shadow .25s, transform .35s var(--pk-ease); } html.theme-prakriti .pk-viewer-thumb img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-viewer-thumb:hover { opacity: .8; } html.theme-prakriti .pk-viewer-thumb.is-active { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px rgb(var(--pk-sun)); } @media (max-width: 639.98px) { html.theme-prakriti .pk-viewer-nav { display: none; } html.theme-prakriti .pk-viewer { padding-inline: 10px; } } .pk-viewer-enter-active, .pk-viewer-leave-active { transition: opacity .35s ease; } .pk-viewer-enter-active .pk-viewer-stage, .pk-viewer-leave-active .pk-viewer-stage { transition: transform .55s cubic-bezier(.22, 1, .36, 1); } .pk-viewer-enter-from, .pk-viewer-leave-to { opacity: 0; } .pk-viewer-enter-from .pk-viewer-stage, .pk-viewer-leave-to .pk-viewer-stage { transform: scale(.92); } @media (prefers-reduced-motion: reduce) { .pk-slide-next-enter-from, .pk-slide-prev-enter-from { clip-path: none; transform: none; opacity: 0; } .pk-slide-next-leave-to, .pk-slide-prev-leave-to { transform: none; opacity: 0; } html.theme-prakriti .pk-pdp-spy, html.theme-prakriti .pk-pdp-spy-glider { transition: none; } } /* 29. Checkout (prakriti/checkout/*) ------------------------------------------ Default checkout logic, Prakriti markup. Landing-style backdrop (glows, turning mandala, falling leaves that lean from the pointer), blooming title, a glass rail where a vine grows to the current step, selectable tiles with an ink ripple, in-place coupon + address drawer, a perforated receipt with count-up total, a leaf burst when the order is ready, mobile pay bar with a progress ring, and a mandala veil while the gateway loads. Prefix pk-ck- (pk-co-* is the cart drawer's — shared only for .pk-co-qty and .pk-co-spinner). */ html.theme-prakriti { --pk-good: 47 122 76; } html.theme-prakriti:has(.pk-ck) { --pk-tabbar-h: 0px; } html.theme-prakriti .pk-ck-shell { --pk-px: 0; --pk-py: 0; position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(8px, 2vw, 24px) clamp(120px, 12vw, 104px); } html.theme-prakriti .pk-ck-wrap { position: relative; z-index: 1; } /* Backdrop */ html.theme-prakriti .pk-ck-ambient { position: absolute; inset: 0 0 auto; height: 780px; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); } html.theme-prakriti .pk-ck-ambient .pk-glow--sage { top: -18vw; } html.theme-prakriti .pk-ck-ambient .pk-glow--sun { bottom: auto; top: 160px; } html.theme-prakriti .pk-ck-mandala { position: absolute; top: -220px; inset-inline-end: -180px; width: clamp(420px, 52vw, 720px); aspect-ratio: 1; color: rgb(var(--pk-accent) / .13); translate: calc(var(--pk-px) * -24px) calc(var(--pk-py) * -18px); transition: translate 1.2s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-ck-mandala .pk-mandala { animation: pk-turn 160s linear infinite; } html.pk-motion.theme-prakriti .pk-ck-mandala { animation: pk-ck-mandala-in 2.4s var(--pk-ease) both; } @keyframes pk-ck-mandala-in { from { opacity: 0; scale: .7; rotate: -40deg; } } html.theme-prakriti .pk-ck-ambient .pk-leaves { -webkit-mask-image: linear-gradient(90deg, #000 0 14%, transparent 30% 70%, #000 86%); mask-image: linear-gradient(90deg, #000 0 14%, transparent 30% 70%, #000 86%); } /* Top: back + header */ html.theme-prakriti .pk-ck-top { display: flex; align-items: flex-start; gap: 18px; margin-bottom: clamp(22px, 3.4vw, 40px); } html.theme-prakriti .pk-ck-back { flex-shrink: 0; width: 50px; height: 50px; margin-top: 2px; } html.theme-prakriti .pk-ck-back .pk-icon { transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-ck-back:hover .pk-icon { transform: translateX(-3px); } html[dir="rtl"].theme-prakriti .pk-ck-back .pk-icon { scale: -1 1; } html.theme-prakriti .pk-ck-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; } html.theme-prakriti .pk-ck-head .pk-crumbs span[aria-current] { color: rgb(var(--pk-ink)); font-weight: 600; text-transform: capitalize; } html.theme-prakriti .pk-ck-eyebrow { padding: 6px 12px 6px 10px; border-radius: 999px; background: rgb(var(--pk-surface) / .8); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-prakriti .pk-ck-live { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--pk-good)); } html.theme-prakriti .pk-ck-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-ck-title { display: flex; flex-wrap: wrap; gap: 0 .26em; font-family: var(--pk-font-display); font-size: clamp(40px, 6.6vw, 84px); line-height: .98; font-weight: 500; letter-spacing: -.035em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ck-title .is-accent { font-style: italic; color: rgb(var(--pk-accent)); padding-inline-end: .06em; } html.theme-prakriti .pk-ck-lede { max-width: 560px; font-size: 15.5px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-promises { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } html.theme-prakriti .pk-ck-promises li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding-inline: 12px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .75); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-promises .pk-icon { color: rgb(var(--pk-accent)); } /* Layout */ html.theme-prakriti .pk-ck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 1024px) { html.theme-prakriti .pk-ck { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; } } @media (min-width: 1280px) { html.theme-prakriti .pk-ck { grid-template-columns: minmax(0, 1fr) 430px; gap: 44px; } } html.theme-prakriti .pk-ck-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; } html.theme-prakriti .pk-ck-side { align-self: stretch; } html.theme-prakriti .pk-ck-sticky { display: flex; flex-direction: column; gap: 14px; } @media (min-width: 1024px) { html.theme-prakriti .pk-ck-sticky { position: sticky; top: 20px; transition: top .5s var(--pk-ease); } html.theme-prakriti:has(.pk-nav:not(.is-hidden)) .pk-ck-sticky { top: calc(var(--header-h, 76px) + 16px); } } /* Progress rail — glass; a vine grows dot to dot with a leaf at its tip. */ html.theme-prakriti .pk-ck-rail-wrap { position: relative; z-index: 5; padding: 14px 16px 10px; border-radius: 26px; background: rgb(var(--pk-surface) / .78); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); } html.theme-prakriti .pk-ck-rail { --pk-rail: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); } html.theme-prakriti .pk-ck-rail::before, html.theme-prakriti .pk-ck-rail::after { content: ""; position: absolute; top: 21px; height: 3px; inset-inline: calc(100% / 6); border-radius: 3px; } html.theme-prakriti .pk-ck-rail::before { background: repeating-linear-gradient(90deg, rgb(var(--pk-line)) 0 6px, transparent 6px 11px); } html.theme-prakriti .pk-ck-rail::after { background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform: scaleX(var(--pk-rail)); transform-origin: left; transition: transform 1.1s var(--pk-ease); } html[dir="rtl"].theme-prakriti .pk-ck-rail::after { transform-origin: right; } html.theme-prakriti .pk-ck-rail-sprout { position: absolute; z-index: 2; top: 2px; width: 22px; height: 22px; margin-inline-start: -4px; color: var(--pk-leaf-1); pointer-events: none; inset-inline-start: calc(100% / 6 + (100% * 2 / 3) * var(--pk-rail)); opacity: calc(var(--pk-rail) * 40); transform-origin: 20% 100%; rotate: -24deg; transition: inset-inline-start 1.1s var(--pk-ease), opacity .3s; } html.pk-motion.theme-prakriti .pk-ck-rail-sprout { animation: pk-ck-sway 2.8s ease-in-out infinite alternate; } @keyframes pk-ck-sway { to { rotate: 8deg; } } html.theme-prakriti .pk-ck-rail li:not(.pk-ck-rail-sprout) { position: relative; z-index: 1; display: flex; justify-content: center; } html.theme-prakriti .pk-ck-rail button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 6px; border-radius: 14px; } html.theme-prakriti .pk-ck-rail-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); transition: background-color .5s var(--pk-ease), color .3s, box-shadow .5s, transform .6s var(--pk-spring); } html.theme-prakriti .pk-ck-rail-label { font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-muted)); transition: color .3s; } html.theme-prakriti .pk-ck-rail button:hover .pk-ck-rail-dot { transform: translateY(-3px); } html.theme-prakriti .pk-ck-rail .is-current .pk-ck-rail-dot { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 6px rgb(var(--pk-sun) / .22); transform: scale(1.08); } html.pk-motion.theme-prakriti .pk-ck-rail .is-current:not(.is-done) .pk-ck-rail-dot { animation: pk-ck-beat 2.4s ease-in-out infinite; } @keyframes pk-ck-beat { 50% { box-shadow: 0 0 0 11px rgb(var(--pk-sun) / .08); } } html.theme-prakriti .pk-ck-rail .is-current .pk-ck-rail-label, html.theme-prakriti .pk-ck-rail .is-done .pk-ck-rail-label { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ck-rail .is-done .pk-ck-rail-dot { color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 10px 20px -10px rgb(var(--pk-forest) / .9); } html.theme-prakriti .pk-ck-rail-meta { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgb(var(--pk-line)); text-align: center; font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-rail-meta strong { font-family: var(--pk-font-display); font-weight: 600; color: rgb(var(--pk-ink)); font-variant-numeric: tabular-nums; } @media (max-width: 479.98px) { html.theme-prakriti .pk-ck-rail-meta { display: none; } html.theme-prakriti .pk-ck-rail-wrap { padding-bottom: 12px; } } /* Drawn tick (rail dots, step badges) */ html.theme-prakriti .pk-ck-tick { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } html.theme-prakriti .pk-ck-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; } html.pk-motion.theme-prakriti .pk-ck-tick path { animation: pk-ck-draw .6s var(--pk-ease) .12s backwards; } @keyframes pk-ck-draw { from { stroke-dashoffset: 1; } } /* Cards */ html.theme-prakriti .pk-ck-card { position: relative; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--pk-radius); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .5s var(--pk-ease); } /* Done: a stem grows down the leading edge. */ html.theme-prakriti .pk-ck-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--pk-ease); } html.theme-prakriti .pk-ck-card.is-done::before { transform: scaleY(1); } html.theme-prakriti .pk-ck-card.is-attention { animation: pk-ck-nudge .6s var(--pk-ease); box-shadow: 0 0 0 6px rgb(var(--pk-clay) / .14), inset 0 0 0 1.5px rgb(var(--pk-clay) / .7); } @keyframes pk-ck-nudge { 15%, 55% { transform: translateX(-7px); } 35%, 75% { transform: translateX(7px); } } html.theme-prakriti .pk-ck-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; } html.theme-prakriti .pk-ck-step { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px 999px 14px 14px; font-family: var(--pk-font-display); font-size: 15px; font-weight: 600; color: rgb(var(--pk-cream-ink)); background: rgb(var(--pk-forest)); transition: background-color .5s var(--pk-ease), color .3s; } html.theme-prakriti .pk-ck-card.is-done .pk-ck-step { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ck-card-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; text-align: start; } html.theme-prakriti .pk-ck-card-title h2 { font-family: var(--pk-font-display); font-size: clamp(19px, 2vw, 23px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ck-card-title p { font-size: 13.5px; color: rgb(var(--pk-muted)); } /* Delivery / pick-up switch */ html.theme-prakriti .pk-ck-switch { --pk-x: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-ck-switch-glider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: rgb(var(--pk-forest)); box-shadow: 0 8px 18px -8px rgb(var(--pk-forest) / .8); transform: translateX(calc(var(--pk-x) * 100%)); transition: transform .6s var(--pk-spring); } html[dir="rtl"].theme-prakriti .pk-ck-switch-glider { left: auto; right: 4px; transform: translateX(calc(var(--pk-x) * -100%)); } html.theme-prakriti .pk-ck-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding-inline: 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .35s; } html.theme-prakriti .pk-ck-switch button.is-on { color: #fff; } @media (max-width: 639.98px) { html.theme-prakriti .pk-ck-switch { width: 100%; } } /* Selectable tiles (outlets, payment) */ html.theme-prakriti .pk-ck-tiles { display: grid; gap: 12px; } @media (min-width: 640px) { html.theme-prakriti .pk-ck-tiles--2 { grid-template-columns: 1fr 1fr; } } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card) { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; border-radius: 20px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .35s var(--pk-ease), transform .45s var(--pk-ease), background-color .35s; animation: pk-ck-rise .8s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 80ms); } html.theme-prakriti .pk-ck-tile { display: flex; align-items: center; gap: 14px; padding: 16px; } @keyframes pk-ck-rise { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(var(--pk-sun) / .22) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; } /* Ink ripple from the press point (set by the component). */ html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card)::after { content: ""; position: absolute; z-index: -1; left: var(--pk-rx, 50%); top: var(--pk-ry, 50%); width: 24px; height: 24px; margin: -12px; border-radius: 999px; background: rgb(var(--pk-accent) / .22); opacity: 0; pointer-events: none; } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card).is-rippling::after { animation: pk-ck-ripple .75s var(--pk-ease); } @keyframes pk-ck-ripple { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(30); } } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card):hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-ink) / .22); } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card):focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .2), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card).is-on { background: linear-gradient(135deg, rgb(var(--pk-accent) / .07), rgb(var(--pk-sun) / .08)); box-shadow: 0 14px 34px -20px rgb(var(--pk-accent) / .9), inset 0 0 0 2px rgb(var(--pk-accent)); } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card).is-on::before { animation: pk-ck-sweep 1s var(--pk-ease); } @keyframes pk-ck-sweep { to { transform: translateX(100%); } } html.theme-prakriti .pk-ck-tile-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px 999px 14px 14px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); transition: color .3s, background-color .3s, transform .6s var(--pk-spring); } html.theme-prakriti .pk-ck-tile:hover .pk-ck-tile-icon { transform: translateY(-2px) rotate(-4deg); } html.theme-prakriti .pk-ck-tile.is-on .pk-ck-tile-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transform: rotate(-8deg) scale(1.06); } html.theme-prakriti .pk-ck-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.theme-prakriti .pk-ck-tile-text strong { font-size: 15px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-ck-tile-text small { font-size: 12.5px; line-height: 1.45; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-radio { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); transition: background-color .3s, box-shadow .3s, color .2s; } html.theme-prakriti .pk-ck-radio .pk-icon { transform: scale(0); transition: transform .5s var(--pk-spring); } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card).is-on .pk-ck-radio { color: #fff; background: rgb(var(--pk-accent)); box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .15); } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card).is-on .pk-ck-radio .pk-icon { transform: scale(1); } html.theme-prakriti .pk-ck-empty { padding: 16px; border-radius: 16px; font-size: 14px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); } /* Skeletons */ html.theme-prakriti .pk-ck-skel { display: block; border-radius: 20px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)) 25%, rgb(var(--pk-bg)) 50%, rgb(var(--pk-bg-2)) 75%); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } html.theme-prakriti .pk-ck-skel--tile { height: 80px; } html.theme-prakriti .pk-ck-skel--card { height: 136px; } /* Address picker */ html.theme-prakriti .pk-ck-addr + .pk-ck-toggle { margin-top: 16px; } html.theme-prakriti .pk-ck-addr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } html.theme-prakriti .pk-ck-addr-head h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding-inline: 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .3); } html.theme-prakriti .pk-ck-addr-grid { position: relative; display: grid; gap: 12px; } @media (min-width: 640px) { html.theme-prakriti .pk-ck-addr-grid { grid-template-columns: 1fr 1fr; } } html.theme-prakriti .pk-ck-addr-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; } html.theme-prakriti .pk-ck-addr-card.is-flash { animation: pk-ck-flash 1.3s var(--pk-ease); } @keyframes pk-ck-flash { 0% { box-shadow: 0 0 0 0 rgb(var(--pk-accent) / .5), inset 0 0 0 2px rgb(var(--pk-accent)); } 100% { box-shadow: 0 0 0 18px rgb(var(--pk-accent) / 0), inset 0 0 0 2px rgb(var(--pk-accent)); } } html.theme-prakriti .pk-ck-addr-card .pk-ck-radio { margin-top: 1px; } html.theme-prakriti .pk-ck-addr-body { flex: 1; min-width: 0; padding-inline-end: 30px; } html.theme-prakriti .pk-ck-addr-name { display: block; font-size: 15px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-ck-addr-line { margin-top: 4px; font-size: 13px; line-height: 1.55; color: rgb(var(--pk-muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html.theme-prakriti .pk-ck-addr-phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ck-addr-edit { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: rgb(var(--pk-muted)); transition: background-color .2s, color .2s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-ck-addr-edit:hover { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); transform: rotate(-12deg); } html.theme-prakriti .pk-ck-addr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 124px; padding: 16px; border-radius: 20px; text-align: center; color: rgb(var(--pk-ink)); border: 1.5px dashed rgb(var(--pk-accent) / .35); background: rgb(var(--pk-bg) / .5); transition: border-color .3s, background-color .3s, transform .45s var(--pk-ease); } html.theme-prakriti .pk-ck-addr-add:hover { border-color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .05); transform: translateY(-3px); } html.theme-prakriti .pk-ck-addr-add strong { font-size: 14px; font-weight: 700; } html.theme-prakriti .pk-ck-addr-add small { font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-addr-add-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .6s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-ck-addr-add:hover .pk-ck-addr-add-icon { transform: rotate(90deg); color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } /* Billing switch */ html.theme-prakriti .pk-ck-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; text-align: start; font-size: 14px; font-weight: 500; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); transition: background-color .3s; } html.theme-prakriti .pk-ck-toggle:hover { background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-ck-toggle-track { flex-shrink: 0; position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgb(var(--pk-line)); transition: background-color .35s var(--pk-ease); } html.theme-prakriti .pk-ck-toggle-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgb(27 45 35 / .25); transition: transform .5s var(--pk-spring); } html.theme-prakriti .pk-ck-toggle[aria-checked="true"] .pk-ck-toggle-track { background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ck-toggle[aria-checked="true"] .pk-ck-toggle-track i { transform: translateX(18px); } html[dir="rtl"].theme-prakriti .pk-ck-toggle-track i { left: auto; right: 3px; } html[dir="rtl"].theme-prakriti .pk-ck-toggle[aria-checked="true"] .pk-ck-toggle-track i { transform: translateX(-18px); } /* Collapse: grid-rows trick animates to the content's real height. */ html.theme-prakriti .pk-ck-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--pk-ease), opacity .45s; } html.theme-prakriti .pk-ck-collapse > div { min-height: 0; overflow: hidden; } html.theme-prakriti .pk-ck-collapse.is-open { grid-template-rows: 1fr; opacity: 1; } html.theme-prakriti .pk-ck-toggle + .pk-ck-collapse.is-open > div { padding-top: 18px; } /* Bag */ html.theme-prakriti .pk-ck-bag { padding: 0; overflow: clip; } html.theme-prakriti .pk-ck-bag::before { display: none; } html.theme-prakriti .pk-ck-bag-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: clamp(18px, 2.6vw, 28px); text-align: start; border-radius: inherit; transition: background-color .3s; } html.theme-prakriti .pk-ck-bag-head:hover { background: rgb(var(--pk-bg) / .6); } html.theme-prakriti .pk-ck-bag-head .pk-ck-card-title { min-width: 0; } html.theme-prakriti .pk-ck-thumbs { display: flex; flex-shrink: 0; } html.theme-prakriti .pk-ck-thumb { width: 44px; border-radius: 999px; overflow: hidden; background: rgb(var(--pk-bg-2)); box-shadow: 0 0 0 2.5px rgb(var(--pk-surface)); transition: transform .5s var(--pk-spring); } html.theme-prakriti .pk-ck-thumb + .pk-ck-thumb { margin-inline-start: -14px; } html.theme-prakriti .pk-ck-bag-head:hover .pk-ck-thumb:nth-child(1) { transform: rotate(-10deg) translateX(-5px); } html.theme-prakriti .pk-ck-bag-head:hover .pk-ck-thumb:nth-child(3) { transform: rotate(10deg) translateX(5px); } html.theme-prakriti .pk-ck-thumb--more { display: grid; place-items: center; height: 44px; font-size: 11.5px; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .4); } @media (max-width: 479.98px) { html.theme-prakriti .pk-ck-thumbs { display: none; } } html.theme-prakriti .pk-ck-caret-orb { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgb(var(--pk-bg-2)); transition: background-color .3s, color .3s; } html.theme-prakriti .pk-ck-bag.is-open .pk-ck-caret-orb { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-ck-caret { transition: transform .5s var(--pk-ease); } html.theme-prakriti .pk-ck-bag.is-open .pk-ck-caret, html.theme-prakriti .pk-ck-coupon.is-open .pk-ck-caret { transform: rotate(180deg); } html.theme-prakriti .pk-ck-lines { position: relative; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-line { display: flex; gap: 16px; padding: 18px clamp(18px, 2.6vw, 28px); width: 100%; background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-ck-line + .pk-ck-line { border-top: 1px solid rgb(var(--pk-line)); } html.pk-motion.theme-prakriti .pk-ck-bag.is-open .pk-ck-line { animation: pk-ck-rise .7s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 70ms + 120ms); } html.theme-prakriti .pk-ck-line-media { position: relative; flex-shrink: 0; width: 78px; } html.theme-prakriti .pk-ck-line-media > :first-child { border-radius: 999px 999px 18px 18px; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #fff, var(--pk-tone-1)); } html.theme-prakriti .pk-ck-line-media em { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 24px; height: 24px; padding-inline: 6px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 2.5px rgb(var(--pk-surface)); } html.theme-prakriti .pk-ck-line-body { flex: 1; min-width: 0; } html.theme-prakriti .pk-ck-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } html.theme-prakriti .pk-ck-line-top strong { font-size: 15px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-ck-line-price { flex-shrink: 0; font-family: var(--pk-font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ck-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-line-meta del { color: rgb(var(--pk-muted) / .7); } html.theme-prakriti .pk-ck-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } html.theme-prakriti .pk-ck-line .pk-co-qty { background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-ck-line .pk-co-qty button:hover:not(:disabled) { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-ck-line-remove { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgb(var(--pk-muted)); transition: color .2s, background-color .2s; } html.theme-prakriti .pk-ck-line-remove:hover { color: rgb(var(--pk-danger)); background: rgb(var(--pk-danger) / .08); } @media (max-width: 479.98px) { html.theme-prakriti .pk-ck-line-remove span { display: none; } } /* Receipt: coupon + summary in one card with a perforated seam. The notches are real holes (each half is masked), so depth comes from drop-shadow filters. */ html.theme-prakriti .pk-ck-receipt { --pk-notch: 12px; position: relative; filter: drop-shadow(0 0 .5px rgb(var(--pk-ink) / .3)) drop-shadow(0 16px 24px rgb(var(--pk-ink) / .1)); } html.theme-prakriti .pk-ck-receipt > .pk-ck-coupon, html.theme-prakriti .pk-ck-receipt .pk-ck-sum { background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-ck-coupon { position: relative; padding: 8px; border-radius: var(--pk-radius) var(--pk-radius) 0 0; -webkit-mask: radial-gradient(circle var(--pk-notch) at left bottom, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--pk-notch) at right bottom, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--pk-notch) at left bottom, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--pk-notch) at right bottom, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) right / 51% 100% no-repeat; } html.theme-prakriti .pk-ck-receipt .pk-ck-sum { border-radius: 0 0 var(--pk-radius) var(--pk-radius); -webkit-mask: radial-gradient(circle var(--pk-notch) at left top, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--pk-notch) at right top, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--pk-notch) at left top, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) left / 51% 100% no-repeat, radial-gradient(circle var(--pk-notch) at right top, #0000 calc(var(--pk-notch) - .5px), #000 var(--pk-notch)) right / 51% 100% no-repeat; } html.theme-prakriti .pk-ck-coupon::after { content: ""; position: absolute; left: calc(var(--pk-notch) + 8px); right: calc(var(--pk-notch) + 8px); bottom: 0; border-bottom: 2px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-coupon-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 20px; text-align: start; transition: background-color .3s; } html.theme-prakriti button.pk-ck-coupon-row:hover { background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-ck-coupon-orb { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px 999px 14px 14px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .35); transition: transform .6s var(--pk-spring); } html.theme-prakriti button.pk-ck-coupon-row:hover .pk-ck-coupon-orb { transform: rotate(-14deg) scale(1.08); } html.theme-prakriti .pk-ck-coupon-orb.is-good { color: #fff; background: rgb(var(--pk-good)); animation: pk-ck-stamp .6s var(--pk-spring); } @keyframes pk-ck-stamp { from { transform: scale(0) rotate(-30deg); } } html.theme-prakriti .pk-ck-coupon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } html.theme-prakriti .pk-ck-coupon-text strong { font-size: 14.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ck-coupon-text code { margin-inline-start: 4px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgb(var(--pk-good)); background: rgb(var(--pk-good) / .1); } html.theme-prakriti .pk-ck-coupon-text small { font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-coupon-remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: rgb(var(--pk-muted)); transition: color .2s, background-color .2s; } html.theme-prakriti .pk-ck-coupon-remove:hover { color: rgb(var(--pk-danger)); background: rgb(var(--pk-danger) / .08); } html.theme-prakriti .pk-ck-coupon-form { display: flex; gap: 8px; padding: 6px 10px 4px; } html.theme-prakriti .pk-ck-coupon-form input { flex: 1; min-width: 0; height: 46px; padding-inline: 16px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .25s; } html.theme-prakriti .pk-ck-coupon-form input::placeholder { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-coupon-form input:focus { outline: none; box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .14), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-ck-coupon-form input.is-invalid { box-shadow: 0 0 0 4px rgb(var(--pk-danger) / .12), inset 0 0 0 1.5px rgb(var(--pk-danger)); animation: pk-ck-nudge .45s var(--pk-ease); } html.theme-prakriti .pk-ck-coupon-error { padding: 6px 16px 0; font-size: 12.5px; color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-ck-tickets { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding: 10px; } html.theme-prakriti .pk-ck-ticket { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 16px; text-align: start; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .25s, transform .35s var(--pk-ease); } html.theme-prakriti .pk-ck-ticket:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-ck-ticket-code { flex-shrink: 0; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .25); border: 1px dashed rgb(var(--pk-sun-ink) / .5); } html.theme-prakriti .pk-ck-ticket-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ck-ticket-text small { color: rgb(var(--pk-muted)); font-size: 11.5px; } html.theme-prakriti .pk-ck-ticket-cta { font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-accent)); } /* Summary */ html.theme-prakriti .pk-ck-sum { padding: 20px 22px 22px; } html.theme-prakriti .pk-ck-meter { margin-bottom: 16px; padding: 12px 14px 16px; border-radius: 18px; background: rgb(var(--pk-bg)); transition: background-color .5s; } html.theme-prakriti .pk-ck-meter.is-done { background: rgb(var(--pk-good) / .09); } html.theme-prakriti .pk-ck-meter-text { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ck-meter.is-done .pk-ck-meter-text { color: rgb(var(--pk-good)); font-weight: 700; } html.theme-prakriti .pk-ck-meter-track { position: relative; height: 6px; margin-top: 14px; border-radius: 999px; background: rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-meter-fill { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform-origin: left; transition: transform 1s var(--pk-ease); } html.theme-prakriti .pk-ck-meter-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); background-size: 220% 100%; } html.pk-motion.theme-prakriti .pk-ck-meter:not(.is-done) .pk-ck-meter-fill::after { animation: pk-sheen 2.4s linear infinite; } html.theme-prakriti .pk-ck-meter.is-done .pk-ck-meter-fill { background: rgb(var(--pk-good)); } html.theme-prakriti .pk-ck-meter-truck { position: absolute; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-inline-start: -14px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transform: translateY(-50%); box-shadow: 0 0 0 3px rgb(var(--pk-surface)); transition: inset-inline-start 1s var(--pk-ease), background-color .4s; } html.pk-motion.theme-prakriti .pk-ck-meter:not(.is-done) .pk-ck-meter-truck .pk-icon { animation: pk-ck-bump .7s ease-in-out infinite; } @keyframes pk-ck-bump { 50% { transform: translateY(-1.5px); } } html.theme-prakriti .pk-ck-meter.is-done .pk-ck-meter-truck { background: rgb(var(--pk-good)); } html.theme-prakriti .pk-ck-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } html.theme-prakriti .pk-ck-sum-head h3 { font-family: var(--pk-font-display); font-size: 19px; font-weight: 500; letter-spacing: -.02em; text-transform: capitalize; } html.theme-prakriti .pk-ck-rows { display: flex; flex-direction: column; gap: 11px; } html.theme-prakriti .pk-ck-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; } html.theme-prakriti .pk-ck-row dt { text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-row dd { font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); overflow: hidden; } html.theme-prakriti .pk-ck-row dd > span { display: inline-block; } html.theme-prakriti .pk-ck-row.is-good dd, html.theme-prakriti .pk-ck-free { color: rgb(var(--pk-good)); text-transform: capitalize; } html.theme-prakriti .pk-ck-row .is-muted { color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-total span { font-size: 14px; font-weight: 700; text-transform: capitalize; } html.theme-prakriti .pk-ck-total strong { font-family: var(--pk-font-display); font-size: 34px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ck-saved { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; color: rgb(var(--pk-good)); background: rgb(var(--pk-good) / .09); } /* Place order */ html.theme-prakriti .pk-ck-place { width: 100%; height: 62px; justify-content: flex-start; padding-inline: 24px 8px; font-size: 16px; } html.theme-prakriti .pk-ck-place-wrap { position: relative; } html.theme-prakriti .pk-ck-place::before { border-radius: inherit; } html.theme-prakriti .pk-ck-place > span:nth-child(2) { flex: 1; text-align: start; } html.theme-prakriti .pk-ck-place-amt { padding: 0 16px; height: 46px; display: inline-flex; align-items: center; border-radius: 999px; font-variant-numeric: tabular-nums; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transition: transform .4s var(--pk-spring); } html.theme-prakriti .pk-ck-place:hover .pk-ck-place-amt { transform: scale(1.04); } html.theme-prakriti .pk-ck-place:hover .pk-icon { transform: none; } html.pk-motion.theme-prakriti .pk-ck-place.is-ready { animation: pk-ck-glow 2.8s ease-in-out infinite; } @keyframes pk-ck-glow { 50% { box-shadow: 0 20px 44px -14px rgb(var(--pk-forest) / .85), 0 0 0 7px rgb(var(--pk-sun) / .18); } } html.theme-prakriti .pk-ck-place.is-placing { justify-content: center; } html.theme-prakriti .pk-ck-place.is-placing > span:nth-child(2) { flex: 0 1 auto; } html.theme-prakriti .pk-ck-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; } html.theme-prakriti .pk-ck-burst .pk-leaf-svg { position: absolute; width: 18px; height: 18px; margin: -9px; color: var(--pk-leaf-1); opacity: 0; animation: pk-ck-burst 1.4s var(--pk-ease) forwards; animation-delay: calc(var(--pk-n) * 16ms); } html.theme-prakriti .pk-ck-burst .pk-leaf-svg:nth-child(3n) { color: var(--pk-leaf-5); } html.theme-prakriti .pk-ck-burst .pk-leaf-svg:nth-child(3n + 1) { color: var(--pk-leaf-3); } @keyframes pk-ck-burst { 0% { opacity: 1; transform: rotate(calc(var(--pk-n) * 30deg)) translateY(0) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--pk-n) * 30deg + 80deg)) translateY(-90px) scale(1.1); } } html.theme-prakriti .pk-ck-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-muted)); } html.pk-motion.theme-prakriti .pk-ck-hint:not(.is-ready) .pk-icon { animation: pk-ck-bob 1.6s ease-in-out infinite; } html.theme-prakriti .pk-ck-hint.is-ready { color: rgb(var(--pk-good)); } @keyframes pk-ck-bob { 50% { transform: translateY(-3px); } } html.theme-prakriti .pk-ck-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; } html.theme-prakriti .pk-ck-trust li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; text-align: center; font-size: 11.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-ease); } html.theme-prakriti .pk-ck-trust li:hover { transform: translateY(-3px); } html.theme-prakriti .pk-ck-trust .pk-icon { color: rgb(var(--pk-accent)); } /* Mobile pay bar */ html.theme-prakriti .pk-ck-bar { display: none; } @media (max-width: 1023.98px) { html.theme-prakriti .pk-ck-side .pk-ck-place-wrap, html.theme-prakriti .pk-ck-side .pk-ck-hint { display: none; } html.theme-prakriti .pk-ck-bar { position: fixed; z-index: 22; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(620px, calc(100% - 24px)); padding: 8px 8px 8px 10px; border-radius: 999px; background: rgb(var(--pk-surface) / .9); box-shadow: var(--pk-shadow-3), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); animation: pk-ck-bar-in .8s var(--pk-ease) .5s backwards; } html.theme-prakriti .pk-ck-bar-total { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } html.theme-prakriti .pk-ck-bar-total small { font-size: 11.5px; text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-bar-total strong { font-family: var(--pk-font-display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } html.pk-motion.theme-prakriti .pk-ck-bar.is-ready .pk-btn { animation: pk-ck-glow 2.8s ease-in-out infinite; } } @keyframes pk-ck-bar-in { from { transform: translate(-50%, 140%); opacity: 0; } } html.theme-prakriti .pk-ck-bar-ring { --pk-ring: 0; position: relative; flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; } html.theme-prakriti .pk-ck-bar-ring svg { position: absolute; inset: 0; rotate: -90deg; fill: none; stroke-width: 3; } html.theme-prakriti .pk-ck-bar-ring circle { stroke: rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-bar-ring circle.is-fill { stroke: rgb(var(--pk-accent)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pk-ring)); transition: stroke-dashoffset .9s var(--pk-ease); } html.theme-prakriti .pk-ck-bar-ring em { font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } /* Address drawer (teleported to body) */ html.theme-prakriti .pk-ck-layer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; } html.theme-prakriti .pk-ck-backdrop { position: absolute; inset: 0; background: rgb(var(--pk-forest) / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html.theme-prakriti .pk-ck-drawer { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3); } @media (min-width: 640px) { html.theme-prakriti .pk-ck-drawer { height: calc(100% - 24px); margin: 12px; border-radius: 30px; overflow: hidden; } } html.theme-prakriti .pk-ck-drawer-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 20px 18px 22px; border-bottom: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-drawer-head > div { flex: 1; min-width: 0; } html.theme-prakriti .pk-ck-drawer-head h3 { font-family: var(--pk-font-display); font-size: 21px; font-weight: 500; letter-spacing: -.02em; text-transform: capitalize; } html.theme-prakriti .pk-ck-drawer-head p { font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-drawer-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px 999px 14px 14px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ck-drawer-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; } html.theme-prakriti .pk-ck-drawer-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform-origin: left; transition: transform .7s var(--pk-ease); } html.theme-prakriti .pk-ck-drawer-form { flex: 1; min-height: 0; display: flex; flex-direction: column; } html.theme-prakriti .pk-ck-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 22px; } html.theme-prakriti .pk-ck-drawer-body > * { flex-shrink: 0; } html.theme-prakriti .pk-ck-drawer-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--pk-line)); background: rgb(var(--pk-surface)); } @media (max-width: 479.98px) { html.theme-prakriti .pk-ck-drawer-foot .pk-btn { flex: 1; } } /* Live shipping label: a forest card that fills in as the form does. */ html.theme-prakriti .pk-ck-label { position: relative; padding: 18px 20px; border-radius: 22px; color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 140% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 70%); box-shadow: 0 18px 40px -20px rgb(var(--pk-forest) / .8); overflow: hidden; isolation: isolate; } html.theme-prakriti .pk-ck-label::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 999px; border: 1px dashed rgb(var(--pk-sun) / .35); box-shadow: 0 0 0 22px rgb(var(--pk-sun) / .04), 0 0 0 44px rgb(var(--pk-sun) / .03); } html.theme-prakriti .pk-ck-label::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .1) 50%, transparent 65%); background-size: 250% 100%; animation: pk-sheen 4s linear infinite; pointer-events: none; } html.theme-prakriti .pk-ck-label-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ck-label-top span { display: inline-flex; align-items: center; gap: 6px; } html.theme-prakriti .pk-ck-label-top em { font-style: normal; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ck-label strong { display: block; font-family: var(--pk-font-display); font-size: 20px; font-weight: 500; text-transform: capitalize; } html.theme-prakriti .pk-ck-label p { font-size: 13px; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 40px; } html.theme-prakriti .pk-ck-label-stamp { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transform: scale(0) rotate(-40deg); transition: transform .6s var(--pk-spring); } html.theme-prakriti .pk-ck-label.is-complete .pk-ck-label-stamp { transform: none; } html.theme-prakriti .pk-ck-set legend { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-set legend span { font-family: var(--pk-font-display); color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ck-grid { display: grid; gap: 14px; } @media (min-width: 480px) { html.theme-prakriti .pk-ck-grid { grid-template-columns: 1fr 1fr; } html.theme-prakriti .pk-ck-span { grid-column: 1 / -1; } } html.theme-prakriti .pk-ck-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html.theme-prakriti .pk-ck-field-label { font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ck-field-label.is-req::after { content: " *"; color: rgb(var(--pk-clay)); } html.theme-prakriti .pk-ck-field-label em { font-style: normal; font-weight: 400; text-transform: lowercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-field input, html.theme-prakriti .pk-ck-select select, html.theme-prakriti .pk-ck-phone { width: 100%; height: 50px; padding-inline: 16px; border-radius: 16px; font-size: 15px; color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .25s, background-color .25s; } html.theme-prakriti .pk-ck-field input:focus, html.theme-prakriti .pk-ck-select select:focus, html.theme-prakriti .pk-ck-phone:focus-within { outline: none; background: rgb(var(--pk-surface)); box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .14), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-ck-field.is-filled input, html.theme-prakriti .pk-ck-field.is-filled select, html.theme-prakriti .pk-ck-field.is-filled .pk-ck-phone { background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-ck-field.has-error input, html.theme-prakriti .pk-ck-field.has-error select, html.theme-prakriti .pk-ck-field.has-error .pk-ck-phone { box-shadow: 0 0 0 4px rgb(var(--pk-danger) / .1), inset 0 0 0 1.5px rgb(var(--pk-danger)); } html.theme-prakriti .pk-ck-field small { font-size: 12px; color: rgb(var(--pk-danger)); animation: pk-ck-rise .35s var(--pk-ease); } html.theme-prakriti .pk-ck-select { position: relative; display: block; } html.theme-prakriti .pk-ck-select select { appearance: none; -webkit-appearance: none; padding-inline-end: 38px; text-overflow: ellipsis; cursor: pointer; } html.theme-prakriti .pk-ck-select select:disabled { opacity: .55; cursor: not-allowed; } html.theme-prakriti .pk-ck-select .pk-icon { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); pointer-events: none; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-phone { display: flex; align-items: center; padding-inline: 0; } html.theme-prakriti .pk-ck-phone input { height: 100%; flex: 1; min-width: 0; background: transparent !important; box-shadow: none !important; } html.theme-prakriti .pk-ck-code { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 100%; padding-inline: 14px 10px; font-size: 14px; font-weight: 700; border-inline-end: 1px solid rgb(var(--pk-line)); } html.theme-prakriti .pk-ck-code select { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* Placing veil: a mandala turns around the lock while the gateway loads. */ html.theme-prakriti .pk-ck-veil { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgb(var(--pk-bg) / .72); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } html.theme-prakriti .pk-ck-veil-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 38px 28px; border-radius: 32px; text-align: center; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-3); animation: pk-ck-rise .7s var(--pk-ease); } html.theme-prakriti .pk-ck-veil-card strong { font-family: var(--pk-font-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; } html.theme-prakriti .pk-ck-veil-card small { max-width: 260px; font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ck-veil-orb { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 6px; } html.theme-prakriti .pk-ck-veil-mandala { position: absolute; inset: 0; color: rgb(var(--pk-accent) / .55); animation: pk-turn 9s linear infinite; } html.theme-prakriti .pk-ck-veil-core { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 8px rgb(var(--pk-surface)); animation: pk-ck-breathe 1.8s ease-in-out infinite; } @keyframes pk-ck-breathe { 50% { scale: 1.08; } } html.theme-prakriti .pk-ck-veil-dots { display: flex; gap: 6px; margin-top: 6px; } html.theme-prakriti .pk-ck-veil-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgb(var(--pk-accent)); animation: pk-ck-dot 1.2s ease-in-out infinite; } html.theme-prakriti .pk-ck-veil-dots i:nth-child(2) { animation-delay: .15s; } html.theme-prakriti .pk-ck-veil-dots i:nth-child(3) { animation-delay: .3s; } @keyframes pk-ck-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .pk-ck-page-enter-active, .pk-ck-page-leave-active { transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease; } .pk-ck-page-enter-from { opacity: 0; transform: translateY(16px); filter: blur(8px); } .pk-ck-page-leave-to { opacity: 0; transform: translateY(-8px); filter: blur(8px); } .pk-ck-fade-enter-active, .pk-ck-fade-leave-active { transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); } .pk-ck-fade-enter-from, .pk-ck-fade-leave-to { opacity: 0; transform: translateY(4px); } .pk-ck-tick-enter-active, .pk-ck-tick-leave-active { transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1); } .pk-ck-tick-enter-from { opacity: 0; transform: translateY(70%); } .pk-ck-tick-leave-to { opacity: 0; transform: translateY(-70%); } .pk-ck-pop-enter-active { transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .2s; } .pk-ck-pop-leave-active { transition: transform .15s ease, opacity .15s; } .pk-ck-pop-enter-from, .pk-ck-pop-leave-to { transform: scale(0); opacity: 0; } .pk-ck-list-move { transition: transform .55s cubic-bezier(.22,1,.36,1); } .pk-ck-list-enter-active { transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1); } .pk-ck-list-leave-active { transition: opacity .3s ease, transform .35s ease; position: absolute; } .pk-ck-list-enter-from { opacity: 0; transform: scale(.94); } .pk-ck-list-leave-to { opacity: 0; transform: translateX(30px); } .pk-ck-drawer-enter-active, .pk-ck-drawer-leave-active { transition: opacity .35s ease; } .pk-ck-drawer-enter-active .pk-ck-drawer, .pk-ck-drawer-leave-active .pk-ck-drawer { transition: transform .6s cubic-bezier(.22,1,.36,1); } .pk-ck-drawer-enter-from, .pk-ck-drawer-leave-to { opacity: 0; } .pk-ck-drawer-enter-from .pk-ck-drawer, .pk-ck-drawer-leave-to .pk-ck-drawer { transform: translateX(105%); } [dir="rtl"] .pk-ck-drawer-enter-from .pk-ck-drawer, [dir="rtl"] .pk-ck-drawer-leave-to .pk-ck-drawer { transform: translateX(-105%); } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-ck-burst, html.theme-prakriti .pk-ck-ambient .pk-leaves { display: none; } html.theme-prakriti :is(.pk-ck-tile, .pk-ck-addr-card) { animation: none; } } /* 30. Cart page (prakriti/checkout/cartList/*) -------------------------------- Lives in §29's shell (backdrop, back button, header type, sidebar layout, meter, receipt rows, mobile bar). Adds journey steps, tilting arch line cards with offer seals, low-stock pulse, save-for-later + undo (the wishlist's toast), "pairs well with" upsells and a mandala empty state. Prefix pk-cp-. */ html.theme-prakriti:has(.pk-cp) { --pk-tabbar-h: 0px; } /* Journey steps under the title */ html.theme-prakriti .pk-cp-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; padding: 5px; border-radius: 999px; background: rgb(var(--pk-surface) / .75); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-prakriti .pk-cp-steps li { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-cp-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; font-family: var(--pk-font-display); font-size: 12px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-cp-steps li.is-current { color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 8px 18px -8px rgb(var(--pk-forest) / .8); } html.theme-prakriti .pk-cp-steps li.is-current span { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-cp-steps li + li::before { content: ""; position: absolute; inset-inline-start: -6px; top: 50%; width: 6px; height: 1.5px; background: rgb(var(--pk-line)); } @media (max-width: 479.98px) { html.theme-prakriti .pk-cp-steps { flex-wrap: nowrap; gap: 2px; padding: 4px; max-width: 100%; } html.theme-prakriti .pk-cp-steps li { gap: 6px; height: 32px; padding-inline: 4px 9px; font-size: 11.5px; } html.theme-prakriti .pk-cp-steps li span { width: 22px; height: 22px; font-size: 11px; } html.theme-prakriti .pk-cp-steps li + li::before { display: none; } } /* Meter: same parts as §29, as a standalone card with room for the burst */ html.theme-prakriti .pk-cp-meter { position: relative; margin: 0; padding: 16px 18px 20px; border-radius: 22px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-cp-meter.is-done { background: linear-gradient(135deg, rgb(var(--pk-good) / .1), rgb(var(--pk-sun) / .1)), rgb(var(--pk-surface)); } html.theme-prakriti .pk-cp-meter .pk-ck-meter-text { font-size: 13.5px; font-weight: 600; } html.theme-prakriti .pk-cp-meter-burst { left: auto; inset-inline-end: 40px; top: auto; bottom: 26px; } html.theme-prakriti .pk-cp-meter.is-done .pk-ck-meter-truck { animation: pk-ck-stamp .6s var(--pk-spring); } /* Lines */ html.theme-prakriti .pk-cp-lines { position: relative; display: flex; flex-direction: column; gap: 14px; } html.theme-prakriti .pk-cp-line { position: relative; display: flex; gap: clamp(14px, 2vw, 22px); padding: clamp(14px, 2vw, 20px); border-radius: var(--pk-radius); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .45s var(--pk-ease), opacity .3s; } html.pk-motion.theme-prakriti .pk-cp-line { animation: pk-ck-rise .9s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 90ms + 500ms); } html.theme-prakriti .pk-cp-line:hover { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .3); } html.theme-prakriti .pk-cp-line.is-busy { opacity: .7; } html.theme-prakriti .pk-cp-media { --pk-rx: 0deg; --pk-ry: 0deg; position: relative; flex-shrink: 0; width: clamp(92px, 16vw, 132px); align-self: flex-start; transform: perspective(700px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .6s var(--pk-ease); } html.theme-prakriti .pk-cp-media.is-tilting { transition: transform .12s linear; } html.theme-prakriti .pk-cp-media > :first-child { border-radius: 999px 999px 22px 22px; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #fff, var(--pk-tone-1)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-cp-media img { transition: scale .8s var(--pk-ease); } html.theme-prakriti .pk-cp-line:hover .pk-cp-media img { scale: 1.06; } html.theme-prakriti .pk-cp-seal { top: -8px; inset-inline-end: -10px; width: 48px; height: 48px; font-size: 12px; } html.theme-prakriti .pk-cp-line:hover .pk-cp-seal { rotate: 6deg; } html.theme-prakriti .pk-cp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } html.theme-prakriti .pk-cp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } html.theme-prakriti .pk-cp-ident { min-width: 0; display: flex; flex-direction: column; gap: 8px; } html.theme-prakriti .pk-cp-name { font-family: var(--pk-font-display); font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; text-transform: capitalize; color: rgb(var(--pk-ink)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html.theme-prakriti .pk-cp-variants { display: flex; flex-wrap: wrap; gap: 6px; } html.theme-prakriti .pk-cp-total { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; overflow: hidden; } html.theme-prakriti .pk-cp-total strong { display: inline-block; font-family: var(--pk-font-display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-cp-each { font-size: 12px; color: rgb(var(--pk-muted)); white-space: nowrap; } html.theme-prakriti .pk-cp-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-cp-price del { font-weight: 400; color: rgb(var(--pk-muted) / .8); } html.theme-prakriti .pk-cp-low { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: rgb(var(--pk-clay)); background: rgb(var(--pk-clay) / .1); } html.theme-prakriti .pk-cp-low-dot { position: relative; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } html.theme-prakriti .pk-cp-low-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-cp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; } html.theme-prakriti .pk-cp-qty { background: rgb(var(--pk-bg)); overflow: hidden; } html.theme-prakriti .pk-cp-qty button { width: 34px; height: 34px; } html.theme-prakriti .pk-cp-qty button:hover:not(:disabled) { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-cp-qty input { width: 40px; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-cp-links { display: flex; gap: 4px; } html.theme-prakriti .pk-cp-link { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgb(var(--pk-muted)); transition: color .2s, background-color .2s; } html.theme-prakriti .pk-cp-link:hover { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .08); } html.theme-prakriti .pk-cp-link:hover .pk-icon { animation: pk-heart .5s var(--pk-spring); } html.theme-prakriti .pk-cp-link.is-danger:hover { color: rgb(var(--pk-danger)); background: rgb(var(--pk-danger) / .08); } html.theme-prakriti .pk-cp-link.is-danger:hover .pk-icon { animation: pk-cp-wiggle .45s ease; } @keyframes pk-cp-wiggle { 25% { rotate: -12deg; } 75% { rotate: 12deg; } } @media (max-width: 559.98px) { html.theme-prakriti .pk-cp-link span { display: none; } html.theme-prakriti .pk-cp-link { width: 36px; padding: 0; justify-content: center; } } /* Reassurance */ html.theme-prakriti .pk-cp-trust { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 639.98px) { html.theme-prakriti .pk-cp-trust { gap: 8px; } html.theme-prakriti .pk-cp-trust li { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 6px; text-align: center; font-size: 11.5px; line-height: 1.3; } } html.theme-prakriti .pk-cp-trust li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface) / .7); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-cp-trust li > span { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px 999px 12px 12px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: transform .6s var(--pk-spring); } html.theme-prakriti .pk-cp-trust li:hover > span { transform: rotate(-8deg) scale(1.08); } /* Pairs well with */ html.theme-prakriti .pk-cp-upsell { margin-top: 10px; } html.theme-prakriti .pk-cp-upsell-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } html.theme-prakriti .pk-cp-upsell-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { html.theme-prakriti .pk-cp-upsell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { html.theme-prakriti .pk-cp-upsell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } html.theme-prakriti .pk-cp-up { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 22px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-cp-up:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .3); } html.theme-prakriti .pk-cp-up-media { flex-shrink: 0; width: 68px; border-radius: 999px 999px 16px 16px; overflow: hidden; background: var(--pk-tone-1); } html.theme-prakriti .pk-cp-up-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } html.theme-prakriti .pk-cp-up-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: rgb(var(--pk-ink)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } html.theme-prakriti .pk-cp-up-name:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-cp-up-price { display: flex; align-items: baseline; gap: 6px; font-size: 13px; } html.theme-prakriti .pk-cp-up-price strong { font-family: var(--pk-font-display); font-weight: 600; } html.theme-prakriti .pk-cp-up-price del { font-size: 11.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-cp-up-add { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .5s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-cp-up-add:hover:not(:disabled) { transform: rotate(90deg); color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-cp-up-add:disabled { opacity: .7; } /* Summary card */ html.theme-prakriti .pk-cp-sum { overflow: hidden; isolation: isolate; padding: 22px; } html.theme-prakriti .pk-cp-sum::before { display: none; } html.theme-prakriti .pk-cp-sum-mandala { position: absolute; z-index: -1; width: 260px; aspect-ratio: 1; top: -120px; inset-inline-end: -120px; color: rgb(var(--pk-sun) / .35); pointer-events: none; } html.pk-motion.theme-prakriti .pk-cp-sum-mandala .pk-mandala { animation: pk-turn 90s linear infinite; } html.theme-prakriti .pk-cp-area { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 14px; height: 46px; padding-inline: 14px; border-radius: 16px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .25s; } html.theme-prakriti .pk-cp-area:focus-within { box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .14), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-cp-area select { flex: 1; min-width: 0; height: 100%; appearance: none; -webkit-appearance: none; background: transparent; font-size: 14px; font-weight: 600; color: rgb(var(--pk-ink)); cursor: pointer; } html.theme-prakriti .pk-cp-area select:focus { outline: none; } html.theme-prakriti .pk-cp-coupon { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px; border-radius: 18px; background: rgb(var(--pk-good) / .08); } html.theme-prakriti .pk-cp-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-cp-go { width: 100%; height: 60px; margin-top: 16px; justify-content: flex-start; padding-inline: 22px 8px; font-size: 15.5px; } html.theme-prakriti .pk-cp-go > span:first-of-type { flex: 1; text-align: start; } html.theme-prakriti .pk-cp-go-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transition: transform .5s var(--pk-spring); } html.theme-prakriti .pk-cp-go:hover .pk-cp-go-arrow { transform: translateX(3px) rotate(-8deg); } html.theme-prakriti .pk-cp-go:hover .pk-icon { transform: none; } html.pk-motion.theme-prakriti .pk-cp-go { animation: pk-ck-glow 2.8s ease-in-out 2s infinite; } html.theme-prakriti .pk-cp-continue { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: rgb(var(--pk-ink-2)); transition: color .2s, gap .3s var(--pk-ease); } html.theme-prakriti .pk-cp-continue:hover { color: rgb(var(--pk-accent)); gap: 10px; } html.theme-prakriti .pk-cp-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: rgb(var(--pk-muted)); } @media (max-width: 1023.98px) { html.theme-prakriti .pk-cp-go { display: none; } html.theme-prakriti .pk-cp-toast { bottom: calc(96px + env(safe-area-inset-bottom)); } } /* Empty basket */ html.theme-prakriti .pk-cp-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; margin: clamp(8px, 3vw, 32px) auto 0; padding: clamp(28px, 5vw, 56px) 20px; border-radius: 40px; text-align: center; background: rgb(var(--pk-surface) / .8); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: pk-ck-rise 1s var(--pk-ease) .3s backwards; } html.theme-prakriti .pk-cp-empty > p { max-width: 400px; font-size: 15px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-cp-empty-art { position: relative; display: grid; place-items: center; width: 200px; height: 200px; margin-bottom: 6px; } html.theme-prakriti .pk-cp-empty-mandala { position: absolute; inset: 0; color: rgb(var(--pk-accent) / .3); } html.pk-motion.theme-prakriti .pk-cp-empty-mandala .pk-mandala { animation: pk-turn 60s linear infinite; } html.theme-prakriti .pk-cp-empty-orb { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 999px 999px 32px 32px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 20px 40px -18px rgb(var(--pk-sun-ink) / .8), 0 0 0 10px rgb(var(--pk-surface)); } html.pk-motion.theme-prakriti .pk-cp-empty-orb { animation: pk-float 4s ease-in-out infinite; } html.theme-prakriti .pk-cp-drift { position: absolute; width: 26px; height: 26px; color: var(--pk-leaf-2); left: calc(50% + cos(calc(var(--pk-n) * 72deg)) * 92px - 13px); top: calc(50% + sin(calc(var(--pk-n) * 72deg)) * 92px - 13px); rotate: calc(var(--pk-n) * 72deg); } html.theme-prakriti .pk-cp-drift:nth-of-type(2n) { color: var(--pk-leaf-5); } html.pk-motion.theme-prakriti .pk-cp-drift { animation: pk-float 3.4s ease-in-out infinite; animation-delay: calc(var(--pk-n) * -.6s); } html.theme-prakriti .pk-cp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .pk-cp-line-move { transition: transform .6s cubic-bezier(.22,1,.36,1); } .pk-cp-line-enter-active { transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1); } .pk-cp-line-leave-active { transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); position: absolute; z-index: 0; } .pk-cp-line-enter-from { opacity: 0; transform: scale(.95) translateY(10px); } .pk-cp-line-leave-to { opacity: 0; transform: translateX(60px) rotate(2deg); } [dir="rtl"] .pk-cp-line-leave-to { transform: translateX(-60px) rotate(-2deg); } /* 31. Order history (prakriti/account/orderHistory/OrderHistoryComponent) ------ Mirrors Optica's §22 logic with a Prakriti skin: forest hero band (turning mandala, falling leaves that lean from the pointer, pointer glow, blooming title) with a status donut; a sticky glass toolbar (ink-glider tabs with live counts, "/" search, sort, busy shimmer); ticket cards that tilt, with a vine journey whose leaves unfurl step by step; a mandala empty state; a pager. Laid out with container queries — the default account sidebar sets the width. */ html.theme-prakriti .pk-oh { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 22px); } /* Status tones — shared with the overview (§33), which reuses the pills, meta and copy button. */ html.theme-prakriti :is(.pk-oh, .pk-ov) :is(.is-good) { --pk-tone: var(--pk-good); } html.theme-prakriti :is(.pk-oh, .pk-ov) :is(.is-sun, .is-warn) { --pk-tone: var(--pk-sun); } html.theme-prakriti :is(.pk-oh, .pk-ov) :is(.is-crit) { --pk-tone: var(--pk-clay); } html.theme-prakriti :is(.pk-oh, .pk-ov) :is(.is-info) { --pk-tone: var(--pk-accent); } /* Hero */ html.theme-prakriti .pk-oh-hero { --pk-hx: 70%; --pk-hy: 30%; --pk-px: 0; --pk-py: 0; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 26px; padding: clamp(24px, 4.4cqi, 44px); border-radius: 34px; color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 62%); box-shadow: var(--pk-shadow-3); } @container (min-width: 700px) { html.theme-prakriti .pk-oh-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; } } html.pk-motion.theme-prakriti .pk-oh-hero { animation: pk-oh-hero-in 1.1s var(--pk-ease) both; } @keyframes pk-oh-hero-in { from { opacity: 0; clip-path: inset(8% 4% 8% 4% round 34px); } to { opacity: 1; clip-path: inset(0 round 34px); } } html.theme-prakriti .pk-oh-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } html.theme-prakriti .pk-oh-hero-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(360px circle at var(--pk-hx) var(--pk-hy), rgb(var(--pk-sun) / .18), transparent 70%); } html.theme-prakriti .pk-oh-hero.is-lit .pk-oh-hero-glow { opacity: 1; } html.theme-prakriti .pk-oh-hero-mandala { position: absolute; width: clamp(340px, 62cqi, 560px); aspect-ratio: 1; top: -40%; inset-inline-end: -16%; color: rgb(var(--pk-sun) / .16); translate: calc(var(--pk-px) * -20px) calc(var(--pk-py) * -14px); transition: translate 1.2s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-oh-hero-mandala .pk-mandala { animation: pk-turn 140s linear infinite; } html.theme-prakriti .pk-oh-hero .pk-leaves { opacity: .55; } html.theme-prakriti .pk-oh-hello { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } html.theme-prakriti .pk-oh-pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-oh-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-oh-title { display: flex; flex-wrap: wrap; gap: 0 .24em; font-family: var(--pk-font-display); font-weight: 500; font-size: clamp(36px, 8cqi, 66px); line-height: 1; letter-spacing: -.035em; text-transform: capitalize; color: #fff; } html.theme-prakriti .pk-oh-title .is-accent { font-style: italic; color: rgb(var(--pk-sun)); padding-inline-end: .05em; } html.theme-prakriti .pk-oh-lede { max-width: 440px; font-size: 15px; line-height: 1.6; color: rgb(var(--pk-cream-ink) / .78); } html.theme-prakriti .pk-oh-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } /* Donut: one arc per tab, drawn in sequence once the counts land. */ html.theme-prakriti .pk-oh-donut-wrap { display: flex; align-items: center; gap: 22px; justify-self: start; } @container (min-width: 700px) { html.theme-prakriti .pk-oh-donut-wrap { flex-direction: column; gap: 18px; justify-self: end; } } html.theme-prakriti .pk-oh-donut { position: relative; flex-shrink: 0; width: clamp(130px, 26cqi, 176px); aspect-ratio: 1; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-prakriti .pk-oh-donut svg { position: absolute; inset: 0; rotate: -90deg; } html.theme-prakriti .pk-oh-donut circle { fill: none; stroke-width: 10; } html.theme-prakriti .pk-oh-donut-track { stroke: rgb(255 255 255 / .1); } html.theme-prakriti .pk-oh-donut-arc { stroke: rgb(var(--pk-tone)); stroke-dasharray: 0 1; stroke-dashoffset: calc(var(--pk-off, 0) * -1); transition: stroke-dasharray 1.2s var(--pk-ease); transition-delay: calc(var(--pk-i, 0) * .25s + .5s); } html.theme-prakriti .pk-oh-donut.is-ready .pk-oh-donut-arc { stroke-dasharray: var(--pk-len, 0) 1; } html.theme-prakriti .pk-oh-donut::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 1.5px dashed rgb(var(--pk-sun) / .35); pointer-events: none; } html.pk-motion.theme-prakriti .pk-oh-donut::after { animation: pk-spin-plain 30s linear infinite; } html.theme-prakriti .pk-oh-donut-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } html.theme-prakriti .pk-oh-donut-core strong { font-family: var(--pk-font-display); font-weight: 500; font-size: clamp(32px, 7cqi, 46px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; } html.theme-prakriti .pk-oh-donut-core span { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-oh-legend { display: flex; flex-direction: column; gap: 8px; min-width: 150px; } html.theme-prakriti .pk-oh-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: capitalize; color: rgb(var(--pk-cream-ink) / .85); } html.theme-prakriti .pk-oh-legend i { width: 10px; height: 10px; border-radius: 999px 999px 3px 3px; background: rgb(var(--pk-tone)); } html.theme-prakriti .pk-oh-legend b { margin-inline-start: auto; padding-inline-start: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } /* Toolbar */ html.theme-prakriti .pk-oh-bar { position: sticky; top: 10px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 24px; background: rgb(var(--pk-surface) / .82); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); transition: top .5s var(--pk-ease); } html.theme-prakriti:has(.pk-nav:not(.is-hidden)) .pk-oh-bar { top: calc(var(--header-h, 76px) + 10px); } html.theme-prakriti .pk-oh-tabs { position: relative; display: flex; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } html.theme-prakriti .pk-oh-tabs::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-oh-ink { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 17px; background: rgb(var(--pk-forest)); box-shadow: 0 10px 22px -12px rgb(var(--pk-forest) / .8); transition: transform .6s var(--pk-spring), width .45s var(--pk-ease); } html.theme-prakriti .pk-oh-tab { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 15px; border-radius: 17px; font-size: 14px; font-weight: 700; white-space: nowrap; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .3s; } html.theme-prakriti .pk-oh-tab:hover { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-oh-tab.is-on { color: #fff; } html.theme-prakriti .pk-oh-tab em { --pk-tone: var(--pk-ink-2); min-width: 22px; height: 22px; padding-inline: 6px; display: inline-grid; place-items: center; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-tone)); background: rgb(var(--pk-tone) / .12); transition: color .3s, background-color .3s; } html.theme-prakriti .pk-oh-tab.is-on em { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-oh-tools { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; justify-content: flex-end; } html.theme-prakriti .pk-oh-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 300px; height: 44px; padding-inline: 14px 8px; border-radius: 17px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .25s, background-color .25s, max-width .5s var(--pk-ease); } html.theme-prakriti .pk-oh-search:focus-within { max-width: 380px; background: rgb(var(--pk-surface)); box-shadow: 0 0 0 4px rgb(var(--pk-accent) / .14), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-oh-search input { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 14px; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-oh-search input::-webkit-search-cancel-button { display: none; } html.theme-prakriti .pk-oh-search kbd { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 7px; font: 600 12px/1 inherit; color: rgb(var(--pk-muted)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-oh-search-clear { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); transition: background-color .2s, color .2s; } html.theme-prakriti .pk-oh-search-clear:hover { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-oh-sort { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 44px; padding-inline: 13px; border-radius: 17px; font-size: 13px; font-weight: 700; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); transition: background-color .2s, color .2s; } html.theme-prakriti .pk-oh-sort:hover { color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-oh-sort-icon { transition: rotate .5s var(--pk-spring); rotate: 180deg; } html.theme-prakriti .pk-oh-sort-icon.is-up { rotate: 0deg; } html.theme-prakriti .pk-oh-progress { position: absolute; inset-inline: 22px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; transition: opacity .3s; } html.theme-prakriti .pk-oh-progress::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, rgb(var(--pk-sun)), rgb(var(--pk-accent)), transparent); animation: pk-oh-indeterminate 1.1s ease-in-out infinite; } @keyframes pk-oh-indeterminate { from { left: -40%; } to { left: 100%; } } html.theme-prakriti .pk-oh.is-busy .pk-oh-progress { opacity: 1; } @container (max-width: 559.98px) { html.theme-prakriti .pk-oh-tabs { flex: 1 1 100%; } html.theme-prakriti .pk-oh-tools { flex-basis: 100%; } html.theme-prakriti .pk-oh-search { max-width: none; } html.theme-prakriti .pk-oh-search:focus-within { max-width: none; } /* Two rows tall here: pinned, it would cover most of a phone screen. */ html.theme-prakriti .pk-oh-bar { position: relative; top: auto !important; } } @media (hover: none) { html.theme-prakriti .pk-oh-search kbd { display: none; } } /* List + cards */ html.theme-prakriti .pk-oh-list { position: relative; display: flex; flex-direction: column; gap: 12px; transition: opacity .3s; } html.theme-prakriti .pk-oh.is-busy .pk-oh-list:not([aria-hidden]) { opacity: .55; pointer-events: none; } html.theme-prakriti .pk-oh-card { --pk-tone: var(--pk-accent); --pk-rx: 0deg; --pk-ry: 0deg; --pk-gx: 50%; --pk-gy: 50%; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 3cqi, 22px); border-radius: 26px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transform: perspective(1200px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .6s var(--pk-ease), box-shadow .45s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-oh-card { animation: pk-oh-card-in .85s var(--pk-ease) backwards; animation-delay: calc(min(var(--pk-i, 0), 10) * 70ms + .15s); } @keyframes pk-oh-card-in { from { opacity: 0; translate: 0 22px; filter: blur(5px); } } html.theme-prakriti .pk-oh-card.is-tilting { transition: transform .12s linear, box-shadow .45s; } html.theme-prakriti .pk-oh-card:hover { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-tone) / .35); } /* Status stripe down the leading edge */ html.theme-prakriti .pk-oh-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: rgb(var(--pk-tone)); } html.theme-prakriti .pk-oh-card-glare { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .4s; background: radial-gradient(420px circle at var(--pk-gx) var(--pk-gy), rgb(var(--pk-tone) / .1), transparent 65%); } html.theme-prakriti .pk-oh-card.is-tilting .pk-oh-card-glare { opacity: 1; } html.theme-prakriti .pk-oh-card-main { display: flex; align-items: center; gap: 14px; } html.theme-prakriti .pk-oh-tile { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px 999px 16px 16px; color: rgb(var(--pk-tone)); background: rgb(var(--pk-tone) / .12); transition: transform .6s var(--pk-spring); } html.theme-prakriti .pk-oh-card:hover .pk-oh-tile { transform: rotate(-8deg) scale(1.06); } html.theme-prakriti .pk-oh-card.is-sun .pk-oh-tile { color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-oh-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } html.theme-prakriti .pk-oh-serial-row { display: flex; align-items: center; gap: 6px; } html.theme-prakriti .pk-oh-serial { font-family: var(--pk-font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; } html.theme-prakriti .pk-oh-serial:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-oh-copy { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: rgb(var(--pk-muted)); opacity: .6; transition: opacity .2s, background-color .2s, color .2s; } html.theme-prakriti :is(.pk-oh-card, .pk-ov-latest):hover .pk-oh-copy, html.theme-prakriti .pk-oh-copy:focus-visible { opacity: 1; } html.theme-prakriti .pk-oh-copy:hover { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-oh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-oh-dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; } html.theme-prakriti .pk-oh-money { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } html.theme-prakriti .pk-oh-money strong { font-family: var(--pk-font-display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-oh-pay { display: inline-flex; align-items: center; height: 22px; padding-inline: 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize; } html.theme-prakriti .pk-oh-pay.is-paid { color: rgb(var(--pk-good)); background: rgb(var(--pk-good) / .1); } html.theme-prakriti .pk-oh-pay.is-unpaid { color: rgb(var(--pk-sun-ink)); background: rgb(var(--pk-sun) / .18); } html.theme-prakriti .pk-oh-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-oh-state { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; } html.theme-prakriti .pk-oh-status { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding-inline: 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-tone)); background: rgb(var(--pk-tone) / .1); } html.theme-prakriti :is(.pk-oh-card, .pk-ov-order):is(.is-sun, .is-warn) .pk-oh-status { color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-oh-status i { position: relative; width: 7px; height: 7px; border-radius: 999px; background: rgb(var(--pk-tone)); } html.theme-prakriti :is(.pk-oh-card, .pk-ov-order):is(.is-info, .is-sun, .is-warn) .pk-oh-status i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } /* Vine journey: the stem grows to the reached step, then each reached leaf unfurls. */ html.theme-prakriti .pk-oh-steps { --pk-step: 0; position: relative; display: flex; align-items: center; justify-content: space-between; width: clamp(130px, 30cqi, 200px); height: 22px; } html.theme-prakriti .pk-oh-steps::before, html.theme-prakriti .pk-oh-steps::after { content: ""; position: absolute; inset-inline: 9px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; } html.theme-prakriti .pk-oh-steps::before { background: repeating-linear-gradient(90deg, rgb(var(--pk-line)) 0 5px, transparent 5px 9px); } html.theme-prakriti .pk-oh-steps::after { background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-tone))); transform: scaleX(calc(var(--pk-step) / 3)); transform-origin: left; } html[dir="rtl"].theme-prakriti .pk-oh-steps::after { transform-origin: right; } html.pk-motion.theme-prakriti .pk-oh-steps::after { animation: pk-oh-grow 1s var(--pk-ease) backwards; animation-delay: calc(min(var(--pk-i, 0), 10) * 70ms + .45s); } @keyframes pk-oh-grow { from { transform: scaleX(0); } } html.theme-prakriti .pk-oh-steps li { position: relative; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); } html.theme-prakriti .pk-oh-steps li .pk-leaf-svg { width: 18px; height: 18px; color: var(--pk-leaf-1); transform: rotate(-30deg) scale(0); transform-origin: 50% 90%; } html.theme-prakriti .pk-oh-steps li.is-done { box-shadow: none; background: transparent; } html.theme-prakriti .pk-oh-steps li.is-done .pk-leaf-svg { transform: rotate(-30deg) scale(1); } html.theme-prakriti .pk-oh-card.is-good .pk-oh-steps li.is-done:last-child .pk-leaf-svg { color: var(--pk-leaf-5); } html.pk-motion.theme-prakriti .pk-oh-steps li.is-done .pk-leaf-svg { animation: pk-oh-unfurl .7s var(--pk-spring) backwards; animation-delay: calc(var(--pk-s, 0) * .16s + min(var(--pk-i, 0), 10) * 70ms + .55s); } @keyframes pk-oh-unfurl { from { transform: rotate(-80deg) scale(0); } } html.pk-motion.theme-prakriti .pk-oh-card:hover .pk-oh-steps li.is-done .pk-leaf-svg { animation: pk-oh-rustle .8s ease-in-out; animation-delay: calc(var(--pk-s, 0) * 60ms); } @keyframes pk-oh-rustle { 40% { transform: rotate(-12deg) scale(1.1); } 70% { transform: rotate(-38deg) scale(1); } } /* Actions */ html.theme-prakriti .pk-oh-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } html.theme-prakriti .pk-oh-actions .pk-icon-btn { width: 40px; height: 40px; } html.theme-prakriti .pk-oh-view { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 18px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #fff; background: rgb(var(--pk-forest)); transition: box-shadow .4s, color .3s; } html.theme-prakriti .pk-oh-view::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgb(var(--pk-sun)); transform: translateY(101%); transition: transform .45s var(--pk-ease); } html.theme-prakriti .pk-oh-view:hover { color: rgb(var(--pk-forest)); box-shadow: 0 12px 26px -12px rgb(var(--pk-sun) / .9); } html.theme-prakriti .pk-oh-view:hover::before { transform: none; } html.theme-prakriti .pk-oh-view .pk-icon { transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-oh-view:hover .pk-icon { transform: translateX(3px); } html[dir="rtl"].theme-prakriti .pk-oh-view .pk-icon, html[dir="rtl"].theme-prakriti .pk-oh-flip { scale: -1 1; } @container (max-width: 479.98px) { html.theme-prakriti .pk-oh-card-main { flex-wrap: wrap; } html.theme-prakriti .pk-oh-money { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding-inline-start: 66px; } html.theme-prakriti .pk-oh-actions { width: 100%; } html.theme-prakriti .pk-oh-view { flex: 1; justify-content: center; } } /* Skeletons */ html.theme-prakriti .pk-oh-skel { display: block; border-radius: 10px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)) 25%, rgb(var(--pk-bg)) 50%, rgb(var(--pk-bg-2)) 75%); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } html.theme-prakriti .pk-oh-skel--num { width: 48px; height: 38px; background: rgb(255 255 255 / .1); } html.theme-prakriti .pk-oh-card--skel { flex-direction: row; align-items: center; } html.theme-prakriti .pk-oh-card--skel::before { display: none; } html.theme-prakriti .pk-oh-skel--tile { flex-shrink: 0; width: 52px; height: 52px; border-radius: 999px 999px 16px 16px; } html.theme-prakriti .pk-oh-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; } html.theme-prakriti .pk-oh-skel-lines .pk-oh-skel { height: 14px; width: 46%; } html.theme-prakriti .pk-oh-skel-lines .pk-oh-skel + .pk-oh-skel { width: 30%; height: 11px; } html.theme-prakriti .pk-oh-skel--pill { width: 90px; height: 36px; border-radius: 999px; } /* Empty */ html.theme-prakriti .pk-oh-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(32px, 6cqi, 56px) 20px; border-radius: 30px; text-align: center; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); animation: pk-ck-rise .8s var(--pk-ease) backwards; } html.theme-prakriti .pk-oh-empty h3 { font-family: var(--pk-font-display); font-size: 24px; font-weight: 500; letter-spacing: -.02em; } html.theme-prakriti .pk-oh-empty p { max-width: 380px; margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-oh-empty-art { position: relative; display: grid; place-items: center; width: 160px; height: 160px; margin-bottom: 4px; } html.theme-prakriti .pk-oh-empty-mandala { position: absolute; inset: 0; color: rgb(var(--pk-accent) / .28); } html.pk-motion.theme-prakriti .pk-oh-empty-mandala .pk-mandala { animation: pk-turn 60s linear infinite; } html.theme-prakriti .pk-oh-empty-orb { position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 999px 999px 26px 26px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 9px rgb(var(--pk-surface)); } html.pk-motion.theme-prakriti .pk-oh-empty-orb { animation: pk-float 4s ease-in-out infinite; } /* Pager */ html.theme-prakriti .pk-oh-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; } html.theme-prakriti .pk-oh-range { font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-oh-pages { display: flex; align-items: center; gap: 4px; } html.theme-prakriti .pk-oh-page { min-width: 42px; height: 42px; padding-inline: 8px; border-radius: 999px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink-2)); transition: background-color .25s, color .25s, transform .45s var(--pk-spring), box-shadow .3s; } html.theme-prakriti .pk-oh-page:hover { color: rgb(var(--pk-ink)); background: rgb(var(--pk-ink) / .06); } html.theme-prakriti .pk-oh-page.is-on { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 10px 22px -12px rgb(var(--pk-sun-ink) / .8); transform: scale(1.08); } html.theme-prakriti .pk-oh-gap { padding-inline: 4px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-oh-pages .pk-icon-btn:disabled { opacity: .4; cursor: not-allowed; } @container (max-width: 479.98px) { html.theme-prakriti .pk-oh-pager { justify-content: center; } html.theme-prakriti .pk-oh-range { flex: 1 1 100%; text-align: center; } } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .pk-oh-row-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } .pk-oh-row-leave-active { position: absolute; inset-inline: 0; transition: opacity .25s ease, translate .3s ease; } .pk-oh-row-leave-to { opacity: 0; translate: 0 -10px; } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-oh-hero .pk-leaves { display: none; } } /* 32. Account shell (prakriti/account/AccountComponent) ----------------------- Replaces the default sidebar + row/col grid on every /account page. ≥lg: a sticky card with a forest crown (turning mandala, falling leaves, avatar in a turning turmeric ring, time-of-day greeting), grouped links with a sliding forest pill carrying a leaf, a shop CTA and logout. Below lg: a forest profile row and a swipeable chip strip. Pages de-blur in on change. Prefix pk-acc-. */ html.theme-prakriti .pk-acc { padding-block: 8px clamp(40px, 6vw, 80px); } html.theme-prakriti .pk-acc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } @media (min-width: 1024px) { html.theme-prakriti .pk-acc-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 28px; } } @media (min-width: 1280px) { html.theme-prakriti .pk-acc-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 34px; } } html.theme-prakriti .pk-acc-main { min-width: 0; } /* Desktop card */ html.theme-prakriti .pk-acc-side { display: none; } @media (min-width: 1024px) { html.theme-prakriti .pk-acc-side { display: block; position: sticky; top: 16px; transition: top .5s var(--pk-ease); } html.theme-prakriti:has(.pk-nav:not(.is-hidden)) .pk-acc-side { top: calc(var(--header-h, 76px) + 16px); } } html.theme-prakriti .pk-acc-card { --pk-hx: 50%; --pk-hy: 0%; --pk-px: 0; --pk-py: 0; position: relative; overflow: clip; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 8px 10px 12px; border-radius: 32px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } html.pk-motion.theme-prakriti .pk-acc-card { animation: pk-acc-card-in 1s var(--pk-ease) both; } @keyframes pk-acc-card-in { from { opacity: 0; translate: -24px 0; filter: blur(6px); } } /* The card has a max-height and scrolls; without this its parts shrink and clip instead. */ html.theme-prakriti .pk-acc-card > * { flex-shrink: 0; } html.theme-prakriti .pk-acc-card-glow { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .5s; background: radial-gradient(240px circle at var(--pk-hx) var(--pk-hy), rgb(var(--pk-sun) / .14), transparent 70%); } html.theme-prakriti .pk-acc-card.is-lit .pk-acc-card-glow { opacity: 1; } /* Crown */ html.theme-prakriti .pk-acc-crown { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 14px 20px; border-radius: 26px; text-align: center; color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 65%); } html.theme-prakriti .pk-acc-crown-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } html.theme-prakriti .pk-acc-crown-mandala { position: absolute; width: 300px; aspect-ratio: 1; left: 50%; top: -42px; margin-left: -150px; color: rgb(var(--pk-sun) / .16); translate: calc(var(--pk-px) * -14px) calc(var(--pk-py) * -10px); transition: translate 1s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-acc-crown-mandala .pk-mandala { animation: pk-turn 120s linear infinite; } html.theme-prakriti .pk-acc-crown .pk-leaves { opacity: .5; } html.theme-prakriti .pk-acc-avatar { position: relative; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 999px; } html.theme-prakriti .pk-acc-avatar-ring { position: absolute; inset: -7px; border-radius: inherit; border: 2px dashed rgb(var(--pk-sun) / .75); } html.pk-motion.theme-prakriti .pk-acc-avatar-ring { animation: pk-spin-plain 22s linear infinite; } html.theme-prakriti .pk-acc-avatar-face { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; font-family: var(--pk-font-display); font-size: 30px; font-weight: 500; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 4px rgb(var(--pk-forest)), 0 16px 30px -12px rgb(0 0 0 / .5); transition: transform .55s var(--pk-spring); } html.theme-prakriti .pk-acc-avatar-face img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-acc-avatar:hover .pk-acc-avatar-face { transform: scale(1.06) rotate(-3deg); } html.theme-prakriti .pk-acc-avatar-edit { position: absolute; bottom: 0; inset-inline-end: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: rgb(var(--pk-forest)); background: #fff; box-shadow: var(--pk-shadow-2); transform: scale(.6); opacity: 0; transition: transform .45s var(--pk-spring), opacity .3s; } html.theme-prakriti .pk-acc-avatar:hover .pk-acc-avatar-edit, html.theme-prakriti .pk-acc-avatar:focus-visible .pk-acc-avatar-edit { transform: none; opacity: 1; } @media (hover: none) { html.theme-prakriti .pk-acc-avatar-edit { transform: none; opacity: 1; } } html.theme-prakriti .pk-acc-who { display: flex; flex-direction: column; align-items: inherit; gap: 3px; min-width: 0; max-width: 100%; } html.theme-prakriti .pk-acc-greet { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-acc-name { max-width: 100%; font-family: var(--pk-font-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-transform: capitalize; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-acc-contact { font-size: 13px; color: rgb(var(--pk-cream-ink) / .7); font-variant-numeric: tabular-nums; } /* Nav + sliding pill */ html.theme-prakriti .pk-acc-nav { position: relative; display: flex; flex-direction: column; gap: 2px; } html.theme-prakriti .pk-acc-glider { position: absolute; top: 0; inset-inline: 0; z-index: 0; border-radius: 18px; background: rgb(var(--pk-forest)); box-shadow: 0 12px 24px -12px rgb(var(--pk-forest) / .8); opacity: 0; transition: transform .65s var(--pk-spring), height .4s var(--pk-ease), opacity .3s; } html.theme-prakriti .pk-acc-glider.is-ready { opacity: 1; } html.theme-prakriti .pk-acc-glider-leaf { position: absolute; top: -6px; inset-inline-end: 12px; width: 16px; height: 16px; color: var(--pk-leaf-2); rotate: 30deg; transform-origin: 30% 100%; } html.pk-motion.theme-prakriti .pk-acc-glider-leaf { animation: pk-ck-sway 2.6s ease-in-out infinite alternate; } html.theme-prakriti .pk-acc-group { padding: 10px 14px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-acc-group:not(:first-of-type) { margin-top: 6px; } html.theme-prakriti .pk-acc-link { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 14px 6px 8px; border-radius: 18px; font-size: 14.5px; font-weight: 600; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .35s, background-color .25s; } html.theme-prakriti .pk-acc-link:not(.is-current):hover { color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-acc-link.is-current { color: #fff; } html.theme-prakriti .pk-acc-link-icon { flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: color .35s, background-color .35s, transform .55s var(--pk-spring); } html.theme-prakriti .pk-acc-link:hover .pk-acc-link-icon { transform: rotate(-8deg) scale(1.06); } html.theme-prakriti .pk-acc-link.is-current .pk-acc-link-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transform: none; } html.theme-prakriti .pk-acc-link-label { flex: 1; min-width: 0; } html.theme-prakriti .pk-acc-link-arrow { flex-shrink: 0; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--pk-ease); } html.theme-prakriti .pk-acc-link:hover .pk-acc-link-arrow, html.theme-prakriti .pk-acc-link.is-current .pk-acc-link-arrow, html.theme-prakriti .pk-acc-shop:hover .pk-acc-link-arrow { opacity: 1; transform: none; } html[dir="rtl"].theme-prakriti :is(.pk-acc-link-arrow, .pk-acc-flip) { scale: -1 1; } html.theme-prakriti .pk-acc-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--pk-accent) / .35); } /* Foot */ html.theme-prakriti .pk-acc-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-acc-shop { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 8px; border-radius: 18px; font-size: 14px; font-weight: 700; color: rgb(var(--pk-ink)); background: linear-gradient(135deg, rgb(var(--pk-sun) / .2), rgb(var(--pk-accent) / .1)); transition: transform .4s var(--pk-ease), box-shadow .3s; } html.theme-prakriti .pk-acc-shop > span:nth-child(2) { flex: 1; text-transform: capitalize; } html.theme-prakriti .pk-acc-shop-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .55s var(--pk-spring); } html.theme-prakriti .pk-acc-shop:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(var(--pk-sun) / .6); } html.theme-prakriti .pk-acc-shop:hover .pk-acc-shop-icon { transform: rotate(-12deg); } html.theme-prakriti .pk-acc-logout { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; font-size: 14px; font-weight: 700; color: rgb(var(--pk-danger)); text-align: start; transition: background-color .2s; } html.theme-prakriti .pk-acc-logout:hover { background: rgb(var(--pk-danger) / .07); } html.theme-prakriti .pk-acc-logout .pk-icon { transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-acc-logout:hover .pk-icon { transform: translateX(3px); } html.theme-prakriti .pk-acc-logout:disabled { opacity: .6; cursor: progress; } /* Short laptop screens: a denser card so the whole menu fits; below that it scrolls inside itself. */ @media (min-width: 1024px) and (max-height: 900px) { html.theme-prakriti .pk-acc-card { gap: 10px; } html.theme-prakriti .pk-acc-crown { flex-direction: row; gap: 14px; padding: 14px; text-align: start; } html.theme-prakriti .pk-acc-crown .pk-acc-who { align-items: flex-start; } html.theme-prakriti .pk-acc-avatar { flex-shrink: 0; width: 54px; height: 54px; } html.theme-prakriti .pk-acc-avatar-ring { inset: -5px; } html.theme-prakriti .pk-acc-avatar-face { font-size: 19px; box-shadow: 0 0 0 3px rgb(var(--pk-forest)); } html.theme-prakriti .pk-acc-avatar-edit { width: 22px; height: 22px; bottom: -3px; inset-inline-end: -3px; } html.theme-prakriti .pk-acc-name { font-size: 18px; } html.theme-prakriti .pk-acc-crown-mandala { width: 220px; top: -60px; left: auto; right: -60px; margin: 0; } html.theme-prakriti .pk-acc-group { padding-block: 6px 4px; } html.theme-prakriti .pk-acc-link { min-height: 44px; padding-block: 3px; } html.theme-prakriti .pk-acc-link-icon { width: 34px; height: 34px; } html.theme-prakriti .pk-acc-foot { flex-direction: row; padding-top: 10px; } html.theme-prakriti .pk-acc-shop { flex: 1; } html.theme-prakriti .pk-acc-shop .pk-acc-link-arrow { display: none; } html.theme-prakriti .pk-acc-logout { flex-shrink: 0; } } @media (min-width: 1024px) { html.theme-prakriti .pk-acc-card { max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; } html.theme-prakriti:has(.pk-nav:not(.is-hidden)) .pk-acc-card { max-height: calc(100vh - var(--header-h, 76px) - 32px); } } /* Below lg: forest profile row + chip strip */ html.theme-prakriti .pk-acc-mobile { display: flex; flex-direction: column; gap: 12px; min-width: 0; } @media (min-width: 1024px) { html.theme-prakriti .pk-acc-mobile { display: none; } } html.theme-prakriti .pk-acc-mhead { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 24px; color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 140% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 65%); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-acc-mhead-mandala { position: absolute; z-index: -1; width: 180px; aspect-ratio: 1; right: -50px; top: -60px; color: rgb(var(--pk-sun) / .18); } html.pk-motion.theme-prakriti .pk-acc-mhead-mandala .pk-mandala { animation: pk-turn 90s linear infinite; } html.theme-prakriti .pk-acc-mhead .pk-acc-who { flex: 1; align-items: flex-start; } html.theme-prakriti .pk-acc-mhead .pk-acc-name { font-size: 18px; } html.theme-prakriti .pk-acc-mavatar { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 999px; font-family: var(--pk-font-display); font-size: 18px; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 3px rgb(var(--pk-forest)), 0 0 0 4.5px rgb(var(--pk-sun) / .6); } html.theme-prakriti .pk-acc-mavatar img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-acc-mout { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); transition: background-color .2s; } html.theme-prakriti .pk-acc-mout:hover { background: rgb(var(--pk-danger) / .6); } html.theme-prakriti .pk-acc-strip { position: relative; display: flex; gap: 4px; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 22px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } html.theme-prakriti .pk-acc-strip::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-acc-strip-glider { position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0; border-radius: 17px; background: rgb(var(--pk-forest)); box-shadow: 0 10px 20px -12px rgb(var(--pk-forest) / .8); opacity: 0; transition: transform .6s var(--pk-spring), width .4s var(--pk-ease), opacity .3s; } html.theme-prakriti .pk-acc-strip-glider.is-ready { opacity: 1; } html.theme-prakriti .pk-acc-chip { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px; border-radius: 17px; font-size: 13.5px; font-weight: 700; white-space: nowrap; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: color .3s; } html.theme-prakriti .pk-acc-chip .pk-icon { color: rgb(var(--pk-accent)); transition: color .3s; } html.theme-prakriti .pk-acc-chip.is-current, html.theme-prakriti .pk-acc-chip.is-current .pk-icon { color: #fff; } html.theme-prakriti .pk-acc-chip:last-child { margin-inline-end: 24px; } /* Page change: de-blur in, quick fade out — only while it runs, so nothing is left transformed (sticky toolbars and fixed modals inside the pages stay intact). */ .pk-acc-page-enter-active { transition: opacity .5s cubic-bezier(.22,1,.36,1), translate .6s cubic-bezier(.22,1,.36,1), filter .5s ease; } .pk-acc-page-leave-active { transition: opacity .18s ease, filter .18s ease; } .pk-acc-page-enter-from { opacity: 0; translate: 0 18px; filter: blur(8px); } .pk-acc-page-leave-to { opacity: 0; filter: blur(4px); } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-acc-crown .pk-leaves { display: none; } } /* 33. Account overview (prakriti/account/overview/OverviewComponent) ----------- Mirrors Optica's §21 logic. Cream hero (turning mandala, falling leaves that lean from the pointer, pointer glow) with a blooming name and a forest wallet card that tilts; count-up stat cards (completion ring); the latest order with a vine journey; recent orders; shortcut tiles. Reuses §31's pills, meta, copy button and empty state. Container queries: the account shell sets the width. */ html.theme-prakriti .pk-ov { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 24px); } /* Hero */ html.theme-prakriti .pk-ov-hero { --pk-hx: 70%; --pk-hy: 30%; --pk-px: 0; --pk-py: 0; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 26px; padding: clamp(24px, 4.4cqi, 44px); border-radius: 34px; background: radial-gradient(90% 120% at 100% 0%, var(--pk-tone-1), transparent 60%), radial-gradient(70% 100% at 0% 100%, var(--pk-tone-2), transparent 60%), rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } @container (min-width: 700px) { html.theme-prakriti .pk-ov-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; } } html.pk-motion.theme-prakriti .pk-ov-hero { animation: pk-oh-hero-in 1.1s var(--pk-ease) both; } html.theme-prakriti .pk-ov-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } html.theme-prakriti .pk-ov-hero-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(340px circle at var(--pk-hx) var(--pk-hy), rgb(var(--pk-sun) / .2), transparent 70%); } html.theme-prakriti .pk-ov-hero.is-lit .pk-ov-hero-glow { opacity: 1; } html.theme-prakriti .pk-ov-hero-mandala { position: absolute; width: clamp(320px, 58cqi, 540px); aspect-ratio: 1; top: -38%; left: -14%; color: rgb(var(--pk-accent) / .1); translate: calc(var(--pk-px) * -20px) calc(var(--pk-py) * -14px); transition: translate 1.2s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-ov-hero-mandala .pk-mandala { animation: pk-turn 150s linear infinite reverse; } html.theme-prakriti .pk-ov-hero .pk-leaves { opacity: .7; } html.theme-prakriti .pk-ov-hello { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; } html.theme-prakriti .pk-ov-greet { padding: 6px 12px 6px 10px; border-radius: 999px; background: rgb(var(--pk-surface) / .85); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ov-pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ov-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-ov-title { display: flex; flex-wrap: wrap; gap: 0 .24em; font-family: var(--pk-font-display); font-weight: 500; font-size: clamp(36px, 8cqi, 66px); line-height: 1; letter-spacing: -.035em; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ov-title .is-accent { font-style: italic; color: rgb(var(--pk-accent)); padding-inline-end: .05em; } html.theme-prakriti .pk-ov-lede { max-width: 440px; font-size: 15px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ov-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } /* Wallet card */ html.theme-prakriti .pk-ov-wallet-wrap { justify-self: stretch; perspective: 900px; } @container (min-width: 700px) { html.theme-prakriti .pk-ov-wallet-wrap { justify-self: end; } } html.theme-prakriti .pk-ov-wallet { --pk-rx: 0deg; --pk-ry: 0deg; --pk-gx: 50%; --pk-gy: 50%; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 340px; aspect-ratio: 1.6; padding: 20px 22px; border-radius: 24px; color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 140% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 65%); box-shadow: 0 30px 50px -24px rgb(var(--pk-forest) / .9); transform: rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transform-style: preserve-3d; transition: transform .6s var(--pk-ease); } @container (min-width: 700px) { html.theme-prakriti .pk-ov-wallet { width: clamp(260px, 38cqi, 340px); } } html.pk-motion.theme-prakriti .pk-ov-wallet-wrap .pk-ov-wallet { animation: pk-ov-float 6s ease-in-out 1.6s infinite; } @keyframes pk-ov-float { 50% { translate: 0 -8px; } } html.theme-prakriti .pk-ov-wallet.is-tilting { transition: transform .12s linear; animation-play-state: paused; } html.theme-prakriti .pk-ov-wallet-mandala { position: absolute; z-index: -1; width: 240px; aspect-ratio: 1; right: -70px; bottom: -110px; color: rgb(var(--pk-sun) / .22); } html.pk-motion.theme-prakriti .pk-ov-wallet-mandala .pk-mandala { animation: pk-turn 80s linear infinite; } html.theme-prakriti .pk-ov-wallet-glare { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--pk-gx) var(--pk-gy), rgb(255 255 255 / .18), transparent 65%); } html.theme-prakriti .pk-ov-wallet.is-tilting .pk-ov-wallet-glare { opacity: 1; } html.theme-prakriti .pk-ov-wallet-sheen { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .12) 50%, transparent 65%); background-size: 250% 100%; } html.pk-motion.theme-prakriti .pk-ov-wallet-sheen { animation: pk-sheen 4.5s linear infinite; } html.theme-prakriti .pk-ov-wallet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ov-wallet-chip { width: 40px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, rgb(var(--pk-sun)), rgb(var(--pk-sun-ink))); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); background-image: linear-gradient(90deg, transparent 45%, rgb(0 0 0 / .18) 45% 55%, transparent 55%), linear-gradient(0deg, transparent 45%, rgb(0 0 0 / .18) 45% 55%, transparent 55%), linear-gradient(135deg, rgb(var(--pk-sun)), rgb(var(--pk-sun-ink))); } html.theme-prakriti .pk-ov-wallet-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-cream-ink) / .7); } html.theme-prakriti .pk-ov-wallet-amount { font-family: var(--pk-font-display); font-weight: 500; font-size: clamp(28px, 6cqi, 38px); line-height: 1.1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ov-wallet-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--pk-cream-ink) / .85); } html.theme-prakriti .pk-ov-wallet-foot > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-ov-wallet-leaf { flex-shrink: 0; width: 26px; height: 26px; color: var(--pk-leaf-5); rotate: -20deg; } /* Stats */ html.theme-prakriti .pk-ov-stats { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } @container (min-width: 560px) { html.theme-prakriti .pk-ov-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } html.theme-prakriti .pk-ov-stat { --pk-tone: var(--pk-accent); --pk-rx: 0deg; --pk-ry: 0deg; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon go go" "num num ring" "label label ring"; align-items: center; gap: 6px 12px; padding: 20px; border-radius: 26px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transform: perspective(800px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .6s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-ov-stat.is-tilting { transition: transform .12s linear, box-shadow .4s; } html.theme-prakriti .pk-ov-stat:hover { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-tone) / .35); } html.theme-prakriti .pk-ov-stat::before { content: ""; position: absolute; z-index: -1; width: 160px; height: 160px; right: -60px; top: -70px; border-radius: 999px; background: rgb(var(--pk-tone) / .08); transition: transform .8s var(--pk-ease); } html.theme-prakriti .pk-ov-stat:hover::before { transform: scale(1.4); } html.theme-prakriti .pk-ov-stat-icon { grid-area: icon; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; color: rgb(var(--pk-tone)); background: rgb(var(--pk-tone) / .12); transition: transform .6s var(--pk-spring); } html.theme-prakriti .pk-ov-stat.is-warn .pk-ov-stat-icon { color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-ov-stat:hover .pk-ov-stat-icon { transform: rotate(-10deg) scale(1.08); } html.theme-prakriti .pk-ov-stat-go { grid-area: go; justify-self: end; align-self: start; color: rgb(var(--pk-muted)); transition: transform .4s var(--pk-ease), color .3s; } html.theme-prakriti .pk-ov-stat:hover .pk-ov-stat-go { color: rgb(var(--pk-tone)); transform: translate(2px, -2px); } html.theme-prakriti .pk-ov-stat-num { grid-area: num; margin-top: 8px; font-family: var(--pk-font-display); font-size: clamp(34px, 6cqi, 46px); font-weight: 500; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ov-stat-label { grid-area: label; font-size: 13px; font-weight: 600; text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ov-ring { --pk-share: 0; grid-area: ring; position: relative; display: grid; place-items: center; width: 54px; height: 54px; } html.theme-prakriti .pk-ov-ring svg { position: absolute; inset: 0; rotate: -90deg; fill: none; stroke-width: 4; } html.theme-prakriti .pk-ov-ring-track { stroke: rgb(var(--pk-line)); } html.theme-prakriti .pk-ov-ring-fill { stroke: rgb(var(--pk-tone)); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pk-share)); transition: stroke-dashoffset 1.4s var(--pk-ease) .4s; } html.theme-prakriti .pk-ov-ring em { font-style: normal; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--pk-tone)); } /* Latest order */ html.theme-prakriti .pk-ov-latest { --pk-tone: var(--pk-accent); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: clamp(18px, 3.4cqi, 28px); border-radius: 30px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ov-latest::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 120px; background: linear-gradient(180deg, rgb(var(--pk-tone) / .08), transparent); } html.theme-prakriti .pk-ov-latest-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; } html.theme-prakriti .pk-ov-latest-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html.theme-prakriti .pk-ov-serial-row { display: flex; align-items: center; gap: 6px; } html.theme-prakriti .pk-ov-serial { font-family: var(--pk-font-display); font-size: clamp(24px, 4.4cqi, 32px); font-weight: 500; letter-spacing: -.02em; color: rgb(var(--pk-ink)); transition: color .2s; } html.theme-prakriti .pk-ov-serial:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ov-latest-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } html.theme-prakriti .pk-ov-latest-amount > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ov-latest-amount strong { font-family: var(--pk-font-display); font-size: clamp(24px, 4.4cqi, 30px); font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ov-journey { --pk-step: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); } html.theme-prakriti .pk-ov-journey-rail { position: absolute; top: 22px; inset-inline: calc(100% / 8); height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgb(var(--pk-line)) 0 6px, transparent 6px 11px); } html.theme-prakriti .pk-ov-journey-rail span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-tone))); transform: scaleX(calc(var(--pk-step) / 3)); transform-origin: left; } html[dir="rtl"].theme-prakriti .pk-ov-journey-rail span { transform-origin: right; } html.pk-motion.theme-prakriti .pk-ov-latest.is-in .pk-ov-journey-rail span { animation: pk-oh-grow 1.4s var(--pk-ease) .3s backwards; } html.theme-prakriti .pk-ov-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } html.theme-prakriti .pk-ov-node-dot { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; color: rgb(var(--pk-muted)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); transition: background-color .5s, color .4s, box-shadow .5s; } html.theme-prakriti .pk-ov-node.is-done .pk-ov-node-dot { color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 10px 22px -10px rgb(var(--pk-forest) / .8); } html.pk-motion.theme-prakriti .pk-ov-latest.is-in .pk-ov-node.is-done .pk-ov-node-dot { animation: pk-ck-stamp .7s var(--pk-spring) backwards; animation-delay: calc(var(--pk-i) * .3s + .3s); } html.theme-prakriti .pk-ov-node.is-now .pk-ov-node-dot { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 6px rgb(var(--pk-sun) / .22); } html.pk-motion.theme-prakriti .pk-ov-node.is-now .pk-ov-node-dot { animation: pk-ck-beat 2.4s ease-in-out 1.5s infinite; } html.theme-prakriti .pk-ov-node em { font-style: normal; font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ov-node.is-done em { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ov-halt { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 18px; font-size: 14px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-tone)); background: rgb(var(--pk-tone) / .08); } html.theme-prakriti .pk-ov-latest-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px dashed rgb(var(--pk-line)); } @container (max-width: 479.98px) { html.theme-prakriti .pk-ov-latest-actions .pk-btn { flex: 1; } html.theme-prakriti .pk-ov-node em { font-size: 11px; } html.theme-prakriti .pk-ov-node-dot { width: 40px; height: 40px; } html.theme-prakriti .pk-ov-journey-rail { top: 19px; } } /* Sections */ html.theme-prakriti .pk-ov-section { display: flex; flex-direction: column; gap: 14px; } html.theme-prakriti .pk-ov-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.theme-prakriti .pk-ov-section-head h3 { font-family: var(--pk-font-display); font-size: clamp(20px, 3.4cqi, 26px); font-weight: 500; letter-spacing: -.02em; text-transform: capitalize; } /* Recent orders */ html.theme-prakriti .pk-ov-orders { display: flex; flex-direction: column; gap: 10px; } html.theme-prakriti .pk-ov-order { --pk-tone: var(--pk-accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-ease), box-shadow .4s; } html.pk-motion.theme-prakriti .pk-ov-order { animation: pk-oh-card-in .8s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 80ms + .3s); } html.theme-prakriti .pk-ov-order:hover { transform: translateX(4px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-tone) / .3); } html.theme-prakriti .pk-ov-order-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgb(var(--pk-tone)); background: rgb(var(--pk-tone) / .12); } html.theme-prakriti .pk-ov-order.is-warn .pk-ov-order-tile { color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-ov-order-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; } html.theme-prakriti .pk-ov-order-serial { font-family: var(--pk-font-display); font-size: 16.5px; font-weight: 600; color: rgb(var(--pk-ink)); transition: color .2s; } html.theme-prakriti .pk-ov-order-serial:hover { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ov-order-pills { display: flex; flex-wrap: wrap; gap: 6px; } html.theme-prakriti .pk-ov-order-amount { font-family: var(--pk-font-display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ov-order-actions { display: flex; gap: 6px; } html.theme-prakriti .pk-ov-order-actions .pk-icon-btn { width: 40px; height: 40px; } html.theme-prakriti .pk-ov-order-go { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-ov-order-go:hover { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ov-order-go .pk-icon { transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-ov-order:hover .pk-ov-order-go .pk-icon { transform: translateX(2px); } @container (max-width: 639.98px) { html.theme-prakriti .pk-ov-order { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile id amount" "pills pills actions"; row-gap: 12px; } html.theme-prakriti .pk-ov-order-tile { grid-area: tile; } html.theme-prakriti .pk-ov-order-id { grid-area: id; } html.theme-prakriti .pk-ov-order-amount { grid-area: amount; } html.theme-prakriti .pk-ov-order-pills { grid-area: pills; } html.theme-prakriti .pk-ov-order-actions { grid-area: actions; } } /* Shortcuts */ html.theme-prakriti .pk-ov-links { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @container (min-width: 640px) { html.theme-prakriti .pk-ov-links { grid-template-columns: repeat(5, minmax(0, 1fr)); } } html.theme-prakriti .pk-ov-link { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 16px 16px; border-radius: 24px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-ease), box-shadow .4s, background-color .4s; } html.theme-prakriti .pk-ov-link:hover { transform: translateY(-4px); background: rgb(var(--pk-forest)); box-shadow: 0 20px 34px -18px rgb(var(--pk-forest) / .9); } html.theme-prakriti .pk-ov-link-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: color .3s, background-color .3s, transform .55s var(--pk-spring); } html.theme-prakriti .pk-ov-link:hover .pk-ov-link-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transform: rotate(-10deg) scale(1.06); } html.theme-prakriti .pk-ov-link-text { font-size: 14px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink)); transition: color .3s; } html.theme-prakriti .pk-ov-link:hover .pk-ov-link-text { color: #fff; } html.theme-prakriti .pk-ov-link-go { position: absolute; top: 18px; inset-inline-end: 16px; color: rgb(var(--pk-muted)); transition: color .3s, transform .4s var(--pk-ease); } html.theme-prakriti .pk-ov-link:hover .pk-ov-link-go { color: rgb(var(--pk-sun)); transform: translate(2px, -2px); } /* Skeletons */ html.theme-prakriti .pk-ov-skel { display: inline-block; width: 52px; height: 36px; vertical-align: middle; border-radius: 10px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)) 25%, rgb(var(--pk-bg)) 50%, rgb(var(--pk-bg-2)) 75%); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } html.theme-prakriti .pk-ov-skel--light { width: 140px; background: rgb(255 255 255 / .12); animation: pk-pulse 1.4s ease-in-out infinite; } html.theme-prakriti .pk-ov-order--skel { display: flex; } html.theme-prakriti .pk-ov-skel--tile { width: 44px; height: 44px; border-radius: 999px; } html.theme-prakriti .pk-ov-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; } html.theme-prakriti .pk-ov-skel-lines .pk-ov-skel { width: 46%; height: 14px; } html.theme-prakriti .pk-ov-skel-lines .pk-ov-skel + .pk-ov-skel { width: 30%; height: 11px; } html.theme-prakriti .pk-ov-skel--pill { width: 90px; height: 34px; border-radius: 999px; } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-ov-hero .pk-leaves { display: none; } } /* 34. Return orders (prakriti/account/returnOrders/ReturnOrdersComponent) ------ Built on §31 (forest hero + donut, toolbar, cards, pager). Adds the "how returns work" strip (arch tiles joined by a growing vine), the reason chip, and a labelled four-step journey whose reached steps are leaves. Prefix pk-rt-. */ html.theme-prakriti .pk-rt-how { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @container (max-width: 639.98px) { html.theme-prakriti .pk-rt-how { grid-template-columns: 1fr; gap: 8px; } } html.theme-prakriti .pk-rt-how li { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 24px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-rt-how li:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .3); } /* Between tiles: a short vine with a leaf bud that draws in after the tiles arrive. */ @container (min-width: 640px) { html.theme-prakriti .pk-rt-how li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 50%; inset-inline-end: -14px; width: 14px; height: 2px; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--pk-ease); transition-delay: calc(var(--pk-i, 0) * .25s + .6s); } html[dir="rtl"].theme-prakriti .pk-rt-how li:not(:last-child)::after { transform-origin: right; } html.theme-prakriti .pk-rt-how.is-in li:not(:last-child)::after, html:not(.pk-motion).theme-prakriti .pk-rt-how li:not(:last-child)::after { transform: none; } } html.theme-prakriti .pk-rt-how-icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: transform .55s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-rt-how li:hover .pk-rt-how-icon { transform: rotate(-10deg) scale(1.08); color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-rt-how-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } html.theme-prakriti .pk-rt-how-copy em { font-style: italic; font-family: var(--pk-font-display); font-size: 13px; font-weight: 600; color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-rt-how-copy strong { font-family: var(--pk-font-display); font-size: 16px; font-weight: 500; color: rgb(var(--pk-ink)); text-transform: capitalize; } html.theme-prakriti .pk-rt-how-copy small { font-size: 12.5px; line-height: 1.5; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-rt-reason { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; margin-top: 4px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: rgb(var(--pk-clay)); background: rgb(var(--pk-clay) / .08); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-rt-money-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-rt-halt { font-size: 13px; color: rgb(var(--pk-muted)); } /* Labelled journey: a dashed path that fills to the current step; reached steps unfurl a leaf. */ html.theme-prakriti .pk-rt-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 440px); } html.theme-prakriti .pk-rt-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; } html.theme-prakriti .pk-rt-steps li::before { content: ""; position: absolute; top: 10px; inset-inline-end: 50%; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, rgb(var(--pk-line)) 0 5px, transparent 5px 9px); } html.theme-prakriti .pk-rt-steps li:first-child::before, html.theme-prakriti .pk-rt-steps li:first-child::after { display: none; } html.theme-prakriti .pk-rt-steps li::after { content: ""; position: absolute; top: 10px; inset-inline-end: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-tone))); transform: scaleX(0); transform-origin: left; } html[dir="rtl"].theme-prakriti .pk-rt-steps li::after { transform-origin: right; } html.theme-prakriti .pk-rt-steps li.is-done::after { transform: scaleX(1); } html.pk-motion.theme-prakriti .pk-rt-steps li.is-done::after { animation: pk-oh-grow .6s var(--pk-ease) backwards; animation-delay: calc(var(--pk-s, 0) * .2s + min(var(--pk-i, 0), 10) * 70ms + .4s); } html.theme-prakriti .pk-rt-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); } html.theme-prakriti .pk-rt-steps i .pk-leaf-svg { width: 20px; height: 20px; color: var(--pk-leaf-1); transform: rotate(-30deg) scale(0); transform-origin: 50% 90%; } html.theme-prakriti .pk-rt-steps li.is-done i { background: transparent; box-shadow: none; } html.theme-prakriti .pk-rt-steps li.is-done i .pk-leaf-svg { transform: rotate(-30deg) scale(1); } html.theme-prakriti .pk-rt-card.is-good .pk-rt-steps li.is-done:last-child i .pk-leaf-svg { color: var(--pk-leaf-5); } html.pk-motion.theme-prakriti .pk-rt-steps li.is-done i .pk-leaf-svg { animation: pk-oh-unfurl .7s var(--pk-spring) backwards; animation-delay: calc(var(--pk-s, 0) * .2s + min(var(--pk-i, 0), 10) * 70ms + .55s); } html.theme-prakriti .pk-rt-steps li.is-now i::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: rgb(var(--pk-tone) / .5); animation: pk-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-rt-steps span { font-size: 10.5px; font-weight: 700; color: rgb(var(--pk-muted)); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html.theme-prakriti .pk-rt-steps li.is-done span { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-rt-card .pk-oh-state { flex: 1 1 320px; } @container (max-width: 479.98px) { html.theme-prakriti .pk-rt-steps { width: 100%; } } /* 35. Account forms shell + account info (prakriti/account/accountInfo) --------- pk-af-*: the shared form-page shell (cream hero reusing §33's glow / mandala / title, cards, fields with a leading icon + validity tick on §29's pk-ck-field, a floating save bar). NOT pk-acc-* — that prefix is the §32 sidebar shell. pk-ai-*: photo dropzone with live preview and the profile-strength ring. */ html.theme-prakriti .pk-af { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 2.6vw, 22px); } @media (max-width: 1023.98px) { html.theme-prakriti .pk-af { padding-bottom: 24px; } } html.theme-prakriti .pk-af-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; } html.theme-prakriti .pk-af-hero { --pk-hx: 50%; --pk-hy: 0%; --pk-px: 0; --pk-py: 0; position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; align-items: center; justify-items: start; padding: clamp(22px, 4.5cqi, 40px); border-radius: 34px; background: radial-gradient(90% 120% at 100% 0%, var(--pk-tone-1), transparent 60%), radial-gradient(70% 100% at 0% 100%, var(--pk-tone-2), transparent 60%), rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); } @container (min-width: 620px) { html.theme-prakriti .pk-af-hero { grid-template-columns: auto minmax(0, 1fr); gap: 26px 32px; } } @container (min-width: 900px) { html.theme-prakriti .pk-af-hero { grid-template-columns: auto minmax(0, 1fr) auto; } } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-prakriti .pk-af-hero > :nth-child(4) { grid-column: 1 / -1; justify-self: stretch; } } html.pk-motion.theme-prakriti .pk-af-hero { animation: pk-oh-hero-in 1.1s var(--pk-ease) both; } html.theme-prakriti .pk-af-hero.is-lit .pk-ov-hero-glow { opacity: 1; } html.theme-prakriti .pk-af-hero .pk-leaves { opacity: .7; } html.theme-prakriti .pk-af-title { font-size: clamp(28px, 4.6cqi, 46px); overflow-wrap: break-word; } html.theme-prakriti .pk-af-textbtn { font-weight: 700; color: rgb(var(--pk-accent)); text-decoration: underline; text-underline-offset: 3px; } /* Cards */ html.theme-prakriti .pk-af-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(18px, 4cqi, 28px); border-radius: 30px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-af-card-head { display: flex; align-items: center; gap: 14px; } html.theme-prakriti .pk-af-card-head > div { min-width: 0; } html.theme-prakriti .pk-af-card-head h3 { font-family: var(--pk-font-display); font-weight: 500; font-size: 21px; letter-spacing: -.02em; text-transform: capitalize; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-af-card-head p { font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-af-card-icon { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: transform .55s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-af-card:hover .pk-af-card-icon { transform: rotate(-10deg) scale(1.06); color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-af-links { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; } /* Fields: §29 checkout field + leading icon + validity tick */ @container (min-width: 520px) { html.theme-prakriti .pk-af .pk-ck-grid { grid-template-columns: 1fr 1fr; } html.theme-prakriti .pk-af .pk-ck-span { grid-column: 1 / -1; } } @container (max-width: 519.98px) { html.theme-prakriti .pk-af .pk-ck-grid { grid-template-columns: 1fr; } } html.theme-prakriti .pk-af-input { position: relative; display: block; } html.theme-prakriti .pk-af-field input { height: 56px; } html.theme-prakriti .pk-af-field .pk-ck-phone { position: relative; height: 56px; } html.theme-prakriti .pk-af-input input { padding-inline: 48px 48px; } html.theme-prakriti .pk-af-input-icon { position: absolute; top: 50%; inset-inline-start: 17px; transform: translateY(-50%); color: rgb(var(--pk-muted)); pointer-events: none; transition: color .25s, transform .45s var(--pk-spring); } html.theme-prakriti .pk-af-input:focus-within .pk-af-input-icon { color: rgb(var(--pk-accent)); transform: translateY(-50%) scale(1.14) rotate(-6deg); } html.theme-prakriti .pk-af-field.has-error .pk-af-input-icon { color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-af-tick { position: absolute; top: 50%; inset-inline-end: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: #fff; background: rgb(var(--pk-good)); pointer-events: none; transform: translateY(-50%) scale(0); transition: transform .5s var(--pk-spring); } html.theme-prakriti .pk-af-field.is-valid:not(.has-error) .pk-af-tick { transform: translateY(-50%) scale(1); } html.theme-prakriti .pk-af-field label.pk-ck-field-label { cursor: pointer; } /* Floating save bar */ html.theme-prakriti .pk-af-bar { position: sticky; bottom: calc(16px + var(--pk-tabbar-h)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest) / .94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: var(--pk-shadow-3); } html.theme-prakriti .pk-af-bar-msg { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; } html.theme-prakriti .pk-af-bar-dot { position: relative; width: 9px; height: 9px; border-radius: 999px; background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-af-bar-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-af-bar-dot.is-good { background: rgb(120 200 140); } html.theme-prakriti .pk-af-bar-actions { display: flex; gap: 8px; margin-inline-start: auto; } html.theme-prakriti .pk-af-bar .pk-btn--ghost { color: #fff; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); -webkit-backdrop-filter: none; backdrop-filter: none; } html.theme-prakriti .pk-af-bar .pk-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; } html.theme-prakriti .pk-af-bar .pk-btn--primary { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: none; } html.theme-prakriti .pk-af-bar .pk-btn--primary::before { background: #fff; } @container (max-width: 479.98px) { html.theme-prakriti .pk-af-bar { border-radius: 24px; } html.theme-prakriti .pk-af-bar-actions { flex: 1 1 100%; } html.theme-prakriti .pk-af-bar-actions .pk-btn { flex: 1; } } .pk-af-bar-enter-active, .pk-af-bar-leave-active { transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); } .pk-af-bar-enter-from, .pk-af-bar-leave-to { opacity: 0; transform: translateY(30px) scale(.96); } /* Photo dropzone */ html.theme-prakriti .pk-ai-photo { position: relative; display: grid; place-items: center; width: clamp(108px, 22cqi, 140px); aspect-ratio: 1; border-radius: 999px; cursor: pointer; } html.theme-prakriti .pk-ai-ring { position: absolute; inset: -8px; border-radius: inherit; border: 2px dashed rgb(var(--pk-sun) / .8); pointer-events: none; } html.pk-motion.theme-prakriti .pk-ai-ring { animation: pk-spin-plain 24s linear infinite; } html.theme-prakriti .pk-ai-face { position: relative; overflow: hidden; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 5px rgb(var(--pk-surface)), 0 20px 40px -18px rgb(var(--pk-sun-ink) / .8); transition: transform .55s var(--pk-spring); } html.theme-prakriti .pk-ai-face img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-ai-initials { font-family: var(--pk-font-display); font-weight: 500; font-size: clamp(36px, 8cqi, 50px); letter-spacing: -.03em; } html.theme-prakriti .pk-ai-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: inherit; color: #fff; background: rgb(var(--pk-forest) / .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; } html.theme-prakriti .pk-ai-veil small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center; padding-inline: 8px; } html.theme-prakriti .pk-ai-photo:hover .pk-ai-veil, html.theme-prakriti .pk-ai-photo:focus-within .pk-ai-veil, html.theme-prakriti .pk-ai-photo.is-drag .pk-ai-veil { opacity: 1; } html.theme-prakriti .pk-ai-photo:hover .pk-ai-face, html.theme-prakriti .pk-ai-photo.is-drag .pk-ai-face { transform: scale(1.05) rotate(-2deg); } html.theme-prakriti .pk-ai-photo.is-drag .pk-ai-ring { inset: -16px; border-color: rgb(var(--pk-accent)); animation-duration: 6s; } html.theme-prakriti .pk-ai-photo.is-invalid .pk-ai-face { box-shadow: 0 0 0 3px rgb(var(--pk-danger)); } html.theme-prakriti .pk-ai-badge { position: absolute; bottom: 4%; inset-inline-end: 4%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); box-shadow: var(--pk-shadow-2); transition: transform .5s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-ai-photo:hover .pk-ai-badge { transform: rotate(-12deg) scale(1.1); color: rgb(var(--pk-forest)); background: #fff; } html.theme-prakriti .pk-ai-photo.is-new .pk-ai-badge { background: rgb(var(--pk-good)); } html.theme-prakriti .pk-ai-hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ai-hint.is-danger { color: rgb(var(--pk-danger)); } /* Profile strength */ html.theme-prakriti .pk-ai-meter-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 26px; background: rgb(var(--pk-surface) / .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ai-meter { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 86px; height: 86px; } html.theme-prakriti .pk-ai-meter svg { position: absolute; inset: 0; rotate: -90deg; } html.theme-prakriti .pk-ai-meter circle { fill: none; stroke-width: 6; stroke-linecap: round; } html.theme-prakriti .pk-ai-meter-track { stroke: rgb(var(--pk-line)); } html.theme-prakriti .pk-ai-meter-fill { stroke: rgb(var(--pk-sun)); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pk-share, 0)); transition: stroke-dashoffset 1.2s var(--pk-ease), stroke .4s; } html.pk-motion.theme-prakriti .pk-ai-meter-fill { animation: pk-ai-meter-in 1.6s var(--pk-ease) .5s backwards; } @keyframes pk-ai-meter-in { from { stroke-dashoffset: 1; } } html.theme-prakriti .pk-ai-meter.is-full .pk-ai-meter-fill { stroke: rgb(var(--pk-good)); } html.theme-prakriti .pk-ai-meter strong { font-family: var(--pk-font-display); font-size: 24px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ai-meter strong small { font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ai-meter-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html.theme-prakriti .pk-ai-meter-copy > span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ai-checks { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 14px; } html.theme-prakriti .pk-ai-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); text-transform: capitalize; white-space: nowrap; transition: color .3s; } html.theme-prakriti .pk-ai-checks i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 999px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); transition: background-color .35s, color .35s, box-shadow .35s, transform .5s var(--pk-spring); } html.theme-prakriti .pk-ai-checks li.is-on { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ai-checks li.is-on i { color: #fff; background: rgb(var(--pk-good)); box-shadow: none; transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-af-hero .pk-leaves { display: none; } } /* 36. Change password + address book (prakriti/account/{changePassword,address}) ---- Both sit on §35's pk-af-* shell; generated from Optica's §25/§26 by prefix conversion and re-toned. Password (pk-pw-*; pk-cp-* is the §30 cart page): padlock orb that locks as the form becomes valid, step dots, eye toggles, caps-lock warning, strength bars + rules (tones are --pk-s-*, NOT --pk-good, which they would shadow), suggestion generator, in-card success. Address (pk-ad-*): pin orb over sonar waves, map-tile cards with a dropping pin and a marching route, inline delete confirm, add tile; the add / edit drawer is §29's pk-ck-drawer. */ /* Password: padlock orb */ html.theme-prakriti .pk-pw-orb { position: relative; display: grid; place-items: center; width: clamp(104px, 22cqi, 132px); aspect-ratio: 1; border-radius: 999px; } html.theme-prakriti .pk-pw-orb .pk-ai-ring { inset: -7px; } html.theme-prakriti .pk-pw-orb-face { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 75%); box-shadow: 0 20px 44px -18px rgb(var(--pk-ink) / .7); transition: background .6s; } html.theme-prakriti .pk-pw.is-ready .pk-pw-orb-face, html.theme-prakriti .pk-pw.is-done .pk-pw-orb-face { background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-good)), rgb(var(--pk-forest)) 75%); } html.theme-prakriti .pk-pw-lock { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } html.theme-prakriti .pk-pw-lock-shackle { transform: translateY(-5px) rotate(-18deg); transform-origin: 32px 22px; transition: transform .6s var(--pk-spring); } html.theme-prakriti .pk-pw.is-ready .pk-pw-lock-shackle, html.theme-prakriti .pk-pw.is-done .pk-pw-lock-shackle { transform: none; } html.theme-prakriti .pk-pw-lock-body { fill: rgb(255 255 255 / .12); } html.theme-prakriti .pk-pw-lock-hole { transition: opacity .3s; } html.theme-prakriti .pk-pw-lock-check { stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--pk-ease) .25s; } html.theme-prakriti .pk-pw.is-ready .pk-pw-lock-hole, html.theme-prakriti .pk-pw.is-done .pk-pw-lock-hole { opacity: 0; } html.theme-prakriti .pk-pw.is-ready .pk-pw-lock-check, html.theme-prakriti .pk-pw.is-done .pk-pw-lock-check { stroke-dashoffset: 0; } html.pk-motion.theme-prakriti .pk-pw:not(.is-ready):not(.is-done) .pk-pw-orb-face .pk-pw-lock { animation: pk-pw-wiggle 4s ease-in-out 1.5s infinite; } @keyframes pk-pw-wiggle { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-8deg); } 92% { transform: rotate(7deg); } 95% { transform: rotate(-4deg); } } html.theme-prakriti .pk-pw-orb-burst { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } html.theme-prakriti .pk-pw.is-ready .pk-pw-orb-burst { animation: pk-pw-burst .9s var(--pk-ease); } @keyframes pk-pw-burst { from { box-shadow: 0 0 0 0 rgb(var(--pk-good) / .55); } to { box-shadow: 0 0 0 28px rgb(var(--pk-good) / 0); } } /* Password: steps */ html.theme-prakriti .pk-pw-steps { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 22px; background: rgb(var(--pk-surface) / .75); -webkit-backdrpk-filter: blur(10px); backdrpk-filter: blur(10px); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-prakriti .pk-pw-steps { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; } } html.theme-prakriti .pk-pw-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-muted)); text-transform: capitalize; white-space: nowrap; transition: color .3s; } html.theme-prakriti .pk-pw-step-dot { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); transition: background-color .4s, color .4s, box-shadow .4s; } html.theme-prakriti .pk-pw-steps li.is-now { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pw-steps li.is-now .pk-pw-step-dot { color: rgb(var(--pk-accent)); box-shadow: inset 0 0 0 2px rgb(var(--pk-accent)); } html.theme-prakriti .pk-pw-steps li.is-now .pk-pw-step-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgb(var(--pk-accent) / .5); animation: pk-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-pw-steps li.is-on { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pw-steps li.is-on .pk-pw-step-dot { color: #fff; background: rgb(var(--pk-good)); box-shadow: 0 6px 14px -6px rgb(var(--pk-good) / .8); } /* Password: layout, fields, actions */ html.theme-prakriti .pk-pw-layout { display: grid; gap: clamp(16px, 2.6vw, 22px); align-items: start; } @container (min-width: 820px) { html.theme-prakriti .pk-pw-layout { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); } html.theme-prakriti .pk-pw-health { position: sticky; top: calc(var(--header-h, 76px) + 16px); } } html.theme-prakriti .pk-pw-card { overflow: hidden; } html.theme-prakriti .pk-pw-form { display: flex; flex-direction: column; gap: 20px; } html.theme-prakriti .pk-pw-fields { display: flex; flex-direction: column; gap: 16px; } html.theme-prakriti .pk-pw-fields .pk-af-input input { padding-inline-end: 84px; letter-spacing: .02em; } html.theme-prakriti .pk-pw-fields .pk-af-tick { inset-inline-end: 52px; } html.theme-prakriti .pk-pw-eye { position: absolute; top: 50%; inset-inline-end: 8px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: rgb(var(--pk-muted)); transform: translateY(-50%); transition: background-color .2s, color .2s; } html.theme-prakriti .pk-pw-eye:hover { color: rgb(var(--pk-ink)); background: rgb(var(--pk-ink) / .06); } html.theme-prakriti .pk-pw-eye[aria-pressed="true"] { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ck-field small.pk-pw-note { color: rgb(var(--pk-danger)); } html.theme-prakriti .pk-ck-field small.pk-pw-note.is-good { display: inline-flex; align-items: center; gap: 5px; color: rgb(var(--pk-good)); } html.theme-prakriti .pk-pw-caps { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-sun-ink)); background: rgb(var(--pk-sun) / .18); } html.theme-prakriti .pk-pw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-pw-gen { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 18px; text-align: start; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .3s, background-color .3s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-pw-gen:hover { background: rgb(var(--pk-accent) / .06); box-shadow: inset 0 0 0 1px rgb(var(--pk-accent) / .4); } html.theme-prakriti .pk-pw-gen:active { transform: scale(.98); } html.theme-prakriti .pk-pw-gen-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .5s var(--pk-spring); } html.theme-prakriti .pk-pw-gen:hover .pk-pw-gen-icon { transform: rotate(-20deg) scale(1.08); } html.theme-prakriti .pk-pw-gen strong { display: block; font-size: 13.5px; font-weight: 600; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pw-gen small { display: block; font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pw-submit { margin-inline-start: auto; } @container (max-width: 559.98px) { html.theme-prakriti .pk-pw-gen, html.theme-prakriti .pk-pw-submit { flex: 1 1 100%; } } /* Password: success */ html.theme-prakriti .pk-pw-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(16px, 5cqi, 40px) 8px; text-align: center; } html.theme-prakriti .pk-pw-done h3 { font-family: var(--pk-font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; } html.theme-prakriti .pk-pw-done p { max-width: 380px; font-size: 14px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pw-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } html.theme-prakriti .pk-pw-done-badge { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; } html.theme-prakriti .pk-pw-done-badge svg { width: 100%; height: 100%; fill: none; stroke: rgb(var(--pk-good)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } html.theme-prakriti .pk-pw-done-badge circle { stroke-dasharray: 1; animation: pk-af-draw .8s var(--pk-ease) both; fill: rgb(var(--pk-good) / .08); } html.theme-prakriti .pk-pw-done-badge path { stroke-dasharray: 1; animation: pk-af-draw .5s var(--pk-ease) .6s both; } html.theme-prakriti .pk-pw-done-badge i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 999px; background: rgb(var(--pk-accent)); opacity: 0; animation: pk-pw-spark .9s var(--pk-ease) .7s both; --pk-a: calc(var(--pk-n) * 45deg); } html.theme-prakriti .pk-pw-done-badge i:nth-child(even) { background: rgb(var(--pk-sun)); } @keyframes pk-pw-spark { 0% { opacity: 1; transform: rotate(var(--pk-a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--pk-a)) translateY(-64px) scale(.4); } } /* Password: health */ html.theme-prakriti .pk-pw-health { gap: 14px; } html.theme-prakriti .pk-pw-health-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html.theme-prakriti .pk-pw-health-head > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pw-health-head strong { font-family: var(--pk-font-display); font-size: 18px; font-weight: 600; text-transform: capitalize; } html.theme-prakriti .pk-pw { --pk-s-weak: var(--pk-danger); --pk-s-fair: var(--pk-sun-ink); --pk-s-good: var(--pk-accent); --pk-s-strong: var(--pk-good); } html.theme-prakriti .pk-pw-health-head strong.is-weak { color: rgb(var(--pk-s-weak)); } html.theme-prakriti .pk-pw-health-head strong.is-fair { color: rgb(var(--pk-s-fair)); } html.theme-prakriti .pk-pw-health-head strong.is-good { color: rgb(var(--pk-s-good)); } html.theme-prakriti .pk-pw-health-head strong.is-strong { color: rgb(var(--pk-s-strong)); } html.theme-prakriti .pk-pw-bars { --pk-bar: var(--pk-line); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } html.theme-prakriti .pk-pw-bars.is-weak { --pk-bar: var(--pk-s-weak); } html.theme-prakriti .pk-pw-bars.is-fair { --pk-bar: var(--pk-s-fair); } html.theme-prakriti .pk-pw-bars.is-good { --pk-bar: var(--pk-s-good); } html.theme-prakriti .pk-pw-bars.is-strong { --pk-bar: var(--pk-s-strong); } html.theme-prakriti .pk-pw-bars i { position: relative; overflow: hidden; height: 8px; border-radius: 999px; background: rgb(var(--pk-line)); } html.theme-prakriti .pk-pw-bars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgb(var(--pk-bar)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--pk-ease), background-color .4s; transition-delay: calc(var(--pk-n) * 60ms); } html.theme-prakriti .pk-pw-bars i.is-on::after { transform: scaleX(1); } html.theme-prakriti .pk-pw-bars.is-strong i.is-on::after { background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent); background-size: 200% 100%; animation: pk-sheen 2.4s linear infinite; } html.theme-prakriti .pk-pw-health-copy { font-size: 13px; line-height: 1.55; color: rgb(var(--pk-ink-2)); min-height: 2.6em; } html.theme-prakriti .pk-pw-rules { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-pw-rules li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgb(var(--pk-muted)); transition: color .3s; } html.theme-prakriti .pk-pw-rules li.is-on { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-pw-rules em { margin-inline-start: auto; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pw-rule-dot { flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; color: transparent; box-shadow: inset 0 0 0 1.5px rgb(var(--pk-line)); transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--pk-spring); } html.theme-prakriti .pk-pw-rules li.is-on .pk-pw-rule-dot { color: #fff; background: rgb(var(--pk-good)); box-shadow: none; transform: scale(1.1); } html.theme-prakriti .pk-pw-tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .06); } html.theme-prakriti .pk-pw-tip .pk-icon { flex-shrink: 0; margin-top: 1px; } html.theme-prakriti .pk-pw-tip p { font-size: 12.5px; line-height: 1.55; color: rgb(var(--pk-ink-2)); } /* Hero orb: pin bobbing over sonar waves, a satellite dot in orbit */ html.theme-prakriti .pk-ad-orb { position: relative; display: grid; place-items: center; width: clamp(104px, 22cqi, 132px); aspect-ratio: 1; } html.theme-prakriti .pk-ad-orb-wave { position: absolute; inset: 18%; border-radius: 999px; border: 1.5px solid rgb(var(--pk-accent) / .5); animation: pk-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-ad-orb-wave--2 { animation-delay: .9s; } html.theme-prakriti .pk-ad-orb-wave--3 { animation-delay: 1.8s; } html.theme-prakriti .pk-ad-orb-face { position: relative; z-index: 1; display: grid; place-items: center; width: 64%; height: 64%; border-radius: 999px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 75%); box-shadow: 0 18px 40px -16px rgb(var(--pk-accent) / .8); } html.pk-motion.theme-prakriti .pk-ad-orb-pin { animation: pk-ad-drop 1s var(--pk-spring) .4s backwards, pk-ad-bob 3s ease-in-out 1.6s infinite; } @keyframes pk-ad-drop { from { transform: translateY(-60px); opacity: 0; } 60% { opacity: 1; } } @keyframes pk-ad-bob { 50% { transform: translateY(-5px); } } html.theme-prakriti .pk-ad-orb-shadow { position: absolute; z-index: 1; bottom: 30%; width: 22%; height: 5px; border-radius: 999px; background: rgb(0 0 0 / .25); filter: blur(2px); animation: pk-ad-shadow 3s ease-in-out 1.6s infinite; } @keyframes pk-ad-shadow { 50% { transform: scaleX(.7); opacity: .6; } } html.theme-prakriti .pk-ad-orbit { position: absolute; inset: 0; border-radius: 999px; border: 1px dashed rgb(var(--pk-accent) / .3); animation: pk-spin-plain 14s linear infinite; } html.theme-prakriti .pk-ad-orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 999px; background: rgb(var(--pk-sun)); box-shadow: 0 0 0 4px rgb(var(--pk-sun) / .25); } html.theme-prakriti .pk-ad-side { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } @container (min-width: 620px) and (max-width: 899.98px) { html.theme-prakriti .pk-ad-side { flex-direction: row; align-items: center; justify-content: space-between; } } html.theme-prakriti .pk-ad-stat { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; border-radius: 20px; background: rgb(var(--pk-surface) / .75); -webkit-backdrpk-filter: blur(10px); backdrpk-filter: blur(10px); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ad-stat strong { display: inline-block; font-family: var(--pk-font-display); font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ad-stat span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--pk-muted)); } /* Search */ html.theme-prakriti .pk-ad-tools { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 22px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ad-search { max-width: none; } html.theme-prakriti .pk-ad-search:focus-within { max-width: none; } html.theme-prakriti .pk-ad-tools-count { flex-shrink: 0; padding-inline-end: 10px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-muted)); font-variant-numeric: tabular-nums; } /* Grid + cards */ html.theme-prakriti .pk-ad-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; } html.theme-prakriti .pk-ad-card { --pk-rx: 0deg; --pk-ry: 0deg; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; border-radius: 26px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transform: perspective(900px) rotateX(var(--pk-rx)) rotateY(var(--pk-ry)); transition: transform .6s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-ad-card.is-tilting { transition: transform .12s linear, box-shadow .4s; } html.theme-prakriti .pk-ad-card:not(.pk-ad-new):hover { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .35); } html.pk-motion.theme-prakriti .pk-ad-card { animation: pk-oh-card-in .8s var(--pk-ease) backwards; animation-delay: calc(min(var(--pk-i, 0), 10) * 80ms + 80ms); } html.theme-prakriti .pk-ad-card.is-flash { animation: pk-ck-flash 1.3s var(--pk-ease) 2; } html.theme-prakriti .pk-ad-map { position: relative; height: 112px; overflow: hidden; background: linear-gradient(160deg, var(--pk-tone-1), var(--pk-tone-2)), rgb(var(--pk-bg)); } html.theme-prakriti .pk-ad-map svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--pk-ease); } html.theme-prakriti .pk-ad-card:hover .pk-ad-map svg { transform: scale(1.08); } html.theme-prakriti .pk-ad-road { fill: none; stroke: rgb(var(--pk-surface)); stroke-width: 9; stroke-linecap: round; } html.theme-prakriti .pk-ad-road--thin { stroke-width: 5; opacity: .85; } html.theme-prakriti .pk-ad-route { fill: none; stroke: rgb(var(--pk-accent)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .02 .025; } html.pk-motion.theme-prakriti .pk-ad-route { animation: pk-ad-route 1.4s linear infinite; } @keyframes pk-ad-route { to { stroke-dashoffset: -.045; } } html.theme-prakriti .pk-ad-map-pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px 0 0 -20px; color: #fff; filter: drpk-shadow(0 8px 10px rgb(var(--pk-ink) / .35)); } html.theme-prakriti .pk-ad-map-pin .pk-icon { fill: rgb(var(--pk-accent)); stroke: #fff; } html.pk-motion.theme-prakriti .pk-ad-map-pin { animation: pk-ad-drop .9s var(--pk-spring) backwards; animation-delay: calc(min(var(--pk-i, 0), 10) * 80ms + .5s); } html.theme-prakriti .pk-ad-card:hover .pk-ad-map-pin { animation: pk-ad-bob 1.4s ease-in-out infinite; } html.theme-prakriti .pk-ad-map-pin::after { content: ""; position: absolute; bottom: 2px; width: 14px; height: 4px; border-radius: 999px; background: rgb(var(--pk-ink) / .25); z-index: -1; } html.theme-prakriti .pk-ad-index { position: absolute; top: 12px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 999px; font-family: var(--pk-font-display); font-size: 12px; font-weight: 600; color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface) / .9); box-shadow: var(--pk-shadow-1); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ad-zip { position: absolute; bottom: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgb(var(--pk-ink) / .85); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-ad-zip i { width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--pk-sun)); animation: pk-pulse 1.6s ease-in-out infinite; } html.theme-prakriti .pk-ad-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 6px; } html.theme-prakriti .pk-ad-who { display: flex; align-items: center; gap: 12px; min-width: 0; } html.theme-prakriti .pk-ad-avatar { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-family: var(--pk-font-display); font-size: 14px; font-weight: 600; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); transition: transform .5s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-ad-card:hover .pk-ad-avatar { transform: rotate(-8deg); color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ad-who-copy { min-width: 0; } html.theme-prakriti .pk-ad-who-copy h3 { font-family: var(--pk-font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-ad-who-copy p, html.theme-prakriti .pk-ad-mail { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(var(--pk-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-ad-lines { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.5; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ad-street { color: rgb(var(--pk-ink)); font-weight: 500; overflow-wrap: anywhere; } html.theme-prakriti .pk-ad-actions { display: flex; gap: 6px; padding: 12px 14px 14px; margin-top: 8px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-ad-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding-inline: 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); transition: background-color .2s, color .2s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-ad-act:not(.pk-ad-act--danger) { flex: 1; } html.theme-prakriti .pk-ad-act:hover { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); } html.theme-prakriti .pk-ad-act:active { transform: scale(.95); } html.theme-prakriti .pk-ad-act.is-copied { color: rgb(var(--pk-good)); background: rgb(var(--pk-good) / .1); } html.theme-prakriti .pk-ad-act--danger { width: 38px; padding: 0; } html.theme-prakriti .pk-ad-act--danger:hover { color: #fff; background: rgb(var(--pk-danger)); } /* Inline delete confirm */ html.theme-prakriti .pk-ad-confirm { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; background: rgb(var(--pk-surface) / .88); -webkit-backdrpk-filter: blur(10px); backdrpk-filter: blur(10px); } html.theme-prakriti .pk-ad-confirm-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; color: rgb(var(--pk-danger)); background: rgb(var(--pk-danger) / .1); animation: pk-ck-nudge .5s var(--pk-ease) .15s; } html.theme-prakriti .pk-ad-confirm h4 { font-family: var(--pk-font-display); font-size: 17px; font-weight: 600; } html.theme-prakriti .pk-ad-confirm p { max-width: 260px; font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ad-confirm-actions { display: flex; gap: 8px; margin-top: 6px; } html.theme-prakriti .pk-ad-danger { color: #fff; background: rgb(var(--pk-danger)); box-shadow: 0 12px 26px -12px rgb(var(--pk-danger) / .8); } html.theme-prakriti .pk-ad-danger:hover { filter: brightness(1.08); } .pk-ad-confirm-enter-active, .pk-ad-confirm-leave-active { transition: opacity .3s ease, clip-path .5s cubic-bezier(.22,1,.36,1); } .pk-ad-confirm-enter-from, .pk-ad-confirm-leave-to { opacity: 0; clip-path: circle(0% at 90% 92%); } .pk-ad-confirm-enter-to, .pk-ad-confirm-leave-from { clip-path: circle(150% at 90% 92%); } /* Add tile */ html.theme-prakriti .pk-ad-new { align-items: center; justify-content: center; gap: 8px; min-height: 260px; padding: 24px; text-align: center; background: transparent; box-shadow: none; border: 2px dashed rgb(var(--pk-line)); transition: border-color .3s, background-color .3s, transform .45s var(--pk-ease); } html.theme-prakriti .pk-ad-new:hover { border-color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .04); transform: translateY(-3px); } html.theme-prakriti .pk-ad-new-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 999px; color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .1); transition: transform .6s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-ad-new:hover .pk-ad-new-icon { transform: rotate(90deg) scale(1.1); color: #fff; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-ad-new strong { font-size: 15px; font-weight: 600; text-transform: capitalize; } html.theme-prakriti .pk-ad-new small { max-width: 220px; font-size: 12.5px; color: rgb(var(--pk-muted)); } /* Skeleton, empty, no match */ html.theme-prakriti .pk-ad-card--skel { gap: 10px; padding-bottom: 18px; pointer-events: none; } html.theme-prakriti .pk-ad-card--skel .pk-ov-skel { height: 12px; margin-inline: 18px; } html.theme-prakriti .pk-ad-card--skel .pk-ad-skel-map { width: auto; height: 112px; margin: 0 0 6px; border-radius: 0; } html.theme-prakriti .pk-ad-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(32px, 6cqi, 56px) 20px; text-align: center; border-radius: 28px; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-ad-empty h3 { font-family: var(--pk-font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; } html.theme-prakriti .pk-ad-empty p { max-width: 380px; margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ad-empty-art { position: relative; width: 220px; height: 140px; margin-bottom: 8px; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, var(--pk-tone-1), var(--pk-tone-2)), rgb(var(--pk-bg)); } html.theme-prakriti .pk-ad-empty-map { position: absolute; inset: 0; width: 100%; height: 100%; } html.theme-prakriti .pk-ad-empty-pin { position: absolute; top: 18%; left: 74%; margin-left: -18px; color: #fff; filter: drpk-shadow(0 8px 10px rgb(var(--pk-ink) / .35)); animation: pk-ad-bob 2.4s ease-in-out infinite; } html.theme-prakriti .pk-ad-empty-pin .pk-icon { fill: rgb(var(--pk-accent)); stroke: #fff; } html.theme-prakriti .pk-ad-nomatch { padding: 18px; text-align: center; font-size: 14px; color: rgb(var(--pk-muted)); } .pk-ad-list-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } .pk-ad-list-leave-active { position: absolute; transition: opacity .3s ease, scale .35s ease; } .pk-ad-list-leave-to { opacity: 0; scale: .9; } @keyframes pk-af-draw { from { stroke-dashoffset: 1; } } /* Prakriti shapes: round icon wells, sun accents. */ html.theme-prakriti :is(.pk-pw-gen-icon, .pk-ad-avatar) { border-radius: 999px; } html.theme-prakriti .pk-pw-orb, html.theme-prakriti .pk-ad-orb { position: relative; } html.theme-prakriti .pk-pw-orb-face { color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-pw.is-ready .pk-pw-orb-face, html.theme-prakriti .pk-pw.is-done .pk-pw-orb-face { color: #fff; background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-good)), rgb(var(--pk-forest)) 75%); } html.theme-prakriti .pk-ad-orb-wave { border-color: rgb(var(--pk-sun) / .6); } html.theme-prakriti .pk-ad-orb-face { color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ad-route { stroke: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-ad-map-pin .pk-icon, html.theme-prakriti .pk-ad-empty-pin .pk-icon { fill: rgb(var(--pk-forest)); } html.theme-prakriti .pk-ad-card:hover .pk-ad-avatar { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ad-new:hover .pk-ad-new-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-ad-zip { background: rgb(var(--pk-forest) / .9); } html.theme-prakriti .pk-ad-act { border-radius: 999px; } html.theme-prakriti .pk-ad-card { border-radius: 28px; } /* 37. Help desk (prakriti/page/{PageComponent,HelpDeskComponent}) ---------------- Landing for CMS pages on the "Contact us" template. Logic is the default help desk's; this skin: hero with blooming title, typed-placeholder search pill, falling leaves + turning mandala that lean from the pointer, the support chat in a tilting arch window; quick-action tiles with a pointer spotlight; glider FAQ tabs and leaf-plus accordions; contact channels (an "Ask a Vaidya" one when the store has a consult number); stores; a forest CTA band. Prefix pk-hd-. */ html.theme-prakriti .pk-hd { overflow-x: clip; } html.theme-prakriti .pk-hd-section { padding-block: clamp(36px, 6vw, 80px) 0; } html.theme-prakriti .pk-hd-section--last { padding-bottom: clamp(48px, 7vw, 96px); } /* Hero */ html.theme-prakriti .pk-hd-hero { --pk-px: 0; --pk-py: 0; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 88px); } html.theme-prakriti .pk-hd-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); } html.theme-prakriti .pk-hd-hero-mandala { position: absolute; width: clamp(480px, 60vw, 860px); aspect-ratio: 1; top: -30%; right: -18%; color: rgb(var(--pk-accent) / .11); translate: calc(var(--pk-px) * -26px) calc(var(--pk-py) * -18px); transition: translate 1.2s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-hd-hero-mandala .pk-mandala { animation: pk-turn 180s linear infinite; } html.pk-motion.theme-prakriti .pk-hd-hero-mandala { animation: pk-ck-mandala-in 2.4s var(--pk-ease) both; } html.theme-prakriti .pk-hd-hero-inner { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (min-width: 1024px) { html.theme-prakriti .pk-hd-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } html.theme-prakriti .pk-hd-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; } html.theme-prakriti .pk-hd-eyebrow { padding: 7px 14px 7px 11px; border-radius: 999px; background: rgb(var(--pk-surface) / .85); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html.theme-prakriti .pk-hd-pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--pk-good)); } html.theme-prakriti .pk-hd-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pk-ping 2s cubic-bezier(0, 0, .2, 1) infinite; } html.theme-prakriti .pk-hd-title { display: flex; flex-wrap: wrap; gap: 0 .24em; font-family: var(--pk-font-display); font-size: clamp(40px, 6.4vw, 84px); line-height: 1; font-weight: 500; letter-spacing: -.035em; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-hd-title .is-accent { font-style: italic; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-hd-subtitle { max-width: 560px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; color: rgb(var(--pk-muted)); } /* Search pill with typed placeholder */ html.theme-prakriti .pk-hd-search { position: relative; display: flex; align-items: center; gap: 10px; width: min(100%, 600px); height: 64px; padding-inline: 22px 8px; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .35s var(--pk-ease), transform .35s var(--pk-ease); } html.theme-prakriti .pk-hd-search:focus-within { transform: translateY(-2px); box-shadow: 0 0 0 5px rgb(var(--pk-accent) / .14), var(--pk-shadow-3), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-hd-search-icon { flex-shrink: 0; color: rgb(var(--pk-muted)); transition: color .3s, transform .45s var(--pk-spring); } html.theme-prakriti .pk-hd-search:focus-within .pk-hd-search-icon { color: rgb(var(--pk-accent)); transform: scale(1.12) rotate(-8deg); } html.theme-prakriti .pk-hd-search input { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-hd-search input::-webkit-search-cancel-button { display: none; } html.theme-prakriti .pk-hd-search input::placeholder { color: transparent; } html.theme-prakriti .pk-hd-search input:focus::placeholder { color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-typed { position: absolute; inset-inline-start: 54px; top: 50%; translate: 0 -50%; font-size: 16px; color: rgb(var(--pk-muted)); pointer-events: none; white-space: nowrap; overflow: hidden; max-width: calc(100% - 150px); } html.theme-prakriti .pk-hd-caret { display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -.18em; background: rgb(var(--pk-accent)); animation: pk-hd-blink 1s steps(1) infinite; } @keyframes pk-hd-blink { 50% { opacity: 0; } } html.theme-prakriti .pk-hd-kbd { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 8px; font: 600 12px/1 inherit; color: rgb(var(--pk-muted)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-search-clear { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-hd-search-go { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .45s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-hd-search-go:hover { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transform: rotate(-12deg) scale(1.06); } @media (hover: none) { html.theme-prakriti .pk-hd-kbd { display: none; } } html.theme-prakriti .pk-hd-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html.theme-prakriti .pk-hd-popular > span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); margin-inline-end: 4px; } html.theme-prakriti .pk-hd-popular .pk-chip { text-transform: none; } html.theme-prakriti .pk-hd-pills { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; } html.theme-prakriti .pk-hd-pills li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-hd-pills .pk-icon { color: rgb(var(--pk-accent)); } /* Arch window + chat */ html.theme-prakriti .pk-hd-visual { --rx: 0deg; --ry: 0deg; position: relative; justify-self: center; width: min(100%, 440px); perspective: 1000px; } @media (max-width: 1023.98px) { html.theme-prakriti .pk-hd-visual { display: none; } } html.theme-prakriti .pk-hd-arch { position: relative; isolation: isolate; overflow: hidden; padding: 90px 26px 28px; border-radius: 50% 50% 40px 40px / 130px 130px 40px 40px; background: radial-gradient(120% 90% at 50% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 70%); box-shadow: var(--pk-shadow-3); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .7s var(--pk-ease); } html.theme-prakriti .pk-hd-arch-mandala { position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; left: 50%; top: -170px; margin-left: -260px; color: rgb(var(--pk-sun) / .18); } html.pk-motion.theme-prakriti .pk-hd-arch-mandala .pk-mandala { animation: pk-turn 90s linear infinite; } html.theme-prakriti .pk-hd-chat { padding: 18px; border-radius: 26px; background: rgb(var(--pk-surface)); box-shadow: 0 30px 50px -24px rgb(0 0 0 / .5); } html.pk-motion.theme-prakriti .pk-hd-chat { animation: pk-ov-float 6s ease-in-out 2s infinite; } html.theme-prakriti .pk-hd-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-chat-head strong { display: block; font-family: var(--pk-font-display); font-size: 16px; font-weight: 600; } html.theme-prakriti .pk-hd-chat-head small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; font-family: var(--pk-font-display); font-weight: 600; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hd-online { width: 7px; height: 7px; border-radius: 999px; background: rgb(var(--pk-good)); box-shadow: 0 0 0 3px rgb(var(--pk-good) / .2); } html.theme-prakriti .pk-hd-chat-body { display: flex; flex-direction: column; gap: 10px; padding-block: 16px; } html.theme-prakriti .pk-hd-bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.45; } html.theme-prakriti .pk-hd-bubble--me { align-self: flex-end; color: #fff; background: rgb(var(--pk-forest)); border-end-end-radius: 6px; } html.theme-prakriti .pk-hd-bubble--them { align-self: flex-start; color: rgb(var(--pk-ink)); background: var(--pk-tone-1); border-end-start-radius: 6px; } html.theme-prakriti .pk-hd-bubble--typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: rgb(var(--pk-bg-2)); border-end-start-radius: 6px; } html.theme-prakriti .pk-hd-bubble--typing i { width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--pk-muted)); animation: pk-ck-dot 1.2s ease-in-out infinite; } html.theme-prakriti .pk-hd-bubble--typing i:nth-child(2) { animation-delay: .15s; } html.theme-prakriti .pk-hd-bubble--typing i:nth-child(3) { animation-delay: .3s; } /* The conversation plays out: question, typing dots, answer — then holds. */ html.pk-motion.theme-prakriti .pk-hd-bubble--me { animation: pk-hd-bubble 6s var(--pk-ease) .8s infinite both; } html.pk-motion.theme-prakriti .pk-hd-bubble--typing { animation: pk-hd-typing 6s var(--pk-ease) .8s infinite both; } html.pk-motion.theme-prakriti .pk-hd-bubble--them { animation: pk-hd-answer 6s var(--pk-ease) .8s infinite both; } @keyframes pk-hd-bubble { 0% { opacity: 0; translate: 0 10px; scale: .9; } 8%, 92% { opacity: 1; translate: none; scale: 1; } 100% { opacity: 0; } } @keyframes pk-hd-typing { 0%, 12% { opacity: 0; height: 0; padding-block: 0; margin-block: -5px; } 16%, 34% { opacity: 1; height: 30px; padding-block: 12px; margin-block: 0; } 38%, 100% { opacity: 0; height: 0; padding-block: 0; margin-block: -5px; } } @keyframes pk-hd-answer { 0%, 36% { opacity: 0; translate: 0 10px; scale: .9; } 44%, 92% { opacity: 1; translate: none; scale: 1; } 100% { opacity: 0; } } html.theme-prakriti .pk-hd-track { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-track-bar { position: relative; height: 6px; border-radius: 999px; background: rgb(var(--pk-line)); overflow: hidden; } html.theme-prakriti .pk-hd-track-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform: scaleX(.72); transform-origin: left; } html.pk-motion.theme-prakriti .pk-hd-track-bar i { animation: pk-hd-track 6s var(--pk-ease) .8s infinite both; } @keyframes pk-hd-track { 0%, 30% { transform: scaleX(.2); } 50%, 100% { transform: scaleX(.72); } } html.theme-prakriti .pk-hd-track-steps { display: flex; justify-content: space-between; } html.theme-prakriti .pk-hd-track-steps i { width: 10px; height: 10px; border-radius: 999px; background: rgb(var(--pk-accent)); } html.theme-prakriti .pk-hd-track-steps i:last-child { background: rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-float { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgb(var(--pk-ink)); background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-hd-float .pk-icon { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-hd-float--a { top: 12%; left: -36px; } html.theme-prakriti .pk-hd-float--b { bottom: 10%; right: -30px; color: #fff; background: rgb(var(--pk-good)); } html.theme-prakriti .pk-hd-float--b .pk-icon { color: #fff; } html.pk-motion.theme-prakriti .pk-hd-float--a { animation: pk-float 4.5s ease-in-out infinite; } html.pk-motion.theme-prakriti .pk-hd-float--b { animation: pk-float 5s ease-in-out 1.2s infinite; } html.theme-prakriti .pk-hd-float-leaf { position: absolute; z-index: 2; width: 46px; height: 46px; top: -6px; right: 14%; color: var(--pk-leaf-5); rotate: 24deg; } html.pk-motion.theme-prakriti .pk-hd-float-leaf { animation: pk-ck-sway 3s ease-in-out infinite alternate; } /* Quick actions */ html.theme-prakriti .pk-hd-actions { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { html.theme-prakriti .pk-hd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { html.theme-prakriti .pk-hd-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } html.theme-prakriti .pk-hd-action { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 26px; text-align: start; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .5s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-hd-action::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx) var(--my), rgb(var(--pk-sun) / .18), transparent 70%); } html.theme-prakriti .pk-hd-action:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .3); } html.theme-prakriti .pk-hd-action:hover::before { opacity: 1; } html.theme-prakriti .pk-hd-action-icon { flex-shrink: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: transform .55s var(--pk-spring), background-color .35s, color .35s; } html.theme-prakriti .pk-hd-action:nth-child(3n + 2) .pk-hd-action-icon { background: var(--pk-tone-2); color: rgb(var(--pk-sun-ink)); } html.theme-prakriti .pk-hd-action:nth-child(3n + 3) .pk-hd-action-icon { background: var(--pk-tone-3); color: rgb(var(--pk-clay)); } html.theme-prakriti .pk-hd-action:hover .pk-hd-action-icon { transform: rotate(-10deg) scale(1.08); color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hd-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } html.theme-prakriti .pk-hd-action-text strong { font-family: var(--pk-font-display); font-size: 17px; font-weight: 500; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-hd-action-text small { font-size: 13px; line-height: 1.45; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-action-arrow { flex-shrink: 0; color: rgb(var(--pk-muted)); transition: transform .4s var(--pk-ease), color .3s; } html.theme-prakriti .pk-hd-action:hover .pk-hd-action-arrow { color: rgb(var(--pk-accent)); transform: translate(3px, -3px); } /* FAQ tabs */ html.theme-prakriti .pk-hd-tabs-wrap { display: flex; justify-content: center; margin-bottom: 22px; } html.theme-prakriti .pk-hd-tabs { position: relative; display: flex; gap: 2px; max-width: 100%; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-tabs::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-hd-tab-glider { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: rgb(var(--pk-forest)); box-shadow: 0 10px 20px -10px rgb(var(--pk-forest) / .8); transition: transform .6s var(--pk-spring), width .45s var(--pk-ease); } html.theme-prakriti .pk-hd-tab { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 18px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; color: rgb(var(--pk-ink-2)); transition: color .3s; } html.theme-prakriti .pk-hd-tab.is-active { color: #fff; } html.theme-prakriti .pk-hd-tab em { min-width: 22px; height: 22px; padding-inline: 6px; display: inline-grid; place-items: center; border-radius: 999px; font-style: normal; font-size: 11px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); transition: color .3s, background-color .3s; } html.theme-prakriti .pk-hd-tab.is-active em { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hd-result-line { margin-bottom: 14px; text-align: center; font-size: 14px; font-weight: 600; color: rgb(var(--pk-ink-2)); } /* FAQ accordions */ html.theme-prakriti .pk-hd-faqs { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 880px; margin-inline: auto; } html.theme-prakriti .pk-hd-faq { position: relative; overflow: hidden; border-radius: 24px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .45s var(--pk-ease), background-color .4s; } html.theme-prakriti .pk-hd-faq::before { content: ""; position: absolute; inset-inline-start: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, rgb(var(--pk-sun)), rgb(var(--pk-accent))); transform: scaleY(0); transition: transform .6s var(--pk-ease); } html.theme-prakriti .pk-hd-faq.is-open { box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .3); } html.theme-prakriti .pk-hd-faq.is-open::before { transform: scaleY(1); } html.theme-prakriti .pk-hd-faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; text-align: start; } html.theme-prakriti .pk-hd-faq-tag { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); } @media (max-width: 639.98px) { html.theme-prakriti .pk-hd-faq-tag { display: none; } } html.theme-prakriti .pk-hd-faq-q-text { flex: 1; min-width: 0; font-family: var(--pk-font-display); font-size: clamp(16px, 1.6vw, 18px); font-weight: 500; line-height: 1.35; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-hd-faq mark { padding: 0 2px; border-radius: 4px; color: inherit; background: rgb(var(--pk-sun) / .4); } /* Plus → leaf: the bars rotate away and a leaf unfurls when open. */ html.theme-prakriti .pk-hd-faq-plus { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgb(var(--pk-bg-2)); transition: background-color .4s, transform .6s var(--pk-spring); } html.theme-prakriti .pk-hd-faq-plus::before, html.theme-prakriti .pk-hd-faq-plus::after { content: ""; position: absolute; width: 14px; height: 2px; border-radius: 2px; background: rgb(var(--pk-ink)); transition: transform .5s var(--pk-spring), opacity .3s; } html.theme-prakriti .pk-hd-faq-plus::after { transform: rotate(90deg); } html.theme-prakriti .pk-hd-faq-plus .pk-leaf-svg { width: 20px; height: 20px; color: var(--pk-leaf-5); transform: scale(0) rotate(-60deg); transition: transform .55s var(--pk-spring); } html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-plus { background: rgb(var(--pk-forest)); transform: rotate(180deg); } html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-plus::before, html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-plus::after { opacity: 0; transform: rotate(180deg) scale(.3); } html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-plus .pk-leaf-svg { transform: scale(1) rotate(-200deg); } html.theme-prakriti .pk-hd-faq-q:hover .pk-hd-faq-plus { transform: scale(1.08); } html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-q:hover .pk-hd-faq-plus { transform: rotate(180deg) scale(1.08); } html.theme-prakriti .pk-hd-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--pk-ease); } html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-a { grid-template-rows: 1fr; } html.theme-prakriti .pk-hd-faq-a-inner { min-height: 0; overflow: hidden; padding-inline: 20px; } html.theme-prakriti .pk-hd-faq-a-inner > p { padding-top: 2px; font-size: 15px; line-height: 1.7; color: rgb(var(--pk-ink-2)); opacity: 0; translate: 0 -6px; transition: opacity .4s, translate .5s var(--pk-ease); } html.theme-prakriti .pk-hd-faq.is-open .pk-hd-faq-a-inner > p { opacity: 1; translate: none; transition-delay: .12s; } html.theme-prakriti .pk-hd-helpful { display: flex; padding-block: 14px 18px; margin-top: 14px; border-top: 1px dashed rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-helpful-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-helpful-ask button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .2s, box-shadow .2s, transform .3s var(--pk-spring); } html.theme-prakriti .pk-hd-helpful-ask button:hover { color: rgb(var(--pk-accent)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)); transform: translateY(-2px); } html.theme-prakriti .pk-hd-thanks { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-hd-thanks.is-good { color: rgb(var(--pk-good)); } html.theme-prakriti .pk-hd-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; margin: 8px auto 0; padding: 36px 20px; border-radius: 30px; text-align: center; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-empty h3 { font-family: var(--pk-font-display); font-size: 22px; font-weight: 500; } html.theme-prakriti .pk-hd-empty p { max-width: 380px; font-size: 14px; line-height: 1.6; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } /* Contact channels */ html.theme-prakriti .pk-hd-channels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } html.theme-prakriti .pk-hd-channel { --mx: 50%; --my: 0%; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 22px 22px; border-radius: 30px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .5s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-hd-channel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(300px circle at var(--mx) var(--my), rgb(var(--pk-sun) / .16), transparent 70%); } html.theme-prakriti .pk-hd-channel:hover { transform: translateY(-5px); box-shadow: var(--pk-shadow-2), inset 0 0 0 1px rgb(var(--pk-accent) / .3); } html.theme-prakriti .pk-hd-channel:hover::before { opacity: 1; } html.theme-prakriti .pk-hd-channel-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: transform .55s var(--pk-spring), background-color .35s, color .35s; } html.theme-prakriti .pk-hd-channel:hover .pk-hd-channel-icon { transform: rotate(-8deg) scale(1.06); color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hd-channel h3 { font-family: var(--pk-font-display); font-size: 21px; font-weight: 500; letter-spacing: -.01em; } html.theme-prakriti .pk-hd-channel p { font-size: 13.5px; line-height: 1.55; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-channel-value { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 4px; font-size: 15px; font-weight: 700; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-hd-channel-value.is-wrap { white-space: normal; font-weight: 600; font-size: 14px; line-height: 1.5; } html.theme-prakriti .pk-hd-channel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; } /* Vaidya: the forest card */ html.theme-prakriti .pk-hd-channel.is-featured { color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 120% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 65%); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-hd-channel.is-featured h3, html.theme-prakriti .pk-hd-channel.is-featured .pk-hd-channel-value { color: #fff; } html.theme-prakriti .pk-hd-channel.is-featured p { color: rgb(var(--pk-cream-ink) / .75); } html.theme-prakriti .pk-hd-channel.is-featured .pk-hd-channel-value { font-size: 13px; font-weight: 600; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hd-channel.is-featured .pk-hd-channel-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-hd-socials { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; font-size: 13px; font-weight: 700; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-spring), color .3s, background-color .3s; } html.theme-prakriti .pk-hd-social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } html.theme-prakriti .pk-hd-social:hover { color: #fff; background: rgb(var(--pk-forest)); transform: translateY(-3px) rotate(-8deg); } /* Stores */ html.theme-prakriti .pk-hd-stores { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } html.theme-prakriti .pk-hd-store { overflow: hidden; display: flex; flex-direction: column; border-radius: 28px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .5s var(--pk-ease), box-shadow .4s; } html.theme-prakriti .pk-hd-store:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow-2); } html.theme-prakriti .pk-hd-store-map { position: relative; height: 110px; background: radial-gradient(circle at 70% 40%, rgb(var(--pk-sun) / .25), transparent 40%), repeating-linear-gradient(120deg, transparent 0 26px, rgb(255 255 255 / .7) 26px 32px), linear-gradient(160deg, var(--pk-tone-1), var(--pk-tone-2)); } html.theme-prakriti .pk-hd-store-pin { position: absolute; left: 70%; top: 40%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px; border-radius: 999px 999px 999px 4px; rotate: -45deg; color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 10px 18px -8px rgb(var(--pk-forest) / .8); } html.theme-prakriti .pk-hd-store-pin .pk-icon { rotate: 45deg; } html.pk-motion.theme-prakriti .pk-hd-store:hover .pk-hd-store-pin { animation: pk-ad-bob 1.4s ease-in-out infinite; } html.theme-prakriti .pk-hd-store-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px 14px; } html.theme-prakriti .pk-hd-store-body h3 { font-family: var(--pk-font-display); font-size: 19px; font-weight: 500; } html.theme-prakriti .pk-hd-store-body p { font-size: 13.5px; line-height: 1.55; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-hd-store-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: rgb(var(--pk-ink-2)); } /* CMS content */ html.theme-prakriti .pk-hd-cms { max-width: 880px; margin-inline: auto; padding: clamp(22px, 4vw, 40px); border-radius: 30px; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-hd-cms-image { margin-block: 18px; border-radius: 22px; overflow: hidden; } html.theme-prakriti .pk-hd-cms-body { margin-top: 12px; font-size: 15px; line-height: 1.75; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-hd-cms-body :is(p, ul, ol) { margin-bottom: 1em; } html.theme-prakriti .pk-hd-cms-body a { color: rgb(var(--pk-accent)); text-decoration: underline; text-underline-offset: 3px; } /* CTA band */ html.theme-prakriti .pk-hd-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(40px, 6vw, 76px) 22px; border-radius: 40px; text-align: center; color: rgb(var(--pk-cream-ink)); background: radial-gradient(110% 120% at 50% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 65%); box-shadow: var(--pk-shadow-3); } html.theme-prakriti .pk-hd-cta .pk-leaves { z-index: -1; opacity: .55; } html.theme-prakriti .pk-hd-cta-mandala { position: absolute; z-index: -1; width: 640px; aspect-ratio: 1; left: 50%; top: 50%; margin: -320px 0 0 -320px; color: rgb(var(--pk-sun) / .14); } html.pk-motion.theme-prakriti .pk-hd-cta-mandala .pk-mandala { animation: pk-turn 120s linear infinite; } html.theme-prakriti .pk-hd-cta h2 { max-width: 640px; font-family: var(--pk-font-display); font-size: clamp(28px, 4.2vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; color: #fff; } html.theme-prakriti .pk-hd-cta p { max-width: 480px; font-size: 15.5px; line-height: 1.6; color: rgb(var(--pk-cream-ink) / .78); } html.theme-prakriti .pk-hd-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } /* Toast: the wishlist's forest pill. */ html.theme-prakriti .pk-hd-toast { width: auto; padding: 12px 18px; gap: 8px; font-size: 14px; font-weight: 700; } /* Vue transitions — plain CSS (not @layer) so the build never purges them. */ .pk-hd-list-move { transition: transform .5s cubic-bezier(.22,1,.36,1); } .pk-hd-list-enter-active { transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); } .pk-hd-list-leave-active { position: absolute; inset-inline: 0; transition: opacity .25s ease, transform .3s ease; } .pk-hd-list-enter-from { opacity: 0; transform: translateY(12px) scale(.98); } .pk-hd-list-leave-to { opacity: 0; transform: scale(.97); } @media (prefers-reduced-motion: reduce) { html.theme-prakriti :is(.pk-hd-hero, .pk-hd-cta) .pk-leaves { display: none; } } /* 38. Search overlay (layouts/…/prakriti/FrontendNavBarComponent) -------------- Opens from the nav pill, the mobile search icon or "/". Forest-tinted blur with a turning mandala and falling leaves; the panel drops in on a spring. A large field (typewriter of real collection names, spinner while fetching, growing underline), live results with the match highlighted and ↑/↓/↵ navigation, a "see all" row, an empty-result state, and — before typing — recent searches (localStorage), collection tiles and quick links. Prefix pk-search-. */ html.theme-prakriti .pk-search { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: clamp(12px, 8vh, 96px) 12px 12px; background: rgb(var(--pk-forest) / .45); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } html.theme-prakriti .pk-search-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } html.theme-prakriti .pk-search-mandala { position: absolute; width: min(1100px, 140vw); aspect-ratio: 1; left: 50%; top: 50%; margin: calc(min(1100px, 140vw) / -2) 0 0 calc(min(1100px, 140vw) / -2); color: rgb(var(--pk-sun) / .16); } html.pk-motion.theme-prakriti .pk-search-mandala .pk-mandala { animation: pk-turn 120s linear infinite; } html.theme-prakriti .pk-search-bg .pk-leaves { opacity: .6; } html.theme-prakriti .pk-search-panel { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: 100%; overflow: hidden; border-radius: 32px; background: rgb(var(--pk-surface)); box-shadow: 0 40px 100px -30px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-search-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0 22px; } html.theme-prakriti .pk-search-esc { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 10px; border-radius: 999px; color: rgb(var(--pk-muted)); transition: background-color .2s, color .2s; } html.theme-prakriti .pk-search-esc:hover { color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-search kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding-inline: 6px; border-radius: 7px; font: 700 11px/1 inherit; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg)); box-shadow: inset 0 -1.5px 0 rgb(var(--pk-line)), inset 0 0 0 1px rgb(var(--pk-line)); } /* Field */ html.theme-prakriti .pk-search-field { position: relative; display: flex; align-items: center; gap: 12px; height: 70px; margin: 12px 14px 4px; padding-inline: 18px 8px; border-radius: 999px; background: rgb(var(--pk-bg)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: box-shadow .35s var(--pk-ease), background-color .35s; } html.theme-prakriti .pk-search-field:focus-within { background: rgb(var(--pk-surface)); box-shadow: 0 0 0 5px rgb(var(--pk-accent) / .12), inset 0 0 0 1.5px rgb(var(--pk-accent)); } html.theme-prakriti .pk-search-field-icon { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; color: rgb(var(--pk-accent)); } html.pk-motion.theme-prakriti .pk-search-field:not(.has-value) .pk-search-field-icon .pk-icon { animation: pk-search-sniff 2.8s ease-in-out infinite; } @keyframes pk-search-sniff { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-14deg) scale(1.1); } 86% { transform: rotate(8deg) scale(1.05); } } html.theme-prakriti .pk-search-field input { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: var(--pk-font-display); font-size: clamp(18px, 2.4vw, 22px); color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-search-field input::-webkit-search-cancel-button { display: none; } html.theme-prakriti .pk-search-field input::placeholder { color: transparent; } html.theme-prakriti .pk-search-field input:focus::placeholder { color: transparent; } html.theme-prakriti .pk-search-typed { position: absolute; inset-inline-start: 54px; top: 50%; translate: 0 -50%; max-width: calc(100% - 130px); overflow: hidden; white-space: nowrap; pointer-events: none; font-family: var(--pk-font-display); font-size: clamp(18px, 2.4vw, 22px); color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-search-typed i { display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: -.15em; background: rgb(var(--pk-accent)); animation: pk-hd-blink 1s steps(1) infinite; } html.theme-prakriti .pk-search-clear { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-bg-2)); transition: background-color .2s, color .2s; } html.theme-prakriti .pk-search-clear:hover { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-search-go { flex-shrink: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .45s var(--pk-spring), background-color .3s, color .3s, opacity .3s; } html.theme-prakriti .pk-search-go:not(:disabled):hover { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); transform: rotate(-12deg) scale(1.06); } html.theme-prakriti .pk-search-go:disabled { opacity: .35; cursor: default; } html.theme-prakriti .pk-search-field.has-value .pk-search-go { animation: pk-ck-stamp .5s var(--pk-spring); } /* Underline that sweeps while a request is in flight. */ html.theme-prakriti .pk-search-field-line { position: absolute; inset-inline: 26px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; opacity: 0; transition: opacity .3s; } html.theme-prakriti .pk-search-field-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(var(--pk-sun)), rgb(var(--pk-accent)), transparent); animation: pk-oh-indeterminate 1s ease-in-out infinite; } html.theme-prakriti .pk-search-field.is-busy .pk-search-field-line { opacity: 1; } /* Body (results / none / idle swap) */ html.theme-prakriti .pk-search-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 12px; scrollbar-width: thin; } html.theme-prakriti .pk-search-meta { padding: 6px 10px 8px; } html.theme-prakriti .pk-search small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-search-results { display: flex; flex-direction: column; gap: 2px; } html.pk-motion.theme-prakriti .pk-search-results li { animation: pk-oh-card-in .55s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 45ms); } html.theme-prakriti .pk-search-results button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 20px; text-align: start; transition: background-color .2s; } html.theme-prakriti .pk-search-results button::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--pk-sun)); transform: scaleY(0); transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-search-results button.is-active { background: rgb(var(--pk-bg)); } html.theme-prakriti .pk-search-results button.is-active::before { transform: scaleY(1); } html.theme-prakriti .pk-search-thumb { flex-shrink: 0; width: 56px; height: 56px; overflow: hidden; border-radius: 999px 999px 16px 16px; background: var(--pk-tone-1); } html.theme-prakriti .pk-search-thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--pk-ease); } html.theme-prakriti .pk-search-results button.is-active .pk-search-thumb img { scale: 1.08; } html.theme-prakriti .pk-search-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-search-name mark { padding: 0 2px; border-radius: 4px; color: inherit; background: rgb(var(--pk-sun) / .38); } html.theme-prakriti .pk-search-price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } html.theme-prakriti .pk-search-price strong { font-family: var(--pk-font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-search-price del { font-size: 11.5px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-search-go-icon { flex-shrink: 0; color: rgb(var(--pk-muted)); opacity: 0; transform: translate(-4px, 4px); transition: opacity .25s, transform .35s var(--pk-ease), color .25s; } html.theme-prakriti .pk-search-results button.is-active .pk-search-go-icon { opacity: 1; transform: none; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-search-all { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 8px; padding: 14px 18px; border-radius: 20px; font-size: 14px; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .18); transition: background-color .25s, color .25s; } html.theme-prakriti .pk-search-all .pk-icon { transition: transform .35s var(--pk-ease); } html.theme-prakriti .pk-search-all.is-active { color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-search-all.is-active .pk-icon { transform: translateX(4px); } html.theme-prakriti .pk-search-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 26px 22px; text-align: center; } html.theme-prakriti .pk-search-none-orb { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 999px 999px 24px 24px; color: rgb(var(--pk-forest)); background: var(--pk-tone-2); } html.theme-prakriti .pk-search-none-orb .pk-leaf-svg { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; color: var(--pk-leaf-1); rotate: 30deg; } html.pk-motion.theme-prakriti .pk-search-none-orb { animation: pk-ck-nudge .6s var(--pk-ease); } html.theme-prakriti .pk-search-none strong { font-family: var(--pk-font-display); font-size: 20px; font-weight: 500; } html.theme-prakriti .pk-search-none p { max-width: 360px; margin-bottom: 8px; font-size: 13.5px; line-height: 1.55; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-search-none .pk-chips { justify-content: center; } html.theme-prakriti .pk-search-idle { display: flex; flex-direction: column; gap: 20px; padding-top: 14px; } html.theme-prakriti .pk-search-group { display: flex; flex-direction: column; gap: 10px; padding-inline: 8px; } html.theme-prakriti .pk-search-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html.theme-prakriti .pk-search-textbtn { font-size: 12.5px; font-weight: 700; color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-search-textbtn:hover { text-decoration: underline; text-underline-offset: 3px; } html.theme-prakriti .pk-search-recent { gap: 6px; text-transform: none; } html.theme-prakriti .pk-search-recent .pk-icon { color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-search-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } html.theme-prakriti .pk-search-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 12px; border-radius: 22px; text-align: center; font-size: 13.5px; font-weight: 700; color: rgb(var(--pk-ink)); background: rgb(var(--pk-bg)); transition: transform .45s var(--pk-ease), background-color .3s, color .3s, box-shadow .3s; } html.pk-motion.theme-prakriti .pk-search-tile { animation: pk-oh-card-in .6s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 60ms + 120ms); } html.theme-prakriti .pk-search-tile:hover { transform: translateY(-4px); color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 16px 28px -16px rgb(var(--pk-forest) / .9); } html.theme-prakriti .pk-search-tile-art { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 999px; background: var(--pk-tone-1); transition: transform .55s var(--pk-spring); } html.theme-prakriti .pk-search-tile-art img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-search-tile-art .pk-leaf-svg { width: 30px; height: 30px; color: var(--pk-leaf-1); rotate: -20deg; } html.theme-prakriti .pk-search-tile:hover .pk-search-tile-art { transform: rotate(-8deg) scale(1.06); } html.theme-prakriti .pk-search-quick { display: flex; flex-wrap: wrap; gap: 8px; } html.theme-prakriti .pk-search-quick a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 14px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: rgb(var(--pk-ink-2)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: color .25s, box-shadow .25s, transform .35s var(--pk-spring); } html.theme-prakriti .pk-search-quick a .pk-icon { color: rgb(var(--pk-accent)); } html.theme-prakriti .pk-search-quick a:hover { color: rgb(var(--pk-ink)); box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent)); transform: translateY(-2px); } html.theme-prakriti .pk-search-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 22px 14px; border-top: 1px dashed rgb(var(--pk-line)); font-size: 12px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-search-foot span { display: inline-flex; align-items: center; gap: 5px; } @media (hover: none), (max-width: 639.98px) { html.theme-prakriti .pk-search-foot { display: none; } } @media (max-width: 639.98px) { html.theme-prakriti .pk-search { padding: 0; } html.theme-prakriti .pk-search-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; } html.theme-prakriti .pk-search-field { height: 62px; margin-inline: 10px; } html.theme-prakriti .pk-search-go { width: 48px; height: 48px; } html.theme-prakriti .pk-search-typed { inset-inline-start: 50px; max-width: calc(100% - 120px); } } /* Open / close: backdrop fades, the panel drops in on a spring and leaves upward. */ .pk-search-enter-active, .pk-search-leave-active { transition: opacity .35s ease; } .pk-search-enter-active .pk-search-panel { transition: transform .7s cubic-bezier(.34,1.4,.64,1), opacity .4s ease, filter .5s ease; } .pk-search-leave-active .pk-search-panel { transition: transform .3s ease, opacity .25s ease; } .pk-search-enter-from, .pk-search-leave-to { opacity: 0; } .pk-search-enter-from .pk-search-panel { transform: translateY(-40px) scale(.96); opacity: 0; filter: blur(8px); } .pk-search-leave-to .pk-search-panel { transform: translateY(-16px) scale(.98); opacity: 0; } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-search-bg .pk-leaves { display: none; } } /* 39. Mobile categories drawer (layouts/…/prakriti/FrontendMobileCategoryComponent) -- Same #mobile-category-canvas + canvas-active contract as the default. One panel that drills through the tree with direction-aware slides and a tappable trail: forest crown (mandala, falling leaves, live level title, search shortcut), a tile grid at the top level, a "shop all" card + staggered rows below it, quick links. The panel is a
: app.css's `.canvas-active > div` would force a div's transform. Prefix pk-mc-. */ html.theme-prakriti .pk-mc { position: fixed; inset: 0; z-index: 30; visibility: hidden; opacity: 0; background: rgb(var(--pk-forest) / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .4s var(--pk-ease), visibility .4s; } html.theme-prakriti .pk-mc.canvas-active { visibility: visible; opacity: 1; } html.theme-prakriti .pk-mc-panel { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; display: flex; flex-direction: column; width: min(420px, 92vw); background: rgb(var(--pk-bg)); box-shadow: var(--pk-shadow-3); border-start-end-radius: 30px; border-end-end-radius: 30px; overflow: hidden; transform: translateX(-104%); transition: transform .6s var(--pk-ease); } html[dir="rtl"].theme-prakriti .pk-mc-panel { transform: translateX(104%); } html.theme-prakriti .pk-mc.canvas-active .pk-mc-panel { transform: none; } html[dir="rtl"].theme-prakriti .pk-mc.canvas-active .pk-mc-panel { transform: none; } html[dir="rtl"].theme-prakriti .pk-mc-flip { scale: -1 1; } /* Crown */ html.theme-prakriti .pk-mc-crown { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 18px; color: rgb(var(--pk-cream-ink)); background: radial-gradient(120% 140% at 100% 0%, rgb(var(--pk-forest-2)), rgb(var(--pk-forest)) 65%); } html.theme-prakriti .pk-mc-crown-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } html.theme-prakriti .pk-mc-crown-mandala { position: absolute; width: 320px; aspect-ratio: 1; right: -110px; top: -120px; color: rgb(var(--pk-sun) / .18); } html.pk-motion.theme-prakriti .pk-mc-crown-mandala .pk-mandala { animation: pk-turn 110s linear infinite; } html.theme-prakriti .pk-mc-crown .pk-leaves { opacity: .5; } html.theme-prakriti .pk-mc-crown-row { display: flex; align-items: center; justify-content: space-between; align-self: stretch; margin-bottom: 8px; } html.theme-prakriti .pk-mc-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .95; } html.theme-prakriti .pk-mc-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); transition: background-color .2s, transform .45s var(--pk-spring); } html.theme-prakriti .pk-mc-close:hover { background: rgb(255 255 255 / .2); transform: rotate(90deg); } html.theme-prakriti .pk-mc-title { font-family: var(--pk-font-display); font-size: 30px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; text-transform: capitalize; color: #fff; } html.theme-prakriti .pk-mc-title span { display: inline-block; } html.theme-prakriti .pk-mc-search { display: flex; align-items: center; gap: 10px; align-self: stretch; height: 46px; margin-top: 6px; padding-inline: 16px; border-radius: 999px; font-size: 14px; text-align: start; color: rgb(var(--pk-cream-ink) / .8); background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); transition: background-color .2s; } html.theme-prakriti .pk-mc-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-mc-search:hover { background: rgb(255 255 255 / .16); } /* Staged entrance when the drawer opens. */ html.pk-motion.theme-prakriti .pk-mc.canvas-active .pk-mc-crown > :not(.pk-mc-crown-bg) { animation: pk-intro .7s var(--pk-ease) backwards; } html.pk-motion.theme-prakriti .pk-mc.canvas-active .pk-mc-crown > :nth-child(3) { animation-delay: .12s; } html.pk-motion.theme-prakriti .pk-mc.canvas-active .pk-mc-crown > :nth-child(4) { animation-delay: .2s; } html.pk-motion.theme-prakriti .pk-mc.canvas-active .pk-mc-crown > :nth-child(5) { animation-delay: .28s; } /* Trail */ html.theme-prakriti .pk-mc-trail { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; border-bottom: 1px dashed rgb(var(--pk-line)); background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-mc-trail::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-mc-back { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; margin-inline-end: 4px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .4s var(--pk-spring); } html.theme-prakriti .pk-mc-back:active { transform: scale(.9); } html.theme-prakriti .pk-mc-sep { flex-shrink: 0; color: rgb(var(--pk-muted)); rotate: -90deg; } html[dir="rtl"].theme-prakriti .pk-mc-sep { rotate: 90deg; scale: 1; } html.theme-prakriti .pk-mc-crumb { flex-shrink: 0; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-transform: capitalize; color: rgb(var(--pk-ink-2)); transition: background-color .2s, color .2s; } html.theme-prakriti .pk-mc-crumb:not(:disabled):hover { color: rgb(var(--pk-accent)); background: rgb(var(--pk-accent) / .08); } html.theme-prakriti .pk-mc-crumb.is-current { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .3); } /* Body */ html.theme-prakriti .pk-mc-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 16px 14px 18px; scrollbar-width: thin; } html.theme-prakriti .pk-mc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html.theme-prakriti .pk-mc-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 24px; text-align: center; background: rgb(var(--pk-surface)); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); transition: transform .45s var(--pk-ease), box-shadow .35s, background-color .3s, color .3s; } html.pk-motion.theme-prakriti .pk-mc.canvas-active .pk-mc-tile, html.pk-motion.theme-prakriti .pk-mc-back-enter-active .pk-mc-tile { animation: pk-oh-card-in .6s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 60ms + .2s); } html.theme-prakriti .pk-mc-tile:active { transform: scale(.97); } html.theme-prakriti .pk-mc-tile:hover { background: rgb(var(--pk-forest)); color: #fff; box-shadow: 0 18px 30px -18px rgb(var(--pk-forest) / .9); } html.theme-prakriti .pk-mc-tile-art { display: grid; place-items: center; width: 84px; height: 84px; overflow: hidden; border-radius: 999px; background: var(--pk-tone-1); box-shadow: 0 0 0 4px rgb(var(--pk-surface)); transition: transform .55s var(--pk-spring); } html.theme-prakriti .pk-mc-tile:nth-child(3n + 2) .pk-mc-tile-art { background: var(--pk-tone-2); } html.theme-prakriti .pk-mc-tile:nth-child(3n + 3) .pk-mc-tile-art { background: var(--pk-tone-3); } html.theme-prakriti .pk-mc-tile-art img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-mc-tile-art .pk-leaf-svg { width: 38px; height: 38px; color: var(--pk-leaf-1); rotate: -20deg; } html.theme-prakriti .pk-mc-tile:hover .pk-mc-tile-art { transform: rotate(-6deg) scale(1.05); box-shadow: 0 0 0 4px rgb(var(--pk-sun)); } html.theme-prakriti .pk-mc-tile-name { font-family: var(--pk-font-display); font-size: 16px; font-weight: 500; text-transform: capitalize; line-height: 1.2; } html.theme-prakriti .pk-mc-tile small { font-size: 11.5px; color: rgb(var(--pk-muted)); transition: color .3s; } html.theme-prakriti .pk-mc-tile:hover small { color: rgb(var(--pk-cream-ink) / .75); } html.theme-prakriti .pk-mc-tile-go { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; color: rgb(var(--pk-accent)); background: rgb(var(--pk-bg)); transition: background-color .3s, color .3s; } html.theme-prakriti .pk-mc-tile:hover .pk-mc-tile-go { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-mc-all { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 12px 12px 12px; border-radius: 24px; color: rgb(var(--pk-forest)); background: linear-gradient(135deg, rgb(var(--pk-sun) / .32), var(--pk-tone-1)); transition: transform .4s var(--pk-ease); } html.pk-motion.theme-prakriti .pk-mc-all { animation: pk-oh-card-in .55s var(--pk-ease) .05s backwards; } html.theme-prakriti .pk-mc-all:active { transform: scale(.98); } html.theme-prakriti .pk-mc-all-art { flex-shrink: 0; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border-radius: 999px; background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-mc-all-art img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-mc-all-art .pk-leaf-svg { width: 28px; height: 28px; color: var(--pk-leaf-1); } html.theme-prakriti .pk-mc-all-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } html.theme-prakriti .pk-mc-all-text small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } html.theme-prakriti .pk-mc-all-text strong { font-family: var(--pk-font-display); font-size: 18px; font-weight: 500; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-mc-all-go { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); transition: transform .4s var(--pk-ease); } html.theme-prakriti .pk-mc-all:hover .pk-mc-all-go { transform: translateX(3px); } html.theme-prakriti .pk-mc-list { display: flex; flex-direction: column; gap: 6px; } html.pk-motion.theme-prakriti .pk-mc-list li { animation: pk-oh-card-in .5s var(--pk-ease) backwards; animation-delay: calc(min(var(--pk-i, 0), 12) * 40ms + .1s); } html.theme-prakriti .pk-mc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 20px; text-align: start; background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: background-color .25s, box-shadow .25s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-mc-row:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--pk-accent) / .5); } html.theme-prakriti .pk-mc-row:active { transform: scale(.98); background: rgb(var(--pk-bg-2)); } html.theme-prakriti .pk-mc-row-art { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 999px; font-family: var(--pk-font-display); font-size: 16px; font-weight: 600; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); } html.theme-prakriti .pk-mc-list li:nth-child(3n + 2) .pk-mc-row-art { color: rgb(var(--pk-sun-ink)); background: var(--pk-tone-2); } html.theme-prakriti .pk-mc-list li:nth-child(3n + 3) .pk-mc-row-art { color: rgb(var(--pk-clay)); background: var(--pk-tone-3); } html.theme-prakriti .pk-mc-row-art img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-mc-row-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; text-transform: capitalize; color: rgb(var(--pk-ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-mc-row em { flex-shrink: 0; min-width: 24px; height: 22px; padding-inline: 7px; display: inline-grid; place-items: center; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun) / .3); } html.theme-prakriti .pk-mc-row-go { flex-shrink: 0; color: rgb(var(--pk-muted)); transition: transform .35s var(--pk-ease), color .25s; } html.theme-prakriti .pk-mc-row:hover .pk-mc-row-go { color: rgb(var(--pk-accent)); transform: translateX(3px); } html.theme-prakriti .pk-mc-skel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } html.theme-prakriti .pk-mc-skel span { height: 150px; border-radius: 24px; background: linear-gradient(90deg, rgb(var(--pk-bg-2)) 25%, rgb(var(--pk-surface)) 50%, rgb(var(--pk-bg-2)) 75%); background-size: 200% 100%; animation: pk-shimmer 1.4s linear infinite; } /* Foot */ html.theme-prakriti .pk-mc-foot { flex-shrink: 0; display: flex; gap: 6px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; border-top: 1px dashed rgb(var(--pk-line)); background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-mc-foot::-webkit-scrollbar { display: none; } html.theme-prakriti .pk-mc-foot a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 12px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgb(var(--pk-ink-2)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); } html.theme-prakriti .pk-mc-foot a .pk-icon { color: rgb(var(--pk-accent)); } /* Level change: forward slides in from the end side, back from the start side. */ .pk-mc-fwd-enter-active, .pk-mc-fwd-leave-active, .pk-mc-back-enter-active, .pk-mc-back-leave-active { transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1); } .pk-mc-fwd-enter-from { opacity: 0; transform: translateX(40px); } .pk-mc-fwd-leave-to { opacity: 0; transform: translateX(-30px); } .pk-mc-back-enter-from { opacity: 0; transform: translateX(-40px); } .pk-mc-back-leave-to { opacity: 0; transform: translateX(30px); } [dir="rtl"] .pk-mc-fwd-enter-from, [dir="rtl"] .pk-mc-back-leave-to { transform: translateX(-40px); } [dir="rtl"] .pk-mc-fwd-leave-to, [dir="rtl"] .pk-mc-back-enter-from { transform: translateX(40px); } @media (prefers-reduced-motion: reduce) { html.theme-prakriti .pk-mc-crown .pk-leaves { display: none; } } /* 40. Mobile profile drawer (layouts/…/prakriti/FrontendMobileAccountComponent) ---- Same #mobile-profile-canvas + canvas-active contract as the default. Reuses §39's drawer shell (pk-mc, pk-mc-panel, pk-mc-crown); adds the avatar in a turning ring, greeting, grouped links (current one in a forest pill), a staff dashboard link, and a shop / logout foot. Prefix pk-pd-. */ html.theme-prakriti .pk-pd-crown { padding-bottom: 20px; } html.theme-prakriti .pk-pd-who { display: flex; align-items: center; gap: 14px; align-self: stretch; min-width: 0; } html.theme-prakriti .pk-pd-avatar { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 999px; } html.theme-prakriti .pk-pd-avatar-ring { position: absolute; inset: -6px; border-radius: inherit; border: 2px dashed rgb(var(--pk-sun) / .8); } html.pk-motion.theme-prakriti .pk-pd-avatar-ring { animation: pk-spin-plain 22s linear infinite; } html.theme-prakriti .pk-pd-avatar-face { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; font-family: var(--pk-font-display); font-size: 24px; font-weight: 500; color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); box-shadow: 0 0 0 4px rgb(var(--pk-forest)); } html.theme-prakriti .pk-pd-avatar-face img { width: 100%; height: 100%; object-fit: cover; } html.theme-prakriti .pk-pd-avatar-edit { position: absolute; bottom: -2px; inset-inline-end: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: rgb(var(--pk-forest)); background: #fff; box-shadow: var(--pk-shadow-1); } html.theme-prakriti .pk-pd-who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html.theme-prakriti .pk-pd-greet { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-sun)); } html.theme-prakriti .pk-pd-who-text strong { font-family: var(--pk-font-display); font-size: 22px; font-weight: 500; line-height: 1.15; text-transform: capitalize; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-pd-who-text small { font-size: 13px; color: rgb(var(--pk-cream-ink) / .7); font-variant-numeric: tabular-nums; } html.theme-prakriti .pk-pd-body { display: flex; flex-direction: column; gap: 4px; } html.theme-prakriti .pk-pd-staff { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 14px 10px 10px; border-radius: 20px; font-size: 14.5px; font-weight: 700; color: rgb(var(--pk-forest)); background: linear-gradient(135deg, rgb(var(--pk-sun) / .32), var(--pk-tone-1)); } html.theme-prakriti .pk-pd-staff > span:nth-child(2) { flex: 1; } html.theme-prakriti .pk-pd-staff-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-pd-group { padding: 12px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-pd-nav { display: flex; flex-direction: column; gap: 4px; } html.theme-prakriti .pk-pd-link { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 14px 6px 8px; border-radius: 20px; font-size: 15px; font-weight: 600; text-transform: capitalize; color: rgb(var(--pk-ink-2)); background: rgb(var(--pk-surface)); box-shadow: inset 0 0 0 1px rgb(var(--pk-line)); transition: background-color .3s, color .3s, box-shadow .3s, transform .3s var(--pk-ease); } html.theme-prakriti .pk-pd-link:active { transform: scale(.98); } html.theme-prakriti .pk-pd-link-icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: rgb(var(--pk-accent)); background: var(--pk-tone-1); transition: transform .5s var(--pk-spring), background-color .3s, color .3s; } html.theme-prakriti .pk-pd-link:hover .pk-pd-link-icon { transform: rotate(-8deg) scale(1.06); } html.theme-prakriti .pk-pd-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.theme-prakriti .pk-pd-link-go { flex-shrink: 0; color: rgb(var(--pk-muted)); transition: transform .35s var(--pk-ease), color .25s; } html.theme-prakriti .pk-pd-link:hover .pk-pd-link-go { color: rgb(var(--pk-accent)); transform: translateX(3px); } html.theme-prakriti .pk-pd-link.is-current { color: #fff; background: rgb(var(--pk-forest)); box-shadow: 0 12px 22px -12px rgb(var(--pk-forest) / .8); } html.theme-prakriti .pk-pd-link.is-current .pk-pd-link-icon { color: rgb(var(--pk-forest)); background: rgb(var(--pk-sun)); } html.theme-prakriti .pk-pd-link.is-current .pk-pd-link-go { color: rgb(var(--pk-sun)); } /* Staged entrance each time the drawer opens. */ html.pk-motion.theme-prakriti .pk-pd.canvas-active :is(.pk-pd-link, .pk-pd-group, .pk-pd-staff) { animation: pk-oh-card-in .55s var(--pk-ease) backwards; animation-delay: calc(var(--pk-i, 0) * 45ms + .2s); } html.theme-prakriti .pk-pd-foot { flex-shrink: 0; display: flex; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px dashed rgb(var(--pk-line)); background: rgb(var(--pk-surface)); } html.theme-prakriti .pk-pd-shop { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; color: rgb(var(--pk-forest)); background: linear-gradient(135deg, rgb(var(--pk-sun) / .3), var(--pk-tone-1)); } html.theme-prakriti .pk-pd-shop-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: #fff; background: rgb(var(--pk-forest)); } html.theme-prakriti .pk-pd-logout { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding-inline: 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: rgb(var(--pk-danger)); box-shadow: inset 0 0 0 1px rgb(var(--pk-danger) / .25); transition: background-color .2s; } html.theme-prakriti .pk-pd-logout:hover { background: rgb(var(--pk-danger) / .07); } html.theme-prakriti .pk-pd-logout:disabled { opacity: .6; cursor: progress; } /* ---- Account overview: saved dosha (pk-ov-dosha) ------------------------------------ */ html.theme-prakriti .pk-ov-dosha { --pk-dc: var(--pk-accent); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: clamp(16px, 2.4vw, 22px); border-radius: 26px; background: linear-gradient(120deg, rgb(var(--pk-dc) / .1), rgb(var(--pk-surface)) 60%); box-shadow: var(--pk-shadow-1), inset 0 0 0 1px rgb(var(--pk-line)); } @media (min-width: 720px) { html.theme-prakriti .pk-ov-dosha { grid-template-columns: auto minmax(0, 1fr) auto; } } html.theme-prakriti .pk-ov-dosha--vata { --pk-dc: var(--pk-vata); } html.theme-prakriti .pk-ov-dosha--pitta { --pk-dc: var(--pk-pitta); } html.theme-prakriti .pk-ov-dosha--kapha { --pk-dc: var(--pk-kapha); } html.theme-prakriti .pk-ov-dosha-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; color: #fff; background: rgb(var(--pk-dc)); } html.theme-prakriti .pk-ov-dosha.is-empty .pk-ov-dosha-icon { color: rgb(var(--pk-sun-ink)); background: rgb(var(--pk-sun) / .25); } html.theme-prakriti .pk-ov-dosha-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } html.theme-prakriti .pk-ov-dosha-body > small { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ov-dosha-body > strong { font-family: var(--pk-font-display); font-size: 22px; font-weight: 500; line-height: 1.15; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ov-dosha-meta { font-size: 13px; color: rgb(var(--pk-muted)); } html.theme-prakriti .pk-ov-dosha-bars { display: grid; gap: 5px; max-width: 360px; margin-top: 4px; } html.theme-prakriti .pk-ov-dosha-bars li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 38px; align-items: center; gap: 8px; font-size: 12.5px; color: rgb(var(--pk-ink-2)); } html.theme-prakriti .pk-ov-dosha-bars i { height: 6px; border-radius: 6px; background: rgb(var(--pk-line)); overflow: hidden; } html.theme-prakriti .pk-ov-dosha-bars b { display: block; height: 100%; border-radius: inherit; background: rgb(var(--pk-accent)); transform-origin: left; transition: transform .8s var(--pk-ease); } html[dir="rtl"].theme-prakriti .pk-ov-dosha-bars b { transform-origin: right; } html.theme-prakriti .pk-ov-dosha-bars .is-vata b { background: rgb(var(--pk-vata)); } html.theme-prakriti .pk-ov-dosha-bars .is-pitta b { background: rgb(var(--pk-pitta)); } html.theme-prakriti .pk-ov-dosha-bars .is-kapha b { background: rgb(var(--pk-kapha)); } html.theme-prakriti .pk-ov-dosha-bars em { font-style: normal; font-variant-numeric: tabular-nums; text-align: end; color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ov-dosha-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } @media (min-width: 720px) { html.theme-prakriti .pk-ov-dosha-actions { grid-column: auto; flex-direction: column; align-items: flex-end; } } html.theme-prakriti .pk-ov-dosha-forget { font-size: 12.5px; font-weight: 600; color: rgb(var(--pk-muted)); text-decoration: underline; text-underline-offset: 3px; } html.theme-prakriti .pk-ov-dosha-forget:hover { color: rgb(var(--pk-ink)); } html.theme-prakriti .pk-ov-dosha-forget:disabled { opacity: .5; cursor: progress; }