/* ==========================================================================
   Intimacy Store — one stylesheet for every route.

   The look is the app's (app.intimacy.school, app/globals.css): the same tokens, the
   same typeface (Rubik since 30 Sep 2026), and on checkout and thank-you the same measurements as its Tailwind
   classes (noted beside each rule as the class it replaces), so the two read as one.

   Rules from the website master workflow:
   - one border width (--bw), radii from the --u scale only, nested boxes step down it
   - no one-sided borders on a card edge (row separators are fine)
   - everything respects prefers-reduced-motion
   ========================================================================== */

/* One typeface everywhere (Harsh, 30 Sep 2026): Rubik, self-hosted, the same variable files the content
   site uses (site/assets/fonts). Latin, latin-ext without the rupee, and the rupee alone (~1 KB). */
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../../site/assets/fonts/rubik-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../../site/assets/fonts/rubik-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;src:url(../../site/assets/fonts/rubik-rupee.woff2) format("woff2");unicode-range:U+20B9}
@font-face{font-family:"Rubik";font-style:italic;font-weight:300 900;font-display:swap;src:url(../../site/assets/fonts/rubik-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:italic;font-weight:300 900;font-display:swap;src:url(../../site/assets/fonts/rubik-latin-ext-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Rubik";font-style:italic;font-weight:300 900;font-display:swap;src:url(../../site/assets/fonts/rubik-rupee-italic.woff2) format("woff2");unicode-range:U+20B9}

:root{
	/* the app's palette (app/globals.css) */
	--background:#fafafa;
	--surface:#ffffff;
	--surface-elevated:#f4f4f5;
	--foreground:#0a0a0c;
	--muted:#52525b;
	--muted-2:#a1a1aa;
	--border:#e4e4e7;
	--primary:#e00173;
	--primary-hover:#c00060;
	--primary-soft:rgba(224,1,115,.08);
	--primary-glow:rgba(224,1,115,.22);
	--success:#16a34a;
	--success-hover:#15803d;
	--success-glow:rgba(22,163,74,.22);
	--error:#dc2626;
	--star:#f59e0b;

	/* one border width, one radius scale (master workflow §4.2a) */
	--bw:1px;
	--u:4px;
	--r-xs:var(--u);                 /*  4px  chips inside a strip          */
	--r-sm:calc(var(--u) * 2);       /*  8px  inputs inside a popover, tiles */
	--r-md:calc(var(--u) * 3);       /* 12px  fields, strips, bump rows      */
	--r-lg:calc(var(--u) * 4);       /* 16px  cards                          */
	--r-xl:calc(var(--u) * 6);       /* 24px  hero cards, sheets             */
	--r-pill:999px;

	--font:"Rubik","Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	--wrap:1120px;
	--pad:16px;
	--header:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
[hidden]{display:none!important}
::selection{background:color-mix(in oklab,var(--primary) 35%,transparent)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.ist-skip{position:absolute;left:-9999px}
.ist-skip:focus{left:16px;top:8px;z-index:100;background:var(--surface);padding:8px 12px;border-radius:var(--r-sm)}

/* ---------- shared bits ---------- */
.ck-ic{width:16px;height:16px;flex:none}
.ck-ic-xs{width:12px;height:12px;flex:none}
.ck-xs{font-size:12px;line-height:16px}
.ck-sm{font-size:14px;line-height:20px}
.ck-muted{color:var(--muted)}
.ck-muted2{color:var(--muted-2)}
.ck-fg{color:var(--foreground)}
.ck-ok{color:var(--success)}
.ck-okc{color:var(--success)}
.ck-pink{color:var(--primary)}
.ck-strong{font-weight:600}
.ck-mono{font-family:var(--mono);letter-spacing:.05em}
.ck-spin{animation:ck-spin 1s linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
.ck-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.ck-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill);background:var(--primary);color:#fff;font-size:14px;line-height:20px;font-weight:600;padding:12px 16px;text-decoration:none}
.ck-btn-primary:hover{background:var(--primary-hover)}
.ck-btn-ghost{display:inline-flex;align-items:center;justify-content:center;border:var(--bw) solid var(--border);border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:14px;line-height:20px;padding:12px 16px}
.ck-btn-ghost:hover{color:var(--error)}

/* cover stand-in when a product has no image yet */
.ist-cover{width:100%;height:100%;object-fit:cover;object-position:center}
.ist-cover-type{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;padding:10%;color:#fff;background:linear-gradient(160deg,#e00173,#7c0042);overflow:hidden}
.ist-cover-type.t1{background:linear-gradient(160deg,#be185d,#4c0519)}
.ist-cover-type.t2{background:linear-gradient(160deg,#9d174d,#1f1f24)}
.ist-cover-type.t3{background:linear-gradient(160deg,#db2777,#831843)}
.ist-cover-type.t4{background:linear-gradient(160deg,#7c0042,#27272a)}
.ist-cover-mark{font-size:clamp(5px,6cqi,9px);letter-spacing:.14em;text-transform:uppercase;opacity:.85;white-space:nowrap}
.ist-cover-title{font-weight:700;font-size:clamp(6px,11cqi,26px);line-height:1.12;overflow-wrap:anywhere}

/* ==========================================================================
   CHECKOUT — (checkout)/layout.tsx + checkout-client.tsx
   ========================================================================== */

.ck-body{min-height:100dvh;background:var(--background)}
/* the app's soft pink wash behind the page */
.ck-body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
	background:radial-gradient(700px 400px at 15% -5%,rgba(224,1,115,.10),transparent 60%),radial-gradient(600px 320px at 100% 100%,rgba(224,1,115,.05),transparent 60%)}

.ck-header{position:sticky;top:0;z-index:40;border-bottom:var(--bw) solid var(--border);background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ck-header-in{max-width:672px;margin:0 auto;height:56px;padding:0 16px;display:flex;align-items:center;gap:12px}   /* max-w-2xl h-14 px-4 */
.ck-back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font-size:14px;color:var(--muted)}
.ck-back:hover{color:var(--foreground)}
.ck-logo{flex:1;display:flex;justify-content:center}
.ck-logo img{height:32px;width:auto}
.ck-secure{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--success)}

.ck-main{max-width:672px;margin:0 auto;padding:24px 16px}                 /* max-w-2xl px-4 py-6 */
.ck-footer{max-width:672px;margin:0 auto;padding:24px 16px 128px;text-align:center;font-size:12px;line-height:16px;color:var(--muted-2)}   /* pb-32 pt-6 */
.ck-footer a{text-decoration:underline}
.ck-footer a:hover{color:var(--foreground)}

.ck{display:flex;flex-direction:column;gap:16px}                              /* space-y-4 */
/* Two steps, like the app's checkout-stepper-client.tsx (30 Sep 2026): progress, panes, slim summary */
.ck-progress{display:flex;gap:8px}
.ck-progress-step{flex:1;min-width:0}
.ck-progress-bar{display:block;height:6px;border-radius:var(--r-pill);background:var(--surface-elevated);transition:background .25s}
.ck-progress-step.is-on .ck-progress-bar{background:var(--primary)}
.ck-progress-label{display:block;margin-top:6px;font-size:11px;font-weight:500;color:var(--muted-2)}
.ck-progress-step.is-current .ck-progress-label{color:var(--foreground)}
.ck-pane{display:flex;flex-direction:column;gap:16px}
.ck-pane[hidden]{display:none}
.ck-in-fwd{animation:ck-in-fwd .28s cubic-bezier(.2,.8,.2,1)}
.ck-in-back{animation:ck-in-back .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ck-in-fwd{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes ck-in-back{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ck-in-fwd,.ck-in-back{animation:none}}
.ck-summary{display:flex;align-items:center;gap:12px;padding:16px}
.ck-summary-thumb{flex:none;width:56px;height:56px;border-radius:var(--r-sm);overflow:hidden;border:var(--bw) solid var(--border);background:var(--surface-elevated)}
.ck-summary-thumb .ist-cover{display:block;width:100%;height:100%;object-fit:cover}
.ck-summary-info{min-width:0;flex:1}
.ck-summary-info .ck-eyebrow{font-size:10px}
.ck-summary-info h4{font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-summary-price{flex:none;font-size:18px;font-weight:600}
.ck-edit{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--muted);cursor:pointer}
.ck-edit:hover{color:var(--foreground)}
.ck-need-all{margin-top:12px}
.ck-card{border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:20px}   /* rounded-2xl p-5 */
.ck-card-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.ck-card-head h3{font-size:18px;line-height:28px;font-weight:600;letter-spacing:0}
.ck-step{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600}

.ck-product{display:flex;gap:14px;align-items:flex-start}
.ck-thumb{position:relative;width:76px;aspect-ratio:3/4;flex:none;overflow:hidden;border-radius:var(--r-md);border:var(--bw) solid var(--border);box-shadow:0 6px 16px -8px rgba(24,24,27,.35)}   /* book-shaped: the covers are 3:4 */
.ck-thumb .ist-cover-mark{display:none}
.ck-product-info{min-width:0;flex:1}
.ck-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ck-product-info h4{margin-top:2px;font-size:17px;line-height:1.25;font-weight:600;text-wrap:balance}
.ck-meta{margin-top:4px;font-size:12px;line-height:17px;color:var(--muted)}
.ck-star{display:inline-block;width:12px;height:12px;margin-right:3px;vertical-align:-1px;fill:var(--star);stroke:var(--star)}
.ck-pricebox{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ck-mrp{font-size:14px;line-height:20px;color:var(--muted-2)}
.ck-price-now{font-size:26px;line-height:1;font-weight:700;letter-spacing:-.01em}

/* the app's price reveal: MRP fades in, the strike draws, the price pops, the tag lands */
@keyframes ck-mrpFadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@keyframes ck-strikeDraw{to{transform:scaleX(1)}}
@keyframes ck-priceReveal{0%{opacity:0;transform:scale(.82);color:var(--primary);text-shadow:0 0 18px var(--primary-glow)}60%{opacity:1;transform:scale(1.12);color:var(--primary);text-shadow:0 0 18px var(--primary-glow)}100%{opacity:1;transform:scale(1);color:var(--foreground);text-shadow:none}}
@keyframes ck-tagPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}60%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes ck-tagPulse{0%,100%{box-shadow:0 4px 12px rgba(224,1,115,.35),inset 0 1px 0 rgba(255,255,255,.28)}50%{box-shadow:0 4px 22px rgba(224,1,115,.65),inset 0 1px 0 rgba(255,255,255,.28)}}
@keyframes ck-savingsShimmer{0%{left:-80%}100%{left:180%}}
@keyframes ck-totalFlash{0%{transform:scale(1);color:var(--foreground);text-shadow:none}40%{transform:scale(1.12);color:var(--primary);text-shadow:0 0 14px var(--primary-glow)}100%{transform:scale(1);color:var(--foreground);text-shadow:none}}

.ck-mrp{position:relative;display:inline-block;padding:0 2px;opacity:0;animation:ck-mrpFadeIn .45s .3s cubic-bezier(.22,1,.36,1) forwards}
.ck-mrp::after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left center;animation:ck-strikeDraw .55s 1.05s cubic-bezier(.7,0,.3,1) forwards;box-shadow:0 0 8px rgba(224,1,115,.5)}
.ck-price-now{display:inline-block;opacity:0;transform:scale(.82);animation:ck-priceReveal .55s 1.55s cubic-bezier(.22,1,.36,1) forwards}
.ck-discount-tag{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.04em;white-space:nowrap;opacity:0;transform:scale(.4) rotate(-8deg);animation:ck-tagPop .45s 2.05s cubic-bezier(.34,1.56,.64,1) forwards,ck-tagPulse 2.4s 2.6s infinite;pointer-events:none}
/* after the first paint the card is re-rendered on every change: no replay of the intro */
.is-refresh .ck-mrp,.is-refresh .ck-mrp::after,.is-refresh .ck-price-now{animation:none;opacity:1;transform:none}
.is-refresh .ck-mrp::after{transform:scaleX(1)}
.is-refresh .ck-discount-tag{animation:ck-tagPulse 2.4s infinite;opacity:1;transform:rotate(-3deg)}
.ck-total-flash{animation:ck-totalFlash .6s cubic-bezier(.22,1,.36,1)}

/* bumps — checkout-bumps.tsx */
.ck-bumps{margin-top:20px;padding-top:16px;border-top:var(--bw) dashed var(--border)}
.ck-label{margin-bottom:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ck-bump-list{display:flex;flex-direction:column;gap:8px}
.ck-bump{display:flex;align-items:flex-start;gap:12px;cursor:pointer;border:var(--bw) solid var(--border);background:var(--background);border-radius:var(--r-md);padding:12px;transition:border-color .15s,background .15s}
.ck-bump:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.ck-bump.is-on{border-color:var(--primary);background:var(--primary-soft)}
.ck-bump input{margin-top:4px;width:16px;height:16px;accent-color:var(--primary);flex:none}
.ck-bump-thumb{position:relative;width:48px;height:48px;flex:none;overflow:hidden;border-radius:var(--r-sm);border:var(--bw) solid var(--border)}
.ck-bump-thumb .ist-cover-mark{display:none}
.ck-bump-body{min-width:0;flex:1;display:flex;flex-direction:column}
.ck-bump-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
.ck-bump-title{margin-top:2px;font-size:14px;font-weight:600;line-height:1.25}
.ck-bump-desc{margin-top:2px;font-size:12px;line-height:16px;color:var(--muted)}
.ck-bump-price{flex:none;text-align:right;display:flex;flex-direction:column}
.ck-bump-add{font-size:16px;font-weight:600;color:var(--primary)}
.ck-bump-save{font-size:10px;color:var(--muted-2);white-space:nowrap}
.ck-thumb-more{position:absolute;right:4px;bottom:4px;min-width:22px;padding:2px 6px;border-radius:var(--r-pill);background:rgb(24 24 27/.82);color:#fff;font-size:11px;font-weight:700;line-height:14px;text-align:center}
/* phones: the add-on's text gets the full width, its price moves under it, the headline drops the tracked capitals */
@media (max-width:560px){
	.ck-bump{display:grid;grid-template-columns:auto 44px minmax(0,1fr);align-items:start;gap:0 12px}
	.ck-bump-thumb{width:44px;height:auto;aspect-ratio:3/4}
	.ck-bump-head{font-size:11px;line-height:15px;letter-spacing:.01em;text-transform:none}
	.ck-bump-price{grid-column:3;margin-top:8px;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 8px;text-align:left}
}

.ck-rows{margin-top:20px;padding-top:16px;border-top:var(--bw) solid var(--border);display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:20px}
.ck-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;color:var(--muted)}
.ck-row>span:first-child{min-width:0}
.ck-row>span:last-child{flex:none;white-space:nowrap}   /* an amount never breaks across lines */
.ck-total{display:flex;align-items:center;justify-content:space-between;border-top:var(--bw) solid var(--border);padding-top:12px}
.ck-total-val{display:inline-block;font-size:24px;line-height:32px;font-weight:600}

.ck-savings{position:relative;overflow:hidden;margin-top:16px;display:flex;align-items:center;gap:12px;border:var(--bw) solid color-mix(in oklab,var(--success) 30%,transparent);background:color-mix(in oklab,var(--success) 10%,transparent);border-radius:var(--r-md);padding:10px 12px;font-size:12px;line-height:16px;color:var(--success)}
.ck-savings::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(224,1,115,.18),transparent);animation:ck-savingsShimmer 3.2s 2.5s infinite}
.ck-savings-pct{border-radius:var(--r-xs);background:var(--success);color:#fff;padding:2px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* coupon — checkout-coupon.tsx */
.ck-coupon{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ck-coupon-on{display:flex;align-items:center;justify-content:space-between;border:var(--bw) solid color-mix(in oklab,var(--success) 30%,transparent);background:color-mix(in oklab,var(--success) 10%,transparent);border-radius:var(--r-md);padding:8px 12px;font-size:14px}
.ck-coupon-on>div{display:flex;align-items:center;gap:8px}
.ck-coupon-on .ck-mono{font-size:12px}
.ck-coupon-off{display:flex;align-items:center;justify-content:space-between;gap:12px;border:var(--bw) dashed color-mix(in oklab,var(--primary) 40%,transparent);background:var(--primary-soft);border-radius:var(--r-md);padding:8px 12px}
.ck-link-btn{border:0;background:none;padding:0;font-size:12px;color:var(--muted);text-decoration:underline}
.ck-link-btn:hover{color:var(--error)}
.ck-pill-btn{flex:none;border:0;border-radius:var(--r-pill);background:var(--primary);color:#fff;padding:4px 12px;font-size:12px;font-weight:600}
.ck-pill-btn:hover{background:var(--primary-hover)}
.ck-browse{position:relative}
.ck-browse-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font-size:12px;color:var(--muted);text-decoration:underline}
.ck-browse-btn:hover{color:var(--foreground)}
.ck-browse-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ck-popover{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:8px;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:12px;box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)}
.ck-code-row{display:flex;gap:8px}
.ck-code-input{height:40px;flex:1;min-width:0;border:var(--bw) solid var(--border);background:var(--background);border-radius:var(--r-sm);padding:0 12px;font-family:var(--mono);font-size:16px;text-transform:uppercase;letter-spacing:.05em;outline:none}
.ck-code-input::placeholder{font-size:13px}   /* 16px text: iPhone zooms into anything smaller on focus */
.ck-code-input:focus{border-color:color-mix(in oklab,var(--primary) 60%,transparent)}
.ck-code-apply{border:0;border-radius:var(--r-sm);background:var(--primary);color:#fff;padding:0 16px;font-size:13px;font-weight:600}
.ck-code-apply:disabled{opacity:.6}
.ck-code-msg{margin-top:8px;font-size:12px;color:var(--muted)}
.ck-code-msg.is-error{color:var(--error)}
.ck-options{margin-top:12px;padding-top:12px;border-top:var(--bw) solid var(--border)}
.ck-label2{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2)}
.ck-options ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.ck-options li{display:flex;align-items:center;justify-content:space-between;border-radius:var(--r-sm);padding:6px 8px}
.ck-options li:hover{background:var(--surface-elevated)}
.ck-opt-main{min-width:0;flex:1}
.ck-opt-label{font-size:10px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-applied-dot{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--success)}
.ck-opt-apply{border:var(--bw) solid var(--border);background:none;border-radius:var(--r-pill);padding:4px 12px;font-size:10px;font-weight:600;color:var(--primary)}
.ck-opt-apply:hover{background:var(--primary-soft)}

/* fields — checkout-parts.tsx Field */
.ck-fields{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.ck-field{display:block}
.ck-field-label{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.ck-input{margin-top:4px;display:flex;align-items:center;gap:8px;border:var(--bw) solid var(--border);background:var(--background);border-radius:var(--r-md);padding:0 12px}
.ck-input:focus-within{border-color:color-mix(in oklab,var(--primary) 60%,transparent)}
.ck-field.is-invalid .ck-input{border-color:var(--error)}
.ck-prefix{font-size:14px;color:var(--muted)}
.ck-input input{height:48px;width:100%;border:0;background:transparent;font-size:16px;outline:none;padding:0}
.ck-input input::placeholder{color:var(--muted-2)}
.ck-field-error{display:block;margin-top:4px;font-size:12px;color:var(--error)}

.ck-logos{display:flex;justify-content:center;padding-top:4px}
.ck-logos img{width:100%;max-width:320px;opacity:.9}

.ck-error{border:var(--bw) solid color-mix(in oklab,var(--error) 30%,transparent);background:color-mix(in oklab,var(--error) 10%,transparent);border-radius:var(--r-lg);padding:12px;font-size:14px;color:var(--error)}
.ck-error ul{list-style:none;margin:0;padding:0}
.ck-error .woocommerce-error{border:0;background:none;padding:0;margin:0;line-height:20px}   /* one box: ours, not Woo's inside it */

/* pay bar — checkout-paybar.tsx */
.ck-paybar{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:var(--bw) solid var(--border);background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom)}
.ck-paybar-in{max-width:672px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px}
.ck-paybar-left{min-width:0;flex:1}
.ck-paybar-total{font-size:24px;line-height:1;font-weight:600}
.ck-paybar-sub{margin-top:4px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ck-pay{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill);background:var(--success);color:#fff;padding:14px 24px;font-size:14px;font-weight:600;box-shadow:0 8px 24px var(--success-glow);transition:all .15s}
.ck-pay:hover{background:var(--success-hover)}
.ck-pay:disabled{opacity:.6;cursor:default}
.ck-pay-spin{display:none}
.ck-pay.is-loading .ck-pay-spin{display:inline-flex}
.ck-pay.is-loading .ck-pay-ic{display:none}

/* remove-coupon modal and the exit sheet */
.ck-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ck-modal-card{position:relative;width:100%;max-width:384px;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-xl);padding:24px;box-shadow:0 25px 50px -12px rgb(0 0 0/.25)}
.ck-modal-card h3{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.025em}
.ck-modal-card p{margin-top:8px}
.ck-modal-x{position:absolute;right:12px;top:12px;display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border:0;background:none;border-radius:var(--r-pill);color:var(--muted)}
.ck-modal-x:hover{background:var(--surface-elevated)}
.ck-modal-actions{margin-top:20px;display:flex;gap:8px}
.ck-modal-actions .ck-btn-primary{flex:1}
@media (min-width:768px){.ck-modal{align-items:center}}

.ck-sheet-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ck-fade .18s}
.ck-sheet{position:fixed;left:0;right:0;bottom:0;z-index:101;display:flex;flex-direction:column;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:20px;box-shadow:0 25px 50px -12px rgb(0 0 0/.25);animation:ck-rise .28s cubic-bezier(.22,1,.36,1)}
.ck-sheet-handle{display:block;margin:0 auto 12px;width:40px;height:4px;border-radius:var(--r-pill);background:var(--border)}
.ck-sheet-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.ck-sheet-head h2{font-size:18px;line-height:1.25;font-weight:600}
.ck-sheet-head .ck-modal-x{position:static;flex:none}
.ck-reasons{display:flex;flex-direction:column;gap:8px}
.ck-reason{display:inline-flex;align-items:center;gap:10px;border:var(--bw) solid var(--border);background:var(--surface-elevated);border-radius:var(--r-md);padding:12px 14px;text-align:left;font-size:14px;font-weight:500;transition:transform .1s}
.ck-reason:hover{border-color:color-mix(in oklab,var(--primary) 60%,transparent);background:var(--primary-soft)}
.ck-reason:active{transform:scale(.98)}
.ck-other{margin-top:8px;display:flex;gap:8px}
.ck-other input{width:100%;border:var(--bw) solid var(--border);background:var(--background);border-radius:var(--r-md);padding:10px 12px;font-size:14px;outline:none}
.ck-other button{flex:none;border:0;border-radius:var(--r-md);background:var(--primary);color:#fff;padding:0 16px;font-size:14px;font-weight:600}
.ck-stay{margin-top:16px;width:100%;padding:12px 20px;box-shadow:0 6px 20px rgba(224,1,115,.30)}
@keyframes ck-fade{from{opacity:0}}
@keyframes ck-rise{from{opacity:0;transform:translateY(24px) scale(.98)}}
@media (min-width:768px){
	.ck-sheet{left:50%;right:auto;bottom:auto;top:50%;width:420px;transform:translate(-50%,-50%);border-radius:var(--r-lg);animation:ck-fade .2s}
	.ck-sheet-handle{display:none}
}

/* the Razorpay plugin's hand-off page: it opens the payment window by itself */
.ck-handoff{text-align:center;padding:32px 0}
.ck-handoff p{color:var(--muted);font-size:14px;margin-bottom:16px}
.ck-handoff #btn-razorpay{border:0;border-radius:var(--r-pill);background:var(--success);color:#fff;padding:14px 24px;font-size:14px;font-weight:600;box-shadow:0 8px 24px var(--success-glow)}
.ck-handoff #btn-razorpay-cancel{display:block;margin:12px auto 0;border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline}

/* WooCommerce notices, one component for all three shapes (master workflow §4.2c) */
.woocommerce-error,.woocommerce-info,.woocommerce-message{list-style:none;margin:0 0 16px;padding:12px 16px;border:var(--bw) solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:14px;line-height:20px}
.woocommerce-error{border-color:color-mix(in oklab,var(--error) 30%,transparent);background:color-mix(in oklab,var(--error) 8%,var(--surface));color:var(--error)}
.woocommerce-error li{margin:0;padding:0}
.woocommerce-message{border-color:color-mix(in oklab,var(--success) 30%,transparent);background:color-mix(in oklab,var(--success) 8%,var(--surface));color:var(--success)}
.woocommerce-info{background:var(--surface-elevated);color:var(--muted)}
.woocommerce-error .button,.woocommerce-info .button,.woocommerce-message .button{float:right;margin-left:12px;font-weight:600;text-decoration:underline;background:none;border:0;color:inherit}

@media (prefers-reduced-motion:reduce){
	.ck-mrp,.ck-mrp::after,.ck-price-now,.ck-discount-tag,.ck-savings::before,.ck-total-flash,.ck-sheet,.ck-sheet-overlay{animation:none!important;opacity:1!important;transform:none!important}
	.ck-mrp::after{transform:scaleX(1)!important}
	@media (min-width:768px){.ck-sheet{transform:translate(-50%,-50%)!important}}
}

/* ==========================================================================
   THANK YOU — thank-you-client.tsx (max-w-lg, rounded-3xl cards)
   ========================================================================== */

.ty-wrap{max-width:512px!important}
.ty{padding:24px 0 96px;display:flex;flex-direction:column;gap:20px}
.ty-hero{border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-xl);padding:24px;text-align:center}
.ty-check{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:var(--r-pill);background:color-mix(in oklab,var(--success) 15%,transparent);color:var(--success);animation:ty-pop .5s .15s cubic-bezier(.34,1.56,.64,1) both}
.ty-check svg{width:28px;height:28px}
.ty-check path{stroke-dasharray:1;stroke-dashoffset:1;animation:ty-draw .55s .4s ease-out forwards}
@keyframes ty-pop{from{transform:scale(0) rotate(-30deg)}}
@keyframes ty-draw{to{stroke-dashoffset:0}}
.ty-thanks{margin-top:16px;font-size:24px;line-height:32px;color:var(--primary)}
.ty-hero h1{margin-top:4px;font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.ty-hero>p.ck-sm{margin-top:8px}
.ty-retry{margin-top:20px}
.ty-book{overflow:hidden;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-xl)}
.ty-book-top{display:flex;align-items:center;gap:16px;padding:20px}
.ty-book-cover{position:relative;width:112px;height:112px;flex:none;overflow:hidden;border-radius:var(--r-md);border:var(--bw) solid var(--border)}
.ty-book-info{min-width:0}
.ty-unlocked{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
.ty-book-info h2{margin-top:2px;font-size:20px;line-height:1.25;font-weight:600}
.ty-book-info p{margin-top:2px}
.ty-primary{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;padding:16px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
.ty-primary:hover{background:var(--primary-hover)}
.ty-grid2{display:grid;grid-template-columns:1fr 1fr;border-top:var(--bw) solid var(--border)}
.ty-grid2 a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-size:14px;font-weight:600;text-decoration:none}
.ty-grid2 a:hover{background:var(--surface-elevated)}
.ty-grid2 a+a{border-left:var(--bw) solid var(--border)}
.ty-also{border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:16px}
.ty-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.ty-also ul{list-style:none;margin:8px 0 0;padding:0}
.ty-also li{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14px}
.ty-also li+li{border-top:var(--bw) solid var(--border)}
.ty-also li span{flex:1;min-width:0}
.ty-also li a{color:var(--primary);font-weight:600;text-decoration:none}
.ty-save{border:var(--bw) solid color-mix(in oklab,var(--primary) 40%,transparent);background:color-mix(in oklab,var(--primary) 3%,var(--surface));border-radius:var(--r-lg);padding:16px}
.ty-save .ck-sm{margin-top:4px}
.ty-copy{margin-top:12px;display:flex;gap:8px}
.ty-copy input{min-width:0;flex:1;border:var(--bw) solid var(--border);background:var(--background);border-radius:var(--r-sm);padding:8px 12px;font-size:12px}
.ty-copy button{flex:none;border:0;border-radius:var(--r-sm);background:var(--primary);color:#fff;padding:8px 12px;font-size:12px;font-weight:600}
.ty-claim{display:flex;align-items:flex-start;gap:12px;border:var(--bw) solid color-mix(in oklab,var(--primary) 30%,transparent);background:var(--primary-soft);border-radius:var(--r-xl);padding:20px}
.ty-claim-ic{display:inline-flex;width:40px;height:40px;flex:none;align-items:center;justify-content:center;border-radius:var(--r-pill);background:color-mix(in oklab,var(--primary) 20%,transparent);color:var(--primary)}
.ty-claim-ic svg{width:20px;height:20px}
.ty-claim h3{font-size:18px;line-height:28px;font-weight:600}
.ty-claim p{margin-top:4px}
.ty-claim a{color:var(--primary)}
.ty-share,.ty-vip{display:flex;align-items:center;justify-content:center;gap:8px;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-pill);padding:12px;font-size:14px;font-weight:500;text-decoration:none}
.ty-share:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.ty-vip{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in oklab,var(--primary) 30%,transparent)}
.ty-confetti{position:fixed;inset:0;pointer-events:none;z-index:70}

/* ==========================================================================
   STORE — header, home, product, library, reader, login, account
   ========================================================================== */

.ist-wrap{max-width:calc(var(--wrap) + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}
.ist-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:var(--bw) solid var(--border)}
.ist-header-in{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:16px}
.ist-logo img{height:40px;width:auto}
.ist-nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:500}
.ist-nav a{text-decoration:none;color:var(--muted)}
.ist-nav a:hover{color:var(--foreground)}
.ist-nav .ist-nav-cta{color:#fff;background:var(--primary);border-radius:var(--r-pill);padding:8px 16px}
.ist-nav .ist-nav-cta:hover{background:var(--primary-hover);color:#fff}
.ist-main{min-height:60vh}

.ist-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill);background:var(--primary);color:#fff;padding:12px 22px;font-size:15px;font-weight:600;text-decoration:none;transition:background .15s,transform .1s}
.ist-btn:hover{background:var(--primary-hover)}
.ist-btn:active{transform:scale(.98)}
.ist-btn-ghost{background:var(--surface);color:var(--foreground);border:var(--bw) solid var(--border)}
.ist-btn-ghost:hover{background:var(--surface-elevated)}
.ist-btn-light{background:#fff;color:var(--primary)}
.ist-btn-light:hover{background:#fff}
.ist-btn-sm{padding:8px 14px;font-size:13px}
.ist-btn-green{background:var(--success);box-shadow:0 8px 24px var(--success-glow)}
.ist-btn-green:hover{background:var(--success-hover)}
.ist-muted{color:var(--muted)}
.ist-row{display:flex;gap:12px;flex-wrap:wrap}

.ist-price{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.ist-price b{font-size:20px;font-weight:600}
.ist-price s{font-size:13px;color:var(--muted-2)}
.ist-price em{font-style:normal;font-size:12px;font-weight:600;color:var(--success)}
.ist-price.is-sm b{font-size:16px}

.ist-hero{padding:48px 0 32px;text-align:center}
.ist-hero h1{font-size:clamp(28px,5vw,44px);line-height:1.12;letter-spacing:-.025em;max-width:760px;margin:0 auto}
.ist-lede{margin:14px auto 0;max-width:560px;font-size:17px;color:var(--muted)}
.ist-hero-cta{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ist-points{list-style:none;margin:24px 0 0;padding:0;display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.ist-points li::before{content:"✓";color:var(--success);font-weight:700;margin-right:6px}

.ist-section{padding:24px var(--pad)}
.ist-h2{font-size:22px;margin-bottom:16px}
.ist-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;opacity:.9}

.ist-aap{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:var(--r-xl);padding:24px;background:linear-gradient(135deg,#e00173,#9d174d);color:#fff;text-decoration:none}
.ist-aap h2{font-size:24px;margin-top:4px}
.ist-aap p{margin-top:6px;opacity:.9;font-size:14px;max-width:460px}
.ist-aap-buy{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none}
.ist-aap .ist-price b{font-size:24px}
.ist-aap .ist-price s,.ist-aap .ist-price em{color:rgba(255,255,255,.85)}

.ist-bundles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.ist-bundle{display:flex;flex-direction:column;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.ist-bundle:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent);transform:translateY(-2px)}
.ist-bundle-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;background:var(--surface-elevated)}
.ist-bundle-covers>*{aspect-ratio:3/4;border-radius:var(--r-sm);overflow:hidden}
.ist-bundle-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.ist-bundle-body h3{font-size:16px}

.ist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.ist-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (min-width:960px){.ist-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ist-card{display:flex;flex-direction:column;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.ist-card-link{text-decoration:none;display:flex;flex-direction:column}
.ist-card-link>.ist-cover,.ist-card-link>img{aspect-ratio:3/4;width:100%;height:auto}
.ist-card h3{font-size:15px;line-height:1.3;padding:12px 12px 0}
.ist-card-tag{padding:4px 12px 0;font-size:12px;line-height:16px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ist-card-foot{margin-top:auto;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ist-owned{font-size:12px;font-weight:600;color:var(--success)}

/* product page (when a product has no raw-HTML sales page) */
.ist-pdp{display:grid;gap:24px;padding:24px 0 120px}
@media (min-width:860px){.ist-pdp{grid-template-columns:400px 1fr;gap:40px;padding-top:40px}}
.ist-pdp-cover{border-radius:var(--r-lg);overflow:hidden;border:var(--bw) solid var(--border);aspect-ratio:3/4;background:var(--surface)}
.ist-pdp-cover:has(img){aspect-ratio:auto}
.ist-pdp-cover img.ist-cover{height:auto;display:block}
.ist-pdp h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.025em}
.ist-pdp-tag{margin-top:8px;font-size:17px;color:var(--muted)}
.ist-pdp-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.ist-chip{display:inline-flex;align-items:center;gap:6px;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-pill);padding:4px 12px;font-size:12px;color:var(--muted)}
.ist-pdp-buy{margin-top:20px;display:flex;flex-direction:column;gap:12px;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);padding:20px}
.ist-pdp-buy .ist-price b{font-size:28px}
.ist-pdp-list{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ist-pdp-list li{display:flex;gap:10px;font-size:15px}
.ist-pdp-list li::before{content:"✓";color:var(--primary);font-weight:700}
.ist-pdp h2{font-size:18px;margin-top:28px}
.ist-pdp-desc{margin-top:12px;color:var(--muted);font-size:15px}
.ist-pdp-desc p+p{margin-top:12px}
.ist-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:50;border-top:var(--bw) solid var(--border);background:#fff;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom))}
.ist-sticky-buy .ist-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0}
@media (min-width:860px){.ist-sticky-buy{display:none}}

/* login, account */
.ist-auth{max-width:420px;margin:0 auto;padding:48px var(--pad) 96px}
.ist-auth-card{border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-xl);padding:28px 24px}
.ist-auth h1{font-size:24px;letter-spacing:-.02em}
.ist-auth-sub{margin-top:6px;color:var(--muted);font-size:14px}
.ist-form{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.ist-form .ist-btn{width:100%;padding:14px}
.ist-alt{margin-top:14px;text-align:center;font-size:13px;color:var(--muted)}
.ist-alt button,.ist-alt a{border:0;background:none;padding:0;color:var(--primary);font-weight:600;text-decoration:none}
.ist-note{margin-top:16px;padding:12px 14px;border-radius:var(--r-md);font-size:14px;line-height:20px}
.ist-note.is-error{background:color-mix(in oklab,var(--error) 8%,var(--surface));border:var(--bw) solid color-mix(in oklab,var(--error) 30%,transparent);color:var(--error)}
.ist-note.is-ok{background:color-mix(in oklab,var(--success) 8%,var(--surface));border:var(--bw) solid color-mix(in oklab,var(--success) 30%,transparent);color:var(--success)}
.ist-sent{text-align:center}
.ist-sent-ic{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary);margin-bottom:14px}
.ist-sent-ic svg{width:26px;height:26px}
.ist-account h2{font-size:16px;margin-bottom:10px}
.ist-account section+section{margin-top:24px;padding-top:24px;border-top:var(--bw) solid var(--border)}

/* library */
.ist-lib{padding-top:28px;padding-bottom:96px}
.ist-lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ist-lib-head h1{font-size:28px;letter-spacing:-.02em}
.ist-lib-head p{color:var(--muted);font-size:14px;margin-top:4px}
.ist-lib-aap{margin-top:16px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary);padding:6px 12px;font-size:13px;font-weight:600}
.ist-shelf{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.ist-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.ist-shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.ist-book{display:flex;flex-direction:column;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.ist-book.is-focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ist-book-cover{display:block;aspect-ratio:3/4;overflow:hidden}
.ist-book-body{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1}
.ist-book-body h3{font-size:14px;line-height:1.3}
.ist-book-actions{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap}
.ist-book-actions .ist-btn{flex:1;padding:9px 10px;font-size:13px}
.ist-book-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;font-size:12px}
.ist-book-dl a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:34px;padding:0 8px;white-space:nowrap;border:var(--bw) solid var(--border);border-radius:var(--r-pill)}
.ist-book-dl a:hover{color:var(--primary)}
.ist-lib-empty{margin-top:24px;border:var(--bw) dashed var(--border);border-radius:var(--r-lg);padding:32px;text-align:center;color:var(--muted)}
.ist-lib h2{font-size:18px;margin:40px 0 4px}
.ist-bonus{margin-top:12px;display:grid;gap:10px}
.ist-bonus a{display:flex;align-items:center;gap:12px;border:var(--bw) solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:12px 14px;text-decoration:none}
.ist-bonus a:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.ist-bonus b{display:block;font-size:14px}
.ist-bonus small{color:var(--muted);font-size:12px}
.ist-bonus .ck-ic{color:var(--primary)}

/* reader */
.ist-reader-body{background:#27272a}
.ist-reader-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;background:rgba(24,24,27,.96);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ist-reader-bar a,.ist-reader-bar button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#fff;text-decoration:none;font-size:13px;padding:8px;border-radius:var(--r-sm)}
.ist-reader-bar a:hover,.ist-reader-bar button:hover{background:rgba(255,255,255,.1)}
.ist-reader-title{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ist-reader-lang{flex:none;display:inline-flex;border:var(--bw) solid rgba(255,255,255,.25);border-radius:var(--r-pill);overflow:hidden}
.ist-reader-lang button{border-radius:0;padding:6px 10px;font-size:12px}
.ist-reader-lang button.is-on{background:#fff;color:#18181b}
.ist-reader-page{font-size:12px;opacity:.8;min-width:64px;text-align:center}
/* phones: back is just the arrow, so English/हिंदी, the page count, zoom and download all fit down to 320px */
@media (max-width:480px){.ist-reader-bar{gap:4px;padding:0 8px}.ist-reader-bar>a:first-child span{display:none}.ist-reader-page{min-width:44px}}
.ist-pages{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 8px 80px}
.ist-pagebox{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35);max-width:100%}
.ist-pagebox canvas{display:block;width:100%;height:auto}
.ist-reader-msg{color:#d4d4d8;text-align:center;padding:60px 20px;font-size:14px}
.ist-reader-msg a{color:#fff}

/* prose pages, 404 */
.ist-prose{max-width:720px;padding:40px var(--pad) 80px}
.ist-prose h1{font-size:32px;margin-bottom:20px}
.ist-prose h2{font-size:20px;margin:28px 0 10px}
.ist-prose p,.ist-prose li{color:var(--muted);font-size:16px;line-height:1.7}
.ist-prose p+p{margin-top:12px}
.ist-prose>div,.ist-prose>ul{margin-top:12px}   /* the legal pages' sections (imported from the app) */
.ist-prose h3{font-size:16px;margin:20px 0 6px}
.ist-prose ul{margin:8px 0 0;padding-left:20px}
.ist-prose li+li{margin-top:4px}
.ist-prose a{color:var(--primary)}
.ist-empty{text-align:center;padding:80px var(--pad)}
.ist-empty h1{font-size:28px}
.ist-empty p{margin:12px auto 24px;max-width:460px}
.ist-empty .ist-row{justify-content:center}

/* footer */
.ist-footer{margin-top:40px;border-top:var(--bw) solid var(--border);background:var(--surface)}
.ist-footer-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:32px;padding-bottom:20px}
.ist-footer-in img{height:40px;width:auto}
.ist-footer-in p{margin-top:10px;font-size:13px;max-width:320px}
.ist-footer-links{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:14px}
.ist-footer-links a{color:var(--muted);text-decoration:none}
.ist-footer-links a:hover{color:var(--primary)}
.ist-footer-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;padding-bottom:24px;border-top:var(--bw) solid var(--border);font-size:12px;color:var(--muted)}

@media (max-width:560px){
	.ist-card-foot{flex-direction:column;align-items:stretch;gap:8px}
	.ist-card-foot .ist-btn{width:100%}
	.ist-aap{flex-direction:column;align-items:flex-start}
	.ist-aap-buy{align-items:flex-start}
	.ist-nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Continue with Google on /login (30 Sep 2026): Google's own button, then "or use your email" */
.ist-google{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:4px 0 16px}
.ist-google .g_id_signin{display:flex;justify-content:center;min-height:44px}
.ist-or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted-2)}
.ist-or::before,.ist-or::after{content:"";flex:1;height:var(--bw);background:var(--border)}