/* DesiFitCheck app layout. Loaded after /dfc.css (the design system "Desi Pop"); only layout,
   screen structure and overrides live here. Breakpoints: under 640 single column with
   a sticky bottom bar; 640 to 1023 wider column, catalogue 3-up, looks beside the
   flat-lay; 1024 and up split layout, looks across, no sticky bar. */

html{background:var(--bg);scroll-behavior:smooth}
body.dfc{min-height:100vh;overflow-x:hidden}
[hidden]{display:none!important}
.dfc .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dfc .center{text-align:center}
.dfc .grow{flex:1}
.dfc .gold{color:var(--gold)}
.dfc .accent{color:var(--accent)}
.dfc .muted{color:var(--ink-2)}
.dfc .on-dark{color:var(--on-block)}
.dfc .on-dark .trust a{color:var(--gold)}
.dfc .trust a{color:inherit;font-weight:700}
.dfc .textlink{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 6px;margin-left:-6px;text-decoration:none}
.dfc .hindi{font-family:var(--f-desi);font-weight:600;color:var(--peacock);font-size:1.25rem;line-height:1.3}
.dfc .on-dark .hindi{color:var(--gold)}
.dfc .narrow-only{display:inline-flex}
.dfc .wide-only{display:none!important}

/* offline pill and toasts: sticker pills that float above the bottom action bar (--dock is set from JS),
   never over the top bar or the button that triggered them */
.dfc .offline{position:fixed;left:16px;right:16px;margin:0 auto;bottom:calc(var(--dock,16px) + env(safe-area-inset-bottom,0px));z-index:60;display:flex;gap:10px;align-items:center;width:fit-content;max-width:calc(100vw - 32px);padding:10px 18px 10px 14px;background:var(--gold);color:#1B1020;border:2px solid var(--edge-hard);border-radius:22px;box-shadow:4px 4px 0 var(--edge-hard);font:700 .9375rem/1.3 var(--f-ui);animation:rise var(--d-2) var(--ease) both}
.dfc .offline svg{flex:none;color:#1B1020}
.dfc .toasts{position:fixed;left:16px;right:16px;bottom:calc(var(--dock,16px) + env(safe-area-inset-bottom,0px));z-index:50;display:flex;justify-content:center;pointer-events:none}
.dfc .toasts .toast{pointer-events:auto;max-width:420px;min-height:48px;background:var(--mehendi);color:#1B1020;border:2px solid var(--edge-hard);border-radius:var(--r-pill);box-shadow:4px 4px 0 var(--edge-hard);padding:8px 18px 8px 10px;font:700 1rem/1.25 var(--f-ui);animation:rise var(--d-2) var(--ease) both}
.dfc .toast-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1B1020;color:var(--mehendi);flex:none}

/* ===== landing ===== */
.dfc .site-head{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:2px solid var(--edge)}
.dfc .site-head-in{max-width:var(--maxw);margin:0 auto;min-height:68px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px}
.dfc .head-nav{display:flex;align-items:center;gap:4px}
.dfc .navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);font-weight:700;font-size:.9375rem;color:var(--ink-2);text-decoration:none;transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.dfc .navlink:hover{background:var(--gold-tint);color:var(--ink)}
.dfc .head-cta{margin-left:8px;white-space:nowrap}
.dfc .site-head-in{position:relative}
.dfc .menu-btn{gap:8px;padding:0 16px 0 12px;min-width:104px;justify-content:center}
.dfc .menu-btn svg path{transform-box:fill-box;transform-origin:center;transition:transform var(--d-2) var(--ease)}
.dfc .menu-btn.open .mb-a{transform:translateY(4px) rotate(45deg)}
.dfc .menu-btn.open .mb-b{transform:translateY(-4px) rotate(-45deg)}
.dfc .menu-btn.open{background:var(--ink);color:var(--bg)}
.dfc .menu-sheet{position:absolute;left:16px;right:16px;top:calc(100% + 10px);max-width:440px;margin-left:auto;padding:14px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);animation:pop var(--d-2) var(--ease) both;transform-origin:top right}
.dfc .menu-cta{width:100%;min-height:54px}
.dfc .menu-list{margin-top:6px}
.dfc .menu-list li{border-bottom:2px dotted var(--line-strong)}
.dfc .menu-list li:last-child{border-bottom:0}
.dfc .menu-list a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:56px;padding:12px 4px;text-decoration:none;color:var(--ink)}
.dfc .menu-list a span{font:800 1.25rem/1.1 var(--f-display);letter-spacing:-.025em}
.dfc .menu-list a small{font:600 .9375rem/1.2 var(--f-desi);color:var(--ink-2);text-align:right}
.dfc .menu-list a:hover span{color:var(--accent)}
@media (max-width:479px){.dfc .head-cta{display:none}}
@media (min-width:480px){.dfc .menu-cta{display:none}}

.dfc .hero{position:relative;overflow:hidden;padding:36px 0 40px;border-bottom:2px solid var(--edge)}
.dfc .hero-grid{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);display:grid;gap:44px}
.dfc .hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.dfc .hero-sticker{font-size:1.125rem;padding:2px 16px 0;min-height:36px}
.dfc .hero-h1{font-size:clamp(3.4rem,17vw,5.25rem);line-height:.92;letter-spacing:-.035em;margin-top:22px;text-wrap:balance}
.dfc .hero-fit{color:var(--accent);text-decoration:underline wavy var(--gold);text-decoration-thickness:.07em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.dfc .hero-copy .hindi{margin-top:18px;font-size:1.5rem}
.dfc .hero-lede{margin-top:10px;color:var(--ink-2);font-size:1.125rem;line-height:1.55;max-width:34ch}
.dfc .hero-ctas{display:flex;flex-direction:column;gap:16px;margin-top:28px;width:100%}
.dfc .steal-cta{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin-top:10px;color:var(--ink-2);font-weight:600;text-decoration:none}
.dfc .steal-cta b{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.dfc .steal-cta:hover b{text-decoration-color:var(--gold)}
.dfc .hero-trust{margin-top:4px;justify-content:flex-start;color:var(--ink-2)}

.dfc .hero-art{position:relative;display:grid;place-items:center;padding:132px 12px 40px;min-height:560px}
.dfc .art-blob{position:absolute;inset:44px 14px 18px;background-color:var(--accent-solid);border:2px solid var(--edge);border-radius:36px;box-shadow:var(--sh-2);--pat:rgba(255,246,234,.34)}
.dfc .burst{position:absolute;z-index:3;top:14px;right:26px;width:96px;height:96px;filter:drop-shadow(3px 3px 0 var(--edge-hard))}
.dfc .ghostcard{--pat:rgba(194,0,100,.16);position:absolute;z-index:1;top:50px;left:26px;width:min(250px,66%);padding:14px 16px 14px;min-height:150px;background-color:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:20px;box-shadow:4px 4px 0 var(--edge-hard);transform:rotate(-6deg);transform-origin:bottom left}
.dfc .gc-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:2px dotted var(--line-strong)}
.dfc .gc-num{font:700 .875rem/1 var(--f-desi);padding:4px 10px 2px;border-radius:var(--r-pill);background:var(--peacock-tint);color:var(--peacock-ink);border:2px solid var(--edge);white-space:nowrap}
.dfc .gc-occ{font:800 1.0625rem/1.05 var(--f-display);letter-spacing:-.02em}
.dfc .gc-list{margin-top:8px;font-size:.9375rem;font-weight:600;color:var(--ink-2)}
.dfc .gc-list li{padding:3px 0;border-bottom:2px dotted var(--line)}
.dfc .st-total{position:absolute;z-index:3;left:-2px;bottom:6px;font-size:1.1875rem;min-height:38px;--rot:0deg}
.dfc .lookdeck{position:relative;z-index:2;margin-top:34px;width:min(340px,100%)}
.dfc .lookcard{position:relative;width:100%;padding:20px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:24px;box-shadow:6px 6px 0 var(--edge-hard)}
.dfc .lc-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:2px dotted var(--line-strong)}
.dfc .lc-num{font:700 .9375rem/1 var(--f-desi);padding:5px 12px 3px;border-radius:var(--r-pill);background:var(--gold);color:#1B1020;border:2px solid var(--edge)}
.dfc .lc-occ{font:800 1.25rem/1 var(--f-display);letter-spacing:-.025em}
.dfc .lc-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.dfc .lc-sw span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dfc .lc-sw i{display:block;width:100%;height:72px;border-radius:14px;border:2px solid var(--edge);background:var(--c);transform-origin:bottom;animation:grow .7s var(--ease) both;animation-delay:calc(300ms + var(--i) * 80ms)}
.dfc .lc-sw b{font:700 .875rem/1 var(--f-ui);color:var(--ink-2);letter-spacing:0}
.dfc .lc-list{margin-top:10px}
.dfc .lc-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;border-bottom:2px dotted var(--line);font-size:.9375rem;font-weight:600}
.dfc .lc-list li:last-child{border-bottom:0}
.dfc .lc-list em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:700}
.dfc .lc-list em.yours{font:700 .9375rem/1 var(--f-desi);padding:4px 11px 2px;border-radius:var(--r-pill);background:var(--peacock-solid);color:#fff;border:2px solid var(--edge)}
.dfc .lc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:12px;border-top:2px solid var(--edge)}
.dfc .lc-total span{font:700 .875rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dfc .lc-total b{font:800 2rem/1 var(--f-display);letter-spacing:-.03em;color:var(--accent)}
.dfc .lc-why{margin-top:10px;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
@keyframes grow{from{transform:scaleY(.15);opacity:0}to{transform:none;opacity:1}}
.dfc .lc-num{white-space:nowrap}
.dfc .gc-occ{white-space:nowrap}
@media (max-width:379px){
  .dfc .hero-art{padding-left:8px;padding-right:8px}
  .dfc .lookcard{padding:16px 14px}
  .dfc .lc-head{gap:8px}
  .dfc .lc-occ{font-size:1.125rem}
  .dfc .lc-sw{gap:5px}
  .dfc .lc-sw b{font-size:.8125rem;letter-spacing:-.02em}
  .dfc .burst{width:78px;height:78px;right:16px}
  .dfc .ghostcard{width:min(200px,62%);left:18px}
  .dfc .gc-occ{font-size:1rem;white-space:normal}
  .dfc .gc-head{gap:8px}
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dfc .ghostcard{--pat:rgba(255,99,176,.14)}}
[data-theme="dark"] .dfc .ghostcard{--pat:rgba(255,99,176,.14)}
/* ticker: tilted marigold band of regional garments */
.dfc .ticker{overflow:hidden;padding:28px 0}
.dfc .ticker .marquee{width:106%;margin-left:-3%;transform:rotate(-1.4deg);background:var(--gold);color:#1B1020;border-block:2px solid var(--edge-hard);overflow:hidden;white-space:nowrap;padding:14px 0}
.dfc .marquee span{white-space:nowrap}
.dfc .marquee .marquee-track{display:flex;width:max-content;animation:marq 97s linear infinite;font:800 1.375rem/1 var(--f-display);letter-spacing:-.02em}
.dfc .marquee .marquee-group{display:flex;align-items:center;gap:26px;flex:none;min-width:100vw;padding-right:26px}
.dfc .marquee i{width:14px;height:14px;border-radius:50%;background:var(--accent-solid);border:2px solid #1B1020;display:inline-block;flex:none}
@media (prefers-reduced-motion:reduce){
  .dfc .marquee .marquee-track{animation:none!important;transform:none!important;width:100%;justify-content:center}
  .dfc .marquee .marquee-group{flex:1 1 auto;max-width:100%;flex-wrap:wrap;justify-content:center;min-width:0;gap:10px 22px;padding:0 20px}
  .dfc .marquee .marquee-group+.marquee-group{display:none}
  .dfc .ticker .marquee{white-space:normal}
  .dfc .lc-sw i{animation:none}
}

.dfc .home-body{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.dfc .home-sec{padding:56px 0 8px}
.dfc .sec-eyebrow{color:var(--accent)}
.dfc .sec-h{font-size:clamp(2.25rem,9.6vw,3.75rem);margin-top:10px;letter-spacing:-.028em;line-height:1;text-wrap:balance;max-width:14ch}
.dfc .sec-sub{margin-top:12px;max-width:52ch;font-size:1.0625rem;color:var(--ink-2)}
.dfc .idea{padding-top:32px}
.dfc .idea-card{position:relative;background-color:var(--block);color:var(--on-block);border:2px solid var(--edge-hard);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--accent-solid);padding:44px 22px 36px;overflow:visible;background-image:radial-gradient(circle,rgba(255,79,163,.28) 2.4px,transparent 3px),radial-gradient(circle,rgba(255,178,26,.5) 1.4px,transparent 2px);background-size:28px 28px;background-position:0 0,14px 14px}
.dfc .idea-line{font-size:clamp(1.875rem,7vw,3.25rem);line-height:1.06;letter-spacing:-.025em;max-width:22ch}
.dfc .idea-line em.it{color:var(--gold)}
.dfc .idea-viz{display:none}
.dfc .idea-card{display:block}
.dfc .idea-sticker{position:absolute;top:-16px;right:18px;font-size:1.25rem}

.dfc .how{margin-top:28px;display:grid;gap:18px}
.dfc .how li{position:relative;overflow:hidden;padding:34px 22px 26px;border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:8px;background:var(--surface);color:var(--ink)}
.dfc .how li::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--hc);border-bottom:2px solid var(--edge)}
.dfc .how li::after{content:"";position:absolute;right:-52px;top:-6px;width:110px;height:110px;border-radius:50%;background-image:radial-gradient(circle,var(--hc) 2px,transparent 2.6px);background-size:14px 14px;opacity:.28}
.dfc .how li>*{position:relative;z-index:1}
.dfc .how-1{--hc:var(--accent-solid);--hn:#fff}
.dfc .how-2{--hc:var(--gold);--hn:#1B1020}
.dfc .how-3{--hc:var(--peacock-solid);--hn:#fff}
.dfc .how-n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--hc);color:var(--hn);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge-hard);font:800 1.5rem/1 var(--f-desi);padding-top:4px;margin-bottom:6px}
.dfc .how h3{font-size:1.5rem;letter-spacing:-.025em;line-height:1.1}
.dfc .how p{font-size:1.0625rem;line-height:1.5;max-width:30ch;color:var(--ink-2)}

.dfc .occ{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dfc .otile{position:relative;min-height:150px;padding:58px 16px 16px;border:2px solid var(--edge);border-radius:24px;box-shadow:var(--sh-2);display:flex;flex-direction:column;justify-content:flex-end;gap:2px;text-decoration:none;color:#1B1020}
@media (hover:hover) and (pointer:fine){.dfc .otile:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:var(--sh-h)}.dfc .otile:hover .go{transform:rotate(-45deg)}}
.dfc .otile b{font:800 1.5rem/1 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.dfc .otile .hi{text-wrap:balance}
.dfc .otile .dev{color:inherit;position:absolute;top:14px;left:16px;right:60px;height:36px;display:flex;align-items:center;font:700 1.0625rem/1 var(--f-desi);padding-top:3px;opacity:.9;white-space:nowrap;overflow:hidden}
@media (max-width:379px){.dfc .otile{padding:58px 12px 12px}.dfc .otile .dev{left:12px}.dfc .otile b{font-size:1.3125rem}}
.dfc .otile .hi{font:600 1rem/1.2 var(--f-desi)}
.dfc .otile .go{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1B1020;color:#FFF3E6;transition:transform var(--d-2) var(--ease)}
.dfc .otile .go svg{width:18px;height:18px}
.dfc .t-pink{background-color:var(--accent-solid);color:#fff}
.dfc .t-gold{background-color:var(--gold)}
.dfc .t-ink{background-color:var(--block);color:var(--on-block)}
.dfc .t-ink .go{background:var(--gold);color:#1B1020}
.dfc .t-peacock{background-color:var(--peacock-solid);color:#fff}
.dfc .t-mehendi{background-color:var(--mehendi)}
.dfc .t-tint{background-color:var(--accent-tint);color:var(--ink)}
.dfc .t-cream{background-color:var(--gold-tint);color:var(--ink)}
.dfc .t-steal{background-color:var(--surface);color:var(--ink);border-style:dashed;box-shadow:none}
.dfc .t-steal .hi{color:var(--accent)}
.dfc .t-steal .go{background:var(--accent-solid);color:#fff}
.dfc .t-pink .go,.dfc .t-peacock .go{background:#fff;color:#1B1020}

.dfc .disclose{display:flex;flex-direction:column;gap:6px;margin:56px 0 64px;padding:22px;background:var(--gold-tint);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.dfc .disclose .small{color:var(--ink);max-width:62ch;line-height:1.6;text-wrap:pretty}
.dfc .disclose .tag{display:flex;width:max-content;margin:0 0 8px}
.dfc .disclose .textlink{font-weight:700;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;align-self:flex-start}

/* footer */
.dfc .site-foot{background:var(--block);color:var(--on-block);padding:0}
.dfc .site-foot>.toran{background-color:var(--bg);height:24px;background-size:38px 24px;margin-bottom:0}
.dfc .site-foot>.toran+.foot-in{padding-top:36px}
.dfc .foot-in{max-width:var(--maxw);margin:0 auto;padding:40px var(--gutter) 44px;display:grid;gap:28px}
.dfc .foot-mark{font:800 clamp(2.5rem,11vw,3.75rem)/1 var(--f-display);letter-spacing:-.035em;color:var(--on-block)}
.dfc .foot-mark .foil{color:#FF4FA3}
.dfc .foot-in .hindi{margin-top:10px;font-size:1.25rem}
.dfc .foot-p{margin-top:14px;color:var(--on-block-2);font-size:var(--t-small);max-width:56ch}
.dfc .foot-nav{display:flex;flex-wrap:wrap;gap:4px 8px;align-content:flex-start}
.dfc .foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid rgba(255,243,230,.35);border-radius:var(--r-pill);color:var(--on-block);font-weight:700;font-size:.9375rem;text-decoration:none;transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.dfc .foot-nav a:hover{background:var(--gold);color:#1B1020;border-color:var(--gold)}
.dfc .app:not([hidden])~.site-foot .foot-p{display:none}

/* privacy and 404 */
.dfc .doc-hero{padding:44px 0 48px;border-bottom:2px solid var(--edge)}
.dfc .doc-hero-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:0}
.dfc .doc-h1{font-size:clamp(2.75rem,12vw,5rem);line-height:.95;letter-spacing:-.035em;margin-top:20px}
.dfc .doc-hero .hero-lede{margin-top:18px;max-width:56ch;font-size:1.1875rem;line-height:1.6}
.dfc .pchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;width:100%;max-width:440px}
@media (min-width:640px){.dfc .pchips{display:flex;flex-wrap:wrap;max-width:none;width:auto}}
.dfc .pchips li{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 10px;border:2px solid var(--edge);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--sh-1);font:700 .9375rem/1.15 var(--f-ui);color:var(--ink)}
@media (min-width:640px){.dfc .pchips li{padding:0 16px 0 12px;font-size:1rem}}
.dfc .pchips li::before{content:"";width:11px;height:6px;border-left:3px solid var(--ok);border-bottom:3px solid var(--ok);transform:rotate(-45deg) translateY(-2px);margin:0 2px 0 3px}
.dfc .doc-main{padding:44px var(--gutter) 72px;max-width:var(--maxw);margin:0 auto;width:100%}
.dfc .pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.dfc .ptoc{display:none}
.dfc .psub{font:800 1.0625rem/1.2 var(--f-display);letter-spacing:-.015em;color:var(--ink);margin-top:8px;padding-top:14px;border-top:2px dotted var(--line-strong)}
.dfc .pcard .psum+.psub{margin-top:4px}
.dfc .pcard{--pc:var(--gold);position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:22px 20px 24px;overflow:hidden}
.dfc .pcard::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--pc);border-bottom:2px solid var(--edge)}
.dfc .pcard>*{position:relative}
.dfc .p-gold{--pc:var(--gold);--pb:var(--gold);--pi:#1B1020}
.dfc .p-pink{--pc:var(--accent-solid);--pb:var(--accent-solid);--pi:#fff}
.dfc .p-peacock{--pc:var(--peacock-solid);--pb:var(--peacock-solid);--pi:#fff}
.dfc .p-mehendi{--pc:var(--mehendi);--pb:var(--mehendi);--pi:#1B1020}
.dfc .pcard-h{display:flex;align-items:center;gap:14px;margin-top:8px}
.dfc .pbadge{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--pb);color:var(--pi);border:2px solid var(--edge);box-shadow:var(--sh-1)}
.dfc .pcard h2{font-size:1.375rem;letter-spacing:-.025em;line-height:1.15}
.dfc .psum{font:800 1.25rem/1.25 var(--f-display);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.dfc .psum strong{color:var(--accent)}
.dfc .pdet,.dfc .pbul li,.dfc .pfoot{color:var(--ink-2);font-size:1.0625rem;line-height:1.6;max-width:68ch;text-wrap:pretty;overflow-wrap:break-word}
.dfc .pdet strong,.dfc .pbul strong{color:var(--ink)}
.dfc .pbul{display:flex;flex-direction:column;gap:10px}
.dfc .pbul li{position:relative;padding-left:24px}
.dfc .pbul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent-solid)}
.dfc .pfour{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dfc .pfour li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--bg-sunk);border:2px solid var(--edge);border-radius:var(--r-md)}
.dfc .pfour strong{font:800 1.125rem/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.dfc .pfour span{color:var(--ink-2);font-size:1rem;line-height:1.5}
.dfc .pfoot{font-weight:600;color:var(--ink)}
.dfc .pcard .note{margin-top:2px;font-size:var(--t-small)}
.dfc .pcard .note span{margin:0}
.dfc .nf-main{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter))) 56px;gap:0;width:100%}
.dfc .nf-art{position:relative;width:100%;display:flex;justify-content:center}
.dfc .nf-panel{position:relative;width:min(320px,100%);padding:36px 24px 40px;background:var(--accent-solid);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);background-image:radial-gradient(circle,rgba(255,255,255,.28) 2.4px,transparent 3px),radial-gradient(circle,rgba(255,178,26,.9) 1.6px,transparent 2.2px);background-size:26px 26px;background-position:0 0,13px 13px;display:grid;place-items:center}
.dfc .nf-arch{width:min(230px,100%);aspect-ratio:260/300;--arch-r:115px;display:grid;place-items:center;color:#efe6d2;box-shadow:4px 4px 0 var(--edge-hard);--edge:#1B1020}
.dfc .nf-arch svg{position:relative}
.dfc .nf-oops{position:absolute;right:-6px;top:-16px;--rot:8deg;z-index:2;font-size:1.25rem}
.dfc .nf-kya{position:absolute;left:-6px;bottom:-14px;--rot:-5deg;z-index:2;font-size:1.1875rem}
.dfc .nf-copy{display:flex;flex-direction:column;align-items:center;margin-top:48px}
.dfc .nf-copy .doc-h1{margin-top:22px}
.dfc .nf-copy .hl{padding:0 .12em;background:linear-gradient(transparent 62%,var(--gold) 62% 90%,transparent 90%)}
.dfc .nf-copy .hero-lede{margin-top:20px;max-width:34ch}
.dfc .nf-copy .hindi{margin-top:14px}
.dfc .nf-cta{display:flex;flex-direction:column;gap:16px;width:100%;max-width:360px;margin-top:36px}
.dfc .nf-try{margin-top:32px;color:var(--ink-2)}
.dfc .nf-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;justify-content:center}
.dfc .nf-chips .chip{text-decoration:none}

/* ===== app screens (Desi Pop) =====
   Light chai-cream screens: top bar with a step pill, a head (sticker, headline, helper line),
   the arch as the photo / flat-lay frame, sticker cards for controls. Under 1024 it is one
   column with an opaque bottom action bar in the flow; 1024 and up the arch sticks on the
   left and the controls sit on the right. */
.dfc .app{display:block}
.dfc .scr{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow-x:clip}
.dfc .scr::before{content:"";position:absolute;left:0;right:0;top:0;height:360px;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--pat) 2.4px,transparent 2.9px),radial-gradient(circle,var(--pat) 1.4px,transparent 1.9px);background-size:28px 28px;background-position:0 0,14px 14px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}

/* top bar */
.dfc .apptop{position:relative;z-index:6}
.dfc .apptop-in{max-width:var(--maxw);margin:0 auto;min-height:68px;padding:0 var(--gutter);display:flex;align-items:center;gap:10px}
.dfc .apptop .wordmark{font-size:1.3rem}
.dfc .apptop .wordmark{margin-right:auto}
.dfc .backbtn{width:44px;height:44px;border:2px solid var(--edge);background:var(--surface);box-shadow:var(--sh-1);flex:none}
.dfc .backbtn:hover{background:var(--gold-tint)}
.dfc .backbtn:active{transform:translate(1px,1px);box-shadow:none}
.dfc .apptop .toran.thin{opacity:.9;height:12px;background-size:19px 12px}
.dfc .steppill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:2px solid var(--edge);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--sh-1);font:700 .875rem/1 var(--f-ui);color:var(--ink);white-space:nowrap}
.dfc .steppill .segs{display:flex;gap:4px}
.dfc .steppill .segs i{width:13px;height:10px;border-radius:5px;border:1.5px solid var(--edge);background:var(--bg-sunk)}
.dfc .steppill .segs i.on{background:var(--accent-solid)}

/* layout: head, visual, body, bar */
.dfc .scr-wrap{display:contents}
.dfc .scr-head,.dfc .scr-vis,.dfc .scr-body{width:100%;max-width:600px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.dfc .scr-head{padding-top:14px;display:flex;flex-direction:column;align-items:flex-start;position:relative}
.dfc .scr-h1{font-size:clamp(2.5rem,12vw,3.5rem);line-height:.98;margin-top:16px}
.dfc .scr-h1:focus,.dfc .looks-h1:focus{outline:none}
.dfc .scr-lede{margin-top:12px;font-size:1.0625rem;line-height:1.55;color:var(--ink-2);max-width:40ch}
.dfc .accent-link{margin-top:6px;color:var(--accent);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.dfc .scr-vis{padding-top:22px;padding-bottom:6px;display:flex;flex-direction:column;align-items:center;gap:14px}
.dfc .scr-body{padding-top:14px;padding-bottom:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.dfc .pop-s{animation:stick var(--d-2) var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 80ms)}
@keyframes stick{from{opacity:0;transform:scale(.55) rotate(calc(var(--rot,-3deg) * 3))}to{opacity:1;transform:rotate(var(--rot,-3deg))}}
@keyframes stripe{to{background-position:28px 0}}

/* bottom action bar: opaque, in the flow, no fade over content */
.dfc .scr .bar{position:sticky;bottom:0;margin-top:auto;z-index:8;width:100%;padding:0;background:var(--bg);border-top:2px solid var(--edge);box-shadow:var(--sh-3);display:block}
.dfc .bar-in{max-width:600px;margin:0 auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.dfc .bar-in .trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;text-align:center;font-size:.875rem;line-height:1.3}
.dfc .bar-in .trust a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;margin:0 -6px;text-decoration:underline;text-underline-offset:3px}
.dfc .apptop .btn-sm{white-space:nowrap;padding:0 14px;gap:6px}
.dfc .summary{margin:0}
.dfc .attr-alert:empty{display:none}

/* the arch (jharokha): flat solid colour + bandhani dots */
.dfc .spot{position:absolute;inset:0;pointer-events:none}
.dfc .arch-up{--aw:min(250px,64vw);width:var(--aw);aspect-ratio:300/340;--arch-r:calc(var(--aw) / 2);display:block}
.dfc .arch-up.is-over{outline:4px dashed var(--accent);outline-offset:6px}
.dfc .arch-up.is-done{animation:pop var(--d-2) var(--ease) both}
.dfc .arch-sm{--aw:min(170px,46vw);width:var(--aw);aspect-ratio:170/190;--arch-r:calc(var(--aw) / 2);display:grid;place-items:center}
.dfc .arch-icon{color:#fff;display:grid;place-items:center}
.dfc .arch-icon svg{width:92px;height:80px}
.dfc .arch-fig{position:absolute;left:22%;right:22%;top:20%;bottom:14%;display:grid;place-items:center;color:#efe6d2;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35))}
.dfc .arch-fig>svg{width:100%;height:100%;grid-area:1/1}
.dfc .arch-fig.dim>svg{opacity:.55}
.dfc .qmark{grid-area:1/1;font-size:4.5rem;line-height:1;color:var(--gold);position:relative}
.dfc .arch-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;background:var(--bg-sunk)}
.dfc .scanline{position:absolute;left:0;right:0;height:5px;background:var(--gold);border-block:2px solid var(--edge-hard);box-shadow:0 0 18px 4px rgba(255,178,26,.7);animation:scan 1.1s var(--ease) infinite alternate}
.dfc .okbadge{position:absolute;top:18%;right:12%;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--mehendi);color:#1B1020;border:2px solid var(--edge-hard);box-shadow:3px 3px 0 var(--edge-hard);font:800 1.75rem/1 var(--f-display);animation:okpop var(--d-3) var(--ease) .15s both}
@keyframes okpop{from{opacity:0;transform:scale(.3) rotate(-40deg)}to{opacity:1;transform:rotate(8deg)}}

/* drop zone: text sits on a solid sticker card, never on the pattern */
.dfc .dropzone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:20px;font:inherit;color:var(--ink);border-radius:inherit}
.dfc .dz-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px 18px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);transform:rotate(-2deg);transition:transform var(--d-2) var(--ease)}
.dfc .dropzone:hover .dz-card{transform:rotate(0) scale(1.03)}
.dfc .dz-card svg{color:var(--accent)}
.dfc .dz-h{font-size:1.375rem;line-height:1.1;margin-top:6px}
.dfc .dz-s{color:var(--ink-2)}

/* upload / steal status */
.dfc .up-status{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:16px}
.dfc .up-status:empty{display:none}
.dfc .status-t{font-weight:700;font-size:1.0625rem}
.dfc .loadbar,.dfc .progress{height:18px;border:2px solid var(--edge);border-radius:var(--r-pill);background:var(--surface);overflow:hidden;position:relative}
.dfc .loadbar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,var(--accent-solid) 0 10px,var(--gold) 10px 20px);background-size:28px 28px;animation:stripe .9s linear infinite}
.dfc .progress div{height:100%;background:var(--accent-solid);transition:width var(--d-2) var(--ease)}
.dfc .chip.static{cursor:default}
.dfc .chip.static:hover{background:var(--surface)}
.dfc .mini-dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(27,16,32,.5)}
.dfc .file-note{align-items:center}
.dfc .file-note b{color:inherit}
.dfc .file-note .tile{background:var(--bg-sunk)}

/* attributes */
.dfc .attr-vis{display:flex;align-items:center;gap:16px;width:100%}
.dfc .fig{flex:0 0 40%;max-width:170px}
.dfc .attr-arch{--aw:min(170px,40vw);width:100%;aspect-ratio:170/196;--arch-r:calc(var(--aw) / 2);display:block;transition:background-color var(--d-2) var(--ease)}
.dfc .fig-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.dfc .fig-cap{font-size:1.5rem;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.dfc .reading{display:grid;grid-template-columns:1fr;gap:6px}
.dfc .reading>div{background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-md);padding:6px 12px;min-width:0}
.dfc .reading dt{font:700 .875rem/1.2 var(--f-ui);color:var(--ink-3)}
.dfc .reading dd{margin:2px 0 0;font:700 1.0625rem/1.2 var(--f-display);overflow-wrap:anywhere}
.dfc .attr-sec{margin-top:10px;display:flex;flex-direction:column;gap:12px}
.dfc .sec-t{display:flex;align-items:center;gap:10px;font:800 1.3125rem/1.1 var(--f-display);letter-spacing:-.025em}
.dfc .sec-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:#1B1020;border:2px solid var(--edge);box-shadow:var(--sh-1);font:700 1.0625rem/1 var(--f-desi);padding-top:3px;flex:none}
.dfc .sw-card{padding:14px 8px 10px}
.dfc .swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 0}
.dfc .sw{min-width:0;min-height:44px}
.dfc .sw[aria-pressed="true"] .dot::after{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1.5px #000)}
.dfc .dial-box{padding:18px 14px 16px;background:var(--gold-tint)}
.dfc .dial{width:100%;max-width:320px;display:block;margin:0 auto;overflow:visible}
.dfc .dial-track{stroke:var(--surface)}
.dfc .dial-arc{stroke:var(--accent-solid);transition:stroke-dasharray var(--d-3) var(--ease)}
.dfc .dial-needle{transform-origin:110px 110px;transition:transform var(--d-3) var(--ease)}
.dfc .dial-needle path{stroke:var(--ink)}
.dfc .dial-hub{fill:var(--ink)}
.dfc .dial-t{font:700 11px var(--f-ui);fill:var(--ink-2)}
.dfc .dial-label{text-align:center;font-size:1.75rem;margin-top:2px}
.dfc .levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:12px}
.dfc .levels .chip{justify-content:center;padding:0;min-width:0}
.dfc .levels .chip::before{display:none}

/* catalogue */
.dfc .flt-l{font:700 .9375rem/1.2 var(--f-ui);color:var(--ink-2);margin-top:6px}
.dfc .chips.scroll{position:relative;scroll-padding:16px;padding:4px 16px 10px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 44px),transparent 100%)}
.dfc .cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;margin-top:6px}
.dfc .cat-grid.is-empty{display:block}
.dfc .itemcard{border:0;background:transparent;padding:0;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.dfc .itemcard .pic{background:var(--bg-sunk)}
.dfc .pic-in{position:absolute;inset:0;display:grid;place-items:center}
.dfc .itemcard .pic img,.dfc .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface)}
.dfc .itemcard .pic .sw-mini{z-index:1}
.dfc .ic-text{display:flex;flex-direction:column;gap:2px}
.dfc .ic-title{font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dfc .skel-card{display:flex;flex-direction:column;gap:8px}
.dfc .pic-skel{aspect-ratio:4/5;border-radius:var(--r-lg)}
.dfc .skel.line{height:14px;width:85%}
.dfc .skel.line.short{width:50%}
.dfc .empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 20px}
.dfc .empty .arch-sm{margin:0}
.dfc .empty .disp.h1{font-size:clamp(2rem,8vw,2.75rem)}
.dfc .empty-btns{display:flex;flex-direction:column;gap:10px;margin-top:4px;align-items:stretch}

/* pieces list (looks + steal) */
.dfc .pieces{padding:4px 14px}
.dfc .pieces.dashed{border-style:dashed;box-shadow:none}
.dfc .row{grid-template-columns:56px minmax(0,1fr) auto;padding:12px 0}
.dfc .row-t{min-width:0}
.dfc .row .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:1rem}
.dfc .row .sub{font-size:.9375rem}
.dfc .row .sub b{color:var(--ink)}
.dfc .row .tag{white-space:nowrap;margin-bottom:3px}
.dfc .tile{position:relative;overflow:hidden;background:var(--bg-sunk)}
.dfc .tile svg{width:40px;height:40px;filter:drop-shadow(1.5px 2px 0 rgba(0,0,0,.3))}
.dfc .row a.go{white-space:nowrap;min-height:44px;padding:0 14px}
.dfc .row.anchor-row .tag{white-space:nowrap}
.dfc .lbl{font:700 .9375rem/1.2 var(--f-ui);color:var(--ink-2)}
.dfc .blk-t{font:800 1.375rem/1.1 var(--f-display);letter-spacing:-.025em}
.dfc .total{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding:16px 20px;background:var(--block);color:var(--on-block);border:2px solid var(--edge-hard);border-radius:var(--r-lg);box-shadow:4px 4px 0 var(--accent-solid)}
.dfc .total-l{font:700 1.0625rem/1.2 var(--f-ui);color:var(--on-block-2)}
.dfc .total .price{font-size:2.5rem;line-height:1;color:var(--gold);letter-spacing:-.03em}
.dfc .suggest{display:flex;flex-direction:column;gap:8px}

/* looks */
.dfc .looks-h1{font-size:clamp(1.75rem,7.4vw,2.5rem);line-height:1.04;margin-top:14px;max-width:22ch}
.dfc .stk-row{display:flex;flex-wrap:wrap;gap:10px}
.dfc .scr-looks .scr-head,.dfc .scr-looks .scr-body{max-width:1200px}
.dfc .scr-looks .scr-body{padding-top:18px}
.dfc .looks-grid{display:block}
.dfc .looks-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.dfc .tabs{gap:8px}
.dfc .look.is-off{display:none}
.dfc .look{display:flex;flex-direction:column;gap:22px;animation:rise var(--d-3) var(--ease) both}
.dfc .look-top{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.dfc .look-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dfc .look-count{font-weight:700;font-size:.9375rem;color:var(--ink-2)}
.dfc .look-title{font-size:clamp(2.5rem,12.5vw,3.75rem);line-height:.95;letter-spacing:-.04em;overflow-wrap:anywhere}
.dfc .lay-frame{position:relative;width:100%;display:flex;justify-content:center;padding-bottom:16px}
.dfc .flatlay{--aw:min(358px,calc(100vw - 32px));position:relative;width:var(--aw);aspect-ratio:358/340;--arch-r:calc(var(--aw) / 2);margin:0 auto}
.dfc .flatlay .lay{position:absolute}
.dfc .lay svg{overflow:visible}
.dfc .st-tot{position:absolute;left:max(0px,calc(50% - var(--aw) / 2 - 6px));bottom:0;font-size:1.25rem;min-height:40px;padding:3px 16px 0;box-shadow:3px 3px 0 var(--edge-hard);z-index:2}
.dfc .look-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.dfc .why-box{background:var(--gold-tint);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.dfc .why-box .why{font-size:1.0625rem;line-height:1.55;color:var(--ink)}
.dfc .try-other{padding:8px 0 32px;display:flex;flex-direction:column;gap:12px}
.dfc .skel-rows{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.dfc .arch-skel{--aw:min(260px,70vw);width:var(--aw);height:calc(var(--aw) * 1.05);border-radius:calc(var(--aw) / 2) calc(var(--aw) / 2) 24px 24px;align-self:center;margin-bottom:10px}
.dfc .skel-row{display:grid;grid-template-columns:56px 1fr;gap:12px;margin-top:6px}

/* steal */
.dfc .arch-steal{--arch-bg:var(--gold)}
.dfc .arch-steal.is-small{--aw:min(188px,50vw)}
.dfc .arch-steal .arch-photo{object-position:center 20%}
.dfc .steal-list{display:flex;flex-direction:column;gap:22px;min-width:0}
.dfc .steal-piece{display:flex;flex-direction:column;gap:10px}
.dfc .steal-head{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center}
.dfc .steal-head .mini-dot{width:22px;height:22px}
.dfc .steal-head .h3{margin:3px 0 0}
.dfc .steal-head .sub{color:var(--ink-3)}
.dfc .match-tag{margin-bottom:3px}
.dfc .nomatch{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.dfc .nomatch .nm{font-weight:700}
.dfc .nomatch .empty-btns{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:6px}

/* 640 to 1023 */
@media (min-width:640px){
  .dfc .arch-up{--aw:300px}
  .dfc .scr-head,.dfc .scr-vis,.dfc .scr-body{padding-left:24px;padding-right:24px}
  .dfc .apptop-in{padding:0 24px;gap:12px}
  .dfc .apptop .wordmark{font-size:1.45rem}
  .dfc .bar-in{padding-left:24px;padding-right:24px}
  .dfc .swatches{grid-template-columns:repeat(6,minmax(0,1fr))}
  .dfc .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dfc .scr-pick .scr-head,.dfc .scr-pick .scr-body{max-width:1000px}
  .dfc .empty-btns{flex-direction:row}
  .dfc .scr-looks .scr-head,.dfc .scr-looks .scr-body{max-width:900px}
  .dfc .look{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .dfc .look-top{position:sticky;top:16px}
  .dfc .flatlay{--aw:min(358px,calc(50vw - 40px))}
}

/* 1024 and up: arch sticks left, controls right */
@media (min-width:1024px){
  .dfc .apptop-in{padding:0 32px}
  .dfc .scr-wrap{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:1200px;margin:0 auto;padding:12px 32px 72px;align-content:start;column-gap:72px}
  .dfc .scr-head,.dfc .scr-vis,.dfc .scr-body{max-width:none;margin:0;padding-left:0;padding-right:0}
  .dfc .scr-head{grid-column:1;padding-top:8px}
  .dfc .scr-body{grid-column:1;padding-bottom:0}
  .dfc .scr .bar{grid-column:1;position:static;background:none;border:0;box-shadow:none;margin-top:0;align-self:start}
  .dfc .bar-in{max-width:none;padding:18px 0 0}
  .dfc .scr-h1{font-size:clamp(3.25rem,5.2vw,4.5rem)}
  .dfc .has-vis .scr-wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr}
  .dfc .has-vis .scr-vis{grid-column:1;grid-row:1/span 3;position:sticky;top:24px;align-self:start;padding-top:8px}
  .dfc .has-vis .scr-head,.dfc .has-vis .scr-body,.dfc .has-vis .scr .bar,.dfc .has-vis .bar{grid-column:2;max-width:560px}
  .dfc .has-vis .bar-in{max-width:560px}
  .dfc .scr-solo .scr-wrap{align-items:center}
  .dfc .arch-up{--aw:min(400px,100%)}
  .dfc .scr-upload .arch-up,.dfc .scr-steal .arch-up{--aw:400px}
  .dfc .scr-steal .arch-up.is-small{--aw:340px}
  .dfc .arch-sm{--aw:220px}
  .dfc .dz-h{font-size:1.625rem}
  /* attributes: arch + reading stacked on the left */
  .dfc .attr-vis{flex-direction:column;align-items:stretch;gap:20px;max-width:380px;margin:0 auto}
  .dfc .fig{flex:none;max-width:none;width:300px;margin:0 auto}
  .dfc .attr-arch{--aw:300px}
  .dfc .fig-cap{font-size:2rem;text-align:center}
  .dfc .reading{grid-template-columns:1fr 1fr;gap:10px}
  .dfc .reading>div{padding:8px 14px}
  .dfc .reading dd{font-size:1.125rem}
  /* catalogue */
  .dfc .scr-pick .scr-wrap{padding-bottom:64px}
  .dfc .scr-pick .scr-head,.dfc .scr-pick .scr-body{max-width:none}
  .dfc .scr-pick .scr-head{flex-direction:column}
  .dfc .chips.scroll{flex-wrap:wrap;padding:4px 0;margin:0;-webkit-mask-image:none;mask-image:none}
  .dfc .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
  .dfc .empty{max-width:560px}
  /* looks */
  .dfc .scr-looks .scr-head,.dfc .scr-looks .scr-body{max-width:none}
  .dfc .looks-h1{font-size:clamp(2.25rem,3.6vw,3rem);max-width:30ch}
  .dfc .looks-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;padding-top:8px}
  .dfc .scr{min-height:0}
  .dfc .look{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px}
  .dfc .flatlay{--aw:380px}
  .dfc .look-title{font-size:clamp(2.75rem,4.2vw,4rem)}
  .dfc .st-tot{font-size:1.375rem}
  .dfc .try-other{padding-top:20px}
  /* steal */
  .dfc .scr-steal.ph-done .steal-list{gap:26px}
}

/* ===== round 2: app-screen refinements (loaded last so they win over the base rules above) ===== */

/* step pill: done state, steal-the-look variant */
.dfc .steppill.is-done{background:var(--mehendi);color:#1B1020}
.dfc .steppill .segs i.ok{background:#1B1020}

/* upload: keep the photo above the sticky bar on phones */
@media (max-width:639px){
  .dfc .scr-upload.ph-done .arch-up,.dfc .scr-upload.ph-reading .arch-up,.dfc .scr-upload.ph-slow .arch-up{--aw:min(236px,62vw)}
  .dfc .scr-upload .scr-vis,.dfc .scr-steal .scr-vis{padding-top:14px}
  .dfc .scr-steal.ph-reading .arch-up{--aw:min(236px,62vw)}
  .dfc .scr-upload .up-status{margin-top:12px}
}

/* reading card laid over the photo */
.dfc .read-card{position:absolute;left:8px;right:8px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--sh-1);text-align:left}
.dfc .read-t{font-size:1rem;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.dfc .dots3{display:inline-flex;gap:3px;margin-left:5px;vertical-align:middle}
.dfc .dots3 i{width:5px;height:5px;border-radius:50%;background:var(--accent-solid);animation:blink 1s ease-in-out infinite}
.dfc .dots3 i:nth-child(2){animation-delay:.18s}
.dfc .dots3 i:nth-child(3){animation-delay:.36s}
.dfc .read-chips{display:flex;flex-wrap:wrap;gap:5px}
.dfc .read-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1.5px solid var(--edge);border-radius:var(--r-pill);font:700 .875rem/1 var(--f-ui);color:var(--ink-2);animation-delay:calc(var(--i,0) * 160ms)}
.dfc .scr-upload.ph-reading .loadbar,.dfc .scr-steal.ph-reading .loadbar{height:12px}

/* attributes */
.dfc .sec-n{width:16px;height:16px;padding:0;box-shadow:none;font-size:0}
.dfc .swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 0}
.dfc .sw{gap:4px;padding:6px 2px;font-size:.875rem}
.dfc .sw .dot{width:36px;height:36px}
.dfc .sw-card{padding:12px 6px 8px}
.dfc .dial{max-width:280px}
.dfc .dial-t{font:700 12px var(--f-ui)}
.dfc .dial-box{padding:14px 14px 14px}
.dfc .dial-label{font-size:1.5rem}
.dfc .more-sec{display:flex;flex-direction:column;gap:14px}
.dfc .more-toggle{justify-content:space-between;width:100%;min-height:52px}
.dfc .more-toggle .chev{width:11px;height:11px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--d-2) var(--ease)}
.dfc .more-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.dfc .summary.is-hint{font-weight:700;color:var(--ink-2)}
@media (min-width:640px){
  .dfc .swatches{grid-template-columns:repeat(8,minmax(0,1fr))}
  .dfc .chips.scroll{flex-wrap:wrap;margin:0;padding:4px 0;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:639px){
  .dfc .chips.scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 64px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 64px),transparent 100%)}
}

/* pieces rows: name (2 lines), meta that never splits, then the buy pill; reveal in sequence */
.dfc .row{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"tile text" "tile act";column-gap:12px;row-gap:0;align-items:start;padding:12px 0}
.dfc .row>.tile,.dfc .row>.pic{grid-area:tile}
.dfc .row>.row-t{grid-area:text}
.dfc .row>.go,.dfc .row>.tag{grid-area:act;justify-self:start;margin-top:8px}
.dfc .row .nm{line-height:1.25}
.dfc .meta{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:2px}
.dfc .nw{white-space:nowrap}
.dfc .meta .nw+.nw{color:var(--ink-3)}
.dfc .row a.go{min-height:44px;padding:0 16px;background:var(--gold);color:#1B1020;border:2px solid var(--edge);box-shadow:var(--sh-1);font:700 .9375rem/1 var(--f-ui);white-space:nowrap}
.dfc .row a.go:hover{background:var(--gold-hi)}
.dfc .row a.go:active{transform:translate(1px,1px);box-shadow:none}
.dfc .row.anchor-row{background:var(--accent-tint);margin:6px -8px;padding:10px 8px;border-radius:14px;border-bottom:0}
.dfc .row.anchor-row+.row{border-top:0}
.dfc .look .row,.dfc .look .why-box,.dfc .look .total{animation:rise 300ms var(--ease) both;animation-delay:calc(220ms + var(--i,0) * 90ms)}
.dfc .look .why-box{animation-delay:60ms}
.dfc .look{animation:none}
.dfc .itemcard .ic-meta{display:flex;flex-wrap:wrap;gap:0 10px;font-size:.9375rem}
.dfc .ic-meta .nw+.nw{color:var(--ink-3)}
.dfc .sw-mini{font-size:.875rem}

/* looks: two panes on wide screens, one column on phones; a band for "another occasion" */
.dfc .look-meta{gap:10px 12px}
.dfc .look-count{font-size:.9375rem}
.dfc .try-other{margin:6px 0 28px;padding:18px 20px 20px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:12px}
.dfc .try-other .btn-sm{align-self:flex-start}
.dfc .scr-looks .scr-head{padding-bottom:4px}

/* steal */
.dfc .scr-steal .steppill{max-width:100%}

@media (min-width:1024px){
  .dfc .looks-grid{display:block;padding-top:0}
  .dfc .look{--lw:clamp(320px,31vw,400px);grid-template-columns:var(--lw) minmax(0,1fr);gap:48px;align-items:stretch}
  .dfc .look-top{position:static}
  .dfc .flatlay{--aw:var(--lw)}
  .dfc .look-title{font-size:clamp(2rem,2.9vw,2.75rem);line-height:1}
  .dfc .look-body{gap:16px}
  .dfc .row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"tile text act";align-items:center;column-gap:14px}
  .dfc .row>.go,.dfc .row>.tag{margin-top:0;justify-self:end}
  .dfc .try-other{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:18px 24px}
  .dfc .try-other .chips{flex:1}
  .dfc .try-other .btn-sm{align-self:center}
  /* attributes: preview panel + formality dial stacked on the left, the other controls on the right (body and "more" dissolve into the page grid) */
  .dfc .scr-attrs.has-vis .scr-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:none;grid-auto-rows:auto;row-gap:22px;align-content:start}
  .dfc .scr-attrs .scr-body,.dfc .scr-attrs .more-sec,.dfc .scr-attrs .more-sec[hidden]{display:contents!important}
  .dfc .scr-attrs.has-vis .scr-head{grid-column:2;grid-row:1;max-width:none}
  .dfc .scr-attrs.has-vis .scr-vis{position:static;grid-column:1;grid-row:1/4;align-self:stretch;padding:32px 28px;justify-content:flex-start;background-color:var(--gold-tint);background-image:radial-gradient(circle,var(--pat) 2.4px,transparent 2.9px),radial-gradient(circle,var(--pat) 1.4px,transparent 1.9px);background-size:28px 28px;background-position:0 0,14px 14px;border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .dfc .scr-attrs.has-vis .bar-in{max-width:none}
  .dfc .scr-attrs .attr-vis{max-width:360px;gap:16px;width:100%}
  .dfc .scr-attrs .fig{width:100%}
  .dfc .scr-attrs .attr-arch{--aw:min(330px,100%);width:var(--aw)}
  .dfc .scr-attrs .reading{grid-template-columns:1fr 1fr}
  .dfc .scr-attrs .attr-sec{margin-top:0;grid-column:2}
  .dfc .scr-attrs .sec-type{grid-row:2}
  .dfc .scr-attrs .sec-colour{grid-row:3}
  .dfc .scr-attrs .sec-style{grid-row:4}
  .dfc .scr-attrs .sec-occ{grid-row:5}
  .dfc .scr-attrs .sec-dressy{grid-column:1;grid-row:4/7;align-self:stretch}
  .dfc .scr-attrs .dial-box{flex:1;display:flex;flex-direction:column;justify-content:center}
  .dfc .scr-attrs.has-vis .bar{grid-column:2;grid-row:6;max-width:none}
  .dfc .scr-attrs .more-toggle{display:none}
  .dfc .scr-attrs .swatches{grid-template-columns:repeat(8,minmax(0,1fr))}
  .dfc .scr-attrs .bar-in{padding-top:6px}
}
@media (min-width:1440px){
  .dfc .scr-pick .scr-wrap{max-width:1360px}
  .dfc .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ===== round 3: app-screen polish (toasts, step labels, compact attributes, pick affordances, looks motion) ===== */

/* readable secondary text: 14px and up, ink-2 */
.dfc .scr .micro,.dfc .scr .small{color:var(--ink-2)}
.dfc .scr .micro{font-size:.875rem}
.dfc .reading dt{font-size:.9375rem;color:var(--ink-2)}
.dfc .row .sub,.dfc .steal-head .sub,.dfc .meta .nw+.nw,.dfc .ic-meta .nw+.nw,.dfc .look-count,.dfc .fig-cap+.reading dt{color:var(--ink-2)}
.dfc .scr .tag,.dfc .sw-mini,.dfc .steppill,.dfc .read-chip{font-size:.875rem}
.dfc .sw:not([aria-pressed="true"]){color:var(--ink-2)}
.dfc .scr :is(h1,h2,h3,.scr-lede,.fig-cap,.disp,.blk-t,.lbl,.sec-t){text-wrap:balance}
.dfc .scr .scr-lede{text-wrap:balance}

/* step pill: labelled segments on wider screens */
.dfc .steplabels{display:none}
@media (min-width:640px){
  .dfc .steplabels{display:inline-flex;gap:0;font-weight:600;color:var(--ink-2)}
  .dfc .steplabels span+span::before{content:"·";display:inline-block;margin:0 6px;font-weight:700;text-decoration:none}
  .dfc .steplabels .cur{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
  .dfc .steppill.is-done .steplabels{color:#1B1020}
}
.dfc .stk-row .pickstep{min-height:36px}

/* error screen: the retry link is a real button */
.dfc .try-link{margin-top:10px;align-self:flex-start}

/* pick: scroll affordance on the chip rows, and a hint above the grid */
.dfc .chiprow{display:flex;align-items:center}
@media (max-width:639px){.dfc .chiprow{margin:0 -16px}}
.dfc .chiprow .chips.scroll{flex:1;min-width:0;margin:0}
.dfc .row-next{flex:none;display:none;place-items:center;width:44px;height:44px;margin:0 12px 6px 4px;border-radius:50%;border:2px solid var(--edge);background:var(--gold);color:#1B1020;box-shadow:var(--sh-1);cursor:pointer;padding:0;animation:nudge 1.6s var(--ease) 1.2s 2}
.dfc .chiprow.has-more .row-next{display:grid}
.dfc .row-next:active{transform:translate(1px,1px);box-shadow:none}
@keyframes nudge{0%,100%{translate:0}40%{translate:5px}}
.dfc .pick-hint{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;align-self:flex-start;margin-top:6px;padding:9px 16px 9px 12px;background:var(--gold);color:#1B1020;border:2px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--sh-1);font:700 1.0625rem/1.25 var(--f-ui)}
.dfc .pick-hint .hint-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1B1020;color:var(--gold);flex:none}
.dfc .pick-hint .hint-hi{font:600 1.0625rem/1.2 var(--f-desi)}
@media (max-width:639px){
  .dfc .chips.scroll{padding-right:28px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%)}
  .dfc .chiprow:not(.has-more) .chips.scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px);mask-image:linear-gradient(90deg,transparent 0,#000 12px)}

}
.dfc .empty.card{align-items:center;text-align:center;margin:8px auto 24px;max-width:560px;background-image:radial-gradient(circle,var(--pat) 2.4px,transparent 2.9px);background-size:28px 28px}
.dfc .empty.card .small{max-width:36ch}
.dfc .empty.card .empty-btns{justify-content:center}

/* attributes: Colour and Formality collapse to one summary row on phones */
.dfc .sum-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 14px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--sh-1);font:inherit;text-align:left;cursor:pointer;transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.dfc .sum-row:active{transform:translate(1px,1px);box-shadow:none}
.dfc .sum-row .sum-k{font:700 .9375rem/1 var(--f-ui);color:var(--ink-2)}
.dfc .sum-row .sum-k::after{content:":"}
.dfc .sum-row .mini-dot{width:22px;height:22px;flex:none;border:2px solid var(--edge);box-shadow:none}
.dfc .sum-row b{flex:1;min-width:0;font:800 1.0625rem/1.2 var(--f-display)}
.dfc .sum-act{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:.9375rem}
.dfc .sum-row .chev{width:10px;height:10px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--d-2) var(--ease)}
.dfc .sum-row[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
@media (max-width:1023px){
  .dfc .attr-sec.sec-colour .sec-t,.dfc .attr-sec.sec-dressy .sec-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .dfc .attr-sec.sec-colour,.dfc .attr-sec.sec-dressy{position:relative;margin-top:2px;gap:10px}
  .dfc .is-collapsed .sw-card,.dfc .is-collapsed .dial-box{display:none}
  .dfc .reading{display:none}
  .dfc .fig-side{justify-content:center}
  .dfc .scr-attrs .bar-in .summary:not(.is-hint){display:none}
}
@media (min-width:1024px){
  .dfc .sum-row{display:none}
  /* the CTA stays in view: its grid area spans the whole right column and it sticks to the viewport bottom */
  .dfc .scr-attrs.has-vis .bar{grid-row:2/7;align-self:end;position:sticky;bottom:0;z-index:7;background:var(--bg);border-top:2px solid var(--edge);box-shadow:var(--sh-3);margin:0 -16px;padding:0 16px;max-width:none}
  .dfc .scr-attrs.has-vis .bar-in{padding:14px 0 16px;max-width:none}
}

/* looks */
.dfc .look-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%}
.dfc .look-titlerow .look-title{flex:1;min-width:0}
@media (max-width:639px){
  .dfc .look-title{font-size:clamp(1.875rem,8.6vw,2.375rem)}
  .dfc .flatlay{--aw:min(290px,calc(100vw - 64px))}
  .dfc .look{gap:16px}
  .dfc .look-top{gap:10px}
  .dfc .scr-looks .scr-body{padding-top:14px}
  .dfc .looks-main{gap:14px}
}
@media (min-width:640px){
}
@media (min-width:1024px){
}
/* flat-lay garments drop in one by one: fall, overshoot, settle */
@keyframes lay-in{
  0%{opacity:0;transform:translateY(-64px) rotate(calc(var(--r,0deg) * 3 - 14deg)) scale(.9)}
  62%{opacity:1;transform:translateY(5px) rotate(calc(var(--r,0deg) - 3deg)) scale(1.02)}
  100%{opacity:1;transform:rotate(var(--r,0deg))}
}
.dfc .flatlay .lay{animation:lay-in 380ms var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 100ms)}

/* steal results: the total lives under the photo on desktop, so the left column is never empty */
.dfc .vis-total{display:none}
@media (min-width:1024px){
  .dfc .scr-steal.ph-done .vis-total{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:340px;padding:16px 20px 18px;background:var(--block);color:var(--on-block);border:2px solid var(--edge-hard);border-radius:var(--r-lg);box-shadow:4px 4px 0 var(--accent-solid);text-align:center}
  .dfc .vis-total .total-l{font:700 1rem/1.2 var(--f-ui);color:var(--on-block-2)}
  .dfc .vis-total .price{font-size:2.75rem;line-height:1;color:var(--gold);letter-spacing:-.03em}
  .dfc .vis-total .micro{color:var(--on-block-2)}
  .dfc .scr-steal.ph-done .steal-total,.dfc .scr-steal.ph-done .steal-total-n{display:none}
  .dfc .scr-steal .scr-vis{gap:20px}
}

/* idle photo screens: a "what you'll get" panel fills the right column on desktop */
.dfc .side-panel{display:none}
@media (min-width:1024px){
  .dfc .side-panel{display:flex;flex-direction:column;gap:14px;margin-top:6px;padding:16px 20px 16px;background-color:var(--gold-tint);background-image:radial-gradient(circle,var(--pat) 2.4px,transparent 2.9px),radial-gradient(circle,var(--pat) 1.4px,transparent 1.9px);background-size:28px 28px;background-position:0 0,14px 14px;border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .dfc .sp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .dfc .sp-hi{font-size:1.25rem}
  .dfc .sp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .dfc .sp-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:112px;padding:12px 12px 10px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--sh-1)}
  .dfc .sp-head .sticker{transform:none}
  .dfc .sp-k{font:700 .875rem/1 var(--f-ui);color:var(--ink-2)}
  .dfc .sp-v{font:800 1.0625rem/1.15 var(--f-display);letter-spacing:-.015em}
  .dfc .sp-v.price{font-size:1.875rem;color:var(--accent);line-height:1}
  .dfc .sp-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:var(--r-pill);border:1.5px solid currentColor;background:var(--peacock-tint);color:var(--peacock-ink);font:700 .875rem/1 var(--f-ui)}
  .dfc .sp-tag.red{background:var(--accent-tint);color:var(--accent-ink)}
  .dfc .sp-p{margin-top:auto;font:800 1.125rem/1 var(--f-display)}
  .dfc .sp-tips-t{font:800 1.0625rem/1 var(--f-display);margin-bottom:-8px}
  .dfc .sp-tips{display:flex;flex-direction:column;gap:6px}
  .dfc .sp-tips li{display:flex;align-items:center;gap:8px;min-height:28px;font-size:1rem;color:var(--ink-2)}
  .dfc .sp-tips li b{color:var(--ink)}
  .dfc .sp-d{color:var(--ink-2)}
  .dfc .sp-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--mehendi);color:#1B1020;border:2px solid var(--edge);flex:none}
  .dfc .scr-upload.ph-idle .scr-vis,.dfc .scr-steal.ph-idle .scr-vis{align-self:center;padding-top:0}
  .dfc .scr-upload.ph-idle .arch-up,.dfc .scr-steal.ph-idle .arch-up{--aw:440px}
}

/* ===== round 4: pick filters, step names, hint bar, look actions, more looks, reveal ===== */

/* step pill: "2/3 · Check" on phones, "Step 2 of 3" plus labelled segments from 640px */
.dfc .step-long{display:inline}

/* pick: two filter stickers open panels of wrapping chips on phones (nothing scrolls sideways);
   from 640px the chip groups are always open */
.dfc .flt-bar{display:flex;flex-wrap:wrap;gap:10px}
.dfc .flt-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;max-width:100%;padding:0 14px;background:var(--gold);color:#1B1020;border:2px solid var(--edge);border-radius:var(--r-pill);box-shadow:var(--sh-1);font:inherit;cursor:pointer;transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.dfc .flt-btn:active{transform:translate(1px,1px);box-shadow:none}
.dfc .flt-btn .flt-k{font:700 .9375rem/1 var(--f-ui)}
.dfc .flt-btn .flt-k::after{content:":"}
.dfc .flt-btn b{font:800 1.0625rem/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
.dfc .flt-btn .chev{width:10px;height:10px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--d-2) var(--ease)}
.dfc .flt-btn[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.dfc .flt-btn[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
.dfc .flt-panel{display:none}
.dfc .flt-panel.is-open{display:block;padding:12px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.dfc .flt-panel .flt-l{display:none}
.dfc .flt-chips{gap:8px}
.dfc .flt-chips .chip{min-height:44px;padding:0 14px}
/* same sticker buttons on every width: one compact row, the chips open in a panel below */
@media (min-width:640px){
  .dfc .flt-bar{gap:12px}
  .dfc .flt-panel.is-open{display:flex;flex-direction:column;gap:8px}
}

/* attributes: unset values, the "pick a type" hint and a clearly-disabled CTA */
.dfc .reading dd.is-unset{color:var(--ink-3);font-weight:600}
.dfc .summary .hint-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:0 16px;background:var(--accent-tint);color:var(--accent-ink);border:2px solid var(--accent-solid);border-radius:var(--r-pill);font:700 1rem/1.2 var(--f-ui);cursor:pointer;text-align:center}
.dfc .summary .hint-btn:active{transform:translate(1px,1px)}
.dfc .scr-attrs .bar .btn[disabled]{background:var(--bg-sunk);color:var(--ink-2);border:2px dashed var(--ink-2);opacity:1}
.dfc .scr .trust{font-size:.9375rem}

/* looks: share + save as image, first-look reveal, more-looks strip */
.dfc .look-title:focus{outline:none}
.dfc .look-actions{display:flex;gap:10px;width:100%}
.dfc .look-actions .btn{flex:1 1 0;min-width:0;min-height:52px;padding:0 12px;gap:8px;font-size:1rem;white-space:nowrap}
.dfc .look-actions .btn svg{width:20px;height:20px;flex:none}
.dfc .more-looks{display:none}
@media (min-width:640px){
  .dfc .more-looks{display:flex;flex-direction:column;gap:14px;margin-top:8px}
  .dfc .ml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
  .dfc .mini-look{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 16px 14px 14px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);font:inherit;text-align:left;cursor:pointer;transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),background var(--d-1) var(--ease)}
  .dfc .mini-look:hover{background:var(--gold-tint);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
  .dfc .mini-look:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}
  .dfc .mini-look .flatlay.mini{--aw:112px;width:var(--aw);margin:0;box-shadow:var(--sh-1)}
  .dfc .mini-look .flatlay.mini .lay{animation:none}
  .dfc .ml-t{display:flex;flex-direction:column;gap:3px;min-width:0}
  .dfc .ml-k{font:700 .875rem/1 var(--f-ui);color:var(--ink-2)}
  .dfc .ml-n{font-size:1.25rem;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
  .dfc .ml-p{font-size:.9375rem;color:var(--ink-2)}
  .dfc .ml-p b{color:var(--accent);font-family:var(--f-display);font-size:1.0625rem}
  .dfc .ml-go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#1B1020;border:2px solid var(--edge)}
}
@media (min-width:1024px){
  .dfc .look-top{position:static}
  .dfc .look-top .why-box{flex:1}
  .dfc .look-body>.card.pieces{flex:1;display:flex;flex-direction:column}
  .dfc .look-body>.card.pieces>ul{flex:1;display:flex;flex-direction:column}
  .dfc .look-body>.card.pieces .row{flex:1}
  .dfc .look-body>.suggest .card.pieces{display:block}
  /* attributes: the CTA is a solid footer along the bottom of the page grid. It sticks to the viewport
     while the controls scroll under it, and rests in the flow (so nothing is ever hidden) at the end. */
  .dfc .scr-attrs.has-vis .scr-wrap{padding-bottom:0}
  .dfc .scr-attrs.has-vis .bar{grid-column:1/-1;grid-row:7;align-self:end;position:sticky;bottom:0;z-index:7;width:auto;margin:12px -32px 0;padding:0 32px;max-width:none;background:none;border:0;box-shadow:none}
  .dfc .scr-attrs.has-vis .bar::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:0;bottom:0;background:var(--bg);border-top:2px solid var(--edge);box-shadow:var(--sh-3)}
  .dfc .scr-attrs.has-vis .bar-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:center;max-width:none;padding:14px 0 16px}
  .dfc .scr-attrs .bar-in .attr-alert{grid-column:2;grid-row:1}
  .dfc .scr-attrs .bar-in .summary{grid-column:1;grid-row:2;text-align:left;font-size:1rem}
  .dfc .scr-attrs .bar-in .btn{grid-column:2;grid-row:2}
  .dfc .scr-attrs .summary .hint-btn{width:auto;justify-self:start}
}

/* ===== round 5: action hierarchy, compact phone bar, step labels, pick, steal results, halos ===== */

/* buy links are secondary: outlined pill, marigold only on hover / press. The heavy elements are the total and Share / Save. */
.dfc .row a.go{background:transparent;color:var(--ink);border:2px solid var(--edge);box-shadow:none;min-height:44px;padding:0 14px;font:700 .9375rem/1 var(--f-ui)}
.dfc .row a.go svg{color:var(--accent);transition:color var(--d-1) var(--ease)}
.dfc .row a.go:active{background:var(--gold);color:#1B1020;box-shadow:none}
.dfc .row a.go:active svg{color:#1B1020}
@media (hover:hover) and (pointer:fine){
  .dfc .row a.go:hover{background:var(--gold);color:#1B1020;transform:none;box-shadow:var(--sh-1)}
  .dfc .row a.go:hover svg{color:#1B1020}
}

/* garments that cannot reach 3:1 on their backdrop get a die-cut outline */
.dfc svg.halo,.dfc .lay.halo svg{filter:drop-shadow(1.4px 0 0 var(--halo,#FFF3E6)) drop-shadow(-1.4px 0 0 var(--halo,#FFF3E6)) drop-shadow(0 1.4px 0 var(--halo,#FFF3E6)) drop-shadow(0 -1.4px 0 var(--halo,#FFF3E6))}

/* readable secondary text */
.dfc .scr .micro{font-size:.9375rem}
.dfc .scr .muted,.dfc .reading dd.is-unset{color:var(--ink-2)}
.dfc .dial-t{font:700 13px var(--f-ui)}
.dfc .scr .tag,.dfc .row .tag,.dfc .match-tag{white-space:nowrap}

/* step pill: one component everywhere ("2/3 · Check" / "Step 2 of 3 · Check") */
@media (max-width:359px){.dfc .steppill .segs{display:none}}

/* pick: the hint lives in the sub-head; the loading screen shows what is being styled */
.dfc .scr-lede .hint-hi{font:600 1.125rem/1 var(--f-desi);color:var(--peacock-ink);white-space:nowrap}
.dfc .styling{display:flex;align-items:center;gap:12px;margin-top:16px;max-width:100%;padding:10px 18px 10px 10px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.dfc .styling .tile{width:52px;height:52px}
.dfc .styling p{display:flex;flex-direction:column;gap:2px;min-width:0}
.dfc .styling-k{display:inline-flex;align-items:center;gap:8px;font:700 .9375rem/1.2 var(--f-ui);color:var(--ink-2)}
.dfc .styling-k .spin{width:14px;height:14px;border-width:2px;color:var(--accent)}
.dfc .styling b{font:800 1.0625rem/1.2 var(--f-display);overflow-wrap:anywhere}

/* attributes: empty arch while nothing is chosen */
.dfc .attr-arch.is-empty{background-image:none;border-style:dashed;box-shadow:none}
.dfc .attr-arch.is-empty .arch-fig{color:var(--ink-2);filter:none}
.dfc .attr-arch.is-empty .spot{display:none}

/* zero-result catalogue: compact, one primary action */
.dfc .empty.card{gap:12px;padding:20px 18px 22px}
.dfc .empty.card .arch-sm{--aw:116px;aspect-ratio:116/128;margin:0}
.dfc .empty.card .arch-icon svg{width:64px;height:56px}
.dfc .empty.card .disp.h1{font-size:clamp(1.75rem,8vw,2.5rem)}
.dfc .empty.card .empty-btns{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-top:6px;gap:4px}
@media (min-width:640px){.dfc .empty.card .arch-sm{--aw:150px;aspect-ratio:150/166}}
@media (min-width:1024px){.dfc .scr-steal .arch-up.is-small{--aw:250px}
  .dfc .scr-steal.ph-done .scr-vis{top:16px;gap:14px}
  .dfc .scr-steal.ph-done .vis-total{padding:12px 20px 14px}
  .dfc .scr-steal.ph-done .vis-total .price{font-size:2.25rem}
  .dfc .vs-btn{min-height:44px}}

/* desktop "what you'll get" cards: the tag never wraps */
.dfc .sp-tag{white-space:nowrap}

/* steal results, desktop: jump list under the photo */
.dfc .vis-sum{display:none}
@media (min-width:1024px){
  .dfc .scr-steal.ph-done .vis-sum{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
  .dfc .vis-sum ul{display:flex;flex-direction:column;gap:6px}
  .dfc .vs-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 12px 0 14px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:var(--r-md);box-shadow:var(--sh-1);font:700 .9375rem/1.2 var(--f-ui);text-align:left;cursor:pointer;transition:background var(--d-1) var(--ease)}
  .dfc .vs-btn:hover{background:var(--gold-tint)}
  .dfc .vs-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dfc .vs-btn .tag{flex:none}
}

/* labels with a short phone form */
.dfc .lb-s{display:none}
@media (max-width:639px){.dfc .lb-l{display:none}.dfc .lb-s{display:inline}}

/* phones and tablets: a compact action bar (one primary + one secondary side by side), the trust line moves under the
   arch, and the arch grows to fill whatever height is left, so no gap opens above the bar */
.dfc .vis-fill{display:contents}
.dfc .trust-vis{display:none}
@media (max-width:1023px){
  .dfc .trust-bar:not(.keep){display:none}
  .dfc .trust-vis{display:flex;font-size:.9375rem;color:var(--ink-2);line-height:1.3}
  .dfc .bar-in.bar-row{flex-direction:row;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dfc .bar-row .btn{flex:1 1 0;min-width:0;min-height:52px;padding:0 12px;font-size:1rem}
  .dfc .bar-row .btn-gold{flex:1.45 1 0;font-size:1.0625rem}
  .dfc .bar-row .trust{flex:1 0 100%}
  .dfc .scr-upload .scr-body,.dfc .scr-steal:not(.ph-done) .scr-body{flex:0 0 auto;padding:0}
  .dfc .scr-upload .scr-vis,.dfc .scr-steal:not(.ph-done) .scr-vis{flex:1 1 auto;gap:10px;padding-top:12px;padding-bottom:12px}
  .dfc .scr-upload .vis-fill,.dfc .scr-steal:not(.ph-done) .vis-fill{display:grid;place-items:center;flex:1 1 0;align-self:stretch;min-height:200px;container-type:size}
  .dfc .scr-upload .vis-fill .arch-up,.dfc .scr-steal:not(.ph-done) .vis-fill .arch-up{--aw:min(340px,100cqw);--arch-r:calc(var(--aw) / 2);width:var(--aw);height:min(100cqh,calc(var(--aw) * 1.3));aspect-ratio:auto}
}
@media (max-width:359px){
  .dfc .apptop-in{gap:8px;padding:0 12px}
  .dfc .apptop .wordmark{font-size:1.05rem}
  .dfc .steppill{padding:0 10px}
  .dfc .apptop .btn-sm{padding:0 12px}
  .dfc .more-toggle{font-size:.9375rem;padding:0 14px}
  .dfc .bar-row .btn{padding:0 8px;gap:6px}
  .dfc .scr-lede{font-size:1rem}
}

/* ===== landing, privacy and 404 responsive ===== */
@media (min-width:640px){
  .dfc .narrow-only{display:none!important}
  .dfc .wide-only{display:inline-flex!important}
  .dfc .hero{padding:48px 0 56px}
  .dfc .hero-ctas{flex-direction:row;flex-wrap:wrap;width:auto}
  .dfc .hero-ctas .btn{min-width:0}
  .dfc .hero-art{min-height:480px}
  .dfc .home-sec{padding-top:72px}
  .dfc .idea{padding-top:40px}
  .dfc .idea-card{padding:56px 44px 48px}
  .dfc .how{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .dfc .occ{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .dfc .otile{min-height:176px;padding:60px 18px 18px}
  .dfc .otile .dev{left:18px;font-size:1.125rem}
  .dfc .otile b{font-size:1.625rem}
  .dfc .disclose{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:24px 28px}
  .dfc .foot-in{padding-top:48px;padding-bottom:52px}
  .dfc .doc-hero{padding:64px 0 64px}
  .dfc .doc-main{padding-top:56px;padding-bottom:88px}
  .dfc .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .dfc .p-wide{grid-column:1/-1}
  .dfc .pcard{padding:26px 28px 30px}
  .dfc .pfour{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (min-width:1024px){
  .dfc .site-head-in{min-height:76px}
  .dfc .wordmark{font-size:1.65rem}
  .dfc .hero{padding:72px 0 88px}
  .dfc .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
  .dfc .hero-h1{font-size:clamp(4.5rem,7.4vw,6.75rem);margin-top:26px}
  .dfc .hero-copy .hindi{font-size:1.75rem}
  .dfc .hero-lede{font-size:1.25rem;max-width:30ch}
  .dfc .hero-art{min-height:640px;padding:120px 24px 48px}
  .dfc .art-blob{inset:56px 8px 12px}
  .dfc .ghostcard{top:36px;left:30px;width:280px}
  .dfc .burst{width:120px;height:120px;top:6px;right:22px}
  .dfc .st-total{left:10px;bottom:22px}
  .dfc .lookdeck{width:392px}
  .dfc .lookcard{padding:24px}
  .dfc .lc-sw i{height:96px}
  .dfc .lc-occ{font-size:1.4rem}
  .dfc .home-sec{padding-top:96px}
  .dfc .idea{padding-top:56px}
  .dfc .idea-card{padding:64px 64px 64px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:48px;align-items:center}
  .dfc .idea-viz{order:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 16px;border:2px dashed rgba(255,243,230,.4);border-radius:var(--r-lg);background:rgba(255,255,255,.04)}
  .dfc .idea-viz .sticker{font-size:2.125rem;min-height:64px;padding:6px 32px 0;box-shadow:4px 4px 0 #000}
  .dfc .idea-viz .sticker:nth-child(2){margin-left:48px}
  .dfc .idea-viz .sticker:nth-child(3){margin-right:40px}
  .dfc .idea-line{max-width:20ch}

  .dfc .how li{padding:30px 28px 32px;min-height:260px}
  .dfc .how h3{font-size:1.75rem}
  .dfc .otile{min-height:200px;padding:64px 22px 22px}
  .dfc .otile .dev{left:22px;font-size:1.25rem}
  .dfc .otile b{font-size:1.75rem}
  .dfc .otile .hi{font-size:1.125rem}
  .dfc .disclose{margin:80px 0 96px}
  .dfc .foot-in{grid-template-columns:1.3fr 1fr;gap:48px;padding-top:56px;padding-bottom:60px}
  .dfc .foot-nav{justify-content:flex-end}
  .dfc .pdoc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
  .dfc .ptoc{display:block;position:sticky;top:96px;padding:18px 18px 16px;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
  .dfc .ptoc .label{color:var(--accent);margin-bottom:8px}
  .dfc .ptoc ul{display:flex;flex-direction:column;gap:2px}
  .dfc .ptoc a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm);color:var(--ink);font-weight:700;font-size:1rem;text-decoration:none}
  .dfc .ptoc a:hover{background:var(--gold-tint)}
  .dfc .pbul{display:flex;flex-direction:column;gap:12px}
  .dfc .pbul li,.dfc .pdet,.dfc .pfoot{max-width:65ch}
  .dfc .pcard{scroll-margin-top:96px}
  .dfc .nf-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:72px;text-align:left;padding-top:72px;padding-bottom:104px}
  .dfc .nf-art{grid-column:2;grid-row:1}
  .dfc .nf-copy{grid-column:1;grid-row:1;align-items:flex-start;margin-top:0}
  .dfc .nf-copy .hero-lede{font-size:1.25rem;max-width:32ch}
  .dfc .nf-cta{flex-direction:row;flex-wrap:wrap;max-width:none;width:auto}
  .dfc .nf-chips{justify-content:flex-start}
  .dfc .nf-panel{width:min(470px,100%);padding:56px 40px 60px;transform:rotate(2deg)}
  .dfc .nf-arch{width:min(300px,100%);--arch-r:150px}
}
/* landing hero at laptop heights: the look card stays whole above the fold */
@media (min-width:1024px) and (max-height:900px){
  .dfc .hero{padding:36px 0 48px}
  .dfc .hero-h1{margin-top:20px}
  .dfc .hero-art{min-height:0;padding:68px 24px 40px}
  .dfc .art-blob{inset:36px 8px 12px}
  .dfc .ghostcard{top:30px}
  .dfc .burst{width:100px;height:100px;top:0;right:22px}
  .dfc .lookdeck{margin-top:0}
  .dfc .lookcard{padding:20px 24px}
  .dfc .lc-sw{margin-top:12px}
  .dfc .lc-sw i{height:52px}
  .dfc .lc-head{padding-bottom:10px}
  .dfc .lc-list li{min-height:36px}
  .dfc .st-total{bottom:14px}
}
@media (min-width:1024px) and (max-height:760px){
  .dfc .hero{padding-top:24px}
  .dfc .hero-h1{font-size:clamp(4rem,6.4vw,5.5rem)}
  .dfc .hero-art{padding-top:56px;padding-bottom:30px}
  .dfc .lc-sw i{height:36px}
  .dfc .lc-list li{min-height:32px}
  .dfc .lc-why{display:none}
  .dfc .lc-total{margin-top:4px;padding-top:8px}
}

/* ===== round 6: final polish ===== */

/* the inline Privacy link gets a 44px hit area without moving the line (negative block margin) */
.dfc .trust a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;margin:-12px -6px;text-decoration:underline;text-underline-offset:3px}
.dfc .trust-inline{justify-content:center;text-align:center;margin-top:4px}

/* "Cream kurta · From your photo" */
.dfc .meta.meta-sep{gap:0 6px}

/* pick tiles: the picture stays clear; a compact "Style this" pill sits in its own row under the title and meta */
.dfc .itemcard .pic .sw-mini{top:10px;bottom:auto}
.dfc .itemcard .ic-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:8px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);border:2px solid var(--ink);font:700 .9375rem/1 var(--f-ui);white-space:nowrap;transition:background var(--d-1) var(--ease),color var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.dfc .itemcard .ic-go svg{width:16px;height:16px;flex:none;filter:none;transition:transform var(--d-1) var(--ease)}
.dfc .itemcard:active .pic{box-shadow:var(--sh-1)}
.dfc .itemcard:active .ic-go{background:var(--gold);color:#1B1020;border-color:var(--edge-hard)}
@media (hover:hover) and (pointer:fine){
  .dfc .itemcard:hover .ic-go{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
  .dfc .itemcard:hover .ic-go svg{transform:translateX(3px)}
}

/* first reveal of the looks: rubber stamp on the arch corner, then a little paper confetti */
.dfc .lay-wrap{position:relative;width:fit-content;margin:0 auto}
.dfc .ho-stamp{position:absolute;z-index:5;top:-10px;right:-10px;padding:6px 14px 3px;border:3px solid currentColor;border-radius:12px;background:var(--surface);color:var(--accent);box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3.5px currentColor;font:800 1.375rem/1 var(--f-desi);letter-spacing:.01em;white-space:nowrap;pointer-events:none;transform:rotate(9deg);animation:stamp-in 450ms var(--ease) 560ms both}
@keyframes stamp-in{
  0%{opacity:0;transform:scale(1.6) rotate(-12deg)}
  55%{opacity:1;transform:scale(.94) rotate(11deg)}
  100%{opacity:1;transform:scale(1) rotate(9deg)}
}
.dfc .paper{position:absolute;left:0;right:0;top:0;height:0;z-index:6;pointer-events:none}
.dfc .paper i{position:absolute;left:var(--l);top:0;width:9px;height:13px;border-radius:2px;background:var(--c);opacity:0;animation:paper-fall 1050ms cubic-bezier(.3,.1,.5,1) calc(900ms + var(--dl)) both}
.dfc .paper i:nth-child(3n){width:11px;height:7px}
@keyframes paper-fall{
  0%{opacity:0;transform:translate(0,-8px) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}
}
@media (prefers-reduced-motion:reduce){.dfc .ho-stamp{animation:none}.dfc .paper{display:none}}

/* at most two tilted elements per screen: the looks screen keeps the price tag and the stamp */
.dfc .look-meta .sticker{transform:none}

@media (min-width:1024px){
  /* looks: Share / Save sit right under the title, so they are in the first viewport; the arch is a little smaller */
  .dfc .look{--lw:clamp(300px,27vw,340px);gap:40px}
  .dfc .look-top{gap:10px}
  .dfc .look-top .look-actions{order:2}
  .dfc .look-top .lay-frame{order:3}
  .dfc .look-top .why-box{order:4}
  .dfc .look-actions .btn{min-height:48px}
  /* upload / steal idle: the two buttons sit side by side so "Take a photo" is well above the fold; tips in two columns */
  .dfc .scr-upload .bar-in.bar-row,.dfc .scr-steal:not(.ph-done) .bar-in.bar-row{flex-direction:row;flex-wrap:wrap;gap:10px;padding-top:14px}
  .dfc .scr-upload .bar-row .btn,.dfc .scr-steal .bar-row .btn{flex:1 1 0;min-width:0}
  .dfc .scr-upload .bar-row .btn-gold,.dfc .scr-steal .bar-row .btn-gold{flex:1.3 1 0}
  .dfc .scr-upload .bar-row .trust,.dfc .scr-steal .bar-row .trust{flex:1 0 100%}
  .dfc .sp-cards{gap:10px}
  .dfc .sp-card{min-height:92px;padding:10px 12px 8px}
  .dfc .side-panel{gap:12px;padding:14px 18px}
  .dfc .sp-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}
  .dfc .sp-tips li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;align-items:start;min-height:0;padding:0;line-height:1.3}
  .dfc .sp-tips li .sp-ic{grid-row:1/3}
  .dfc .sp-tips li .sp-d{grid-column:2;font-size:.9375rem}
  .dfc .sp-tips-t{margin-bottom:-6px}
}

/* attributes on phones: the headline says it; the helper line waits for wider screens so the chips reach the first viewport */
@media (max-width:639px){.dfc .scr-lede.lede-opt{display:none}}


/* ===== round 7a: overlay bars, footer on flow screens, step error marker, short desktops ===== */

/* flow screens have no site footer under the sticky bar */
body[data-screen=upload] .site-foot,body[data-screen=attributes] .site-foot,body[data-screen=steal] .site-foot{display:none}

/* sticky bars read as an intentional overlay: cream fade above the edge, top border and shadow already on the bar */
.dfc .scr .bar::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;pointer-events:none;background:linear-gradient(to top,var(--bg),transparent)}
.dfc .scr .scr-body{padding-bottom:32px}
.dfc .scr-wrap>.scr-body:last-child{padding-bottom:40px}

/* step pill: error marker (upload failed) */
.dfc .steppill.is-err{background:var(--err-tint);color:var(--err)}
.dfc .steppill .segs i.bad{background:var(--accent-solid);color:#fff;font:800 9px/7px var(--f-ui);display:grid;place-items:center;border-color:var(--edge)}

/* short desktops: both upload CTAs stay above the fold */
@media (min-width:1024px) and (max-height:819px){
  .dfc .scr-upload .arch-up,.dfc .scr-steal .arch-up,.dfc .scr-upload.ph-idle .arch-up,.dfc .scr-steal.ph-idle .arch-up{--aw:min(380px,52vh)}
  .dfc .scr-upload .scr-h1,.dfc .scr-steal .scr-h1{font-size:clamp(2.25rem,3.6vw,2.75rem);margin-top:10px}
  .dfc .scr-upload .scr-lede,.dfc .scr-steal .scr-lede{margin-top:6px}
  .dfc .scr-upload .side-panel,.dfc .scr-steal .side-panel{gap:8px;padding:10px 16px}
  .dfc .scr-upload .sp-card,.dfc .scr-steal .sp-card{min-height:0;padding:8px 12px 6px}
  .dfc .scr-upload .sp-d,.dfc .scr-steal .sp-d{display:none}
  .dfc .scr-upload .sp-tips-t,.dfc .scr-steal .sp-tips-t{margin-bottom:-4px}
  .dfc .scr-upload .scr-vis,.dfc .scr-steal .scr-vis{padding-top:4px}
  .dfc .scr-upload .bar-in.bar-row,.dfc .scr-steal:not(.ph-done) .bar-in.bar-row{padding-top:10px;padding-bottom:10px}
}

.dfc .step-host{display:inline-flex}
/* desktop pick: tighter head so the grid starts early */
@media (min-width:1024px){
  .dfc .scr-pick .scr-h1{font-size:clamp(2.5rem,4.2vw,3.25rem)}
  .dfc .scr-pick .scr-body{padding-top:8px}
}

/* very narrow phones: the shared top bar (home, wordmark, pill) must fit 320px on every page */
@media (max-width:339px){
  .dfc .apptop-in{gap:6px;padding:0 10px}
  .dfc .apptop .btn-sm{padding:0 10px;font-size:.9375rem}
}

/* ===== round 8a: one read screen, step ticks, desktop CTA card, phone buy pill, steal actions, swatch rings ===== */

/* step pill: finished = tick, current = filled, upcoming = outlined (never colour alone) */
.dfc .steppill .segs{gap:4px}
.dfc .steppill .segs i{width:20px;height:20px;border-radius:50%;border:2px solid var(--edge);background:transparent;display:grid;place-items:center;font:normal 0/0 var(--f-ui);color:var(--ink);position:relative}
.dfc .steppill .segs i.cur{background:var(--accent-solid)}
.dfc .steppill .segs i.done{background:var(--ink);color:var(--bg)}
.dfc .steppill .segs i.done::after{content:"";width:5px;height:9px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.dfc .steppill .segs i.bad{width:20px;height:20px;background:var(--accent-solid);color:#fff;font:800 13px/1 var(--f-ui)}
@media (max-width:359px){
  .dfc .steppill{gap:6px;padding:0 8px}
  .dfc .steppill .segs{display:flex;gap:3px}
  .dfc .steppill .segs i,.dfc .steppill .segs i.bad{width:16px;height:16px}
  .dfc .steppill .segs i.done::after{width:4px;height:7px;border-width:0 2px 2px 0}
  .dfc .steppill .st-name{display:none}
}

/* upload read -> attributes: the "Pakad liya" moment */
.dfc .attr-arch{position:relative}
.dfc .attr-arch .okbadge{top:6%;right:4%;width:40px;height:40px;font-size:1.375rem;animation:okpop var(--d-3) var(--ease) .25s both,okfade 400ms ease 3.2s forwards}
@keyframes okfade{to{opacity:0;transform:scale(.6) rotate(8deg)}}
.dfc .attr-arch.is-fresh{animation:pop var(--d-2) var(--ease) both}
@media (prefers-reduced-motion:reduce){.dfc .attr-arch .okbadge{animation:none}.dfc .attr-arch.is-fresh{animation:none}}
.dfc .reuse-link{align-self:flex-start;padding-left:0}

/* upload drop card stays inside the arch at every size */
.dfc .dropzone{padding:12px}
.dfc .dz-card{box-sizing:border-box;max-width:calc(100% - 32px);padding:16px 14px}
.dfc .dz-card .dz-h{overflow-wrap:anywhere}
@media (max-width:639px){
  .dfc .scr-upload .vis-fill,.dfc .scr-steal:not(.ph-done) .vis-fill{min-height:280px}
}

/* dark swatches get a light ring in dark mode (colour chips, attributes grid, catalogue pips) */
:root{--swring:0 0 0 0 transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--swring:0 0 0 2px rgba(255,243,230,.7)}}
:root[data-theme="dark"]{--swring:0 0 0 2px rgba(255,243,230,.7)}
.dfc .sw .dot,.dfc .sw-mini i,.dfc .mini-dot{box-shadow:inset 0 0 0 1.5px rgba(27,16,32,.5),var(--swring)}
.dfc .sw-mini i{border-radius:50%}

/* desktop idle photo screens: the two-column composition is centred in the viewport height */
@media (min-width:1024px){
  .dfc .scr-upload,.dfc .scr-steal:not(.ph-done){min-height:100vh;min-height:100dvh}
  .dfc .scr-upload .scr-wrap,.dfc .scr-steal:not(.ph-done) .scr-wrap{flex:1;grid-template-rows:auto auto auto;align-content:center;padding-bottom:40px}
}

/* looks: one label strip under the look title; the extra sticker only on wider screens */
@media (max-width:639px){
  .dfc .look-meta .sticker{display:none}
  .dfc .look-meta{gap:0}
}
.dfc .look-meta{margin-top:-4px}

/* phones: "₹10,095 to buy · See pieces" pill pinned to the bottom; fades out once the pieces are on screen */
.dfc .buy-pill{display:none}
@media (max-width:639px){
  .dfc .buy-pill{display:inline-flex;align-items:center;gap:8px;position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9;min-height:52px;max-width:calc(100vw - 24px);padding:0 20px;background:var(--ink);color:var(--bg);border:2px solid var(--edge-hard,var(--ink));border-radius:var(--r-pill);box-shadow:var(--sh-2);font:700 1rem/1 var(--f-ui);white-space:nowrap;cursor:pointer;transform:translateX(-50%);transition:opacity 200ms ease,transform 200ms var(--ease),visibility 0s}
  .dfc .buy-pill .bp-p{font:800 1.125rem/1 var(--f-display);letter-spacing:-.01em}
  .dfc .buy-pill .bp-go::before{content:"·";margin-right:8px;opacity:.7}
  .dfc .buy-pill .bp-go{display:inline-flex;gap:4px;color:var(--bg)}
  .dfc .buy-pill:active{transform:translateX(-50%) translate(2px,2px);box-shadow:var(--sh-1)}
  .dfc .buy-pill.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:opacity 200ms ease,transform 200ms var(--ease),visibility 0s 200ms}
}
@media (prefers-reduced-motion:reduce){.dfc .buy-pill,.dfc .buy-pill.is-hidden{transition:none}}

/* steal results: both bar actions are secondary (buying is the job) */
.dfc .scr-steal.ph-done .bar-row .btn{flex:1 1 0}

/* attributes bar, phones: opaque from its top edge (the fade sits above it); the not-ready state is one row, hint + button */
.dfc .scr .bar{background-color:var(--bg)}
@media (max-width:1023px){
  .dfc .scr-attrs .bar-in.is-hint{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dfc .scr-attrs .bar-in.is-hint .attr-alert{flex:1 0 100%}
  .dfc .scr-attrs .bar-in.is-hint .summary{flex:1 1 0;min-width:0}
  .dfc .scr-attrs .bar-in.is-hint .summary .hint-btn{justify-content:flex-start;min-height:52px;padding:0 4px;background:transparent;border:0;border-radius:0;color:var(--accent-ink);font-size:.9375rem;line-height:1.25;text-align:left;text-decoration:underline;text-underline-offset:3px;gap:8px}
  .dfc .scr-attrs .bar-in.is-hint .summary .hint-btn svg{flex:none}
  .dfc .scr-attrs .bar-in.is-hint .btn{flex:0 0 auto;width:auto;min-width:0;padding:0 18px}
}

/* attributes, desktop: the CTA is a solid card at the foot of the right column, sticky inside that column */
@media (min-width:1024px){
  .dfc .scr-attrs.has-vis .scr-wrap{padding-bottom:32px}
  .dfc .scr-attrs.has-vis .bar{grid-column:2;grid-row:2/7;align-self:end;position:sticky;bottom:16px;z-index:7;width:auto;margin:0;padding:0;max-width:none;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .dfc .scr-attrs.has-vis .bar::before{display:none}
  .dfc .scr-attrs.has-vis .bar-in{display:flex;flex-direction:column;gap:8px;max-width:none;padding:12px 14px}
  .dfc .scr-attrs .bar-in .attr-alert,.dfc .scr-attrs .bar-in .summary,.dfc .scr-attrs .bar-in .btn{grid-column:auto;grid-row:auto}
  .dfc .scr-attrs .bar-in .summary:not(.is-hint){display:none}
  .dfc .scr-attrs .bar-in .summary .hint-btn{width:100%;justify-self:stretch;min-height:44px}
  .dfc .scr-attrs .sec-occ{margin-bottom:104px}
}


/* ===== round 9: shared stack for toasts and the offline notice, buy pill on demand, attributes CTA under the preview,
   one focus-ring language, 15px meta text ===== */

/* toasts + offline notice: one bottom-centre stack; the phone buy pill steps aside while either is showing */
.dfc.dock-busy .buy-pill{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.dfc .offline,.dfc .toasts .toast{animation:none}}

/* phones: room under the last content so the buy pill never permanently covers it */
@media (max-width:639px){
  .dfc .scr-looks{padding-bottom:88px}
  .dfc .buy-pill{transition:opacity 160ms ease,transform 160ms var(--ease),visibility 0s}
}

/* meta text at 15px: step pill, "Look 1 of 4 · Festive", mini tags and swatch captions */
.dfc .steppill,.dfc .scr .steppill{font-size:.9375rem}
.dfc .look-count,.dfc .sw-mini,.dfc .itemcard .pic .sw-mini,.dfc .ml-k,.dfc .sp-k{font-size:.9375rem}
.dfc .scr .tag{font-size:.9375rem}
@media (max-width:359px){.dfc .steppill{font-size:.875rem}.dfc .look-count{font-size:.875rem}}

/* attributes, not ready: a small secondary pill button that scrolls to the missing field, beside a clearly disabled CTA */
.dfc .summary .hint-btn{background:var(--surface);color:var(--ink);border:2px solid var(--edge);box-shadow:var(--sh-1);min-height:44px;font:700 .9375rem/1.1 var(--f-ui)}
.dfc .summary .hint-btn svg{color:var(--accent);flex:none}
.dfc .summary .hint-btn:hover{background:var(--gold-tint)}
.dfc .summary .hint-btn:active{transform:translate(1px,1px);box-shadow:none}
.dfc .scr-attrs .bar .btn[disabled]{background:var(--bg-sunk);color:var(--ink-2);border:2px dashed var(--ink-2);box-shadow:none;opacity:1;cursor:not-allowed}
.dfc .scr-attrs .bar .btn[disabled] svg{opacity:.7}
@media (max-width:1023px){
  .dfc .scr-attrs .bar-in.is-hint .summary .hint-btn{justify-content:center;min-height:48px;padding:0 12px;white-space:nowrap;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-pill);box-shadow:var(--sh-1);color:var(--ink);font-size:.9375rem;text-decoration:none;gap:6px;width:100%}
  .dfc .scr-attrs .bar-in.is-hint .summary{flex:1 1 auto}
  .dfc .scr-attrs .bar-in.is-hint .btn{padding:0 12px;gap:6px}
}

/* focus rings follow the corner radius: catalogue cards ring the picture, tiles get one 3px ring + 3px gap */
.dfc .itemcard{border-radius:var(--r-lg)}
.dfc .itemcard:focus-visible{outline:none;box-shadow:none}
.dfc .itemcard:focus-visible .pic{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px var(--halo),var(--sh-2)}

/* desktop looks: the left column (title, actions, flat-lay) sticks while the right column
   (why this works, pieces, total) scrolls; Why this works leads the right column */
@media (min-width:1024px){
  .dfc .look{align-items:start}
  .dfc .look-top{position:sticky;top:16px}
  .dfc .look-body>.card.pieces{flex:none;display:block}
  .dfc .look-body>.card.pieces>ul,.dfc .look-body>.card.pieces .row{flex:none}
  .dfc .look-body>.card.pieces>ul{display:block}
  .dfc .look-top .why-box{flex:none}
  .dfc .why-box{padding:14px 18px 16px}
  .dfc .why-box .why{font-size:1rem;line-height:1.5}
}

/* attributes, desktop: the sticky left column is the preview card with the CTA directly under it, compact enough that
   both fit in the first viewport (1280x720 and up). Nothing sticky ever sits over the colour grid. */
@media (min-width:1024px){
  .dfc .scr-attrs.has-vis .scr-wrap{padding-bottom:48px}
  .dfc .scr-attrs.has-vis .scr-head{grid-column:2;grid-row:1}
  .dfc .scr-attrs.has-vis .scr-vis{position:sticky;top:16px;grid-column:1;grid-row:1/span 6;align-self:start;padding:0;gap:14px;justify-content:flex-start;align-items:stretch;background:none;border:0;border-radius:0;box-shadow:none}
  .dfc .scr-attrs .attr-vis{max-width:none;width:100%;gap:12px;padding:16px 20px 18px;background-color:var(--gold-tint);background-image:radial-gradient(circle,var(--pat) 2.4px,transparent 2.9px),radial-gradient(circle,var(--pat) 1.4px,transparent 1.9px);background-size:28px 28px;background-position:0 0,14px 14px;border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
  .dfc .scr-attrs .fig{width:100%;margin:0 auto}
  .dfc .scr-attrs .attr-arch{--aw:clamp(150px,calc(100vh - 500px),250px);width:var(--aw);margin:0 auto}
  .dfc .scr-attrs .fig-cap{font-size:1.5rem}
  .dfc .scr-attrs .reading{gap:8px}
  .dfc .scr-attrs .reading>div{padding:4px 12px}
  .dfc .scr-attrs .sec-type{grid-row:2}
  .dfc .scr-attrs .sec-colour{grid-row:3}
  .dfc .scr-attrs .sec-dressy{grid-column:2;grid-row:4;align-self:start}
  .dfc .scr-attrs .sec-style{grid-row:5}
  .dfc .scr-attrs .sec-occ{grid-row:6;margin-bottom:0}
  .dfc .scr-attrs .dial-box{display:block}
  /* the CTA card (moved under the preview by the script) */
  .dfc .scr-attrs .scr-vis .bar,.dfc .scr-attrs.has-vis .scr-vis .bar{position:static;grid-column:auto;grid-row:auto;width:100%;max-width:none;margin:0;padding:0;background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);align-self:auto}
  .dfc .scr-attrs .scr-vis .bar::before{display:none}
  .dfc .scr-attrs .scr-vis .bar-in{display:flex;flex-direction:column;gap:8px;max-width:none;padding:12px 14px}
}

/* ===== round 10: clear catalogue tiles, buying-path order on phones, legible disabled CTA, solid meta text,
   one step wording, one sticker per look, plum dark panels, firmer press ===== */

/* catalogue tile art: the fill is its own layer so dark mode can mute it without touching the garment */
.dfc .itemcard .pic-in{background:none!important}
.dfc .itemcard .pic-in::before{content:"";position:absolute;inset:0;background:var(--tb,var(--bg-sunk))}
.dfc .itemcard .pic-in>svg{position:relative}
.dfc .itemcard .pic-in{padding:32px 0 10px}
.dfc .itemcard .pic .pic-in svg{width:auto;height:100%;max-width:62%;aspect-ratio:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dfc .itemcard .pic-in::before{filter:saturate(.85) brightness(.92)}}
[data-theme="dark"] .dfc .itemcard .pic-in::before{filter:saturate(.85) brightness(.92)}

/* phone looks: arch, Share / Save, the pieces with Buy links, the total, then why it works */
@media (max-width:639px){
  .dfc .look-body .why-box{order:9}
  /* no dead cream band before the footer: the buy pill hides by the end of the page, so it needs no reserved room */
  .dfc .scr-looks{padding-bottom:0}
  .dfc .scr-looks .scr-wrap>.scr-body:last-child{padding-bottom:16px}
  .dfc .scr-looks .try-other{margin-bottom:0}
}

/* disabled "Show my looks": solid, legible, clearly not pressable (lock instead of arrow) */
.dfc .scr-attrs .bar .btn[disabled]{background:var(--bg-sunk);color:var(--ink-2);border:2px dashed var(--ink-2);box-shadow:none;opacity:1;cursor:not-allowed}
.dfc .scr-attrs .bar .btn[disabled] svg{opacity:1}
.dfc .btn .ic-lock{display:none}
.dfc .btn[disabled] .ic-lock{display:block}
.dfc .btn[disabled] .ic-next{display:none}
@media (max-width:1023px){
  /* not ready: hint pill + disabled button on ONE row (<= 80px), also at 320 */
  .dfc .scr-attrs .bar-in.is-hint{flex-wrap:nowrap}
  .dfc .scr-attrs .bar-in.is-hint .summary{flex:1 1 0;min-width:0}
  .dfc .scr-attrs .bar-in.is-hint .summary .hint-btn{white-space:normal;padding:0 10px;line-height:1.1;gap:4px;min-height:52px}
  .dfc .scr-attrs .bar-in.is-hint .btn{flex:0 0 auto;padding:0 12px;min-height:52px;font-size:1rem;gap:6px}
}
@media (max-width:359px){
  .dfc .scr-attrs .bar-in.is-hint{gap:8px}
  .dfc .scr-attrs .bar-in.is-hint .summary .hint-btn{white-space:nowrap;padding:0 8px}
  .dfc .scr-attrs .bar-in.is-hint .btn{padding:0 10px;font-size:.9375rem}
}
.dfc .hint-s{display:none}
@media (max-width:359px){
  .dfc .hint-l{display:none}
  .dfc .hint-s{display:inline}
}

/* meta text reads solid: 15px, 500, ink-2 (price stays bold ink) */
.dfc .row .sub,.dfc .steal-head .sub,.dfc .meta,.dfc .ic-meta,.dfc .look-count,.dfc .meta .nw+.nw,.dfc .ic-meta .nw+.nw{font-size:.9375rem;font-weight:500;color:var(--ink-2)}
.dfc .row .sub b,.dfc .ic-meta .price,.dfc .meta .price{font-weight:700;color:var(--ink)}
.dfc .scr .tag.match-tag{font-size:.9375rem;font-weight:500}
.dfc .scr .tag.match-tag:not(.red){color:var(--ink-2)}
@media (max-width:359px){.dfc .look-count{font-size:.9375rem}}

/* step pill: "Step 2 of 3 · Check" everywhere; only under 360px "2 of 3 · Check". Segments need room: 440px and up. */
@media (max-width:439px){
  .dfc .steppill .segs{display:none}
  .dfc .apptop .wordmark{font-size:1.2rem}
}
@media (max-width:359px){
  .dfc .steppill .st-word{display:none}
  .dfc .apptop .wordmark{font-size:1.05rem}
}

/* stickers pop in a beat after the screen paints, so the very first frame never shows a half-faded one */
.dfc .pop-s{animation-delay:calc(var(--i,0) * 90ms + 220ms)}

/* attributes: "We guessed Festive — change it?" beside the Occasion heading */
.dfc .sec-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.dfc .guess-stk{white-space:normal;text-align:center;min-height:30px;padding:3px 12px 1px;font-size:1rem;line-height:1.15}

/* steal results on phones and tablets: the sticky Share / Another photo bar is the last thing on the page */
@media (max-width:1023px){body[data-screen=steal-done] .site-foot{display:none}}

/* empty catalogue: the nearby-occasion suggestion */
.dfc .empty-btns .try-near{width:100%}

/* dark: app panels are plum, not brown; unselected chip outlines are the cream line at ~55% (>= 3:1) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dfc .scr{--gold-tint:#2B1B36}
  :root:not([data-theme="light"]) .dfc .chip:not([aria-pressed="true"]){border-color:rgba(255,243,230,.55)}
}
[data-theme="dark"] .dfc .scr{--gold-tint:#2B1B36}
[data-theme="dark"] .dfc .chip:not([aria-pressed="true"]){border-color:rgba(255,243,230,.55)}

/* press and hover for the app's own controls: press sinks 3px with the shadow down to 1px in 90ms; hover lifts 2px */
.dfc :is(.sum-row,.flt-btn,.mini-look,.backbtn):active,.dfc .summary .hint-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge-hard);transition-duration:90ms}
@media (hover:hover) and (pointer:fine){
  .dfc :is(.sum-row,.flt-btn,.backbtn):hover,.dfc .summary .hint-btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--edge-hard)}
  .dfc :is(.sum-row,.flt-btn,.backbtn):active,.dfc .summary .hint-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge-hard)}
  .dfc .mini-look:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge-hard)}
}
.dfc .empty.card .empty-btns{gap:14px}

/* ===== round 11a: aligned catalogue CTAs, sticky filters, compact phone looks, solid meta text, inspo strip ===== */

/* catalogue tiles: a flex column per card; titles reserve two lines; "Style this" is pinned to the bottom, so every row's CTAs line up */
.dfc .cat-grid{align-items:stretch}
.dfc .itemcard{display:flex;flex-direction:column;align-items:stretch;height:100%;min-width:0}
.dfc .itemcard .pic{flex:none}
.dfc .itemcard .ic-text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;margin-top:8px}
.dfc .itemcard .ic-title{min-height:calc(2 * 1.25em);-webkit-line-clamp:2;line-clamp:2}
.dfc .itemcard .ic-meta{margin-bottom:8px}
.dfc .itemcard .ic-go{margin-top:auto}

/* catalogue filters on phones: the row (and the panel it opens) sticks to the top while the grid scrolls */
.dfc .flt-wrap{display:flex;flex-direction:column;gap:10px}
@media (max-width:639px){
  .dfc .scr-pick .flt-wrap{position:sticky;top:0;z-index:7;margin:0 -16px;padding:10px 16px;background:var(--bg);border-bottom:2px solid var(--line);max-height:100dvh;overflow-y:auto}
  .dfc .scr-pick .flt-wrap:has(.flt-panel.is-open){box-shadow:0 10px 24px -14px rgba(27,16,32,.4)}
}

/* meta text: 15px, 500, full ink (price stays bold) */
.dfc .row .sub,.dfc .steal-head .sub,.dfc .meta,.dfc .ic-meta,.dfc .look-count,.dfc .meta .nw+.nw,.dfc .ic-meta .nw+.nw,.dfc .sw-mini,.dfc .ml-p,.dfc .ml-k,.dfc .fig-sub,.dfc .scr .tag.match-tag:not(.red){font-size:.9375rem;font-weight:500;color:var(--ink)}
.dfc .row .sub b,.dfc .ic-meta .price,.dfc .meta .price,.dfc .ml-p b{font-weight:700;color:var(--ink)}
.dfc .ml-p b{color:var(--accent)}

/* step pill under 360px: "1/3 · Snap" keeps the step name */
.dfc .step-short{display:none}
@media (max-width:359px){
  .dfc .steppill .step-long{display:none}
  .dfc .steppill .step-short{display:inline}
}

/* share / copy feedback: the button keeps its width while the label changes */
.dfc [data-flash]{white-space:nowrap}

/* reveal: garments are already there (40%, 10px up) before they settle, so the arch is never blank */
@keyframes lay-in{
  0%{opacity:.4;transform:translateY(-10px) rotate(calc(var(--r,0deg) - 6deg)) scale(.96)}
  60%{opacity:1;transform:translateY(3px) rotate(calc(var(--r,0deg) - 1deg)) scale(1.02)}
  100%{opacity:1;transform:rotate(var(--r,0deg))}
}
.dfc .flatlay .lay{animation-duration:360ms;animation-delay:calc(var(--i,0) * 90ms)}
@media (prefers-reduced-motion:reduce){.dfc .flatlay .lay{animation:none;opacity:1}}

/* "Ho gaya!" stamp: on the arch's top-right corner, clear of Share / Save */
@media (min-width:1024px){
  .dfc .look-top .lay-frame{padding-top:24px}
  .dfc .ho-stamp{top:0;right:-22px}
}

/* phone looks: compact head so the first piece and its Buy link sit in the first viewport */
@media (max-width:639px){
  .dfc .scr-looks .head-stk{display:none}
  .dfc .scr-looks .scr-head{padding-top:6px}
  .dfc .looks-h1{margin-top:6px;font-size:clamp(1.625rem,7vw,2rem)}
  .dfc .scr-looks .scr-body{padding-top:8px}
  .dfc .scr-looks .looks-main{gap:8px}
  .dfc .scr-looks .blk-t{font-size:1.125rem}
  .dfc .scr-looks .pieces .row{padding:8px 0}
  .dfc .tabs{flex-wrap:wrap;gap:6px 8px}
  .dfc .tabs .chip{min-height:44px;padding:0 12px;font-size:.9375rem}
  .dfc .look{gap:10px}
  .dfc .look-top{gap:6px;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .dfc .look-top>*{flex:0 0 auto}
  .dfc .look-top>.lay-frame,.dfc .look-top>.look-actions{flex:1 0 100%}
  .dfc .look-title{font-size:clamp(1.75rem,8vw,2.125rem);line-height:1;max-width:100%}
  .dfc .look-meta{margin-top:0;min-width:0}
  .dfc .scr-looks .apptop-in{min-height:56px}
  .dfc .flatlay{--aw:min(250px,calc(100vw - 32px))}
  .dfc .lay-frame{padding-bottom:10px}
  .dfc .st-tot{font-size:1.0625rem;min-height:34px}
  .dfc .look-actions{gap:8px}
  .dfc .look-actions .btn{min-height:44px;padding:0 10px;font-size:.9375rem;gap:6px;box-shadow:var(--sh-1)}
  .dfc .look-actions .btn svg{width:18px;height:18px}
}

/* inspo strip (upload / steal idle, desktop only) */
.dfc .inspo{display:none}
@media (min-width:1024px){
  .dfc .scr-upload,.dfc .scr-steal:not(.ph-done){min-height:0}
  .dfc .scr-upload .scr-wrap,.dfc .scr-steal:not(.ph-done) .scr-wrap{align-content:start;padding-bottom:56px}
  /* the arch top lines up with the text column top */
  .dfc .scr-upload.ph-idle .scr-vis,.dfc .scr-steal.ph-idle .scr-vis,.dfc .scr-upload .scr-vis,.dfc .scr-steal:not(.ph-done) .scr-vis{align-self:start;padding-top:8px}
  .dfc .sp-tips-t{margin-top:12px}
  .dfc .inspo{display:flex;flex-direction:column;gap:14px;grid-column:1/-1;margin-top:40px;padding-top:24px;border-top:2px solid var(--line)}
  .dfc .has-vis .inspo{max-width:none}
  .dfc .inspo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
  .dfc .inspo-card{display:flex;align-items:center;gap:14px;min-height:96px;padding:12px 14px;background:var(--surface);color:var(--ink);border:2px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--sh-2);text-decoration:none;transition:transform var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),background var(--d-1) var(--ease)}
  .dfc .inspo-card:hover{background:var(--gold-tint);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge-hard,var(--ink))}
  .dfc .inspo-card:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}
  .dfc .inspo-arch{--pat:rgba(27,16,32,.22);flex:none;width:56px;height:68px;border:2px solid var(--edge);border-radius:28px 28px 8px 8px;background-color:var(--arch-bg,var(--gold))}
  .dfc .inspo-grid li:nth-child(1) .inspo-arch{--arch-bg:var(--gold)}
  .dfc .inspo-grid li:nth-child(2) .inspo-arch{--arch-bg:var(--accent-tint)}
  .dfc .inspo-grid li:nth-child(3) .inspo-arch{--arch-bg:var(--mehendi)}
  .dfc .inspo-grid li:nth-child(4) .inspo-arch{--arch-bg:var(--peacock-tint)}
  .dfc .inspo-t{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dfc .inspo-n{font-size:1.25rem;line-height:1.1;letter-spacing:-.02em}
  .dfc .inspo-h{font-size:.9375rem;line-height:1.3;font-weight:500;color:var(--ink)}
}

/* steal results, desktop: the left column is the photo and the total; the jump list is a chip row above the pieces */
.dfc .jump-row{display:none}
@media (min-width:1024px){
  .dfc .scr-steal.ph-done .jump-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .dfc .jump-row .lbl{color:var(--ink);margin-right:2px}
  .dfc .jump-chip{min-height:44px;gap:8px;padding:0 8px 0 14px;font-size:.9375rem}
  .dfc .jump-chip .jc-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--peacock-tint);color:var(--peacock-ink,var(--peacock));font:700 .875rem/1 var(--f-ui)}
  .dfc .jump-chip .jc-n.none{background:var(--err-tint);color:var(--err)}
}


/* ===== round 11b: hero look carousel (sticker flip), occasion tile patterns ===== */
.dfc .hero{overflow-x:clip}
.dfc .lk-stage{display:grid}
.dfc .lk-slide{grid-area:1/1;transform-origin:88% 8%}
.dfc .lk-slide:not(.is-on){visibility:hidden}
.dfc .lk-slide.is-out{z-index:2;animation:lk-peel 210ms cubic-bezier(.5,0,.9,.4) both}
.dfc .lk-slide.is-in{z-index:1;animation:lk-slap 270ms cubic-bezier(.2,.9,.3,1.2) 110ms both}
.dfc .lk-slide.is-in .lc-sw i{animation:lk-morph 280ms var(--ease) both;animation-delay:calc(110ms + var(--i) * 22ms)}
@keyframes lk-peel{from{transform:none;opacity:1}to{transform:translate(34px,-30px) rotate(12deg);opacity:0}}
@keyframes lk-slap{0%{transform:translate(-8px,14px) rotate(-7deg) scale(1.07);opacity:0}45%{opacity:1}78%{transform:rotate(1.2deg) scale(.99)}100%{transform:none;opacity:1}}
@keyframes lk-morph{from{background-color:var(--from,transparent)}}
.dfc .lk-ctl{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.dfc .lk-ctl[hidden],.dfc .lk-pause[hidden]{display:none}
.dfc .lk-dots{display:flex}
.dfc .lk-dot,.dfc .lk-pause{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#1B1020;cursor:pointer;border-radius:50%}
.dfc .lk-dot::before{content:"";width:12px;height:12px;border-radius:7px;background:#FFF6EA;border:2px solid #1B1020;transition:width 200ms var(--ease),background-color 200ms}
.dfc .lk-dot[aria-current="true"]::before{width:30px;background:var(--gold)}
.dfc .lk-pause{background:#FFF6EA;border:2px solid #1B1020;box-shadow:2px 2px 0 #1B1020}
.dfc .lk-pause:active{transform:translate(1px,1px);box-shadow:none}
.dfc .lk-pause .lk-i-play,.dfc .lk-pause[aria-pressed="true"] .lk-i-pause{display:none}
.dfc .lk-pause[aria-pressed="true"] .lk-i-play{display:inline}
@media (prefers-reduced-motion:reduce){.dfc .lk-slide.is-out,.dfc .lk-slide.is-in,.dfc .lk-slide.is-in .lc-sw i{animation:none}}

/* occasion tiles: a low-contrast regional pattern behind the label (text sits on a tile-coloured plate via the pattern's low alpha) */
.dfc .otile.pat-kolam,.dfc .otile.pat-ajrakh,.dfc .otile.pat-ikat,.dfc .otile.pat-leheriya,.dfc .otile.pat-kantha,.dfc .otile.pat-bandhani{--pat:rgba(27,16,32,.09)}
.dfc .otile.t-pink{--pat:rgba(255,255,255,.14)}
.dfc .otile.t-peacock{--pat:rgba(255,255,255,.13)}
.dfc .otile.t-ink{--pat:rgba(255,178,26,.16)}


/* ===== round 11b: privacy sections as native disclosures ===== */
.dfc .pdisc{padding:0;gap:0}
.dfc .pdisc>summary{margin:0;list-style:none;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr) 28px;grid-template-areas:"b t c" "b s c";column-gap:14px;row-gap:3px;align-items:center;min-height:44px;padding:26px 16px 18px 16px;border-radius:var(--r-lg)}
.dfc .pdisc>summary::-webkit-details-marker{display:none}
.dfc .pdisc>summary .pbadge{grid-area:b;align-self:start}
.dfc .pdisc>summary h2{grid-area:t;align-self:end}
.dfc .pdisc>summary .psum{grid-area:s;align-self:start;font-size:1.0625rem;line-height:1.3}
.dfc .pdisc .pchev{grid-area:c;justify-self:end;transition:transform 200ms var(--ease)}
.dfc .pdisc[open]>summary .pchev{transform:rotate(180deg)}
.dfc .pdisc[open]>summary{padding-bottom:12px}
.dfc .pbody{display:flex;flex-direction:column;gap:12px;padding:4px 20px 24px}
.dfc .pdisc>summary:focus-visible{outline-offset:-6px;border-radius:var(--r-lg)}
@media (min-width:640px){.dfc .pdisc>summary{padding:30px 24px 18px}.dfc .pbody{padding:6px 28px 30px}}
@media (min-width:1024px){.dfc .pdisc>summary{cursor:default}.dfc .pdisc .pchev{display:none}}
@media (prefers-reduced-motion:reduce){.dfc .pdisc .pchev{transition:none}}
.dfc .otile.t-ink{--pat:rgba(255,178,26,.11)}
.dfc .otile.pat-kantha{--pat:rgba(27,16,32,.2)}
@media (max-width:639px){.dfc .ho-stamp{top:12px;right:-12px;font-size:1.25rem}}

/* ===== round 12b: phone fold, privacy disclosure summaries, dark tiles, carousel flip ===== */
@media (max-width:639px){
  .dfc .hero{padding:18px 0 28px}
  .dfc .hero-grid{gap:10px}
  .dfc .hero-h1{font-size:clamp(2.9rem,14.4vw,4.4rem);margin-top:14px}
  .dfc .hero-copy .hindi{margin-top:12px;font-size:1.375rem}
  .dfc .hero-lede{margin-top:6px;font-size:1.0625rem;line-height:1.45}
  .dfc .hero-ctas{gap:10px;margin-top:16px}
  .dfc .steal-cta{margin-top:2px;min-height:44px}
  .dfc .hero-trust{margin-top:0}
  .dfc .hero-art{min-height:0;padding:50px 12px 8px}
  .dfc .art-blob{inset:22px 14px 0}
  .dfc .lookdeck{margin-top:0}
  .dfc .ghostcard{top:8px;left:30px;min-height:110px;width:min(250px,66%)}
  .dfc .burst{top:-6px;right:22px;width:80px;height:80px}
  .dfc .st-total{display:none}
}
@media (max-width:379px){
  .dfc .hero-h1{font-size:clamp(2.6rem,14.2vw,3.2rem)}
  .dfc .hero-ctas{gap:8px}
  .dfc .hero-copy .hindi{margin-top:10px}
  .dfc .ghostcard{width:72%;left:22px}
  .dfc .gc-occ{font-size:1rem}
  .dfc .hero-lede{font-size:1rem;line-height:1.4}
  .dfc .burst{top:-4px;right:14px;width:68px;height:68px}
}

/* privacy: icon badge + bold title + one regular-weight summary line */
.dfc .pgrid{gap:24px}
.dfc .pdisc>summary{padding:24px 16px 22px;row-gap:6px}
.dfc .pdisc>summary .psum{font:400 1rem/1.45 var(--f-ui);letter-spacing:0;color:var(--ink-2)}
.dfc .pdisc>summary .psum strong{font-weight:600;color:var(--ink)}
.dfc .pdisc[open]>summary{padding-bottom:14px}
@media (min-width:640px){.dfc .pdisc>summary{padding:28px 24px 24px}.dfc .pdisc>summary .psum{font-size:1.0625rem}}

/* dark: landing tiles that were tint-on-dark get deep saturated fills */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dfc .otile.t-tint{background-color:#7A1553;--pat:rgba(255,243,230,.12)}
  :root:not([data-theme="light"]) .dfc .otile.t-cream{background-color:#7A4A00;--pat:rgba(255,243,230,.12)}
}
[data-theme="dark"] .dfc .otile.t-tint{background-color:#7A1553;--pat:rgba(255,243,230,.12)}
[data-theme="dark"] .dfc .otile.t-cream{background-color:#7A4A00;--pat:rgba(255,243,230,.12)}

/* carousel: a real card flip (~420ms) so any mid frame is visibly turned */
.dfc .lk-slide{transform-origin:50% 60%}
.dfc .lk-slide.is-out{animation:lk-peel 380ms cubic-bezier(.4,0,.8,.6) both}
.dfc .lk-slide.is-in{animation:lk-slap 300ms cubic-bezier(.2,.9,.3,1.15) 120ms both}
.dfc .lk-slide.is-in .lc-sw i{animation-delay:calc(120ms + var(--i) * 22ms)}
@keyframes lk-peel{0%{transform:perspective(900px);opacity:1}70%{opacity:1}100%{transform:perspective(900px) translate(-26px,-16px) rotateY(-82deg) rotate(-7deg) scale(.88);opacity:0}}
@keyframes lk-slap{0%{transform:perspective(900px) translate(26px,12px) rotateY(82deg) rotate(6deg) scale(.88);opacity:0}35%{opacity:1}100%{transform:perspective(900px);opacity:1}}

/* ===== round 12a: tighter catalogue cards, no empty pieces card at the reveal, one-row look picker on phones,
   steal actions in the desktop left column, distinct offline notice, deeper dark tiles ===== */

/* catalogue: title (2 lines max, not reserved) -> price line -> CTA pinned to the card bottom; slack sits above the CTA */
.dfc .itemcard .ic-title{min-height:0}
.dfc .itemcard .ic-meta{margin-bottom:10px}
.dfc .itemcard .ic-go{margin-top:auto}
@media (max-width:639px){
  /* the sticky filter bar gets room and a soft edge, so tiles scrolling under it never look sliced */
  .dfc .scr-pick .flt-wrap{padding-bottom:16px;box-shadow:0 12px 14px -10px rgba(27,16,32,.3)}
  .dfc .scr-pick .flt-wrap:has(.flt-panel.is-open){box-shadow:0 12px 20px -12px rgba(27,16,32,.45)}
  .dfc .scr-pick .cat-grid{margin-top:14px}
}

/* looks reveal: rows start visible (40%, 8px low) like the garments, so the pieces card is never an empty box */
@keyframes row-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
.dfc .look .row{animation-name:row-in}
@media (prefers-reduced-motion:reduce){.dfc .look .row,.dfc .look .why-box,.dfc .look .total{animation:none;opacity:1;transform:none}}

/* look picker: named chips on desktop, a numbered one-row segmented control on phones */
.dfc .tabs-l,.dfc .tabs .tb-n{display:none}
@media (max-width:639px){
  .dfc .tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:0;padding-left:2px}
  .dfc .tabs-l{display:block;margin-right:12px;font:700 1rem/1 var(--f-ui);color:var(--ink)}
  .dfc .tabs .tb-t{display:none}
  .dfc .tabs .tb-n{display:inline;font:800 1.125rem/1 var(--f-display)}
  .dfc .tabs .chip{flex:1 1 0;min-width:0;justify-content:center;gap:6px;min-height:48px;padding:0;border-radius:0;box-shadow:none;margin-left:-2px}
  .dfc .tabs .chip:hover{transform:none;box-shadow:none}
  .dfc .tabs .tabs-l+.chip{margin-left:0;border-radius:var(--r-pill) 0 0 var(--r-pill)}
  .dfc .tabs .chip:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}
  .dfc .tabs .tabs-l+.chip:last-child{border-radius:var(--r-pill)}
  .dfc .tabs .chip[aria-pressed="true"]{position:relative;z-index:1}
}

/* steal results on desktop: Share / Try another photo live under the total in the sticky left column */
.dfc .vis-acts{display:none}
@media (min-width:1024px){
  .dfc .scr-steal.ph-done .vis-acts{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
  .dfc .scr-steal.ph-done .vis-acts .btn{width:100%;min-height:48px}
  .dfc .scr-steal.ph-done .scr-bar{display:none}
}

/* offline notice: a dark status strip with a marigold icon (not a button-like pill); toasts keep their own look */
.dfc .offline{background:#1B1020;color:#FFF3E6;border:2px solid #1B1020;border-radius:14px;box-shadow:none;font-weight:600}
.dfc .offline svg{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dfc .offline{border-color:rgba(255,243,230,.35)}}
[data-theme="dark"] .dfc .offline{border-color:rgba(255,243,230,.35)}

/* dark mode: pale tile fills use a deeper saturated twin (set from JS only where the garment still contrasts) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dfc [style*="--tbd"]{background:var(--tbd)!important;--tb:var(--tbd)!important}
  :root:not([data-theme="light"]) .dfc .itemcard .pic-in:is([style*="--tbd"],[style*="--tbp"])::before{filter:none}
}
[data-theme="dark"] .dfc [style*="--tbd"]{background:var(--tbd)!important;--tb:var(--tbd)!important}
[data-theme="dark"] .dfc .itemcard .pic-in:is([style*="--tbd"],[style*="--tbp"])::before{filter:none}

.dfc .pchips{display:flex;flex-wrap:wrap;max-width:none;width:auto}
.dfc .pchips li{white-space:nowrap}
@media (max-width:359px){.dfc .pchips{flex-direction:column;align-items:flex-start}}
.dfc .lk-slide.is-in{animation:lk-slap 340ms cubic-bezier(.3,.6,.3,1) 120ms both}

/* upload / steal on phones: the privacy line keeps clear of the bar's top fade */
@media (max-width:1023px){
  .dfc .scr-upload .trust-vis,.dfc .scr-steal .trust-vis{margin-bottom:20px}
}
/* dark: inspo arches that were pale pink / mint tints get deep saturated twins */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dfc .inspo-grid li:nth-child(2) .inspo-arch{--arch-bg:#5A1E44}
  :root:not([data-theme="light"]) .dfc .inspo-grid li:nth-child(4) .inspo-arch{--arch-bg:#0E4A44}
}
[data-theme="dark"] .dfc .inspo-grid li:nth-child(2) .inspo-arch{--arch-bg:#5A1E44}
[data-theme="dark"] .dfc .inspo-grid li:nth-child(4) .inspo-arch{--arch-bg:#0E4A44}
/* swatches only "grow" on first paint; a slide leaving is-in must not replay it (blank-swatch flash) */
.dfc .lk-slide .lc-sw i{animation:none}
.dfc .lk-slide.rise .lc-sw i{animation:grow .7s var(--ease) both;animation-delay:calc(300ms + var(--i) * 80ms)}

/* "Tailor to you": optional fit profile (attributes and looks screens) */
.dfc .fitp{padding:0;margin:8px 0 16px;overflow:hidden}
.dfc .fitp-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:56px;padding:12px 18px;cursor:pointer;list-style:none;font:700 1.0625rem/1.2 var(--f-ui);color:var(--ink)}
.dfc .fitp-h{white-space:nowrap}
.dfc .fitp-sum::-webkit-details-marker{display:none}
.dfc .fitp-sum::after{content:"";flex:none;order:2;margin-left:auto;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform var(--d-1) var(--ease)}
.dfc .fitp[open] .fitp-sum::after{transform:rotate(-135deg) translateY(-3px)}
.dfc .fitp-st{order:3;flex-basis:100%;font:600 .875rem/1.3 var(--f-ui);color:var(--ink-2);overflow-wrap:anywhere}
.dfc .fitp.is-set .fitp-st{color:var(--accent-ink)}
.dfc .fitp-body{display:flex;flex-direction:column;gap:16px;padding:0 18px 18px}
.dfc .fitp-row{display:flex;flex-direction:column;gap:8px}
.dfc .fitp-t{font:700 .9375rem/1.2 var(--f-ui);color:var(--ink)}
.dfc .fitp-chips{display:flex;flex-wrap:wrap;gap:8px}
.dfc .fitp-chips .chip[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent-ink);border-color:var(--accent-solid)}
.dfc .fitp-chips .dot{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(27,16,32,.4)}
.dfc .fitp-act{display:flex;flex-wrap:wrap;gap:12px}
.dfc .why-box .for-you{font-size:1rem;line-height:1.5;color:var(--ink)}
.dfc .why-box .fy-l{display:inline-block;padding:2px 8px;margin-right:2px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-ink);font:700 .75rem/1.4 var(--f-ui);text-transform:uppercase;letter-spacing:.04em}
/* attributes, desktop: "Tailor to you" belongs with the controls in the right column, under Occasion.
   Without a row it auto-placed into the left column, where the sticky preview slid over it on scroll. */
@media (min-width:1024px){
  .dfc .scr-attrs.has-vis .scr-vis{grid-row:1/span 7}
  .dfc .scr-attrs .fitp{grid-column:2;grid-row:7;margin:0}
}