/* iOS-style look for the buyer pages (storefront, profile, payment, sheets) in light and dark.
 * Every rule hangs off [data-scheme], which ios.js sets only on buyer pages, so the admin
 * panels are untouched. Loaded after design.css; the shop's accent colour still drives the
 * filled buttons and the badges. */

:root[data-scheme]{
  --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ios-radius:14px;--ios-radius-lg:22px;
}
:root[data-scheme="light"]{
  color-scheme:light;
  --ios-bg:#f2f2f7;--ios-card:#fff;--ios-card-2:#f2f2f7;--ios-label:#000;--ios-label-2:#606064;--ios-label-3:#68686e;
  --ios-sep:rgba(60,60,67,.16);--ios-fill:rgba(118,118,128,.12);--ios-fill-strong:rgba(118,118,128,.2);
  --ios-bar:rgba(249,249,249,.82);--ios-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --ios-sheet:#f2f2f7;--ios-backdrop:rgba(0,0,0,.32);--ios-blue:#005ecb;--ios-green:#187d37;--ios-red:#c62820;
}
:root[data-scheme="dark"]{
  color-scheme:dark;
  --ios-bg:#000;--ios-card:#1c1c1e;--ios-card-2:#2c2c2e;--ios-label:#fff;--ios-label-2:#b0b0b8;--ios-label-3:#a3a3ac;
  --ios-sep:rgba(84,84,88,.55);--ios-fill:rgba(118,118,128,.24);--ios-fill-strong:rgba(118,118,128,.36);
  --ios-bar:rgba(22,22,24,.78);--ios-shadow:none;
  --ios-sheet:#1c1c1e;--ios-backdrop:rgba(0,0,0,.55);--ios-blue:#0a84ff;--ios-green:#30d158;--ios-red:#ff453a;
}
[data-scheme] body{background:var(--ios-bg);color:var(--ios-label);font-family:var(--ios-font);-webkit-font-smoothing:antialiased}
[data-scheme] button,[data-scheme] input,[data-scheme] select,[data-scheme] textarea{font-family:inherit}

/* ---- Storefront shell -------------------------------------------------- */
[data-scheme] .location-store,[data-scheme] .profile-page,[data-scheme] .payment-page{
  --surface:var(--ios-card);--canvas:var(--ios-bg);--text:var(--ios-label);--secondary:var(--ios-label-2);--border:var(--ios-sep);
  --tint:var(--ios-blue);
  background:var(--ios-bg);color:var(--ios-label);font-family:var(--ios-font);letter-spacing:0;
}
[data-scheme] .location-store h1,[data-scheme] .location-store h2,[data-scheme] .location-store h3,
[data-scheme] .profile-page h1,[data-scheme] .profile-page h2,[data-scheme] .payment-page h1,[data-scheme] .payment-page h2{font-family:var(--ios-font);letter-spacing:-.022em}

/* Navigation bar: translucent, sticky, hairline underneath. */
[data-scheme] .location-store .location-nav{
  position:sticky;top:0;z-index:20;width:auto;max-width:none;margin:0 -28px;padding:10px 28px;min-height:56px;gap:10px;
  background:var(--ios-bar);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:.5px solid var(--ios-sep);
}
[data-scheme] .location-store .location-nav>*{max-width:1200px}
[data-scheme] .location-nav .brand{color:var(--ios-label);font-size:17px;font-weight:600;letter-spacing:-.022em;gap:10px}
[data-scheme] .location-nav .brand em{color:var(--ios-label-2);font-size:12px;font-weight:400;margin-top:1px}
[data-scheme] .brand-mark{border-radius:9px;background:var(--ios-label);color:var(--ios-bg);font-family:var(--ios-font);font-weight:700}
[data-scheme] .location-nav-actions{gap:6px;align-items:center}
[data-scheme] .location-nav-actions .nav-link{color:var(--tint);font-size:15px;font-weight:500;min-height:36px;padding:0 10px;border-radius:10px;background:transparent}
[data-scheme] .location-nav-actions .nav-link:hover{background:var(--ios-fill)}
[data-scheme] .location-cart,[data-scheme] .theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;min-height:38px;padding:0 10px;
  border:0;border-radius:999px;background:var(--ios-fill);color:var(--ios-label);font-size:14px;font-weight:600;cursor:pointer;
}
[data-scheme] .theme-toggle{width:38px;padding:0}
[data-scheme] .theme-toggle svg{width:20px;height:20px}
[data-scheme] .location-cart:active,[data-scheme] .theme-toggle:active{background:var(--ios-fill-strong)}
[data-scheme] .location-cart span{min-width:20px;height:20px;background:var(--shop-accent,#d8fa46);color:var(--shop-accent-ink,#152018);font-size:12px;font-weight:700}

/* Location: an inset list cell. */
[data-scheme] .location-shortcut{
  gap:10px;max-width:none;padding:11px 14px;border:0;border-radius:var(--ios-radius);background:var(--ios-card);color:var(--ios-label);
  font-size:16px;font-weight:500;box-shadow:var(--ios-shadow);
}
[data-scheme] .location-shortcut svg{color:var(--tint)}
[data-scheme] .location-shortcut span{max-width:none;flex:1}
[data-scheme] .location-shortcut b{font-size:0;width:9px;height:9px;border-right:2px solid var(--ios-label-3);border-bottom:2px solid var(--ios-label-3);transform:rotate(-45deg);margin-right:4px}

/* Hero: a rounded brand card, white text on a deep gradient. */
[data-scheme] .location-store>main{max-width:1200px;padding:0 0 40px}
[data-scheme] .location-hero{
  border-radius:var(--ios-radius-lg);padding:28px 30px!important;margin:18px 0 16px;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--shop-accent,#d8fa46) 55%,transparent),transparent 62%),linear-gradient(160deg,#17181c,#0b0b0e);
  color:#fff;box-shadow:var(--ios-shadow);
}
[data-scheme] .location-hero:after{display:none}
[data-scheme] .location-hero-art{display:none!important}
[data-scheme] .location-hero-copy>small{color:var(--shop-accent,#d8fa46);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none}
[data-scheme] .location-hero h1{font-size:clamp(26px,3.4vw,36px)!important;font-weight:700;letter-spacing:-.03em;color:#fff}
[data-scheme] .location-hero-copy>p{color:rgba(255,255,255,.72)}
[data-scheme] .location-hero-copy .catalog-primary,[data-scheme] .primary-btn{
  background:var(--shop-accent,#d8fa46);color:var(--shop-accent-ink,#152018);border:0;border-radius:14px;min-height:50px;font-size:17px;font-weight:600;
}
[data-scheme] .location-hero .location-contact-btn{
  background:rgba(255,255,255,.14)!important;color:#fff!important;border:0!important;border-radius:999px!important;min-height:38px!important;font-size:14px!important;font-weight:500;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
[data-scheme] .outline-btn{background:var(--ios-fill);color:var(--tint);border:0;border-radius:12px;min-height:44px;font-size:16px;font-weight:600}
[data-scheme] .outline-btn:active{background:var(--ios-fill-strong)}
[data-scheme] .location-store[data-theme="clean"] .location-hero,[data-scheme] .location-store[data-theme="night"] .location-hero{color:#fff}
[data-scheme] .location-store[data-theme="clean"] .location-hero h1,[data-scheme] .location-store[data-theme="clean"] .location-hero-copy>p{color:#fff}
[data-scheme] .location-store[data-theme="clean"] .location-hero-copy>p{color:rgba(255,255,255,.72)}
[data-scheme] .location-store[data-theme="clean"] .location-contact-btn{color:#fff!important}

/* Catalogue panel and steps: grouped cards without hard borders. */
[data-scheme] .location-panel{background:var(--ios-card);border:0;border-radius:var(--ios-radius-lg)!important;padding:22px!important;box-shadow:var(--ios-shadow)!important}
[data-scheme] .location-panel-head small,[data-scheme] .location-selected small,[data-scheme] .location-step>small,[data-scheme] .panel-kicker{color:var(--ios-label-2);font-size:12px!important;font-weight:600;letter-spacing:.04em}
[data-scheme] .location-panel-head h2{font-size:clamp(24px,3vw,30px)!important;font-weight:700}
[data-scheme] .location-count{background:var(--ios-fill);color:var(--ios-label-2);font-weight:500}
[data-scheme] .location-step{background:var(--ios-card-2)!important;border-radius:var(--ios-radius)!important}
[data-scheme] .location-step p,[data-scheme] .location-empty span,[data-scheme] .location-empty{color:var(--ios-label-2)}
[data-scheme] .location-empty{background:var(--ios-card);border-color:var(--ios-sep);border-radius:var(--ios-radius)}
[data-scheme] .location-empty b{color:var(--ios-label)}
[data-scheme] .location-choice-list{gap:8px!important}
[data-scheme] .location-choice{background:var(--ios-card)!important;border:0!important;border-radius:12px!important;color:var(--ios-label)!important;font-size:17px!important;box-shadow:none}
[data-scheme] .location-choice:hover,[data-scheme] .location-choice.selected{background:var(--ios-fill)!important;box-shadow:none}
[data-scheme] .location-selected{background:var(--ios-card-2);border:0;border-radius:var(--ios-radius)}
[data-scheme] .location-selected b{color:var(--ios-label)}
[data-scheme] .location-selected button,[data-scheme] .location-crumbs button{background:transparent;color:var(--tint);font-weight:500}
[data-scheme] .location-kind-filter{background:transparent!important}
[data-scheme] .location-kind-filter>span{color:var(--ios-label-2);font-weight:500}
[data-scheme] .location-products-head{color:var(--ios-label-2);font-size:14px}

/* Chips become a segmented row. */
[data-scheme] .chip{background:var(--ios-fill)!important;color:var(--ios-label)!important;border:0!important;border-radius:999px!important;font-weight:500;min-height:36px!important}
[data-scheme] .chip.active{background:var(--shop-accent,#d8fa46)!important;color:var(--shop-accent-ink,#152018)!important;font-weight:600}

/* Product cards. */
[data-scheme] .location-product-card{background:var(--ios-card-2)!important;border:0!important;border-radius:18px!important;box-shadow:none}
[data-scheme] .location-product-card:hover{box-shadow:var(--ios-shadow);transform:translateY(-2px)}
[data-scheme] .location-product-card .product-visual{background-color:var(--ios-fill)}
[data-scheme] .product-no-photo{color:var(--ios-label-3)}
[data-scheme] .location-product-card .product-body small{color:var(--ios-label-2)!important;font-weight:500;letter-spacing:0;text-transform:none}
[data-scheme] .location-product-card h3{color:var(--ios-label);font-size:17px!important;font-weight:600}
[data-scheme] .location-product-card .product-description{color:var(--ios-label-2)}
[data-scheme] .location-product-card .price{color:var(--ios-label);font-weight:700;font-size:20px!important;letter-spacing:-.02em}
[data-scheme] .location-product-card .add{background:var(--shop-accent,#d8fa46)!important;color:var(--shop-accent-ink,#152018)!important;border-radius:999px!important;font-weight:600;min-height:40px}
[data-scheme] .stock-badge{background:var(--ios-card);border:0;color:#b25e00;box-shadow:var(--ios-shadow)}
:root[data-scheme="dark"] .stock-badge{color:#ffb340}

[data-scheme] .location-footer{color:var(--ios-label-2);width:auto;max-width:1200px;padding:18px 0 8px!important}
[data-scheme] .location-footer button{background:var(--ios-card);color:var(--tint);border:0;border-radius:12px;font-weight:600;box-shadow:var(--ios-shadow)}
[data-scheme] .partner-ad{background:transparent;color:var(--ios-label-3)}
[data-scheme] .partner-ad a{color:var(--tint)}

/* ---- Tab bar (phones) ---------------------------------------------------- */
@media(max-width:720px){
  [data-scheme] .location-store{padding:0 16px calc(150px + env(safe-area-inset-bottom))}
  [data-scheme] .location-store .location-nav{margin:0 -16px;padding:8px 16px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:8px;align-items:center}
  [data-scheme] .location-store .location-nav .brand>span:last-child{max-width:none;font-size:17px}
  [data-scheme] .location-store .location-nav-actions{gap:4px}
  /* The tab bar carries navigation; the header keeps sign-in, theme and cart. */
  [data-scheme] .location-store .location-nav-actions .nav-link[data-menu-target]{display:none}
  [data-scheme] .location-store .location-nav-actions .nav-link{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}
  [data-scheme] .location-store .location-nav .location-cart{min-width:38px}
  [data-scheme] .location-hero .location-contact{display:none}
  [data-scheme] .location-panel{padding:18px!important}
  [data-scheme] .location-store>main>.location-panel{margin-top:12px!important}
  [data-scheme] .location-store>main>.location-hero{padding:20px!important;margin:12px 0!important}
  [data-scheme] .location-footer{padding-bottom:0!important}
  [data-scheme] .mobile-store-nav{
    background:var(--ios-bar);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
    border-top:.5px solid var(--ios-sep);padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  [data-scheme] .mobile-store-nav button{color:var(--ios-label-3);gap:3px;min-height:48px;font-size:10px;font-weight:500;letter-spacing:.01em;background:transparent;border-radius:10px}
  [data-scheme] .mobile-store-nav button:active{background:var(--ios-fill)}
  [data-scheme] .mobile-store-nav button[aria-current="page"]{color:var(--tint);font-weight:600}
  [data-scheme] .mobile-store-nav svg{width:26px;height:26px;stroke-width:1.5}
  [data-scheme] .mobile-store-nav .tab-icon{position:relative;display:grid}
  [data-scheme] .tab-badge{position:absolute;top:-4px;left:calc(100% - 12px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ios-red);color:#fff;font:600 11px/18px var(--ios-font);font-style:normal;text-align:center}
  [data-scheme] .cart-summary-bar{background:var(--shop-accent,#d8fa46);color:var(--shop-accent-ink,#152018);border:0;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.22);font-weight:600}
}

/* ---- Sheets ---------------------------------------------------------------- */
dialog.ios-sheet{
  position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(100%,520px);max-width:none;max-height:min(86dvh,720px);padding:0;border:0;overflow:hidden;
  border-radius:var(--ios-radius-lg) var(--ios-radius-lg) 0 0;background:var(--ios-sheet,#f2f2f7);color:var(--ios-label,#000);font-family:var(--ios-font);
  box-shadow:0 -10px 50px rgba(0,0,0,.25);animation:ios-sheet-in .32s cubic-bezier(.2,.9,.25,1);
}
dialog.ios-sheet[open]{display:flex;flex-direction:column}
dialog.ios-sheet::backdrop{background:var(--ios-backdrop,rgba(0,0,0,.35));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:ios-fade .25s ease}
@keyframes ios-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes ios-fade{from{opacity:0}to{opacity:1}}
@media(min-width:721px){dialog.ios-sheet{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:var(--ios-radius-lg);animation:ios-pop .22s ease}@keyframes ios-pop{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}}
.ios-sheet-grab{width:36px;height:5px;border-radius:3px;background:var(--ios-fill-strong);margin:8px auto 0;flex:none}
.ios-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 6px 20px;flex:none}
.ios-sheet-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.022em}
.ios-sheet-done{min-height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--ios-fill);color:var(--ios-blue);font-size:16px;font-weight:600;cursor:pointer}
.ios-sheet-body{padding:8px 16px calc(20px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
.ios-sheet-note{margin:4px 4px 12px;font-size:14px;line-height:1.45;color:var(--ios-label-2)}
.ios-list{background:var(--ios-card);border-radius:var(--ios-radius);overflow:hidden}
.ios-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;color:var(--ios-label);text-decoration:none;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ios-row+.ios-row:before{content:"";position:absolute;top:0;left:62px;right:0;border-top:.5px solid var(--ios-sep)}
.ios-row:active{background:var(--ios-fill)}
.ios-row-label{flex:1;min-width:0;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.ios-row-label small{display:block;margin-top:2px;font-size:13px;color:var(--ios-label-2)}
.ios-row-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--ios-blue);color:#fff}
.ios-row-icon svg{width:20px;height:20px}
.ios-row-icon.is-bot{background:#5856d6}.ios-row-icon.is-operator{background:#34c759}.ios-row-icon.is-channel{background:#ff9500}
.ios-row-icon.is-chat{background:#007aff}.ios-row-icon.is-custom{background:#8e8e93}.ios-row-icon.is-orders{background:#ff6b3d}
.ios-row-go{display:grid;color:var(--ios-label-3)}.ios-row-go svg{width:16px;height:16px}
.ios-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:22px 12px 6px}
.ios-empty .ios-row-icon{width:60px;height:60px;border-radius:16px}.ios-empty .ios-row-icon svg{width:30px;height:30px}
.ios-empty b{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.ios-empty p{margin:0;max-width:34ch;font-size:15px;line-height:1.5;color:var(--ios-label-2)}
.ios-sheet-action{width:100%;margin-top:14px}

/* Appearance sheet: two thumbnails and an automatic switch, like iOS Settings. */
.scheme-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 6px 18px}
.scheme-choice{display:grid;justify-items:center;gap:8px;background:transparent;border:0;color:var(--ios-label);font-size:15px;cursor:pointer;padding:0}
.scheme-choice b{font-weight:500}
.scheme-thumb{display:grid;align-content:start;gap:5px;width:100%;max-width:150px;aspect-ratio:3/4;padding:12px 10px;border-radius:14px;border:2px solid transparent;outline:1px solid var(--ios-sep);box-sizing:border-box}
.scheme-thumb i{display:block;height:11px;border-radius:4px}
.scheme-thumb i:first-child{height:7px;width:46%}.scheme-thumb i:nth-child(2){height:34px;border-radius:7px}
.scheme-thumb.is-light{background:#f2f2f7}.scheme-thumb.is-light i{background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.08)}.scheme-thumb.is-light i:first-child{background:#c7c7cc}
.scheme-thumb.is-dark{background:#000}.scheme-thumb.is-dark i{background:#2c2c2e}.scheme-thumb.is-dark i:first-child{background:#636366}
.scheme-choice.is-selected .scheme-thumb{border-color:var(--ios-blue);outline-color:transparent}
.scheme-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ios-label-3);position:relative}
.scheme-choice.is-selected .scheme-check{background:var(--ios-blue);border-color:var(--ios-blue)}
.scheme-choice.is-selected .scheme-check:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ios-row-switch{justify-content:space-between}.ios-row-switch:before{display:none}
.ios-switch{appearance:none;-webkit-appearance:none;flex:none;width:51px;height:31px;border-radius:16px;background:var(--ios-fill-strong);position:relative;cursor:pointer;transition:background .2s;margin:0}
.ios-switch:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .2s}
.ios-switch:checked{background:var(--ios-green)}.ios-switch:checked:after{transform:translateX(20px)}
.ios-row-switch .ios-row-label{padding-left:2px}

/* ---- Existing modals, location picker, toast ------------------------------------- */
[data-scheme] .modal-backdrop{background:var(--ios-backdrop);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
[data-scheme] .modal,[data-scheme] .location-dialog{background:var(--ios-sheet);color:var(--ios-label);border:0;border-radius:var(--ios-radius-lg);font-family:var(--ios-font);box-shadow:0 20px 70px rgba(0,0,0,.3)}
[data-scheme] .location-dialog::backdrop{background:var(--ios-backdrop)}
[data-scheme] .modal h1,[data-scheme] .modal h2,[data-scheme] .modal h3,[data-scheme] .location-dialog h2{font-family:var(--ios-font);color:var(--ios-label);letter-spacing:-.022em}
[data-scheme] .modal p,[data-scheme] .location-dialog p,[data-scheme] .modal small,[data-scheme] .settings-note{color:var(--ios-label-2)}
[data-scheme] .modal label,[data-scheme] .location-dialog label{color:var(--ios-label)}
[data-scheme] .modal-close,[data-scheme] .location-dialog .modal-close{background:var(--ios-fill);color:var(--ios-label-2);border-radius:50%;border:0}
[data-scheme] .modal input,[data-scheme] .modal select,[data-scheme] .modal textarea,[data-scheme] .location-dialog select,
[data-scheme] .profile-page input,[data-scheme] .profile-page select{
  background:var(--ios-card);color:var(--ios-label);border:0;border-radius:12px;min-height:46px;font-size:17px;padding:0 14px;box-shadow:inset 0 0 0 .5px var(--ios-sep)
}
[data-scheme] .modal input::placeholder{color:var(--ios-label-3)}
[data-scheme] .modal input:focus-visible,[data-scheme] .modal select:focus-visible,[data-scheme] .location-dialog select:focus-visible{outline:2px solid var(--ios-blue);outline-offset:1px}
[data-scheme] .auth-tabs{background:var(--ios-fill);border-radius:10px;padding:2px;gap:2px;border:0}
[data-scheme] .auth-tabs button{border-radius:8px;color:var(--ios-label);font-weight:500;background:transparent;border:0}
[data-scheme] .auth-tabs button.active{background:var(--ios-card);box-shadow:0 1px 3px rgba(0,0,0,.18);font-weight:600}
[data-scheme] .modal hr,[data-scheme] .modal .cart-row,[data-scheme] .modal .cart-item{border-color:var(--ios-sep)}
@media(max-width:720px){
  [data-scheme] .modal-backdrop{align-items:flex-end;padding:0}
  [data-scheme] .modal-backdrop>.modal{width:100%;max-width:none;border-radius:var(--ios-radius-lg) var(--ios-radius-lg) 0 0;max-height:92dvh;padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:ios-sheet-in .32s cubic-bezier(.2,.9,.25,1)}
  [data-scheme] .location-dialog{border-radius:var(--ios-radius-lg) var(--ios-radius-lg) 0 0}
}
[data-scheme] .toast{
  background:rgba(40,40,44,.88);color:#fff;border-radius:999px;padding:11px 18px;font:500 15px/1.3 var(--ios-font);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.28);border:0
}
:root[data-scheme="dark"] .toast{background:rgba(72,72,76,.85)}
[data-scheme] .toast-action button{background:var(--shop-accent,#d8fa46);color:var(--shop-accent-ink,#152018);border-radius:999px}

/* ---- Profile ---------------------------------------------------------------------- */
[data-scheme] .profile-bar{position:sticky;top:0;z-index:20;width:auto;max-width:none;margin:0 -20px;padding:10px 20px;gap:10px;background:var(--ios-bar);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:.5px solid var(--ios-sep)}
[data-scheme] .profile-bar>.profile-brand{flex:1;justify-content:center;font-weight:600}
[data-scheme] .profile-bar .outline-btn{min-height:36px;padding:0 12px;background:transparent;color:var(--tint)}
[data-scheme] .profile-bar .outline-btn:active{background:var(--ios-fill)}
[data-scheme] .profile-card,[data-scheme] .profile-panel{background:var(--ios-card);border:0;border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow)}
[data-scheme] .profile-id h1{font-weight:700}
[data-scheme] .profile-id p,[data-scheme] .profile-guest p{color:var(--ios-label-2)}
[data-scheme] .balance-card{background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--shop-accent,#d8fa46) 55%,transparent),transparent 62%),linear-gradient(160deg,#17181c,#0b0b0e);color:#fff;border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow)}
[data-scheme] .balance-card small{color:var(--shop-accent,#d8fa46);letter-spacing:.06em}
[data-scheme] .panel-head h2{font-weight:700}
[data-scheme] .balance-row{background:var(--ios-card-2);border:0;border-radius:var(--ios-radius)}
[data-scheme] .balance-row small{color:var(--ios-label-2)}
[data-scheme] .balance-ico{background:rgba(52,199,89,.16);color:var(--ios-green)}
[data-scheme] .balance-row.is-spend .balance-ico{background:var(--ios-fill);color:var(--ios-label-2)}
[data-scheme] .balance-row.is-new{background:color-mix(in srgb,var(--shop-accent,#d8fa46) 22%,var(--ios-card-2))}
[data-scheme] .profile-order{background:var(--ios-card-2);border:0;border-radius:var(--ios-radius)}
[data-scheme] .profile-page[data-theme] {--surface:var(--ios-card);--canvas:var(--ios-bg);--text:var(--ios-label);--secondary:var(--ios-label-2);--border:var(--ios-sep)}
[data-scheme] .topup-modal .field input,[data-scheme] .topup-modal .field select{background:var(--ios-card);border:0}
[data-scheme] .account-balance{background:var(--shop-accent,#d8fa46);color:var(--shop-accent-ink,#152018)}
@media(max-width:720px){[data-scheme] .profile-bar{margin:0 -14px;padding:8px 14px}}

/* ---- Payment pages ------------------------------------------------------------------ */
[data-scheme] .auth-page,[data-scheme] .payment-page{background:var(--ios-bg);color:var(--ios-label);font-family:var(--ios-font)}
[data-scheme] .payment-card,[data-scheme] .auth-card{background:var(--ios-card);color:var(--ios-label);border:0;border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow)}
[data-scheme] .payment-card h1,[data-scheme] .payment-card h2,[data-scheme] .payment-card h3,[data-scheme] .payment-card b{color:var(--ios-label);font-family:var(--ios-font)}
[data-scheme] .payment-card p,[data-scheme] .payment-card small,[data-scheme] .payment-card span,[data-scheme] .payment-updated,[data-scheme] .payment-qr figcaption,[data-scheme] .payment-progress li{color:var(--ios-label-2)}
[data-scheme] .payment-card #invoice-details>.panel,[data-scheme] .payment-card .panel{background:var(--ios-card-2);border:0;border-radius:var(--ios-radius)}
[data-scheme] .payment-card code{background:var(--ios-fill);color:var(--ios-label);border:0;border-radius:10px}
[data-scheme] .payment-progress li{border-color:var(--ios-sep)}
[data-scheme] .payment-progress li>span{background:var(--ios-fill);color:var(--ios-label-2)}
[data-scheme] .payment-progress li.is-done{border-color:var(--ios-green);color:var(--ios-label)}
[data-scheme] .payment-progress li.is-done>span{background:var(--ios-green);color:#06280f}
[data-scheme] .payment-qr svg{border:0;border-radius:14px}
[data-scheme] .payment-alert{background:rgba(255,149,0,.14);border:0;color:#b25e00;border-radius:12px}
:root[data-scheme="dark"] .payment-alert{color:#ffb340}
[data-scheme] .payment-delivery{background:rgba(52,199,89,.12);border:0;border-radius:var(--ios-radius)}
[data-scheme] .payment-delivery h4,[data-scheme] .payment-confirmations{color:var(--ios-label)}

@media(prefers-reduced-motion:reduce){dialog.ios-sheet,dialog.ios-sheet::backdrop{animation:none}}

/* Placeholder covers follow the scheme; real photos (inline style) are left alone. */
[data-scheme] .location-product-card .product-visual:not([style]){background-image:none!important;background-color:var(--ios-fill)}
[data-scheme] .location-footer button{font-size:15px}
[data-scheme] .modal .remove-link{background:rgba(255,59,48,.14);color:var(--ios-red);border:0;border-radius:50%}
[data-scheme] .modal .primary-btn{width:100%}

/* Shop art. design.css pins .location-hero's background with !important, which
   hid the banner entirely; these selectors are more specific and also win. */
[data-scheme] .location-hero.has-logo{
  background:linear-gradient(110deg,rgba(16,20,24,.88),rgba(16,20,24,.45)),var(--hero-image) center/cover no-repeat!important;
}
[data-scheme] .location-hero.has-banner,[data-scheme] .location-store>main>.location-hero.has-banner{
  display:block!important;padding:0!important;overflow:hidden;background:#0b0b0e!important;
}
[data-scheme] .location-hero.has-banner:before{
  content:"";display:block;width:100%;height:clamp(150px,34vw,420px);
  background:var(--hero-image) center/cover no-repeat;
}
[data-scheme] .location-hero.has-banner .location-hero-copy{padding:22px 30px 28px}
/* Same banner, dimmed, behind the whole page. */
[data-scheme] .location-store.has-backdrop{position:relative;isolation:isolate}
[data-scheme] .location-store.has-backdrop:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--page-image) center top/cover no-repeat;opacity:.14;
}
:root[data-scheme="dark"] .location-store.has-backdrop:before{opacity:.3}
[data-scheme] .location-store.has-backdrop{background:transparent}
@media(max-width:700px){
  [data-scheme] .location-hero.has-banner:before{height:56vw}
  [data-scheme] .location-hero.has-banner .location-hero-copy{padding:18px 20px 22px}
}

/* Payment screen in the dark scheme: chips, buttons, the TXID form and the status line were
   still the light theme's white boxes and dark text. The QR stays white on purpose: it has to be scanned. */
:root[data-scheme="dark"] .payment-card .brand-mark{background:var(--ios-label);color:var(--ios-bg)}
:root[data-scheme="dark"] .payment-card #invoice-state,
:root[data-scheme="dark"] .payment-card > p{color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card #invoice-details>.panel p,
:root[data-scheme="dark"] .payment-card .panel p{color:var(--ios-label-2)}
:root[data-scheme="dark"] .payment-card .coin-badge,
:root[data-scheme="dark"] .payment-card .net-chip{background:var(--ios-fill-strong);border:0;color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card .coin-badge b,
:root[data-scheme="dark"] .payment-card .net-chip span{color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card .btn:not(.primary),
:root[data-scheme="dark"] .payment-card .outline-btn{background:var(--ios-fill-strong);border:0;color:#6cb3ff}
:root[data-scheme="dark"] .payment-card .form-actions .btn:not(.primary){color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card .btn.primary,
:root[data-scheme="dark"] .payment-card .primary-btn{color:#14201a}
:root[data-scheme="dark"] .payment-card details{background:var(--ios-card-2);border:0;border-radius:var(--ios-radius);color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card summary{color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card input,
:root[data-scheme="dark"] .payment-card textarea,
:root[data-scheme="dark"] .payment-card select{background:var(--ios-fill);border:0;color:var(--ios-label)}
:root[data-scheme="dark"] .payment-card input::placeholder{color:var(--ios-label-3)}
:root[data-scheme="dark"] .payment-card #invoice-details>.panel>p:nth-of-type(2) code{background:var(--lime,#d8fa46);color:#14201a}
:root[data-scheme="dark"] .payment-delivery-shot{background:var(--ios-card-2)}

/* The product page card was white in the dark scheme while its text turned white too: name and price vanished. */
[data-scheme] .location-detail-shell{background:var(--ios-card);color:var(--ios-label);border:0;border-radius:var(--ios-radius-lg);box-shadow:var(--ios-shadow)}
[data-scheme] .location-detail-shell .detail-copy small,
[data-scheme] .location-detail-shell .detail-copy p{color:var(--ios-label-2)}
[data-scheme] .location-detail-shell .detail-copy h1,
[data-scheme] .location-detail-shell .detail-price{color:var(--ios-label)}
[data-scheme] .location-detail-shell [data-back-store],
[data-scheme] .location-detail-shell .back-btn{background:var(--ios-fill);color:var(--ios-blue)}
[data-scheme] .location-detail-shell .detail-thumbs button,
[data-scheme] .location-detail-shell .detail-thumb{border-color:var(--ios-sep)}

/* Buyer components share a complete palette, including dialogs mounted under body. */
:root[data-scheme]{--ink:var(--ios-label);--ink-soft:var(--ios-label-2);--ink-faint:var(--ios-label-2);--muted:var(--ios-label-2);--line:var(--ios-sep);--hair:var(--ios-sep);--soft:var(--ios-card-2);--tint:var(--ios-blue)}
[data-scheme] :is(.location-store,.profile-page,.payment-page,.modal,.location-dialog,.ios-sheet){min-width:0;overflow-wrap:anywhere}
[data-scheme] .product-no-photo{color:var(--ios-label-2)}
[data-scheme] .location-footer button,[data-scheme] .partner-ad a{color:var(--ios-blue)}
[data-scheme] .partner-ad{background:var(--ios-card-2);color:var(--ios-label-2);border-color:var(--ios-sep)}
[data-scheme] .location-selected :is(small,span),[data-scheme] .location-step p{color:var(--ios-label-2)}
[data-scheme] .location-products-head span{color:var(--ios-label-2)}
[data-scheme] .profile-order p,[data-scheme] .profile-order .order-place{color:var(--ios-label-2)}
[data-scheme] .ref-row strong:not(.is-zero){color:var(--ios-green)}
[data-scheme] .balance-row.is-spend .balance-ico{color:var(--ios-label-2)}
[data-scheme] :is(.profile-order,.payment-card) .status-pending{color:var(--ios-label-2);background:var(--ios-fill)}
[data-scheme] .modal .remove-link{color:var(--ios-red);min-width:36px;min-height:36px}
[data-scheme] .modal .order-row{align-items:flex-start;gap:12px;border-top:0;border-bottom:1px solid var(--ios-sep)}
[data-scheme] .modal .order-row>span:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
[data-scheme] .modal .order-row>span:last-child{flex:0 0 auto;display:flex;align-items:center;gap:8px}
[data-scheme] .balance-pay{background:var(--ios-card);color:var(--ios-label);border-color:var(--ios-sep);gap:12px;flex-wrap:wrap}
[data-scheme] :is(.profile-order-head,.balance-row,.ref-row)>*{min-width:0}
[data-scheme] :is(.profile-id h1,.profile-order-head b,.ref-row b){overflow-wrap:anywhere}
[data-scheme] .ref-link{flex-wrap:wrap}
[data-scheme] .ref-link input{min-width:0;max-width:100%;flex:1 1 220px}
[data-scheme] .profile-bar .profile-brand{min-width:0}
[data-scheme] .profile-bar .profile-brand b{overflow-wrap:anywhere}
[data-scheme] .topup-own{padding:14px;border:1px solid var(--ios-sep);border-radius:14px;background:var(--ios-card)}
[data-scheme] .topup-own code{display:block;overflow-wrap:anywhere;white-space:normal;background:var(--ios-fill);color:var(--ios-label)}
[data-scheme] .topup-own button{margin-top:10px}
[data-scheme] .payment-card .form-actions{flex-wrap:wrap;gap:10px}
[data-scheme] .payment-card .form-actions>*{min-width:0;max-width:100%;white-space:normal}
[data-scheme] .payment-card :is(code,.brand b){overflow-wrap:anywhere;white-space:normal}
[data-scheme] .payment-card .brand{align-items:flex-start;min-width:0}
[data-scheme] .payment-card .brand-mark{flex:none}
[data-scheme] .payment-card details{margin:14px 0;padding:14px;background:var(--ios-card-2);color:var(--ios-label);border-radius:12px}
[data-scheme] .payment-card details input{max-width:100%;box-sizing:border-box}
[data-scheme] .payment-qr figcaption{color:#56565b}
[data-scheme] .payment-card .payment-nomemo{color:var(--ios-label-2);background:var(--ios-fill);border-color:var(--ios-sep)}
[data-scheme] .payment-card .payment-nomemo b{color:var(--ios-label)}
[data-scheme] .payment-progress li{min-width:0;overflow-wrap:anywhere}
:root[data-scheme="dark"] .payment-card :is(.outline-btn,.btn:not(.primary)){color:#a8d2ff;background:rgba(118,118,128,.18)}
[data-scheme] .modal .captcha-image{color:var(--ios-label-2)}
:root[data-scheme="dark"]{--ios-blue:#83bfff;--ios-red:#ff9990}
:root[data-scheme="light"]{--ios-green:#12632b;--ios-red:#a51f19}
[data-scheme] .payment-card .brand-mark{background:var(--ios-label);color:var(--ios-bg)}
[data-scheme] .payment-card [data-invoice-timer]{background:var(--ios-fill);color:var(--ios-label)!important}
:root[data-scheme="light"] .payment-progress li.is-done>span{color:#fff}
[data-scheme] .tab-badge{background:#b9231b}
[data-scheme] .detail-main-image:not([style]){background:var(--ios-card-2);color:var(--ios-label)}
[data-scheme] body:has(.cart-summary-bar:not([hidden])) .kv-sup-btn{bottom:calc(156px + env(safe-area-inset-bottom))}
@media(max-width:720px){
  [data-scheme] .location-nav .brand{min-width:0;flex:1}
  [data-scheme] .location-store .location-nav .brand>span:last-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  [data-scheme] .location-nav .brand-mark{flex:none}
  [data-scheme] .profile-bar .outline-btn{flex:none;font-size:14px;padding:0 8px}
  [data-scheme] .profile-order-head{gap:10px;flex-wrap:wrap}
  [data-scheme] .profile-order-head b{flex:1 1 150px}
  [data-scheme] .balance-row{grid-template-columns:32px minmax(0,1fr);gap:8px}
  [data-scheme] .balance-row>strong{grid-column:2;text-align:left}
  [data-scheme] .ref-row{grid-template-columns:32px minmax(0,1fr);gap:8px}
  [data-scheme] .ref-row>strong{grid-column:2;text-align:left}
  [data-scheme] .balance-pay button{width:100%}
  [data-scheme] .payment-card{min-width:0;width:100%;box-sizing:border-box}
  [data-scheme] .modal :is(input,select,textarea){max-width:100%;box-sizing:border-box}
}

/* Buyer layout: consistent card rhythm, long translations and touch targets. */
[data-scheme] .location-store{line-height:1.55}
[data-scheme] .location-hero-copy>p{max-width:58ch;line-height:1.65}
[data-scheme] .location-product-card{display:flex;flex-direction:column;min-width:0}
[data-scheme] .location-product-card .product-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:20px;min-width:0}
[data-scheme] .location-product-card h3{margin:0;line-height:1.4;overflow-wrap:anywhere}
[data-scheme] .location-product-card .product-description{line-height:1.6;margin:0}
[data-scheme] .location-product-card .product-foot{margin-top:auto;padding-top:6px;gap:12px;align-items:center}
[data-scheme] .location-product-card .product-foot button{min-height:44px;line-height:1.35;white-space:normal}
[data-scheme] :is(.price,.order-sum,.payment-amount,.balance-amount){font-variant-numeric:tabular-nums}
[data-scheme] :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--ios-blue,#1871c9);outline-offset:3px}
[data-scheme] :is(.ios-row,.chip,.theme-toggle,.modal-close,.ios-sheet-done){min-height:44px}
[data-scheme] .ios-row-label{min-width:0;overflow-wrap:anywhere;line-height:1.45}
[data-scheme] .ios-row-icon,[data-scheme] .ios-row-go{flex-shrink:0}
[data-scheme] .ios-sheet-head h2{line-height:1.25;overflow-wrap:anywhere}
[data-scheme] .payment-progress li{line-height:1.5}
@media(max-width:720px){
  [data-scheme] .location-product-card .product-body{padding:14px;gap:8px}
  [data-scheme] .location-product-card h3{font-size:16px!important}
  [data-scheme] :is(.modal,.ios-sheet,.location-dialog) :is(input,select,textarea){font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  [data-scheme] *,[data-scheme] *::before,[data-scheme] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* The fixed overlay is a flex container; the sheet scrolls within the visible viewport. */
@media(max-width:720px){
  [data-scheme] .modal-backdrop>.modal{margin:0;max-height:calc(100dvh - env(safe-area-inset-top) - 12px);overflow-y:auto}
}
[data-scheme] .modal :is(.cart-items,.order-row){min-width:0;overflow-wrap:anywhere}
[data-scheme] .modal .order-row{align-items:flex-start;gap:12px}
[data-scheme] .modal .order-row>span:first-child{flex:1;min-width:0}
[data-scheme] .modal .order-row>span:last-child{flex:none;max-width:48%;text-align:right}
