/* Princess – The Beauty: the store page (/) and each suit's page (/suits/...).
   Checkout, login and policies use the small pages.css. Every ornament here is CSS or inline SVG. */

/* ---------- 1. Fonts and tokens ---------- */
/* Stand-ins while the two web fonts load, scaled to the same line lengths so the text does not jump when they arrive. */
@font-face{font-family:"Serif standin";src:local("Times New Roman");font-weight:100 900;size-adjust:95%}
@font-face{font-family:"Serif standin 2";src:local("Noto Serif");font-weight:100 900;size-adjust:80%}
@font-face{font-family:"Sans standin";src:local("Roboto"),local("Arial");font-weight:100 900;size-adjust:97%}
/* The rupee sign comes from the phone's own font: the web fonts keep it in a second file that nothing else needs. */
@font-face{font-family:"Rupee";src:local("Roboto"),local("Segoe UI"),local("Helvetica Neue"),local("Arial");unicode-range:U+20B9}
:root{
  --ivory:#FBF7F0; --paper:#FFFDF9; --blush:#F6E4E8; --blush-2:#FCF1F3;
  --rani:#B21A5A; --rani-2:#C42368;
  --panna:#0C4B41; --panna-2:#0F5E57; --panna-tint:#E4EFEA;
  --gold:#B18E35; --gold-text:#7A5C12; --gold-light:#EBD49A; --gold-line:rgba(177,142,53,.5);
  --ink:#1D1A1F; --soft:#5A5258; --line:rgba(29,26,31,.14); --error:#C2264B; --wa:#0B6E63;
  --serif:"Cormorant Garamond","Serif standin","Serif standin 2",Georgia,serif;
  --sans:"Rupee",Jost,"Sans standin",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hindi:"Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",system-ui,sans-serif;
  --t-display:clamp(2.125rem,1.2rem + 4.2vw,4.25rem); --t-h2:clamp(1.75rem,1.2rem + 2.4vw,2.875rem);
  --pad:16px; --shell:1200px; --tint:var(--blush); --dock:60px;
  /* everything on a phone's first screen except the hero photo: strip, header, the words and the dock */
  --hero-rest:474px;
  /* ornaments, drawn once */
  --toran:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 48 22.5'%3E%3Cg fill='none' stroke='%23B18E35' stroke-width='.9'%3E%3Cpath d='M0 3.500h48M0 3.500q24 11 48 0'/%3E%3C/g%3E%3Cg fill='%230C4B41' stroke='%23B18E35' stroke-width='.6'%3E%3Cpath d='M24 9c-3.200 3.500-3.200 8 0 12 3.200-4 3.200-8.500 0-12zM11 6.800c-2.200 2.400-2.200 5.600 0 8.400 2.200-2.800 2.200-6 0-8.400zM37 6.800c-2.200 2.400-2.200 5.600 0 8.400 2.200-2.800 2.200-6 0-8.400z'/%3E%3C/g%3E%3Cg fill='%23B21A5A'%3E%3Ccircle cx='0' cy='3.500' r='2.500'/%3E%3Ccircle cx='48' cy='3.500' r='2.500'/%3E%3C/g%3E%3C/svg%3E");
  --buta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23B18E35' stroke-opacity='.3' stroke-linecap='round'%3E%3Cpath d='M28 26c-2.500-2-3-5.500 0-8.500 3 3 2.500 6.500 0 8.500zM28 26c-3 .5-6-1.500-6.500-5.500 4-.5 6.500 2 6.500 5.500zM28 26c3 .5 6-1.500 6.500-5.500-4-.5-6.500 2-6.500 5.500zM28 26v10M28 32c-1.800-2-4-2.400-6-1.200 1.200 2.400 4 2.800 6 1.200zM28 34c1.800-2 4-2.400 6-1.200-1.200 2.400-4 2.800-6 1.200z'/%3E%3C/g%3E%3Cg fill='%23B18E35' fill-opacity='.3'%3E%3Ccircle cx='0' cy='0' r='1.400'/%3E%3Ccircle cx='56' cy='0' r='1.400'/%3E%3Ccircle cx='0' cy='56' r='1.400'/%3E%3Ccircle cx='56' cy='56' r='1.400'/%3E%3C/g%3E%3C/svg%3E");
  --buta-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23EBD49A' stroke-opacity='.14' stroke-linecap='round'%3E%3Cpath d='M28 26c-2.500-2-3-5.500 0-8.500 3 3 2.500 6.500 0 8.500zM28 26c-3 .5-6-1.500-6.500-5.500 4-.5 6.500 2 6.500 5.500zM28 26c3 .5 6-1.500 6.500-5.500-4-.5-6.500 2-6.500 5.500zM28 26v10M28 32c-1.800-2-4-2.400-6-1.200 1.200 2.400 4 2.800 6 1.200zM28 34c1.800-2 4-2.400 6-1.200-1.200 2.400-4 2.800-6 1.200z'/%3E%3C/g%3E%3C/svg%3E");
  --scallop-panna:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M0 0h22v2A11 10 0 0 1 0 2z' fill='%230C4B41'/%3E%3Cpath d='M22 2A11 10 0 0 1 0 2' fill='none' stroke='%23B18E35'/%3E%3C/svg%3E");
  --scallop-ivory:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M0 12h22v-2A11 10 0 0 0 0 10z' fill='%23FBF7F0'/%3E%3Cpath d='M22 10A11 10 0 0 0 0 10' fill='none' stroke='%23B18E35'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--panna);outline-offset:3px}
[hidden]{display:none!important}
.princess-v2{overflow-x:clip}
.pv-sprite{position:absolute}
.pv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pv-skip{position:absolute;left:8px;top:-60px;z-index:99;padding:10px 14px;background:var(--panna);color:#fff;border-radius:0 0 10px 10px}
.pv-skip:focus{top:0}
.pv-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.pv-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-il{width:40px;height:40px;flex:none;fill:none;stroke:var(--gold-text);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pv-hindi{font-family:var(--hindi);font-size:.9375rem;line-height:1.5}

/* type */
.pv-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
h2{font:600 var(--t-h2)/1.08 var(--serif);text-wrap:balance}
h2 i,h1 i{font-weight:500;color:var(--rani)}
.pv-sub{color:var(--soft)}
.pv-small{font-size:.875rem;color:var(--soft)}

/* buttons */
.pv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;
  background:linear-gradient(180deg,var(--rani-2),var(--rani));color:#fff;font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-align:center;
  box-shadow:inset 0 0 0 3px var(--rani),inset 0 0 0 4px rgba(235,212,154,.75),0 10px 22px -12px rgba(178,26,90,.7)}
.pv-btn .pv-ic{width:18px;height:18px}
.pv-btn-line{background:none;color:var(--panna);box-shadow:inset 0 0 0 1.5px var(--panna)}
.pv-btn-sm{min-height:44px;padding:0 18px;font-size:.8125rem}
.pv-btn:disabled,.pv-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@media (hover:hover){.pv-btn:hover{filter:brightness(1.07)}.pv-btn-line:hover{background:var(--panna-tint);filter:none}}
.pv-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;font-weight:500;text-decoration:underline;text-underline-offset:4px;color:var(--panna)}
.pv-link .pv-ic{width:18px;height:18px}
.pv-link[aria-pressed="true"] .pv-ic{fill:var(--rani);stroke:var(--rani)}
.pv-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--gold-line);border-radius:999px;background:var(--paper);font-size:.875rem;font-weight:500;white-space:nowrap;text-decoration:none}
.pv-chip[aria-pressed="true"]{background:var(--panna);border-color:var(--panna);color:#fff}
.pv-chips{display:flex;gap:8px;overflow-x:auto;margin-inline:calc(var(--pad)*-1);padding:2px var(--pad) 6px;scrollbar-width:none}
.pv-chips::-webkit-scrollbar{display:none}

/* zari divider: double gold thread with a lotus */
.pv-zari{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold)}
.pv-zari::before,.pv-zari::after{content:"";width:min(20vw,110px);height:4px;border-block:1px solid var(--gold-line)}
.pv-zari svg{width:46px;height:23px}

/* price line: the same three parts everywhere */
.pv-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px}
.pv-now{font:600 1.25rem/1.1 var(--sans);color:var(--rani);font-variant-numeric:tabular-nums}
.pv-mrp{font-size:.8125rem;color:var(--soft);text-decoration-thickness:1px}
.pv-off{padding:2px 9px;border-radius:999px;background:var(--panna-tint);color:var(--panna);font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap}
.pv-stock{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
/* the label that keeps changing (app.js, label()): its true messages share one cell, so the slot keeps the size of the
   longest and nothing beside it moves while one fades into the next. Standing still, the first is there alone, as before. */
.pv-turn{display:inline-grid}
.pv-turn>*{grid-area:1/1}
.princess-v2:not(.pv-motion) .pv-turn>:not(:first-child){display:none}
.pv-motion .pv-turn>*{opacity:0;transition:opacity .3s}
.pv-motion .pv-turn>.pv-on{opacity:1}

/* ---------- 3. Photo frames ---------- */
/* Every model picture sits in a jharokha: a cusped arch with a gold thread. The wall takes the colour behind it. */
.pv-ph{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--blush)}
.pv-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pv-arch{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);max-width:none;pointer-events:none}
.pv-arch use:first-child{fill:var(--wall,var(--ivory))}
.pv-arch use+use{fill:none;stroke:var(--gold);stroke-width:1.5}
.pv-arch-gem{fill:var(--gold);stroke:none}
/* the label that goes with every model picture: a plate under the photo */
.pv-ai{display:block;padding:5px 8px;background:var(--blush);color:var(--ink);font-size:.75rem;font-weight:500;line-height:1.35;letter-spacing:.01em;text-align:center;text-wrap:balance}
/* The real cloth is shown as a swatch card with pinked (zig-zag) edges. */
.pv-swatch{position:relative;aspect-ratio:4/5;background:var(--blush) var(--buta)}
.pv-swatch-in{position:absolute;inset:16px 16px 44px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 12px rgba(29,26,31,.28))}
.pv-swatch img{width:auto;max-width:100%;max-height:100%;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/10px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/10px 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/10px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/10px 51% repeat-x}
.pv-swatch figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--panna)}
.pv-zoom-btn{position:absolute;right:10px;top:60px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--gold-line);border-radius:999px;background:var(--paper);font-size:.8125rem;font-weight:500}
.pv-zoom-btn .pv-ic{width:16px;height:16px}
/* a close-up cut from the fabric photo fills its slide; the caption sits on a plate */
.pv-closer{background-repeat:no-repeat}
.pv-closer figcaption{left:50%;right:auto;transform:translateX(-50%);padding:5px 12px;border-radius:12px;background:rgba(255,253,249,.94);white-space:nowrap}

/* ---------- 4. Notice strip + header ---------- */
.pv-strip{display:flex;align-items:center;min-height:32px;padding-left:var(--pad);background:linear-gradient(100deg,var(--panna),var(--panna-2));color:var(--gold-light);font-size:.75rem;font-weight:500;line-height:20px;letter-spacing:.12em;text-transform:uppercase}
.pv-strip-window{flex:1;min-width:0;overflow:hidden}
.pv-strip-track{display:flex;flex-wrap:wrap;justify-content:center;padding-block:6px;text-align:center}
/* standing still: as many whole notices as fit on one line, so the strip is as tall moving as still */
.pv-strip ul{flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:center;height:20px;overflow:hidden}
.pv-strip ul+ul{display:none}
.pv-strip li{white-space:nowrap}
.pv-strip li+li::before,.pv-motion-running .pv-strip li::before{content:"✦";padding-inline:.8em;color:var(--gold)}
.pv-strip-pause{position:relative;flex:none;display:grid;place-items:center;width:44px;height:32px;border:0;background:none;color:inherit}
.pv-strip-pause::after{content:"";position:absolute;inset:-6px 0}
.pv-strip-pause .pv-ic{width:17px;height:17px}
.pv-strip-pause:disabled{opacity:.5;cursor:default}
.pv-motion-running .pv-strip-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;white-space:nowrap;animation:pv-marquee 40s linear infinite}
.pv-motion-running .pv-strip ul{flex:none;flex-wrap:nowrap}
.pv-motion-running .pv-strip ul+ul{display:flex}
@keyframes pv-marquee{to{transform:translateX(-50%)}}

.pv-header{position:relative;z-index:30;background:var(--ivory)}
.pv-header-in{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:52px}
.pv-brand{flex:none;display:flex;align-items:center;gap:9px;min-height:44px;text-decoration:none}
.pv-brand img{width:36px;height:36px;border-radius:50%}
.pv-brand-name{font:600 1.3125rem/1 var(--serif);letter-spacing:.2em;white-space:nowrap}
.pv-nav{display:flex;align-items:center;min-width:0}
.pv-nav>*{flex:none}
.pv-nav-link,.pv-nav>.pv-nav-wa{display:none}
/* "Hi, <first name>" gives way first: a long name is cut with an ellipsis, the bag never leaves the screen */
.pv-nav>.pv-login{flex:0 1 auto;min-width:0;height:44px;max-width:108px;padding-inline:8px;overflow:hidden;font-size:.75rem;font-weight:600;line-height:44px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:374px){.pv-brand{gap:7px}.pv-brand img{width:32px;height:32px}.pv-brand-name{font-size:1.125rem;letter-spacing:.12em}}
@media (max-width:339px){.pv-brand-name{font-size:1rem;letter-spacing:.08em}.pv-nav>.pv-login{padding-inline:5px;letter-spacing:.08em}}
.pv-icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;text-decoration:none}
.pv-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding-inline:4px;border-radius:9px;background:var(--rani);color:#fff;font:600 .75rem/18px var(--sans);text-align:center}

/* The welcome band: what this device kept from an earlier visit, said at most once a day as the first part of the
   page. It stands in the page: nothing floats, moves or covers a button, and Close is a button like the others. */
.pv-back{border-bottom:1px solid var(--gold-line);background:var(--paper)}
.pv-back-in{display:grid;gap:10px;padding-block:12px}
.pv-back-words{display:flex;align-items:center;gap:10px}
.pv-back .pv-thumb{flex:none;width:40px;border-radius:20px 20px 4px 4px}
.pv-back-go{display:flex;flex-wrap:wrap;gap:8px}
.pv-back-go .pv-btn{flex:1 1 auto}
@media (min-width:900px){.pv-back-in{grid-template-columns:minmax(0,1fr) auto;align-items:center}.pv-back-go .pv-btn{flex:none}}

/* ---------- 5. Hero ---------- */
.pv-hero{position:relative}
.pv-hero-stage{position:relative}
.pv-hero-photo{position:relative;display:block;width:100%;padding:0;border:0;background:none;text-align:left}
/* on a phone the photo takes what the first screen has left, so the price and the button are never below it */
.pv-hero .pv-ph{aspect-ratio:auto;height:clamp(160px,calc(100vh - var(--hero-rest)),372px);height:clamp(160px,calc(100svh - var(--hero-rest) - env(safe-area-inset-bottom)),372px)}
.pv-hero .pv-ai{position:absolute;left:10px;bottom:10px;max-width:58%;padding:5px 11px;border-radius:14px;background:rgba(255,253,249,.94);text-align:left}
.pv-hero-tag{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 8px 0 13px;border-radius:999px;background:var(--panna);color:#fff;font-size:.875rem;font-weight:500}
.pv-hero-tag b{font:600 1.0625rem/1 var(--serif);letter-spacing:.02em}
.pv-hero-tag .pv-ic{width:16px;height:16px}
.pv-seal{position:absolute;right:8px;top:8px;width:105px;height:105px;transform:rotate(-9deg);filter:drop-shadow(0 3px 5px rgba(29,26,31,.3));pointer-events:none}
.pv-seal text{font:600 11.5px var(--sans);fill:var(--gold-light);text-anchor:middle}
.pv-seal .pv-seal-num{font:600 29px var(--serif);fill:#fff}
.pv-hero-swatch{display:none}
.pv-hero-copy{position:relative;padding:20px var(--pad) 18px;text-align:center}
.pv-hero-copy::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--scallop-ivory) repeat-x 50% 0}
.pv-hero .pv-eyebrow{white-space:nowrap}
.pv-hero h1{margin:6px 0 8px;font:600 var(--t-display)/1.04 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.pv-hero h1 i{display:block}
.pv-hero-offer{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;white-space:nowrap}
.pv-hero-offer .pv-now{font-size:1.875rem}
.pv-hero-offer .pv-now small{font-size:.875rem;font-weight:500;color:var(--ink);letter-spacing:.04em}
.pv-hero-offer .pv-mrp{font-size:.9375rem}
.pv-hero-facts{display:flex;justify-content:center;gap:6px;margin-top:8px;white-space:nowrap}
.pv-hero-facts span{padding:3px 11px;border-radius:999px;background:var(--panna-tint);color:var(--panna);font-size:.8125rem;font-weight:600}
.pv-hero-facts span+span{background:var(--blush);color:var(--ink)}
.pv-hero .pv-hindi{margin-top:8px;color:var(--soft);white-space:nowrap}
.pv-hero-cta{display:flex;justify-content:center;margin-top:14px}
.pv-hero-cta .pv-btn{width:100%;max-width:420px}
/* short phones: the words close up so the photo keeps its share */
@media (max-height:700px) and (max-width:699px){
  :root{--hero-rest:400px}
  .pv-hero-copy{padding:16px var(--pad) 12px}
  .pv-hero h1{font-size:1.875rem}
  .pv-hero .pv-zari,.pv-hero .pv-hindi{display:none}
}
@media (max-width:359px){.pv-hero .pv-eyebrow{letter-spacing:.12em}.pv-hero-facts span{padding-inline:8px;font-size:.75rem}}
@media (max-height:599px) and (max-width:699px){.pv-seal{width:90px;height:90px}}      /* the smallest phones: the seal gives the photo room */

/* ---------- 6. Trust four ---------- */
.pv-trust{display:grid;grid-template-columns:1fr 1fr;gap:18px 10px;text-align:center}
.pv-trust li{display:grid;justify-items:center;align-content:start;gap:2px}
.pv-plaque{display:grid;place-items:center;width:58px;height:62px;margin-bottom:6px;border:1px solid var(--gold-line);border-radius:29px 29px 8px 8px;background:var(--paper);box-shadow:0 0 0 4px var(--blush)}
.pv-trust b{font-size:.9375rem;font-weight:600;line-height:1.25}
.pv-trust span{max-width:17em;font-size:.8125rem;line-height:1.35;color:var(--soft)}
.pv-trust-band{padding-block:26px 30px;background:var(--blush) var(--buta)}

/* ---------- 7. Sections + collection ---------- */
.pv-sec{padding-block:clamp(40px,7vw,88px)}
.pv-sec-last{padding-top:0}
.pv-head{max-width:660px;margin:0 auto 20px;text-align:center}
.pv-head .pv-eyebrow{margin-bottom:8px}
.pv-head h2{margin-bottom:10px}
.pv-head .pv-zari{margin-bottom:10px}
.pv-toran{height:30px;background:var(--toran) repeat-x 50% 0}
.pv-collection{padding-top:0}
.pv-collection .pv-toran{margin-bottom:26px}
.pv-finder-label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:600 1.375rem/1 var(--serif)}
.pv-finder-label svg{width:22px;height:22px;color:var(--gold)}
.pv-toolbar{display:flex;align-items:center;gap:8px;margin:8px 0 18px}
.pv-search{position:relative;flex:1;min-width:0}
.pv-search .pv-ic{position:absolute;left:14px;top:13px;width:18px;height:18px;color:var(--soft);pointer-events:none}
.pv-search input,.pv-sort select{width:100%;height:44px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:1rem}
.pv-search input{padding:0 14px 0 40px}
.pv-sort select{padding:0 10px;max-width:136px}
.pv-results{margin:-8px 0 14px;font-size:.8125rem;color:var(--soft)}

.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.pv-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--gold-line);border-radius:14px;background:var(--paper);--wall:var(--paper)}
.pv-card-photo{display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none}
.pv-card-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:12px 12px 14px}
.pv-card h3{font:600 clamp(1.1875rem,5.6vw,1.375rem)/1.08 var(--serif)}
.pv-card-tag{font-size:.8125rem;line-height:1.4;color:var(--soft)}
/* every card prices the same way at every width: the price and its saving on one line, the MRP under them */
.pv-card .pv-mrp{order:3;flex-basis:100%}
.pv-card .pv-btn{width:100%;margin-top:auto;padding-inline:8px;letter-spacing:.1em}
.pv-card .pv-stock{margin-bottom:4px}
.pv-heart{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--rani)}
.pv-heart::before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(255,253,249,.94);box-shadow:0 1px 5px rgba(29,26,31,.22)}
.pv-heart .pv-ic{position:relative;width:20px;height:20px}
.pv-heart[aria-pressed="true"] .pv-ic{fill:var(--rani)}
.pv-motion .pv-heart[aria-pressed="true"] .pv-ic{animation:pv-pop .35s ease-out}
@keyframes pv-pop{40%{transform:scale(1.35)}}
@media (hover:hover){.pv-motion .pv-card img,.pv-motion .pv-others img{transition:transform .5s ease}.pv-motion .pv-card:hover img,.pv-motion .pv-others a:hover img{transform:scale(1.035)}}
.pv-empty{padding:26px 16px;border:1px dashed var(--gold-line);border-radius:14px;text-align:center}
.pv-empty h3{margin-bottom:6px;font:600 1.5rem/1.1 var(--serif)}
.pv-empty .pv-btn{margin-top:14px}
@media (max-width:599px){
  /* an odd number of designs: the first one becomes a wide feature card, so no card is left alone */
  .pv-grid>.pv-card:first-child:nth-last-child(odd){grid-column:1/-1;flex-direction:row}
  .pv-grid>.pv-card:first-child:nth-last-child(odd) .pv-card-photo{flex:0 0 46%}
  .pv-grid>.pv-card:first-child:nth-last-child(odd) .pv-ph{flex:1;min-height:210px;aspect-ratio:auto}
  .pv-grid>.pv-card:first-child:nth-last-child(odd) .pv-card-body{justify-content:center}
  .pv-grid>.pv-card:first-child:nth-last-child(odd) h3{padding-right:26px;font-size:1.625rem}
  .pv-grid>.pv-card:first-child:nth-last-child(odd) .pv-btn{margin-top:4px}
  /* narrow cards: the saving as plain words, so it fits beside the price */
  .pv-card-body{padding-inline:10px}
  .pv-card .pv-off{padding:0;background:none}
}

/* moving zari ribbon (the craft words). Standing still it shows the words that fit on one line, so it is as tall moving as still. */
.pv-ribbon{display:flex;align-items:center;border-block:1px solid var(--gold-line);background:var(--paper);font:500 italic 1.5rem/2rem var(--serif);color:var(--gold-text)}
.princess-v2:not(.pv-motion-running) .pv-ribbon{padding-left:44px}
.pv-ribbon-track{flex:1;min-width:0;display:flex;overflow:hidden;padding-block:11px}
.pv-ribbon p{flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:center;height:2rem;overflow:hidden}
.pv-ribbon p+p{display:none}
.pv-ribbon i{white-space:nowrap}
.pv-ribbon i+i::before,.pv-motion-running .pv-ribbon i::before{content:"✦";padding-inline:.9em;font:400 .875rem/1 var(--sans);vertical-align:.25em;color:var(--rani)}
.pv-ribbon-pause{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--gold-text)}
.pv-ribbon-pause .pv-ic{width:17px;height:17px}
.pv-ribbon-pause:disabled{visibility:hidden}
.pv-motion-running .pv-ribbon p{flex:none;flex-wrap:nowrap}
.pv-motion-running .pv-ribbon p+p{display:flex}
.pv-motion-running .pv-ribbon.pv-in-view p{animation:pv-slide 46s linear infinite}
@keyframes pv-slide{to{transform:translateX(-100%)}}

/* ---------- 8. Fabric-to-look slider ---------- */
.pv-reveal{background:var(--blush) var(--buta)}
.pv-reveal-picks{justify-content:safe center;margin-bottom:14px}
.pv-reveal-picks .pv-chip{padding-inline:12px}
.pv-reveal-foot{margin-top:18px;text-align:center}
.pv-reveal-foot h3{margin-bottom:4px;font:600 1.625rem/1.1 var(--serif)}
.pv-reveal-foot .pv-btn{margin-top:12px}
.pv-compare{position:relative;width:100%;max-width:440px;margin-inline:auto;overflow:hidden;aspect-ratio:4/5;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px var(--gold-line),0 0 0 6px var(--paper),0 0 0 7px var(--gold-line),0 26px 40px -26px rgba(12,75,65,.5);--cut:50%;touch-action:pan-y}
.pv-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-compare-b{object-position:50% 0;clip-path:inset(0 0 0 var(--cut))}
/* each label is cut at the divider with its own picture, so a label never sits on the other photo */
.pv-compare-la,.pv-compare-lb{position:absolute;inset:0;pointer-events:none}
.pv-compare-la{clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.pv-compare-lb{clip-path:inset(0 0 0 var(--cut))}
.pv-compare-la b,.pv-compare-lb b{position:absolute;bottom:10px;max-width:44%;padding:5px 10px;border-radius:12px;background:rgba(255,253,249,.94);font-size:.75rem;font-weight:600;line-height:1.3}
.pv-compare-la b{left:10px;color:var(--panna)}
.pv-compare-lb b{right:10px;text-align:right}
.pv-compare-knob{position:absolute;top:0;bottom:0;left:var(--cut);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px var(--gold)}
.pv-compare-knob::after{content:"‹ ›";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--gold),0 6px 14px rgba(29,26,31,.3);font:600 1.125rem/1 var(--sans);color:var(--panna);white-space:nowrap}
.pv-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.pv-compare:focus-within .pv-compare-knob::after{outline:3px solid var(--panna);outline-offset:2px}
.pv-compare-ends{display:flex;justify-content:center;gap:8px;margin-top:14px}
/* once, as it scrolls into view, the divider sways to show that it moves */
@property --cut{syntax:"<percentage>";inherits:true;initial-value:50%}
.pv-motion-running .pv-compare.pv-visible{animation:pv-nudge 1.9s ease-in-out .3s 1}
@keyframes pv-nudge{30%{--cut:66%}65%{--cut:40%}}

/* ---------- 9. Lookbook (night band) ---------- */
.pv-look{position:relative;background:var(--panna) var(--buta-night);color:#fff;--wall:var(--panna)}
.pv-look::before,.pv-footer::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--scallop-panna) repeat-x 50% 0;transform:scaleY(-1)}
.pv-look .pv-eyebrow{color:var(--gold-light)}
.pv-look h2 i{color:var(--gold-light)}
.pv-look .pv-sub{color:#DDE9E4}
.pv-look-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--pad),calc(50% - 150px)) 4px;scrollbar-width:none}
.pv-look-track::-webkit-scrollbar{display:none}
.pv-look-slide{flex:0 0 min(74vw,300px);scroll-snap-align:center}
.pv-look-slide button{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:0;background:none}
.pv-look-slide .pv-ai{border-radius:0 0 10px 10px}
.pv-look-slide figcaption{display:flex;align-items:baseline;gap:10px;padding:10px 2px 0}
.pv-look-slide figcaption span{font:500 italic 1.125rem/1 var(--serif);color:var(--gold-light)}
.pv-look-slide figcaption b{flex:1;font:600 1.625rem/1 var(--serif)}
.pv-look-slide figcaption i{font:600 1rem/1 var(--sans);font-style:normal;color:var(--gold-light)}
.pv-look-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.pv-look-nav button{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--gold-light);border-radius:50%;background:none;color:var(--gold-light)}
.pv-look-nav button:first-child .pv-ic{transform:scaleX(-1)}
.pv-look-nav span{min-width:4.5em;font:600 1.125rem/1 var(--serif);letter-spacing:.14em;text-align:center;color:var(--gold-light)}
.pv-look :focus-visible,.pv-footer :focus-visible,.pv-strip :focus-visible{outline-color:var(--gold-light)}

/* ---------- 10. Unstitched, explained ---------- */
.pv-steps{display:grid;gap:12px;counter-reset:step;max-width:920px;margin-inline:auto}
.pv-steps li{display:grid;grid-template-columns:72px 1fr;gap:4px 14px;align-items:center;padding:14px;border:1px solid var(--gold-line);border-radius:14px;background:var(--paper)}
.pv-steps .pv-il{grid-row:span 2;width:64px;height:64px;padding:6px;border-radius:32px 32px 8px 8px;background:var(--blush-2)}
.pv-steps b{align-self:end;font:600 1.375rem/1.1 var(--serif)}
.pv-steps b::before{counter-increment:step;content:counter(step) ". ";color:var(--rani)}
.pv-steps span{align-self:start;font-size:.9375rem;line-height:1.4;color:var(--soft)}
.pv-know{max-width:760px;margin:26px auto 0}
.pv-acc{border-bottom:1px solid var(--gold-line)}
.pv-acc:first-of-type{border-top:1px solid var(--gold-line)}
.pv-acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;font-weight:600;cursor:pointer;list-style:none}
.pv-acc summary::-webkit-details-marker{display:none}
.pv-acc summary::after{content:"+";font:400 1.5rem/1 var(--sans);color:var(--rani)}
.pv-acc[open] summary::after{content:"–"}
.pv-acc>div,.pv-acc>p{padding:0 0 16px;color:var(--soft)}
/* a link inside a sentence: the padding makes it 44px tall to tap without pushing the lines apart */
.pv-acc a,.pv-bag-empty a,.pv-sheet-bar .pv-small a{padding-block:13px;color:var(--panna);font-weight:500;text-underline-offset:4px}

/* ---------- 11. Jenny + footer ---------- */
.pv-jenny{display:grid;gap:14px;justify-items:center;max-width:760px;margin-inline:auto;padding:26px 18px;border:1px solid var(--gold-line);border-radius:120px 120px 16px 16px;background:var(--paper);text-align:center}
.pv-jenny .pv-plaque{color:var(--rani)}
.pv-jenny .pv-plaque .pv-ic{width:28px;height:28px}
.pv-jenny-qs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pv-jenny-qs .pv-chip{white-space:normal;text-align:left;min-height:44px;padding-block:8px;line-height:1.3}
.pv-jenny-go{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pv-seo{max-width:820px;margin:28px auto 0;text-align:center;font-size:.875rem;color:var(--soft)}
.pv-seo h2{margin-bottom:8px;font-size:1.375rem;color:var(--ink)}
.pv-footer{position:relative;margin-top:26px;padding:34px 0 30px;background:var(--panna) var(--buta-night);color:#E9F1EE;font-size:.9375rem}
.pv-footer-in{display:grid;gap:18px}
.pv-footer .pv-brand-name{color:var(--gold-light)}
.pv-footer p+p{margin-top:8px}
.pv-care{display:grid;justify-items:start}
.pv-care strong{font:600 1.375rem/1.2 var(--serif);color:var(--gold-light)}
.pv-footer a{min-height:44px;text-underline-offset:4px}
.pv-footer-links{display:flex;flex-wrap:wrap;gap:0 18px}
.pv-footer-links a,.pv-footer p a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* the build adds one line of design links as the footer's last paragraph */
.pv-footer>p{max-width:var(--shell);margin:10px auto 0;padding-inline:var(--pad)}
.pv-footer>p a{margin-inline:4px}

/* ---------- 12. Dock (phones): help on the left, the way to pay on the right ---------- */
body{padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom))}
.pv-dock{position:fixed;inset:auto 0 0 0;z-index:40;display:flex;align-items:stretch;gap:6px;padding:6px 10px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--gold-line);background:var(--paper);box-shadow:0 -8px 22px -12px rgba(29,26,31,.3)}
.pv-dock-cell{position:relative;flex:1;display:grid;justify-items:center;align-content:center;gap:1px;min-width:58px;min-height:48px;padding:0 4px;border:0;border-radius:12px;background:none;font-size:.75rem;font-weight:500;line-height:1.2;text-decoration:none;color:var(--ink)}
.pv-dock-cell.pv-wa{color:var(--wa)}
.pv-dock-cell.pv-wa span{color:var(--ink)}
.pv-dock-cell .pv-count{top:0;right:8px}
.pv-dock .pv-btn{flex:1;min-height:48px;padding-inline:10px;font-size:.8125rem;letter-spacing:.06em;white-space:nowrap}
.pv-dock-full{display:none}
.pv-has-bag .pv-dock-full{display:inline-flex}
.pv-has-bag .pv-dock-empty{display:none}
.pv-has-bag .pv-dock-cell{flex:none}
@media (max-width:339px){.pv-has-bag .pv-dock-cell{min-width:44px}.pv-has-bag .pv-dock-cell span{display:none}}      /* the smallest phones: icons only beside Checkout */
.pv-fab{display:none}

/* ---------- 13. Dialogs ---------- */
dialog{padding:0;border:0;max-width:none;max-height:none;background:var(--ivory);color:var(--ink)}
dialog::backdrop{background:rgba(7,40,35,.6)}
.pv-sheet{width:100%;max-height:94vh;max-height:94dvh;margin:auto 0 0;border-radius:22px 22px 0 0;overflow:hidden}
.pv-sheet[open]{display:flex;flex-direction:column}
.pv-motion .pv-sheet[open]{animation:pv-rise .32s ease-out}
@keyframes pv-rise{from{transform:translateY(28px);opacity:0}}
.pv-sheet-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:6px 6px 6px var(--pad);border-bottom:1px solid var(--gold-line);background:var(--paper)}
.pv-sheet-top h2{font-size:1.5rem}
.pv-sheet-top .pv-price{margin-top:2px}
.pv-sheet-top .pv-now{font-size:1.125rem}
.pv-sheet-top>p{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.pv-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none}
/* always in sight while a design is open: what is sold is fabric */
.pv-sheet-note{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 10px;background:var(--panna-tint);color:var(--panna);font-size:.8125rem;line-height:1.4}
.pv-sheet-note .pv-ic{width:16px;height:16px}
.pv-sheet-note b{font-weight:600;text-transform:uppercase}
.pv-sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pv-sheet-bar{flex:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--gold-line);background:var(--paper)}
.pv-buy-row{display:flex;align-items:center;gap:8px}
.pv-buy-row .pv-btn{flex:1.25;min-height:50px;padding-inline:8px;letter-spacing:.06em}
.pv-buy-row .pv-btn-line{flex:1}
.pv-returns{margin-top:6px;font-size:.75rem;line-height:1.35;color:var(--soft);text-align:center;text-wrap:balance}
.pv-error{font-size:.875rem;font-weight:500;color:var(--error)}
.pv-error:empty{display:none}
.pv-sheet-bar .pv-error{margin-bottom:6px}
@media (max-height:700px) and (max-width:599px){.pv-sheet{max-height:100vh;max-height:100dvh;border-radius:0}}      /* a short phone gives the sheet its whole screen */

/* gallery: swipe, or use the buttons under it */
.pv-gallery{position:relative;--wall:var(--ivory)}
.pv-gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pv-gallery-track::-webkit-scrollbar{display:none}
.pv-slide{position:relative;display:flex;flex:0 0 100%;flex-direction:column;scroll-snap-align:start}
.pv-slide .pv-swatch{flex:1;aspect-ratio:auto;min-height:calc(100vw*5/4)}
/* the flip: the real cloth is one tap from every model picture, and back. Opposite it, "Ask a sister": the design
   goes to WhatsApp in words, and she picks the chat. The cloth's own "Full screen" button stands under that pill. */
.pv-flip,.pv-ask-pill{position:absolute;left:8px;top:8px;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--gold-line);border-radius:999px;background:var(--paper);font-size:.8125rem;font-weight:500;text-decoration:none}
.pv-ask-pill{left:auto;right:8px}
.pv-ask-pill .pv-ic{width:18px;height:18px;color:var(--wa)}
.pv-gallery-views{display:flex;justify-content:safe center;gap:8px;overflow-x:auto;padding:10px var(--pad) 4px;scrollbar-width:none}
.pv-gallery-views::-webkit-scrollbar{display:none}
.pv-gallery-views .pv-chip{padding-inline:14px;font-size:.8125rem}

/* the product block: shared by the quick view and the suit pages */
.pv-info{display:grid;gap:14px;padding:16px var(--pad) 22px}
.pv-info h1,.pv-info .pv-title{font:600 clamp(2rem,1.4rem + 2.6vw,3rem)/1.04 var(--serif)}
.pv-tagline{color:var(--soft)}
.pv-info .pv-now{font-size:2rem}
.pv-info .pv-mrp{font-size:1rem}
.pv-info .pv-off{font-size:.875rem}
/* the price breathes, gently: once every three seconds. It stops with the pause button, and behind an open sheet. */
.pv-hero-offer .pv-now,.pv-pp-price .pv-now{display:inline-block;transform-origin:0 60%}
.pv-motion-running .pv-hero-offer .pv-now,.pv-motion-running .pv-pp-price .pv-now{animation:pv-breathe 3s ease-in-out infinite}
@keyframes pv-breathe{50%{transform:scale(1.05);text-shadow:0 0 16px rgba(196,35,104,.4)}}
.pv-hold .pv-strip-track,.pv-hold .pv-ribbon.pv-in-view p,.pv-hold .pv-hero-offer .pv-now,.pv-hold .pv-pp-price .pv-now{animation-play-state:paused}
.pv-incl{font-size:.875rem;color:var(--soft);text-wrap:balance}
.pv-save{font-size:.9375rem;font-weight:600;color:var(--panna)}
.pv-unstitched{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;border:1px solid var(--panna);border-radius:12px;background:var(--panna-tint);color:var(--panna)}
.pv-unstitched .pv-ic{grid-row:span 2;width:26px;height:26px}
.pv-unstitched b{font-weight:600;letter-spacing:.04em}
.pv-unstitched span{font-size:.875rem}
.pv-colours{padding:0;border:0;min-width:0}
.pv-colours legend{padding:0;margin-bottom:8px;font-weight:600}
.pv-colours-row{display:flex;flex-wrap:wrap;gap:10px}
.pv-colours label{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:5px 16px 5px 5px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);font-weight:600;cursor:pointer}
.pv-colours input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
/* a round chip of the cloth itself; a page sets its photo, and may set a closer cut */
.pv-colours i{width:56px;height:56px;border-radius:50%;background:var(--blush) 50% 50%/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(29,26,31,.2)}
/* the chosen colour: a ring round its swatch and a tick after its name (works without :has) */
.pv-colours input:checked+i{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--panna)}
.pv-colours input:checked~b{color:var(--panna)}
.pv-colours input:checked~b::after{content:" ✓"}
.pv-colours input:focus-visible+i{outline:2px solid var(--panna);outline-offset:6px}
.pv-colours label:has(input:checked){border-color:var(--panna);background:var(--panna-tint)}
.pv-colours-note{margin-top:8px;font-size:.875rem;color:var(--soft)}
/* in the buy bar of a sheet the colour choice is one compact row, always in sight above the buttons */
.pv-sheet-bar .pv-colours{margin-bottom:8px}
.pv-sheet-bar .pv-colours legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pv-sheet-bar .pv-colours-row{align-items:center;gap:8px}
.pv-sheet-bar .pv-colours-row::before{content:"Colour";margin-right:4px;font-weight:600}
.pv-sheet-bar .pv-colours label{min-height:48px;padding:3px 14px 3px 3px}
.pv-sheet-bar .pv-colours i{width:40px;height:40px}
.pv-sheet-bar .pv-colours-note{margin-top:4px;font-size:.75rem;line-height:1.35}
.pv-box{padding:14px;border:1px solid var(--gold-line);border-radius:12px;background:var(--paper)}
.pv-box h2,.pv-box h3{margin-bottom:8px;font:600 1.375rem/1.1 var(--serif)}
.pv-parcel{display:grid;gap:0}
.pv-parcel div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.pv-parcel dt{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);padding-top:3px}
.pv-parcel-note{margin-bottom:8px}
.pv-sku{font-size:.8125rem;color:var(--soft)}
.pv-row-links{display:flex;flex-wrap:wrap;gap:0 20px}
.pv-info .pv-trust{gap:14px 8px;padding:14px 8px;border-block:1px solid var(--gold-line)}
.pv-info .pv-trust b{font-size:.875rem}
.pv-info .pv-trust span{font-size:.75rem}
.pv-info .pv-plaque{width:50px;height:54px;border-radius:25px 25px 8px 8px}
.pv-info .pv-plaque .pv-il{width:34px;height:34px}

/* bag */
.pv-bag-lines{padding:4px var(--pad) 0}
.pv-bag-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.pv-thumb{width:64px;aspect-ratio:4/5;overflow:hidden;border-radius:32px 32px 6px 6px;background:var(--blush)}
.pv-thumb img{width:100%;height:100%;object-fit:cover}
.pv-bag-line h3{font:600 1.25rem/1.1 var(--serif)}
.pv-bag-line p{font-size:.8125rem;color:var(--soft)}
.pv-bag-line strong{font-weight:600;font-variant-numeric:tabular-nums}
.pv-qty{display:inline-flex;align-items:center;margin-top:6px;border:1px solid var(--line);border-radius:999px}
.pv-qty button{width:44px;height:44px;border:0;background:none;font-size:1.25rem}
.pv-qty button:disabled{opacity:.35}
.pv-qty span{min-width:1.6em;text-align:center;font-weight:600}
.pv-remove{min-height:44px;margin-left:6px;padding:0 6px;border:0;background:none;font-size:.8125rem;text-decoration:underline;text-underline-offset:3px;color:var(--soft)}
.pv-bag-empty{display:grid;justify-items:center;gap:8px;padding:34px var(--pad) 40px;text-align:center}
.pv-bag-empty svg{width:60px;height:60px;color:var(--gold)}
.pv-bag-empty h3{font:600 1.625rem/1.1 var(--serif)}
.pv-totals{display:grid;gap:6px;margin-bottom:10px}
.pv-totals div{display:flex;justify-content:space-between;gap:12px;font-size:.9375rem}
.pv-totals div:last-child{padding-top:8px;border-top:1px solid var(--line);font-size:1.125rem;font-weight:600}
.pv-sheet-bar>.pv-btn{width:100%}
.pv-sheet-bar>.pv-link{display:flex;justify-content:center}
/* a short screen: the bar leaves its room to the bag itself; who sells is said with each design and at the checkout */
@media (max-height:700px){#pv-bag .pv-seller{display:none}}
.pv-sheet-bar .pv-small{margin-top:8px;text-align:center}

/* Jenny chat */
.pv-ask-body{display:grid;gap:12px;padding:16px var(--pad) 8px}
.pv-ask-log{display:grid;gap:8px;align-content:start;min-height:72px}
.pv-ask-log p{max-width:86%;padding:10px 14px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.pv-ask-you{justify-self:end;background:var(--panna);color:#fff;border-bottom-right-radius:4px}
.pv-ask-bot{justify-self:start;background:var(--paper);border:1px solid var(--gold-line);border-bottom-left-radius:4px}
.pv-ask-form{display:flex;gap:8px}
.pv-ask-form input{flex:1;min-width:0;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:1rem}
.pv-ask-form .pv-btn{min-height:50px;padding-inline:20px}

/* full-screen real fabric */
.pv-zoom{width:100%;height:100vh;height:100dvh;background:#12100f;color:#fff}
.pv-zoom[open]{display:flex;flex-direction:column}
.pv-zoom-top{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 16px;font-size:.875rem}
.pv-zoom-pan{flex:1;overflow:auto;touch-action:pan-x pan-y pinch-zoom}
.pv-zoom-pan img{max-width:none;margin-inline:auto}
.pv-zoom :focus-visible{outline-color:#fff}

/* ---------- 14. Suit page ---------- */
.pv-crumb{font-size:.8125rem;color:var(--soft)}
.pv-crumb a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
.pv-pp{padding-inline:0}
.pv-pp-title{padding:0 var(--pad) 12px}
.pv-pp-title h1{margin:2px 0 6px;font:600 clamp(2.125rem,1.5rem + 2.6vw,3.25rem)/1.02 var(--serif)}
.pv-pp-price .pv-now{font-size:1.75rem}
.pv-pp-price .pv-mrp{font-size:.9375rem}
.pv-pp-title .pv-incl{margin-top:4px}
.pv-pp-buy{display:none}
.pv-two-lines{display:grid;gap:8px;font-size:.9375rem}
.pv-two-lines b{font-weight:600}
/* the buy bar: help, Add to bag, Buy, and the returns line under them; the footer leaves room for its height */
.pv-dock-buy{display:grid;grid-template-columns:auto auto auto minmax(0,1fr)}
.pv-dock-buy .pv-btn{font-size:.75rem}
.pv-dock-buy .pv-btn-line{padding-inline:13px}
.pv-dock-buy .pv-returns{grid-column:1/-1;margin:0}
.pv-dock-buy>.pv-stock{grid-column:3/-1;place-self:center}
@media (max-width:1099px){[data-suit-page] .pv-footer{padding-bottom:70px}}
/* on a phone the bar's room goes to its two buttons: the help cells are icons, narrow screens set the words closer,
   and the narrowest say "Add" */
@media (max-width:599px){.pv-dock-buy .pv-dock-cell{min-width:44px}.pv-dock-buy .pv-dock-cell span{display:none}}
@media (max-width:389px){.pv-dock-buy .pv-btn{letter-spacing:.02em}.pv-dock-buy .pv-btn-line{padding-inline:8px}}
@media (max-width:349px){.pv-dock-buy [data-add] span span{display:none}}
/* a tablet keeps the photos and the Buy button to a hand's width */
@media (min-width:600px){.pv-dock-buy{grid-template-columns:auto auto auto minmax(0,340px);justify-content:center}}
@media (min-width:600px) and (max-width:899px){.pv-pp .pv-gallery{max-width:520px;margin-inline:auto}}
.pv-pp-buy .pv-returns{text-align:left}
.pv-others{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.pv-others a{display:block;text-decoration:none;--wall:var(--ivory)}
.pv-others>a>b{display:block;margin:8px 0 4px;font:600 1.375rem/1.1 var(--serif)}
.pv-others .pv-now{font-size:1.0625rem}
.pv-others .pv-ai{border-radius:0 0 8px 8px}

/* ---------- 15. Scroll-in (only when motion is on) ---------- */
.pv-motion .pv-rise{opacity:0;transform:translateY(12px);transition:opacity .35s ease-out,transform .35s ease-out}
.pv-motion .pv-rise.pv-visible{opacity:1;transform:none}

/* ---------- 16. Wider screens ---------- */
@media (min-width:600px){
  :root{--pad:24px}
  .pv-slide .pv-swatch{min-height:0}
  .pv-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
  .pv-trust{grid-template-columns:repeat(4,1fr)}
  .pv-steps{grid-template-columns:repeat(3,1fr)}
  .pv-steps li{grid-template-columns:1fr;justify-items:center;text-align:center;padding:20px 16px}
  .pv-steps .pv-il{grid-row:auto;width:84px;height:84px;margin-bottom:8px}
  .pv-others{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pv-look-slide{flex-basis:280px}
  .pv-sheet{width:min(560px,94vw);margin:auto;border-radius:22px;max-height:90vh;max-height:90dvh}
}
/* tablets and up: the hero stands side by side, the whole suit in its arch */
@media (min-width:700px){
  .pv-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(28px,5vw,56px);max-width:var(--shell);margin-inline:auto;padding:34px var(--pad) 56px}
  .pv-hero-stage{order:2;justify-self:center;width:min(100%,430px)}
  .pv-hero-stage::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--gold-line)}
  .pv-hero .pv-ph{height:auto;aspect-ratio:4/5;box-shadow:0 34px 50px -34px rgba(12,75,65,.55)}
  .pv-seal{right:-14px;top:40px}
  .pv-hero-copy{padding:0;text-align:left}
  .pv-hero-copy::before{display:none}
  .pv-hero h1{font-size:clamp(2.25rem,5.2vw,4.25rem)}
  .pv-hero-offer,.pv-hero-facts,.pv-hero-cta{justify-content:flex-start}
  .pv-hero-offer .pv-now{font-size:2.25rem}
  .pv-hero-facts{margin-top:12px}
  .pv-hero .pv-hindi{margin-top:14px;font-size:1rem}
  .pv-hero-cta{margin-top:22px}
  .pv-hero-cta .pv-btn{width:auto;padding-inline:34px}
  .pv-hero-copy .pv-zari{justify-content:flex-start;margin-block:14px 16px}
  .pv-hero-copy .pv-zari::before{display:none}
  .pv-trust-band{padding-block:34px}
}
@media (min-width:700px) and (max-width:899px){.pv-hero-tag{display:none}.pv-hero .pv-ai{max-width:calc(100% - 20px)}}
@media (min-width:900px){
  /* the slider on the left; the words, centred as one block, on the right */
  .pv-reveal-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:72px;max-width:1040px}
  .pv-reveal-stage{grid-column:1;grid-row:1/5}
  .pv-reveal .pv-head,.pv-reveal-picks,.pv-reveal-foot{grid-column:2;margin-inline:0;text-align:left}
  .pv-reveal .pv-head{grid-row:2}
  .pv-reveal-picks{grid-row:3}
  .pv-reveal-foot{grid-row:4;align-self:start;margin-top:6px}
  .pv-reveal .pv-zari{justify-content:flex-start}
  .pv-reveal .pv-zari::before{display:none}
  .pv-reveal-picks{justify-content:flex-start;flex-wrap:wrap;overflow:visible;padding-inline:0}
  .pv-look-track{padding-inline:max(var(--pad),calc(50% - 600px + var(--pad)))}
  .pv-footer-in{grid-template-columns:1.1fr 1fr;gap:48px}
  /* quick view becomes a two-column window, the bag a side drawer */
  /* the photo is sized so that the whole suit, its label and the photo buttons fit the window */
  #pv-quickview{width:min(1000px,94vw);--photo-h:max(240px,min(600px,90vh - 336px));--photo-w:calc(var(--photo-h)*.8)}
  #pv-quickview .pv-sheet-body{display:grid;grid-template-columns:var(--photo-w) minmax(0,1fr)}
  #pv-quickview .pv-gallery{position:sticky;top:0;align-self:start}
  #pv-quickview .pv-slide .pv-ph,#pv-quickview .pv-slide .pv-swatch{flex:none;height:var(--photo-h);aspect-ratio:auto}
  #pv-quickview .pv-sheet-bar{padding:12px var(--pad) 12px calc(var(--photo-w) + var(--pad))}      /* the buy bar stands under the words, not under the photos */
  #pv-bag{width:440px;height:100vh;height:100dvh;max-height:none;margin:0 0 0 auto;border-radius:0}
  /* suit page: pictures left, the buying column right */
  .pv-pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"g t" "g i";column-gap:clamp(32px,5vw,64px);align-items:start;padding-inline:var(--pad)}
  .pv-pp .pv-gallery{grid-area:g;position:sticky;top:16px;justify-self:center;width:100%;max-width:470px}
  .pv-pp-title{grid-area:t;padding-inline:0}
  .pv-pp .pv-info{grid-area:i;padding:0 0 22px}
}
/* a short laptop window leaves the quick view a narrow photo: the pill keeps its mark and its spoken name, without its words */
@media (min-width:900px) and (max-height:719px){#pv-quickview .pv-ask-pill span{display:none}}
/* laptops: the header carries everything and stays in sight, so the dock retires */
@media (min-width:1100px){
  :root{--dock:0px}
  html{scroll-padding-top:84px}
  .pv-dock{display:none}
  .pv-header{position:sticky;top:0;border-bottom:1px solid var(--gold-line)}
  .princess-v2:not([data-suit-page]) main::before{content:"";position:relative;z-index:1;display:block;height:30px;margin-bottom:-30px;background:var(--toran) repeat-x 50% 0}
  .princess-v2:not([data-suit-page]) .pv-back-in{padding-top:38px}      /* the welcome band's words stand under that garland, not behind it */
  .pv-header-in{min-height:68px}
  .pv-brand img{width:44px;height:44px}
  .pv-brand-name{font-size:1.625rem}
  .pv-nav{gap:4px}
  .pv-nav-link{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
  .pv-nav>.pv-nav-wa{display:grid;color:var(--wa)}
  .pv-nav>.pv-login{max-width:150px}
  .pv-hero .pv-ai{max-width:none}
  .pv-seal{right:-34px;top:54px;width:118px;height:118px}
  .pv-hero-swatch{position:absolute;left:-86px;bottom:44px;display:block;width:150px;padding:8px 8px 6px;background:var(--paper);box-shadow:0 18px 30px -14px rgba(29,26,31,.45);transform:rotate(-5deg);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-align:center;color:var(--panna)}
  .pv-hero-swatch img{width:100%;margin-bottom:5px;aspect-ratio:1;object-fit:cover;object-position:20% 50%}
  .pv-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
  .pv-card h3{font-size:1.5rem}
  .pv-pp .pv-gallery{top:84px}
  .pv-pp-buy{display:block}
  .pv-pp-buy .pv-small{margin-top:10px}
}
/* wide screens have a margin beside the page: the two help buttons float there, over nothing */
@media (min-width:1320px){
  .pv-fab{position:fixed;right:18px;bottom:18px;z-index:40;display:grid;gap:10px}
  .pv-fab a,.pv-fab button{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--panna);color:var(--gold-light);box-shadow:0 0 0 1.5px var(--gold-light),0 10px 22px -8px rgba(12,75,65,.7)}
  .pv-fab a{background:var(--wa);color:#fff}
}
/* a phone turned on its side: a sheet scrolls as one piece, so its bars do not crowd out what it shows */
@media (max-height:520px){.pv-sheet[open]{display:block;max-height:100vh;max-height:100dvh;overflow-y:auto}.pv-sheet-body{overflow:visible}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}