/* ==========================================================================
   Tennispoint — core stylesheet
   Developer: Den Polansky · https://sitedone.tech
   Structure: reset → theme tokens → base → layout → components → responsive
   ========================================================================== */

/* ---------- fonts (self-hosted Montserrat, avoids CDN swap/layout-shift) ---------- */
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Montserrat'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('../fonts/montserrat-latin.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; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
svg { stroke-linecap: round; stroke-linejoin: round; }

/* ---------- theme tokens ---------- */
:root[data-theme="light"]{
  --bg:#FFFFFF; --section:#F5F6F2; --surface:#FFFFFF; --surface-2:#F7F8F4;
  --text:#1A1A1A; --muted:#6B7268; --line:#E4E6E0; --line-2:#D6D9CF;
  --court:#0E2A22; --on-court:#F2F4EF; --court-muted:#9BA69C; --court-line:#2C3A33;
  --accent:#D6FF3D; --accent-hover:#C5F024; --chip:#F5F6F2;
  --tile-a:#ECEEE7; --tile-b:#F4F5F1; --ph:#A4AA9E; --shadow:rgba(20,30,25,.14);
}
:root[data-theme="dark"]{
  --bg:#0E1512; --section:#16211C; --surface:#1B2823; --surface-2:#16211C;
  --text:#F2F4EF; --muted:#9BA69C; --line:#2C3A33; --line-2:#33453B;
  --court:#0A110E; --on-court:#F2F4EF; --court-muted:#9BA69C; --court-line:#24322B;
  --accent:#D6FF3D; --accent-hover:#C5F024; --chip:#16211C;
  --tile-a:#1E2B25; --tile-b:#243129; --ph:#6E7A70; --shadow:rgba(0,0,0,.5);
}

/* ---------- base ---------- */
body{
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.container{ max-width:1360px; margin:0 auto; padding:0 40px; }
.section{ padding-top:96px; }
.section--last{ padding-bottom:96px; }

/* eyebrow + section heads */
.eyebrow{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:12px; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:34px; }
.sec-title{ font-size:40px; font-weight:700; letter-spacing:-.025em; }
.link-more{ font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border-bottom:2px solid var(--accent); padding-bottom:4px; }

/* ---------- buttons ---------- */
.btn{ font-family:inherit; cursor:pointer; border:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:11px; font-weight:700; font-size:14px; padding:13px 26px; line-height:1.1;
  transition:filter .16s ease, box-shadow .16s ease, transform .1s ease, background .16s ease, color .16s ease; }
.btn:active{ transform:translateY(1px); }
.btn--accent{ background:var(--accent); color:#0E2A22; }
.btn--accent:hover{ background:var(--accent-hover); }
.btn--outline{ background:transparent; color:var(--text); border:1.5px solid var(--text); }
.btn--outline:hover{ background:var(--text); color:var(--bg); }
.btn--lg{ font-size:15px; padding:16px 32px; }
.btn--sm{ font-size:13.5px; padding:10px 18px; border-radius:9px; }

/* price count-up animation — number rolls to the new value (checkout summary + product qty) */
.osum__price, .osum__total b, .osum__rows [data-sum-sub], .pinfo__price, .pinfo__old, .pnav__price{ transition:text-shadow .45s ease; }
.is-counting{ text-shadow:0 0 12px rgba(214,255,61,.55); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:50; }

/* top bar */
.topbar{ background:var(--court); color:var(--court-muted); font-size:12.5px; padding:8px 0; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; }
.topbar__side{ display:inline-flex; align-items:center; gap:18px; }
.topbar a{ color:inherit; }
.on-court{ color:var(--on-court); font-weight:600; }
.muted-link{ opacity:.85; cursor:pointer; }
.topbar__links{ display:inline-flex; gap:16px; }
.topbar__links a, .topbar__links span{ cursor:pointer; }
.lang{ display:inline-flex; gap:8px; align-items:center; }
.lang b{ color:var(--on-court); }
.lang .off{ opacity:.4; }
.lang__opt{ background:none; border:none; padding:0; margin:0; font:inherit; line-height:1; color:var(--on-court); cursor:pointer; }
.lang__opt.is-active{ font-weight:700; }

/* phone dropdown */
.phone{ position:relative; display:inline-flex; align-items:center; }
.phone__toggle{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.phone__caret{ transition:transform .18s ease; }
.phone:hover .phone__caret{ transform:rotate(180deg); }
.phone__drop{ position:absolute; top:calc(100% + 12px); left:-14px; width:336px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px var(--shadow); padding:16px 16px 14px; z-index:80; cursor:default;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
.phone:hover .phone__drop{ opacity:1; visibility:visible; transform:translateY(0); }
.phone__drop-title{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:12px; }
.phone__row{ display:flex; gap:12px; align-items:center; padding:8px; border-radius:10px; }
.phone__row:hover{ background:var(--chip); }
.phone__ic{ width:40px; height:40px; border-radius:11px; background:var(--chip); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text); }
.phone__main{ font-size:14.5px; font-weight:700; color:var(--text); line-height:1.3; display:block; }
.phone__sub{ font-size:12px; color:var(--muted); display:block; overflow-wrap:anywhere; }
.phone__hours{ margin-top:0; padding-top:5px; border-top:0 solid var(--line); display:flex; align-items:center; gap:9px; font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; }

/* theme toggle */
.theme-toggle{ display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border:1px solid var(--court-line); border-radius:20px; cursor:pointer; user-select:none; background:transparent; }
.theme-toggle .sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .moon{ display:none; }

/* main bar */
.headbar{ background:var(--surface); border-bottom:1px solid var(--line); padding:15px 0; }
.headbar__inner{ display:flex; align-items:center; gap:30px; }
.logo{ display:inline-flex; align-items:center; flex-shrink:0; }
.logo__img{ height:43px; width:92px; background-size:contain; background-position:left center; background-repeat:no-repeat; }
.logo__img--dark{ background-image:url('../img/logo-dark.svg'); }
.logo__img--light{ background-image:url('../img/logo-light.svg'); display:none; }
:root[data-theme="dark"] .logo__img--dark{ display:none; }
:root[data-theme="dark"] .logo__img--light{ display:block; }

/* categories mega-menu trigger */
.cats-btn{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 18px; border:none; border-radius:11px; background:#BE4414; color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; flex-shrink:0; transition:background .18s ease; }
.cats-btn:hover{ background:#a53a11; }
.cats-btn.is-open{ background:#93340e; }
/* fixed-size icon slots so the grid↔✕ swap never shifts the label */
.cats-btn__grid, .cats-btn__x{ width:19px; height:19px; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.cats-btn__grid{ display:inline-flex; }
.cats-btn__x{ display:none; }
.cats-btn.is-open .cats-btn__grid{ display:none; }
.cats-btn.is-open .cats-btn__x{ display:inline-flex; }
.cats-btn__label{ text-transform:uppercase; letter-spacing:.04em; }

.search{ position:relative; flex:1 1 auto; display:flex; align-items:center; gap:9px; background:var(--chip); border:1px solid var(--line); border-radius:11px; padding:0 14px; height:46px; max-width:520px; margin:0; color:var(--muted); transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.search:hover{ border-color:var(--line-2); }
.search.is-open, .search:focus-within{ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px rgba(214,255,61,.16); }
.search__ic{ flex-shrink:0; color:var(--muted); }
.search__input{ flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit; font-size:14.5px; color:var(--text); padding:0; }
.search__input::placeholder{ color:var(--muted); }
.search__input::-webkit-search-cancel-button{ display:none; }
.search__clear{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:none; border-radius:50%; background:var(--line); color:var(--muted); cursor:pointer; transition:color .14s ease, background .14s ease; }
.search__clear:hover{ color:var(--text); background:var(--line-2); }

/* live-search popup */
.search-pop{ position:absolute; top:calc(100% + 9px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px var(--shadow); padding:10px; z-index:60; max-height:min(72vh, 560px); overflow-y:auto; }
.search-pop__label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:8px 8px 6px; }
.search-pop__list{ display:flex; flex-direction:column; }
.sres{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:11px; transition:background .13s ease; }
.sres:hover, .sres.is-hl{ background:var(--chip); }
.sres__thumb{ width:46px; height:46px; flex-shrink:0; border-radius:9px; border:1px solid var(--line); background-color:var(--surface-2, var(--chip)); background-size:contain; background-position:center; background-repeat:no-repeat; }
.sres__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sres__brand{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.sres__name{ font-size:14px; font-weight:600; color:var(--text); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sres__name mark{ background:none; color:#BE4414; font-weight:700; }
.sres__price{ flex-shrink:0; font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; }
.search-pop__chips{ display:flex; flex-wrap:wrap; gap:7px; padding:2px 8px 10px; }
.schip{ border:1px solid var(--line); background:var(--chip); color:var(--text); font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px; cursor:pointer; transition:border-color .14s ease, color .14s ease; }
.schip:hover{ border-color:var(--accent); color:#BE4414; }
.search-pop__all{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:6px; padding:12px; border-top:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--text); }
.search-pop__all:hover{ color:#BE4414; }
.search-pop__all svg{ transition:transform .15s ease; }
.search-pop__all:hover svg{ transform:translateX(3px); }
.search-pop__empty{ padding:22px 12px; text-align:center; font-size:13.5px; color:var(--muted); }

/* single-row header right cluster (phone + icons + lang/theme) */
.head-right{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.head-sep{ width:1px; height:26px; background:var(--line); flex-shrink:0; }
.phone--head{ color:var(--text); }
.phone--head .phone__toggle{ gap:8px; font-weight:700; }
.phone--head .phone__toggle > svg:first-child{ color:#0E2A22; }
.phone__num{ font-size:14.5px; font-weight:700; color:var(--text); white-space:nowrap; }
.phone--head .phone__caret{ color:var(--muted); }
.phone--head .phone__drop{ top:calc(100% + 16px); right:-26px; left:auto; }
.head-util{ display:flex; align-items:center; gap:12px; }
.head-util .lang{ font-size:13px; }
.head-util .lang b{ color:var(--text); }
.head-util .lang .off{ color:var(--muted); opacity:1; }
/* vertical language switch: UA over RU */
.lang--v{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; line-height:1.05; }
.lang--v b{ font-size:12.5px; font-weight:700; color:var(--text); cursor:pointer; }
.lang--v .off{ font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; transition:color .14s ease; }
.lang--v .off:hover{ color:#BE4414; }
/* mobile search toggle (icon that reveals the search row) */
.head-search-toggle{ display:none; align-items:center; justify-content:center; background:none; border:none; padding:0; color:var(--text); cursor:pointer; }
.theme-toggle--icon{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; transition:color .16s ease, border-color .16s ease; }
.theme-toggle--icon:hover{ color:var(--text); border-color:var(--line-2); }
.theme-toggle--icon .sun{ display:none; }
:root[data-theme="dark"] .theme-toggle--icon .sun{ display:block; }
:root[data-theme="dark"] .theme-toggle--icon .moon{ display:none; }
/* phone glyph: court-green on light, lime on dark */
:root[data-theme="dark"] .phone--head .phone__toggle > svg:first-child,
:root[data-theme="dark"] .mmenu__phone svg{ color:var(--accent); }

/* mobile drawer utility row (phone + lang + theme, since the top bar is gone) */
.mmenu__util{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding:10px 2px 12px; margin:0 0 6px; border-bottom:1px solid var(--line); }
.mmenu__phone{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text); }
.mmenu__phone svg{ color:#0E2A22; }
.mmenu__util-right{ display:flex; align-items:center; gap:12px; }
.mmenu__util .lang{ font-size:13px; }
.mmenu__util .lang b{ color:var(--text); }
.mmenu__util .lang .off{ color:var(--muted); opacity:1; }
/* util-bar quick icons (compare + wishlist), moved into the drawer on mobile —
   plain icon buttons with a corner count badge, matching the header icons */
.mmenu__util-links{ display:flex; align-items:center; gap:10px; }
.mmenu__ic{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:var(--surface); cursor:pointer; transition:border-color .14s ease, color .14s ease; }
.mmenu__ic:hover{ border-color:var(--accent); }
.mmenu__ic svg{ width:22px; height:22px; }
.mmenu__ic .head-badge{ position:absolute; top:-6px; right:-6px; }
/* the generic `.mobile-menu a{border-bottom:0}` rule outranks .mmenu__ic and strips
   the icon box's bottom border (looks "cut off"); restore it with higher specificity */
.mobile-menu .mmenu__ic{ border:1px solid var(--line); padding:0; }
.mobile-menu .mmenu__ic:hover{ border-color:var(--accent); }
.mmenu__util-right{ display:flex; align-items:center; gap:14px; }
.mmenu__util .theme-toggle--icon{ width:40px; height:40px; }
/* keep UA / RU on one baseline: the active <b> and the .off <button> must share
   the same box (button carries UA-agent padding/border otherwise → it jumps) */
.mmenu__util .lang--v{ flex-direction:row; align-items:center; gap:8px; }
.mmenu__util .lang--v b, .mmenu__util .lang--v .lang__opt{ display:inline-flex; align-items:center; font-size:13px; line-height:1; padding:0; margin:0; border:none; background:none; }
/* scope to DIRECT children so it never leaks into the live-search results (.sres__brand/.sres__name). Den Polansky */
.search > span{ font-size:13px; }

.head-icons{ display:flex; gap:18px; color:var(--text); align-items:center; }
.head-icons svg{ cursor:pointer; }
.icon-btn{ position:relative; display:inline-flex; }

/* cart */
.cart{ position:relative; }
.cart__toggle{ position:relative; cursor:pointer; display:inline-flex; background:none; border:none; }
.cart__badge{ position:absolute; top:-6px; right:-7px; background:var(--accent); color:#0E2A22; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cart-drawer{ position:absolute; top:calc(100% + 20px); right:-8px; width:380px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px var(--shadow); z-index:60; padding:18px; cursor:default;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
.cart.is-open .cart-drawer{ opacity:1; visibility:visible; transform:translateY(0); }
.cart-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cart-drawer__title{ font-size:15px; font-weight:700; }
.cart-drawer__close{ cursor:pointer; color:var(--muted); display:inline-flex; background:none; border:none; }
.cart-list{ display:flex; flex-direction:column; gap:14px; }
.cart-item{ display:flex; gap:12px; align-items:flex-start; }
.cart-item__thumb{ width:56px; height:56px; border-radius:9px; flex-shrink:0; border:1px solid var(--line); background-size:contain; background-position:center; background-repeat:no-repeat; background-color:var(--surface-2); }
.cart-item__info{ flex:1; min-width:0; }
.cart-item__brand{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cart-item__name{ font-size:13.5px; font-weight:700; line-height:1.3; }
.cart-item__meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.cart-item__attrs{ font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.35; }
.cart-item__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.cart-item__price{ font-size:14px; font-weight:700; white-space:nowrap; }
.qty--sm{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.qty--sm .qty__btn{ width:27px; height:26px; border:none; background:none; color:var(--text); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s ease, color .14s ease; }
.qty--sm .qty__btn:hover{ background:var(--chip); color:#BE4414; }
.qty--sm .qty__val{ min-width:26px; text-align:center; font-size:13px; font-weight:700; }
.cart-item__x{ cursor:pointer; color:var(--muted); display:inline-flex; background:none; border:none; padding:2px; flex-shrink:0; transition:color .14s ease; }
.cart-item__x:hover{ color:#BE4414; }
.cart-empty{ text-align:center; padding:24px 6px 8px; }
.cart-empty__ic{ display:inline-flex; color:var(--muted); margin-bottom:12px; }
.cart-empty__title{ font-size:15px; font-weight:700; margin-bottom:18px; }
.cart-empty .btn{ width:100%; }
.cart-total{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 16px; padding-top:16px; border-top:1px solid var(--line); }
.cart-total__label{ font-size:13px; color:var(--muted); font-weight:600; }
.cart-total__value{ font-size:19px; font-weight:700; }
.cart-actions{ display:flex; flex-direction:column; gap:9px; }
.cart-actions .btn{ width:100%; padding:13px; border-radius:10px; font-size:14px; }

/* burger + mobile menu */
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--text); background:none; }
.mobile-menu{ position:fixed; top:0; left:0; bottom:0; width:340px; max-width:82vw; background:var(--surface); z-index:91; transform:translateX(-100%); transition:transform .28s ease; padding:20px; display:flex; flex-direction:column; box-shadow:0 0 50px rgba(0,0,0,.4); }
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu__head{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; margin-bottom:16px; }
.mobile-menu__close{ cursor:pointer; color:var(--muted); display:flex; background:none; border:none; }
.mobile-menu a{ padding:6px 6px; font-size:15.5px; font-weight:600; color:var(--text); border-bottom:0 solid var(--line); }
.mobile-menu a:last-child{ border-bottom:none; }
.menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.menu-overlay.is-open{ opacity:1; visibility:visible; }

/* ===== MEGA MENU (always-dark catalog dropdown) ===== */
.mega{ position:fixed; left:0; right:0; top:var(--tp-header-h, 112px); z-index:85; background:#0c1712; color:#e7ece7;
  box-shadow:0 34px 64px rgba(0,0,0,.44); border-top:1px solid rgba(255,255,255,.06);
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease, visibility .22s; }
.mega.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-backdrop{ position:fixed; inset:0; top:var(--tp-header-h, 112px); background:rgba(4,8,6,.5); z-index:84; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s; }
.mega-backdrop.is-open{ opacity:1; visibility:visible; }

.mega__inner{ display:flex; gap:0; min-height:432px; max-height:calc(100vh - var(--tp-header-h, 112px) - 20px); }
.mega__rail{ flex:0 0 272px; padding:14px 0; border-right:1px solid rgba(255,255,255,.07); overflow-y:auto; }
.mega__cat{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 22px 12px 25px; background:none; border:none; color:#c7d0c8; font-family:inherit; font-size:14.5px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer; position:relative; transition:color .14s ease, background .14s ease, box-shadow .14s ease; }
.mega__cat-ic{ display:inline-flex; color:#8b968c; transition:color .14s ease; }
.mega__cat-name{ flex:1; }
.mega__cat-arr{ opacity:0; color:var(--accent); transform:translateX(-4px); transition:opacity .14s ease, transform .14s ease; }
.mega__cat:hover, .mega__cat.is-active{ color:#fff; background:rgba(255,255,255,.05); box-shadow:inset 3px 0 0 var(--accent); }
.mega__cat:hover .mega__cat-ic, .mega__cat.is-active .mega__cat-ic{ color:var(--accent); }
.mega__cat:hover .mega__cat-arr, .mega__cat.is-active .mega__cat-arr{ opacity:1; transform:translateX(0); }
.mega__cat--promo{ color:var(--accent); }
.mega__cat--promo .mega__cat-ic{ color:var(--accent); }
/* «Скоро» chip for categories not yet in stock (mega rail + mobile menu) */
.cat-soon{ font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:5px; background:var(--accent); color:#0E2A22; white-space:nowrap; flex-shrink:0; }

.mega__stage{ flex:1; position:relative; padding:26px 30px; overflow-y:auto; }
.mega__panel{ display:none; }
.mega__panel.is-active{ display:flex; gap:28px; }
.mega__groups{ flex:1; columns:3; column-gap:32px; }
.mega__group{ break-inside:avoid; margin:0 0 22px; }
.mega__group-title{ font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#fff; margin-bottom:11px; }
.mega__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mega__links a{ color:#a7b1a8; font-size:13.5px; line-height:1.3; transition:color .13s ease; }
.mega__links a:hover{ color:#BE4414; }

.mega__card{ flex:0 0 214px; align-self:flex-start; position:relative; border-radius:14px; overflow:hidden; min-height:296px; display:flex; align-items:flex-end; background-size:cover; background-position:center; }
.mega__card-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,10,8,.06) 0%, rgba(6,10,8,.5) 52%, rgba(6,10,8,.86) 100%); }
.mega__card-body{ position:relative; z-index:1; padding:18px; display:flex; flex-direction:column; }
.mega__card-kicker{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.mega__card-title{ font-size:18px; font-weight:700; color:#fff; line-height:1.15; margin-top:4px; }
.mega__card-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:700; color:#fff; transition:color .15s ease; }
.mega__card:hover .mega__card-cta{ color:var(--accent); }

/* cascade entrance (replays on open AND on category switch) */
@keyframes megaUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.mega__panel.is-active .mega__group{ animation:megaUp .42s cubic-bezier(.22,.61,.36,1) both; }
.mega__panel.is-active .mega__group:nth-child(1){ animation-delay:.02s; }
.mega__panel.is-active .mega__group:nth-child(2){ animation-delay:.06s; }
.mega__panel.is-active .mega__group:nth-child(3){ animation-delay:.10s; }
.mega__panel.is-active .mega__group:nth-child(4){ animation-delay:.14s; }
.mega__panel.is-active .mega__group:nth-child(5){ animation-delay:.18s; }
.mega__panel.is-active .mega__group:nth-child(6){ animation-delay:.22s; }
.mega__panel.is-active .mega__group:nth-child(7){ animation-delay:.26s; }
.mega__panel.is-active .mega__group:nth-child(8){ animation-delay:.30s; }
.mega__panel.is-active .mega__group:nth-child(9){ animation-delay:.34s; }
.mega__panel.is-active .mega__card{ animation:megaUp .48s cubic-bezier(.22,.61,.36,1) both; animation-delay:.12s; }

/* mobile 2-level categories menu */
.mobile-menu[data-mmenu]{ overflow:hidden; padding:20px 20px 0; }
.mmenu__root{ display:flex; flex-direction:column; flex:1; overflow-y:auto; margin:0; padding:0 2px 20px; scrollbar-gutter:stable; }
/* category row = two tap zones: main link (icon+name) → category page,
   wide arrow sector → drill into the subcategory. Den Polansky */
.mmenu__cat{ display:flex; align-items:stretch; width:100%; border-bottom:1px solid var(--line); }
.mmenu__cat-main{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:0 4px; background:none; border:none; color:var(--text); font-family:inherit; font-size:15px; font-weight:600; text-align:left; text-decoration:none; cursor:pointer; }
.mmenu__cat-main:active{ background:var(--chip); }
.mmenu__cat-ic{ width:34px; height:34px; border-radius:9px; background:var(--chip); display:inline-flex; align-items:center; justify-content:center; color:var(--text); flex-shrink:0; align-self:center; }
.mmenu__cat-ic svg{ width:19px; height:19px; }
.mmenu__cat-name{ flex:1; padding:11px 0; }
.cat-soon{ align-self:center; }
/* wide, divided drill-down tap sector (bigger tap target on mobile) */
.mmenu__cat-go{ display:flex; align-items:center; justify-content:center; align-self:stretch; min-width:46px; padding:0 13px; background:none; border:none; border-left:1px solid var(--line); color:var(--muted); cursor:pointer; flex-shrink:0; }
.mmenu__cat-go:active{ background:var(--chip); }
.mmenu__cat--promo .mmenu__cat-main{ color:#BE4414; }
.mmenu__cat--promo .mmenu__cat-ic{ background:rgba(190,68,20,.10); color:#BE4414; }
.mmenu__sub{ position:absolute; inset:0; background:var(--surface); padding:16px 20px 28px; overflow-y:auto; transform:translateX(100%); transition:transform .26s ease; z-index:3; }
.mmenu__sub.is-open{ transform:translateX(0); }
/* back row — separated from the content by a rule */
.mmenu__back{ display:flex; align-items:center; gap:6px; width:100%; background:none; border:none; border-bottom:1px solid var(--line); color:var(--muted); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:2px 0 14px; margin-bottom:12px; }
.mmenu__back:hover{ color:var(--text); }
.mmenu__sub-head{ font-size:21px; font-weight:700; letter-spacing:-.01em; margin:2px 0 10px; }
/* each group is its own block: divider + air between groups, no per-link rules
   inside a group so it reads as one unit. Den Polansky */
.mmenu__group{ padding-bottom:4px; }
.mmenu__group + .mmenu__group{ margin-top:10px; padding-top:20px; border-top:1px solid var(--line); }
.mmenu__grp{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.mmenu__sub a{ display:block; padding:8px 0; font-size:15px; font-weight:500; color:var(--text); border-bottom:none; }
.mmenu__sub a:hover{ color:#BE4414; }

/* mega menu — LIGHT theme (integrates with the light header; lime kept only for the
   active bar/icons-on-photo, accent text switches to court-green + brick). */
:root[data-theme="light"] .mega{ background:#ffffff; color:#26302a; border-top:1px solid var(--line); box-shadow:0 30px 60px rgba(20,30,25,.16); }
:root[data-theme="light"] .mega-backdrop{ background:rgba(20,30,25,.32); }
:root[data-theme="light"] .mega__rail{ background:#fafcf7; border-right:1px solid var(--line); }
:root[data-theme="light"] .mega__cat{ color:#3c473e; }
:root[data-theme="light"] .mega__cat-ic{ color:#9aa79b; }
:root[data-theme="light"] .mega__cat:hover, :root[data-theme="light"] .mega__cat.is-active{ color:#0E2A22; background:#eef3e7; box-shadow:inset 3px 0 0 var(--accent); }
:root[data-theme="light"] .mega__cat:hover .mega__cat-ic, :root[data-theme="light"] .mega__cat.is-active .mega__cat-ic{ color:#0E2A22; }
:root[data-theme="light"] .mega__cat:hover .mega__cat-arr, :root[data-theme="light"] .mega__cat.is-active .mega__cat-arr{ color:#0E2A22; }
:root[data-theme="light"] .mega__cat--promo{ color:#BE4414; }
:root[data-theme="light"] .mega__cat--promo .mega__cat-ic{ color:#BE4414; }
:root[data-theme="light"] .mega__group-title{ color:#17231d; }
:root[data-theme="light"] .mega__links a{ color:#5c665c; }
:root[data-theme="light"] .mega__links a:hover{ color:#BE4414; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ background:var(--section); position:relative; overflow:hidden; }
.hero__stage{ max-width:1360px; margin:0 auto; position:relative; min-height:560px; }
.hero__slide{ position:absolute; inset:0; padding:0 40px; display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center; opacity:0; z-index:1; pointer-events:none; transition:opacity .55s ease; }
.hero__slide.is-active{ opacity:1; z-index:2; pointer-events:auto; }
.hero__text{ padding:72px 0; }
.hero__badge{ display:inline-flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:26px; }
.hero__badge i{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.hero__title{ font-size:66px; line-height:.98; letter-spacing:-.04em; font-weight:700; margin-bottom:24px; max-width:12ch; }
.hero__hi{ position:relative; display:inline-block; }
.hero__hi::after{ content:""; position:absolute; left:0; right:0; bottom:6px; height:12px; background:var(--accent); z-index:-1; }
.hero__sub{ font-size:17px; line-height:1.6; color:var(--muted); margin-bottom:34px; max-width:42ch; }
.hero__actions{ display:flex; gap:14px; align-items:center; }
.hero__photo{ position:relative; align-self:stretch; min-height:560px; }
.hero__img{ position:absolute; inset:40px 0; border-radius:16px; overflow:hidden; background-color:var(--surface-2); background-size:cover; background-position:center; background-repeat:no-repeat; }
.hero__ball{ position:absolute; top:78px; right:34px; width:120px; height:120px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; }
.hero__dots{ position:absolute; bottom:34px; left:40px; display:flex; gap:8px; z-index:4; }
.hero__dot{ height:8px; width:8px; border-radius:4px; cursor:pointer; background:var(--muted); opacity:.5; transition:all .3s ease; border:none; }
.hero__dot.is-active{ width:28px; background:var(--text); opacity:1; }
.hero__rule{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }

/* ===== HERO SLIDER (full-bleed, from client mockups) ===== */
.hs{ position:relative; overflow:hidden; background:#0b0f0d; height:calc(100vh - var(--tp-header-h, 112px)); min-height:520px; }
.hs__slide{ position:absolute; inset:0; z-index:1; opacity:0; visibility:hidden; transition:opacity .8s ease; background-size:cover; background-position:center; }
.hs__slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hs__scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, rgba(6,10,8,.9) 0%, rgba(6,10,8,.64) 30%, rgba(6,10,8,.22) 54%, rgba(6,10,8,0) 82%),
  linear-gradient(0deg, rgba(6,10,8,.55) 0%, rgba(6,10,8,0) 34%); }
.hs__inner{ position:relative; z-index:3; height:100%; display:flex; align-items:center; }
.hs__text{ padding:56px 0; max-width:640px; }
.hs__title{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0 0 26px; font-weight:700; line-height:1.04; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5); }
.hs__line{ font-size:clamp(44px, 6.8vw, 70px); }
.hs__line--hi{ position:relative; display:inline-block; }
.hs__line--hi::after{ content:""; position:absolute; left:-.05em; right:-.06em; bottom:.08em; height:.24em; background:var(--hi, var(--accent)); z-index:-1; }
.hs__sub{ color:rgba(255,255,255,.92); font-size:17px; line-height:1.55; max-width:40ch; margin:0 0 30px; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.hs__actions .btn{ box-shadow:0 10px 26px rgba(0,0,0,.28); }
.hs__foot{ position:absolute; left:0; right:0; bottom:24px; z-index:4; }
.hs__dots{ display:flex; gap:8px; }
.hs__dot{ height:8px; width:8px; border-radius:4px; cursor:pointer; background:rgba(255,255,255,.55); border:none; padding:0; transition:all .3s ease; }
.hs__dot.is-active{ width:28px; background:#fff; }
.hs__rule{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.14); z-index:4; }
/* cascade entrance (top -> down) on the active slide */
.hs__slide .hs__line, .hs__slide .hs__sub, .hs__slide .hs__actions{ opacity:0; }
@keyframes hsUp{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:translateY(0); } }
.hs__slide.is-active .hs__line{ animation:hsUp .7s cubic-bezier(.22,.61,.36,1) both; }
.hs__slide.is-active .hs__line:nth-child(1){ animation-delay:.12s; }
.hs__slide.is-active .hs__line:nth-child(2){ animation-delay:.24s; }
.hs__slide.is-active .hs__line:nth-child(3){ animation-delay:.36s; }
.hs__slide.is-active .hs__sub{ animation:hsUp .7s cubic-bezier(.22,.61,.36,1) both; animation-delay:.5s; }
.hs__slide.is-active .hs__actions{ animation:hsUp .7s cubic-bezier(.22,.61,.36,1) both; animation-delay:.62s; }

@media (max-width:900px){
  .hs{ height:auto; min-height:0; max-height:none; }
  .hs__slide{ position:relative; inset:auto; opacity:1; visibility:visible; min-height:calc(100svh - var(--tp-header-h, 114px)); background-position:72% center; }
  .hs__slide:not(.is-active){ display:none; }
  .hs__scrim{ background:linear-gradient(180deg, rgba(6,10,8,.74) 0%, rgba(6,10,8,.46) 38%, rgba(6,10,8,.46) 60%, rgba(6,10,8,.84) 100%); }
  .hs__inner{ align-items:center; min-height:calc(100svh - var(--tp-header-h, 114px)); }
  .hs__text{ padding:24px 0; width:100%; }
  .hs__line{ font-size:clamp(39px, 11.2vw, 60px); }
  .hs__sub{ font-size:15px; }
  .hs__actions .btn{ width:100%; justify-content:center; }
  .hs__foot{ bottom:18px; }
}

/* ==========================================================================
   CATEGORIES
   ========================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cat-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cat-card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(20,30,25,.14); border-color:var(--accent); }
.cat-card__img{ height:170px; background-image:repeating-linear-gradient(45deg, var(--tile-a) 0 11px, var(--tile-b) 11px 22px); position:relative; display:flex; align-items:flex-end; padding:16px; }
/* branded tile for categories without a photo — court-green + large sport icon */
.cat-card__img--brand{ align-items:center; justify-content:center; padding:0; background:radial-gradient(120% 130% at 28% 22%, #1c4436 0%, #0E2A22 55%, #081611 100%); }
.cat-card__img--brand .ic{ width:88px; height:88px; color:var(--accent); opacity:.9; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
.cat-card--brand:hover .cat-card__img--brand .ic{ transform:scale(1.06); transition:transform .25s ease; }
.cat-card__ph{ font-family:monospace; font-size:11px; color:var(--ph); }
.cat-card__body{ padding:22px 24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cat-card__name{ font-size:20px; font-weight:700; letter-spacing:-.02em; margin-bottom:8px; }
.cat-card__subs{ font-size:13px; color:var(--muted); line-height:1.5; }
.cat-card__arrow{ flex-shrink:0; width:40px; height:40px; border-radius:10px; background:var(--chip); display:flex; align-items:center; justify-content:center; color:var(--text); transition:background .2s ease; }
.cat-card:hover .cat-card__arrow{ background:var(--accent); }
.cat-card:hover .cat-card__arrow svg{ color:#0E2A22; }

/* ==========================================================================
   PRODUCT CARD (shared: home + catalog + product-similar)
   ========================================================================== */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .18s ease, border-color .18s ease; display:block; }
.product-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
/* white media tile — donor product photos ship on a white studio background, so a white tile
   makes them blend seamlessly (same in both themes; the photo pops on dark) */
.product-card__media{ position:relative; padding:18px; background:#fff; }
.product-card__img{ height:280px; border-radius:8px; background-size:contain; background-position:center; background-repeat:no-repeat; }
.badge{ position:absolute; top:13px; left:13px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:#0E2A22; padding:5px 10px; border-radius:6px; z-index:2; }
.wish{ position:absolute; top:13px; right:13px; width:34px; height:34px; border-radius:8px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; z-index:2; color:var(--muted); cursor:pointer; }
.product-card__body{ padding:15px 17px 17px; background:var(--surface-2); }
.product-card__meta{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.product-card__brand{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.stock{ font-size:10.5px; color:#2E9E5B; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.stock i{ width:6px; height:6px; border-radius:50%; background:#2E9E5B; }
.stock--order{ color:#C4791F; }
.stock--order i{ background:#E0A02A; }
/* product page — extras. Den Polansky */
.review-empty{ color:var(--muted); font-size:14.5px; line-height:1.6; padding:6px 0; }
.field-inp{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; font-size:15px; }
.field-inp:focus{ outline:none; border-color:var(--accent); }
.pinfo__stock.stock--order i{ background:#E0A02A; }
.rev-empty{ display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding:38px 28px; border:1px solid var(--line); border-radius:18px; }
.rev-empty__ic{ width:58px; height:58px; flex-shrink:0; border-radius:50%; background:rgba(214,255,61,.22); color:#0E2A22; display:flex; align-items:center; justify-content:center; }
.rev-empty__body{ flex:1 1 260px; min-width:0; }
.rev-empty__title{ font-size:18px; font-weight:700; color:var(--text); margin-bottom:5px; }
.rev-empty__text{ font-size:14px; color:var(--muted); line-height:1.55; max-width:560px; }
.rev-empty__btn{ flex-shrink:0; gap:8px; }
:root[data-theme="dark"] .rev-empty__ic{ background:rgba(214,255,61,.16); color:var(--accent); }
@media (max-width:560px){ .rev-empty__btn{ width:100%; justify-content:center; } }
.product-card__name{ font-size:15px; font-weight:700; line-height:1.3; margin-bottom:13px; min-height:40px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.product-card__prices{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.product-card__price{ font-size:20px; font-weight:700; letter-spacing:-.01em; color:#bc4a21; line-height:1.1; }
.product-card__old{ font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:line-through; }
.badge--sale{ background:#BE4414; color:#fff; }

/* tabs (new / hit) */
.tabs{ display:inline-flex; background:var(--chip); border:1px solid var(--line); border-radius:12px; padding:4px; }
.tab{ font-family:inherit; cursor:pointer; border:none; font-weight:700; font-size:14px; padding:9px 22px; border-radius:9px; background:transparent; color:var(--muted); }
.tab.is-active{ background:var(--text); color:var(--bg); }

/* ==========================================================================
   ADVANTAGES
   ========================================================================== */
/* trust strip — light section card (was a heavy dark panel; lightened so it doesn't clash with the brick pros band below) */
.adv-panel{ background:var(--section); border-radius:20px; padding:32px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.adv{ padding-right:24px; border-right:1px solid var(--line); color:#0E2A22; }
.adv:last-child{ border-right:none; padding-right:0; }
:root[data-theme="dark"] .adv{ color:var(--accent); }
.adv__title{ font-size:16px; font-weight:700; color:var(--text); margin:14px 0 6px; }
.adv__text{ font-size:13px; color:var(--muted); line-height:1.55; }

/* ==========================================================================
   BRANDS
   ========================================================================== */
.brand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.brand{ border:1px solid var(--line); border-radius:12px; height:76px; display:flex; align-items:center; justify-content:center; background:var(--surface); cursor:pointer; transition:border-color .18s ease; }
.brand:hover{ border-color:var(--accent); }
.brand span{ font-size:16px; font-weight:700; letter-spacing:-.02em; }
.brand__logo{ max-height:28px; max-width:74%; width:auto; object-fit:contain; filter:brightness(0); opacity:.58; transition:opacity .18s ease, filter .18s ease; }
.brand--logo:hover .brand__logo{ opacity:1; filter:none; }
:root[data-theme="dark"] .brand__logo{ filter:brightness(0) invert(1); opacity:.72; }
:root[data-theme="dark"] .brand--logo:hover .brand__logo{ filter:none; opacity:1; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-panel{ background:var(--section); border-radius:20px; padding:56px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.about__title{ font-size:34px; font-weight:700; letter-spacing:-.025em; margin-bottom:18px; line-height:1.1; }
.about__text{ font-size:16px; line-height:1.65; color:var(--muted); margin-bottom:22px; max-width:48ch; }
.about__stats{ display:flex; gap:40px; }
.stat__num{ font-size:34px; font-weight:700; letter-spacing:-.02em; }
.stat__label{ font-size:13px; color:var(--muted); margin-top:2px; }
.about__media{ position:relative; height:320px; border-radius:16px; overflow:hidden; background-image:repeating-linear-gradient(45deg, var(--tile-a) 0 12px, var(--tile-b) 12px 24px); display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px; }
.about__media--photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.media-ph{ font-family:monospace; font-size:12px; color:var(--ph); }

/* ==========================================================================
   PROS — «Дізнайся чим грають профі» (home block before About).
   Full-width brick band (theme-independent), lime accents, reused product cards.
   ========================================================================== */
.pros{ position:relative; background:#BE4414; border-radius:20px; padding:48px 52px 52px; color:#fff; overflow:hidden; }
.pros__sticker{ position:absolute; top:29px; right:51px; width:104px; height:auto; transform:rotate(7deg); filter:drop-shadow(0 8px 18px rgba(0,0,0,.22)); pointer-events:none; z-index:3; }
.pros__head{ display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:end; padding-right:120px; }
.pros__kicker{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:12px; }
.pros__title{ font-size:40px; font-weight:700; letter-spacing:-.025em; line-height:1.05; color:#fff; }
.pros__intro{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.9); max-width:44ch; }
.pros__rule{ height:1px; background:rgba(255,255,255,.22); margin:30px 0; }
.pros__athlete{ display:flex; align-items:center; gap:20px; margin-bottom:34px; }
.pros__avatar{ width:76px; height:76px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; border:3px solid rgba(255,255,255,.35); }
.pros__who{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.pros__name{ background:var(--accent); color:#0E2A22; font-weight:700; font-size:14px; padding:5px 14px; border-radius:8px; }
.pros__bio{ font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); max-width:76ch; }
/* reused product cards sit on the brick band → reset inherited white text back to the card's own colour */
.pros .product-card{ color:var(--text); }
@media (max-width:900px){
  .pros{ padding:36px 26px 40px; }
  .pros__head{ grid-template-columns:1fr; gap:16px; padding-right:80px; }
  .pros__title{ font-size:30px; }
  .pros__sticker{ width:84px; right:20px; }
}
@media (max-width:560px){
  .pros__head{ padding-right:64px; }
  .pros__title{ font-size:25px; }
  .pros__athlete{ gap:14px; margin-bottom:26px; }
  .pros__avatar{ width:60px; height:60px; }
  .pros__sticker{ width:70px; top:-8px; right:14px; }
}

/* ===== HOME FAQ ===== */
.homefaq{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:56px; align-items:start; }
.homefaq__title{ font-size:clamp(32px, 3.6vw, 50px); font-weight:700; text-transform:none; line-height:1.03; letter-spacing:-.01em; margin:0 0 20px; }
.homefaq__intro{ font-size:15.5px; line-height:1.6; color:var(--muted); max-width:34ch; margin:0; }
.hfaq{ border-bottom:2px dotted var(--line-2); }
.hfaq:first-child{ border-top:2px dotted var(--line-2); }
.hfaq > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 2px; font-size:17px; font-weight:700; color:var(--text); }
.hfaq > summary::-webkit-details-marker{ display:none; }
.hfaq > summary::marker{ content:''; }
.hfaq__toggle{ flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#0E2A22; display:flex; align-items:center; justify-content:center; transition:transform .22s ease, background .18s ease; }
.hfaq[open] .hfaq__toggle{ transform:rotate(180deg); }
.hfaq > summary:hover .hfaq__toggle{ background:var(--accent-hover); }
.hfaq__body{ font-size:14.5px; line-height:1.62; color:var(--muted); max-width:64ch; padding:0 56px 24px 2px; margin-top:-6px; }
@media (max-width:860px){
  .homefaq{ grid-template-columns:1fr; gap:22px; }
  .homefaq__title{ font-size:clamp(30px, 8.5vw, 40px); margin-bottom:12px; }
  .homefaq__intro{ max-width:none; }
  .hfaq > summary{ font-size:15.5px; gap:14px; padding:18px 0; }
  .hfaq__body{ padding-right:0; }
}

/* ==========================================================================
   CONTACTS
   ========================================================================== */
.contacts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.contacts__title{ font-size:34px; font-weight:700; letter-spacing:-.025em; margin-bottom:28px; }
.contact-list{ display:flex; flex-direction:column; gap:20px; }
.contact{ display:flex; gap:14px; align-items:flex-start; }
.contact__ic{ width:44px; height:44px; border-radius:11px; background:var(--chip); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text); }
.contact__main{ font-size:16px; font-weight:700; line-height:1.35; }
.contact__sub{ font-size:13px; color:var(--muted); margin-top:6px; }
.contacts__map{ position:relative; height:360px; border-radius:18px; overflow:hidden; background-image:repeating-linear-gradient(45deg, var(--tile-a) 0 12px, var(--tile-b) 12px 24px); display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--court); color:var(--court-muted); padding:64px 0 32px; border-top:1px solid var(--court-line); margin-top:96px; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; }
.footer__logo{ display:inline-flex; align-items:center; }
.footer__logo .logo__img{ display:block; height:36px; width:82px; }
.footer__about{ font-size:13.5px; line-height:1.65; margin:18px 0 20px; max-width:32ch; }
.socials{ display:flex; gap:10px; }
.social{ width:38px; height:38px; border:1px solid var(--court-line); border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--accent); }
.social:hover{ color:var(--accent); }
.footer__col-title{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-court); font-weight:700; margin-bottom:18px; }
.footer__links{ display:flex; flex-direction:column; gap:11px; font-size:13.5px; }
.footer__links a, .footer__links span{ cursor:pointer; display:inline-block; width:fit-content; }
.footer__bottom{ border-top:1px solid var(--court-line); margin-top:44px; padding-top:22px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer__bottom a{ color:var(--on-court); font-weight:600; }

/* ===== FOOTER v2 (brand marquee + black footer, client mockup) ===== */
/* band sits flush on top of the footer; the gap goes ABOVE the band */
.brandband{ background:#BE4414; overflow:hidden; margin-top:0; }
/* iOS-safe marquee: promote the track to its own compositor layer (translateZ/
   will-change) so Safari doesn't drop the animation on scroll/repaint, and animate
   with translate3d. Logos are NOT lazy (see footer.twig) so width:max-content is
   stable from the first paint. Den Polansky */
.brandband__track{ display:flex; align-items:center; width:max-content; will-change:transform; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-animation:brandscroll 55s linear infinite; animation:brandscroll 55s linear infinite; }
.brandband:hover .brandband__track{ -webkit-animation-play-state:paused; animation-play-state:paused; }
.brandband__item{ flex:0 0 auto; display:flex; align-items:center; padding:37px 42px; }
.brandband__item img{ display:block; height:30px; width:auto; opacity:.95; filter:brightness(0) invert(1); }
.brandband__dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); }
@-webkit-keyframes brandscroll{ from{ -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } to{ -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); } }
@keyframes brandscroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

.footer2{ background:#0E0E0E; color:#9a9a97; padding:46px 0 26px; margin-top:0; }
.footer2 .container{ display:block; }

.footcta{ display:flex; align-items:center; justify-content:space-between; gap:30px 40px; flex-wrap:wrap; }
.footcta__title{ font-size:20px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.footcta__phone{ display:inline-flex; align-items:center; gap:10px; margin-top:9px; color:var(--accent); font-size:25px; font-weight:700; letter-spacing:.01em; line-height:1; }
.footcta__phone svg{ color:var(--accent); }
.footcta__phone:hover{ color:#fff; }
.footcta__phone:hover svg{ color:#fff; }
.footcta__form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footcta__input{ height:48px; border-radius:12px; border:1px solid #2c2c2a; background:#171716; color:#fff; padding:0 16px; font-size:14px; min-width:230px; outline:none; transition:border-color .18s ease; }
.footcta__input::placeholder{ color:#6f6f6c; }
.footcta__input:focus{ border-color:var(--accent); }
.footcta__btn{ height:48px; padding:0 24px; }
.footcta__ok{ color:var(--accent); font-weight:600; font-size:14px; }

.footdivider{ height:0; border-top:2px dotted rgba(214,255,61,.42); margin:30px 0 34px; }

.footmain{ display:grid; grid-template-columns:1.15fr 0.85fr 1.5fr; gap:32px 44px; }
.footmain__brand{ display:flex; align-items:flex-start; gap:22px; }
.footmain__sticker{ flex:0 0 auto; width:104px; height:104px; display:block; }
.footer2 .footer__logo .logo__img{ height:46px; width:98px; }
.footmain__slogan{ font-size:14px; color:#9a9a97; margin:14px 0 18px; }
.footer__links--2col{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.socials--foot .social{ border-color:#2c2c2a; color:var(--accent); }
.socials--foot .social:hover{ border-color:var(--accent); }
.footer2 .footer__col-title{ color:#fff; margin-bottom:16px; }
.footer2 .footer__links{ gap:12px; }
.footer2 .footer__links a, .footer2 .footer__links span{ color:#9a9a97; }
.footer2 .footer__links a:hover{ color:var(--accent); }
.footer2__bottom{ border-top:1px solid #232322; margin-top:38px; padding-top:22px; padding-right:96px; color:#6f6f6c; }
.footer2__bottom a{ color:#fff; }

@media (max-width:900px){
  .brandband{ margin-top:0; }
  .brandband__item{ padding:22px 24px; }
  .brandband__item img{ height:26px; }
  .footer2{ padding:36px 0 22px; margin-top:0; }
  .footcta{ flex-direction:column; align-items:flex-start; gap:16px; }
  .footcta__form{ width:100%; }
  .footcta__input{ flex:1 1 auto; min-width:0; }
  .footdivider{ margin:24px 0 28px; }
  .footmain{ grid-template-columns:1fr 1fr; gap:26px 22px; }
  .footmain__brand{ grid-column:1 / -1; }
  .footer2__bottom{ padding-right:0; }
}
@media (max-width:560px){
  .footcta__title{ font-size:18px; }
  .footcta__form{ flex-direction:column; align-items:stretch; }
  .footcta__btn{ width:100%; }
  .footmain{ grid-template-columns:1fr; gap:24px; }
}

/* ==========================================================================
   FLOATING ACTION BUTTON
   ========================================================================== */
.fab{ position:fixed; right:28px; bottom:28px; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.fab__items{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:12px; left:-8px; }
.fab__item{ display:flex; align-items:center; justify-content:flex-end; gap:10px; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.fab.is-open .fab__item{ opacity:1; transform:translateY(0); pointer-events:auto; }
.fab.is-open .fab__item:nth-child(1){ transition-delay:.0s; }
.fab.is-open .fab__item:nth-child(2){ transition-delay:.04s; }
.fab.is-open .fab__item:nth-child(3){ transition-delay:.08s; }
.fab.is-open .fab__item:nth-child(4){ transition-delay:.12s; }
.fab__label{ font-size:12.5px; font-weight:700; color:#fff; background:rgba(14,42,34,.9); padding:6px 11px; border-radius:8px; white-space:nowrap; }
.fab__ic{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:transform .18s ease, box-shadow .18s ease; }
.fab__item:hover .fab__ic{ transform:scale(1.12); box-shadow:0 12px 28px rgba(0,0,0,.4); }
.fab__item:hover .fab__label{ color:#D6FF3D; }
.fab__main{ position:relative; z-index:2; width:60px; height:60px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; box-shadow:0 10px 28px rgba(20,30,25,.3); transition:transform .18s ease; }
.fab__main:hover{ transform:scale(1.07); }
.fab__main-ic{ display:flex; transition:transform .25s ease; }
.fab.is-open .fab__main-ic{ transform:rotate(90deg); }
.fab__main .close-ic{ display:none; }
.fab.is-open .fab__main .close-ic{ display:block; }
.fab.is-open .fab__main .open-ic{ display:none; }
.fab__backdrop{ position:fixed; inset:0; z-index:1; display:none; }
.fab.is-open .fab__backdrop{ display:block; }

/* ---------- interactive hover accent (matches original demo) ---------- */
.nav span:hover,
.topbar__links span:hover,
.topbar__links a:hover,
.muted-link:hover,
.lang .off:hover,
.link-more:hover,
.footer__links span:hover,
.footer__links a:hover,
.footer__bottom a:hover,
.phone__toggle:hover,
.cart-item__x:hover,
.head-icons > svg:hover,
.cart__toggle:hover,
.wish:hover { color: #D96B3A; }
.search:hover { border-color: var(--line-2); }
.social:hover { border-color: var(--accent); }

/* ==========================================================================
   CATALOG PAGE
   ========================================================================== */
.breadcrumb{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); padding-top:22px; white-space:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.breadcrumb::-webkit-scrollbar{ display:none; }
.breadcrumb > *{ flex-shrink:0; }
.breadcrumb a{ cursor:pointer; }
.breadcrumb a:hover{ color:#D96B3A; }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .cur{ color:var(--text); font-weight:600; }
.cat-headrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-top:18px; }
.cat-title{ font-size:44px; font-weight:700; letter-spacing:-.03em; margin-bottom:12px; }
.cat-intro{ font-size:15px; line-height:1.6; color:var(--muted); max-width:62ch; }
.cat-count{ font-size:14px; color:var(--muted); white-space:nowrap; padding-bottom:6px; }
.cat-count b{ color:var(--text); font-weight:700; }

.catalog{ max-width:1360px; margin:0 auto; padding:32px 40px 96px; display:grid; grid-template-columns:272px 1fr; gap:32px; align-items:start; }

/* filters sidebar */
.filters{ border:1px solid var(--line); border-radius:16px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; position:sticky; top:100px; max-height:calc(100vh - 116px); background:var(--surface); scrollbar-width:none; -ms-overflow-style:none; }
.filters::-webkit-scrollbar{ width:0; height:0; display:none; }
.filters__head{ padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.filters__title{ font-size:15px; font-weight:700; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:8px; }
.filters__actions{ display:flex; align-items:center; gap:14px; }
.filters__clear{ font-size:12px; color:#D96B3A; font-weight:600; cursor:pointer; }
.filters__close{ display:none; cursor:pointer; color:var(--muted); align-items:center; background:none; border:none; }

.fsec{ border-bottom:1px solid var(--line); }
.fsec:last-of-type{ border-bottom:none; }
.fsec > summary{ padding:16px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; list-style:none; }
.fsec > summary::-webkit-details-marker{ display:none; }
.fsec__label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text); font-weight:700; }
.fsec__chev{ color:var(--muted); transition:transform .2s ease; }
.fsec:not([open]) .fsec__chev{ transform:rotate(-90deg); }
.fsec__body{ padding:0 20px 18px; }

.fsearch{ display:flex; align-items:center; gap:8px; background:var(--chip); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:14px; color:var(--muted); font-size:12.5px; }
.fcheck-list{ display:flex; flex-direction:column; gap:11px; }
.fcheck{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); cursor:pointer; }
.fcheck input{ position:absolute; opacity:0; width:0; height:0; }
.fcheck__box{ width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fcheck__box svg{ opacity:0; }
.fcheck input:checked + .fcheck__box{ background:var(--accent); border-color:var(--accent); }
.fcheck input:checked + .fcheck__box svg{ opacity:1; }
.fcheck__name{ flex:1; display:inline-flex; align-items:center; gap:7px; }
.fcheck__count{ font-size:12px; color:var(--muted); }
.fmore{ font-size:12.5px; color:var(--text); font-weight:600; cursor:pointer; margin-top:13px; display:inline-flex; align-items:center; gap:5px; }
.fmore:hover{ color:#D96B3A; }
.badge-sale{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:#D96B3A; color:#fff; padding:2px 7px; border-radius:5px; }

/* chips (level / grip) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips--grip{ flex-wrap:nowrap; }
/* cm foot-length chips — even 3-col grid so buttons don't jump; cm big + «≈ EU» small. Den Polansky */
.chips--cm{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.chips--cm .chip span{ display:flex; flex-direction:column; align-items:center; line-height:1.12; gap:1px; padding:6px 4px; }
.chip__eu{ font-size:9.5px; font-weight:600; color:var(--muted); font-style:normal; }
.chip input:checked + span .chip__eu{ color:inherit; opacity:.8; }
.chip{ position:relative; display:inline-flex; flex:0 0 auto; }
.chips--grip .chip{ flex:1; }
.chip input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.chip span{ font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:8px; border:1px solid var(--line); color:var(--text); cursor:pointer; width:100%; text-align:center; }
.chips--grip .chip span{ padding:9px 0; font-size:13px; font-weight:600; }
.chip input:checked + span{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* price */
.price-range{ width:100%; margin:0 0 14px; accent-color:var(--accent); }
.price-inputs{ display:flex; align-items:center; gap:10px; }
.price-box{ flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.price-box small{ font-size:10px; color:var(--muted); display:block; }
.price-box b{ font-size:13.5px; font-weight:600; }

/* colors */
.colors{ display:flex; flex-wrap:wrap; gap:10px; }
.color{ width:26px; height:26px; border-radius:50%; cursor:pointer; }
.color--sel{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
.color--bd{ border:1px solid var(--line); }

/* toolbar */
.toolbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:nowrap; }
.toolbar__left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.toolbar__label{ font-size:12.5px; color:var(--muted); margin-right:4px; }
.active-chip{ font-size:12.5px; font-weight:600; padding:6px 11px; border-radius:20px; background:var(--chip); border:1px solid var(--line); display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--text); }
.active-chip svg{ color:var(--muted); }
.active-chip:hover{ color:#D96B3A; }
.toolbar__right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.filter-btn{ display:none; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); border:1.5px solid var(--line); border-radius:10px; padding:9px 16px; cursor:pointer; margin-right:4px; background:none; }

/* sort dropdown */
.sort{ position:relative; }
.sort__toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:9px 12px; cursor:pointer; user-select:none; background:var(--surface); }
.sort__toggle small{ font-size:12px; color:var(--muted); }
.sort__toggle b{ font-size:13px; font-weight:600; }
.sort__chev{ color:var(--muted); transition:transform .2s ease; }
.sort.is-open .sort__chev{ transform:rotate(180deg); }
.sort__menu{ position:absolute; top:calc(100% + 8px); right:0; width:232px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px var(--shadow); z-index:45; padding:6px; display:none; }
.sort.is-open .sort__menu{ display:block; }
.sort__opt{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); }
.sort__opt:hover, .sort__opt.is-active{ background:var(--chip); }

/* view toggle */
.view-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.view-toggle button{ font-family:inherit; cursor:pointer; border:none; padding:9px 12px; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--muted); }
.view-toggle button.is-active{ background:var(--text); color:var(--bg); }

/* catalog grid = 3 cols */
.product-grid--3{ grid-template-columns:repeat(3,1fr); }

/* list view */
.product-list{ display:flex; flex-direction:column; gap:16px; }
.product-row{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; display:grid; grid-template-columns:250px 1fr auto; gap:24px; align-items:center; transition:border-color .18s ease; }
.product-row:hover{ border-color:var(--accent); }
.product-row__media{ position:relative; padding:18px 24px; background:#fff; align-self:stretch; display:flex; align-items:center; border-right:1px solid var(--line); }
.product-row__img{ width:100%; height:210px; background-size:contain; background-position:center; background-repeat:no-repeat; }
.product-row__body{ padding:20px 0; }
.product-row__name{ font-size:19px; font-weight:700; line-height:1.25; margin-bottom:12px; }
.spec-row{ display:flex; gap:22px; flex-wrap:wrap; }
.spec small{ font-size:11px; color:var(--muted); }
.spec b{ font-size:13.5px; font-weight:600; display:block; }
.product-row__aside{ padding:20px 24px 20px 0; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.product-row__price{ font-size:24px; font-weight:700; letter-spacing:-.01em; }
.product-row__actions{ display:flex; gap:8px; }
.icon-sq{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; }
.icon-sq:hover{ color:#D96B3A; border-color:var(--accent); }

/* pagination */
.pager{ display:flex; flex-direction:column; align-items:center; gap:24px; margin-top:44px; }
.pager__nums{ display:flex; align-items:center; gap:8px; }
.page{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); }
.page:hover{ border-color:var(--accent); }
.page.is-active{ background:var(--text); color:var(--bg); font-weight:700; border-color:var(--text); }
.page--dots{ border:none; cursor:default; color:var(--muted); }
.page--dots:hover{ border-color:transparent; }

/* mobile filter overlay */
.filter-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:95; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; }
.filter-overlay.is-open{ opacity:1; visibility:visible; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* iOS/Safari auto-zooms into any focused control whose font-size < 16px. Force
   16px on every real form control at mobile widths so tapping an input never
   zooms the page. Custom .tp-select is a div/button (not a native control) so it
   is unaffected; checkboxes/radios/ranges excluded. Den Polansky */
@media (max-width:900px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea, .form-control, .field input, .field textarea{ font-size:16px !important; }
}
@media (max-width:900px){
  .container{ padding-left:16px; padding-right:16px; }
  .burger{ display:flex; }
  .nav, .topbar__links, .topbar .muted-link, .cats-btn, .mega, .mega-backdrop, .head-sep, .head-util, .ic-compare{ display:none; }
  .headbar__inner{ flex-wrap:wrap; gap:12px 15px; }
  .head-right{ order:5; margin-left:auto; gap:0; }
  .head-icons{ margin-left:auto; gap:16px; }
  .head-search-toggle{ display:inline-flex; }
  /* search hidden until the magnifier is tapped, then full-width row */
  .search{ display:none; order:10; flex:1 1 100%; max-width:none; margin:0; height:44px; }
  .search.is-mopen{ display:flex; }
  .search__input{ font-size:16px; }
  .hero__stage{ min-height:78vh; }
  .hero__slide{ grid-template-columns:1fr; }
  .hero__photo{ position:absolute; inset:0; min-height:0; }
  .hero__img{ inset:0; border-radius:0; background-position:center 34%; }
  /* mobile: photo hero reads as a cinematic sports shot — dark scrim (both themes), light text.
     Avoids the milky white wash and keeps text legible over both dark bg and the bright ball. */
  .hero__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,14,12,.18) 0%, rgba(9,14,12,.34) 42%, rgba(9,14,12,.8) 78%, rgba(9,14,12,.93) 100%); }
  .hero__text{ color:#FFFFFF; text-shadow:0 1px 18px rgba(0,0,0,.35); }
  .hero__sub{ color:rgba(255,255,255,.86); }
  .hero__dot{ background:rgba(255,255,255,.7); }
  .hero__dot.is-active{ background:#FFFFFF; }
  .hero__actions .btn--outline{ color:#FFFFFF; border-color:rgba(255,255,255,.65); text-shadow:none; }
  .hero__actions .btn--outline:hover{ background:#FFFFFF; color:#111111; }
  .hero__ball{ display:none; }
  .hero__text{ position:relative; z-index:2; align-self:end; padding:0 22px 56px; }
  .hero__title{ font-size:40px; }
  .hero__actions .btn{ flex:1 1 0; white-space:nowrap; padding-top:17px; padding-bottom:17px; }
  .sec-title{ font-size:32px; }
  .cat-grid, .product-grid{ grid-template-columns:repeat(2,1fr); }
  .brand-grid{ grid-template-columns:repeat(3,1fr); }
  .adv-panel, .about-panel, .contacts-grid{ grid-template-columns:1fr; }
  .adv{ border-right:none; padding-right:0; }
  .about-panel{ padding:40px 28px; }
  /* mobile footer: brand full-width · Каталог+Інформація 2-col · Контакти full-width */
  .footer{ padding:42px 0 24px; margin-top:56px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:26px 22px; }
  .footer__grid > div:first-child,
  .footer__grid > div:last-child{ grid-column:1 / -1; }
  .footer__about{ max-width:42ch; margin:14px 0 16px; }
  .footer__col-title{ margin-bottom:13px; }
  .footer__bottom{ margin-top:26px; padding-top:18px; }
  /* compact phone in the mobile header: just the handset glyph, tap opens the
     contacts popup (hover doesn't exist on touch). Den Polansky */
  .phone--head{ display:inline-flex; margin-right:6px; }
  .phone--head .phone__head, .phone--head .phone__caret{ display:none; }
  .phone--head .phone__toggle{ gap:0; padding:6px; }
  .phone--head .phone__toggle > svg:first-child{ width:26px; height:26px; }
  .phone--head .phone__drop{ position:fixed; top:64px; left:12px; right:12px; width:auto; }
  .phone--head.is-open .phone__drop{ opacity:1; visibility:visible; transform:translateY(0); }
}
@media (max-width:560px){
  .cat-grid{ grid-template-columns:1fr; }
  /* keep the product listing 2-up on phones with a compact card */
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-card__media{ padding:12px; }
  .product-card__img{ height:165px; }
  .product-card__body{ padding:12px 12px 14px; }
  .product-card__meta{ gap:6px; margin-bottom:5px; flex-wrap:wrap; }
  .product-card__name{ font-size:13.5px; line-height:1.25; min-height:34px; margin-bottom:11px; }
  .product-card__foot{ flex-direction:column; align-items:stretch; gap:9px; }
  .product-card__price{ font-size:17px; }
  .product-card__foot .btn--sm{ width:100%; padding-left:10px; padding-right:10px; }
  .badge{ top:10px; left:10px; padding:4px 8px; font-size:10px; }
  .wish{ top:10px; right:10px; width:30px; height:30px; }
  .brand-grid{ grid-template-columns:repeat(2,1fr); }
  .hero__title{ font-size:34px; }
}

/* ---------- catalog responsive ---------- */
@media (max-width:1100px){
  .catalog{ grid-template-columns:240px 1fr; gap:24px; }
  .product-grid--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .catalog{ grid-template-columns:1fr; padding:24px 16px 64px; }
  .cat-title{ font-size:32px; }
  .cat-headrow{ flex-direction:column; align-items:flex-start; gap:12px; }
  .filters{ position:fixed; top:0; left:0; bottom:0; width:330px; max-width:88vw; max-height:none; z-index:96; border-radius:0; transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto; }
  .filters.is-open{ transform:translateX(0); }
  .filters__close{ display:flex; }
  .filter-btn{ display:inline-flex; }
  .product-row{ grid-template-columns:160px 1fr; }
  .product-row__aside{ grid-column:1 / -1; padding:0 16px 16px; text-align:left; align-items:center; flex-direction:row; justify-content:space-between; }
}
@media (max-width:560px){
  /* catalog grid view: 2-up on phones, same compact card as the home listing */
  .product-grid--3{ grid-template-columns:repeat(2,1fr); }
  .product-row{ grid-template-columns:1fr; }
  .product-row__media{ height:200px; border-right:0; border-bottom:1px solid var(--line); }
  .product-row__img{ height:200px; }
  /* mobile toolbar: drop the grid/list switch and the empty "Активні:" label,
     so the filter button and the sort dropdown share one row */
  .toolbar{ flex-wrap:nowrap; }
  .toolbar__left .active-chip, .toolbar__label{ display:none; }
  .view-toggle{ display:none; }
  .toolbar__right{ flex:1 1 auto; justify-content:flex-end; }
  .filter-btn{ margin-right:0; }
}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
html{ scroll-behavior:smooth; }
.product-top{ max-width:1360px; margin:0 auto; padding:26px 0 40px; display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; }

/* gallery */
.gallery{ display:grid; grid-template-columns:76px 1fr; gap:16px; position:sticky; top:96px; }
/* thumbnail column scrolls (capped to main-photo height by JS) but the scrollbar is fully hidden. Den Polansky */
.gallery__thumbs{ display:flex; flex-direction:column; gap:12px; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; }
.gallery__thumbs::-webkit-scrollbar{ display:none; }
.gthumb{ width:76px; aspect-ratio:4/5; flex:0 0 auto; border-radius:10px; padding:5px; cursor:pointer; background:#fff; border:1px solid var(--line); }
.gthumb.is-active{ border:2px solid var(--accent); }
.gthumb__img{ width:100%; height:100%; border-radius:7px; background-size:contain; background-position:center; background-repeat:no-repeat; }
.gallery__main{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; align-items:center; justify-content:center; }
.gallery__img{ width:100%; aspect-ratio:4/5; border-radius:12px; background-size:contain; background-position:center; background-repeat:no-repeat; filter:url(#tp-whiten); }
.gthumb__img, .tp-product .product-card__img{ filter:url(#tp-whiten); }
.gallery__badge{ position:absolute; top:18px; left:18px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--accent); color:#0E2A22; padding:6px 11px; border-radius:7px; z-index:2; }
.gallery__wish{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); z-index:2; }
.gallery__wish:hover{ color:#D96B3A; }
.gallery__zoom{ position:absolute; bottom:18px; right:18px; display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:6px 10px; border-radius:20px; cursor:pointer; }

/* info */
.pinfo__top{ display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.pinfo__brand{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.pinfo__rating{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; cursor:pointer; }
.pinfo__rating b{ font-weight:600; color:var(--text); }
.pinfo__sku{ margin-left:auto; font-size:12px; color:var(--muted); }
.pinfo__sku b{ color:var(--text); font-weight:600; text-transform:uppercase; }
.pinfo__title{ font-size:40px; font-weight:700; letter-spacing:-.03em; margin-bottom:18px; line-height:1.05; }
.pinfo__price-row{ display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.pinfo__price{ font-size:34px; font-weight:700; letter-spacing:-.02em; }
.pinfo__old{ font-size:18px; font-weight:600; color:var(--muted); text-decoration:line-through; }
.pinfo__disc{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:#D96B3A; color:#fff; padding:4px 9px; border-radius:6px; }
.pinfo__stock{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:#2E9E5B; font-weight:600; margin-bottom:22px; }
.pinfo__stock i{ width:8px; height:8px; border-radius:50%; background:#2E9E5B; }
.pinfo__desc{ font-size:15px; line-height:1.65; color:var(--text); margin-bottom:26px; max-width:52ch; }

.grip-sel{ margin-bottom:22px; }
.grip-sel__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.grip-sel__label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.grip-sel__help{ font-size:12.5px; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.grip-opts{ display:flex; flex-wrap:wrap; gap:9px; }
.grip-opt{ position:relative; }
.grip-opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.grip-opt span{ display:block; min-width:46px; text-align:center; font-size:13.5px; font-weight:600; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line); color:var(--text); cursor:pointer; }
.grip-opt input:checked + span{ background:var(--text); color:var(--bg); border-color:var(--text); }

.buy-row{ display:flex; gap:12px; align-items:stretch; margin-bottom:18px; }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; }
.qty button{ width:44px; height:54px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:20px; background:none; border:none; user-select:none; }
.qty__val{ width:40px; text-align:center; font-size:16px; font-weight:700; }
.btn-buy{ flex:1; background:var(--accent); color:#0E2A22; font-weight:700; font-size:16px; padding:0 28px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; cursor:pointer; transition:background .16s ease; }
.btn-buy:hover{ background:var(--accent-hover); }
.icon-btn-lg{ width:54px; background:transparent; border:1.5px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--text); cursor:pointer; }
.icon-btn-lg:hover{ border-color:var(--accent); color:#D96B3A; }
.btn-1click{ width:100%; background:var(--court); color:var(--on-court); font-weight:700; font-size:15px; padding:15px; border-radius:12px; border:none; cursor:pointer; margin-bottom:24px; }
.btn-1click:hover{ filter:brightness(1.12); }

.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.trust__item{ border:1px solid var(--line); border-radius:12px; padding:18px 12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.trust__item span{ font-size:12.5px; font-weight:600; line-height:1.35; }

/* sticky anchor nav */
.pnav{ position:sticky; top:var(--tp-header-h, 112px); z-index:44; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pnav__inner{ max-width:1360px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.pnav__links{ display:flex; gap:4px; overflow-x:auto; }
.pnav__link{ font-size:13.5px; font-weight:600; padding:16px 14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; color:var(--muted); }
.pnav__link:hover{ color:var(--text); }
.pnav__link.is-active{ color:var(--text); border-bottom-color:var(--accent); }
.pnav__buy{ display:flex; align-items:center; gap:16px; }
.pnav__price{ font-size:19px; font-weight:700; white-space:nowrap; }

/* sections */
.psec{ scroll-margin-top:calc(var(--tp-header-h, 112px) + 62px); padding:64px 0 0; }
.psec__title{ font-size:30px; font-weight:700; letter-spacing:-.02em; margin-bottom:24px; }
.desc-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; }
.desc-text{ font-size:15.5px; line-height:1.75; color:var(--text); }
.desc-text p{ margin-bottom:16px; }
.desc-text p:last-child{ margin-bottom:0; }
.desc-text b{ color:var(--text); font-weight:600; }
.perks{ border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--surface); }
.perks__title{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:18px; }
.perks__list{ display:flex; flex-direction:column; gap:14px; }
.perk{ display:flex; gap:11px; align-items:flex-start; }
.perk svg{ flex-shrink:0; margin-top:1px; }
.perk span{ font-size:14px; line-height:1.45; }

.spec-table{ border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.spec-line{ display:flex; justify-content:space-between; gap:20px; padding:13px 22px; }
.spec-line:nth-child(even){ background:var(--surface-2); }
.spec-line .k{ font-size:13.5px; color:var(--muted); }
.spec-line .v{ font-size:13.5px; font-weight:600; text-align:right; }

.video-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; gap:20px; flex-wrap:wrap; }
.video-sub{ font-size:13.5px; color:var(--muted); }
.play-wrap{ position:relative; border-radius:18px; overflow:hidden; cursor:pointer; aspect-ratio:16/9; background-color:var(--surface-2); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.play-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,42,34,0) 40%, rgba(14,42,34,.55) 100%); }
.play-btn{ position:relative; width:84px; height:84px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px rgba(0,0,0,.28); transition:transform .18s ease; }
.play-wrap:hover .play-btn{ transform:scale(1.08); }
.video-time{ position:absolute; bottom:18px; right:18px; font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:5px 10px; border-radius:7px; }
.video-cap{ position:absolute; bottom:18px; left:18px; color:#fff; }
.video-cap b{ font-size:17px; font-weight:700; letter-spacing:-.01em; display:block; }
.video-cap small{ font-size:12.5px; opacity:.85; }
.video-tags{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.vtag{ font-size:12.5px; font-weight:600; border:1px solid var(--line); border-radius:20px; padding:7px 14px; cursor:pointer; }
.vtag:hover{ border-color:var(--accent); }

.reviews-grid{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:start; }
.rating-box{ border:1px solid var(--line); border-radius:16px; padding:26px; background:var(--surface); text-align:center; }
.rating-box__num{ font-size:52px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.rating-box__stars{ display:inline-flex; gap:2px; margin:12px 0 8px; }
.rating-box__count{ font-size:13px; color:var(--muted); }
.rating-box .btn{ width:100%; margin-top:20px; padding:11px; }
.review-list{ display:flex; flex-direction:column; gap:16px; }
.review{ border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.review__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.review__who{ display:flex; align-items:center; gap:11px; }
.review__ini{ width:38px; height:38px; border-radius:50%; background:var(--chip); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.review__name{ font-size:14px; font-weight:700; }
.review__date{ font-size:11.5px; color:var(--muted); }
.review__text{ font-size:14px; line-height:1.6; color:var(--muted); }
.stars{ display:inline-flex; gap:1px; }

.delivery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dcard{ border:1px solid var(--line); border-radius:16px; padding:26px; }
.dcard__title{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:18px; }
.dcard__list{ display:flex; flex-direction:column; gap:14px; }
.drow{ display:flex; gap:12px; align-items:center; }
.drow b{ font-size:14px; font-weight:600; display:block; }
.drow small{ font-size:12.5px; color:var(--muted); }

.similar-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; gap:20px; flex-wrap:wrap; }

/* product responsive */
@media (max-width:900px){
  /* no own horizontal padding on mobile → aligns with the .container (16px) so every block on the
     product page has the SAME side gutter (breadcrumb / gallery / sections all flush). Den Polansky */
  .product-top{ grid-template-columns:1fr; padding:20px 0 32px; gap:28px; }
  /* grid items must be allowed to shrink below their min-content, else .buy-row (qty+btn+2 icons)
     forces the whole column wider than the viewport and the page zooms out / shifts right. */
  #product, .gallery, .gallery__main, .gallery__thumbs{ min-width:0; }
  /* keep qty + Купити + wish + compare all on ONE row: narrower qty, shrinkable button, smaller icons. Den Polansky */
  .buy-row{ flex-wrap:nowrap; gap:8px; }
  .buy-row > *{ min-height:52px; }
  .qty button{ width:34px; height:52px; }
  .qty__val{ width:26px; }
  .btn-buy{ flex:1 1 auto; min-width:0; padding:0 10px; }
  .icon-btn-lg{ width:46px; }
  .gallery{ position:static; grid-template-columns:1fr; }
  .gallery__thumbs{ flex-direction:row; order:2; overflow-x:auto; overflow-y:visible; max-height:none; padding-right:0; }
  .gthumb{ flex:0 0 auto; width:72px; height:72px; min-height:0; max-height:none; }
  .pinfo__title{ font-size:30px; }
  .pinfo__sku{ margin-left:0; flex-basis:100%; }
  .desc-grid, .reviews-grid, .delivery-grid{ grid-template-columns:1fr; }
  .psec__title{ font-size:24px; }
  .pnav__price{ display:none; }
  .psec{ scroll-margin-top:60px; }
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.co-wrap{ padding-bottom:80px; }
.co-head{ display:flex; align-items:center; justify-content:space-between; gap:20px 30px; flex-wrap:wrap; margin:6px 0 26px; }
.co-title{ font-size:34px; font-weight:700; letter-spacing:-.025em; }

.checkout{ display:grid; grid-template-columns:1fr 460px; gap:28px; align-items:start; }
.co-main{ display:flex; flex-direction:column; gap:18px; }
.co-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px 24px 26px; }
.co-sec-title{ display:flex; align-items:center; gap:12px; font-size:17px; font-weight:700; margin-bottom:18px; }
.co-sec-num{ width:26px; height:26px; border-radius:8px; background:var(--court); color:var(--on-court); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }

/* fields */
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{ font-size:12.5px; font-weight:600; color:var(--muted); }
.field__label i{ color:#E0563B; font-style:normal; }
.field input, .field select, .field textarea{ width:100%; font:inherit; font-size:14px; color:var(--text); background:var(--surface-2); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s ease, background .15s ease; }
.field textarea{ resize:vertical; min-height:76px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ph); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--court); background:var(--surface); }
:root[data-theme="dark"] .field input:focus, :root[data-theme="dark"] .field textarea:focus{ border-color:var(--accent); }

/* checkbox */
.check{ display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-size:13.5px; color:var(--text); cursor:pointer; user-select:none; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-2); background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; color:#0E2A22; transition:background .15s ease, border-color .15s ease; flex-shrink:0; }
.check__box svg{ opacity:0; transition:opacity .12s ease; }
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent); }
.check input:checked + .check__box svg{ opacity:1; }

/* choice cards (radio) */
.choice{ display:flex; align-items:flex-start; gap:14px; padding:16px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease; position:relative; }
.choice + .choice{ margin-top:12px; }
.choice__radio{ position:absolute; opacity:0; width:0; height:0; }
.choice__dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); flex-shrink:0; margin-top:1px; position:relative; transition:border-color .15s ease; }
.choice.is-selected{ border-color:var(--court); background:var(--surface-2); }
.choice.is-selected .choice__dot{ border-color:var(--court); }
.choice.is-selected .choice__dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--court); }
:root[data-theme="dark"] .choice.is-selected{ border-color:var(--accent); }
:root[data-theme="dark"] .choice.is-selected .choice__dot{ border-color:var(--accent); }
:root[data-theme="dark"] .choice.is-selected .choice__dot::after{ background:var(--accent); }
.choice__body{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.choice__title{ font-size:15px; font-weight:700; }
.choice__desc{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.choice__ic{ color:var(--text); flex-shrink:0; margin-top:1px; }
.np-logo{ flex-shrink:0; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; width:46px; height:46px; border-radius:10px; background:#DA291C; color:#fff; line-height:1.05; }
.np-logo b{ font-size:11px; font-weight:700; }
.np-logo span{ font-size:9px; font-weight:600; opacity:.92; }

/* segmented control (NP delivery type) */
.seg{ display:flex; gap:8px; margin:16px 0 18px; flex-wrap:wrap; }
.seg__opt{ font-size:13px; font-weight:600; color:var(--muted); padding:9px 14px; border:1px solid var(--line); border-radius:9px; cursor:pointer; background:var(--surface-2); transition:color .15s ease, border-color .15s ease, background .15s ease; }
.seg__opt input{ position:absolute; opacity:0; width:0; height:0; }
.seg__opt.is-active{ color:var(--text); border-color:var(--court); background:var(--surface); }
:root[data-theme="dark"] .seg__opt.is-active{ border-color:var(--accent); }

/* order summary */
.osum{ position:sticky; top:calc(var(--tp-header-h, 112px) + 16px); }
.osum__card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; }
.osum__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.osum__title{ font-size:17px; font-weight:700; }
.osum__edit{ font-size:12.5px; font-weight:600; color:var(--muted); border-bottom:1px solid var(--line-2); cursor:pointer; }
.osum__edit:hover{ color:#D96B3A; }
.osum__items{ display:flex; flex-direction:column; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.osum__item{ display:flex; align-items:center; gap:12px; }
.osum__thumb{ width:52px; height:52px; border-radius:10px; background:var(--surface-2) center/contain no-repeat; border:1px solid var(--line); position:relative; flex-shrink:0; }
.osum__qty{ position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--court); color:var(--on-court); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.osum__meta{ flex:1; min-width:0; }
.osum__brand{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.osum__name{ font-size:13.5px; font-weight:600; line-height:1.3; }
.osum__ctrl{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.qstep{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); overflow:hidden; }
.qstep__btn{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--text); font-size:16px; line-height:1; transition:background .12s ease; }
.qstep__btn:hover{ background:var(--chip); }
.qstep__val{ min-width:24px; text-align:center; font-size:13px; font-weight:700; }
.osum__remove{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; border-radius:7px; cursor:pointer; color:var(--muted); transition:color .12s ease, background .12s ease; }
.osum__remove:hover{ color:#E0563B; background:var(--surface-2); }
.osum__empty{ text-align:center; color:var(--muted); font-size:13.5px; padding:18px 0; }
.osum__price{ font-size:14px; font-weight:700; white-space:nowrap; align-self:center; }
.btn.is-disabled{ opacity:.5; pointer-events:none; }
.promo{ display:flex; gap:8px; margin:16px 0 0; }
.promo-msg{ font-size:12.5px; font-weight:600; margin:8px 0 6px; }
.promo-msg.is-ok{ color:#2E9E5B; }
.promo-msg.is-err{ color:#BE4414; }
.osum__row--discount span:last-child{ color:#2E9E5B; font-weight:700; }
.promo input{ flex:1; min-width:0; font:inherit; font-size:13.5px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; color:var(--text); }
.promo input::placeholder{ color:var(--ph); }
.promo input:focus{ outline:none; border-color:var(--court); }
.osum__rows{ display:flex; flex-direction:column; gap:9px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.osum__row{ display:flex; justify-content:space-between; font-size:13.5px; }
.osum__row span:first-child{ color:var(--muted); }
.osum__muted{ color:var(--muted); font-size:12.5px; }
.osum__total{ display:flex; align-items:center; justify-content:space-between; margin:16px 0; }
.osum__total span{ font-size:15px; font-weight:600; }
.osum__total b{ font-size:26px; font-weight:700; letter-spacing:-.02em; }
.osum__submit{ width:100%; }
.osum__agree{ font-size:11.5px; color:var(--muted); line-height:1.5; margin-top:12px; text-align:center; }
.osum__agree a{ color:var(--text); border-bottom:1px solid var(--line-2); }
.osum__trust{ list-style:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.osum__trust li{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); }
.osum__trust svg{ color:#2E9E5B; flex-shrink:0; }

@media (max-width:900px){
  .checkout{ grid-template-columns:1fr; }
  .osum{ position:static; }
  .co-title{ font-size:27px; }
}
@media (max-width:560px){
  .field-grid{ grid-template-columns:1fr; }
  .co-card{ padding:18px 16px 20px; }
  .co-title{ font-size:23px; }
  .osum__total b{ font-size:23px; }
}

/* ==========================================================================
   CONTENT / INFO PAGES  (about · delivery · coaches · contacts)
   ========================================================================== */
.cpage{ padding-bottom:90px; }
.page-hero{ padding:16px 0 6px; }
.page-hero__inner{ max-width:780px; }
.page-title{ font-size:46px; font-weight:700; letter-spacing:-.03em; line-height:1.03; margin-bottom:16px; }
.page-lead{ font-size:17px; color:var(--muted); line-height:1.65; }

.page-sec{ margin-top:52px; }
.page-sec__title{ font-size:28px; font-weight:700; letter-spacing:-.02em; margin-bottom:8px; }
.page-sec__sub{ font-size:15px; color:var(--muted); margin-bottom:24px; max-width:62ch; line-height:1.6; }

/* prose */
.prose p{ font-size:15px; line-height:1.75; margin-bottom:14px; }
.prose p.lead{ font-size:16.5px; color:var(--text); }
.prose ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:14px 0 18px; }
.prose li{ position:relative; padding-left:26px; font-size:15px; line-height:1.6; }
.prose li::before{ content:""; position:absolute; left:2px; top:8px; width:8px; height:8px; border-radius:2px; background:var(--accent); }

/* stats band */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; background:var(--court); border-radius:20px; padding:38px 40px; margin-top:44px; }
.stat__num{ font-size:38px; font-weight:700; letter-spacing:-.02em; color:#BE4414; }
.stat__num b{ color:var(--accent); font-weight:700; }
.stat__label{ font-size:13px; color:var(--court-muted); margin-top:4px; }

/* feature cards */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-grid--2{ grid-template-columns:repeat(2,1fr); }
.feature-grid--4{ grid-template-columns:repeat(4,1fr); }
.feature-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:border-color .18s ease, transform .18s ease; }
.feature-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.feature-card__ic{ width:46px; height:46px; border-radius:12px; background:var(--chip); display:flex; align-items:center; justify-content:center; color:var(--court); margin-bottom:16px; }
:root[data-theme="dark"] .feature-card__ic{ color:var(--accent); }
.feature-card__title{ font-size:16px; font-weight:700; margin-bottom:7px; }
.feature-card__text{ font-size:13.5px; color:var(--muted); line-height:1.6; }

/* numbered steps */
.step-list{ display:flex; flex-direction:column; gap:14px; counter-reset:step; }
.step{ display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.step__n{ counter-increment:step; width:34px; height:34px; border-radius:10px; background:var(--accent); color:#0E2A22; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step__n::before{ content:counter(step); }
.step__title{ font-size:15.5px; font-weight:700; margin-bottom:4px; }
.step__text{ font-size:13.5px; color:var(--muted); line-height:1.6; }

/* two-column content + sticky aside */
.info-cols{ display:grid; grid-template-columns:1fr 336px; gap:40px; align-items:start; margin-top:34px; }
.info-aside{ position:sticky; top:calc(var(--tp-header-h,112px) + 16px); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; }
.info-aside__title{ font-size:16px; font-weight:700; margin-bottom:6px; }
.info-fact{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
.info-fact__ic{ color:var(--court); flex-shrink:0; margin-top:1px; }
:root[data-theme="dark"] .info-fact__ic{ color:var(--accent); }
.info-fact__k{ display:block; font-size:12px; color:var(--muted); margin-bottom:2px; }
.info-fact__v{ display:block; font-size:14.5px; font-weight:600; line-height:1.4; }

/* FAQ (native <details>) */
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq__item{ background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.faq__item summary{ list-style:none; cursor:pointer; padding:17px 20px; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s ease; flex-shrink:0; }
.faq__item[open] summary::after{ transform:rotate(-135deg); }
.faq__body{ padding:0 20px 18px; font-size:14px; color:var(--muted); line-height:1.75; }

/* CTA band */
.cta-band{ margin-top:56px; background:var(--court); border-radius:20px; padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band__title{ font-size:27px; font-weight:700; color:var(--on-court); letter-spacing:-.02em; }
.cta-band__text{ font-size:14.5px; color:var(--court-muted); margin-top:8px; max-width:52ch; line-height:1.6; }

/* contact cards + map */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; }
.contact-card__ic{ width:44px; height:44px; border-radius:12px; background:var(--chip); display:flex; align-items:center; justify-content:center; color:var(--court); margin-bottom:16px; }
:root[data-theme="dark"] .contact-card__ic{ color:var(--accent); }
.contact-card__k{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:9px; }
.contact-card__v{ font-size:17px; font-weight:700; line-height:1.35; }
.contact-card__v a:hover{ color:#D96B3A; }
.contact-card__sub{ font-size:13px; color:var(--muted); margin-top:5px; line-height:1.5; }
.map-embed{ margin-top:22px; border-radius:18px; overflow:hidden; border:1px solid var(--line); height:380px; background:var(--surface-2); }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }
:root[data-theme="dark"] .map-embed iframe{ filter:invert(.92) hue-rotate(180deg); }
.msgr-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.msgr{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; padding:12px 20px; border-radius:12px; color:#fff; transition:transform .15s ease, filter .15s ease; }
.msgr:hover{ transform:translateY(-2px); filter:brightness(1.07); }
.msgr--tg{ background:#229ED9; }
.msgr--vb{ background:#7360F2; }
.msgr--wa{ background:#25D366; }

@media (max-width:900px){
  .page-title{ font-size:34px; }
  .stats{ grid-template-columns:repeat(2,1fr); padding:28px; }
  .feature-grid, .feature-grid--4, .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid--2{ grid-template-columns:1fr; }
  .info-cols{ grid-template-columns:1fr; }
  .info-aside{ position:static; }
  .cta-band{ padding:32px 26px; }
  .cta-band__title{ font-size:23px; }
}
@media (max-width:560px){
  .page-title{ font-size:28px; }
  .page-lead{ font-size:15.5px; }
  .stats, .feature-grid, .feature-grid--4, .contact-grid{ grid-template-columns:1fr; }
  .stat__num{ font-size:32px; }
  .page-sec__title{ font-size:23px; }
}

/* ==========================================================================
   ADD-TO-CART: toast · badge bump · button feedback
   ========================================================================== */
.toast-wrap{ position:fixed; top:calc(var(--tp-header-h, 112px) + 14px); right:20px; z-index:120; display:flex; flex-direction:column; gap:12px; width:340px; max-width:calc(100vw - 32px); pointer-events:none; }
.toast{ pointer-events:auto; position:relative; display:flex; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px var(--shadow); padding:14px 14px 15px; overflow:hidden; transform:translateX(120%); opacity:0; transition:transform .38s cubic-bezier(.2,.85,.25,1), opacity .38s ease; }
.toast.is-in{ transform:translateX(0); opacity:1; }
.toast.is-out{ transform:translateX(120%); opacity:0; }
.toast__thumb{ width:58px; height:58px; border-radius:10px; background:var(--surface-2) center/contain no-repeat; border:1px solid var(--line); flex-shrink:0; }
.toast__body{ flex:1; min-width:0; }
.toast__title{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#2E9E5B; margin-bottom:5px; }
.toast__name{ font-size:14px; font-weight:600; line-height:1.3; margin-bottom:2px; }
.toast__price{ font-size:14px; font-weight:700; margin-bottom:11px; }
.toast__actions{ display:flex; gap:8px; }
.toast__actions .btn{ padding:8px 14px; font-size:12.5px; }
.toast__x{ position:absolute; top:9px; right:9px; background:none; border:none; cursor:pointer; color:var(--muted); padding:2px; line-height:0; }
.toast__x:hover{ color:var(--text); }
.toast__bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--accent); transform-origin:left; animation:toast-bar 4.5s linear forwards; }
.toast.is-paused .toast__bar{ animation-play-state:paused; }
@keyframes toast-bar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

@keyframes tp-badge-bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
.cart__badge.is-bump{ animation:tp-badge-bump .42s ease; }
.btn.is-added, .btn-buy.is-added{ background:#2E9E5B; color:#fff; }
@media (max-width:560px){ .toast-wrap{ right:12px; left:12px; width:auto; } }

/* ==========================================================================
   MODAL (quick-buy / 1-click)
   ========================================================================== */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(10,17,14,.55); opacity:0; transition:opacity .25s ease; }
.modal.is-open .modal__backdrop{ opacity:1; }
.modal__card{ position:relative; width:420px; max-width:100%; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.4); padding:28px; transform:translateY(16px) scale(.98); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
.modal.is-open .modal__card{ transform:translateY(0) scale(1); opacity:1; }
.modal__x{ position:absolute; top:15px; right:15px; width:32px; height:32px; border-radius:9px; background:var(--chip); border:none; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:color .15s ease, background .15s ease; }
.modal__x:hover{ color:var(--text); background:var(--surface-2); }
.modal__title{ font-size:21px; font-weight:700; letter-spacing:-.01em; }
.modal__sub{ font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.55; }
.qb-prod{ display:flex; gap:12px; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px; margin:18px 0; }
.qb-prod__thumb{ width:52px; height:52px; border-radius:9px; background:var(--surface) center/contain no-repeat; border:1px solid var(--line); flex-shrink:0; }
.qb-prod__name{ font-size:14px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qb-prod__price{ font-size:15px; font-weight:700; margin-top:3px; }
.qb-form{ display:flex; flex-direction:column; gap:13px; }
.qb-note{ font-size:11.5px; color:var(--muted); text-align:center; line-height:1.5; margin-top:-2px; }
.qb-success{ text-align:center; padding:8px 0 2px; }
.qb-success__ic{ width:58px; height:58px; border-radius:50%; background:#2E9E5B; color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.qb-success__title{ font-size:19px; font-weight:700; margin-bottom:8px; }
.qb-success__text{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:20px; }

/* login / account modal (image left, form right) */
.head-ic-btn{ background:none; border:none; padding:0; color:inherit; cursor:pointer; display:inline-flex; }
.modal__card--split{ width:820px; max-width:100%; padding:0; display:grid; grid-template-columns:0.82fr 1.18fr; overflow:hidden; }
.login__media{ background-size:cover; background-position:center; min-height:540px; }
.login__pane{ padding:38px 40px; }
.modal--login .modal__x{ top:16px; right:16px; }
.login__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:24px; padding-right:42px; }
.login__title{ font-size:26px; font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1; }
.login__hl{ position:relative; display:inline-block; z-index:0; }
.login__hl::after{ content:""; position:absolute; left:-.06em; right:-.07em; bottom:.02em; height:.34em; background:var(--accent); z-index:-1; }
.login__reg{ font-size:14px; font-weight:700; color:var(--text); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.lform{ display:flex; flex-direction:column; gap:15px; }
.lform .field input{ height:48px; width:100%; border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:0 15px; font-family:inherit; font-size:14.5px; color:var(--text); outline:none; transition:border-color .16s ease; }
.lform .field input:focus{ border-color:var(--accent); }
.lform .field input::placeholder{ color:var(--muted); }
.field__pass{ position:relative; display:block; }
.field__pass input{ padding-right:46px; }
.field__eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; background:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.field__eye:hover, .field__eye.is-on{ color:var(--text); }
.lcheck{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:var(--text); user-select:none; }
.lcheck input{ position:absolute; opacity:0; width:0; height:0; }
.lcheck__box{ width:20px; height:20px; border:1.5px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center; color:transparent; flex-shrink:0; transition:background .15s ease, border-color .15s ease; }
.lcheck input:checked + .lcheck__box{ background:var(--accent); border-color:var(--accent); color:#0E2A22; }
.login__forgot{ font-size:13.5px; font-weight:600; color:var(--muted); margin-top:-4px; width:fit-content; }
.login__forgot:hover{ color:#BE4414; }
.login__or{ display:flex; align-items:center; margin:4px 0; }
.login__or::before, .login__or::after{ content:""; flex:1; border-top:2px dotted var(--line-2); }
.login__or span{ padding:0 14px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.login__social{ display:flex; gap:12px; }
.lsocial{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px; border:1px solid var(--line); border-radius:11px; background:var(--surface); font-family:inherit; font-size:13.5px; font-weight:700; color:var(--text); cursor:pointer; transition:border-color .15s ease; }
.lsocial:hover{ border-color:var(--accent); }
@media (max-width:640px){
  .modal__card--split{ grid-template-columns:1fr; width:420px; }
  .login__media{ display:none; }
  .login__pane{ padding:28px 22px; }
  .login__head{ padding-right:38px; }
}
/* auth modal — register / forgotten panes + AJAX feedback (Den Polansky) */
.modal--login .modal__card--split{ max-height:94vh; }
.login__pane{ overflow:auto; }
.auth-view[hidden]{ display:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-msg{ font-size:13px; font-weight:600; line-height:1.45; padding:11px 14px; border-radius:10px; }
.auth-msg--err{ background:rgba(190,68,20,.10); color:#BE4414; border:1px solid rgba(190,68,20,.28); }
.auth-msg--ok{ background:rgba(46,158,91,.10); color:#2E9E5B; border:1px solid rgba(46,158,91,.30); }
.auth-note{ font-size:11.5px; color:var(--muted); line-height:1.5; text-align:center; margin:2px 0 0; }
.auth-desc{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:-4px 0 2px; }
.auth-submit.is-busy{ position:relative; color:transparent !important; pointer-events:none; }
.auth-submit.is-busy::after{ content:""; position:absolute; top:50%; left:50%; width:19px; height:19px; margin:-9.5px 0 0 -9.5px; border:2.4px solid rgba(14,42,34,.35); border-top-color:#0E2A22; border-radius:50%; animation:tp-spin .6s linear infinite; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

/* logged-in account dropdown */
.acc-menu{ position:relative; display:inline-flex; }
.acc-menu__btn{ position:relative; background:none; border:none; padding:0; color:inherit; cursor:pointer; display:inline-flex; align-items:center; }
.acc-dot{ position:absolute; top:-1px; right:-1px; width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); }
.acc-drop{ position:absolute; top:calc(100% + 12px); right:0; min-width:236px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(9,14,12,.16); padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:80; }
.acc-menu.is-open .acc-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.acc-drop__head{ padding:8px 12px 12px; margin-bottom:6px; border-bottom:1px dashed var(--line-2); display:flex; flex-direction:column; gap:1px; }
.acc-drop__hi{ font-size:12px; color:var(--muted); }
.acc-drop__name{ font-size:15.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-drop__link{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; font-size:14px; font-weight:600; color:var(--text); transition:background .14s ease, color .14s ease; }
.acc-drop__link svg{ color:var(--muted); flex-shrink:0; transition:color .14s ease; }
.acc-drop__link:hover{ background:var(--surface-2, rgba(0,0,0,.04)); color:#BE4414; }
.acc-drop__link:hover svg{ color:#BE4414; }
.acc-drop__link--out{ margin-top:4px; border-top:1px dashed var(--line-2); border-radius:0 0 10px 10px; }
.acc-drop__link--out:hover{ color:#BE4414; }

/* prevent iOS auto-zoom on focus: form controls must be >=16px on touch/mobile */
@media (max-width:900px){
  input, select, textarea,
  .field input, .field select, .field textarea, .promo input{ font-size:16px; }
}

/* ==========================================================================
   TECH PAGES additions — content pages in OUR design (about/delivery/returns/coaches)
   Developer: Den Polansky · https://sitedone.tech
   ========================================================================== */

/* ---- KEPT: black tennis-ball "є питання" CTA banner (normal-case heading) ---- */
.ctaq{ background-color:#0c0d0f; background-repeat:no-repeat; background-position:left center; background-size:cover; color:#fff; border-radius:20px; overflow:hidden; margin-top:56px; }
.ctaq__in{ padding:56px 48px; }
.ctaq__body{ width:min(600px,56%); margin-left:auto; }
.ctaq__title{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.14; }
.ctaq__text{ margin-top:14px; color:rgba(255,255,255,.8); line-height:1.65; font-size:15px; max-width:54ch; }
.ctaq__form{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
.ctaq__input{ flex:1 1 280px; height:52px; border:none; border-radius:11px; padding:0 18px; font-family:inherit; font-size:15px; background:#fff; color:#111; }
.ctaq__btn{ height:52px; padding:0 28px; white-space:nowrap; }

/* ---- founder tag + facts (reuses .about-panel) ---- */
.founder-tag{ display:inline-block; background:var(--accent); color:#111; font-weight:700; font-size:13px; letter-spacing:.01em; padding:7px 14px; border-radius:9px; margin-bottom:16px; }

/* ---- lime-bullet list used inside cards/panels ---- */
.plist{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.plist li{ position:relative; padding-left:20px; font-size:17px; color:var(--muted); line-height:1.55; }
.plist li::before{ content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--accent); }

/* ---- numbered feature card (order steps / return conditions) ---- */
.feature-card__num{ width:46px; height:46px; border-radius:12px; background:var(--court); color:var(--on-court); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; margin-bottom:16px; }

/* ---- two-way order card bits ---- */
.order-phones{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.order-phones a{ font-size:18px; font-weight:800; }
.order-phones a:hover{ color:#D96B3A; }

/* ---- tracking form (reuses .co-card + .field) ---- */
.trk-radios{ display:flex; gap:24px; margin-bottom:16px; flex-wrap:wrap; }
.trk-radios label{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; cursor:pointer; }
.trk-radios input{ accent-color:var(--court); width:16px; height:16px; }
.trk-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.trk-row .field{ flex:1 1 240px; margin:0; }

/* ---- wide rounded photo banner ---- */
.media-wide{ height:340px; border-radius:20px; overflow:hidden; background:var(--surface-2) center/cover no-repeat; border:1px solid var(--line); }

/* ---- coaches team grid ---- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tcard{ background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .18s ease, transform .18s ease; }
.tcard:hover{ border-color:var(--accent); transform:translateY(-3px); }
.tcard__photo{ height:230px; background:var(--surface-2) center/cover no-repeat; }
.tcard__body{ padding:18px 18px 20px; }
.tcard__name{ font-size:16px; font-weight:700; }
.tcard__role{ font-size:12px; letter-spacing:.02em; color:var(--court); font-weight:700; margin-top:4px; }
:root[data-theme="dark"] .tcard__role{ color:var(--accent); }
.tcard__text{ font-size:13px; color:var(--muted); line-height:1.6; margin-top:10px; }

/* ---- responsive ---- */
@media (max-width:1000px){
  .ctaq__body{ width:100%; }
  .ctaq{ background-position:left top; }
  .team-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .ctaq__in{ padding:40px 24px; }
  .team-grid{ grid-template-columns:1fr; }
}

/* contacts — symmetric info + feedback form */
.cont-2col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.cont-2col .msgr-row{ margin-top:18px; }
@media (max-width:820px){ .cont-2col{ grid-template-columns:1fr; } }

/* ==========================================================================
   PRODUCT PAGE — star chips · lightbox · grip guide · review form
   ========================================================================== */
/* star row = dark stars on a lime chip (theme-independent — chip is always lime) */
/* lime band that does NOT fully cover the stars — the star tips poke out top & bottom (per mockup) */
.stars{ display:inline-flex; align-items:center; gap:3px; background:var(--accent); padding:0 7px; border-radius:3px; line-height:0; }
.stars .star{ display:block; margin-block:-4px; }
.stars--lg{ padding:0 10px; gap:4px; }
.stars--lg .star{ width:19px; height:19px; margin-block:-6px; }
/* 0-reviews rating line: outline stars only, no lime chip */
.stars--empty{ background:none; padding:0; gap:2px; color:var(--muted); }
.stars--empty .star{ margin-block:0; width:14px; height:14px; }
.rating-box__stars{ justify-content:center; }

/* button resets for elements that became <button> */
.gallery__zoom{ font-family:inherit; }
.grip-sel__help{ background:none; border:none; font-family:inherit; padding:0; }
.grip-sel__help:hover{ color:var(--text); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(8,12,10,.93); display:flex; align-items:center; justify-content:center; padding:44px; opacity:0; transition:opacity .25s ease; }
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lightbox__stage{ display:flex; align-items:center; justify-content:center; max-width:min(1000px,90vw); max-height:86vh; }
.lightbox__img{ max-width:100%; max-height:86vh; object-fit:contain; border-radius:12px; background:#fff; }
.lightbox__x{ position:absolute; top:22px; right:26px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .16s ease; }
.lightbox__x:hover{ background:rgba(255,255,255,.2); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.1); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .16s ease, color .16s ease; }
.lightbox__nav:hover{ background:var(--accent); color:#0E2A22; }
.lightbox__nav--prev{ left:26px; } .lightbox__nav--next{ right:26px; }
.lightbox__count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; font-weight:600; background:rgba(0,0,0,.4); padding:6px 14px; border-radius:20px; }
@media (max-width:560px){ .lightbox{ padding:14px; } .lightbox__nav{ width:42px; height:42px; } .lightbox__nav--prev{ left:8px; } .lightbox__nav--next{ right:8px; } .lightbox__x{ top:10px; right:10px; } }

/* grip-size guide (modal) */
.gguide{ display:flex; flex-direction:column; gap:16px; margin:4px 0 16px; }
.gguide__step{ display:flex; gap:13px; align-items:flex-start; }
.gguide__num{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#0E2A22; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }
.gguide__step b{ font-size:14.5px; font-weight:700; }
.gguide__step p{ font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:3px; }
.gguide__note{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.5; background:var(--surface-2); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.gguide__note svg{ flex-shrink:0; margin-top:1px; color:var(--court); }
:root[data-theme="dark"] .gguide__note svg{ color:var(--accent); }

/* review form (modal) */
.rform__lbl{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin:8px 0 8px; }
.rstars{ display:inline-flex; gap:7px; margin-bottom:16px; }
.rstar{ background:none; border:none; padding:0; cursor:pointer; line-height:0; }
.rstar svg{ fill:var(--text); stroke:none; transition:transform .12s ease; }
.rstar:not(.is-on) svg{ fill:none; stroke:var(--muted); stroke-width:2; stroke-opacity:.5; }
.rstar:hover svg{ transform:scale(1.12); }
.rform .field{ margin-bottom:14px; }
.rform-success{ text-align:center; padding:8px 0; }
.rform-success__ic{ width:56px; height:56px; border-radius:50%; background:rgba(46,158,91,.12); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }

/* ===== TennisPoint — category/catalog page (stage 1). Developer: Den Polansky ===== */
.fsub-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.fsub-list a{ display:block; padding:6px 8px; border-radius:7px; color:var(--text); font-size:13.5px; text-decoration:none; transition:background .14s ease, color .14s ease; }
.fsub-list a:hover{ background:var(--surface-2); color:#BE4414; }
.product-row__desc{ margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pager--oc{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:34px; }
.pager__info{ font-size:13px; color:var(--muted); }
.pager__oc .pagination{ display:inline-flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.pager__oc .pagination > li{ display:inline-flex; }
.pager__oc .pagination > li > a, .pager__oc .pagination > li > span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:10px; background:var(--surface-2); color:var(--text); font-weight:600; font-size:14px; text-decoration:none; border:none; transition:background .14s ease, color .14s ease; }
.pager__oc .pagination > li > a:hover{ background:#BE4414; color:#fff; }
.pager__oc .pagination > li.active > span{ background:var(--accent); color:#0E2A22; }
.pager__oc .pagination > li.disabled > span{ opacity:.4; }
.cat-empty{ text-align:center; padding:60px 20px; display:flex; flex-direction:column; align-items:center; gap:18px; }
:root[data-theme="dark"] .fsub-list a:hover{ color:var(--accent); }

/* header phone: work schedule under the number (Den Polansky) */
.phone__head{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.phone__hours{ font-size:11px; font-weight:500; color:var(--muted); white-space:nowrap; letter-spacing:.01em; }

/* working filter UI + phone hours (Den Polansky) */
a.filters__clear{ text-decoration:none; }
.price-box input.price-input{ width:100%; border:none; background:none; font-size:13.5px; font-weight:600; color:var(--text); padding:0; -moz-appearance:textfield; }
.price-box input.price-input::-webkit-outer-spin-button, .price-box input.price-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.price-box input.price-input:focus{ outline:none; }
a.active-chip{ text-decoration:none; }
.active-chip--clear{ background:none; border-style:dashed; color:var(--muted); }
.filters__apply{ display:flex; width:100%; margin-top:18px; justify-content:center; }
.phone__hours{ margin-top:0; padding-top:5px; border-top:0 solid var(--line); display:flex; align-items:center; gap:9px; font-size:11px; font-weight:400; color:var(--muted); white-space:nowrap; }

/* price dual-range slider (Den Polansky) */
.price-slider{ position:relative; height:30px; margin:2px 2px 12px; }
.price-slider__rail{ position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); background:var(--line); border-radius:3px; }
.price-slider__fill{ position:absolute; top:50%; height:4px; transform:translateY(-50%); background:var(--accent); border-radius:3px; }
.price-slider__thumb{ position:absolute; left:0; top:0; width:100%; height:30px; margin:0; background:none; -webkit-appearance:none; appearance:none; pointer-events:none; }
.price-slider__thumb::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto; width:17px; height:17px; border-radius:50%; background:#0E2A22; border:3px solid var(--accent); cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.22); }
.price-slider__thumb::-moz-range-thumb{ pointer-events:auto; width:17px; height:17px; border-radius:50%; background:#0E2A22; border:3px solid var(--accent); cursor:grab; }
.price-slider__thumb::-webkit-slider-runnable-track{ background:none; border:none; }
.price-slider__thumb::-moz-range-track{ background:none; border:none; }

/* AJAX filter loading state (Den Polansky) */
.catalog{ position:relative; }
.catalog.is-loading [data-tabs]{ opacity:.45; pointer-events:none; transition:opacity .12s ease; }
.catalog.is-loading::after{ content:''; position:absolute; top:120px; left:calc(50% + 130px); width:34px; height:34px; margin-left:-17px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:tp-spin .7s linear infinite; z-index:6; }
@keyframes tp-spin{ to{ transform:rotate(360deg); } }
.fcheck--off{ opacity:.38; cursor:not-allowed; } .fcheck--off input{ cursor:not-allowed; }

/* ---- mini-cart drawer: live states (Den Polansky) ---- */
.cart-loading{ display:flex; align-items:center; justify-content:center; padding:46px 0; }
.cart-loading .tp-spin{ width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:tp-spin .7s linear infinite; }
.cart-item.is-busy{ opacity:.55; pointer-events:none; }
a.cart-item__thumb{ display:block; }
a.cart-item__name{ display:block; color:inherit; text-decoration:none; }
a.cart-item__name:hover{ color:var(--accent-ink, var(--accent)); }

/* ---- checkout: Nova Poshta autocomplete + field errors (Den Polansky) ---- */
.np-field{ position:relative; }
.np-ac{ position:absolute; z-index:40; top:calc(100% - 2px); left:0; right:0; max-height:290px; overflow-y:auto;
  background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(14,42,34,.16);
  padding:6px; margin-top:6px; }
.np-ac__item{ padding:9px 12px; border-radius:9px; cursor:pointer; font-size:14px; line-height:1.3; display:flex; flex-direction:column; gap:2px; }
.np-ac__item:hover{ background:var(--surface-2,#f2f5f0); }
.np-ac__sub{ font-size:12px; color:var(--muted); }
.np-ac__empty{ padding:12px; font-size:13.5px; color:var(--muted); text-align:center; }
.field--err input, .field--err textarea{ border-color:#E0563B !important; background:#fdf3f0; }
.field__err{ display:none; color:#E0563B; font-size:12px; margin-top:5px; }
.field--err .field__err{ display:block; }
.co-error{ background:#fdeeea; border:1px solid #f2c6ba; color:#B23A1E; border-radius:14px; padding:13px 18px; margin:0 0 20px; font-size:14px; font-weight:600; }
.osum__submit.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.osum__submit.is-loading::after{ content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%; border:2.5px solid rgba(14,42,34,.35); border-top-color:#0E2A22; animation:tp-spin .7s linear infinite; }
.breadcrumb__sep{ color:var(--muted); opacity:.6; margin:0 2px; flex-shrink:0; }

/* ============ order success / thank-you page (Den Polansky) ============ */
.co-wrap--success{ max-width:760px; padding-top:40px; padding-bottom:84px; }
.success{ text-align:center; }
.success__check{ width:84px; height:84px; margin:0 auto 22px; border-radius:50%;
  background:var(--accent); color:#0E2A22; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 34px rgba(214,255,61,.5); animation:tp-pop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tp-pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.success__title{ font-size:32px; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; }
.success__lead{ font-size:15.5px; color:var(--muted); max-width:520px; margin:0 auto 26px; line-height:1.55; }
.success__order{ display:inline-flex; align-items:stretch; gap:0; border:1px solid var(--line);
  border-radius:18px; overflow:hidden; margin:0 auto 34px; background:var(--card,#fff); }
.success__order-cell{ display:flex; flex-direction:column; gap:5px; padding:16px 30px; }
.success__order-div{ width:1px; background:var(--line); }
.success__order-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.success__order-id{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.success__order-sum{ font-size:26px; font-weight:800; color:var(--accent-ink,#3a7d18); letter-spacing:-.01em; }
.success__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 26px; text-align:left; }
.success__step{ border:1px solid var(--line); border-radius:16px; padding:18px 18px 20px; background:var(--card,#fff); }
.success__step-ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:11px; background:var(--surface-2,#f2f5f0); color:var(--ink); margin-bottom:12px; }
.success__step b{ display:block; font-size:14.5px; margin-bottom:5px; }
.success__step span{ display:block; font-size:13px; color:var(--muted); line-height:1.5; }
.success__tg{ display:flex; align-items:center; gap:16px; text-align:left; text-decoration:none;
  border:1px solid var(--line); border-radius:18px; padding:16px 20px; margin:0 0 28px;
  background:linear-gradient(100deg,rgba(34,158,217,.08),rgba(214,255,61,.10)); transition:transform .16s ease, box-shadow .16s ease; }
.success__tg:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(14,42,34,.12); }
.success__tg-ic{ flex:0 0 auto; width:48px; height:48px; border-radius:13px; background:#229ED9; color:#fff;
  display:flex; align-items:center; justify-content:center; }
.success__tg-body{ flex:1 1 auto; min-width:0; }
.success__tg-body b{ display:block; font-size:15px; color:var(--ink); margin-bottom:3px; }
.success__tg-body span{ display:block; font-size:13px; color:var(--muted); line-height:1.45; }
.success__tg-arrow{ flex:0 0 auto; color:var(--ink); opacity:.55; }
.success__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 30px; }
.success__cta .btn{ min-width:210px; }
.success__trust{ justify-content:center; }
@media(max-width:720px){
  .co-wrap--success{ padding-bottom:60px; }
  .success__title{ font-size:26px; }
  .success__steps{ grid-template-columns:1fr; }
  .success__order{ width:100%; }
  .success__order-cell{ flex:1; padding:14px 18px; }
  .success__cta .btn{ min-width:0; width:100%; }
}

/* success page: CTA + trust list in one compact row (Den Polansky) */
.success__foot{ display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:26px; margin-top:6px; }
.success__foot .success__cta{ margin:0; }
.success__foot .success__trust{ margin:0; padding:0; border-top:none; justify-content:flex-start; }
@media(max-width:640px){
  .success__foot{ flex-direction:column; gap:22px; }
  .success__foot .success__cta{ width:100%; }
  .success__foot .success__trust{ align-items:flex-start; }
}

/* always-open, non-collapsible facet section (subcategory nav under Brand). Den Polansky */
.fsec--static > summary{ cursor:default; pointer-events:none; }

/* subcategory rows styled as checkbox filters, but each is a plain navigation link. Den Polansky */
.fcheck--nav{ text-decoration:none; color:var(--text); }
.fcheck--nav:hover .fcheck__box{ border-color:var(--accent); }
.fcheck--nav:hover .fcheck__name{ color:#BE4414; }
:root[data-theme="dark"] .fcheck--nav:hover .fcheck__name{ color:var(--accent); }

/* ================= guest wishlist + compare (Den Polansky) ================= */
/* header icon badges */
.head-ic{ position:relative; }
button.head-ic{ background:none; border:none; padding:0; color:inherit; cursor:pointer; display:inline-flex; align-items:center; }
.head-badge{ position:absolute; top:-6px; right:-8px; background:var(--accent); color:#0E2A22; font-size:10px; font-weight:800; min-width:16px; height:16px; padding:0 4px; border-radius:9px; display:flex; align-items:center; justify-content:center; line-height:1; }
.head-badge.is-bump{ animation:tp-badge-bump .42s ease; }

/* active (filled) heart on cards + product page */
.wish.is-active, [data-oc-wishlist].is-active{ color:#E0563B; }
.wish.is-active svg, [data-oc-wishlist].is-active svg{ fill:#E0563B; stroke:#E0563B; }
/* active compare toggle — subtle green "added" state (not a loud dark block) */
[data-oc-compare].is-active{ color:#2E9E5B; border-color:#2E9E5B; background:rgba(46,158,91,.10); }

.btn--ghost{ background:transparent; border:1px solid var(--line-2); color:var(--muted); }
.btn--ghost:hover{ border-color:#E0563B; color:#E0563B; background:transparent; }

/* list pages (wishlist + compare share the shell) */
.tp-list{ padding-top:24px; padding-bottom:80px; }
.tp-list__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:8px 0 24px; }
.tp-list__title{ font-size:28px; font-weight:700; letter-spacing:-.02em; margin:0; display:flex; align-items:center; gap:12px; }
.tp-list__count{ font-size:14px; font-weight:800; color:#0E2A22; background:var(--accent); border-radius:20px; padding:3px 12px; }
.tp-list__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* empty state (shared) */
.tp-empty{ text-align:center; padding:56px 20px 36px; max-width:470px; margin:0 auto; }
.tp-empty__ic{ display:inline-flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; background:var(--surface-2); color:var(--muted); margin-bottom:20px; }
.tp-empty__title{ font-size:21px; font-weight:800; margin-bottom:10px; }
.tp-empty__text{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0 0 24px; }

/* comparison table — creative redesign (Den Polansky) */
/* wrap hugs its content (no full-width stretch → no giant empty cells with few products) */
.cmp-wrap{ display:inline-block; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:20px; -webkit-overflow-scrolling:touch; background:var(--bg); vertical-align:top; }
.cmp{ border-collapse:separate; border-spacing:0; width:auto; }
.cmp th, .cmp td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:14px 18px; text-align:left; vertical-align:middle; font-size:13.5px; }
.cmp th:last-child, .cmp td:last-child{ border-right:none; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th{ border-bottom:none; }

/* sticky corner — branded court-green panel instead of an empty box */
.cmp__corner{ position:sticky; left:0; z-index:3; width:194px; min-width:172px; padding:22px 18px; vertical-align:top;
  background:linear-gradient(158deg,#154034 0%,#0E2A22 78%); color:#fff;
  border-right:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.cmp__corner-ic{ width:40px; height:40px; border-radius:12px; background:var(--accent); color:#0E2A22; display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.cmp__corner-t{ font-size:15.5px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.cmp__corner-s{ font-size:11.5px; color:rgba(255,255,255,.62); margin-top:6px; line-height:1.45; }

/* sticky row labels */
.cmp__label{ position:sticky; left:0; z-index:2; background:var(--surface-2); font-weight:700; color:var(--text); width:194px; min-width:172px; }

/* product header cells */
.cmp thead th{ vertical-align:top; background:var(--bg); }
.cmp__prod{ width:238px; min-width:214px; text-align:center; position:relative; padding:20px 16px 18px; transition:background .16s ease; }
.cmp__prod:hover{ background:var(--surface-2); }
.cmp__x{ position:absolute; top:11px; right:11px; width:28px; height:28px; border:none; background:var(--surface-2); border-radius:50%; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s, color .14s; z-index:1; }
.cmp__x:hover{ background:#fdeeea; color:#E0563B; }
.cmp__badge{ position:absolute; top:13px; left:13px; }
.cmp__media{ display:flex; align-items:center; justify-content:center; width:154px; height:154px; margin:6px auto 15px; border-radius:18px;
  background:radial-gradient(circle at 50% 40%, var(--surface) 0%, var(--surface-2) 100%); }
.cmp__thumb{ display:block; width:122px; height:122px; background-size:contain; background-position:center; background-repeat:no-repeat; }
.cmp__brand{ display:inline-block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#0E2A22; font-weight:800; background:var(--accent); border-radius:20px; padding:3px 12px; margin-bottom:10px; }
.cmp__name{ display:block; font-size:13.5px; font-weight:600; color:var(--text); text-decoration:none; line-height:1.35; margin-bottom:12px; min-height:37px; }
.cmp__name:hover{ color:#BE4414; }
.cmp__price{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:14px; }
.cmp__price b{ font-size:20px; font-weight:800; color:#BE4414; }
.cmp__price s{ font-size:13px; color:var(--muted); }
.cmp__buy{ width:100%; }
.cmp__more{ display:inline-block; margin-top:9px; font-size:12px; color:var(--muted); text-decoration:none; }
.cmp__more:hover{ color:#BE4414; }

/* "add a product" invitation column — fills the empty space + nudges up to 4 */
.cmp__addcol{ vertical-align:middle !important; background:var(--bg); }
.cmp__add{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:230px; padding:18px; border:2px dashed var(--line-2); border-radius:16px; color:var(--muted); text-decoration:none; transition:border-color .16s, color .16s, background .16s; }
.cmp__add:hover{ border-color:var(--accent); color:#0E2A22; background:rgba(200,225,74,.08); }
.cmp__add-ic{ width:46px; height:46px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:300; line-height:1; transition:background .16s, color .16s; }
.cmp__add:hover .cmp__add-ic{ background:var(--accent); color:#0E2A22; }
.cmp__add-t{ font-size:13px; font-weight:700; }
.cmp__add-s{ font-size:11.5px; }
.cmp__slotcell{ background:var(--bg); }

/* zebra rows + group bars + verdict pills */
.cmp tbody tr:nth-child(even) td{ background:rgba(14,42,34,.02); }
.cmp__group th{ position:sticky; left:0; background:#0E2A22; color:#fff; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding-top:11px; padding-bottom:11px; }
.cmp__row td{ color:var(--text); }
.cmp__yes{ display:inline-flex; align-items:center; gap:6px; color:#217A46; font-weight:700; font-size:12.5px; background:rgba(46,158,91,.12); border-radius:20px; padding:4px 11px; }
.cmp__no{ display:inline-flex; align-items:center; gap:6px; color:#B76510; font-weight:700; font-size:12.5px; background:rgba(214,120,26,.13); border-radius:20px; padding:4px 11px; }
@media(max-width:560px){
  .tp-list__title{ font-size:23px; }
  .cmp__label, .cmp__corner{ width:142px; min-width:132px; padding-left:12px; padding-right:12px; }
  .cmp th, .cmp td{ padding:12px 12px; }
  .cmp__prod{ width:192px; min-width:182px; }
  .cmp__media{ width:122px; height:122px; } .cmp__thumb{ width:96px; height:96px; }
}

/* card corner compare button — sits directly under the heart (Den Polansky) */
.card-cmp{ position:absolute; top:55px; right:13px; width:34px; height:34px; border-radius:8px; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; z-index:2; color:var(--muted); cursor:pointer; transition:color .14s ease, background .14s ease, border-color .14s ease; }
.card-cmp:hover{ color:#D96B3A; }
.card-cmp.is-active{ color:#2E9E5B; border-color:#2E9E5B; background:rgba(46,158,91,.10); }
@media (max-width:560px){ .card-cmp{ top:46px; right:10px; width:30px; height:30px; } }

/* ===== special / promo page: brand chips + sort bar (Den Polansky) ===== */
.sp-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:20px 0 22px; }
.sp-brands{ display:flex; gap:9px; flex-wrap:wrap; }
.chip-f{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:22px; border:1px solid var(--line-2); background:var(--bg); color:var(--text); font-size:13.5px; font-weight:600; text-decoration:none; transition:border-color .14s ease, background .14s ease, color .14s ease; }
.chip-f:hover{ border-color:#0E2A22; }
.chip-f.is-active{ background:#0E2A22; border-color:#0E2A22; color:#fff; }
.chip-f__c{ font-size:11.5px; opacity:.55; font-weight:600; }
.chip-f.is-active .chip-f__c{ color:var(--accent); opacity:1; }
@media(max-width:560px){ .sp-bar{ margin-bottom:16px; } .chip-f{ padding:7px 12px; font-size:12.5px; } }

/* special page breathing room: top + bottom (Den Polansky) */
.sp-page{ padding-top:28px; padding-bottom:72px; }
.sp-page .pager{ margin-top:36px; }
@media(max-width:560px){ .sp-page{ padding-top:16px; padding-bottom:48px; } }

/* ==========================================================================
   PERSONAL CABINET (account/*) — sidebar + dashboard + section cards
   Developer: Den Polansky · https://sitedone.tech
   ========================================================================== */
.acct{ padding:26px 0 72px; }
.acct__grid{ display:grid; grid-template-columns:272px 1fr; gap:28px; align-items:start; margin-top:14px; }
.acct__main{ min-width:0; }

/* ---- sidebar ---- */
.acct-nav{ position:sticky; top:calc(var(--tp-header-h, 96px) + 14px); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:8px; }
.acct-nav__user{ display:flex; align-items:center; gap:12px; padding:14px 12px 15px; border-bottom:1px dashed var(--line-2); margin-bottom:8px; }
.acct-nav__avatar{ width:46px; height:46px; border-radius:50%; background:var(--accent); color:#0E2A22; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; letter-spacing:.02em; }
.acct-nav__id{ display:flex; flex-direction:column; min-width:0; }
.acct-nav__hi{ font-size:11.5px; color:var(--muted); }
.acct-nav__name{ font-size:14.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-nav__email{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-nav__list{ display:flex; flex-direction:column; gap:2px; }
.acct-nav__link{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; font-size:14px; font-weight:600; color:var(--text); transition:background .14s ease, color .14s ease; }
.acct-nav__ic{ display:flex; color:var(--muted); flex-shrink:0; transition:color .14s ease; }
.acct-nav__label{ flex:1; min-width:0; }
.acct-nav__badge{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--accent); color:#0E2A22; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.acct-nav__link:hover{ background:var(--surface-2); color:#BE4414; }
.acct-nav__link:hover .acct-nav__ic{ color:#BE4414; }
.acct-nav__link.is-active{ background:#0E2A22; color:#fff; }
.acct-nav__link.is-active .acct-nav__ic{ color:var(--accent); }
:root[data-theme="dark"] .acct-nav__link.is-active{ background:var(--accent); color:#0E2A22; }
:root[data-theme="dark"] .acct-nav__link.is-active .acct-nav__ic{ color:#0E2A22; }
.acct-nav__link--out{ margin-top:6px; border-top:1px dashed var(--line-2); border-radius:0; padding-top:14px; }
.acct-nav__link--out:hover{ color:#BE4414; background:transparent; }
.acct-nav__mob{ display:none; }

/* ---- content head ---- */
.acct-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.acct-head__title{ font-size:26px; font-weight:700; line-height:1.15; }
.acct-head__sub{ font-size:14px; color:var(--muted); margin-top:5px; }
.acct-flash{ background:rgba(46,158,91,.10); color:#2E9E5B; border:1px solid rgba(46,158,91,.30); border-radius:11px; padding:12px 16px; font-size:13.5px; font-weight:600; margin-bottom:18px; }

/* ---- stat tiles ---- */
.acct-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.acct-stat{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 16px 15px; display:flex; flex-direction:column; gap:3px; transition:border-color .15s ease, transform .15s ease; }
.acct-stat:hover{ border-color:var(--accent); transform:translateY(-2px); }
.acct-stat__ic{ color:var(--muted); margin-bottom:6px; }
.acct-stat__num{ font-size:26px; font-weight:700; line-height:1; color:var(--text); }
.acct-stat__label{ font-size:12.5px; color:var(--muted); }

/* ---- generic card ---- */
.acct-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.acct-card__eyebrow{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }

/* ---- last order ---- */
.acct-lastorder{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.acct-lastorder__row{ display:flex; align-items:center; gap:12px; margin-top:7px; }
.acct-lastorder__no{ font-size:16px; font-weight:700; }
.acct-lastorder__meta{ font-size:13px; color:var(--muted); margin-top:4px; }
.acct-badge{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:20px; background:rgba(46,158,91,.12); color:#2E9E5B; font-size:12px; font-weight:700; }
.acct-empty-order{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:30px 20px; margin-bottom:22px; color:var(--muted); font-size:14px; }
.acct-empty-order__ic{ color:var(--line-2); }

/* ---- section quick-cards ---- */
.acct-sections{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.acct-section{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; transition:border-color .15s ease, transform .15s ease; }
.acct-section:hover{ border-color:var(--accent); transform:translateY(-2px); }
.acct-section__ic{ width:44px; height:44px; border-radius:11px; background:var(--surface-2); color:#0E2A22; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
:root[data-theme="dark"] .acct-section__ic{ color:var(--accent); }
.acct-section__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.acct-section__label{ font-size:15px; font-weight:700; color:var(--text); }
.acct-section__desc{ font-size:12.5px; color:var(--muted); }
.acct-section__arr{ color:var(--muted); flex-shrink:0; transition:transform .15s ease, color .15s ease; }
.acct-section:hover .acct-section__arr{ color:#BE4414; transform:translateX(3px); }

/* ---- stub ---- */
.acct-stub{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:44px 24px; color:var(--muted); font-size:14.5px; }
.acct-stub__ic{ color:var(--line-2); }

@media (max-width:900px){
  .acct__grid{ grid-template-columns:1fr; gap:16px; }
  .acct-nav{ position:static; padding:10px; }
  .acct-nav.is-collapsed .acct-nav__list{ display:none; }
  .acct-nav__mob{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:none; border:none; padding:12px 6px 4px; font-family:inherit; font-size:15px; font-weight:700; color:var(--text); cursor:pointer; }
}
@media (max-width:640px){
  .acct-stats{ grid-template-columns:repeat(2,1fr); }
  .acct-sections{ grid-template-columns:1fr; }
  .acct-head__title{ font-size:22px; }
  .acct-lastorder{ flex-direction:column; align-items:flex-start; }
}

/* ---- cabinet: profile forms ---- */
.acct-form{ margin-bottom:18px; }
.acct-card__title{ font-size:16px; font-weight:700; margin-bottom:16px; }
.acct-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.acct-form .field{ display:flex; flex-direction:column; gap:7px; }
.acct-form .field__label{ font-size:12.5px; font-weight:600; color:var(--muted); }
.acct-form .field__label i{ color:#BE4414; font-style:normal; }
.acct-form .field input, .acct-form .field select{ height:46px; width:100%; border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:0 14px; font-family:inherit; font-size:14.5px; color:var(--text); outline:none; transition:border-color .16s ease; }
.acct-form .field input:focus, .acct-form .field select:focus{ border-color:var(--accent); }
.acct-form .field__pass{ position:relative; display:block; }
.acct-form .field__pass input{ padding-right:46px; }
.field__sel{ position:relative; display:block; }
.field__sel select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px; }
.field__sel::after{ content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none; }

/* reusable custom dropdown (replaces native <select> everywhere) */
.tp-select{ position:relative; }
.tp-select__toggle{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; height:46px; border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:0 14px; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--text); cursor:pointer; text-align:left; transition:border-color .16s ease; }
.tp-select__toggle span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-select.is-open .tp-select__toggle{ border-color:var(--accent); }
.tp-select.is-placeholder .tp-select__toggle span{ color:var(--muted); font-weight:500; }
.tp-select__chev{ color:var(--muted); flex-shrink:0; transition:transform .2s ease; }
.tp-select.is-open .tp-select__chev{ transform:rotate(180deg); }
.tp-select__menu{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px rgba(9,14,12,.16); padding:6px; z-index:50; display:none; max-height:264px; overflow:auto; }
.tp-select.is-open .tp-select__menu{ display:block; }
.tp-select__opt{ padding:10px 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--text); cursor:pointer; transition:background .12s ease, color .12s ease; }
.tp-select__opt:hover{ background:var(--surface-2); }
.tp-select__opt.is-active{ background:#0E2A22; color:#fff; }
:root[data-theme="dark"] .tp-select__opt.is-active{ background:var(--accent); color:#0E2A22; }
.acct-subtitle{ font-size:13.5px; font-weight:700; margin:6px 0 14px; padding-top:16px; border-top:1px dashed var(--line-2); }
.acct-subtitle span{ font-weight:500; color:var(--muted); font-size:12px; margin-left:6px; }
.acct-msg{ font-size:13px; font-weight:600; line-height:1.4; padding:10px 14px; border-radius:10px; margin-bottom:14px; }
.acct-msg--ok{ background:rgba(46,158,91,.10); color:#2E9E5B; border:1px solid rgba(46,158,91,.30); }
.acct-msg--err{ background:rgba(190,68,20,.10); color:#BE4414; border:1px solid rgba(190,68,20,.28); }
.acct-form .auth-submit{ margin-top:4px; }
/* newsletter switch */
.acct-switch{ display:flex; align-items:center; gap:13px; cursor:pointer; margin-bottom:18px; user-select:none; }
.acct-switch input{ position:absolute; opacity:0; width:0; height:0; }
.acct-switch__track{ width:46px; height:26px; border-radius:14px; background:var(--line); position:relative; flex-shrink:0; transition:background .18s ease; }
.acct-switch__dot{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s ease; }
.acct-switch input:checked + .acct-switch__track{ background:var(--accent); }
.acct-switch input:checked + .acct-switch__track .acct-switch__dot{ transform:translateX(20px); }
.acct-switch__label{ font-size:14px; color:var(--text); }

/* ---- cabinet: order list ---- */
.ord-list{ display:flex; flex-direction:column; gap:12px; }
.ord-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; transition:border-color .15s ease; }
.ord-item:hover{ border-color:var(--line-2); }
.ord-item__top{ display:flex; align-items:center; gap:12px; }
.ord-item__no{ font-size:15.5px; font-weight:700; }
.ord-item__meta{ font-size:13px; color:var(--muted); margin-top:6px; }
.ord-item__act{ display:flex; gap:9px; flex-shrink:0; }

/* ---- cabinet: order detail ---- */
.acct-head--order{ align-items:flex-start; }
.acct-back{ display:inline-block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.acct-back:hover{ color:#BE4414; }
.acct-head--order .acct-head__sub{ display:flex; align-items:center; gap:10px; }
.ord-prods{ margin-bottom:18px; }
.ord-prod{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.ord-prod:last-of-type{ border-bottom:0; }
.ord-prod__img{ width:56px; height:70px; border-radius:9px; background:var(--surface-2) center/contain no-repeat; border:1px solid var(--line); flex-shrink:0; }
.ord-prod__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ord-prod__name{ font-size:14px; font-weight:600; color:var(--text); line-height:1.35; }
.ord-prod__name:hover{ color:#BE4414; }
.ord-prod__model{ font-size:12px; color:var(--muted); }
.ord-prod__qty{ font-size:13.5px; color:var(--muted); flex-shrink:0; }
.ord-prod__price{ font-size:14.5px; font-weight:700; min-width:96px; text-align:right; flex-shrink:0; }
.ord-totals{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line-2); display:flex; flex-direction:column; gap:7px; }
.ord-total{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); }
.ord-total--grand{ font-size:17px; font-weight:700; color:var(--text); margin-top:4px; }
.ord-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.ord-info-grid .acct-card{ margin-bottom:0; }
.ord-info__line{ font-size:14px; line-height:1.55; }
.ord-info__muted{ color:var(--muted); font-size:13px; }
/* status history */
.ord-hist{ display:flex; flex-direction:column; }
.ord-hist__item{ display:flex; gap:14px; padding-bottom:16px; position:relative; }
.ord-hist__item:not(:last-child)::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--line); }
.ord-hist__dot{ width:14px; height:14px; border-radius:50%; border:3px solid var(--line); background:var(--surface); flex-shrink:0; margin-top:3px; z-index:1; }
.ord-hist__item.is-current .ord-hist__dot{ border-color:var(--accent); background:var(--accent); }
.ord-hist__body{ display:flex; flex-direction:column; gap:2px; }
.ord-hist__status{ font-size:14px; font-weight:600; }
.ord-hist__date{ font-size:12px; color:var(--muted); }
.ord-hist__comment{ font-size:12.5px; color:var(--muted); margin-top:3px; }
@media (max-width:640px){
  .acct-form__row{ grid-template-columns:1fr; }
  .ord-info-grid{ grid-template-columns:1fr; }
  .ord-item{ flex-direction:column; align-items:flex-start; }
  .ord-item__act{ width:100%; }
  .ord-item__act .btn{ flex:1; }
}

/* ---- cabinet: clear button ---- */
.acct-clear{ background:none; border:1px solid var(--line); border-radius:9px; padding:8px 14px; font-family:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.acct-clear:hover{ border-color:#BE4414; color:#BE4414; }

/* ---- cabinet: my reviews ---- */
.rev-list{ display:flex; flex-direction:column; gap:12px; }
.rev-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.rev-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rev-card__prod{ font-size:14.5px; font-weight:700; color:var(--text); }
.rev-card__prod:hover{ color:#BE4414; }
.rev-card__badge{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.rev-card__badge.is-ok{ background:rgba(46,158,91,.12); color:#2E9E5B; }
.rev-card__badge.is-wait{ background:rgba(245,166,35,.14); color:#C67C00; }
.rev-card__stars{ display:flex; align-items:center; gap:2px; margin:9px 0 8px; }
.rev-card__date{ font-size:12px; color:var(--muted); margin-left:10px; }
.rev-card__text{ font-size:14px; line-height:1.6; color:var(--text); }

/* ---- cabinet: referral ---- */
.ref-card{ position:relative; background:linear-gradient(135deg,#0E2A22,#16403225); background-color:#0E2A22; color:#fff; border-radius:16px; padding:24px 24px 26px; overflow:hidden; margin-bottom:16px; }
:root[data-theme="dark"] .ref-card{ background-color:#16211C; border:1px solid var(--line); }
.ref-card__badge{ display:inline-block; background:var(--accent); color:#0E2A22; font-size:12px; font-weight:700; padding:5px 12px; border-radius:20px; margin-bottom:16px; }
.ref-card__label{ font-size:12.5px; color:rgba(255,255,255,.65); margin-bottom:8px; }
.ref-code{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ref-code__val{ font-size:28px; font-weight:700; letter-spacing:.06em; color:var(--accent); font-family:'Courier New',monospace; }
.ref-code__copy{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); color:#fff; border-radius:10px; padding:9px 15px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s ease; }
.ref-code__copy:hover{ background:rgba(255,255,255,.18); }
.ref-code__copy.is-copied{ background:var(--accent); color:#0E2A22; border-color:var(--accent); }
.ref-code__copy.is-copied svg{ display:none; }
.ref-stats{ grid-template-columns:repeat(2,1fr); }
.ref-how{ margin-top:2px; }
.ref-steps{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ref-steps li{ display:flex; align-items:flex-start; gap:13px; font-size:14px; line-height:1.5; color:var(--text); }
.ref-steps__n{ width:26px; height:26px; border-radius:50%; background:var(--accent); color:#0E2A22; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ref-share{ display:flex; gap:10px; margin-top:20px; padding-top:18px; border-top:1px dashed var(--line-2); flex-wrap:wrap; }
.ref-share__btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:10px; background:var(--surface-2); color:var(--text); font-size:13.5px; font-weight:700; transition:background .15s ease, color .15s ease; }
.ref-share__btn:hover{ background:var(--accent); color:#0E2A22; }
.ref-share__btn svg{ flex-shrink:0; }

/* review form inline error */
.rform__err{ background:rgba(190,68,20,.10); color:#BE4414; border:1px solid rgba(190,68,20,.28); border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:12px; }
@media (max-width:640px){ .ref-code__val{ font-size:23px; } }

/* TennisPoint: WARNING toast = brand brick, not green. Den Polansky */
.toast--warn{ border-color:#f1c9bf; }
.toast--warn .toast__title{ color:#E0563B; }
.toast--warn .toast__bar{ background:#E0563B; }

/* checkout: delivery carriers (Nova Poshta / Ukrposhta) — UKRPOSHTA-CARRIERS. Den Polansky */
.ship-methods{ display:flex; flex-direction:column; gap:12px; margin-bottom:4px; }
.ship-methods .choice + .choice{ margin-top:0; }
.up-logo{ flex-shrink:0; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; width:46px; height:46px; border-radius:10px; background:#FFD200; color:#1A1A1A; line-height:1.05; }
.up-logo b{ font-size:11px; font-weight:700; }
.up-logo span{ font-size:9px; font-weight:600; opacity:.92; }
.ship-block[hidden]{ display:none; }

/* NOTIFY-WHEN-AVAILABLE — out-of-stock card CTA + product-page button. Den Polansky */
.btn-notify-card{ background:#5E7268; color:#fff; border:1.5px solid #5E7268; }
.btn-notify-card:hover{ background:#50625A; border-color:#50625A; color:#fff; }
:root[data-theme="dark"] .btn-notify-card{ background:#56695F; border-color:#56695F; color:#fff; }

/* Telegram customer-bot — full-width footer strip + soft dismiss-once invite. Den Polansky */
.footbot{ display:flex; align-items:center; gap:18px; margin:25px 0 24px; padding:16px 24px; border-radius:16px; background:linear-gradient(90deg, rgb(34 158 217 / 0%), rgb(34 158 217 / 0%)); border:1.5px solid rgba(34,158,217,.4); text-decoration:none; transition:.18s; }
.footbot:hover{ border-color:rgba(34,158,217,.75); background:linear-gradient(90deg, rgba(34,158,217,.3), rgba(34,158,217,.08)); }
.footbot__ic{ flex:none; width:48px; height:48px; border-radius:13px; background:#229ED9; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(34,158,217,.4); }
.footbot__txt{ flex:1; min-width:0; line-height:1.35; }
.footbot__txt b{ font-size:16px; color:#fff; font-weight:600 !important; margin-right:9px; }
.footbot__txt span{ font-size:13.5px; color:rgba(255,255,255,.62); }
.footbot__btn{ flex:none; display:inline-flex; align-items:center; gap:7px; background:#229ED9; color:#fff; font-weight:700; font-size:14px; padding:11px 24px; border-radius:11px; white-space:nowrap; transition:.15s; }
.footbot:hover .footbot__btn{ background:#1c8dc2; }
@media (max-width:700px){ .footbot{ flex-wrap:wrap; gap:12px 14px; padding:16px 18px; } .footbot__txt{ flex-basis:calc(100% - 62px); } .footbot__txt b{ display:block; margin:0 0 3px; } .footbot__btn{ width:100%; justify-content:center; } }

.bot-invite{ position:fixed; left:20px; bottom:20px; z-index:60; width:min(360px,calc(100vw - 40px)); display:flex; align-items:flex-start; gap:12px; padding:16px 18px; background:var(--card,#fff); color:var(--text); border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 44px rgba(9,14,12,.22); transform:translateY(24px); opacity:0; transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s; }
.bot-invite.is-shown{ transform:translateY(0); opacity:1; }
.bot-invite__x{ position:absolute; top:8px; right:8px; width:26px; height:26px; border:0; background:transparent; color:var(--muted,#9aa0a6); cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.bot-invite__x:hover{ background:var(--line); color:var(--text); }
.bot-invite__ic{ flex:none; width:44px; height:44px; border-radius:12px; background:#229ED9; color:#fff; display:flex; align-items:center; justify-content:center; }
.bot-invite__body{ flex:1; min-width:0; padding-right:12px; }
.bot-invite__body b{ display:block; font-size:14.5px; margin-bottom:2px; }
.bot-invite__body span{ display:block; font-size:12.5px; color:var(--muted,#6b7280); line-height:1.4; }
.bot-invite__btn{ align-self:center; flex:none; background:#229ED9; color:#fff; text-decoration:none; font-weight:700; font-size:13px; padding:9px 16px; border-radius:10px; white-space:nowrap; }
.bot-invite__btn:hover{ background:#1c8dc2; }
@media (max-width:560px){ .bot-invite{ left:12px; right:12px; bottom:84px; width:auto; flex-wrap:wrap; } .bot-invite__body{ padding-right:0; } .bot-invite__btn{ width:100%; text-align:center; margin-top:6px; } }

/* ===== TP info-pages tweaks · Den Polansky ===== */
.stat__num{ color:#BE4414; }
@media (max-width:700px){
  .ctaq__body{ background:linear-gradient(180deg,rgba(9,12,11,.54),rgba(9,12,11,.40)); border-radius:16px; padding:22px 18px; backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px); }
}

/* TP coach form (Тренери) */
.coach-type{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.coach-type .ctype-chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2,#e3e6e4);border-radius:10px;padding:7px 13px;cursor:pointer;font-size:14px;line-height:1;user-select:none;transition:border-color .15s,background .15s}
.coach-type .ctype-chip input{width:15px;height:15px;min-width:15px;margin:0;flex:none;accent-color:#0E2A22;cursor:pointer}
.coach-type .ctype-chip:hover{border-color:#c8ccca}
.coach-type .ctype-chip:has(input:checked){border-color:#0E2A22;background:rgba(14,42,34,.06)}
.field__pw{position:relative;display:block}
.field__pw>input{width:100%;padding-right:44px}
.field__gen{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#7d7d7d;cursor:pointer;border-radius:8px;padding:0;transition:color .15s,background .15s}
.field__gen:hover{color:#0E2A22;background:rgba(0,0,0,.06)}

/* TP coach success card */
.footcta__ok.coach-ok{align-items:center;gap:14px;background:#f0fae8;border:1.5px solid #b7e08a;border-radius:14px;padding:16px 20px;margin-top:16px}
.footcta__ok.coach-ok[hidden]{display:none}
.footcta__ok.coach-ok:not([hidden]){display:flex}
.coach-ok__ic{flex:none;width:40px;height:40px;border-radius:50%;background:#7cc242;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.coach-ok__txt{font-size:15px;font-weight:600;line-height:1.45;color:#1f3d10}
@media(max-width:560px){.footcta__ok.coach-ok{padding:14px 16px}.coach-ok__txt{font-size:14px}}

/* TP coach badge */
.acc-drop__coach,.acct-nav__coach{display:inline-block;padding:2px 10px;border-radius:20px;background:#0E2A22;color:#D6FF3D;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.5;vertical-align:middle}
.acc-drop__coach{margin-top:6px;align-self:flex-start}
.acct-nav__coach{margin-top:7px;align-self:flex-start}

/* TP coach dot colours */
.acc-dot--coach{background:#0E2A22}
.acc-dot--cust{background:#BE4414}