:root{
  --brand-bg:#F2EFE4;
  --brand-ink:#202020;
  --bg:#f8f8f6;
  --surface:#fbfbf8;
  --text:#111;
  --muted:#777;
  --accent:#111;
  --accent-text:#fff;
  --line:#deded9;
  --tg-stable-height:100dvh;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
html.sheet-open{overflow:hidden!important;overscroll-behavior:none}
body{min-width:0;min-height:var(--tg-stable-height,100dvh)}
body.sheet-open{position:fixed!important;overflow:hidden!important;overscroll-behavior:none;width:100%;left:0;right:0}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.app{max-width:720px;min-height:var(--tg-stable-height,100dvh);margin:0 auto;padding:calc(2px + var(--hottie-content-safe-top,var(--tg-content-safe-area-inset-top,0px))) 12px calc(16px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)))}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0 8px;position:sticky;top:var(--hottie-content-safe-top,var(--tg-content-safe-area-inset-top,0px));background:rgba(248,248,246,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20}
.brand-lockup{display:flex;align-items:center;gap:9px;min-width:0}
.brand-logo{width:46px;height:46px;display:block;object-fit:contain;flex:0 0 46px}
.brand-logo-fallback{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border:1px solid var(--line);font-weight:700;letter-spacing:.06em;background:var(--surface)}
.order-badge{font-size:12px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{padding:12px 2px;color:var(--muted)}
button,input,select{font:inherit;color:inherit}
button{min-height:44px;border:0;border-radius:12px;padding:10px 14px;-webkit-tap-highlight-color:transparent}
.secondary{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.primary{background:var(--accent);color:var(--accent-text);width:100%;font-weight:700}
.cart-button{white-space:nowrap;background:var(--surface);border:1px solid var(--line);position:relative;z-index:21}

.toolbar{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:10px}
.search-wrap{display:block;min-width:0}
.search-wrap input,.sheet select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:10px 12px;font-size:16px;min-width:0}
.categories{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.categories::-webkit-scrollbar{display:none}
.categories button{white-space:nowrap;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.categories button.active{background:var(--accent);color:var(--accent-text)}
.availability-toggle{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:12px;color:#444;width:max-content;max-width:100%}
.availability-toggle input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:0 0 auto}

.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;height:100%}
.media{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;touch-action:pan-y}
.media-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.media img,.media video{width:100%;height:100%;object-fit:contain;display:block}
.media video{background:#fff}
.media-placeholder{display:grid;place-items:center;width:100%;height:100%;font-size:11px;letter-spacing:.08em;color:#aaa}
.media-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;min-width:36px;width:36px;height:44px;padding:0;border-radius:12px;background:rgba(255,255,255,.84);color:var(--brand-ink);border:1px solid rgba(0,0,0,.12);font-size:28px;line-height:1}
.media-arrow.prev{left:6px}.media-arrow.next{right:6px}
.media-dots{position:absolute;z-index:5;left:8px;top:8px;display:flex;align-items:center;gap:3.5px;pointer-events:none;background:none;padding:0;max-width:calc(100% - 16px);overflow:hidden}
.media-dot{appearance:none;-webkit-appearance:none;width:3.5px;height:3.5px;min-width:3.5px!important;min-height:3.5px!important;max-width:3.5px;max-height:3.5px;padding:0;margin:0;border:0;border-radius:50%;background:rgba(17,17,17,.25);box-shadow:none;pointer-events:auto}
.media-dot.active{background:#111}
.card-body{padding:10px;display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-height:160px}
.brand{font-size:11px;font-weight:700;letter-spacing:.08em}
.name{font-size:14px;line-height:1.25;min-height:35px}
.price{font-weight:700}
.muted{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.variants{display:flex;gap:0;overflow-x:auto;min-height:32px;margin-top:auto;flex:0 0 32px}
.swatch{position:relative;appearance:none;-webkit-appearance:none;width:32px;height:32px;min-width:32px;min-height:32px!important;max-width:32px;max-height:32px;flex:0 0 32px;aspect-ratio:1;padding:0!important;margin:0 -4px;border:0;border-radius:50%;background:transparent!important;box-shadow:none;overflow:visible}
.variants .swatch:first-child{margin-left:2px}.variants .swatch:last-child{margin-right:2px}
.swatch::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;max-height:16px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(17,17,17,.18);background-color:var(--hottie-swatch-color,#e8e5e0);background-image:var(--hottie-swatch-image,none);background-repeat:no-repeat;background-size:var(--hottie-swatch-size,300%);background-position:var(--hottie-swatch-position,50% 62%);box-shadow:0 1px 5px rgba(0,0,0,.12);pointer-events:none}
.swatch.active::before{content:"";position:absolute;left:50%;top:50%;width:23px;height:23px;transform:translate(-50%,-50%);border:1.5px solid #111;border-radius:50%;pointer-events:none}
.swatch.unavailable{opacity:.45}.swatch[disabled]{opacity:.35;cursor:not-allowed}.swatch:focus-visible{outline:2px solid #111;outline-offset:1px}
.add{margin-top:0;background:var(--accent);color:var(--accent-text);width:100%;flex:0 0 auto}.add[disabled]{opacity:.4}

.empty-state{grid-column:1/-1;display:grid;justify-items:center;text-align:center;gap:7px;padding:34px 18px;color:var(--muted)}
.empty-state-title{color:var(--text);font-weight:700;font-size:16px}.empty-state-text{max-width:300px;font-size:13px;line-height:1.45}.empty-reset{margin-top:5px}
.cart-empty{padding:28px 12px 20px}.catalog-empty{min-height:190px;align-content:center}
.skeleton-card{pointer-events:none}.skeleton{position:relative;overflow:hidden;background:#e8e8e3}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:skeletonShimmer 1.15s ease-in-out infinite}
.skeleton-media{aspect-ratio:1/1}.skeleton-body{gap:10px}.skeleton-line{height:11px;border-radius:999px}.skeleton-line-short{width:38%}.skeleton-line-price{width:52%}.skeleton-button{height:44px;border-radius:12px;margin-top:auto}
@keyframes skeletonShimmer{100%{transform:translateX(100%)}}

.toast-region{position:fixed;z-index:90;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100vw - 24px),420px);pointer-events:none;display:grid;justify-items:center}
.toast{max-width:100%;padding:11px 14px;border-radius:14px;background:rgba(24,24,24,.94);color:#fff;font-size:13px;line-height:1.35;box-shadow:0 8px 28px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
.toast.visible{opacity:1;transform:translateY(0)}.toast-error{background:rgba(104,29,29,.96)}

.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);z-index:39}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:40;width:min(720px,100vw);max-height:min(84dvh,760px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.sheet-head{position:sticky;top:-14px;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:-14px -14px 12px;padding:14px;background:rgba(251,251,248,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sheet label{display:grid;gap:6px;margin:10px 0}.sheet input[type="checkbox"],.sheet input[type="radio"]{accent-color:var(--accent)}
.cart-line{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.qty{display:flex;align-items:center;gap:8px}.qty button{min-width:40px;padding:6px;background:var(--surface);border:1px solid var(--line);color:var(--text)}.qty button[disabled]{opacity:.35;cursor:not-allowed}
.delivery{border:0;padding:12px 0;margin:0}.delivery label{display:flex;align-items:center;gap:8px}
.pickup-warning{margin:10px 0 2px;padding:10px 12px;border:1px solid var(--line);background:var(--brand-bg);font-size:12px;line-height:1.45}
.cart-total{font-weight:700;font-size:18px;padding:12px 0}.orders-switch{padding:8px 0}.orders-switch select{width:100%}
.checkout-fallback{position:sticky;bottom:calc(env(safe-area-inset-bottom) * -1);z-index:3;margin-top:4px}

.product-screen{position:fixed;z-index:45;left:50%;top:0;bottom:0;transform:translateX(-50%);width:min(720px,100vw);height:var(--tg-stable-height,100dvh);max-height:var(--tg-stable-height,100dvh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--surface);padding:0 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 0 24px rgba(0,0,0,.08)}
.product-detail-body{display:grid;gap:12px}
.product-screen.gallery-horizontal-lock{overflow-y:hidden;overscroll-behavior:none}
.product-detail-media{position:relative;aspect-ratio:1;background:#fff;overflow:hidden;touch-action:pan-y;overscroll-behavior-x:contain}
.product-media-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.product-detail-media img,.product-detail-media video{width:100%;height:100%;object-fit:contain;display:block}
.product-detail-brand{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.product-detail-name{font-family:Georgia,serif;font-size:26px;line-height:1.05;margin:0}
.product-detail-price{font-weight:700;font-size:18px}
.product-detail-description{font-size:13px;line-height:1.55;color:#333;white-space:pre-line}
.product-detail-variants{display:flex;flex-wrap:wrap;gap:8px}
.product-variant{background:transparent;border:1px solid var(--line);border-radius:0;text-align:left;padding:9px 11px;font-size:11px;line-height:1.35}
.product-variant.active{background:#111;color:#fff;border-color:#111}.product-variant.unavailable{opacity:.55}.product-variant-stock{display:block;font-size:9px;margin-top:3px;opacity:.72}
.product-details-table{border-top:1px solid var(--line);font-size:12px}.product-detail-row{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.product-detail-row b{font-weight:400;color:var(--muted)}
.product-detail-add[disabled]{opacity:.4;cursor:not-allowed}

.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(248,248,246,.12);-webkit-backdrop-filter:blur(7px) saturate(.96);backdrop-filter:blur(7px) saturate(.96);overscroll-behavior:none;touch-action:none;pointer-events:auto;opacity:1;transition:opacity .28s ease}
.splash.leaving{opacity:0;pointer-events:none}.splash-logo-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);width:clamp(108px,28vw,178px);text-align:center}
.splash-logo-wrap img{display:block;width:100%;height:auto;object-fit:contain;clip-path:inset(0 100% 0 0);filter:blur(2px);opacity:.3}.splash-logo-wrap img.trace-ready{animation:hottieLogoTrace 1.45s cubic-bezier(.2,.8,.2,1) forwards}.splash-logo-fallback{font-family:Georgia,serif;font-size:28px;white-space:nowrap}
@keyframes hottieLogoTrace{0%{clip-path:inset(0 100% 0 0);filter:blur(2px);opacity:.3}70%{filter:blur(.4px);opacity:1}100%{clip-path:inset(0 0 0 0);filter:none;opacity:1}}

@supports not (height:100dvh){:root{--tg-stable-height:100vh}.product-screen{height:100vh;max-height:100vh}}
html[data-tg-platform="tdesktop"] .app,html[data-tg-platform="macos"] .app{max-width:1280px;width:100%;padding-left:20px;padding-right:20px}@media(min-width:560px){.catalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}@media(min-width:740px){.catalog{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}@media(min-width:900px){.catalog{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
@media(max-width:360px){.catalog{grid-template-columns:1fr}.toolbar{grid-template-columns:1fr}.brand-logo,.brand-logo-fallback{width:42px;height:42px;flex-basis:42px}}
@media(max-width:360px){html[data-tg-platform="tdesktop"] .catalog,html[data-tg-platform="macos"] .catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(hover:none){.media-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.splash,.splash-logo-wrap img,.sheet-backdrop,.toast{transition:none!important;animation:none!important}.skeleton::after{animation:none!important;display:none}.splash-logo-wrap img{clip-path:none!important;filter:none!important;opacity:1!important}}
