/* The small pages: checkout, login, policies, track my order, affiliate programme and "page not found".
   The store page and the suit pages have their own styles.css; the colours and the type are the same. */
:root { --ivory:#FBF7F0; --paper:#FFFDF9; --blush:#F6E4E8; --rani:#B21A5A; --rani-2:#C42368; --panna:#0C4B41; --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,.16); --field:#8F7A4B; --error:#C2264B; --wa:#0B6E63;
        --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:Jost,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
        --hindi:"Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari",system-ui,sans-serif;
        --scallop: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"); }
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.55 var(--sans); color:var(--ink); background:var(--ivory); -webkit-font-smoothing:antialiased; }
/* a scalloped emerald canopy across the top of every small page */
body::before { content:""; display:block; height:17px; background:var(--scallop) repeat-x 50% 5px, linear-gradient(var(--panna) 6px, transparent 6px); }
main { max-width:560px; margin:0 auto; padding:6px 16px 48px; }
main.wide { max-width:760px; }
img, svg { display:block; max-width:100%; }
h1 { margin:10px 0 6px; font:600 clamp(34px,9vw,44px)/1.05 var(--serif); }
h1 i, h2 i { font-weight:500; color:var(--rani); }
h2 { margin:30px 0 8px; font:600 26px/1.12 var(--serif); }
h3 { margin:0; font:600 21px/1.15 var(--serif); }
p { margin:0 0 10px; }
a { color:var(--panna); text-underline-offset:3px; }
button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--panna); outline-offset:3px; }
h1:focus { outline:0; }
[hidden] { display:none !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.soft { color:var(--soft); font-size:14px; }
.eyebrow { margin:14px 0 0; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); }
.lede { margin:0 0 16px; font-size:17px; color:var(--soft); }
.lede b { color:var(--panna); font-weight:600; }
/* a gold hairline with a lotus in the middle, under a page title */
.zari { height:23px; max-width:250px; margin:8px 0 14px; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cg fill='none' stroke='%23B18E35' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 27c-5-5-6-13 0-22 6 9 5 17 0 22zM32 27c-8-1-13-7-13.500-16 6 1 11.500 6 13.500 16zM32 27c8-1 13-7 13.500-16-6 1-11.500 6-13.500 16zM32 27c-9 1.500-17-1.500-21-9 6-1 14 1.500 21 9zM32 27c9 1.500 17-1.500 21-9-6-1-14 1.500-21 9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50% / 46px 23px,
  linear-gradient(var(--gold-line),var(--gold-line)) no-repeat 0 50% / calc(50% - 32px) 1px,
  linear-gradient(var(--gold-line),var(--gold-line)) no-repeat 100% 50% / calc(50% - 32px) 1px; }
.mid { text-align:center; } .mid .zari { margin-left:auto; margin-right:auto; }

/* ---- header: the same logo and name as the store page ---- */
.top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:56px; }
.brand { display:inline-flex; align-items:center; gap:9px; min-height:44px; font:600 21px/1 var(--serif); letter-spacing:.2em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand img { width:38px; height:38px; border-radius:50%; }
.top-links { display:flex; align-items:center; gap:2px; margin:0; font-size:14px; font-weight:500; }
.top-links > * { display:inline-flex; align-items:center; gap:6px; min-width:44px; min-height:44px; padding:0 6px; color:var(--ink); white-space:nowrap; }
.top-links a { text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px; }
.ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:380px) { .brand { gap:8px; font-size:19px; letter-spacing:.14em; } .brand img { width:34px; height:34px; } }

/* ---- buttons and links that stand alone ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; margin-top:16px; padding:6px 22px; border:0; border-radius:999px;
       font:600 14px/1.25 var(--sans); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; text-align:center; color:#fff; cursor:pointer;
       background:var(--rani) linear-gradient(180deg,var(--rani-2),var(--rani)); box-shadow:inset 0 0 0 3px var(--rani), inset 0 0 0 4px rgba(235,212,154,.75); }
.btn.line { color:var(--panna); background:none; box-shadow:inset 0 0 0 1.5px var(--panna); }
.btn.green { background:var(--wa); box-shadow:none; }
.btn:disabled { opacity:.6; cursor:progress; }
.go { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:500; }
.links { display:flex; flex-wrap:wrap; align-items:center; gap:0 18px; margin:0; }
.links a, .care a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; }
.care { display:block; margin:0; line-height:1.35; }
.care > span, .care > b { display:block; }
.care > b { margin-top:12px; font-weight:600; }
.nw { white-space:nowrap; }
.after { margin-top:14px; }

/* ---- forms: 16px text in every box, so phones do not zoom the page ---- */
label { display:block; margin:16px 0 6px; font-size:15px; font-weight:600; }
label small { font-size:14px; font-weight:400; color:var(--soft); }
input, textarea, select { display:block; width:100%; min-height:52px; margin:0; padding:13px 14px; border:1px solid var(--field); border-radius:12px; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); }
textarea { min-height:96px; resize:vertical; }
select { -webkit-appearance:none; appearance:none; padding-right:40px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230C4B41' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--panna); outline-offset:1px; }
[aria-invalid="true"], [aria-invalid="true"]:focus { border-color:var(--error); box-shadow:inset 0 0 0 1px var(--error); background-color:#FFF5F7; }
.row { display:flex; gap:10px; } .row > div { flex:1; min-width:0; }
.tel { position:relative; }
.tel span { position:absolute; left:14px; top:0; line-height:52px; font-weight:500; color:var(--soft); pointer-events:none; }
.tel input { padding-left:54px; letter-spacing:.04em; }
.hint { margin:6px 0 0; font-size:14px; color:var(--soft); }
.err { margin:6px 0 0; font-size:15px; font-weight:500; color:var(--error); }
.err:empty { display:none; }
.tick { display:flex; align-items:center; gap:12px; min-height:48px; margin:14px 0 0; font-weight:400; font-size:16px; cursor:pointer; }
.tick input { flex:none; width:24px; height:24px; min-height:0; padding:0; accent-color:var(--panna); }
.trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
fieldset { min-width:0; margin:22px 0 0; padding:0; border:0; }
legend { display:flex; align-items:center; gap:10px; padding:0; font:600 26px/1.1 var(--serif); }
legend i { display:grid; place-items:center; width:30px; height:30px; border-radius:15px 15px 5px 5px; background:var(--panna); color:#fff; font:600 15px/1 var(--sans); }
.msg { margin:12px 0 0; font-size:15px; }
.msg:empty { display:none; }
.msg.err { font-weight:500; }
.msg a { display:inline-flex; align-items:center; min-height:44px; margin-right:14px; }
/* a paper card with a gold hairline */
.card { margin:18px 0 0; padding:16px; border:1px solid var(--gold-line); border-radius:16px; background:var(--paper); }
.card > :first-child { margin-top:0; } .card > :last-child { margin-bottom:0; }
.note { display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; padding:10px 12px; border-radius:10px; background:var(--panna-tint); color:var(--panna); font-size:15px; line-height:1.4; }
.note .ic { margin-top:2px; }
.note b { font-weight:600; }
.note [lang] { display:block; font-family:var(--hindi); font-size:14px; }

/* ---- checkout ---- */
.sum { margin:0; padding:2px 14px 14px; border:1px solid var(--gold-line); border-radius:16px; background:var(--paper); }
.sum ul { list-style:none; margin:0; padding:0; }
.sum li { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:0 12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line); }
.sum img, .sum .ph { grid-row:1 / span 2; width:56px; height:70px; object-fit:cover; border-radius:28px 28px 6px 6px; background:var(--blush); }
.sum h2 { margin:0; font:600 21px/1.1 var(--serif); }
.sum li p { margin:3px 0 0; font-size:14px; line-height:1.35; color:var(--soft); }
.sum strong { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.acts { grid-column:2 / 4; display:flex; align-items:center; gap:4px; margin-top:8px; }
.qty { display:inline-flex; align-items:center; border:1px solid var(--field); border-radius:999px; background:#fff; }
.qty button { width:44px; height:44px; padding:0; border:0; border-radius:50%; background:none; font-size:22px; line-height:1; color:var(--panna); }
.qty button:disabled { opacity:.35; cursor:not-allowed; }
.qty output { min-width:24px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; }
.plainlink { min-width:44px; min-height:44px; padding:0 10px; border:0; background:none; font-size:14px; color:var(--soft); text-decoration:underline; text-underline-offset:3px; }
.sum dl { display:grid; gap:4px; margin:12px 0 0; font-size:15px; }
.sum dl div { display:flex; justify-content:space-between; gap:12px; }
.sum dd { margin:0; font-variant-numeric:tabular-nums; }
.sum dl .total { margin-top:4px; padding-top:9px; border-top:1px solid var(--line); font-size:19px; font-weight:600; }
.empty { padding:22px 4px 8px; text-align:center; }
.empty h2 { margin:0 0 6px; }
/* the Pay button rides at the bottom of the phone from the top of the page to the end of the form; its message sits just above it */
.paybar { margin-top:14px; }
.paybar .btn { margin-top:0; min-height:56px; font-size:15px; box-shadow:inset 0 0 0 3px var(--rani), inset 0 0 0 4px rgba(235,212,154,.75), 0 12px 24px -12px rgba(178,26,90,.8); }
.paybar .msg { margin:0 0 8px; }
.paybar small { display:block; margin-top:6px; font-size:13px; text-align:center; color:var(--soft); }
@media (max-width:899px) { html { scroll-padding-bottom:150px; }      /* a box that takes the focus is never left under the bar */
  .paybar { position:sticky; bottom:0; z-index:3; margin:14px -16px 0; padding:10px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--ivory); border-top:1px solid var(--gold-line); } }
.assure { display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none; font-size:15px; color:var(--soft); }
.assure li { display:grid; grid-template-columns:22px 1fr; gap:10px; }
.assure .ic { width:20px; height:20px; margin-top:2px; color:var(--panna); }
.terms { margin:14px 0 0; font-size:15px; color:var(--soft); }
/* laptop: the form on the left, the order staying in view on the right */
@media (min-width:900px) {
  main.co { max-width:1000px; }
  #shop { display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:64px; align-items:start; }
  #shop > * { grid-column:1; }
  #shop > .sum { grid-column:2; grid-row:1 / span 12; position:sticky; top:20px; margin-top:20px; }
  #shop.bare { display:block; max-width:560px; margin:0 auto; }
}
#shop.bare > form, #shop.bare > .paybar, #shop.bare > .after { display:none; }

/* ---- after payment ---- */
.done { max-width:560px; margin:0 auto; }
.seal { width:92px; height:92px; margin:18px auto 0; }
.pid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; margin:18px 0 0; padding:12px 14px; border:1px solid var(--gold-line); border-radius:14px; background:var(--paper); text-align:left; }
.pid span { grid-column:1; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.pid b { grid-column:1; font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.pid .btn { grid-column:2; grid-row:1 / span 2; width:auto; min-height:44px; margin:0; padding:0 18px; font-size:13px; }
.done .sum, .done .note { margin-top:14px; text-align:left; }
.done .links { justify-content:center; }
.next { margin:18px 0 0; padding:0; list-style:none; text-align:left; counter-reset:n; }
.next li { position:relative; padding:12px 0 12px 44px; border-top:1px solid var(--line); color:var(--soft); counter-increment:n; }
.next li::before { content:counter(n); position:absolute; left:0; top:13px; display:grid; place-items:center; width:30px; height:30px; border-radius:15px 15px 5px 5px; background:var(--blush); color:var(--rani); font-weight:600; }
.next b { display:block; font:600 21px/1.15 var(--serif); color:var(--ink); }
.two { display:grid; gap:10px; margin-top:16px; }
.two .btn { margin-top:0; }
@media (min-width:600px) { .two { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:no-preference) { .done:not([hidden]) { animation:rise .45s ease both; } }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }

/* ---- track my order ---- */
.status { margin:0; padding:0; list-style:none; }
.status li { position:relative; padding:12px 0 12px 44px; border-top:1px solid var(--line); color:var(--soft); }
.status li:first-child { border-top:0; }
.status li::before { content:""; position:absolute; left:2px; top:14px; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--field); background:var(--paper); }
.status .yes::before { border-color:var(--panna); background:var(--panna) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.500l4 4L18 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.status b { display:block; font:600 21px/1.15 var(--serif); color:var(--ink); }
.status strong { font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.status .btn { width:auto; min-height:44px; margin:8px 8px 0 0; padding:0 18px; font-size:13px; }
.facts { display:grid; gap:4px; margin:0 0 6px; font-size:15px; }
.facts div { display:flex; justify-content:space-between; gap:14px; }
.facts dt { color:var(--soft); } .facts dd { margin:0; text-align:right; font-weight:500; overflow-wrap:anywhere; }

/* ---- affiliate programme ---- */
.steps { display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; counter-reset:n; }
.steps li { position:relative; min-height:62px; padding:12px 14px 12px 64px; border:1px solid var(--gold-line); border-radius:14px; background:var(--paper); color:var(--soft); counter-increment:n; }
.steps li::before { content:counter(n); position:absolute; left:14px; top:12px; display:grid; place-items:center; width:36px; height:40px; border-radius:18px 18px 6px 6px; background:var(--blush); color:var(--rani); font:600 17px/1 var(--sans); }
.steps b { display:block; font:600 21px/1.15 var(--serif); color:var(--ink); }
.steps code { font:500 15px/1.4 var(--sans); color:var(--panna); overflow-wrap:anywhere; }
@media (min-width:700px) { .steps { grid-template-columns:1fr 1fr; } }

/* ---- policies ---- */
.toc { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--gold-line); border-radius:999px; background:var(--paper); font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; }
.doc h2 { margin-top:34px; padding-top:18px; border-top:1px solid var(--gold-line); scroll-margin-top:12px; }
.doc h3 { margin:20px 0 4px; }
.doc ul { margin:0 0 10px; padding-left:20px; }
.doc .toc { padding:0; }
.doc li { margin:0 0 6px; }
.key { padding:12px 14px; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; background:var(--paper); font-weight:500; }

/* ---- page not found ---- */
.lost { padding:26px 0 8px; text-align:center; }
.lost .arch { display:grid; place-items:center; width:120px; height:140px; margin:0 auto 6px; border:1px solid var(--gold-line); border-radius:60px 60px 12px 12px; background:var(--paper); box-shadow:0 0 0 6px var(--blush); font:600 44px/1 var(--serif); color:var(--rani); }

/* ---- footer: the same care line and links as the store page ---- */
.foot { position:relative; margin-top:34px; padding:30px 0 26px; background:var(--panna); color:#E9F1EE; font-size:15px; }
.foot::before { content:""; position:absolute; left:0; right:0; top:-11px; height:12px; background:var(--scallop) repeat-x 50% 0; transform:scaleY(-1); }
.foot-in { display:grid; gap:14px; max-width:1000px; margin:0 auto; padding:0 16px; }
.foot .brand, .foot strong { color:var(--gold-light); }
.foot p { margin:6px 0 0; }
.foot strong { display:block; font:600 22px/1.2 var(--serif); }
.foot a { color:inherit; }
.foot :focus-visible { outline-color:var(--gold-light); }
@media (min-width:700px) { .foot-in { grid-template-columns:1fr 1.1fr; gap:48px; } }