/* 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)}

/* ---------- 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}}