/* Theme H «Soft Solid» — the tokens of design/h-soft/DESIGN.md (tried on this computer only).
   The page stays as it is; only the buttons and arrows change, by the better-ui rules: shadows for elevation
   (a 1px ring + lift + ambient), a transparent border under them, a press that scales to 0.96 over 150ms,
   hover only on hover-capable pointers, transitions on named properties only, a visible focus ring */
:root {
  --h-navy: #1f3a52; --h-blue: #2b6f9a; --h-blue-hi: #327db0; --h-tick: #3d9ad1;
  --h-ring: 0 0 0 1px rgba(16, 37, 56, .07), 0 1px 2px -1px rgba(16, 37, 56, .08), 0 2px 4px 0 rgba(16, 37, 56, .05);
  --h-ring-hover: 0 0 0 1px rgba(16, 37, 56, .10), 0 1px 2px -1px rgba(16, 37, 56, .10), 0 4px 10px 0 rgba(16, 37, 56, .08);
  --h-float: 0 0 0 1px rgba(16, 37, 56, .06), 0 2px 4px -1px rgba(16, 37, 56, .08), 0 8px 20px -4px rgba(16, 37, 56, .14);
  --h-solid: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(16, 37, 56, .16), 0 4px 10px -2px rgba(31, 58, 82, .22);
  --h-solid-hover: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 56, .18), 0 6px 14px -2px rgba(31, 58, 82, .26);
}

/* Solid buttons: one calm blue with a hairline of light on top — no texture */
.btn-main, .btn-quick.catalog-more, .card .buy, .to-top {
  background: linear-gradient(180deg, var(--h-blue-hi) 0%, var(--h-blue) 100%); color: #fff;
  border: 1px solid transparent; box-shadow: var(--h-solid);
  transition-property: box-shadow, background-color, scale, opacity; transition-duration: 150ms; transition-timing-function: ease-out; }
.btn-main { background: linear-gradient(180deg, #284866 0%, var(--h-navy) 100%); }
.card .buy { border-radius: 12px; }
.card .buy svg { stroke-width: 2.3; }

/* Round arrows on the light page: white, lifted by the layered shadow, the chevron in navy */
.strip-arrow, .lightbox-arrow, .lightbox-close {
  background: #fff; color: var(--h-navy); border: 1px solid transparent; box-shadow: var(--h-float);
  transition-property: box-shadow, color, scale, opacity; transition-duration: 150ms; transition-timing-function: ease-out; }
.strip-arrow svg { width: 20px; height: 20px; }
/* The small arrows: on the banner and beside «Товар тижня» */
.mini-arrow, .rotator-arrows button {
  background: #fff; color: var(--h-navy); border: 1px solid transparent; box-shadow: var(--h-ring);
  transition-property: box-shadow, color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }

/* Chips, «Назад», the catalog sections: white with a ring instead of a grey fill */
.catalog-jump a, .back-btn, .chip {
  background: #fff; border: 1px solid transparent; box-shadow: var(--h-ring);
  transition-property: box-shadow, background-color, color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.catalog-jump a.on { background: var(--h-navy); color: #fff; box-shadow: var(--h-solid); }
.catalog-jump a.on .cat-i { color: #fff; }
.catalog-jump a.next { box-shadow: var(--h-ring), inset 0 0 0 1.5px var(--h-tick); }

/* Hover only where a pointer can hover (a tap must not leave it stuck) */
@media (hover: hover) {
  .btn-main:hover { background: linear-gradient(180deg, #2f5576 0%, #24435f 100%); box-shadow: var(--h-solid-hover); }
  .btn-quick.catalog-more:hover, .card .buy:hover, .to-top:hover {
    background: linear-gradient(180deg, #3a8bc2 0%, var(--h-blue-hi) 100%); box-shadow: var(--h-solid-hover); }
  .strip-arrow:hover, .lightbox-arrow:hover, .lightbox-close:hover { background: #fff; color: var(--h-blue); transform: translateY(-50%);
    box-shadow: 0 0 0 1px rgba(16, 37, 56, .08), 0 3px 6px -1px rgba(16, 37, 56, .10), 0 12px 28px -6px rgba(16, 37, 56, .20); }
  .lightbox-close:hover { transform: none; }
  .mini-arrow:hover, .rotator-arrows button:hover { background: #fff; color: var(--h-blue); box-shadow: var(--h-ring-hover); }
  .catalog-jump a:not(.on):hover, .back-btn:hover, .chip:hover { background: #fff; color: var(--h-blue); box-shadow: var(--h-ring-hover); }
}

/* A press scales to 0.96 (never a disabled control) */
.btn-main:not(:disabled):active, .btn-quick.catalog-more:active, .card .buy:not(:disabled):active, .to-top:active,
.strip-arrow:not(:disabled):active, .mini-arrow:active, .rotator-arrows button:active, .catalog-jump a:active,
.back-btn:active, .chip:active, .lightbox-arrow:active { scale: .96; }

/* A clear focus ring for the keyboard */
.btn-main:focus-visible, .btn-quick:focus-visible, .card .buy:focus-visible, .strip-arrow:focus-visible, .mini-arrow:focus-visible,
.rotator-arrows button:focus-visible, .catalog-jump a:focus-visible, .back-btn:focus-visible, .chip:focus-visible, .to-top:focus-visible {
  outline: 2px solid var(--h-tick); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn-main, .btn-quick.catalog-more, .card .buy, .to-top, .strip-arrow, .mini-arrow, .rotator-arrows button,
  .catalog-jump a, .back-btn, .chip { transition-property: box-shadow, background-color, color, opacity; }
  :is(.btn-main, .btn-quick, .card .buy, .to-top, .strip-arrow, .mini-arrow, .rotator-arrows button, .catalog-jump a, .back-btn, .chip):active { scale: 1; }
}