/* Fonts — Golos Text (self-hosted woff2). */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}


/* Numeric / tabular usage (prices, SKUs, voltage specs) reuses Golos Text with
   font-feature-settings 'tnum' — see typography.css. No separate face needed. */

/* ==========================================================================
   Colors — Shop220
   "Shop220" references 220V mains voltage. The palette is built around an
   energetic CURRENT ORANGE (the brand accent on the "220" wordmark and CTAs),
   anchored by a trustworthy deep NAVY ink, with a VOLTAGE YELLOW spark accent.
   Green = in stock / buy, Red = sale / discount — both standard in RU retail.

   NOTE: hexes are inferred from the public site, not an official brand sheet.
   Confirm exact values with the brand team.
   ========================================================================== */
:root {
  /* ---- Brand: Current Orange (primary CTA / accent) ---- */
  --orange-50:  #FFF3EA;
  --orange-100: #FFE2CC;
  --orange-200: #FFC79B;
  --orange-300: #FBA565;
  --orange-400: #F78B3A;
  --orange-500: #F47B20;  /* brand primary */
  --orange-600: #DA630C;
  --orange-700: #B14E08;
  --orange-800: #8A3D08;

  /* ---- Ink: Deep Navy (structure / text / headers) ---- */
  --navy-50:  #EEF1F6;
  --navy-100: #D5DCE7;
  --navy-200: #A7B4C8;
  --navy-300: #6E7F9B;
  --navy-400: #3E5072;
  --navy-500: #243650;
  --navy-600: #1A293E;
  --navy-700: #16243B;  /* primary ink */
  --navy-800: #0F1A2C;
  --navy-900: #0A1320;

  /* ---- Electric Blue (links / info / secondary) ---- */
  --blue-50:  #EAF2FD;
  --blue-100: #CBDFFA;
  --blue-400: #3D86E4;
  --blue-500: #1E6FD9;
  --blue-600: #145CBC;

  /* ---- Voltage Yellow (energy highlight / "220V") ---- */
  --yellow-300: #FFD84D;
  --yellow-400: #FFC400;
  --yellow-500: #F5B400;

  /* ---- Green (in stock / buy / success) ---- */
  --green-50:  #E8F6EE;
  --green-100: #C5E9D3;
  --green-500: #2E9E5B;
  --green-600: #218047;

  /* ---- Red (sale / discount / error) ---- */
  --red-50:  #FDECEC;
  --red-100: #F9CFCF;
  --red-500: #E03131;
  --red-600: #C01C1C;

  /* ---- Neutrals (grayscale) ---- */
  --white:    #FFFFFF;
  --gray-25:  #FAFBFC;
  --gray-50:  #F5F7FA;
  --gray-100: #EDF1F5;
  --gray-200: #E3E8EF;
  --gray-300: #D2DAE3;
  --gray-400: #B0BBC8;
  --gray-500: #8593A4;
  --gray-600: #6B7787;
  --gray-700: #4C5663;
  --gray-800: #333B45;
  --black:    #0A1320;

  /* ======================================================================
     SEMANTIC ALIASES — prefer these in components
     ====================================================================== */

  /* Surfaces & backgrounds */
  --surface-page:       var(--gray-50);     /* app/body background */
  --surface-card:       var(--white);       /* product cards, panels */
  --surface-raised:     var(--white);
  --surface-sunken:     var(--gray-100);    /* wells, inputs idle */
  --surface-inverse:    var(--navy-700);    /* footer, dark bars */
  --surface-accent-soft:var(--orange-50);   /* highlighted rows / promos */

  /* Text */
  --text-strong:   var(--navy-700);   /* headings, prices */
  --text-body:     var(--navy-600);   /* default copy */
  --text-muted:    var(--gray-600);   /* meta, specs, captions */
  --text-faint:    var(--gray-500);   /* placeholders, disabled */
  --text-inverse:  var(--white);      /* on dark / on orange */
  --text-link:     var(--blue-500);

  /* Brand / interactive */
  --brand:             var(--orange-500);
  --brand-hover:       var(--orange-600);
  --brand-active:      var(--orange-700);
  --brand-contrast:    var(--white);

  /* Status */
  --status-stock:      var(--green-500);
  --status-stock-bg:   var(--green-50);
  --status-sale:       var(--red-500);
  --status-sale-bg:    var(--red-50);
  --status-energy:     var(--yellow-400);  /* "хит", energy badges */
  --status-info:       var(--blue-500);
  --status-info-bg:    var(--blue-50);

  /* Borders / dividers */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-focus:   var(--orange-500);

  /* Price emphasis */
  --price:        var(--navy-700);
  --price-old:    var(--gray-500);
  --price-sale:   var(--red-500);
}

/* ==========================================================================
   Typography — Shop220
   One family (Golos Text) across the system; hierarchy carried by weight and
   size. Utilitarian, dense, scannable — a catalog, not an editorial site.
   ========================================================================== */
:root {
  /* Families */
  --font-sans: "Golos Text", "PT Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-num: var(--font-sans);  /* prices use tnum feature, see utility below */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale (px) — catalog-dense, base 14 */
  --fs-display: 40px;   /* hero / landing headlines */
  --fs-h1:      30px;   /* page titles */
  --fs-h2:      24px;   /* section headers */
  --fs-h3:      19px;   /* card titles, sub-sections */
  --fs-h4:      16px;   /* small headers */
  --fs-body:    14px;   /* default body */
  --fs-sm:      13px;   /* meta, secondary */
  --fs-xs:      12px;   /* badges, captions, legal */
  --fs-price:   22px;   /* product price */
  --fs-price-lg:30px;   /* product page price */

  /* Line heights */
  --lh-tight:  1.15; /* @kind font */
  --lh-snug:   1.3; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed:1.65; /* @kind font */

  /* Letter spacing */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide:   0.02em; /* @kind font */
  --ls-caps:   0.06em; /* @kind font */
}

/* Base element defaults (opt-in: applied by consumers on body) */
:root {
  --type-body: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); /* @kind other */
}

/* Tabular numbers helper — apply to prices, SKUs, voltage/amperage specs */
.num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ==========================================================================
   Spacing, sizing & radii — Shop220
   A 4px base grid. Dense by intent: e-commerce catalog UIs pack a lot of
   product, specs and controls into tight rows.
   ========================================================================== */
:root {
  /* Spacing scale (4px base) */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Radii — modest, businesslike. Cards and inputs share a soft corner;
     pills (badges, chips, search) go fully round. */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;   /* default: cards, inputs, buttons */
  --radius-lg:   12px;  /* large panels, modals */
  --radius-pill: 999px;

  /* Control heights */
  --control-sm: 32px; /* @kind spacing */
  --control-md: 40px; /* @kind spacing */
  --control-lg: 48px; /* @kind spacing */

  /* Layout */
  --container-max: 1280px; /* @kind spacing */
  --gutter:        24px; /* @kind spacing */
  --sidebar-w:     264px; /* @kind spacing */

  /* Z layers */
  --z-base:    1; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-header:  200; /* @kind other */
  --z-dropdown:300; /* @kind other */
  --z-overlay: 400; /* @kind other */
  --z-modal:   500; /* @kind other */
  --z-toast:   600; /* @kind other */
}

/* ==========================================================================
   Effects — shadows, borders, transitions — Shop220
   Restrained, practical depth. Cards sit on a light gray page with a hairline
   border + a soft shadow that lifts on hover. No heavy/colored glows.
   ========================================================================== */
:root {
  /* Elevation (cool navy-tinted shadows, not pure black) */
  --shadow-xs:  0 1px 2px rgba(16, 26, 44, 0.06);
  --shadow-sm:  0 1px 3px rgba(16, 26, 44, 0.08), 0 1px 2px rgba(16, 26, 44, 0.05);
  --shadow-md:  0 4px 12px rgba(16, 26, 44, 0.10);
  --shadow-lg:  0 10px 28px rgba(16, 26, 44, 0.14);
  --shadow-pop: 0 6px 24px rgba(16, 26, 44, 0.16);  /* dropdowns, popovers */

  /* Hover lift used on product cards */
  --shadow-card:       0 1px 2px rgba(16, 26, 44, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(16, 26, 44, 0.14);

  /* Focus ring (orange brand) */
  --ring-brand: 0 0 0 3px rgba(244, 123, 32, 0.30);
  --ring-blue:  0 0 0 3px rgba(30, 111, 217, 0.28);
  --ring-error: 0 0 0 3px rgba(224, 49, 49, 0.25);

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle); /* @kind other */
  --border-card:     1px solid var(--border-subtle); /* @kind other */

  /* Motion — quick, functional, no bounce */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   260ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}

/* ==========================================================================
   Shop220 Design System — global entry point
   Consumers link THIS file only. It is a manifest of  never put
   rules directly here.
   ========================================================================== */
/* Fonts — Golos Text (self-hosted woff2). */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-2f011338.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-b1d2ee1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-95dfa543.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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/golos-4628f99a.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;
}


/* Numeric / tabular usage (prices, SKUs, voltage specs) reuses Golos Text with
   font-feature-settings 'tnum' — see typography.css. No separate face needed. */

/* ==========================================================================
   Colors — Shop220
   "Shop220" references 220V mains voltage. The palette is built around an
   energetic CURRENT ORANGE (the brand accent on the "220" wordmark and CTAs),
   anchored by a trustworthy deep NAVY ink, with a VOLTAGE YELLOW spark accent.
   Green = in stock / buy, Red = sale / discount — both standard in RU retail.

   NOTE: hexes are inferred from the public site, not an official brand sheet.
   Confirm exact values with the brand team.
   ========================================================================== */
:root {
  /* ---- Brand: Current Orange (primary CTA / accent) ---- */
  --orange-50:  #FFF3EA;
  --orange-100: #FFE2CC;
  --orange-200: #FFC79B;
  --orange-300: #FBA565;
  --orange-400: #F78B3A;
  --orange-500: #F47B20;  /* brand primary */
  --orange-600: #DA630C;
  --orange-700: #B14E08;
  --orange-800: #8A3D08;

  /* ---- Ink: Deep Navy (structure / text / headers) ---- */
  --navy-50:  #EEF1F6;
  --navy-100: #D5DCE7;
  --navy-200: #A7B4C8;
  --navy-300: #6E7F9B;
  --navy-400: #3E5072;
  --navy-500: #243650;
  --navy-600: #1A293E;
  --navy-700: #16243B;  /* primary ink */
  --navy-800: #0F1A2C;
  --navy-900: #0A1320;

  /* ---- Electric Blue (links / info / secondary) ---- */
  --blue-50:  #EAF2FD;
  --blue-100: #CBDFFA;
  --blue-400: #3D86E4;
  --blue-500: #1E6FD9;
  --blue-600: #145CBC;

  /* ---- Voltage Yellow (energy highlight / "220V") ---- */
  --yellow-300: #FFD84D;
  --yellow-400: #FFC400;
  --yellow-500: #F5B400;

  /* ---- Green (in stock / buy / success) ---- */
  --green-50:  #E8F6EE;
  --green-100: #C5E9D3;
  --green-500: #2E9E5B;
  --green-600: #218047;

  /* ---- Red (sale / discount / error) ---- */
  --red-50:  #FDECEC;
  --red-100: #F9CFCF;
  --red-500: #E03131;
  --red-600: #C01C1C;

  /* ---- Neutrals (grayscale) ---- */
  --white:    #FFFFFF;
  --gray-25:  #FAFBFC;
  --gray-50:  #F5F7FA;
  --gray-100: #EDF1F5;
  --gray-200: #E3E8EF;
  --gray-300: #D2DAE3;
  --gray-400: #B0BBC8;
  --gray-500: #8593A4;
  --gray-600: #6B7787;
  --gray-700: #4C5663;
  --gray-800: #333B45;
  --black:    #0A1320;

  /* ======================================================================
     SEMANTIC ALIASES — prefer these in components
     ====================================================================== */

  /* Surfaces & backgrounds */
  --surface-page:       var(--gray-50);     /* app/body background */
  --surface-card:       var(--white);       /* product cards, panels */
  --surface-raised:     var(--white);
  --surface-sunken:     var(--gray-100);    /* wells, inputs idle */
  --surface-inverse:    var(--navy-700);    /* footer, dark bars */
  --surface-accent-soft:var(--orange-50);   /* highlighted rows / promos */

  /* Text */
  --text-strong:   var(--navy-700);   /* headings, prices */
  --text-body:     var(--navy-600);   /* default copy */
  --text-muted:    var(--gray-600);   /* meta, specs, captions */
  --text-faint:    var(--gray-500);   /* placeholders, disabled */
  --text-inverse:  var(--white);      /* on dark / on orange */
  --text-link:     var(--blue-500);

  /* Brand / interactive */
  --brand:             var(--orange-500);
  --brand-hover:       var(--orange-600);
  --brand-active:      var(--orange-700);
  --brand-contrast:    var(--white);

  /* Status */
  --status-stock:      var(--green-500);
  --status-stock-bg:   var(--green-50);
  --status-sale:       var(--red-500);
  --status-sale-bg:    var(--red-50);
  --status-energy:     var(--yellow-400);  /* "хит", energy badges */
  --status-info:       var(--blue-500);
  --status-info-bg:    var(--blue-50);

  /* Borders / dividers */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-focus:   var(--orange-500);

  /* Price emphasis */
  --price:        var(--navy-700);
  --price-old:    var(--gray-500);
  --price-sale:   var(--red-500);
}

/* ==========================================================================
   Typography — Shop220
   One family (Golos Text) across the system; hierarchy carried by weight and
   size. Utilitarian, dense, scannable — a catalog, not an editorial site.
   ========================================================================== */
:root {
  /* Families */
  --font-sans: "Golos Text", "PT Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-num: var(--font-sans);  /* prices use tnum feature, see utility below */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale (px) — catalog-dense, base 14 */
  --fs-display: 40px;   /* hero / landing headlines */
  --fs-h1:      30px;   /* page titles */
  --fs-h2:      24px;   /* section headers */
  --fs-h3:      19px;   /* card titles, sub-sections */
  --fs-h4:      16px;   /* small headers */
  --fs-body:    14px;   /* default body */
  --fs-sm:      13px;   /* meta, secondary */
  --fs-xs:      12px;   /* badges, captions, legal */
  --fs-price:   22px;   /* product price */
  --fs-price-lg:30px;   /* product page price */

  /* Line heights */
  --lh-tight:  1.15; /* @kind font */
  --lh-snug:   1.3; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed:1.65; /* @kind font */

  /* Letter spacing */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide:   0.02em; /* @kind font */
  --ls-caps:   0.06em; /* @kind font */
}

/* Base element defaults (opt-in: applied by consumers on body) */
:root {
  --type-body: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); /* @kind other */
}

/* Tabular numbers helper — apply to prices, SKUs, voltage/amperage specs */
.num-tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ==========================================================================
   Spacing, sizing & radii — Shop220
   A 4px base grid. Dense by intent: e-commerce catalog UIs pack a lot of
   product, specs and controls into tight rows.
   ========================================================================== */
:root {
  /* Spacing scale (4px base) */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Radii — modest, businesslike. Cards and inputs share a soft corner;
     pills (badges, chips, search) go fully round. */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;   /* default: cards, inputs, buttons */
  --radius-lg:   12px;  /* large panels, modals */
  --radius-pill: 999px;

  /* Control heights */
  --control-sm: 32px; /* @kind spacing */
  --control-md: 40px; /* @kind spacing */
  --control-lg: 48px; /* @kind spacing */

  /* Layout */
  --container-max: 1280px; /* @kind spacing */
  --gutter:        24px; /* @kind spacing */
  --sidebar-w:     264px; /* @kind spacing */

  /* Z layers */
  --z-base:    1; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-header:  200; /* @kind other */
  --z-dropdown:300; /* @kind other */
  --z-overlay: 400; /* @kind other */
  --z-modal:   500; /* @kind other */
  --z-toast:   600; /* @kind other */
}

/* ==========================================================================
   Effects — shadows, borders, transitions — Shop220
   Restrained, practical depth. Cards sit on a light gray page with a hairline
   border + a soft shadow that lifts on hover. No heavy/colored glows.
   ========================================================================== */
:root {
  /* Elevation (cool navy-tinted shadows, not pure black) */
  --shadow-xs:  0 1px 2px rgba(16, 26, 44, 0.06);
  --shadow-sm:  0 1px 3px rgba(16, 26, 44, 0.08), 0 1px 2px rgba(16, 26, 44, 0.05);
  --shadow-md:  0 4px 12px rgba(16, 26, 44, 0.10);
  --shadow-lg:  0 10px 28px rgba(16, 26, 44, 0.14);
  --shadow-pop: 0 6px 24px rgba(16, 26, 44, 0.16);  /* dropdowns, popovers */

  /* Hover lift used on product cards */
  --shadow-card:       0 1px 2px rgba(16, 26, 44, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(16, 26, 44, 0.14);

  /* Focus ring (orange brand) */
  --ring-brand: 0 0 0 3px rgba(244, 123, 32, 0.30);
  --ring-blue:  0 0 0 3px rgba(30, 111, 217, 0.28);
  --ring-error: 0 0 0 3px rgba(224, 49, 49, 0.25);

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle); /* @kind other */
  --border-card:     1px solid var(--border-subtle); /* @kind other */

  /* Motion — quick, functional, no bounce */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   260ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */
}

* { box-sizing: border-box; }
  body { margin: 0; background: var(--gray-50); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  svg.lucide { width: 1em; height: 1em; display: block; stroke-width: 2; }
  input[type=range].s220-range { -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:var(--gray-200); outline:none; }
  input[type=range].s220-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#3DA63D; cursor:pointer; border:2px solid #fff; box-shadow:0 1px 3px rgba(16,26,44,.3); }
  html, body { overflow-x: clip; max-width: 100%; }
  .cat-filters-btn{ display:none; }
  @media (max-width:1100px){
    .cat-gridview{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  }
  @media (max-width:760px){
    .cat-wrap{ padding:14px 14px 96px !important; }
    .cat-hdr-sticky{ position:static !important; box-shadow:none !important; }
    .cat-grid{ grid-template-columns:minmax(0,1fr) !important; }
    .cat-aside{ display:none !important; }
    .cat-aside.is-open{ display:block !important; position:fixed !important; inset:0 !important; z-index:70 !important; background:#fff !important; overflow-y:auto !important; padding:0 16px 28px !important; margin:0 !important; -webkit-overflow-scrolling:touch; }
    .cat-aside.is-open .cat-aside-head{ display:flex !important; }
    .cat-filters-btn{ display:flex !important; }
    .cat-row{ grid-template-columns:96px minmax(0,1fr) !important; grid-template-areas:'img info' 'buy buy' !important; gap:14px !important; }
    .cat-row-img{ grid-area:img !important; }
    .cat-row-info{ grid-area:info !important; }
    .cat-row-buy{ grid-area:buy !important; margin-top:6px; }
    .cat-gridview{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .cat-footer-row{ flex-direction:column !important; gap:24px !important; }
    .cat-footer-cols{ gap:22px 36px !important; }
    .pc-tabbar{ display:flex !important; }
    .hdr-util{ display:block !important; }
    .hdr-util-inner{ height:34px !important; padding:0 10px !important; font-size:12px !important; }
    .hdr-util-inner > div > a{ display:none !important; }
    .hdr-util-menu{ display:none !important; }
    .hdr-util-hours{ display:none !important; }
    .hdr-util-inner .hdr-phone{ font-size:12px !important; white-space:nowrap !important; letter-spacing:0 !important; }
    /* iOS Safari сам оборачивает распознанный номер в <a> внутри .hdr-phone —
       его НЕ прячем (иначе номер обрезается) и НЕ красим в синий (дефолтная
       ссылка iOS) — оставляем белым без подчёркивания. */
    .hdr-util-inner .hdr-phone a{ display:inline !important; color:#fff !important; text-decoration:none !important; }
    /* height:auto — иначе фикс. высота 85px не растёт под перенос строк, и поиск
       вываливается из шапки, налезая на контент страницы */
    .hdr-main-inner{ flex-wrap:wrap !important; height:auto !important; gap:12px !important; padding:12px 16px !important; }
    /* лого на мобильном — исходный маленький размер (36px), а не увеличенный 72px */
    .hdr-main-inner > a > img{ height:36px !important; }
    .hdr-search{ order:3 !important; flex-basis:100% !important; }
    .hdr-cat-label{ display:none !important; }
    .hdr-actions{ gap:16px !important; margin-left:auto !important; }
    .hdr-act-label{ display:none !important; }
  }
/* ===== Интеграция с движком (новая шапка) ===== */
/* lucide-иконки: размер по font-size родителя */
svg.lucide{ width:1em; height:1em; }
/* старый видимый float_panel-заголовок убран (см. float_panel.htm); попап #popupbox — сосед, не затрагивается */
#float_panel{ display:none !important; }

/* Виджет корзины в шапке: #cart (div, .cart_status) > a.checkout (экшен).
   JS panel_generic1.js: $('#cart .checkout').click(viewCart) — .checkout ДОЛЖЕН быть
   ВНУТРИ #cart, иначе попап не открывается. Легаси .cart_status{width:220px} и
   .checkout-кнопку гасим по id. */
#cart.cart_status{ display:flex !important; align-items:center; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; background:none !important; }
#cart a.hdr-act{ display:flex !important; flex-direction:column; align-items:center; gap:3px; width:auto !important; height:auto !important; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; color:var(--navy-600) !important; cursor:pointer; font-size:11px; font-weight:600; text-decoration:none !important; }

/* убрать холодный серо-голубой фон страницы (--gray-50) — пользователю не нравится; делаем белый */
body{ background:#fff !important; }

/* ===== ЛИСТИНГ (карточки) ===== */
/* Контейнеры #square_table/#list_table — легаси <table> с .sq_item на <td>.
   Гасим табличное легаси-оформление, чтобы дизайн-карточки (.cat-row / грид) были
   чистыми. (Полный переход table -> CSS-grid — отдельный шаг 2b.) */
#square_table, #list_table{ width:100%; border-collapse:separate; border-spacing:16px; table-layout:fixed; background:none; }
#square_table td.sq_item{ background:#fff !important; vertical-align:top !important; padding:0 !important; border:none !important; }
#square_table td.sq_item:hover{ background:#fff !important; }
#list_table td, #list_table > tbody > tr > td{ background:none !important; vertical-align:top !important; padding:0 !important; border:none !important; }
.interlaced{ background:none !important; height:auto !important; }
#square_table .cat_list_img, #list_table .cat_list_img{ width:auto !important; margin:0 !important; }

/* Товарное фото в списке: движок отдаёт <img ... width="75">. В макете фото
   заполняет квадратную ячейку (object-fit:contain). Гасим width=75 и тянем по
   контейнеру .cat_list_img (aspect-ratio 1/1, padding 14px). */
/* список: фото в item.htm лежит внутри <span itemprop=image1> -> селектор по
   потомку (не прямой ребёнок), иначе картинка шла натуральным размером и наезжала */
#list_table .cat-row .cat_list_img img.img,
#square_table .sq_item .cat_list_img > img.img{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:100% !important;
  object-fit:contain; mix-blend-mode:multiply;
}
#list_table .cat-row .cat_list_img span{ display:inline-flex; max-width:100%; max-height:100%; }
/* Hover-зум (.cat_list_img_big) из легаси — в макете его нет, гасим. */
#list_table .cat-row .cat_list_img .cat_list_img_big,
#list_table .cat-row .cat_list_img .cat_list_img_big_arrow{ display:none !important; }
/* Легаси-бейджи $new/$sale/$hit/$action — это absolute-<div> с фоном /images/*.png
   (404 на staging) и пиксельными отступами под старую вёрстку. В макете их нет —
   гасим (бейджи макета приходят отдельными токенами вне .cat_list_img). */
#list_table .cat-row .cat_list_img div,
#square_table .sq_item .cat_list_img > div{ display:none !important; }
/* Плитка (grid): фото заполняет карточку как в макете (object-fit:contain),
   одинаково на десктопе и мобиле; прячем legacy hover-зум (.cat_list_img_big). */
#square_table .sq_item .cat_list_img{ width:100% !important; }
#square_table .sq_item .cat_list_img > img.img{
  width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important;
  object-fit:contain !important; mix-blend-mode:multiply; }
#square_table .sq_item .cat_list_img .cat_list_img_big,
#square_table .sq_item .cat_list_img .cat_list_img_big_arrow{ display:none !important; }

/* Вишлист-сердечко. Легаси prepareWishlist() (lib1.js) пишет в .wishlist текст
   «В блокнот»/«В блокноте» и вешает класс .added; клик-тоггл легаси сохраняем.
   Прячем текст, рисуем сердечко через ::before (пустое / залитое по .added). */
.wishlist{ font-size:0 !important; line-height:0 !important; }
.wishlist::before{ content:"\2661"; font-size:18px; line-height:1; color:var(--gray-400); }
.wishlist:hover::before{ color:#E0322E; }
.wishlist.added::before{ content:"\2665"; color:#E0322E; }
.wishlist.added{ border-color:#E0322E !important; }

/* тулбар (.cat_panel) — легаси даёт серый #f0f0f0; пользователю нужен белый.
   (Полный редизайн тулбара — шаг 2c.) */
.cat_panel{ background:#fff !important; border:1px solid var(--border-subtle) !important; }

/* ===== СТРОКИ ТОВАРА 1:1 С МАКЕТОМ ===== */
/* Легаси stylesheet.css: body,td{font-family:Verdana;font-size:8pt;color:#404040} —
   протекает в карточки (они внутри <td>) и забивает Golos/размеры. Форсим Golos,
   базовый размер/цвет, и гасим табличные отступы — отступы задаёт сама .cat-row. */
#list_table .cat-row, #list_table .cat-row *,
#square_table .sq_item, #square_table .sq_item *{
  font-family: var(--font-sans) !important;
}
#list_table .cat-row, #square_table .sq_item{ font-size:14px; color:var(--navy-700); }
/* табличная обёртка: убрать легаси-паддинги/спейсинг ячеек и разделитель */
#list_table{ border-spacing:0 !important; border-collapse:collapse !important; width:100%; }
#list_table > tbody > tr > td, #list_table td{ padding:0 !important; border:none !important; background:none !important; }
#square_table{ border-spacing:16px !important; border-collapse:separate !important; width:100%; }
#square_table td.sq_item{ padding:0 !important; border:none !important; background:#fff !important; vertical-align:top !important; text-align:left !important; }
/* легаси .aligncenter на <td> центрировал текст плитки — выравниваем по левому краю */
#square_table td.sq_item, #square_table td.sq_item *{ text-align:left !important; }
.interlaced{ display:none !important; }   /* у .cat-row свой border-bottom */
/* Легаси зелёный фон/рамка строк списка (stylesheet.css: tr.listrow.dark #e2ecd4,
   tr.listrow>td border #f2f7eb) — строки делаем белыми, как в макете.
   border-bottom самой .cat-row (разделитель) НЕ трогаем. */
#list_table tr.listrow, #list_table tr.listrow.dark, #list_table tr.listrow.active{ background:#fff !important; }
#list_table tr.listrow > td, #list_table tr.listrow.dark > td, #list_table tr.listrow:hover > td{ background:#fff !important; border-color:transparent !important; }
#list_table .cat-row{ background:#fff !important; }
/* НОВЫЙ каталог (ALT): у списка нет legacy-обёртки .cat-outer (width:100%-таблица),
   и table-layout:fixed во flex-колонке .alt-cat-main схлопывал среднюю колонку
   .cat-row (имя вертикально). Форсируем полную ширину таблицы и ячейки. */
.alt-cat-main{ flex:1 1 0% !important; min-width:0; }
.alt-cat-main #list_table, .alt-cat-main #square_table,
.alt-section-page #list_table, .alt-section-page #square_table{ width:100% !important; table-layout:fixed !important; }
.alt-cat-main #list_table > tbody > tr > td,
.alt-section-page #list_table > tbody > tr > td{ width:100% !important; }
/* «Наличие» в списке: зелёное при наличии, серое когда нет (оба Remains=0) */
.cat-row .cat-stock-text{ color:var(--green-600); }
.cat-row .cat-stock-text.cat-stock-out{ color:var(--gray-500); }
/* Доставка в карточке списка — те же строки/слова, что на карточке товара */
.cat-row .pc-deliv{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.cat-row .pc-deliv-row{ display:flex; gap:8px; font-size:12.5px; color:var(--gray-600); line-height:1.35; }
.cat-row .pc-deliv-row b{ color:var(--navy-700); font-weight:700; }
.cat-row .pc-deliv-ic{ display:inline-flex; flex:0 0 auto; width:17px; justify-content:center; color:#3DA63D; }
.cat-row .pc-deliv-ic svg{ width:16px; height:16px; }

/* Название товара в плитке — ровно 3 строки фикс. высоты, чтобы строка наличия
   и шкала остатков начинались на одном уровне во всех карточках ряда (иначе при
   разной длине имени шкала «съезжает» — была кривизна «через одну»). */
.sq_item .sq-name{
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  display:box; box-orient:vertical; line-clamp:3;
  overflow:hidden; height:54px; min-height:54px; margin-bottom:8px;
}

/* Рейтинг в плитке — слот всегда присутствует с фикс. высотой (даже когда отзывов
   нет), иначе строка наличия и шкала «съезжают» только в карточках с рейтингом
   (была кривизна «через одну»). */
.sq_item .sq-rating{ display:flex; align-items:center; min-height:21px; height:21px; margin-bottom:8px; font-size:13px; overflow:hidden; }

/* Плитка (квадратная карточка) — наличие + доставка теми же словами */
.sq_item .sq-stock-text{ color:var(--green-600); }
.sq_item .sq-stock-text.cat-stock-out{ color:var(--gray-500); }
.sq_item .pc-deliv{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.sq_item .pc-deliv-row{ display:flex; gap:7px; font-size:11.5px; color:var(--gray-600); line-height:1.3; }
.sq_item .pc-deliv-row b{ color:var(--navy-700); font-weight:700; }
.sq_item .pc-deliv-ic{ display:inline-flex; flex:0 0 auto; width:15px; justify-content:center; color:#3DA63D; }
.sq_item .pc-deliv-ic svg{ width:14px; height:14px; }

/* ===== НИЗ КАТАЛОГА: «Показать ещё» + пагинация (новый дизайн) ===== */
/* Кнопка «Показать ещё» (legacy .showmore table > button.js-loadmoreitems):
   во всю ширину, контурная, скруглённая — как в макете. */
.showmore{ margin-top:24px !important; }
.showmore td{ padding:0 !important; border:none !important; background:none !important; height:auto !important; }
.showmore button.js-loadmoreitems,
.showmore .button.js-loadmoreitems{
  display:block; width:100%; height:54px; box-sizing:border-box;
  background:#fff; border:1px solid var(--border-subtle); border-radius:12px;
  color:var(--navy-700); font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; transition:border-color .15s, color .15s; box-shadow:none;
}
.showmore button.js-loadmoreitems:hover,
.showmore .button.js-loadmoreitems:hover{ border-color:var(--green-600); color:var(--green-600); }

/* Пагинация снизу: рендерится из navbar2.htm (<div class="nav block">Страницы:
   <div>…<div><a>2</a></div>…<div><b>1</b></div>…</div></div>).
   Прячем подпись «Страницы:» (font-size:0 на контейнере), а ссылки/текущую
   страницу делаем скруглёнными кнопками. */
.cat-pager-bottom{ margin-top:28px; }
.cat-pager-bottom .nav.block{ font-size:0 !important; text-align:center; padding:0 !important; }
.cat-pager-bottom .nav.block > div{
  display:inline-flex !important; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:0 !important;
}
.cat-pager-bottom .nav.block > div > div{ padding:0 !important; margin:0 !important; }
.cat-pager-bottom .nav.block a,
.cat-pager-bottom .nav.block b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 10px; box-sizing:border-box;
  border-radius:10px; font-size:15px; font-weight:600; line-height:1;
}
.cat-pager-bottom .nav.block a{
  color:var(--navy-700); border:1px solid var(--border-subtle); background:#fff;
  text-decoration:none; transition:border-color .15s, color .15s;
}
.cat-pager-bottom .nav.block a:hover{ border-color:var(--green-600); color:var(--green-600); }
.cat-pager-bottom .nav.block b{ background:var(--green-600); color:#fff; }
/* стрелка «вперёд» в пагинации — та же кнопка, чуть приглушённый цвет */
.cat-pager-bottom .nav.block .nav-next a{ color:var(--gray-500); font-weight:700; }
.cat_panel .nav.block .nav-next a{ color:var(--gray-500); font-weight:700; }

/* ===== ОПИСАНИЕ РАЗДЕЛА (cat_desc) — НОВЫЙ ДИЗАЙН =====
   Контент из БД (CatCategories.Description): картинка + заголовок + текст.
   Картинку делаем крупной и адаптивной, типографику — под новый дизайн. */
.cat-section-desc{ margin-top:32px; padding-top:26px; border-top:1px solid var(--border-subtle);
  font-size:15px; line-height:1.65; color:var(--gray-700, #475569); }
.cat-section-desc:empty{ display:none; }
.cat-section-desc img{ max-width:100%; height:auto; }
.cat-section-desc img.img{ border:1px solid var(--border-subtle); border-radius:8px; padding:0; background:#fff; }
/* Легаси-таблицы с картинками в описании несут width="1%" на table/td — вместе с
   img{max-width:100%} это схлопывало картинку в точку. Снимаем фиксированную ширину,
   картинка показывается в натуральную величину (но не шире контейнера). */
.cat-section-desc table, .text-page #content table{ width:auto !important; max-width:100%; }
.cat-section-desc table td, .text-page #content table td{ width:auto !important; }
/* Внешняя окантовка вокруг картинок в контенте (table[webis_pic]) — убрать рамку
   и отступы. Обычные data-таблицы не трогаем. */
.cat-section-desc table[webis_pic], .text-page #content table[webis_pic]{ border:0 !important; padding:0 !important; }
.cat-section-desc table[webis_pic] td, .text-page #content table[webis_pic] td{ border:0 !important; padding:0 !important; }
.cat-section-desc h1, .cat-section-desc h2, .cat-section-desc h3{
  color:var(--navy-700); font-weight:800; line-height:1.3; margin:20px 0 12px; }
.cat-section-desc h2{ font-size:21px; }
.cat-section-desc h3{ font-size:17px; }
.cat-section-desc p{ margin:0 0 14px; }
.cat-section-desc a{ color:var(--green-600); }
.cat-section-desc a:hover{ text-decoration:underline; }

/* ===== ГЛАВНАЯ / КОРЕНЬ КАТАЛОГА (cat_root_new.htm) — макет index.html =====
   Блоки разделов в 2 колонки: миниатюра + название с (счётчиком) + список
   подкатегорий маркированными ссылками (рекурсивный <ul class="cats">). */
.hm-sections-title{ margin:0 0 22px; font-size:20px; font-weight:800; color:var(--navy-700); letter-spacing:-.01em; }
.hm-cols{ column-count:2; column-gap:56px; }
.hm-block{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:inline-block; width:100%; margin:0 0 34px; }
.hm-block-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.hm-thumb{ display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px;
  flex:0 0 auto; border:1px solid var(--border-subtle); border-radius:12px; background:#fff; color:var(--gray-400);
  overflow:hidden; padding:6px; box-sizing:border-box; }
.hm-thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border:none !important; }
.hm-cattitle{ font-size:16px; font-weight:700; color:var(--navy-700); text-decoration:none; line-height:1.3; }
.hm-cattitle:hover{ color:#2C7E29; }
.hm-count{ color:var(--gray-400); font-weight:500; }

/* список подкатегорий (ul.cats) — маркированные ссылки, как .hm-sublink в макете */
ul.cats{ list-style:none; margin:0; padding:0; }
ul.cats li{ padding:4px 0; font-size:13.5px; line-height:1.45; color:var(--gray-400); }
ul.cats li a{ display:inline-flex; align-items:baseline; gap:9px; color:var(--navy-600); text-decoration:none !important; transition:color .15s; }
ul.cats li a::before{ content:""; width:5px; height:5px; flex:0 0 auto; border-radius:50%;
  background:var(--gray-300); transform:translateY(-2px); transition:background .15s; }
ul.cats li a:hover{ color:#2C7E29; text-decoration:none !important; }
ul.cats li a:hover::before{ background:#3DA63D; }
.hm-brands{ margin-top:28px; }

@media (max-width:900px){
  .hm-cols{ column-count:1; }
}

/* ===== ФИЛЬТР в левом aside — НОВЫЙ ДИЗАЙН =====
   Легаси /css/filter.css даёт #filter_block салатовый фон #DDF3CF, max-width:300,
   min-height:94vh, шрифт CastoRegular и fixed-кнопку — всё это ломает вид в новой
   колонке. Перебиваем под макет (category.html .cat-aside). */
.cat-side-aside #filter_block, .alt-cat-aside #filter_block, #filter_block{
  position:relative !important; background:#fff !important; max-width:none !important;
  width:auto !important; min-height:0 !important; padding:0 !important; margin:18px 0 0 0 !important;
}
#filter_block *{ font-family:var(--font-sans) !important; box-sizing:border-box; }
#filter_block #filter_result{ position:relative !important; margin:0 !important; padding:0 !important; }
#filter_block ul{ margin:0 !important; padding:0 !important; list-style:none !important; text-align:left; }
#filter_block ul li{ padding:0 0 18px 0 !important; margin:0 0 18px 0; border-bottom:1px solid var(--border-subtle); }
#filter_block ul li:last-child{ border-bottom:none; }
#filter_block .filter_tltle{
  font:inherit !important; font-size:15px !important; font-weight:800 !important; line-height:1.3 !important;
  color:var(--navy-700) !important; padding:0 !important; margin:0 0 12px 0 !important;
}
/* чекбоксы: .filter_chk = flex-строка (input + label в одну строку, без переноса) */
#filter_block .filter_chk{ display:flex !important; align-items:center; gap:10px;
  padding:0 !important; margin-bottom:11px; }
#filter_block .filter_chk input[type=checkbox]{ width:18px !important; height:18px !important;
  flex:0 0 auto; accent-color:#3DA63D; cursor:pointer; margin:0 !important; }
#filter_block .filter_chk label{ display:inline !important; margin:0 !important; cursor:pointer;
  font-size:13.5px !important; line-height:1.3; color:var(--navy-600) !important; font-weight:400 !important; }
#filter_block .filter_chk label.disabled, #filter_block .filter_chk input:disabled + label{ color:var(--gray-400) !important; }
/* «Показать все» */
#filter_block .filter_view_other{ position:relative; margin:10px 0 0 0 !important; }
#filter_block .filter_view_other span{ color:#3DA63D !important; border:none !important;
  font-size:13px !important; font-weight:600 !important; cursor:pointer; }
#filter_block .filter_view_other span:hover{ color:#2C7E29 !important; border:none !important; }
#filter_block .filter_view_other span::after{ color:#3DA63D; }
/* диапазон (от/до + ion.rangeSlider) */
#filter_block .filter_range_inputs{ display:flex !important; gap:10px !important; margin-top:14px !important; }
#filter_block .filter_range_inputs input{ width:100% !important; height:40px !important; padding:0 11px !important;
  border:1.5px solid var(--border-default) !important; border-radius:8px !important; text-align:left !important;
  font-size:14px !important; font-weight:600 !important; color:var(--navy-700) !important; }
#filter_block .filter_range_inputs input:focus{ border-color:#3DA63D !important; outline:none; }
#filter_block .filter_range_inputs span{ color:var(--gray-400) !important; }
#filter_block .irs--flat .irs-bar,
#filter_block .irs--flat .irs-from, #filter_block .irs--flat .irs-to, #filter_block .irs--flat .irs-single,
#filter_block .irs--flat .irs-handle > i:first-child{ background:#3DA63D !important; }
/* select раздела */
#filter_block select#filter_select_items{ width:100% !important; height:40px; padding:0 10px;
  border:1.5px solid var(--border-default); border-radius:8px; font-size:13px; background:#fff; margin:0 0 14px 0; }
/* кнопка «Показать товары» — снять fixed, во всю ширину, зелёная (display оставляем JS) */
#filter_block #filter_btn_result{ position:static !important; height:auto !important; background:none !important;
  padding:0 !important; margin:16px 0 0 0 !important; text-align:center; }
#filter_block #filter_btn_result button{ width:100% !important; height:48px !important; background:#3DA63D !important;
  color:#fff !important; border:none !important; border-radius:9px !important; font-size:15px !important;
  font-weight:700 !important; cursor:pointer; margin:0 !important; }
#filter_block #filter_btn_result button:hover{ background:#2C7E29 !important; }
#filter_block #filter_btn_result button:disabled, #filter_block #filter_btn_result button:disabled:hover{ background:var(--gray-400) !important; }
#filter_block #filter_count{ color:#fff !important; margin-left:6px; }
/* «Сбросить форму» */
#filter_block #filter_reset{ height:auto !important; overflow:visible !important; margin-top:10px; }
#filter_block #filter_reset span{ display:flex !important; align-items:center; justify-content:center; width:100%; box-sizing:border-box; height:44px; padding:0 18px; background:#fff !important; color:var(--navy-700) !important; border:1px solid var(--border-default) !important; border-radius:9px !important; font-size:14px !important; font-weight:700 !important; cursor:pointer; }
#filter_block #filter_reset span:hover{ background:var(--gray-50) !important; color:var(--navy-700) !important; border-color:var(--border-default) !important; }
#filter_block #filter_reset span.reset_disabled, #filter_block #filter_reset span.reset_disabled:hover{ opacity:.5; cursor:default; background:#fff !important; }
#filter_block #filter_errors.info{ color:var(--gray-500) !important; background:transparent !important; }
#filter_block #filter_errors.error{ border-radius:6px; }

/* ===== БАЗОВЫЙ КОНТЕЙНЕР — как у шапки (max-width 1440, по центру) ===== */
/* .page-wrap оборачивает крошки+H1+тело на каталожных страницах (display_screen.php),
   выравнивая их по той же базовой ширине, что и шапка. Внутренние блоки — на 100%. */
.page-wrap{ max-width:1440px; margin:0 auto; padding:18px 24px 60px; box-sizing:border-box; }
@media (max-width:760px){ .page-wrap{ padding:14px 14px 96px; } }
#cat_list{ width:100%; box-sizing:border-box; }
#cat_list .cat-outer{ width:100% !important; }
.alt-section-page{ box-sizing:border-box; }

/* ===== ФОН СТРОГО БЕЛЫЙ (фильтр/aside) ===== */
.cat-side-aside, .alt-cat-aside,
#filter_block, #filter_block #filter_result, #filter_block ul, #filter_block li,
#filter_block .div_bound, #filter_block #filter_btn_result{ background:#fff !important; }

/* ===== ТУЛБАР КАТАЛОГА (cat_panel) — НОВЫЙ ДИЗАЙН (sort bar) ===== */
/* JS-хуки сохранены: .cat_panel #sort .update[data-sort], #view .update[data-view]. */
.cat_panel{ display:flex !important; align-items:center; gap:28px; padding:14px 0 !important;
  background:transparent !important; border:none !important; border-radius:0; margin:0 0 18px 0 !important;
  flex-wrap:wrap; box-sizing:border-box; }
.cat_panel .block{ float:none !important; margin:0 !important; padding:0 !important; }
/* 3 части: слева страницы, по центру (шире всех) сортировка, справа вид */
.cat_panel .nav.block{ order:1; font-size:13px; color:var(--gray-500); font-weight:600; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.cat_panel .nav.block > div{ display:inline-flex !important; flex-wrap:wrap; gap:6px; align-items:center; padding:0 !important; }
.cat_panel .nav.block > div > div{ padding:0 !important; margin:0 !important; font-size:0; }
.cat_panel .nav.block a, .cat_panel .nav.block b{
  font-family:var(--font-sans); display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 8px; box-sizing:border-box;
  border-radius:8px; font-size:14px; font-weight:600; line-height:1; }
.cat_panel .nav.block a{ color:var(--navy-700); border:1px solid var(--border-subtle); background:#fff;
  text-decoration:none; transition:border-color .15s, color .15s; }
.cat_panel .nav.block a:hover{ border-color:var(--green-600); color:var(--green-600); }
.cat_panel .nav.block b{ background:var(--green-600); color:#fff; }
/* перебиваем легаси stylesheet.css: #sort{float:right;width:255px}, #sort ul/li{float:left} */
.cat_panel #sort.block{ order:2; flex:1 1 auto; min-width:0; width:auto !important; float:none !important; position:static !important; right:auto !important; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; }
.cat_panel #sort .cat_panel_lbl, .cat_panel #sort > span{ font-size:13px; color:var(--gray-500); font-weight:600; float:none !important; width:auto !important; margin:0 !important; flex:0 0 auto; }
.cat_panel #sort ul{ display:flex; align-items:center; gap:16px; list-style:none; margin:0; padding:0; flex-wrap:wrap; float:none !important; width:auto !important; }
.cat_panel #sort li{ font-size:14px; font-weight:500; color:var(--navy-600); cursor:pointer;
  padding:0; margin:0 !important; background:none; list-style:none; white-space:nowrap; float:none !important; height:auto !important; }
.cat_panel #sort li.selected{ font-weight:800; color:var(--navy-700); }
.cat_panel #view.block{ order:3; margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.cat_panel #view > span{ display:none; }                /* подпись «Вид:» скрыта, как в макете */
.cat_panel #view .update{ width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border-default); background:#fff !important; background-image:none !important;
  color:var(--gray-500); border-radius:8px; cursor:pointer; }
.cat_panel #view .update.selected{ border-color:#3DA63D; background:#EAF6EA !important; color:#2C7E29; }
.cat_panel #view .update svg{ width:18px; height:18px; display:block; }

/* ===== ПЛИТКА (#square_table) — таблица превращается в CSS-grid как в макете ===== */
/* tbody/tr -> display:contents, чтобы td.sq_item стали ячейками grid (repeat(3,1fr)).
   tr.listrow в DOM остаётся (lib1.js биндит его) — display:contents не ломает JS. */
#square_table{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:16px !important;
  border-collapse:separate !important; border-spacing:0 !important; width:100% !important; background:none !important; }
#square_table > tbody{ display:contents !important; }
#square_table tr, #square_table tr.listrow{ display:contents !important; }
/* грид-ячейка = flex, чтобы карточка тянулась на высоту строки -> карточки в ряду
   одинаковой высоты, кнопки «В корзину» на одном уровне */
#square_table > tbody > tr > td.sq_item{ display:flex !important; padding:0 !important; border:none !important;
  background:none !important; width:auto !important; }
#square_table div.sq_item{ background:#fff !important; width:100% !important; margin:0 !important; }
#square_table div.sq_item > form{ flex:1 1 auto; display:flex; flex-direction:column; }
#square_table .interlaced, #square_table tr.interlaced{ display:none !important; }
@media (max-width:900px){ #square_table{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:560px){ #square_table{ grid-template-columns:1fr !important; } }

/* ===== КРОШКИ + H1 — как в макете ===== */
#breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--gray-500); margin:0 0 14px 0; line-height:1.4; }
#breadcrumbs a, #breadcrumbs a.a1{ color:var(--gray-600) !important; text-decoration:none; font-weight:400; }
#breadcrumbs a:hover{ text-decoration:underline; }
#breadcrumbs .bc-sep{ color:var(--gray-300); }

/* ====== Бейджи товара (Хит/Распродажа/Акция/Новинка) — CSS вместо картинок ====== */
.cat-badge{ display:inline-block; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:800;
  line-height:1.3; letter-spacing:.01em; white-space:nowrap; color:#fff;
  box-shadow:0 2px 6px -2px rgba(16,36,59,.35); }
.cat-badge--hit{ background:#63b53a; }                 /* Хит — зелёный (как .cat_special_button.hit) */
.cat-badge--sale{ background:#c54a21; }                /* Распродажа — кирпичный (.sale) */
.cat-badge--action{ background:#abde09; }              /* Акция — лайм (.act) */
.cat-badge--new{ background:#e76700; }                 /* Новинка — оранжевый (.neww) */

/* SweetAlert (вопрос про корзину при входе) должен быть ВЫШЕ окна fancybox
   (у fancybox z-index до 99999), иначе диалог прячется за окном входа. */
.swal-overlay{ z-index:100050 !important; }
.swal-modal{ z-index:100051 !important; }

/* Телефон в шапке: код города (499) не затемнять — наследует цвет/размер номера */
.hdr-phone .code{ color:inherit !important; font-size:inherit !important; font-weight:inherit !important; }
/* iOS Safari может обернуть распознанный номер в свой <a> (синий) — держим белым */
.hdr-phone a{ color:inherit !important; text-decoration:none !important; }

/* Выпадающие меню в верхней (тёмной) строке шапки — «О нас», «Получение и оплата» */
.hdr-util-menu{ position:relative; display:inline-flex; align-items:center; }
.hdr-util-trigger{ -webkit-appearance:none; appearance:none; background:none; border:0; margin:0; padding:0; font:inherit; font-size:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:rgba(255,255,255,.62); line-height:1; }
.hdr-util-menu:hover .hdr-util-trigger{ color:#fff; }
.hdr-util-trigger svg{ width:12px; height:12px; transition:transform .15s ease; }
.hdr-util-menu:hover .hdr-util-trigger svg{ transform:rotate(180deg); }
.hdr-util-dd{ position:absolute; top:calc(100% + 9px); left:-10px; min-width:236px; background:#fff; border-radius:12px; box-shadow:0 20px 46px -16px rgba(16,26,44,.45); padding:8px; display:none; flex-direction:column; z-index:70; }
.hdr-util-menu:hover .hdr-util-dd{ display:flex; }
/* невидимый «мостик», чтобы курсор не терял меню при переходе к выпадашке */
.hdr-util-dd::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.hdr-util-dd a{ display:block; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--navy-700) !important; text-decoration:none !important; white-space:nowrap; }
.hdr-util-dd a:hover{ background:var(--gray-50); color:#2C7E29 !important; }
/* «Контакты» (ссылка в верхней строке) и e-mail после телефона */
.hdr-util-link{ color:rgba(255,255,255,.62); text-decoration:none; }
.hdr-util-link:hover{ color:#fff; }
.hdr-email{ color:rgba(255,255,255,.82); text-decoration:none; font-weight:600; white-space:nowrap; }
.hdr-email:hover{ color:#fff; text-decoration:underline; }

/* ====== Плавающая кнопка «Фильтр» + панель (десктоп) ====== */
/* Когда фильтр в разделе уезжает вверх при прокрутке списка, показываем кнопку,
   по которой фильтр открывается панелью под шапкой (на текущем уровне). */
.alt-filter-fab{
  display:none; position:fixed; left:24px; top:135px; z-index:60;
  align-items:center; gap:8px; padding:10px 16px;
  background:#3DA63D; color:#fff; border:none; border-radius:8px;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(16,26,44,.45);
}
.alt-filter-fab.is-visible, .alt-filter-fab.is-active{ display:inline-flex; }
.alt-filter-fab.is-active{ background:var(--navy-700); }
.alt-filter-fab svg{ width:18px; height:18px; flex:0 0 auto; }
.alt-cat-aside.is-floating, .cat-side-aside.is-floating{
  position:fixed !important; left:24px; top:182px; z-index:61;
  width:320px !important; max-width:calc(100vw - 48px);
  max-height:calc(100vh - 210px); overflow:auto;
  background:#fff; border:1px solid var(--border-subtle); border-radius:12px;
  box-shadow:0 20px 55px -12px rgba(16,26,44,.5); padding:16px;
}
@media (max-width:980px){
  .alt-filter-fab{ display:none !important; }
  .alt-cat-aside.is-floating, .cat-side-aside.is-floating{ position:static !important; width:auto !important; box-shadow:none; border:0; padding:0; max-height:none; }
}
.cat-h1-row{ display:flex; align-items:baseline; gap:14px; margin:0 0 22px 0; flex-wrap:wrap; }
.cat-h1-row h1{ margin:0 !important; font-size:27px !important; font-weight:800 !important; color:var(--navy-700) !important; line-height:1.2 !important; letter-spacing:-.01em; }
.cat-h1-count{ font-size:15px; color:var(--gray-500); font-weight:500; white-space:nowrap; }

/* ===== ФИЛЬТРЫ НА МОБИЛЕ — кнопка + фуллскрин-оверлей (как в макете, ≤760px) ===== */
/* Кнопка «Фильтры» (вставляется JS в начало main-колонки). На десктопе скрыта. */
.cat-filters-btn{ display:none; align-items:center; justify-content:center; gap:9px; width:100%;
  height:48px; margin:0 0 14px 0; background:#fff; color:var(--navy-700);
  border:1.5px solid var(--border-default); border-radius:10px; font-family:var(--font-sans);
  font-size:15px; font-weight:700; cursor:pointer; }
.cat-filters-btn svg{ width:19px; height:19px; }
/* Шапка фильтра (Фильтры + ×) — видна только в открытом оверлее на мобиле. */
.cat-aside-head{ display:none; position:sticky; top:0; z-index:3; background:#fff;
  align-items:center; justify-content:space-between; padding:14px 0;
  border-bottom:1px solid var(--border-subtle); margin-bottom:16px; }
.cat-aside-title{ font-size:18px; font-weight:800; color:var(--navy-700); }
.cat-aside-close{ display:inline-flex; align-items:center; justify-content:center; width:40px;
  height:40px; color:var(--navy-600); cursor:pointer; font-size:28px; line-height:1; }
@media (max-width:760px){
  .cat-side-aside, .alt-cat-aside{ display:none !important; }
  .cat-side-aside.is-open, .alt-cat-aside.is-open{ display:block !important; position:fixed !important;
    inset:0 !important; z-index:9999 !important; width:auto !important; max-width:none !important;
    background:#fff !important; overflow-y:auto !important; padding:0 16px 28px !important;
    margin:0 !important; -webkit-overflow-scrolling:touch; }
  .cat-side-aside.is-open .cat-aside-head, .alt-cat-aside.is-open .cat-aside-head{ display:flex !important; }
  .cat-filters-btn{ display:flex !important; }
}

/* ===== МОБИЛА: viewport=device-width включён (display_screen.php). Гасим
   горизонтальный скролл от широких легаси-элементов (как в макете). ===== */
html, body{ overflow-x:clip; max-width:100%; }

/* ===== АДАПТИВ КАТАЛОГА (≤760px) — как в макете ===== */
@media (max-width:760px){
  /* строка товара на мобиле: одна колонка — картинка крупнее сверху,
     дальше название/характеристики и цена/кнопка ниже во всю ширину */
  .cat-row{ grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:'img' 'info' 'buy' !important; gap:14px !important; padding:18px 0 !important; }
  .cat-row-img{ grid-area:img !important; width:170px; max-width:55%; }
  .cat-row-info{ grid-area:info !important; }
  .cat-row-buy{ grid-area:buy !important; margin-top:6px; }
  /* сердечко-вишлист обратно к верху карточки */
  .cat-row-buy .wishlist{ top:0 !important; right:0 !important; }
  /* тулбар: перенос на мобиле, без обрезки */
  .cat_panel{ gap:10px 14px !important; }
  .cat_panel #sort.block{ flex-wrap:wrap; }
  .cat_panel #sort ul{ flex-wrap:wrap; }
  .cat_panel .nav.block{ order:3; width:100%; }
  /* плитка: 2 колонки */
  #square_table{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:430px){
  #square_table{ grid-template-columns:1fr !important; }
}

/* ===== Каркас страницы (бывшая table#contact -> div/flex) =====
   #contact теперь div.cat-shell. На главной (.is-index) — две колонки через flex
   (контент + правый сайдбар), на остальных страницах (карточка/каталог/внутр.) —
   один столбец во всю ширину. Padding перенесён с легаси-<td> на обёртки. */
#contact.cat-shell{ width:100%; }
.cat-notice-cell{ padding:0 4px 0 14px; }
.cat-main-row{ padding:0 15px 0 22px; display:flow-root; }
/* Главная: контент в общий контейнер сайта (как .page-wrap / шапка 1440px),
   а не во всю ширину окна. Правой колонки на главной больше нет → один столбец. */
.cat-main-row.is-index{ display:block; max-width:1440px; margin:0 auto; padding:18px 24px 60px; box-sizing:border-box; }
.cat-main-row.is-index > .cat-main-col{ flex:1 1 auto; min-width:0; }
.cat-main-row.is-index > .cat-right-col{ flex:0 0 260px; max-width:260px; }
.cat-content-table{ width:100%; }
#rightmenu .rm-list{ width:100%; }
#rightmenu .rm-banners{ width:100%; }

/* ===== МОБИЛА: каркас в один столбец + легаси .cat-outer -> блок ===== */
@media (max-width:980px){
  .cat-main-row.is-index{ display:block; }
}
@media (max-width:760px){
  .cat-main-row{ padding-left:10px !important; padding-right:10px !important; box-sizing:border-box; }
  .cat-notice-cell{ padding-left:10px !important; padding-right:10px !important; box-sizing:border-box; }
  .cat-outer, .cat-outer > tbody, .cat-outer > tbody > tr, .cat-outer > tbody > tr > td{
    display:block !important; width:100% !important; padding:0 !important; box-sizing:border-box; }
}

/* ===== МОБИЛА (≤760px): список и плитка — фикс ширины ===== */
@media (max-width:760px){
  /* Список #list_table (table-layout:auto) распирал страницу. table-layout:fixed
     + width:100% заставляет таблицу держать ширину вьюпорта; одна колонка = 100%,
     .cat-row внутри уже адаптивна (96px+1fr). НЕ ломаем грид строки display:block. */
  #list_table{ table-layout:fixed !important; width:100% !important; }
  #list_table > tbody > tr > td{ width:auto !important; }
  /* Плитка на мобиле — ДВЕ колонки (как в макете). */
  #square_table{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ===== ПЛИТКА/СПИСОК: сжимаемые колонки + перенос длинных слов ===== */
/* repeat(...,1fr) не даёт колонке быть уже min-content -> длинные слова
   (неэкранированный, 4x2xAWG24) распирают грид. minmax(0,1fr) + overflow-wrap. */
#square_table{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
#square_table .sq_item, #square_table > tbody > tr > td.sq_item{
  min-width:0 !important; overflow-wrap:anywhere; word-break:break-word; }
@media (max-width:900px){ #square_table{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:760px){ #square_table{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
/* список: инфо-колонка ломает длинные слова, не распирает строку */
#list_table .cat-row-info, #list_table .cat-row-info *{ min-width:0; overflow-wrap:anywhere; word-break:break-word; }

/* ===== МОБИЛЬНЫЙ НИЖНИЙ ТАБ-БАР (новый дизайн) — на весь сайт, виден ≤760px ===== */
.pc-tabbar{ display:none; }
.pc-tabbar a{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1;
  text-decoration:none; color:var(--gray-500); font-size:10px; font-weight:600; }
.pc-tabbar .pc-tabbar-ic{ display:inline-flex; font-size:22px; }
.pc-tabbar .pc-tabbar-ic svg{ width:22px; height:22px; }
@media (max-width:760px){
  .pc-tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:61; background:#fff;
    border-top:1px solid var(--border-subtle); box-shadow:0 -2px 10px rgba(16,26,44,.08);
    padding:7px 4px 9px; align-items:center; justify-content:space-around; }
  body{ padding-bottom:64px; }   /* чтобы контент не прятался за баром */
}

/* бейдж количества на «Корзина» в таб-баре */
.pc-tabbar .js-tabbar-cart{ position:absolute; top:-4px; left:50%; transform:translateX(8px);
  min-width:16px; height:16px; padding:0 4px; background:#3DA63D; color:#fff; border-radius:999px;
  font-size:10px; font-weight:700; align-items:center; justify-content:center; line-height:1; }

/* бейдж количества на «Избранное» в таб-баре (на иконке, .pc-tabbar-ic = position:relative) */
.pc-tabbar .js-tabbar-wishlist{ position:absolute; top:-6px; left:100%; margin-left:-9px;
  min-width:16px; height:16px; padding:0 4px; background:#3DA63D; color:#fff; border-radius:999px;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }

/* ===== КАРТОЧКА ТОВАРА — дизайн-пасс (поверх легаси-структуры, скоуп .item2) ===== */
.item2{ font-family:var(--font-sans); color:var(--navy-700); }
/* кнопки «В корзину»/«Купить в один клик» (скоуп .item2 — попап не трогаем) */
.item2 .button{ background:#3DA63D !important; color:#fff !important; border:none !important;
  border-radius:9px !important; min-height:46px; font-family:var(--font-sans) !important; font-size:15px !important;
  font-weight:700 !important; cursor:pointer; padding:0 18px; }
.item2 .button:hover{ background:#2C7E29 !important; }
.item2 .button2{ background:#fff !important; color:var(--navy-700) !important;
  border:1.5px solid var(--border-default) !important; border-radius:9px !important; min-height:46px; font-weight:700 !important; }
/* степпер количества */
.item2 .qty_minus, .item2 .qty_plus{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:40px; border:1.5px solid var(--border-default); background:#fff; color:var(--navy-600);
  font-size:18px; cursor:pointer; user-select:none; vertical-align:middle; }
.item2 .qty_minus{ border-radius:8px 0 0 8px; }
.item2 .qty_plus{ border-radius:0 8px 8px 0; }
.item2 input#qty.qty{ width:50px; height:40px; text-align:center; border:1.5px solid var(--border-default);
  border-left:none; border-right:none; font-size:15px; font-weight:700; color:var(--navy-700); vertical-align:middle; box-sizing:border-box; }
/* фото товара */
.item2 td.style1 img, .item2 .cat_list_img img{ max-width:100%; height:auto; }
/* табы под дизайн */
.tabs .tabs__caption{ display:flex !important; flex-wrap:wrap; gap:6px 8px; list-style:none; padding:0 !important;
  margin:0 0 18px 0 !important; border-bottom:1px solid var(--border-subtle); }
.tabs .tabs__caption li{ padding:10px 16px; font-size:15px; font-weight:600; color:var(--gray-600); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; list-style:none; }
.tabs .tabs__caption li.active{ color:var(--navy-700); font-weight:800; border-bottom-color:#3DA63D; }
.tabs .tabs__content{ font-size:14px; line-height:1.6; color:var(--navy-600); }
.tabs .tabs__content h2, .tabs .tabs__content h3{ color:var(--navy-700); }
/* адаптив: верхние 3 колонки карточки в столбик на мобиле (внутренние таблицы не трогаем) */
@media (max-width:760px){
  .item2 > table > tbody > tr > td{ display:block !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }
  .item2 td.valigntop[style*="padding-left: 25px"]{ padding-left:0 !important; }
}

/* ============================================================
   КАРТОЧКА ТОВАРА (новый дизайн, под design-new/product.html)
   Все классы pc-* скоупятся под .pc-card / соседние секции.
   ============================================================ */

/* верх: 3 колонки галерея / инфо / покупка */
.pc-top{
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr) 360px;
  gap:28px;
  align-items:start;
  margin-bottom:32px;
}

/* --- ГАЛЕРЕЯ --- */
.pc-gallery{ min-width:0; }
.pc-gallery-main{
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio:1/1;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:hidden;
  box-sizing:border-box;
}
.pc-gallery-main img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
/* превью-галерея — маленькие квадраты 60px */
.pc-gallery-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  max-width:440px;
}
.pc-gallery-thumbs img,
.pc-gallery-thumbs a{
  width:60px;
  height:60px;
  object-fit:contain;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  background:#fff;
  padding:4px;
  box-sizing:border-box;
  cursor:pointer;
}
.pc-gallery-thumbs a img{ width:100%; height:100%; border:0; padding:0; }

/* --- ИНФО --- */
.pc-info{ min-width:0; font-size:14px; color:var(--navy-600); }
.pc-meta-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.pc-art-label{ font-size:14px; color:var(--gray-600); }
.pc-art-val{ font-weight:700; color:var(--navy-700); }
.pc-ai-view{ margin-left:auto; }
.pc-brand-row{ margin:6px 0 12px; }
.pc-params{ margin-top:14px; }
.pc-params td{ padding:4px 6px 4px 0; }
.pc-params select{
  border:1.5px solid var(--border-default);
  border-radius:8px;
  height:38px;
  padding:0 10px;
  font-family:inherit;
  font-size:14px;
}

/* --- ПОКУПКА (sticky карточка, дизайн по макету product.html ~1156-1193) --- */
.pc-card .pc-buy{
  position:sticky;
  top:16px;
  border:1.5px solid var(--border-subtle);
  border-radius:14px;
  padding:20px;
  box-shadow:var(--shadow-md);
  font-size:14px;
}
.pc-card .pc-buy form{ margin:0; }

/* цена */
.pc-card .pc-buy .pc-price-block{ margin-bottom:4px; }
.pc-card .pc-buy .pc-price-main{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.pc-card .pc-buy .pc-price-now{
  font-size:34px;
  font-weight:800;
  color:var(--navy-700);
  letter-spacing:-.01em;
  line-height:1.1;
}
.pc-card .pc-buy .pc-price-curr{
  font-size:20px;
  font-weight:800;
  color:var(--navy-700);
}
.pc-card .pc-buy .pc-price-pack{
  font-size:13px;
  color:var(--gray-600);
  font-weight:400;
}
.pc-card .pc-buy .pc-price-per{
  margin-top:4px;
  font-size:14px;
  color:var(--navy-600);
}
.pc-card .pc-buy .oldprice{
  display:inline-block;
  font-size:15px;
  color:var(--gray-500);
  text-decoration:line-through;
  margin-right:4px;
}
.pc-card .pc-buy .pc-yourprice-label{ margin-top:8px; }
.pc-card .pc-buy .pc-yourprice-label .style5{ font-weight:700; color:var(--green-600); }
.pc-card .pc-buy .pc-yourprice .pc-price-now,
.pc-card .pc-buy .pc-yourprice .pc-price-curr{ color:#2C7E29; }
.pc-card .pc-buy .pc-nds{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  color:var(--gray-500);
  margin-top:4px;
}

/* наличие — зелёная плашка */
.pc-card .pc-buy .pc-stock{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  padding:0;
  background:none;
}
.pc-card .pc-buy .pc-stock-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--green-500);
  flex:0 0 auto;
}
.pc-card .pc-buy .pc-stock-text{
  font-size:13px; font-weight:700; color:var(--green-600);
}
.pc-card .pc-buy .pc-stock-text .style5{ font-weight:700; color:var(--green-600); }
/* нет наличия (оба Remains=0): без зелёной точки, текст серый */
.pc-card .pc-buy .pc-stock-out .pc-stock-dot{ display:none; }
.pc-card .pc-buy .pc-stock-out .pc-stock-text{ color:var(--gray-500); }
.pc-card .pc-buy .pc-stock-sale{ font-size:12px; color:var(--gray-600); }
.pc-card .pc-buy .pc-stock-sale:empty{ display:none; }

/* количество (степпер) */
.pc-card .pc-buy .pc-qty-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0;
}
.pc-card .pc-buy .pc-stepper{
  display:inline-flex;
  align-items:center;
  height:48px;
  border:1.5px solid var(--border-default);
  border-radius:8px;
  overflow:hidden;
}
.pc-card .pc-buy .pc-stepper .qty_minus,
.pc-card .pc-buy .pc-stepper .qty_plus{
  width:42px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--navy-600);
  cursor:pointer; user-select:none;
  background:#fff;
}
.pc-card .pc-buy .pc-stepper .qty_arr{
  width:56px; height:48px;
  border:none;
  border-left:1.5px solid var(--border-subtle);
  border-right:1.5px solid var(--border-subtle);
  text-align:center;
  font-size:15px; font-weight:700; color:var(--navy-700);
  outline:none;
}
.pc-card .pc-buy .pc-unit{ color:var(--gray-600); }
.pc-card .pc-buy .pc-multiples-note{ font-size:12px; color:var(--gray-500); width:100%; }

/* кнопки */
.pc-card .pc-buy .pc-btns{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.pc-card .pc-buy .pc-btn-cart{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  height:52px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#3DA63D;
  color:#fff;
  border:none;
  border-radius:9px;
  font-family:inherit;
  font-size:17px; font-weight:700;
  cursor:pointer;
}
.pc-card .pc-buy .pc-btn-cart::before{
  content:"";
  width:21px; height:21px;
  flex:0 0 auto;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}
.pc-card .pc-buy .pc-btn-cart:hover{ background:#2C7E29; }
.pc-card .pc-buy .pc-btn-oneclick{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  height:48px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  color:var(--navy-700);
  border:1.5px solid var(--border-default);
  border-radius:9px;
  font-family:inherit;
  font-size:15px; font-weight:700;
  cursor:pointer;
}
.pc-card .pc-buy .pc-btn-oneclick:hover{ border-color:var(--navy-700); }

/* бонусы */
.pc-card .pc-buy .pc-bonus{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  color:var(--navy-600);
}
.pc-card .pc-buy .pc-bonus:empty{ display:none; }
.pc-card .pc-buy .pc-bonus font{ color:var(--navy-700) !important; font-weight:700; }

/* недоступен */
.pc-card .pc-buy .pc-unavailable{ margin-top:16px; color:var(--gray-600); }
.pc-card .pc-buy .pc-unavailable-title{ font-size:16px; }
.pc-card .pc-buy .pc-btn-analog{ width:100% !important; float:none !important; cursor:pointer; }

/* доставка / самовывоз (реальные даты движка из kolR/Vrem) */
.pc-card .pc-buy .pc-delivery{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border-subtle);
  font-size:13px;
  color:var(--gray-600);
  line-height:1.5;
}
.pc-card .pc-buy .pc-delivery table{ border:0; }
.pc-card .pc-buy .pc-delivery td{ padding:2px 0; font-size:13px; color:var(--gray-600); }
.pc-card .pc-buy .pc-delivery td:first-child{ font-weight:700; color:var(--navy-700); }

/* подвал: упаковка + избранное */
.pc-card .pc-buy .pc-buy-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  font-size:13px;
  color:var(--gray-600);
}
.pc-card .pc-buy .pc-wishlist{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--navy-600);
  cursor:pointer;
}

/* --- STICKY-НАВИГАЦИЯ --- */
.pc-stickynav{
  position:sticky;
  top:123px;            /* прилипает под sticky-шапкой (.cat-hdr-sticky ≈ 123px), а не под неё */
  z-index:40;
  display:flex;
  gap:28px;
  background:#fff;
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 6px 18px -10px rgba(16,26,44,.25);
  overflow-x:auto;
  overflow-y:hidden;   /* overflow-x:auto делал y тоже auto → лишний вертикальный скролл от border/margin */
  margin-bottom:32px;
}
.pc-stickynav a{
  flex:0 0 auto;
  padding:13px 2px;
  font-size:13.5px;
  font-weight:600;
  color:var(--gray-600);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.pc-stickynav a:hover{ color:var(--navy-700); }
.pc-stickynav a.active{
  color:var(--navy-700);
  font-weight:800;
  border-bottom-color:#3DA63D;
}

/* --- СЕКЦИИ --- */
.pc-section{
  scroll-margin-top:170px;   /* шапка (~123px) + липкие вкладки (~46px), чтобы якорь не прятался */
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--border-subtle);
}
.pc-content-main > .pc-section:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.pc-h2{
  margin:0 0 14px;
  font-size:20px;
  font-weight:800;
  color:var(--navy-700);
}
.pc-section-body{
  font-size:15px;
  line-height:1.65;
  color:var(--navy-600);
}
.pc-section-body h2,
.pc-section-body h3{ color:var(--navy-700); }

/* дисклеймер + бренды */
.pc-disclaimer{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--border-subtle);
  font-size:12px;
  color:var(--gray-500);
}

/* --- МОБИЛЬНЫЙ БАР ПОКУПКИ --- */
.pc-mobilebar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:64px; /* над глобальным .pc-tabbar */
  z-index:60;
  background:#fff;
  border-top:1px solid var(--border-subtle);
  box-shadow:0 -4px 16px rgba(16,26,44,.12);
  padding:10px 16px;
  align-items:center;
  gap:14px;
}
.pc-mobilebar-price{ display:flex; flex-direction:column; }
.pc-mobilebar-now{ font-size:20px; font-weight:800; color:var(--navy-700); line-height:1.1; }
.pc-mobilebar-stock{ font-size:11px; color:var(--green-600); font-weight:700; }
.pc-mobilebar-btn{
  margin-left:auto;
  height:48px; padding:0 22px;
  background:#3DA63D; color:#fff;
  border:none; border-radius:9px;
  font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer;
}

/* --- АДАПТИВ (<=760px) --- */
@media (max-width:760px){
  .pc-top{ grid-template-columns:1fr; gap:20px; }
  .pc-gallery-main{ max-width:100%; }
  .pc-gallery-thumbs{ max-width:100%; }
  .pc-buy{ position:static; box-shadow:none; }
  .pc-stickynav{ position:static; box-shadow:none; }
  .pc-mobilebar{ display:flex; }
  /* отступ снизу под мобильный бар покупки + глобальный таб-бар */
  .pc-card{ padding-bottom:140px; }
}

/* ====================================================================== */
/* НОВЫЕ БЛОКИ КАРТОЧКИ (заглушки по макету design-new/decoded/product.html) */
/* Все классы скоупятся под .pc-card; бренд-зелёный #3DA63D                 */
/* ====================================================================== */

/* --- звёздный рейтинг в подзаголовке (макет ~1103-1116) --- */
.pc-card .pc-rating-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.pc-card .pc-stars{
  display:inline-flex;
  gap:1px;
  color:#FFC400;
  font-size:16px;
  line-height:1;
}
.pc-card .pc-rating-val{
  color:var(--navy-700);
  font-size:14px;
}
.pc-card .pc-rating-link{
  color:#3DA63D;
  text-decoration:none;
  font-size:14px;
}
.pc-card .pc-rating-link:hover{ text-decoration:underline; }

/* --- Преимущества (макет ~1241) --- */
.pc-card .pc-adv-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:760px;
}
.pc-card .pc-adv{
  display:flex;
  gap:12px;
}
.pc-card .pc-adv-dot{
  flex:0 0 auto;
  margin-top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#3DA63D;
}
.pc-card .pc-adv-text{
  font-size:14.5px;
  line-height:1.6;
  color:var(--navy-600);
}
.pc-card .pc-adv-text b{ color:var(--navy-700); }

/* --- Обзор от AI (макет ~1285) --- */
.pc-card .pc-ai-card{
  border:1px solid #CFE6FB;
  background:linear-gradient(180deg,#F5FAFF 0%,#fff 100%);
  border-radius:14px;
  padding:22px 24px;
}
.pc-card .pc-ai-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.pc-card .pc-ai-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:#1E73D6;
  color:#fff;
  border-radius:9px;
  font-size:18px;
}
.pc-card .pc-ai-title{
  font-size:18px;
  font-weight:800;
  color:var(--navy-700);
}
.pc-card .pc-ai-badge{
  font-size:11px;
  color:var(--gray-500);
  background:#fff;
  border:1px solid var(--border-subtle);
  padding:4px 9px;
  border-radius:999px;
}
.pc-card .pc-ai-summary{
  margin:0 0 16px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--navy-600);
}
.pc-card .pc-ai-sub{
  margin:0 0 6px;
  font-size:14px;
  font-weight:800;
  color:var(--navy-700);
}
.pc-card .pc-ai-body{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.65;
  color:var(--navy-600);
}
.pc-card .pc-ai-body:last-of-type{ margin-bottom:0; }
.pc-card .pc-ai-body b{ color:var(--navy-700); }
.pc-card .pc-ai-note{
  margin-top:14px;
  font-size:11px;
  color:var(--gray-400);
  line-height:1.4;
}

/* --- Этот товар в подборках (макет ~1418) --- */
.pc-card .pc-chips{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.pc-card .pc-chip{
  display:block;
  padding:14px 16px;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  text-decoration:none;
  background:#fff;
}
.pc-card .pc-chip:hover{
  border-color:#3DA63D;
  box-shadow:0 6px 18px -10px rgba(16,26,44,.25);
}
.pc-card .pc-chip-title{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--navy-700);
  line-height:1.3;
}
.pc-card .pc-chip-count{
  display:block;
  font-size:12.5px;
  color:var(--gray-500);
  margin-top:5px;
}

/* ====================================================================== */
/* 2-КОЛОНОЧНЫЙ КОНТЕНТ + ПРАВЫЙ САЙДБАР (макет product.html ~1219,1298-1322) */
/* ====================================================================== */
.pc-card .pc-content{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:40px;
  align-items:start;
  margin-top:32px;
}
.pc-card .pc-content-main{ min-width:0; }

/* sticky-сайдбар */
.pc-card .pc-sidebar{
  position:sticky;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.pc-card .pc-side-card{
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:16px 18px;
  background:#fff;
}
/* секции внутри единой карточки сайдбара: разделитель + подзаголовок */
.pc-card .pc-side-sec + .pc-side-sec{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border-subtle); }
.pc-card .pc-side-sec .pc-side-title, .pc-card .pc-side-sec .pc-side-guarantee{ margin-bottom:2px; }
.pc-card .pc-side-subtitle{ font-size:12px; color:var(--gray-500); margin:0 0 12px; line-height:1.35; }
.pc-card .pc-side-title{
  font-size:14px;
  font-weight:800;
  color:var(--navy-700);
  margin-bottom:12px;
}
.pc-card .pc-side-guarantee{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--green-600);
  font-size:14px;
  font-weight:700;
  margin-bottom:14px;
}
.pc-card .pc-side-guarantee::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--green-50);
  color:var(--green-600);
  font-size:13px;
  font-weight:800;
}
.pc-card .pc-side-brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pc-card .pc-side-brand-name{
  font-size:16px;
  font-weight:800;
  color:var(--navy-700);
}
.pc-card .pc-side-brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:var(--gray-50);
  border-radius:8px;
  color:var(--green-600);
  font-size:20px;
  font-weight:800;
  flex:0 0 auto;
}

/* Документация: ссылки на файлы в стиле макета (иконка-файл слева, "PDF" справа) */
.pc-card .pc-side-docs a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  color:var(--navy-600);
  text-decoration:none;
  font-size:13.5px;
  border-top:1px solid var(--border-subtle);
}
.pc-card .pc-side-docs a:first-of-type{ border-top:0; }
.pc-card .pc-side-docs a::before{
  content:"\1F4C4"; /* 📄 */
  flex:0 0 auto;
  font-size:16px;
}
.pc-card .pc-side-docs a:hover{ color:var(--blue-500); }
/* движок может отдавать свою таблицу/обёртку — не ломаем её */
.pc-card .pc-side-docs table{ width:100%; border-collapse:collapse; }
.pc-card .pc-side-docs .tabs__content{ display:block; }

/* Информация об упаковке */
.pc-card .pc-side-pack-row{
  font-size:13px;
  color:var(--gray-600);
  padding:5px 0;
  line-height:1.5;
}
.pc-card .pc-side-pack-row b{ color:var(--navy-700); }
.pc-card .pc-side-pack-misc:empty{ display:none; }
.pc-card .pc-side-pack-misc br:first-child{ display:none; }

/* ====================================================================== */
/* СРЕДНЯЯ ИНФО-КОЛОНКА: короткое описание + ключевые характеристики (макет ~1146-1153) */
/* ====================================================================== */
.pc-card .pc-info-block{ margin:14px 0 4px; }
.pc-card .pc-info-desc{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.55;
  color:var(--navy-600);
}
/* Переключатель вариантов товара (модификации по одной "оси", напр. Сечение жилы) */
.pc-card .pc-variants{ margin:0 0 18px; }
.pc-card .pc-variants-title{
  font-size:13px;
  font-weight:700;
  color:var(--navy-700);
  margin-bottom:10px;
}
.pc-card .pc-variants-title span{ color:#3DA63D; }
.pc-card .pc-variants-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pc-card .pc-variant{
  padding:9px 15px;
  border:1.5px solid var(--border-default);
  background:#fff;
  color:var(--navy-600);
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:border-color .15s, color .15s;
}
.pc-card a.pc-variant:hover{ border-color:#3DA63D; color:#2C7E29; }
.pc-card .pc-variant-cur{
  border-color:#3DA63D;
  background:#3DA63D;
  color:#fff;
  font-weight:700;
  cursor:default;
}
.pc-card .pc-info-keytitle{
  font-size:13px;
  font-weight:700;
  color:var(--navy-700);
  margin-bottom:6px;
}
.pc-card .pc-info-keylist{
  font-size:14px;
  color:var(--navy-600);
  margin-bottom:12px;
}
.pc-card .pc-info-keylist table{ width:100%; border-collapse:collapse; }
.pc-card .pc-info-keylist td{ padding:6px 0; border-bottom:1px dashed var(--border-subtle); }
.pc-card .pc-info-allspecs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--navy-700);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}
.pc-card .pc-info-allspecs:hover{ text-decoration:underline; }

/* ====================================================================== */
/* Артикул: тултип кнопки копирования не должен обрезаться/наезжать (задача 4) */
/* ====================================================================== */
.pc-card .pc-meta-row{ overflow:visible; }
.pc-card .pc-art-val{ overflow:visible; }
.pc-card .pc-art-val nobr,
.pc-card .pc-art-val #copyText{ display:inline; }
.pc-card .copy-btn{ position:relative; flex:0 0 auto; }
.pc-card .copy-ok{
  white-space:nowrap;
  flex:0 0 auto;
}

/* ====================================================================== */
/* Галерея: маленькие превью 60px, скрыть синюю текстовую подпись под фото (задача 3) */
/* ====================================================================== */
/* убрать табличную обёртку/каркас jcarousel-подписи, оставить только превью */
.pc-card .pc-gallery-thumbs table{ border:0; margin:0; }
.pc-card .pc-gallery-thumbs ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pc-card .pc-gallery-thumbs li{ list-style:none; }
.pc-card .pc-gallery-thumbs li a{
  width:60px;
  height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pc-card .pc-gallery-thumbs li a img{ width:100%; height:100%; object-fit:contain; }
/* спрятать текстовую подпись-ссылку под главным фото (текстовый узел внутри .pc-gallery-main) */
.pc-card .pc-gallery-main > a[rel^="lightbox"]{ font-size:0; line-height:0; }
.pc-card .pc-gallery-main > a[rel^="lightbox"] img{ font-size:0; }

/* ====================================================================== */
/* АДАПТИВ для нового грида (<=760px) */
/* ====================================================================== */
@media (max-width:760px){
  .pc-card .pc-content{ grid-template-columns:1fr; gap:24px; }
  .pc-card .pc-sidebar{ position:static; }
}

/* Ключевые характеристики в инфо-колонке карточки (из ETIM «Технические характеристики») */
.pc-card .pc-keyrow{ display:flex; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px dashed var(--border-subtle); font-size:14px; }
.pc-card .pc-keyrow-l{ color:var(--gray-600); }
.pc-card .pc-keyrow-v{ font-weight:600; color:var(--navy-700); text-align:right; }

/* Таблица характеристик (zzz) в карточке — дизайн макета (две колонки) */
.pc-card .pc-spec-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pc-card .pc-spec-table tr{ border-bottom:1px solid var(--border-subtle); }
.pc-card .pc-spec-table td{ padding:11px 16px; vertical-align:top; }
.pc-card .pc-spec-table .pc-spec-k{ color:var(--gray-600); width:55%; }
.pc-card .pc-spec-table .pc-spec-v{ color:var(--navy-700); font-weight:600; }

/* Классификация ETIM — дизайн макета (бордерный блок, строки 1fr/220px) */
.pc-card .pc-etim-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pc-card .pc-etim-badge{ font-size:11px; font-weight:700; color:#0F9D9D; background:var(--gray-50);
  border:1px solid var(--border-subtle); padding:4px 9px; border-radius:6px; letter-spacing:.03em; }
.pc-card .pc-etim-box{ border:1px solid var(--border-subtle); border-radius:12px; overflow:hidden; }
.pc-card .pc-etim{ display:grid; grid-template-columns:1fr 220px; gap:16px; padding:11px 16px;
  border-bottom:1px solid var(--border-subtle); font-size:13.5px; }
.pc-card .pc-etim:last-child{ border-bottom:none; }
.pc-card .pc-etim-k{ color:var(--gray-600); }
.pc-card .pc-etim-v{ font-weight:600; color:var(--navy-700); }
.pc-card .pc-etim-note{ margin-top:10px; font-size:11px; color:var(--gray-400); line-height:1.4; }
@media (max-width:560px){ .pc-card .pc-etim{ grid-template-columns:1fr; gap:2px; } }

/* ===== ВОПРОС-ОТВЕТ (Q&A) — дизайн макета ===== */
.pc-qa-list{ display:flex; flex-direction:column; gap:14px; }
.pc-qa-card{ border:1px solid var(--border-subtle); border-radius:12px; padding:18px 20px; }
.pc-qa-q{ display:flex; gap:10px; margin-bottom:10px; }
.pc-qa-a{ display:flex; gap:10px; padding-left:36px; }
.pc-qa-av{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  flex:0 0 auto; border-radius:7px; font-size:13px; font-weight:800; }
.pc-qa-av-q{ background:var(--navy-700); color:#fff; }
.pc-qa-av-a{ background:#EAF6EA; color:#2C7E29; }
.pc-qa-qtext{ font-size:14px; color:var(--navy-700); line-height:1.5; }
.pc-qa-name{ font-size:12px; color:var(--gray-500); font-weight:600; margin-bottom:3px; }
.pc-qa-question{ font-weight:600; }
.pc-qa-atext{ font-size:14px; color:var(--gray-600); line-height:1.5; }
.pc-qa-atext b{ color:var(--navy-700); }

/* ===== Кнопки Q&A/отзыв + ОТЗЫВЫ — дизайн макета ===== */
.pc-card .pc-qa-ask, .pc-card .pc-rev-top{ margin-bottom:18px; }
.pc-card .pc-ask-btn{ height:44px; padding:0 20px; background:#fff; color:var(--navy-700);
  border:1.5px solid var(--border-default); border-radius:9px; font-family:var(--font-sans);
  font-size:14px; font-weight:700; cursor:pointer; }
.pc-card .pc-ask-btn:hover{ border-color:#3DA63D; color:#2C7E29; }
.pc-card .pc-rev-btn{ height:44px; padding:0 22px; background:#3DA63D; color:#fff; border:none;
  border-radius:9px; font-family:var(--font-sans); font-size:15px; font-weight:700; cursor:pointer; }
.pc-card .pc-rev-btn:hover{ background:#2C7E29; }
.pc-card .pc-rev-list{ display:flex; flex-direction:column; gap:18px; }
.pc-card .pc-rev-card{ border:1px solid var(--border-subtle); border-radius:12px; padding:20px; }
.pc-card .pc-rev-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.pc-card .pc-rev-av{ width:40px; height:40px; border-radius:50%; background:#EAF6EA; color:#2C7E29;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex:0 0 auto; }
.pc-card .pc-rev-author{ font-size:14px; font-weight:700; color:var(--navy-700); }
.pc-card .pc-rev-meta{ display:flex; align-items:center; gap:8px; }
.pc-card .pc-rev-stars{ display:inline-flex; gap:1px; font-size:13px; line-height:1; }
.pc-card .pc-star{ display:inline-flex; }
.pc-card .pc-star-on{ color:#FFC400; }
.pc-card .pc-star-off{ color:#E3E8EF; }
.pc-card .pc-rev-date{ font-size:12px; color:var(--gray-500); }
.pc-card .pc-rev-badge{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px;
  font-weight:600; color:var(--green-600); background:#EAF6EA; padding:5px 10px; border-radius:999px; }
.pc-card .pc-rev-text{ margin:0; font-size:14px; line-height:1.55; color:var(--navy-600); }
.pc-card .pc-rev-answer{ margin-top:12px; padding:12px 14px; background:var(--gray-50); border-radius:9px;
  font-size:13.5px; line-height:1.5; color:var(--gray-600); }
.pc-card .pc-rev-answer b{ color:var(--navy-700); }

/* Блок покупки: доставка/бонусы — строки как в макете */
.pc-card .pc-buy .pc-delivery{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border-subtle);
  display:flex; flex-direction:column; gap:12px; }
.pc-card .pc-deliv-row{ display:flex; gap:10px; font-size:13px; color:var(--gray-600); line-height:1.4; }
.pc-card .pc-deliv-row b{ color:var(--navy-700); }
.pc-card .pc-deliv-ic{ display:inline-flex; flex:0 0 auto; width:19px; justify-content:center; color:#3DA63D; }
.pc-card .pc-buy .pc-bonus{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--navy-600); }
.pc-card .pc-bonus-ic{ display:inline-flex; flex:0 0 auto; color:#3DA63D; }
.pc-card .pc-bonus-txt b, .pc-card .pc-bonus-txt font{ color:var(--navy-700); font-weight:700; }
.pc-card .pc-qty-row .pc-unit{ font-size:14px; color:var(--gray-600); margin-left:4px; }

/* Плашка наличия — шкала рядом; бонус — выравнивание по левому краю */
.pc-card .pc-stock{ flex-wrap:wrap; }
.pc-card .pc-stock-scale{ display:inline-flex; align-items:center; gap:2px; }
.pc-card .pc-buy .pc-bonus{ align-items:flex-start; text-align:left; }
.pc-card .pc-buy .pc-bonus-txt{ text-align:left; }
.pc-card .pc-buy .pc-bonus-txt *{ text-align:left !important; }
.pc-card .pc-buy .pc-bonus-ic{ margin-top:2px; }

/* ===== БЛОКИ ПОХОЖИХ ТОВАРОВ НА КАРТОЧКЕ (макет product.html ~1373-1394 ANALOGS) =====
   Скоуп: только .pc-analogs внутри .pc-card (страница товара).
   Шаблоны: similar0/similar/similar2/similarRazdel/analog/related/kit/history.
   Карусель со стрелками влево/вправо (.pc-an-arrow), лента .pc-an-strip
   (flex; overflow-x:auto; scroll-behavior:smooth). Карточка: фото 4:3 contain,
   цена 20px/800 navy, название 2 строки, рейтинг «★ 4,7 (44)» (заглушка по макету —
   реального рейтинга у элементов карусели в движке нет), «В наличии» зелёным,
   кнопка «В корзину» белая с бордером #3DA63D, рабочая через addToCart. */
.pc-card .pc-analogs .pc-an-block{ margin:0 0 36px; }
.pc-card .pc-analogs .pc-an-block:last-child{ margin-bottom:0; }
.pc-card .pc-analogs .pc-an-title{
  margin:0 0 18px; font-size:21px; font-weight:800; color:var(--navy-700); line-height:1.2; }

/* Контейнер карусели (стрелки позиционируются относительно него).
   Боковые поля-«колодцы» под стрелки, чтобы они оставались в рамках
   общей ширины и не наезжали на карточки/цену. */
.pc-card .pc-analogs .pc-an-carousel{ position:relative; padding:0 48px; }

/* Кнопки-стрелки: круглые, белый фон, тень (макет .pc-arrow).
   Сидят в боковых колодцах (left/right:4px), не выходя за общую ширину. */
.pc-card .pc-analogs .pc-an-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; background:#fff; border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-md); border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:var(--navy-700); font-size:16px; line-height:1;
  cursor:pointer; user-select:none; }
.pc-card .pc-analogs .pc-an-arrow-left{ left:4px; }
.pc-card .pc-analogs .pc-an-arrow-right{ right:4px; }

/* Горизонтальная лента карточек (flex-strip) */
.pc-card .pc-analogs .pc-an-strip{
  list-style:none; margin:0; padding:0 0 8px; display:flex; gap:16px;
  overflow-x:auto; scroll-behavior:smooth; }
/* подстраховка от легаси jcarousel-инлайн-стилей, если где-то остался <ul>/<li> */
.pc-card .pc-analogs .pc-an-strip li{ position:static !important; float:none !important;
  width:auto !important; height:auto !important; }

/* Карточка-аналог */
.pc-card .pc-analogs .pc-an-card{
  box-sizing:border-box; flex:0 0 210px; max-width:210px;
  border:1px solid var(--border-subtle); border-radius:14px; padding:16px;
  display:flex; flex-direction:column; background:#fff; }

/* Фото: aspect 4/3, contain, multiply (как в каталоге) */
.pc-card .pc-analogs .pc-an-photo{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; background:#fff; border-radius:8px; padding:14px;
  margin-bottom:12px; overflow:hidden; position:relative; }
.pc-card .pc-analogs .pc-an-photo img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply; }
/* бейджи new/hit/action/sale приходят токенами — поверх фото, мелко */
.pc-card .pc-analogs .pc-an-photo > img[src*="new"],
.pc-card .pc-analogs .pc-an-photo > img[src*="hit"]{ position:absolute; top:6px; left:6px; max-width:46px; }

/* Цена */
.pc-card .pc-analogs .pc-an-price{
  font-size:20px; font-weight:800; color:var(--navy-700); margin-bottom:4px; line-height:1.1; }

/* Название (2 строки) */
.pc-card .pc-analogs .pc-an-name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; font-size:13px; line-height:1.35; color:var(--navy-600);
  text-decoration:none; margin-bottom:8px; min-height:36px; }
.pc-card .pc-analogs .pc-an-name:hover{ color:var(--navy-700); text-decoration:underline; }

/* Бренд (если используется) */
.pc-card .pc-analogs .pc-an-brand{
  font-size:12px; color:var(--gray-600); margin-bottom:6px; font-weight:600; }
.pc-card .pc-analogs .pc-an-brand:empty{ display:none; }

/* Рейтинг (заглушка ★ 4,7 (44)) */
.pc-card .pc-analogs .pc-an-rating{
  display:flex; align-items:center; gap:6px; font-size:12px;
  color:var(--gray-600); margin-bottom:6px; }
.pc-card .pc-analogs .pc-an-rating .pc-an-star{ color:#FFC400; font-size:13px; }
.pc-card .pc-analogs .pc-an-rating b{ color:var(--navy-700); }

/* Наличие (зелёным) */
.pc-card .pc-analogs .pc-an-stock{
  font-size:12px; font-weight:600; color:var(--green-600); margin-bottom:10px; }
.pc-card .pc-analogs .pc-an-stock:empty{ display:none; }

/* Кнопка «В корзину»: белая с зелёным бордером #3DA63D, зелёный текст #2C7E29 */
.pc-card .pc-analogs .pc-an-cart{
  margin-top:auto; width:100%; height:38px; background:#fff; color:#2C7E29;
  border:1.5px solid #3DA63D; border-radius:8px; font-family:inherit;
  font-size:13px; font-weight:700; display:flex; align-items:center;
  justify-content:center; gap:6px; cursor:pointer; }
.pc-card .pc-analogs .pc-an-cart:hover{ background:#EAF6EA; }
.pc-card .pc-analogs .pc-an-cart svg{ display:block; }

/* Карточка-раздел (similarRazdel): без цены/рейтинга/кнопки */
.pc-card .pc-analogs .pc-an-card-razdel .pc-an-name{ margin-top:auto; }

@media (max-width:560px){
  .pc-card .pc-analogs .pc-an-card{ flex:0 0 168px; max-width:168px; padding:12px; }
  .pc-card .pc-analogs .pc-an-price{ font-size:18px; }
  .pc-card .pc-analogs .pc-an-title{ font-size:19px; }
  .pc-card .pc-analogs .pc-an-carousel{ padding:0 36px; }
  .pc-card .pc-analogs .pc-an-arrow{ width:34px; height:34px; font-size:14px; }
  .pc-card .pc-analogs .pc-an-arrow-left{ left:0; }
  .pc-card .pc-analogs .pc-an-arrow-right{ right:0; }
}

/* Параметры-варианты покупки (бывшая table#params -> div) */
.pc-card .pc-params{ margin:0 0 8px; }
.pc-card .pc-params .pc-param-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pc-card .pc-params .pc-param-label{ color:var(--navy-600); font-size:13px; }
.pc-card .pc-params:empty{ display:none; }

/* Блок бонусов (бывшая table width=293 -> div) */
.pc-card .pc-buy .pc-bonus-box{ font-size:13px; line-height:1.5; }

/* Шкала наличия в плашке (5 сегментов) */
.pc-card .pc-scale{ display:inline-flex; gap:3px; vertical-align:middle; }
.pc-card .pc-scale-seg{ width:16px; height:8px; border-radius:2px; background:var(--gray-200); }
.pc-card .pc-scale-seg.on{ background:#3DA63D; }

/* Шкала наличия в списке/плитке (.remains): ровные CSS-сегменты как на карточке,
   без легаси-спрайта remains.png (у него у части сегментов было «подчёркивание» снизу) */
.remains{ display:inline-flex !important; align-items:center; vertical-align:middle; height:8px !important; line-height:1 !important; margin:0 !important; }
.remains > div{ display:inline-flex !important; align-items:center; gap:3px; margin:0 !important; height:8px !important; line-height:1 !important; }
.remains span{ display:block !important; width:16px !important; height:8px !important; border-radius:2px; background:var(--gray-200) !important; background-image:none !important; margin:0 !important; }
.remains span.active{ background:#3DA63D !important; }
/* Бонус — не переполнять блок покупки */
.pc-card .pc-buy .pc-bonus{ flex-wrap:wrap; }
.pc-card .pc-buy .pc-bonus-txt{ flex:1 1 0; min-width:0; overflow-wrap:anywhere; }
.pc-card .pc-buy .pc-bonus-txt *{ max-width:100%; }

/* ===================================================================== */
/* ===== ПОДВАЛ САЙТА (как в макете: БЕЛЫЙ фон) — скоуп .site-footer ===== */
/* ===================================================================== */
.site-footer{
  background:#fff; color:var(--navy-700); font-family:var(--font-sans);
  margin-top:20px; border-top:1px solid var(--border-subtle); }
.site-footer *{ box-sizing:border-box; }
.site-footer .site-footer-in{
  max-width:1440px; margin:0 auto; padding:40px 40px 30px; }
.site-footer .sf-row{ display:flex; gap:48px; align-items:flex-start; }
.site-footer .sf-cat-btn{
  display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 26px;
  background:#3DA63D; color:#fff; border:none; border-radius:8px; font-family:inherit;
  font-size:15px; font-weight:700; cursor:pointer; flex:0 0 auto; text-decoration:none; }
.site-footer .sf-cat-btn:hover{ background:#2C7E29; }
.site-footer .sf-cat-btn svg{ width:20px; height:20px; }
.site-footer .sf-cols{ flex:1; display:flex; gap:56px; flex-wrap:wrap; }
.site-footer .sf-col-title{
  font-size:14px; font-weight:800; color:var(--navy-700); margin-bottom:14px; }
.site-footer a.sf-col-title-link{ display:block; text-decoration:none; }
.site-footer a.sf-col-title-link:hover{ color:#3DA63D; }
.site-footer .sf-col-links{ display:flex; flex-direction:column; gap:10px; }
.site-footer .sf-col-links a{
  font-size:13px; color:var(--gray-600); text-decoration:none; }
.site-footer .sf-col-links a:hover{ color:#2C7E29; }
.site-footer .sf-link-strong{
  font-size:14px; font-weight:800; color:var(--navy-700); text-decoration:none; }
.site-footer .sf-link-strong:hover{ color:#3DA63D; }
.site-footer .sf-soc{ display:flex; gap:10px; flex:0 0 auto; }
.site-footer .sf-soc a{
  width:36px; height:36px; border-radius:50%; color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:800;
  cursor:pointer; text-decoration:none; }
.site-footer .sf-soc a svg{ width:17px; height:17px; }
.site-footer .sf-soc .sf-vk{ background:#4C75A3; }
.site-footer .sf-soc .sf-yt{ background:#FF0000; font-size:17px; }
.site-footer .sf-soc .sf-tgm{ background:#29A9EB; font-size:17px; } /* Телеграм — фирменный голубой (был красный sf-yt) */
.site-footer .sf-soc .sf-ok{ background:#EE8208; font-size:12px; }
.site-footer .sf-soc .sf-tg{ background:#168DE2; font-size:17px; }
.site-footer .sf-soc .sf-max{ background:none; padding:0; } /* MAX — картинка images2/max.webp (обрезана по краям, заполняет кружок как остальные) */
.site-footer .sf-soc .sf-max img{ width:36px; height:36px; display:block; }
.site-footer .sf-contacts{
  display:flex; align-items:center; justify-content:center; gap:28px;
  margin-top:30px; padding-top:24px; flex-wrap:wrap;
  border-top:1px solid var(--border-subtle); }
.site-footer .sf-contacts span{
  display:inline-flex; align-items:center; gap:8px; font-size:14px;
  color:var(--navy-700); font-weight:600; }
.site-footer .sf-contacts span a{ color:var(--navy-700); text-decoration:none; }
.site-footer .sf-contacts span a:hover{ color:#2C7E29; }
.site-footer .sf-contacts span .sf-ic{
  display:inline-flex; font-size:17px; color:#3DA63D; }
.site-footer .sf-contacts span .sf-ic svg{ width:17px; height:17px; }
.site-footer .sf-copy{
  text-align:center; margin-top:16px; font-size:12px; color:var(--gray-500); }
.site-footer .sf-copy a{ color:var(--gray-500); }
.site-footer .sf-copy a:hover{ color:var(--navy-700); }
.site-footer .sf-extra{ margin-top:18px; text-align:center; font-size:12px;
  color:var(--gray-500); }
.site-footer .sf-extra a{ color:var(--gray-600); }
/* скрытые служебные блоки (счётчики/аналитика) — оставляем в DOM */
.site-footer .sf-counters{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:760px){
  .site-footer .site-footer-in{ padding:32px 16px 24px; }
  .site-footer .sf-row{ flex-direction:column; gap:24px; }
  .site-footer .sf-cols{ gap:22px 36px; }
  .site-footer .sf-contacts{ flex-direction:column; gap:14px; }
  /* запас под фиксированный таб-бар .pc-tabbar (~64px) */
  .site-footer{ padding-bottom:72px; }
}

/* ===================================================================== */
/* ===== ЛИЧНЫЙ КАБИНЕТ (новый дизайн, серверный рендер) — .lk-* ======= */
/* ===================================================================== */
.lk-wrap{ --teal:#2E5E73; --brand-soft:#EAF6EA; --blue-500:#2F6FE0;
  max-width:1440px; margin:0 auto; padding:18px 40px 60px; box-sizing:border-box;
  font-family:var(--font-sans); color:var(--navy-700); }
.lk-wrap *{ box-sizing:border-box; }
.lk-crumb{ display:flex; align-items:center; gap:8px; font-size:13px;
  color:var(--gray-500); margin-bottom:14px; flex-wrap:wrap; }
.lk-crumb a{ color:var(--blue-500); text-decoration:none; }
.lk-crumb .sep{ color:var(--gray-300); }
.lk-grid{ display:grid; grid-template-columns:264px 1fr; gap:28px; align-items:start; }
.lk-aside{ min-width:0; }
.lk-content{ min-width:0; }
.lk-user{ display:flex; align-items:center; gap:13px; padding:16px;
  border:1px solid var(--border-subtle); border-radius:14px; margin-bottom:16px; }
.lk-ava{ width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  background:var(--brand-soft); color:#2C7E29; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:18px; }
.lk-user-name{ font-size:15px; font-weight:800; color:var(--navy-700);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-user-sub{ font-size:12.5px; color:var(--gray-500); }
.lk-nav{ border:1px solid var(--border-subtle); border-radius:14px; overflow:hidden; }
.lk-nav-grp{ padding:14px 16px 6px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gray-400); }
.lk-nav a{ display:flex; align-items:center; gap:11px; padding:10px 16px;
  text-decoration:none; cursor:pointer; font-size:14px; font-weight:600;
  color:var(--navy-600); background:#fff; border-left:3px solid transparent; }
.lk-nav a .lk-nav-ic{ display:inline-flex; font-size:18px; color:var(--gray-400); }
.lk-nav a .lk-nav-ic svg{ width:18px; height:18px; }
.lk-nav a:hover{ background:var(--gray-50); color:var(--navy-700); }
.lk-nav a.active{ font-weight:800; color:#2C7E29; background:var(--brand-soft);
  border-left-color:#3DA63D; }
.lk-nav a.active .lk-nav-ic{ color:#3DA63D; }
.lk-nav a .lk-nav-badge{ min-width:20px; height:20px; padding:0 6px; background:#3DA63D;
  color:#fff; border-radius:999px; font-size:11px; font-weight:700; display:flex;
  align-items:center; justify-content:center; }
.lk-nav a.lk-logout{ font-weight:600; color:var(--gray-500);
  border-top:1px solid var(--border-subtle); border-left-color:transparent; }
.lk-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.lk-back{ display:none; align-items:center; justify-content:center; width:40px;
  height:40px; border:1px solid var(--border-default); border-radius:10px;
  color:var(--navy-700); cursor:pointer; flex:0 0 auto; text-decoration:none; }
.lk-back svg{ width:20px; height:20px; }
.lk-h1{ margin:0; font-size:26px; font-weight:800; color:var(--navy-700); letter-spacing:-.01em; }
.lk-card{ border:1px solid var(--border-subtle); border-radius:14px; padding:20px; }
.lk-cards2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lk-kicker{ font-size:13px; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:.03em; }
.lk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 22px; background:#3DA63D; color:#fff; border:none;
  border-radius:9px; font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; text-decoration:none; }
.lk-btn:hover{ background:#2C7E29; }
.lk-btn-ghost{ background:#fff; color:var(--navy-700); border:1.5px solid var(--border-default); }
.lk-btn-ghost:hover{ background:var(--gray-50); }
.lk-prog{ display:flex; gap:6px; }
.lk-prog span{ flex:1; height:5px; border-radius:999px; background:var(--gray-200); }
.lk-prog span.on{ background:#3DA63D; }
.lk-prog-lbl{ display:flex; justify-content:space-between; margin-top:7px;
  font-size:11px; color:var(--gray-500); }
.lk-badge{ font-size:12px; font-weight:700; color:#fff; background:var(--teal);
  padding:3px 11px; border-radius:999px; white-space:nowrap; }
.lk-orders-th{ display:grid; grid-template-columns:120px 130px 160px 120px 1fr; gap:14px;
  padding:11px 16px; background:var(--gray-50); border-radius:9px; font-size:11px;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500); }
.lk-order-row{ display:grid; grid-template-columns:120px 130px 160px 120px 1fr; gap:14px;
  padding:15px 16px; border-bottom:1px solid var(--border-subtle); align-items:center;
  font-size:13.5px; }
.lk-order-row a{ color:var(--blue-500); text-decoration:none; font-weight:600; }
.lk-field{ display:block; }
.lk-field > span{ display:block; font-size:12px; color:var(--gray-500); margin-bottom:6px; }
.lk-field > span span{ display:inline; margin:0; }
.lk-field input{ width:100%; height:44px; padding:0 13px; border:1.5px solid var(--border-default);
  border-radius:9px; font-family:inherit; font-size:14px; color:var(--navy-700); background:#fff; }
/* Кнопки корзины (везде: попап / страница /cart/ / кабинет) под наш вид —
   прицел по onclick, cart.htm и логику НЕ трогаем. */
input[onclick*="doEraseCart"], input[onclick*="recalculateCart"], input[onclick*="pdf7"], input[onclick*="doDisplayOrder"]{
  height:42px !important; width:auto !important; min-width:0 !important; padding:0 18px !important; margin:4px 6px 4px 0 !important;
  background:#fff !important; background-color:#fff !important; color:var(--navy-700) !important;
  border:1.5px solid var(--border-default) !important; border-radius:9px !important;
  font-family:var(--font-sans) !important; font-size:14px !important; font-weight:700 !important; cursor:pointer !important; }
input[onclick*="doEraseCart"]:hover, input[onclick*="recalculateCart"]:hover, input[onclick*="pdf7"]:hover{ background:var(--gray-50) !important; background-color:var(--gray-50) !important; }
input[onclick*="doDisplayOrder"]{ background:#3DA63D !important; background-color:#3DA63D !important; color:#fff !important; border-color:#3DA63D !important; }
input[onclick*="doDisplayOrder"]:hover{ background:#2C7E29 !important; background-color:#2C7E29 !important; }

/* Корзина в кабинете под наш вид (cart.htm/логику НЕ трогаем — только CSS+обёртка) */
.lk-cartwrap{ overflow-x:auto; }
.lk-cartwrap table{ width:100%; border-collapse:collapse; background:#fff; }
.lk-cartwrap [bgcolor]{ background:#fff !important; }
.lk-cartwrap [bgcolor="#DAE9C7"]{ background:var(--gray-50) !important; }
.lk-cartwrap [bgcolor="#DAE9C7"] strong{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500); }
.lk-cartwrap td{ padding:12px 14px !important; border-bottom:1px solid var(--border-subtle); vertical-align:top; font-size:13.5px; color:var(--navy-700); }
.lk-cartwrap a{ color:var(--blue-500); text-decoration:none; }
.lk-cartwrap a[href*="doDeleteFromCart"]{ color:var(--gray-400); font-size:13px; }
.lk-cartwrap .qty_arr{ width:44px; height:34px; text-align:center; border:1px solid var(--border-default); border-left:0; border-right:0; font-family:inherit; font-size:14px; color:var(--navy-700); vertical-align:middle; padding:0; }
.lk-cartwrap .qty_minus, .lk-cartwrap .qty_plus{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:34px; border:1px solid var(--border-default); background:#fff; color:var(--navy-700); cursor:pointer; -webkit-user-select:none; user-select:none; vertical-align:middle; font-size:16px; }
.lk-cartwrap .qty_minus{ border-radius:8px 0 0 8px; }
.lk-cartwrap .qty_plus{ border-radius:0 8px 8px 0; }
.lk-cartwrap .checkout{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px; background:#3DA63D; color:#fff !important; border-radius:9px; font-weight:700; font-size:14px; text-decoration:none; }
.lk-cartwrap .checkout:hover{ background:#2C7E29; }
/* кнопки в подвале корзины (input type=button с инлайн-фоном) под наш вид */
.lk-cartwrap input[type="button"], .lk-cartwrap input[type="submit"]{
  height:42px !important; width:auto !important; padding:0 18px !important; margin:4px 6px 4px 0;
  background:#fff !important; background-color:#fff !important; color:var(--navy-700) !important;
  border:1.5px solid var(--border-default) !important; border-radius:9px !important;
  font-family:inherit !important; font-size:14px !important; font-weight:700 !important; cursor:pointer; }
.lk-cartwrap input[type="button"]:hover, .lk-cartwrap input[type="submit"]:hover{ background:var(--gray-50) !important; background-color:var(--gray-50) !important; }
.lk-cartwrap input[type="button"].button{ background:#3DA63D !important; background-color:#3DA63D !important; color:#fff !important; border-color:#3DA63D !important; }
.lk-cartwrap input[type="button"].button:hover{ background:#2C7E29 !important; background-color:#2C7E29 !important; }

/* история операций по бонусам */
.lk-bonus-tbl{ display:flex; flex-direction:column; }
.lk-bonus-row{ display:grid; grid-template-columns:120px 120px 1fr 96px; gap:14px; align-items:center; padding:13px 20px; border-top:1px solid var(--border-subtle); font-size:13.5px; }
.lk-bonus-head{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-400); }
.lk-bonus-row a{ color:var(--blue-500); text-decoration:none; }
@media (max-width:680px){
  .lk-bonus-row{ grid-template-columns:1fr auto; gap:4px 12px; }
  .lk-bonus-head{ display:none; }
  .lk-bonus-row > span:nth-child(1){ order:1; }
  .lk-bonus-row > span:nth-child(4){ order:2; text-align:right !important; }
  .lk-bonus-row > span:nth-child(3){ order:3; grid-column:1 / -1; color:var(--gray-600) !important; }
  .lk-bonus-row > span:nth-child(2){ order:4; grid-column:1 / -1; }
}

/* форма возврата (returns.htm) в lk-стиле */
.lk-radio{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--navy-700); line-height:1.4; padding:4px 0; cursor:pointer; }
.lk-radio input{ margin-top:2px; flex:0 0 auto; }
.lk-ret-sub{ font-size:13px; font-weight:800; color:var(--navy-700); margin:16px 0 6px; }
.lk-ret-file{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--gray-600); padding:6px 0; }
.lk-ret-file > span:first-child{ flex:0 0 220px; }
.lk-ret-file input[type=file]{ flex:1; min-width:160px; font-size:13px; }
.lk-ret-file span.required{ color:#E5484D; font-size:12px; flex-basis:100%; }
.lk-ret-photo img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.lk-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--border-default); border-radius:8px; overflow:hidden; }
.lk-qty button{ width:34px; height:38px; border:none; background:#fff; color:var(--navy-700); font-size:18px; line-height:1; cursor:pointer; font-family:inherit; }
.lk-qty button:hover{ background:var(--gray-50); }
.lk-qty input.qty_arr{ width:56px; height:38px; text-align:center; border:none; border-left:1px solid var(--border-subtle); border-right:1px solid var(--border-subtle); font-family:inherit; font-size:14px; color:var(--navy-700); padding:0; border-radius:0; background:#fff; }
.lk-empty{ border:1px dashed var(--border-default); border-radius:14px;
  padding:48px 24px; text-align:center; }
.lk-empty .lk-empty-ic{ display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; background:var(--gray-50); color:var(--gray-400);
  font-size:28px; margin-bottom:14px; }
@media (max-width:980px){
  .lk-grid{ grid-template-columns:minmax(0,1fr); }
  .lk-cards2{ grid-template-columns:minmax(0,1fr); }
  .lk-wrap{ padding:14px 16px 60px; }
}
@media (max-width:560px){
  .lk-orders-th, .lk-order-row{ grid-template-columns:1fr auto; }
  .lk-hide-sm{ display:none !important; }
}

/* Степпер количества в карточках каталога (список и плитка) */
.cat-stepper{ display:inline-grid; grid-template-columns:34px 46px 34px; align-items:stretch; border:1.5px solid var(--border-default); border-radius:9px; overflow:hidden; flex:0 0 auto; height:46px; background:#fff; }
.cat-stepper .qty_minus, .cat-stepper .qty_plus{ display:flex; align-items:center; justify-content:center; height:100%; width:34px; background:#fff; background-image:none; color:var(--navy-700); cursor:pointer; -webkit-user-select:none; user-select:none; font-size:18px; line-height:1; }
.sq_item .cat-stepper .qty_minus, .sq_item .cat-stepper .qty_plus{ width:30px; }
.cat-stepper .qty_minus:hover, .cat-stepper .qty_plus:hover{ background:var(--gray-50); }
.cat-stepper .qty_arr{ width:100%; height:100%; box-sizing:border-box; text-align:center; border:none; border-left:1px solid var(--border-subtle); border-right:1px solid var(--border-subtle); font-family:inherit; font-size:14px; color:var(--navy-700); padding:0; border-radius:0; background:#fff; }
/* в плитке степпер компактнее */
.sq_item .cat-stepper{ height:40px; grid-template-columns:30px 40px 30px; }
.sq_item .cat-stepper .qty_minus, .sq_item .cat-stepper .qty_plus{ font-size:16px; }

/* Количество в степпере — всегда строго по центру (перебиваем #qty/legacy/специфичность) */
.cat-stepper .qty_arr,
.pc-card .pc-buy .pc-stepper .qty_arr,
input#qty.qty_arr,
.lk-qty input.qty_arr{ text-align:center !important; padding-left:0 !important; padding-right:0 !important; text-indent:0 !important; }

/* ===================== КОРЗИНА — попап по центру + наш дизайн ===================== */
/* Попап #popupbox (корзина и оформление) — модалка по центру экрана с затемнением.
   Перебиваем инлайн left/width/top, которые ставит display_popupbox() в panel_generic1.js. */
#popupbox{
  position:fixed !important;
  left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  margin:auto !important;
  width:min(940px, 94vw) !important;
  height:-moz-max-content !important; height:max-content !important;
  max-height:90vh !important;
  overflow:auto !important;
  background:#fff !important;
  border:none !important;
  border-radius:16px !important;
  box-shadow:0 24px 80px rgba(16,36,59,.30), 0 0 0 100vmax rgba(16,36,59,.45) !important;
  padding:20px 24px 22px !important;
  z-index:100000 !important;
}
/* убрать легаси-рамку из картинок (corner/horizont/vertical + стрелка) */
#popupbox .popupbox-corner,
#popupbox .popupbox-horizont-side,
#popupbox .popupbox-vertical-side,
#popupbox #popupbox-top-side{ display:none !important; }
#popupbox-content{ height:auto !important; }
#popupbox-header{ display:none; }
#popupbox-title{
  font-family:inherit !important; font-size:20px !important; font-weight:800 !important;
  color:var(--navy-700) !important; padding:0 40px 16px 0 !important; margin:0 !important;
  border-bottom:1px solid var(--border-subtle); margin-bottom:16px !important;
}
#popupbox-text{ clear:both !important; padding:0 !important; }
#popupbox-close{
  position:absolute !important; top:18px !important; right:20px !important;
  width:32px !important; height:32px !important; border-radius:9px !important;
  background:var(--gray-50) !important; cursor:pointer; z-index:2;
}
#popupbox-close::before{
  content:"\00d7"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color:var(--navy-600); font-weight:600;
}
#popupbox-close:hover{ background:var(--gray-100) !important; }

/* --- тело корзины --- */
.cartbox{ font-family:inherit; color:var(--navy-700); }
.cart-thumb{ width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--border-subtle); border-radius:10px; padding:6px; display:block; }

.cart-head-row{
  display:grid; grid-template-columns:1fr 120px 150px 120px 36px; gap:14px; align-items:center;
  padding:0 0 10px; border-bottom:1px solid var(--border-subtle);
  font-size:12px; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:.02em;
}
.cart-col-price, .cart-col-cost{ text-align:right; }
.cart-col-qty{ text-align:center; }

.cart-list{ display:flex; flex-direction:column; }
.cart-line{
  display:grid; grid-template-columns:64px 1fr 120px 150px 120px 36px; gap:14px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--border-subtle);
}
.cart-line-img{ display:block; flex:0 0 auto; }
.cart-line-main{ min-width:0; }
.cart-line-cat{ font-size:12px; color:var(--gray-400); margin-bottom:3px; }
.cart-line-name{ font-size:14px; font-weight:700; color:var(--navy-700); text-decoration:none; line-height:1.35; display:block; }
.cart-line-name:hover{ color:#2C7E29; }
.cart-line-code{ font-size:12px; color:var(--gray-500); margin-top:4px; }
.cart-line-price{ text-align:right; font-size:15px; font-weight:600; color:var(--navy-600); white-space:nowrap; }
.cart-line-qty{ display:flex; align-items:center; justify-content:center; gap:8px; }
.cart-line-units{ font-size:12px; color:var(--gray-500); }
.cart-line-cost{ text-align:right; font-size:16px; font-weight:800; color:var(--navy-700); white-space:nowrap; }
.cart-line-del{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  color:var(--gray-400); border:1px solid var(--border-subtle); border-radius:8px; cursor:pointer; text-decoration:none;
}
.cart-line-del:hover{ color:#E0322B; border-color:#f3c6c4; background:#fdf3f2; }

.cart-total-row{ text-align:right; padding:16px 0 4px; font-size:18px; color:var(--navy-700); }

.cart-bonus{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin:10px 0; padding:12px 16px; background:#f4f9f1; border:1px solid #d7ead0; border-radius:12px;
  font-size:14px; color:var(--navy-700);
}
.cart-bonus-use input{ width:64px; height:34px; text-align:center; border:1px solid var(--border-default); border-radius:8px; margin-left:6px; font-family:inherit; }

.cart-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.cart-actions-left{ display:flex; flex-wrap:wrap; gap:9px; }
.cart-btn{
  height:44px; padding:0 20px; border-radius:9px; font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.cart-btn-primary{ background:#3DA63D; color:#fff; border-color:#3DA63D; }
.cart-btn-primary:hover{ background:#2C7E29; }
.cart-btn-primary[disabled]{ background:var(--gray-200); color:var(--gray-500); border-color:var(--gray-200); cursor:default; }
.cart-btn-ghost{ background:#fff; color:var(--navy-700); border-color:var(--border-default); }
.cart-btn-ghost:hover{ background:var(--gray-50); }

.cart-kit{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border-subtle); }
.cart-kit-title{ font-size:15px; font-weight:800; color:var(--navy-700); margin-bottom:12px; }

.cart-empty{ text-align:center; padding:36px 10px 30px; }
.cart-empty-ic{ color:var(--gray-300); margin-bottom:14px; display:flex; justify-content:center; }
.cart-empty-title{ font-size:20px; font-weight:800; color:var(--navy-700); margin-bottom:8px; }
.cart-empty-text{ font-size:14px; color:var(--gray-500); max-width:420px; margin:0 auto 8px; line-height:1.5; }
.cart-empty-contacts{ font-size:13px; color:var(--gray-400); }

@media (max-width:640px){
  #popupbox{ width:96vw !important; max-height:92vh !important; padding:16px 14px 18px !important; border-radius:14px !important; }
  .cart-head-row{ display:none; }
  /* мобила: картинка сверху, всё остальное ниже на всю ширину */
  .cart-line{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; grid-template-columns:none; padding:18px 0; }
  .cart-line-img{ align-self:flex-start; }
  .cart-line-img .cart-thumb{ width:96px; height:96px; }
  .cart-line-main{ width:100%; }
  .cart-line-price{ text-align:left; width:100%; }
  .cart-line-qty{ justify-content:flex-start; width:100%; }
  .cart-line-cost{ text-align:left; width:100%; font-size:18px; }
  .cart-line-del{ position:absolute; top:14px; right:0; }
  /* кнопки — каждая на всю ширину, без обрезки */
  .cart-actions{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .cart-actions-left{ flex-direction:column; width:100%; gap:9px; }
  .cart-actions-left .cart-btn{ width:100%; }
  .cart-actions-right{ width:100%; }
  .cart-actions-right .cart-btn{ width:100%; }
}

/* --- «С этим товаром также покупают» в корзине: компактные карточки --- */
.cart-kit-body{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.ckit-card{ display:flex; gap:12px; align-items:center; padding:12px; border:1px solid var(--border-subtle); border-radius:12px; background:#fff; min-width:0; }
.ckit-img{ flex:0 0 auto; width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border-subtle); border-radius:10px; padding:5px; }
.ckit-img img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ckit-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; }
.ckit-name{ font-size:13px; font-weight:700; color:var(--navy-700); text-decoration:none; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ckit-name:hover{ color:#2C7E29; }
.ckit-meta{ font-size:11px; color:var(--gray-400); }
.ckit-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; }
.ckit-price{ font-size:15px; font-weight:800; color:var(--navy-700); white-space:nowrap; }
.ckit-add{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; background:#3DA63D; color:#fff; border:none; border-radius:8px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ckit-add:hover{ background:#2C7E29; }

/* ===================== ОФОРМЛЕНИЕ ЗАКАЗА (попап) — наш дизайн (CSS-only, логику не трогаем) ===================== */
/* заголовки */
#popupbox h1, #popupbox h2{ font-family:inherit; font-size:17px; font-weight:800; color:var(--navy-700); margin:0 0 12px; padding:0; line-height:1.25; }
#popupbox h3{ font-family:inherit; font-size:13px; font-weight:600; color:var(--gray-500); margin:0 0 10px; padding:0; }
#popupbox .order-wrap{ padding-top:4px; }

/* две колонки: регистрация | вход+1click */
#popupbox .manage-account{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; }
#popupbox .manage-account > .new_account{ flex:1 1 320px; min-width:0; }
#popupbox .manage-account > .right_block{ flex:1 1 320px; min-width:0; }

/* убрать легаси-фоны таблиц/ячеек внутри попапа заказа */
#popupbox .manage-account table, #popupbox .oneclick_form table, #popupbox .processing-order table{ border-collapse:collapse; width:100%; }
#popupbox .manage-account td[bgcolor], #popupbox .manage-account tr[bgcolor],
#popupbox .oneclick_form td[bgcolor], #popupbox .oneclick_form tr[bgcolor],
#popupbox .processing-order td[bgcolor], #popupbox .processing-order tr[bgcolor],
#popupbox .backgroundlight{ background:transparent !important; }
#popupbox .manage-account td, #popupbox .oneclick_form td, #popupbox .news_text td{ padding:5px 6px 5px 0 !important; border:none !important; vertical-align:middle; font-size:13px; color:var(--navy-600); }
#popupbox .process-order-fio-title td{ padding-top:12px !important; color:var(--navy-700); }

/* поля ввода */
#popupbox input[type=text], #popupbox input[type=password], #popupbox input[type=email],
#popupbox input.email, #popupbox input.phone, #popupbox textarea, #popupbox select{
  box-sizing:border-box; height:40px; padding:0 12px; border:1px solid var(--border-default);
  border-radius:9px; font-family:inherit; font-size:14px; color:var(--navy-700); background:#fff; outline:none; max-width:100%;
}
#popupbox textarea{ height:auto; min-height:78px; padding:10px 12px; resize:vertical; }
#popupbox input[type=text]:focus, #popupbox input[type=password]:focus, #popupbox input[type=email]:focus,
#popupbox input.email:focus, #popupbox input.phone:focus, #popupbox textarea:focus, #popupbox select:focus{
  border-color:#3DA63D; box-shadow:0 0 0 3px rgba(61,166,61,.12);
}
#popupbox input.phone{ width:170px !important; }

/* Селектор города в оформлении заказа: легаси-CSS делал его position:absolute;
   margin-top:-25px;left:15px → в новой вёрстке он схлопывался в пустую крошечную
   коробочку. Возвращаем нормальный инлайн-вид (display управляет JS по клику). */
#popupbox select.order_city_selector, #popupbox select.order_city_selector_lower,
select.order_city_selector, select.order_city_selector_lower{
  display:inline-block !important;   /* всегда видим (как селект в шапке), без двухшаговой ссылки */
  position:static !important; left:auto !important; margin:0 0 0 6px !important;
  height:36px; min-width:180px; max-width:100%; padding:0 10px;
  border:1px solid var(--border-default); border-radius:8px;
  font-family:inherit; font-size:16px; color:var(--navy-700);
  background:#fff; vertical-align:middle; cursor:pointer;
}
/* ссылка-город не нужна — выбираем прямо в селекте, как в шапке */
a.order_city_selector, a.order_city_selector_lower{ display:none !important; }
/* «Оформление заказа в [город]» в один ряд: контейнер инлайн, без дубля
   «Оформление заказа» (.order_city_preselector) и без переносов <br> */
div.order_city_selector{ display:inline; }
.order_city_preselector{ display:none !important; }
.order_city_selector br{ display:none !important; }
#popupbox input[type=file]{ font-size:13px; color:var(--navy-600); }

/* кнопки .button и кнопки шагов -> наш зелёный, плоские */
#popupbox input.button, #popupbox .buttons input, #popupbox input.process-order{
  -webkit-appearance:none; appearance:none; background:#3DA63D !important; color:#fff !important;
  border:none !important; border-radius:9px !important; height:44px; padding:0 24px; width:auto !important;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; box-shadow:none !important;
}
#popupbox input.button:hover, #popupbox .buttons input:hover, #popupbox input.process-order:hover{ background:#2C7E29 !important; }
/* ячейки-обёртки вокруг кнопок: убрать зелёный фон, выровнять влево */
#popupbox .aligncenter[bgcolor], #popupbox .oneclick-deliverycheck .aligncenter{ text-align:left !important; padding:12px 0 0 !important; }

/* радио/чекбоксы/лейблы */
#popupbox label{ font-size:13px; color:var(--navy-700); }
#popupbox .new_account label, #popupbox .login_wrap label, #popupbox .oneclick_wrap label{ display:inline-flex; align-items:center; gap:6px; }
#popupbox .delivery-fieldset, #popupbox .payment-types{ display:flex; gap:18px; border:none; padding:0; margin:0; }
#popupbox .delivery-type-block{ margin:10px 0; }
#popupbox .Subscribe-checkbox-label, #popupbox .StoreAccount-checkbox-label{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--gray-600); line-height:1.4; margin:4px 0; }

/* блок-памятка «Данные для оформления заказа» */
#popupbox td[style*="88B748"]{ border:1px solid var(--border-subtle) !important; border-radius:10px; background:var(--gray-50) !important; padding:12px !important; font-size:12px; line-height:1.5; }

/* звёздочки обязательности + сообщения валидации — красные */
#popupbox font[color="#FF0000"], #popupbox .important{ color:#E0322B; }
#popupbox label.error, #popupbox .error, #popupbox .error span, #popupbox .error td{ color:#E0322B !important; font-size:12px; }

/* нижняя строка про политику */
#popupbox .small{ font-size:12px; color:var(--gray-400); display:block; margin-top:14px; }

/* блок «бонусная система» (серый инфо-текст вместо красной плашки) */
#popupbox .oneclick_form .aligncenter td[align=left]{ font-size:12px; color:var(--gray-500); }

@media (max-width:640px){
  #popupbox .manage-account{ flex-direction:column; gap:22px; }
  #popupbox .oneclick-row{ flex-direction:column; }
  #popupbox .oneclick-info.left-block, #popupbox .oneclick-payment.right-block{ width:100% !important; padding:0 !important; }
}

/* ===================== ОТЗЫВ: кнопка + модальное окно ===================== */
.pc-review-actions{ margin-top:18px; }
.pc-review-btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 22px; background:#3DA63D; color:#fff; border:none; border-radius:9px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.pc-review-btn:hover{ background:#2C7E29; }

.rv-modal{ position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; background:rgba(16,36,59,.45); padding:20px; }
.rv-modal__card{ position:relative; width:min(640px,96vw); max-height:90vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:0 24px 80px rgba(16,36,59,.30); padding:24px 26px 26px; }
.rv-modal__close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border:none; border-radius:9px; background:var(--gray-50); color:var(--navy-600); font-size:22px; line-height:1; cursor:pointer; z-index:2; }
.rv-modal__close:hover{ background:var(--gray-100); }

/* нейтрализуем легаси-таблицу формы отзыва/вопроса внутри модалки (.rv-modal — общий класс для обоих) */
.rv-modal table{ border-collapse:collapse; width:100% !important; }
.rv-modal td[bgcolor], .rv-modal tr[bgcolor]{ background:transparent !important; }
.rv-modal td{ padding:6px 6px 6px 0 !important; border:none !important; vertical-align:middle; font-size:13px; color:var(--navy-600); }
.rv-modal td[colspan][bgcolor="#DAE9C7"]{ font-size:16px; color:var(--navy-700); font-weight:800; padding:0 30px 12px 0 !important; }
.rv-modal td.aligncenter[bgcolor="#DAE9C7"]{ text-align:left !important; padding-top:14px !important; }
.rv-modal input.textlong, .rv-modal input.email, .rv-modal input.phone,
.rv-modal #Name, .rv-modal #Email, .rv-modal #Phone, .rv-modal textarea{
  box-sizing:border-box; width:100%; height:40px; padding:0 12px; border:1px solid var(--border-default);
  border-radius:9px; font-family:inherit; font-size:14px; color:var(--navy-700); background:#fff; outline:none;
}
.rv-modal textarea{ height:auto; min-height:120px; padding:10px 12px; resize:vertical; }
.rv-modal input:focus, .rv-modal textarea:focus{ border-color:#3DA63D; box-shadow:0 0 0 3px rgba(61,166,61,.12); }
.rv-modal input.phone{ width:170px !important; }
.rv-modal input.button{ -webkit-appearance:none; appearance:none; background:#3DA63D !important; color:#fff !important; border:none !important; border-radius:9px !important; height:44px; padding:0 24px; width:auto !important; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.rv-modal input.button:hover{ background:#2C7E29 !important; }
.rv-modal .small{ font-size:12px; color:var(--gray-400); display:block; margin-top:12px; }
.rv-modal img{ display:none; } /* убрать битую легаси-картинку */
/* картинка скрыта, но её ячейка (rowspan) оставалась пустой колонкой и сдвигала
   лейблы → схлопываем; лейблы выравниваем, «(не публикуется)» прижимаем к строке */
.rv-modal td[rowspan]{ width:0 !important; padding:0 !important; }
.rv-modal td.t_l{ text-align:left !important; vertical-align:top; white-space:nowrap; font-weight:600; color:var(--navy-700); padding-right:16px !important; }
.rv-modal td.t_l .small{ display:block; margin-top:2px; font-weight:400; }
.rv-modal font[color="#FF0000"]{ color:#E0322B; }

/* --- звёзды-рейтинг в форме отзыва (свой виджет rvstars, без конфликтов со старым .star-rating/fa) --- */
#review-modal .rvstars{ display:inline-flex; flex-direction:row-reverse; }
#review-modal .rvstars__in{ display:none !important; }
#review-modal .rvstars__lb{ font-size:30px; line-height:1; color:#d9dee7; cursor:pointer; padding:0 2px; margin:0; }
#review-modal .rvstars__lb:hover,
#review-modal .rvstars__lb:hover ~ .rvstars__lb,
#review-modal .rvstars__in:checked ~ .rvstars__lb{ color:#FFB400; }

/* --- экран «спасибо за отзыв» --- */
.rv-thanks{ text-align:center; padding:34px 10px 26px; }
.rv-thanks__ic{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:#eaf7e7; color:#3DA63D; font-size:34px; line-height:64px; font-weight:700; }
.rv-thanks__title{ font-size:20px; font-weight:800; color:var(--navy-700); margin-bottom:8px; }
.rv-thanks__text{ font-size:14px; color:var(--gray-500); }

/* кнопки выбора способа оформления (Купить с регистрацией / без) — наш стиль (перебиваем легаси .button) */
#popupbox .order-wrap__buttons{ margin:0 0 18px; }
#popupbox .order-wrap__buttons-container{ display:flex; flex-wrap:wrap; gap:10px; border:none; padding:0; margin:0; }
#popupbox .order-wrap_custom-radio{ display:inline-flex; position:static; }
#popupbox .custom-radio-input{ position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; pointer-events:none; }
#popupbox .custom-radio-label, #popupbox .custom-radio-label.button{
  display:inline-flex !important; align-items:center; justify-content:center; height:44px !important; padding:0 22px !important; line-height:1 !important;
  background:#fff !important; background-image:none !important; color:var(--navy-700) !important;
  border:1px solid var(--border-default) !important; border-radius:9px !important; box-shadow:none !important;
  font-family:inherit; font-size:14px !important; font-weight:700; text-transform:none; cursor:pointer; margin:0 !important;
}
#popupbox .custom-radio-label:hover, #popupbox .custom-radio-label.button:hover{ background:var(--gray-50) !important; }
#popupbox .custom-radio-input:checked + .custom-radio-label,
#popupbox .custom-radio-input:checked + .custom-radio-label.button{
  background:#3DA63D !important; color:#fff !important; border-color:#3DA63D !important;
}

/* ===================== ИЗБРАННОЕ (wishlist) — наш дизайн ===================== */
.wl-list{ display:flex; flex-direction:column; gap:14px; }
.wl-card{ position:relative; border:1px solid var(--border-subtle); border-radius:14px; background:#fff; padding:2px 18px; }
.wl-card .cat-row{ border-bottom:none !important; }
/* в избранном убираем дублирующее сердце из карточки item.htm — удаление через × */
#wishlist .cat-row-buy .wishlist{ display:none !important; }
.wl-del{ position:absolute; top:16px; right:16px; z-index:3; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border-subtle); border-radius:8px; color:var(--gray-400); background:#fff; cursor:pointer; text-decoration:none; }
.wl-del:hover{ color:#E0322B; border-color:#f3c6c4; background:#fdf3f2; }
/* панель инструментов на карточке кабинета (избранное/списки): крестик, «+ в список» */
.wl-tools{ position:absolute; top:14px; right:14px; z-index:3; display:flex; gap:6px; }
.wl-tool{ -webkit-appearance:none; appearance:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--border-subtle); border-radius:8px; color:var(--gray-400); background:#fff; cursor:pointer; text-decoration:none; }
.wl-tool:hover{ color:var(--navy-700); border-color:var(--border-default); }
.wl-tool.del_wishlist:hover, .wl-tool.lk-list-rm:hover{ color:#E0322B; border-color:#f3c6c4; background:#fdf3f2; }
.wl-tool.lk-addlist:hover{ color:#2C7E29; border-color:#b9e3b4; background:#f1faf0; }
.lkpick-row{ -webkit-appearance:none; appearance:none; text-align:left; padding:11px 14px; border:1px solid var(--border-default); border-radius:9px; background:#fff; font:inherit; font-size:14px; font-weight:600; color:var(--navy-700); cursor:pointer; }
.lkpick-row:hover{ border-color:#3DA63D; background:#f1faf0; }
.wl-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.wl-btn{ -webkit-appearance:none; appearance:none; height:44px; padding:0 22px; border-radius:9px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; }
.wl-btn-primary{ background:#3DA63D; color:#fff; border-color:#3DA63D; }
.wl-btn-primary:hover{ background:#2C7E29; }
.wl-btn-ghost{ background:#fff; color:var(--navy-700); border-color:var(--border-default); }
.wl-btn-ghost:hover{ background:var(--gray-50); }
@media (max-width:640px){ .wl-actions{ flex-direction:column; } .wl-actions .wl-btn{ width:100%; } .wl-del{ top:10px; right:10px; } }

/* заголовок секции «Отзывы покупателей · N   4,7 ★★★★★» (как в макете product.html) */
.pc-rev-header{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.pc-rev-header .pc-rev-title{ margin:0; }
.pc-rev-header .pc-rev-count{ color:var(--gray-400); font-weight:600; }
.pc-rev-rate-num{ font-size:26px; font-weight:800; color:var(--navy-700); line-height:1; }
.pc-rev-rate-stars{ display:inline-flex; gap:2px; color:#FFC400; font-size:19px; line-height:1; letter-spacing:1px; }

/* ===================== Мобильное меню каталога (drill-down оверлей) ===================== */
.mm-mob{ display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000000; background:#fff; flex-direction:column; color:var(--navy-700); }
.mm-mob.is-open{ display:flex; }
.mm-mob .mm-head{ display:flex; align-items:center; gap:6px; padding:12px; border-bottom:1px solid var(--border-subtle); }
.mm-mob .mm-title{ flex:1; text-align:center; font-size:17px; font-weight:800; color:var(--navy-700); }
.mm-mob .mm-back, .mm-mob .mm-close{ width:38px; height:38px; border:none; background:none; font-size:26px; line-height:1; color:var(--navy-700); cursor:pointer; padding:0; }
.mm-mob .mm-search{ padding:10px 14px 12px; margin:0; }
.mm-mob .mm-search input{ width:100%; height:46px; box-sizing:border-box; border:1px solid var(--border-default); border-radius:12px; padding:0 16px; font-family:inherit; font-size:14px; color:var(--navy-700); outline:none; background:#fff; }
.mm-mob .mm-list{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mm-mob .mm-row{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid #f0f2f5; text-decoration:none; color:var(--navy-700); font-size:15px; }
.mm-mob .mm-row-name{ flex:1; line-height:1.3; }
.mm-mob .mm-chev{ flex:0 0 auto; color:var(--gray-300); font-size:22px; line-height:1; }
.mm-mob .mm-loading{ padding:22px 16px; color:var(--gray-500); font-size:14px; }

/* ===================== Текстовые страницы (О компании, Доставка, Информация и т.п.) ===================== */
/* раскладку (центр 1440 + padding как шапка) даёт .page-wrap; .text-page — только типографика */
.text-page #breadcrumbs{ margin-bottom:10px; }
.text-page .cat-h1-row h1{ margin:0 0 18px; }
/* читаемая колонка текста + типографика */
.text-page #content{ max-width:none; font-size:15px; line-height:1.65; color:var(--navy-600); }
.text-page #content h2{ font-size:20px; font-weight:800; color:var(--navy-700); margin:26px 0 12px; line-height:1.25; }
.text-page #content h3{ font-size:16px; font-weight:800; color:var(--navy-700); margin:22px 0 10px; }
.text-page #content p{ margin:0 0 14px; }
.text-page #content ul, .text-page #content ol{ margin:0 0 14px; padding-left:22px; }
.text-page #content li{ margin:5px 0; }
/* убрать сетку у layout-таблиц контента (class="border0"), напр. кнопки вакансий */
.text-page #content table.border0 td, .text-page #content table.border0 th{ border:0 !important; }
.text-page #content a{ color:var(--blue-500); text-decoration:none; }
.text-page #content a:hover{ text-decoration:underline; }
.text-page #content img{ max-width:100%; height:auto; border-radius:8px; }
.text-page #content table{ border-collapse:collapse; max-width:100%; margin:0 0 16px; }
.text-page #content table td, .text-page #content table th{ border:1px solid var(--border-subtle); padding:8px 12px; font-size:14px; }
.text-page #content b, .text-page #content strong{ color:var(--navy-700); }


/* ===================== Список новостей / статей (/news/, /articles/) ===================== */
.news-list{ display:flex; flex-direction:column; }
.news-card{ padding:18px 0; border-bottom:1px solid var(--border-subtle); }
.news-card a{ text-decoration:none; display:inline-block; }
.news-card__title{ font-size:16px; font-weight:700; color:var(--navy-700); line-height:1.35; }
.news-card a:hover .news-card__title{ color:#2C7E29; }
.news-card__date{ font-size:13px; color:var(--gray-400); margin:6px 0 8px; }
.news-card__brief{ font-size:14px; color:var(--navy-600); line-height:1.55; }
.news-foot{ margin-top:22px; }
.news-foot__more{ margin-bottom:14px; }
.news-btn{ height:44px; padding:0 22px; background:#fff; color:var(--navy-700); border:1px solid var(--border-default); border-radius:9px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.news-btn:hover{ background:var(--gray-50); }
.news-foot__pages{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--gray-500); }
/* прячем легаси-разделители «|» (текст-ноды), показываем только ссылки-пилюли */
.news-foot__pages .js-pages{ font-size:0; display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.news-foot__pages .js-pages a, .news-foot__pages .js-pages b{ font-size:14px; }
.news-foot__pages a{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; border:1px solid var(--border-default); border-radius:8px; color:var(--navy-700); text-decoration:none; font-weight:600; }
.news-foot__pages a:hover{ border-color:#3DA63D; color:#3DA63D; }
.news-foot__pages .js-pages b{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px; background:#3DA63D; color:#fff; border-radius:8px; }

/* Плитка: фото заполняет квадрат (img лежит внутри <span itemprop=image1>, поэтому
   таргетим потомка, а не прямого ребёнка — иначе оставался натуральный width=150). */
.sq-img span{ display:flex !important; width:100% !important; height:100% !important; align-items:center; justify-content:center; }
.sq-img img{ width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; mix-blend-mode:multiply; }

/* МОБИЛА: плитка — шкала наличия переносится на новую строку; иконки самовывоз/доставка убираем */
@media (max-width:640px){
  .sq-stock-row{ flex-wrap:wrap; }
  .sq-stock-row .sq-remains{ flex-basis:100%; overflow:visible; }
  .pc-deliv .pc-deliv-ic{ display:none !important; }
}

/* МОБИЛА: плитка — «В корзину» на новую строку под степпером */
@media (max-width:640px){
  .sq-buyrow{ flex-direction:column; gap:10px; }
  .sq-buyrow .cat-stepper{ align-self:flex-start; }
  .sq-buyrow .addToCart{ flex:none !important; width:100%; }
}

/* ===== Страницы авторизации (регистрация, восстановление пароля) и сообщения ===== */
.auth-wrap{ max-width:480px; margin:24px auto 44px; }
.auth-card{ background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:28px 28px 30px; box-shadow:0 18px 50px -28px rgba(16,26,44,.4); }
.auth-title{ font-size:22px; font-weight:800; color:var(--navy-700); margin:0 0 6px; }
.auth-sub{ font-size:14px; color:var(--gray-600); margin:0 0 20px; line-height:1.5; }
.auth-field{ display:block; margin-bottom:14px; }
.auth-label{ display:block; font-size:13px; color:var(--gray-600); margin-bottom:6px; }
.auth-req{ color:#E0322B; }
.auth-input{ display:block; width:100%; height:46px; padding:0 14px; border:1.5px solid var(--border-default); border-radius:10px; font:inherit; font-size:15px; color:var(--navy-700); box-sizing:border-box; background:#fff; }
.auth-input:focus{ outline:none; border-color:#3DA63D; }
.auth-phone{ display:flex; align-items:stretch; }
.auth-phone .auth-cc{ display:inline-flex; align-items:center; padding:0 12px; border:1.5px solid var(--border-default); border-right:0; border-radius:10px 0 0 10px; background:var(--gray-50); color:var(--navy-700); font-weight:600; }
.auth-phone .auth-input{ border-radius:0 10px 10px 0; }
.auth-btn{ -webkit-appearance:none; appearance:none; width:100%; height:48px; background:#3DA63D; color:#fff; border:none; border-radius:10px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px; }
.auth-btn:hover{ background:#2C7E29; }
.auth-note{ font-size:12.5px; color:var(--gray-500); margin-top:14px; line-height:1.5; }
.auth-note a{ color:var(--blue-500); text-decoration:none; }
.auth-links{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:13px; }
.auth-links a{ color:var(--blue-500); text-decoration:none; }

/* сообщения ok/error в новом стиле */
.msg-card{ max-width:520px; margin:28px auto 44px; background:#fff; border:1px solid var(--border-subtle); border-radius:16px; padding:28px; text-align:center; box-shadow:0 18px 50px -28px rgba(16,26,44,.4); }
.msg-card.is-err{ border-color:#f3c6c4; }
.msg-ic{ width:54px; height:54px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.msg-ic.ok{ background:#EAF6EA; color:#2C7E29; } .msg-ic.err{ background:#FDEDE9; color:#C0392B; }
.msg-title{ font-size:20px; font-weight:800; color:var(--navy-700); margin:0 0 8px; }
.msg-text{ font-size:14.5px; color:var(--gray-600); line-height:1.55; }
.msg-actions{ margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.msg-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; border:1.5px solid var(--border-default); background:#fff; color:var(--navy-700); }
.msg-btn-primary{ background:#3DA63D; border-color:#3DA63D; color:#fff; }
.msg-btn-primary:hover{ background:#2C7E29; }
.auth-row2{ display:flex; gap:12px; }
.auth-row2 > *{ flex:1; min-width:0; }
@media (max-width:440px){ .auth-row2{ flex-direction:column; gap:0; } }

/* ===== Бренды в каталоге (логотипы, табличная вёрстка #brands — как было) ===== */
#brands{ margin-top:28px; }
#brands .cat-brands-title{ font-size:18px; font-weight:800; color:var(--navy-700); margin-bottom:6px; }
#brands .cat-brands-note{ font-size:13px; color:var(--gray-500); margin-bottom:8px; }
#brands table{ width:100%; border-collapse:separate; border-spacing:10px; table-layout:fixed; }
#brands td{ width:20%; padding:0; vertical-align:middle; }
#brands td a{ display:flex; align-items:center; justify-content:center; height:56px; padding:8px 14px; background:#fff; border:1px solid var(--border-subtle); border-radius:10px; box-sizing:border-box; }
#brands td a:hover{ border-color:#3DA63D; box-shadow:0 6px 16px -10px rgba(16,26,44,.4); }
#brands td img{ max-width:100%; max-height:38px; width:auto; object-fit:contain; display:block; }
@media (max-width:560px){ #brands td{ width:33.33%; } }

/* Баннер «Конструктор» (osbh) — скрыть на мобиле/узких экранах */
@media (max-width:768px){ .osbh-banner{ display:none !important; } }