:root{
  --green:#15633b; --green-d:#0e3a24; --green-l:#e4efe7; --gold:#b3801f;
  --ink:#18211c; --soft:#566056; --line:#e6e2d6; --paper:#f7f5ef; --card:#fff;
  --radius:14px; --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Guard against any element causing a sideways shift on mobile (same fix the shop uses).
   clip (not hidden) kills horizontal scroll while preserving position:sticky headers. */
html,body{overflow-x:clip;max-width:100%}
body{margin:0;font-family:var(--font-body,system-ui),-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.center{text-align:center}
.muted{color:var(--soft)}
img{max-width:100%}
/* Without this a <button> renders in the UA default — Arial next to the brand face,
   on the two words the customer looks at most. Links styled .btn were always right. */
button,input,select,textarea,optgroup{font:inherit;letter-spacing:inherit}
.btn-outline{font-size:15px}

/* buttons */
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;border:0;cursor:pointer;
  border-radius:min(var(--radius,14px),11px);padding:11px 18px;font-size:15px;line-height:1;text-align:center;transition:background .15s}
.btn:hover{background:var(--green-d)}
.btn-lg{padding:15px 26px;font-size:17px;border-radius:min(var(--radius,14px),13px)}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:min(var(--radius,14px),9px)}
.btn-block{display:block;width:100%}
.btn-outline{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-outline:hover{background:var(--green-l)}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--hdr-bg,#fff);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:42px;height:42px;border-radius:min(var(--radius,14px),11px);background:var(--green);display:grid;place-items:center;font-size:22px}
.brand-logo{height:48px;width:auto;display:block}
span.brand-logo{height:auto;font-family:var(--font-display,inherit);font-size:22px;font-weight:600;
                letter-spacing:.22em;text-transform:uppercase;line-height:1;white-space:nowrap}
@media(max-width:600px){span.brand-logo{font-size:17px;letter-spacing:.16em}}
.brand-txt b{display:block;font-size:17px;letter-spacing:-.01em}
.brand-txt small{display:block;color:var(--soft);font-size:11.5px}
.nav{display:flex;align-items:center;gap:20px;font-weight:600}
.cart-link{position:relative;font-size:20px}
.cart-badge{position:absolute;top:-8px;right:-11px;background:var(--gold);color:#fff;font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:min(var(--radius,14px),9px);display:grid;place-items:center;padding:0 4px}
.promo-bar{background:var(--green-d);color:#eaf3ec;font-size:13.5px;font-weight:600}
.promo-bar .wrap{padding:8px 18px;text-align:center}

/* hero */
.hero{position:relative;background:linear-gradient(135deg,var(--green-d),var(--green));color:#fff;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;padding:56px 18px}
.hero-copy{max-width:560px}
.hero-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e7c878;margin-bottom:12px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e7c878}
.hero h1{font-size:clamp(30px,5vw,46px);line-height:1.08;margin:0 0 16px;letter-spacing:-.02em;text-wrap:balance;color:#fff}
.hero h1 em{font-style:normal;color:#e7c878}
.hero p{font-size:17px;line-height:1.5;color:#d3e5d9;margin:0 0 26px;max-width:48ch}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-btn{display:inline-block;background:#e7c878;color:var(--green-d);font-weight:700;font-size:16px;padding:14px 26px;border-radius:min(var(--radius,14px),12px);transition:transform .12s,background .15s}
.hero-btn:hover{background:#f0d792;transform:translateY(-1px)}
.hero-badge{font-size:14px;font-weight:600;color:#eaf3ec}
.hero-art{position:relative;height:300px}
.hero-img{position:absolute;border-radius:50%;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.28);border:4px solid rgba(255,255,255,.92);background:#fff}
.hero-img-1{width:200px;height:200px;top:8px;right:64px;z-index:3}
.hero-img-2{width:142px;height:142px;top:150px;right:8px;z-index:2}
.hero-img-3{width:132px;height:132px;top:120px;right:196px;z-index:1}
@media(max-width:820px){
  .hero-in{grid-template-columns:1fr;gap:6px;padding:38px 18px 26px;text-align:center}
  .hero-copy{max-width:none;margin:0 auto}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-art{height:150px;margin-top:12px}
  .hero-img{border-width:3px}
  .hero-img-1{width:132px;height:132px;top:0;left:50%;right:auto;transform:translateX(-24px);z-index:3}
  .hero-img-2{width:94px;height:94px;top:54px;left:50%;right:auto;transform:translateX(40px);z-index:2}
  .hero-img-3{width:90px;height:90px;top:50px;left:50%;right:auto;transform:translateX(-118px);z-index:1}
}

/* blocks */
.block{padding:34px 18px}
.block-h{font-family:var(--font-display,inherit);font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 18px}
.page-h{font-family:var(--font-display,inherit);font-size:clamp(24px,4vw,32px);font-weight:600;margin:22px 0 16px;letter-spacing:-.01em}

/* category grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.cat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;
  font-weight:700;transition:transform .12s,box-shadow .12s}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.07)}
.cat-img{height:120px;background:var(--green-l);overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card span{display:block;padding:11px 8px;font-size:14.5px}

/* product grid */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.prod-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.prod-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.prod-img{display:block;height:170px;background:var(--green-l);overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.prod-card:hover .prod-img img{transform:scale(1.04)}
.prod-body{padding:12px 13px;display:flex;flex-direction:column;gap:9px;flex:1}
.prod-name{font-weight:600;font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.prod-add{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
          background:var(--card,#fff);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;
          display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.prod-add:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prod-add:active{transform:scale(.93)}
.prod-add.busy{opacity:.55;pointer-events:none}
.prod-add.done{background:var(--ink);color:var(--paper)}
.prod-gone{font-size:12px;color:var(--stone-l);text-transform:uppercase;letter-spacing:.08em}
/* Money on this page is money everywhere else: the face that carries the currency sign.
   Every money ROLE in the shop belongs here — a price on the shelf and the same price
   at checkout are the same role, and a ৳ that falls back to a system face while its
   own digits do not is a price that looks broken at the moment it is being decided. */
.price,.prod-foot .price,.prod-card .price,.prod-price,
.pd-price,.cart-line,.cart-price,.cart-summary b,.cart-summary .cart-esttotal,
.co-item b,.co-line b,.co-total,.co-total b,.co-actionbar-total b,
.freeship-bar,.freebar,.pz-now,.pz-was,.pz-off,.order-top b
{font-family:var(--font-price);font-variant-numeric:tabular-nums}
.price{font-weight:700;font-size:16px}
.price small{font-weight:600;color:var(--soft);font-size:12px}
.center{margin-top:22px}

/* chips */
.cat-chips{display:flex;gap:9px;overflow-x:auto;padding-bottom:14px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.chip{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:var(--pill,999px);padding:8px 15px;font-size:14px;font-weight:600;color:var(--soft)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}

/* product detail */
.pd .back{display:inline-block;color:var(--soft);font-weight:600;margin-bottom:16px}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.pd-img{height:min(56vw,440px);border-radius:min(var(--radius,14px),16px);background:var(--green-l) center/cover no-repeat;border:1px solid var(--line)}
.pd-info h1{font-family:var(--font-display,inherit);font-weight:600;font-size:clamp(24px,4vw,32px);
            margin:0 0 8px;letter-spacing:-.01em;text-wrap:balance}
.pd-price{font-size:calc(var(--price-size,17px) * 1.5);font-weight:600;color:var(--ink);margin-bottom:14px}
.pd-price small{font-size:15px;color:var(--soft);font-weight:600}
.pd-desc{color:var(--soft);margin:0 0 14px}
.pd-warn{background:#fbf1d8;border:1px solid #ecd9a9;color:#7a551a;border-radius:min(var(--radius,14px),10px);padding:10px 13px;font-size:14px}
.pd-form{margin-top:14px;display:flex;flex-direction:column;gap:14px;max-width:420px}
.fld{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.fld select{padding:12px;border:1px solid var(--line);border-radius:min(var(--radius,14px),11px);font-size:16px;background:#fff}
.pd-actions{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.pd-actions .btn-lg{flex:1;min-width:180px}
/* Minus, the number, plus — the control a thumb can actually hit. A number input's own
   spinners are two 8px arrows in a corner, and most phones do not draw them at all. */
.pd-qty{display:inline-flex;align-items:stretch;border:1px solid var(--line);
        border-radius:min(var(--radius,14px),11px);overflow:hidden;background:var(--card,#fff);flex:none}
.pd-q{width:48px;border:0;background:none;font:inherit;font-size:19px;line-height:1;cursor:pointer;
      color:var(--ink);display:grid;place-items:center;padding:0}
.pd-q:hover{background:var(--brand-l,var(--green-l))}
.pd-q:disabled{opacity:.35;cursor:default;background:none}
.pd-qn{width:52px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
       text-align:center;font:inherit;font-size:16px;font-weight:600;color:var(--ink);
       background:none;font-variant-numeric:tabular-nums;padding:0;min-height:48px}
.pd-qn:focus{outline:none;background:var(--brand-l,var(--green-l))}
.pd-desc{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);color:var(--ink2,var(--soft))}
@media(max-width:600px){ .pd-actions .btn-lg{min-width:0} }
.qty{width:74px;padding:13px;border:1px solid var(--line);border-radius:min(var(--radius,14px),11px);font-size:17px;text-align:center;font-weight:700}

/* cart */
.freebar{background:var(--green-l);border:1px solid #cfe1d5;border-radius:min(var(--radius,14px),12px);padding:12px 15px;margin-bottom:18px;font-size:14.5px}
.freebar.ok{color:var(--green-d);font-weight:700}
.freebar-track{height:8px;background:#fff;border-radius:min(var(--radius,14px),5px);overflow:hidden;margin-top:8px}
.freebar-track i{display:block;height:100%;background:var(--green)}
.cart-list{display:flex;flex-direction:column;gap:12px}
.cart-row{display:grid;grid-template-columns:80px 1fr auto;gap:14px;background:#fff;border:1px solid var(--line);border-radius:min(var(--radius,14px),12px);padding:12px}
.cart-img{width:80px;height:80px;border-radius:min(var(--radius,14px),9px);background:var(--green-l) center/cover no-repeat}
.cart-name{font-weight:700}
.cart-meta{font-size:13px;color:var(--soft)}
.cart-price{font-size:13.5px;color:var(--soft);margin-top:3px}
.cart-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cart-line{font-weight:700}
.link-x{background:0;border:0;color:#a8402f;font-size:13px;cursor:pointer;padding:0;text-decoration:underline}
.cart-summary{margin-top:20px;margin-left:auto;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:min(var(--radius,14px),14px);padding:18px}
.cart-summary .row{display:flex;justify-content:space-between;padding:6px 0}
.cart-summary .cart-esttotal{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;font-weight:700;color:var(--ink)}
.cart-summary .cart-note{font-size:12px;line-height:1.4;margin-top:8px}
.cart-summary .btn{margin-top:12px}

/* footer */
.ftr{background:#fff;border-top:1px solid var(--line);margin-top:40px}
.ftr-in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px 18px;font-size:14px;color:var(--soft)}
.ftr-in b{color:var(--ink)}
.ftr-note{max-width:34ch;text-align:right}

@media(max-width:640px){
  .pd-grid{grid-template-columns:1fr;gap:18px}
  .ftr-in{flex-direction:column}.ftr-note{text-align:left}
  .brand-txt small{display:none}
  /* tighter mobile header — reclaim top space, keep brand compact */
  .hdr-in{height:auto;min-height:54px;padding-top:8px;padding-bottom:8px}
  .brand{gap:9px}
  .brand-mark{width:34px;height:34px;font-size:18px;border-radius:min(var(--radius,14px),9px)}
  .brand-txt b{font-size:14px;line-height:1.15;letter-spacing:-.02em}
  .nav{gap:14px;font-size:14px}
  .cart-link{font-size:19px}
}

/* ---- checkout ---- */
.co-err{background:#f6e0dc;border:1px solid #e3b7ae;color:#9a3324;border-radius:min(var(--radius,14px),11px);padding:12px 15px;margin-bottom:16px;font-weight:600}
.co-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.co-main{display:flex;flex-direction:column;gap:16px}
.co-card{background:#fff;border:1px solid var(--line);border-radius:min(var(--radius,14px),14px);padding:18px}
.co-card h2{font-size:16px;margin:0 0 14px;font-weight:700}
.co-card .fld{margin-bottom:12px}
.co-card .fld:last-child{margin-bottom:0}
.co-card input,.co-card select{padding:12px;border:1px solid var(--line);border-radius:min(var(--radius,14px),10px);font-size:16px;width:100%;background:#fff;font-family:inherit}
.seg{display:flex;gap:10px;margin-bottom:14px}
.seg label{flex:1;border:1.5px solid var(--line);border-radius:min(var(--radius,14px),11px);padding:13px;text-align:center;font-weight:600;cursor:pointer}
.seg input{width:auto;margin-right:6px}
.seg label:has(input:checked){border-color:var(--green);background:var(--green-l)}
.co-est{color:var(--green);font-weight:600;font-size:13.5px;margin:-4px 0 12px}
.co-pick{margin:0}
.tip-row{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.tipbtn{border:1.5px solid var(--line);border-radius:min(var(--radius,14px),10px);padding:11px 16px;font-weight:700;cursor:pointer}
.tipbtn input{display:none}
.tipbtn:has(input:checked){border-color:var(--green);background:var(--green-l);color:var(--green-d)}
.pay-opt{display:block;border:1.5px solid var(--line);border-radius:min(var(--radius,14px),11px);padding:13px;background:#fff;cursor:pointer}
.pay-opt:has(input:checked){border-color:var(--green);background:var(--green-l)}
.pay-opt input{width:auto;margin-right:8px}
.co-side{position:sticky;top:84px}
.co-summary h2{margin-bottom:12px}
/* coupon + payment relocated into the order summary */
.co-coupon{display:flex;gap:8px;margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.co-coupon input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:min(var(--radius,14px),10px);font-size:15px;background:#fff}
.co-coupon .btn{flex:0 0 auto}
.co-coupon-msg{font-size:13px;margin:2px 0 0}
.co-coupon-msg.ok{color:var(--green)}
.co-coupon-msg.err{color:#a8402f}
.co-pay{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
.co-items{display:flex;flex-direction:column;gap:7px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.co-item{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.co-line{display:flex;justify-content:space-between;padding:5px 0;color:var(--soft)}
.co-line[hidden]{display:none}
.co-line b{color:var(--ink)}
.co-total{display:flex;justify-content:space-between;padding:12px 0 14px;font-size:19px;font-weight:700;border-top:1px solid var(--line);margin-top:6px}
.co-done{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.done-hero{padding:28px 20px}
.done-check{width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;font-size:32px;display:grid;place-items:center;margin:0 auto 14px}
.done-hero h1{font-size:24px;margin:0 0 6px}
.wa{background:#25d366;margin-top:16px;color:#fff}
.wa:hover{background:#1eb457}
@media(max-width:820px){.co-grid{grid-template-columns:1fr}.co-side{position:static}}

/* ==== mix-and-match: measured proportions from the original ==== */
.wrap{max-width:1280px}
.banner{width:100%;background:var(--paper);overflow:hidden;line-height:0}
.banner img{width:100%;height:auto;max-height:520px;object-fit:cover;display:block}
.sec{padding:24px 18px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sec-h{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0}
@media(max-width:600px){.sec-h{font-size:19px}}
.viewall{color:var(--green);font-weight:600;font-size:14px;white-space:nowrap}

/* category cards — 4 across */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:min(var(--radius,14px),12px);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05);text-align:center;transition:transform .12s,box-shadow .12s}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.09)}
.cat-img{height:auto;aspect-ratio:4/3;background:var(--green-l);overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card span{display:block;padding:12px 8px;font-weight:700;font-size:15px}

/* product cards — 4 across, square images */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:640px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:920px){.prod-grid{grid-template-columns:repeat(4,1fr)}}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:min(var(--radius,14px),12px);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:box-shadow .12s}
.prod-card:hover{box-shadow:0 10px 22px rgba(0,0,0,.09);transform:none}
/* These cards set the photograph as a BACKGROUND on the <a> — there is no <img> child, so
   the .prod-img img rules below never applied to them. And `background:` is a shorthand,
   which resets background-size to auto: every companion photo was drawn at its natural
   size from the top-left corner and tiled. That is the "images are not aligned".
   card-ratio follows the shop's look, so a clothing shop crops portrait like its shelf. */
.prod-img{height:auto;aspect-ratio:var(--card-ratio, 1 / 1);overflow:hidden;display:block;
          background-color:var(--muted-bg,var(--green-l));
          background-size:cover;background-position:50% 18%;background-repeat:no-repeat}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.prod-card:hover .prod-img img{transform:scale(1.04)}
.prod-body{padding:12px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod-name{font-weight:600;font-size:14px;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.prod-name:hover{color:var(--green)}
.prod-price{color:var(--green);font-weight:700;font-size:16px}
.prod-price small{color:var(--soft);font-weight:500;font-size:11px}
.prod-btn{display:block;width:100%;margin-top:auto;background:var(--green);color:#fff;border:0;cursor:pointer;font-weight:700;font-size:14px;padding:9px;border-radius:min(var(--radius,14px),8px);text-align:center;transition:background .15s}
.prod-btn:hover{background:var(--green-d)}

/* ==== app-like search bar (Shop page) ==== */
.searchbar{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--pill,999px);
  padding:0 14px;height:48px;margin:0 0 16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.searchbar:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.searchbar svg{width:20px;height:20px;color:var(--soft);flex:none}
.searchbar input{flex:1;border:0;outline:0;background:0;font-size:16px;font-family:inherit;color:var(--ink);min-width:0}
.searchbar input::placeholder{color:var(--soft)}
.searchbar-x{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper);color:var(--soft);display:grid;place-items:center;font-size:18px;line-height:1}

/* ==== mobile bottom tab bar (app feel) ==== */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 4px 7px;color:var(--soft);font-size:11px;font-weight:600;letter-spacing:.01em}
.tab svg{width:24px;height:24px}
.tab.on{color:var(--green)}
.tab.on svg{stroke-width:2.4}
.tab-cart{position:relative;display:block;line-height:0}
.tab-badge{position:absolute;top:-6px;right:-10px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;font-style:normal;
  min-width:16px;height:16px;border-radius:min(var(--radius,14px),8px);display:grid;place-items:center;padding:0 3px;line-height:1}
/* clear the fixed bar so nothing hides behind it */
body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
/* desktop keeps the top nav; hide the mobile tab bar */
@media(min-width:821px){.tabbar{display:none}body{padding-bottom:0}}

/* mobile checkout: sticky total + CTA bar replaces the tab bar so the total is always in view */
.co-actionbar{display:none}
@media(max-width:820px){
  body.v-checkout .tabbar{display:none}
  body.v-checkout{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .co-actionbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.08);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .co-actionbar-in{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto}
  .co-actionbar-total{display:flex;flex-direction:column;line-height:1.1}
  .co-actionbar-total span{font-size:11px;color:var(--soft)}
  .co-actionbar-total b{font-size:20px;font-weight:700;color:var(--ink)}
  .co-actionbar .btn{flex:1;margin:0;white-space:nowrap}
}

/* ==== toast (instant add feedback) ==== */
#toast{position:fixed;left:50%;bottom:calc(74px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:var(--pill,999px);
  box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:821px){#toast{bottom:28px}}

/* ==== cart quantity stepper ==== */
.qtybox{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:min(var(--radius,14px),10px);overflow:hidden;background:#fff}
.qtybox .qstep{width:36px;height:36px;border:0;background:#fff;color:var(--green);font-size:20px;font-weight:700;cursor:pointer;line-height:1;display:grid;place-items:center}
.qtybox .qstep:active{background:var(--green-l)}
.qtybox .qstep:disabled{opacity:.4}
.qtyform{margin:0}
.qtybox .qnum{width:40px;height:36px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-size:15px;font-weight:700;font-family:inherit;color:var(--ink);-moz-appearance:textfield}
.qtybox .qnum::-webkit-outer-spin-button,.qtybox .qnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-row.removing{opacity:0;transform:translateX(12px);transition:opacity .2s,transform .2s,height .2s,margin .2s,padding .2s;
  height:0!important;margin:0;padding-top:0;padding-bottom:0;overflow:hidden}

/* hide the text "My Orders" link on small screens (bottom bar + confirmation cover it) */
@media(max-width:520px){.nav-orders{display:none}}

/* ==== My Orders (customer) ==== */
.orders-list{display:flex;flex-direction:column;gap:12px}
.order-card{background:#fff;border:1px solid var(--line);border-radius:min(var(--radius,14px),12px);padding:14px 16px}
.order-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px}
.order-meta{font-size:13.5px;margin-top:4px}
.order-actions{display:flex;gap:10px;margin-top:12px}
.co-actions{display:flex;flex-direction:column;gap:10px;margin:4px 0 10px}

/* ==== slide-out cart drawer ==== */
.drawer-overlay{position:fixed;inset:0;z-index:70;background:rgba(24,33,28,.44);opacity:0;transition:opacity .25s ease}
.drawer-overlay.open{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;z-index:71;height:100%;width:min(420px,100%);
  background:var(--paper);display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.16);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  border-bottom:1px solid var(--line);background:var(--card)}
.cart-drawer-head h2{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.drawer-x{background:none;border:0;font-size:20px;line-height:1;color:var(--soft);cursor:pointer;padding:6px;border-radius:min(var(--radius,14px),8px)}
.drawer-x:hover{background:var(--green-l);color:var(--ink)}
.cart-drawer-body{flex:1;overflow-y:auto;padding:16px 18px;-webkit-overflow-scrolling:touch}
/* inside the drawer the shared cart body flows in a single column */
.cart-drawer-body .cart-summary{margin-left:0;max-width:none;margin-top:16px}
.cart-drawer-body .cart-empty{text-align:center;padding:40px 10px}
.cart-drawer-body .cart-empty .btn{margin-top:16px}
body.drawer-locked{overflow:hidden}
/* mobile: drawer becomes a bottom sheet */
@media(max-width:820px){
  .cart-drawer{top:auto;bottom:0;right:0;left:0;width:100%;height:auto;max-height:88vh;
    border-radius:min(var(--radius,14px),18px) 18px 0 0;transform:translateY(100%);box-shadow:0 -8px 30px rgba(0,0,0,.18)}
  .cart-drawer.open{transform:translateY(0)}
}

/* ---- fashion pack: gallery, size and colour options --------------------- */
.pd-gallery{display:flex;flex-direction:column;gap:10px}
.pd-img{position:relative;overflow:hidden;aspect-ratio:var(--card-ratio,1/1);border-radius:var(--radius)}
.pd-img{height:auto}   /* the earlier fixed height overrode aspect-ratio and letterboxed garments */
.pd-img.is-sold{opacity:.45}
.pd-sold{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 13px/1 inherit;letter-spacing:.18em;color:var(--paper);background:rgba(0,0,0,.55);border-radius:var(--radius)}
.pd-thumbs{display:flex;gap:8px}
.pd-hero{width:100%;height:100%;object-fit:cover;object-position:50% 15%;border-radius:var(--radius);display:block}
.pd-img{touch-action:pan-y}
.pd-thumb{width:64px;aspect-ratio:var(--card-ratio,1/1);object-fit:cover;object-position:50% 18%;border:1px solid var(--line);border-radius:calc(var(--radius) / 2);cursor:pointer;display:block;background:var(--green-l)}
.pd-thumb.is-on{outline:1.5px solid var(--ink);outline-offset:2px}
.pd-opt{display:block;margin-bottom:14px}
.pd-opt>span{display:block;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.pd-swatches,.pd-sizes{display:flex;flex-wrap:wrap;gap:10px}
.pd-swatch,.pd-size{position:relative;cursor:pointer}
.pd-swatch input,.pd-size input{position:absolute;opacity:0;width:0;height:0}
.pd-swatch>span,.pd-size>span{display:flex;align-items:center;justify-content:center;min-width:56px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:calc(var(--radius) / 2);font-size:14px;color:var(--ink);background:var(--card)}
.pd-swatch input:checked+span,.pd-size input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.pd-swatch.is-out>span,.pd-size.is-out>span{color:#b9b1a4;background:var(--paper);text-decoration:line-through;cursor:not-allowed}
.pd-unique{font-size:13.5px;color:var(--soft);background:var(--brand-l);border:1px solid var(--line);padding:11px 13px;border-radius:calc(var(--radius) / 2)}
.pd-low{font-size:13px;color:var(--accent);font-weight:600;margin:0 0 12px}

/* size guide */
.pd-chartlink{border:0;background:none;padding:0;margin-left:10px;font:inherit;font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--accent);cursor:pointer;text-decoration:underline}
.sc-back{position:fixed;inset:0;background:rgba(26,21,18,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.sc-back[hidden]{display:none}
.sc-box{position:relative;background:var(--card);border-radius:var(--radius);padding:24px;max-width:520px;width:100%;max-height:86vh;overflow:auto}
.sc-box h3{margin:0 0 14px;font-family:var(--font-display);font-size:24px;font-weight:600}
.sc-x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--soft)}
.sc-tbl{width:100%;border-collapse:collapse;font-size:14px}
.sc-tbl th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);padding:8px 10px;border-bottom:1px solid var(--line)}
.sc-tbl td{padding:9px 10px;border-bottom:1px solid var(--line)}
.sc-tbl tr:last-child td{border-bottom:0}
.sc-note{font-size:12.5px;color:var(--soft);margin-top:14px;line-height:1.6}

/* A colour swatch shows the cloth's colour and says its name. The dot alone would be
   unreadable to a colour-blind customer and useless to whoever packs the parcel. */
.pd-dot{width:14px;height:14px;border-radius:50%;margin-right:8px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pd-colname{font-weight:600;color:var(--soft)}
.pd-hero{transition:opacity .18s ease}

/* A sale price: what you pay, what it was, what you saved. The old price is struck
   through and quieter — never the same weight as the price actually being charged. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pz-now{font-weight:inherit}
.pz-now.on{color:var(--sale,#9b2f2f)}
.pz-was{margin-left:7px;font-size:.82em;font-weight:400;color:var(--soft,#8a8579);text-decoration:line-through}
.pz-off{margin-left:7px;font-size:.72em;font-weight:700;letter-spacing:.04em;color:var(--sale,#0a5d2c);background:var(--brand-l,#eaf6ee);border-radius:min(var(--radius,14px),4px);padding:2px 5px;vertical-align:middle}

/* A description written in bullets stays bullets. The markup is ours; the text is
   escaped before it gets here, so nothing a shopkeeper pastes can become markup. */
.rt p{margin:0 0 8px}
.rt p:last-child,.rt ul:last-child{margin-bottom:0}
.rt-list{margin:0 0 10px;padding-left:18px}
.rt-list li{margin-bottom:4px;line-height:1.55}

/* ── Photo zoom ────────────────────────────────────────────────────────────
   A customer buying cloth wants to see the weave. On a phone that is pinching;
   on a desktop the picture grows under the cursor. Nothing extra is downloaded —
   the image being enlarged is the one already on the page. */
.zx-hero{cursor:zoom-in;will-change:transform}
.pd-img{position:relative}
.zx-badge{
  position:absolute;right:10px;bottom:10px;z-index:2;pointer-events:none;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:14px;line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.16)
}
html.zx-open{overflow:hidden}

.zx-back{position:fixed;inset:0;z-index:9000;background:var(--paper,#f7f6f2);display:flex;
         flex-direction:column;align-items:center;justify-content:center}
.zx-back[hidden]{display:none}
.zx-stage{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;
          overflow:hidden;touch-action:none;cursor:zoom-in}
.zx-img{max-width:92vw;max-height:82vh;object-fit:contain;transform-origin:center center;
        user-select:none;-webkit-user-drag:none;display:block}
.zx-close{position:absolute;top:14px;right:16px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;
          background:rgba(255,255,255,.9);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;
          box-shadow:0 1px 8px rgba(0,0,0,.14)}
.zx-bar{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);z-index:3;display:flex;
        align-items:center;gap:4px;background:rgba(255,255,255,.94);border-radius:var(--pill,999px);padding:5px 7px;
        box-shadow:0 2px 12px rgba(0,0,0,.14)}
.zx-btn{width:38px;height:38px;border:0;background:none;border-radius:50%;font-size:19px;line-height:1;
        cursor:pointer;color:var(--ink)}
.zx-btn:hover{background:rgba(0,0,0,.06)}
.zx-level{min-width:38px;text-align:center;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--soft,#77776f)}
.zx-rail{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px;
         max-width:92vw;overflow-x:auto;padding:3px}
.zx-rail[hidden]{display:none}
.zx-thumb{width:52px;height:66px;flex:none;border:1px solid rgba(0,0,0,.12);border-radius:min(var(--radius,14px),5px);padding:0;
          background-size:cover;background-position:50% 18%;cursor:pointer;opacity:.62}
.zx-thumb.on{opacity:1;outline:1.5px solid var(--ink);outline-offset:1px}
.zx-hint{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;margin:0;
         font-size:12px;color:var(--soft,#77776f);text-align:center;padding:0 54px}
@media (max-width:600px){
  .zx-bar{bottom:96px}
  .zx-hint{font-size:11.5px;padding:0 60px}
}
@media (prefers-reduced-motion:reduce){ .zx-img,.zx-hero{transition:none!important} }

/* ==== product page: the decision above the fold ==================================
   Measured on a live 390x844 phone: "Add to bag" sat at y=896 on a one-photo product
   and y=945 on one with a gallery - 52px and 101px below the fold, on the exact screen
   an advert pays to reach. Desktop was never affected (y=380 of a 900px fold), so every
   reclaim below is phone-only.

   The photograph is deliberately NOT touched. At 472px it is 56% of the fold, and across
   seven real selling pages measured at this size the lead image ran 56-82%. It is the one
   thing on the first screen already doing its job. The space comes from the chrome around
   it instead. */
@media(max-width:640px){
  .pd.block{padding-top:12px}
  .pd .back{font-size:13px;margin-bottom:8px}
  /* The strip is a desk gesture. On a phone the photograph already swipes, so the
     thumbnails were spending 85px of the first screen showing a customer what their
     thumb was about to do anyway. Hidden, never removed: it is still what zoom reads,
     what swipe steps through and what the colour picker rebuilds. Dots take its place. */
  .pd-thumbs{display:none}
  .pd-gallery{gap:0}
  .pd-grid{gap:14px}
  .pd-price{margin-bottom:10px}
  .pd-form{margin-top:10px;gap:10px}
  .pd-opt{margin-bottom:10px}
}

/* gallery dots - the count, where a thumb can see it */
.pd-dots{display:none}
@media(max-width:640px){
  .pd-dots{position:absolute;left:0;right:0;bottom:11px;z-index:2;pointer-events:none;
    display:flex;justify-content:center;align-items:center;gap:6px}
  .pd-dots[hidden]{display:none}
  .pd-dots i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.55;
    box-shadow:0 0 0 1px rgba(0,0,0,.22);transition:width .16s ease,opacity .16s ease}
  .pd-dots i.on{opacity:1;width:17px;border-radius:3px}
}

/* the persistent order bar - a way to buy, at every scroll position.
   Same corner, same z-index and the same tab-bar swap the mobile checkout already uses,
   so the shop has one answer to this and not two. The space it occupies is reserved on
   every product page whether the bar is showing or not, so appearing shifts nothing. */
.pd-actionbar{display:none}
@media(max-width:820px){
  body.v-product{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  body.v-product.pd-bar-on .tabbar{display:none}
  .pd-actionbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.08);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(112%);visibility:hidden;transition:transform .18s ease,visibility .18s}
  body.pd-bar-on .pd-actionbar{transform:translateY(0);visibility:visible}
  .pd-actionbar-in{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto}
  .pd-actionbar-what{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .pd-actionbar-what span{font-size:11.5px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pd-actionbar-what b{font-size:18px;font-weight:700;color:var(--ink)}
  .pd-actionbar .btn{flex:1;margin:0;white-space:nowrap;min-width:0}
}
@media (prefers-reduced-motion:reduce){ .pd-actionbar{transition:none} }

/* ==== landing pages ==============================================================
   One page, one product. A single column on every width — this is a page an advert
   lands on, not a shop to browse, and the measured pages that sell are all one column
   on a phone anyway. The shop's own tokens do all the colour and type work: a landing
   page that introduces a third typeface is a different company. */
.lp{max-width:760px;margin:0 auto;padding:0 0 40px}
.lp-b{padding:0 18px;margin:0 0 22px}
.lp-b:last-child{margin-bottom:0}

/* the photograph — 56-82% of the first screen on all seven pages measured */
.lp-b-lead{padding:0;margin-bottom:18px}
.lp-lead-bleed .lp-b-lead .pd-img{border-radius:0}
.lp-lead-inset .lp-b-lead{padding:0 18px}
.lp-lead-split .lp-b-lead{padding:0 18px}
.lp-lead-split .lp-b-lead .pd-img{aspect-ratio:1/1}
.lp-b-lead .pd-img{width:100%}

.lp-h1{font-family:var(--font-display,inherit);font-weight:600;font-size:clamp(24px,5vw,34px);
  letter-spacing:-.01em;line-height:1.14;margin:0 0 6px;text-wrap:balance}
.lp-h2{font-family:var(--font-display,inherit);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 12px}
.lp-b-name .pd-price{margin-bottom:0}
.lp-b-name .pd-low{margin:8px 0 0}

/* the merchant's own sentence — the block that stops forty pages sounding like one */
.lp-b-promise p{font-family:var(--font-display,inherit);font-size:clamp(18px,3.4vw,23px);
  line-height:1.35;color:var(--ink);margin:0;text-wrap:balance}

.lp-b-chooser .pd-opt:last-child{margin-bottom:0}
.lp-b-order .pd-actions{max-width:420px}

.lp-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;
  font-size:13px;color:var(--soft)}
.lp-chips li::before{content:"✓";margin-right:6px;color:var(--accent)}

.lp-b-reasons ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lp-b-reasons li{padding-left:22px;position:relative;color:var(--ink2,var(--ink));font-size:15.5px;line-height:1.5}
.lp-b-reasons li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}

.lp-b-detail{display:flex;flex-direction:column;gap:10px;padding:0}
.lp-b-detail img{width:100%;height:auto;display:block;border-radius:var(--radius)}
.lp-lead-bleed .lp-b-detail img{border-radius:0}

.lp-b-story{border-top:1px solid var(--line);padding-top:20px}
.lp-b-story p{color:var(--ink2,var(--soft));font-size:15.5px;line-height:1.65;margin:0;max-width:60ch}

.lp-pay{margin:0 0 8px;font-size:14.5px;color:var(--ink2,var(--soft));line-height:1.55}
.lp-pay b{color:var(--ink)}

/* companions LINK, they never transact — measured on a real page, eight buy buttons for
   other products against two for the one the advert paid for */
.lp-comp{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lp-comp-c{display:block;color:inherit}
.lp-comp-i{display:block;width:100%;aspect-ratio:var(--card-ratio,1/1);background:var(--cream) center/cover no-repeat;
  border-radius:var(--radius);margin-bottom:8px}
.lp-comp-n{display:block;font-size:14px;line-height:1.35;margin-bottom:2px}
.lp-comp-p{display:block;font-size:14px;font-weight:600;color:var(--ink)}

.lp-b-ask{border-top:1px solid var(--line);padding-top:20px}
.lp-ask-h{margin:0 0 12px;font-size:15.5px;color:var(--ink)}
.lp-ask-l{display:flex;flex-wrap:wrap;gap:10px}

@media(min-width:641px){
  .lp-b{padding-left:0;padding-right:0}
  .lp-lead-inset .lp-b-lead,.lp-lead-split .lp-b-lead{padding:0}
  .lp{padding-left:18px;padding-right:18px}
  .lp-comp{grid-template-columns:repeat(4,1fr)}
}

/* ---- a landing page is a standalone document ---------------------------------------
   No nav, no search, no bag, no tab bar, no footer of collections. An advert paid to put
   somebody on this page; every link off it is a way to waste that. */
body.v-landing{padding-bottom:calc(78px + env(safe-area-inset-bottom));background:var(--bg,var(--paper))}
.lp-mast{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;border-bottom:1px solid var(--line);background:var(--hdr-bg,var(--card,#fff))}
.lp-mark{display:flex;align-items:center;font-family:var(--font-display,inherit);font-weight:600;
  font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);min-width:0}
.lp-mark img,.lp-mark .brand-logo{max-height:34px;width:auto;display:block}
.lp-mast-reach{display:flex;align-items:center;gap:14px;flex:none;font-size:12.5px;white-space:nowrap}
.lp-mast-reach a{color:var(--ink)}
/* The freeship strip belongs to the shop's identity as much as its colours do. */
body.v-landing .freeship-bar{background:linear-gradient(90deg,var(--brand-d),var(--brand));color:#fff;
  text-align:center;font-size:12.5px;font-weight:700;padding:7px 14px;letter-spacing:.2px}
body.v-landing .freeship-bar.qualified{background:linear-gradient(90deg,var(--accent),var(--accent))}
@media(max-width:480px){
  .lp-mast{padding:10px 14px}
  .lp-mark img,.lp-mark .brand-logo{max-height:28px}
  .lp-mast-reach{gap:10px;font-size:12px}
}

.lp-order-h{margin-bottom:4px}
.lp-order-note{margin:0 0 14px;font-size:13.5px;color:var(--soft)}
.lp-soldout{margin:0;font-size:15px;color:var(--soft)}
.lp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.lp-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;min-width:0}
.lp-f-wide{grid-column:1/-1}
.lp-f>span{color:var(--ink)}
.lp-f input,.lp-f select,.lp-f textarea{font:inherit;font-size:16px;font-weight:400;padding:11px 12px;
  border:1px solid var(--line);border-radius:calc(var(--radius) / 2);background:var(--card);
  box-sizing:border-box;width:100%;color:var(--ink)}
.lp-f textarea{resize:vertical;min-height:64px}
.lp-f input:focus,.lp-f select:focus,.lp-f textarea:focus{outline:none;border-color:var(--ink)}
.lp-pays{display:flex;flex-wrap:wrap;gap:9px;margin-top:5px}
.lp-payopt{position:relative;cursor:pointer}
.lp-payopt input{position:absolute;opacity:0;width:0;height:0}
.lp-payopt>span{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);
  border-radius:calc(var(--radius) / 2);font-size:14px;font-weight:400;background:var(--card)}
.lp-payopt input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.lp-bkash{background:var(--brand-l,var(--cream));border:1px solid var(--line);
  border-radius:calc(var(--radius) / 2);padding:12px;gap:12px;display:flex;flex-direction:column}
.lp-bkash[hidden]{display:none}
.lp-bkash-n{margin:0;font-size:13.5px;font-weight:400;color:var(--ink2,var(--ink))}
.lp-total{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;
  border-top:1px solid var(--line);margin-bottom:12px;font-size:14px;color:var(--soft)}
.lp-total b{font-size:21px;color:var(--ink)}
.lp-total[hidden]{display:none}
.lp-err{margin:0 0 12px;padding:11px 13px;border-radius:calc(var(--radius) / 2);
  background:#fdecec;border:1px solid #f3c9c9;color:#8a2b2b;font-size:14px}
.lp-err[hidden]{display:none}
.lp-done[hidden]{display:none}
.lp-done{background:var(--brand-l,var(--cream));border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;margin-left:18px;margin-right:18px}
.lp-done-n{margin:0 0 6px;font-size:16px}
.lp-done-n b{font-size:19px}
.lp-done-w{margin:0;font-size:14px;color:var(--soft)}

body.v-landing .ft{margin-top:34px}

@media(max-width:600px){
  .lp-fields{grid-template-columns:1fr}
  .lp-done{margin-left:0;margin-right:0;border-radius:0;border-left:0;border-right:0}
}