@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/prata-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/prata-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/onest-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/onest-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/rubik-cyr.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/rubik-lat.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/onest-ruble.woff2) format('woff2');unicode-range:U+20BD;}

:root{
  /* Единственная тема — сам зал: лампа, глина, тёплый уголь. */
  --bg:        #1C1511;
  --bg-2:      #261C16;
  --bg-3:      #32251D;
  --line:      #4A382C;
  --line-soft: #392A21;
  --line-control:#9B7D65;
  --text:      #F4EBDD;
  --text-2:    #CBB8A5;
  --text-3:    #B59B85;
  --accent:    #D58A66;
  --accent-2:  #E4AE8C;
  --accent-hover: #E4AE8C;
  --on-accent: #251810;
  --clay:      #7D5840;
  --success:   #B6C59D;
  --warning:   #E2B36F;
  --danger:    #EEA398;
  color-scheme: dark;
  --font-editorial: "Yeseva One", Georgia, serif;
  --w-body:    440;
  --w-heading: 560;
  --w-display: 620;
  --w-ui:      560;
  --w-strong:  650;

  /* Типографическая шкала: размеры привязаны к роли, а не к странице. */
  --type-hero:    clamp(3rem,5.6vw,4.75rem);
  --type-page:    clamp(2.35rem,4.4vw,4rem);
  --type-section: clamp(2.05rem,3.7vw,3.15rem);
  --type-title:   clamp(1.18rem,1.7vw,1.42rem);
  --type-body-l:  clamp(1.02rem,1.25vw,1.16rem);
  --type-body:    1.0625rem;
  --type-small:   .875rem;
  --type-label:   .75rem;
  --leading-display:1.04;
  --leading-heading:1.14;
  --leading-body:1.62;
  --tracking-display:-.04em;
  --tracking-heading:-.024em;

  /* Цвет настоя — это данные, его не меняем вместе с палитрой интерфейса. */
  --lq-white:  #E3DCA6;
  --lq-green:  #C7CE72;
  --lq-oolong: #D9A441;
  --lq-red:    #A63D24;
  --lq-puer:   #4A2418;
  --lq-other:  #8A7B5C;

  --pad:  clamp(20px, 5vw, 72px);
  --sheet-pad: clamp(18px, 4vw, 32px);
  --maxw: 1240px;
  --r:    4px;
  --ease: cubic-bezier(.22,1,.36,1);
  --motion-fast:160ms;
  --motion-base:280ms;
  --motion-slow:520ms;
  --section-space:clamp(48px,7vw,92px);
  /* Пространство и управление: общие роли дизайн-системы. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-24:96px;
  --control-height:50px;
  --target-min:44px;
  --focus-ring:2px;
  --focus-offset:3px;
  --radius-control:4px;
  --measure:60ch;
  --font-body:'Onest',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Rubik','Onest',system-ui,sans-serif;
  --font-accent:'Prata','Onest',Georgia,serif;
}
/* Shared editorial font, SIL OFL 1.1. Source and hashes: fonts/yeseva-source.json. */
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/yeseva-cyr.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Yeseva One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/yeseva-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Working pages · design system 3.2. Tokens and font faces are prepended by build.py.
   These adapters retain the existing forms, IDs, handlers and business rules. */
:root {
  color-scheme: dark;
  --panel: var(--bg-2); --panel-2: var(--bg-3); --panel2: var(--bg-3); --panel3: var(--bg-3);
  --muted: var(--text-2); --quiet: var(--text-3);
  --line-2: var(--line-control); --line2: var(--line-control); --line-strong: var(--line-control);
  --paper: var(--text); --ink: var(--on-accent);
  --ok: var(--success); --green: var(--success); --sage: var(--success);
  --warn: var(--warning); --amber: var(--warning);
  --bad: var(--danger); --red: var(--danger); --red2: var(--danger);
}
html { background: var(--bg); font-synthesis: none; scroll-padding-top: 100px; }
body[data-ui] {
  background: var(--bg); color: var(--text); font: var(--w-body) 16px/1.62 var(--font-body);
  letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[data-ui] :is(button,input,select,textarea) { font-family: var(--font-body); }
[data-ui] :is(h1,h2,h3) { text-wrap: balance; overflow-wrap: anywhere; }
[data-ui] h1 { font: var(--w-heading) var(--type-page)/var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); }
[data-ui] h2 { font: var(--w-heading) 28px/1.2 var(--font-display); letter-spacing: var(--tracking-heading); }
[data-ui] h3 { font: var(--w-ui) 20px/1.3 var(--font-body); letter-spacing: -.015em; }
[data-ui] :is(.eyebrow,.mini-title,.preview__eyebrow,.error-kicker,.product__type) {
  color: var(--text-3); font: var(--w-ui) 12px/1.45 var(--font-body); letter-spacing: .08em;
}
[data-ui] :is(.brand strong,.brand>span,.order__total,.product__price,.sum,.total strong) {
  font-family: var(--font-accent); font-weight: 400; font-style: normal;
}
[data-ui] :is(.brand,.error-nav) { color: var(--text); font-family: var(--font-accent); font-weight: 400; }
[data-ui] .brand { gap: 12px; }
[data-ui] .brand img { width: 30px; height: 38px; object-fit: contain; }
[data-ui] .brand strong { font-size: 22px; line-height: 1.2; }
[data-ui] :is(.brand small,.brand p,.brand .eyebrow) { font-family: var(--font-body); font-size: 12px; color: var(--text-3); }
[data-ui] :is(.top,.topbar,.topbar--refined) { background: var(--bg); border-color: var(--line); backdrop-filter: none; }
[data-ui] :is(.top__in,.topbar__in) { min-height: 76px; }
[data-ui] :is(.nav a,.admin-nav a,.nav__button,.back,.logout) { font-family: var(--font-body); font-size: 14px; font-weight: var(--w-ui); min-height: 44px; }
[data-ui] :is(.nav a,.admin-nav a,.nav__button)[aria-current=page],
[data-ui] :is(.nav a,.nav__button).is-active { color: var(--accent-2); }
[data-ui] :is(.head p,.intro,.section-note,.panel__head p) { font-size: 15px; line-height: 1.62; color: var(--text-2); }
[data-ui] :is(.hint,.help,.field-hint,.auth-note,.security-note,.status,.count,.save-note,.section-note,.note,.fine,.empty,.copy) { font-family: var(--font-body); font-size: 14px; line-height: 1.55; }
[data-ui] :is(.field>label,.field>span:first-child,label:not(.check):not(.switch)) { font-family: var(--font-body); font-size: 14px; font-weight: var(--w-ui); line-height: 1.5; letter-spacing: 0; }
[data-ui] .field { min-width: 0; }
[data-ui] :is(.input,.select,input[type=search],textarea,select) {
  min-width: 0; min-height: var(--control-height); max-width: 100%;
  font-size: 16px; font-weight: var(--w-body); line-height: 1.5;
  background: var(--bg); color: var(--text); border: 1px solid var(--line-control); border-radius: var(--radius-control);
}
[data-ui] :is(input,textarea)::placeholder { color: var(--text-3); opacity: 1; }
[data-ui] :is(input,textarea,select):focus { border-color: var(--accent-2); box-shadow: none; }
[data-ui] :is(input,textarea,select)[aria-invalid=true] { border-color: var(--danger); }
[data-ui] :is(.btn,.button,.pay,.action-link,.error-button) {
  min-height: var(--control-height); height: auto; border-radius: var(--radius-control); border-color: var(--line-control);
  font: var(--w-ui) 15px/1.4 var(--font-body); letter-spacing: 0; white-space: normal;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
[data-ui] :is(.btn--primary,.btn.primary,.button,.pay:not(.pay--quiet),.error-button--primary) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: var(--w-strong);
}
[data-ui] :is(.btn--primary,.btn.primary,.button,.pay:not(.pay--quiet),.error-button--primary):hover:not(:disabled) {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);
}
[data-ui] :is(.btn--ghost,.pay--quiet) { background: transparent; color: var(--text); }
[data-ui] :is(.btn--danger,.confirm-dialog__confirm) { background: transparent; border-color: var(--danger); color: var(--danger); }
[data-ui] :is(.btn--danger,.confirm-dialog__confirm):hover:not(:disabled) { background: var(--danger); color: var(--on-accent); }
[data-ui] :is(button,.btn,.button):disabled { opacity: .65; cursor: not-allowed; }
[data-ui] :is(.quick,.filter,.topic-filter,.period__button,.lang,.tab,.chip,.icon-btn,.dialog-close,.expand-all) { min-height: var(--target-min); min-width: var(--target-min); font-family: var(--font-body); }
[data-ui] :is(.quick,.filter,.topic-filter,.period__button) { border-radius: var(--radius-control); font-size: 13px; }
[data-ui] :is(.quick,.filter,.topic-filter,.period__button)[aria-pressed=true] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: var(--w-strong); }
[data-ui] :is(.check,.switch) { min-height: 44px; font-size: 14px; line-height: 1.5; }
[data-ui] :is(input[type=checkbox],input[type=radio]) { accent-color: var(--accent); flex-shrink: 0; }
[data-ui] :is(.panel,.auth-card,.card,.editor,.sidebar,.preview-card,.quick-card,.confirm-dialog,dialog) { background-color: var(--bg-2); border-color: var(--line); border-radius: var(--radius-control); }
[data-ui] :is(.panel__head,.editor-head) { border-color: var(--line); }
[data-ui] :is(.panel__head h2,.editor-head h2) { font-size: 24px; }
[data-ui] :is(.metric strong,.metric__value,.stat strong,.delta,.code,.order__id) { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: var(--w-strong); }
[data-ui] :is(.empty strong,.empty__in strong) { font: var(--w-heading) 24px/1.25 var(--font-display); letter-spacing: var(--tracking-heading); }
[data-ui] :is(.metric span,.metric__label,.stat span,.badge,.result-count,.promo__terms,.promo__note,.order__date,.booking-meta,.item) { font-family: var(--font-body); font-size: 13px; line-height: 1.5; }
[data-ui] :is(.status.ok,.badge.ok,.status.success) { color: var(--success); }
[data-ui] :is(.status.bad,.status.error,.badge.bad) { color: var(--danger); }
[data-ui] .badge.warn { color: var(--warning); }
[data-ui] :is(.mobile-dock) { background: var(--bg); border-color: var(--line); box-shadow: none; }
[data-ui] .mobile-dock a { font: var(--w-ui) 11px/1.2 var(--font-body); }
[data-ui] .mobile-dock a[aria-current=page] { color: var(--accent-2); background: var(--bg-3); border-color: var(--line); }
[data-ui] .mobile-dock a::before { color: var(--text-2); }
[data-ui] .mobile-dock a[aria-current=page]::before { color: var(--accent-2); }
[data-ui] :focus-visible { outline: var(--focus-ring) solid var(--accent-2); outline-offset: var(--focus-offset); }
[data-ui] .skip { background: var(--accent); color: var(--on-accent); }
[data-ui=promos] .grid { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 32px; align-items: start; }
[data-ui=promos] .head { padding-bottom: 32px; }
[data-ui=promos] .head p { max-width: 60ch; }
[data-ui=promos] .editor { padding: 28px; }
[data-ui=promos] .preview { background: var(--bg-3); padding: 24px; border: 1px solid var(--line); }
[data-ui=promos] .preview strong { display: block; margin-top: 12px; font: var(--w-heading) 32px/1.15 var(--font-display); letter-spacing: var(--tracking-heading); }
[data-ui=promos] .preview p { font-size: 14px; line-height: 1.6; }
[data-ui=promos] .preview__eyebrow { font-size: 12px; }
[data-ui=promos] .form-actions { position: static; display: flex; flex-wrap: wrap; padding-top: 16px; background: transparent; box-shadow: none; }
[data-ui=promos] .form-actions .btn { flex: 1; }
[data-ui=promos] .panel__head { padding: 24px 28px; }
[data-ui=promos] .code-row { grid-template-columns: minmax(0,1fr) auto; }
[data-ui=catalog] :is(.catalog-row img,.photo img,.photo-thumb img,.photo-pending__row img) { object-fit: contain; }
[data-ui=catalog] :is(.photo-help,.photo-pending__row,.completion,.form-errors,.tag) { font-size: 12px; line-height: 1.5; }
[data-ui=catalog] :is(.mobile-back,.move,.photo-pending__order button,.photo-pending__remove) { min-height: 44px; min-width: 44px; }
[data-ui=catalog] .mobile-back { color: var(--text-2); font: var(--w-ui) 14px/1.5 var(--font-body); }
[data-ui=account] .auth-card { padding: 32px; }
[data-ui=account] .brand { letter-spacing: .08em; }
[data-ui=account] .auth-photo img { filter: none; }
[data-ui=account] .auth-photo figcaption { background: var(--bg); color: var(--text-2); padding: 6px 9px; }
[data-ui=account] .auth-note { color: var(--text-3); }
[data-ui=account] .order__total { font-size: 24px; }
[data-ui=account] .order__id { font-size: 18px; }
[data-ui=login] h1 { font-size: clamp(32px,5vw,42px); }
[data-ui=login] .card { width: min(470px,100%); padding: 40px; }
[data-ui=login] .password { grid-template-columns: minmax(0,1fr) 82px; }
[data-ui=login] .reveal { background: var(--bg); color: var(--text-2); border-color: var(--line-control); font-size: 13px; }
[data-ui=login] .status:empty::before { color: var(--text-3); }
[data-ui=payment] main { background: var(--bg-2); border-color: var(--line); }
[data-ui=payment] h1 { font-size: clamp(32px,5vw,44px); }
[data-ui=payment] .back { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: var(--radius-control); font-weight: var(--w-strong); }
[data-ui=payment] .account { border-color: var(--line-control); border-radius: var(--radius-control); min-height: 50px; }
html:has([data-ui=product], [data-ui=error]) { --paper: var(--bg); --ink: var(--text); }
[data-ui=product] .product { max-width: 1240px; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: clamp(28px,5vw,64px); }
[data-ui=product] h1 { font-size: clamp(36px,4vw,56px); }
[data-ui=product] .product__image { height: 580px; min-height: 0; border: 0; }
[data-ui=product] .product--teaware :is(.product__image,.product__thumb img) { object-fit: contain; padding: 16px; transform: none; }
[data-ui=product] .product__description { font-size: 17px; color: var(--text-2); max-width: var(--measure); }
[data-ui=product] .product__price { font-size: 36px; }
[data-ui=product] .product__stock { color: var(--success); border-color: var(--success); font: var(--w-ui) 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
[data-ui=product] .product__stock--out { color: var(--text-3); border-color: var(--line); }
[data-ui=product] .button { color: var(--on-accent); }
[data-ui=legal] { font-size: 17px; }
[data-ui=legal] h1 { max-width: 17ch; }
[data-ui=legal] h2 { margin-top: 40px; font-size: 26px; }
[data-ui=legal] :is(.langs a,.back,.brand) { min-height: 44px; display: inline-flex; align-items: center; }
[data-ui=legal] .langs a { min-width: 44px; justify-content: center; }
[data-ui=error] .error-title { font-family: var(--font-display); font-weight: var(--w-heading); letter-spacing: var(--tracking-display); }
/* Editorial character continues through customer and owner pages.
   Dense headings, statistics, codes and controls retain their functional faces. */
[data-ui] h1 {
  font-family:var(--font-editorial); font-weight:400; font-style:normal;
  font-size:clamp(38px,4.2vw,58px); line-height:1.15; letter-spacing:-.03em;
}
[data-ui] :is(.head,.workspace-head,.dashboard-head) h1 { margin-bottom:12px; }
[data-ui] :is(.head,.workspace-head,.dashboard-head) { padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:28px; }
[data-ui] :is(.head p,.workspace-head p,.masthead p) { max-width:58ch; }
[data-ui] :is(.panel,.editor,.sidebar) { box-shadow:none; }
[data-ui] :is(.panel__head,.editor-head) { background:var(--bg-2); }
[data-ui=admin] .masthead { border-radius:2px; border:0; background:var(--bg-2); }
[data-ui=admin] .masthead h1 { font-size:clamp(40px,4.6vw,64px); max-width:13ch; }
[data-ui=admin] .masthead__copy { padding:clamp(24px,3vw,40px); }
[data-ui=admin] .masthead__image { filter:none; border-radius:0; }
[data-ui=admin] :is(.metric,.booking-tool) { border-radius:2px; border-color:var(--line); background:var(--bg-2); box-shadow:none; }
[data-ui=admin] .metric { border-top:2px solid var(--clay); }
[data-ui=admin] .metric__value { font-size:clamp(28px,2.8vw,38px); }
[data-ui=admin] :is(.section-title,.workspace-head h2) { font-family:var(--font-body); font-weight:560; }
[data-ui=account] .auth-copy h1 { font-size:clamp(44px,5.2vw,72px); max-width:12ch; line-height:1.08; margin-bottom:24px; }
[data-ui=account] .auth-copy h1::after { content:''; display:block; margin-top:24px; width:48px; height:2px; background:var(--accent); }
[data-ui=account] .auth-card { border-top:2px solid var(--accent); }
[data-ui=account] .auth-gallery { height:280px; }
[data-ui=account] .auth-photo { border:0; border-radius:2px; }
[data-ui=account] .auth-photo::after { background:none; }
[data-ui=account] .dashboard-head { align-items:center; }
[data-ui=account] .order__top { align-items:baseline; }
[data-ui=account] .profile h3 { font-size:17px; }
[data-ui=login] .card { width:min(520px,100%); border-top:2px solid var(--accent); background:var(--bg-2); }
[data-ui=login] h1 { font-size:clamp(32px,4.7vw,48px); line-height:1.2; }
[data-ui=promos] .preview { border:0; border-top:2px solid var(--accent); }
[data-ui=promos] .preview strong { font-family:var(--font-editorial); font-size:34px; font-weight:400; overflow-wrap:anywhere; }
[data-ui=promos] .metrics { margin-bottom:28px; }
[data-ui=catalog] .stats,[data-ui=site] .stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
[data-ui=site] .module-note { border:0; border-left:2px solid var(--accent); background:var(--bg-2); }
[data-ui=guides] .hero { background:var(--bg-2); border:0; border-radius:2px; padding:clamp(24px,3.5vw,44px); }
[data-ui=guides] .hero h1 { font-size:clamp(46px,5vw,72px); margin-block:14px 20px; }
[data-ui=guides] .hero__aside { border-color:var(--line); background:var(--bg); }
[data-ui=guides] .guide { border-radius:2px; box-shadow:none; }
[data-ui=product] h1 { font-size:clamp(36px,4vw,56px); line-height:1.15; }
[data-ui=product] .product__type { border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:24px; letter-spacing:.08em; }
[data-ui=product] .product__description { line-height:1.75; }
[data-ui=product] .product__image { border-radius:2px; }
[data-ui=product] .product__buy { border-color:var(--line); }
[data-ui=payment] main,[data-ui=test-payment] main { border-top:2px solid var(--accent); border-radius:2px; }
[data-ui=payment] h1,[data-ui=test-payment] h1 { font-size:clamp(30px,4vw,42px); max-width:17ch; margin-inline:auto; }
[data-ui=legal] h1 { font-size:clamp(36px,4vw,54px); max-width:24ch; margin-bottom:32px; }
[data-ui=legal] h2 { padding-top:24px; border-top:1px solid var(--line); font-family:var(--font-body); font-size:24px; font-weight:560; }
[data-ui=error] .error-title { font-family:var(--font-editorial); font-weight:400; font-size:clamp(38px,5vw,64px); line-height:1.15; }
:lang(zh) body[data-ui], :lang(zh) [data-ui] :is(button,input,select,textarea) { font-family: 'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif; letter-spacing: 0; }
:lang(zh) [data-ui] :is(h1,h2,h3,.brand,.product__price) { font-family: 'Songti SC','STSong','Noto Serif CJK SC',serif; letter-spacing: 0; line-height: 1.35; }
@media (max-width: 900px) {
  [data-ui=catalog] .side-tools { position: static; }
}
@media (max-width: 780px) {
  [data-ui] h1 { font-size: clamp(32px,8.5vw,48px); }
  [data-ui] :is(.top__in,.topbar__in) { min-height: 68px; }
  [data-ui=promos] .grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  [data-ui=promos] :is(.editor,.panel__head) { padding: 20px; }
  [data-ui=promos] .head { padding-bottom: 24px; }
  [data-ui=account] .auth-card { padding: 24px; }
  [data-ui=product] .product { grid-template-columns: minmax(0,1fr); }
  [data-ui=product] .product__image { height: auto; aspect-ratio: 1; }
  [data-ui=product] h1 { font-size: clamp(32px,9vw,44px); }
  [data-ui=product] .product__description { font-size: 16px; }
}
/* The owner navigation has more sections than the storefront. Give it a
   separate row on tablet widths instead of letting it stretch the page. */
@media (min-width: 761px) and (max-width: 1180px) {
  [data-ui=admin] .topbar--refined .topbar__in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 20px; padding-top: 12px; }
  [data-ui=admin] .topbar--refined .nav { grid-column: 1/-1; grid-row: 2; min-width: 0; width: 100%; overflow-x: auto; padding-block: 4px; }
  [data-ui=admin] .topbar--refined .nav__button { flex: 0 0 auto; }
  [data-ui=admin] .topbar--refined .top-actions { grid-column: 2; grid-row: 1; }
}
@media (max-width: 520px) {
  [data-ui=login] .card { padding: calc(32px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); }
  [data-ui=promos] .code-row { grid-template-columns: minmax(0,1fr); }
  [data-ui=account] .auth-card { padding: 20px; }
  [data-ui=legal] { font-size: 16px; }
  [data-ui=payment] main { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; animation: none!important; }
}
@media (forced-colors: active) {
  [data-ui] :is(.btn,.button,.input,.select,.pay,.quick,.filter) { border: 1px solid ButtonText; }
  [data-ui] :focus-visible { outline-color: Highlight; }
}

@media (max-width:700px) {
  [data-ui] :is(.head,.workspace-head,.dashboard-head) { margin-bottom:24px; padding-bottom:20px; }
  [data-ui] h1 { font-size:clamp(32px,8vw,44px); }
  [data-ui=account] .auth-copy h1 { font-size:clamp(40px,11vw,60px); }
  [data-ui=account] .auth-gallery { height:190px; }
  [data-ui=account] .dashboard-head { align-items:flex-start; }
  [data-ui=login] h1 { font-size:clamp(29px,7.8vw,42px); }
  [data-ui=admin] .masthead h1 { font-size:clamp(36px,9vw,52px); }
  [data-ui=admin] .masthead__copy { padding:24px 20px; }
  [data-ui=product] h1 { font-size:clamp(32px,8.5vw,44px); }
  [data-ui=legal] h1 { font-size:clamp(32px,8vw,44px); }
  [data-ui=legal] h2 { font-size:23px; }
  [data-ui=payment] h1,[data-ui=test-payment] h1 { font-size:clamp(28px,7.2vw,38px); }
}