/* ------------------------------------------------------------------
   BookLab — OUCI-inspired skin.  PILOT: scoped to <body class="ouci">
   so only the pages that opt in are affected.  Delete this file and
   the <body> class to revert completely.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'e-Ukraine';
  font-display: swap;
  src: url('fonts/e-Ukraine-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'e-Ukraine';
  font-display: swap;
  src: url('fonts/e-Ukraine-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

body.ouci {
  --ouci-ink: #000;
  --ouci-muted: #6c757d;
  --ouci-canvas: #fff;
  --ouci-line: rgba(0, 0, 0, .12);
  --ouci-accent-a: #c3aab2;
  --ouci-accent-b: #99eecc;
  --ouci-accent-c: #80c0c8;
  --ouci-accent-d: #4b8bfa;

  font-family: 'e-Ukraine', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 300;
  color: var(--ouci-ink);
  background-color: #ccf3de;
}

/* Soft pastel field behind the white canvas (own artwork, not copied). */
body.ouci::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 40rem at 88% -8%, #9beaca 0%, rgba(155, 234, 202, 0) 62%),
    radial-gradient(52rem 38rem at 6% 4%, #cfe4f4 0%, rgba(207, 228, 244, 0) 58%),
    radial-gradient(46rem 36rem at 76% 92%, #f7e7c9 0%, rgba(247, 231, 201, 0) 60%),
    linear-gradient(160deg, #ccf3de 0%, #e7eef3 55%, #f6efe6 100%);
}

/* ---------- the white canvas ---------- */

body.ouci #container {
  max-width: 1520px;
  margin: 0 auto;
  background: var(--ouci-canvas);
  box-shadow: 1px 0 4px 1px rgba(0, 0, 0, .075);
}

body.ouci #container > nav#top,
body.ouci #container > header,
body.ouci #container > main,
body.ouci #container > footer {
  padding-left: max(min(16px + 44 * (100vw - 36rem) / 416, 3.75rem), 1rem);
  padding-right: max(min(16px + 44 * (100vw - 36rem) / 416, 3.75rem), 1rem);
}

body.ouci #container > nav#top > .container,
body.ouci #container > header > .container,
body.ouci #container > main > .container,
body.ouci #container > footer > .container,
body.ouci #common-home.container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- header strip ---------- */

body.ouci #free-shipping-banner {
  background: #111 !important;
  font-size: 13px;
  letter-spacing: .01em;
}

body.ouci nav#top {
  background: transparent;
  border: 0;
  font-size: 13px;
  padding-top: 18px;
  /* stylesheet.css leaves a margin here. It stacked under whatever the header
     added, so the two "space above BOOKLAB" numbers below meant different real
     distances on the home page and everywhere else. The gap is set in exactly
     one place now: --gap-wordmark-top. */
  margin-bottom: 0;
  color: var(--ouci-muted);
}
body.ouci nav#top a,
body.ouci nav#top .dropdown-toggle {
  color: var(--ouci-ink);
  opacity: .6;
  text-decoration: none;
}
body.ouci nav#top a:hover,
body.ouci nav#top .dropdown-toggle:hover { opacity: 1; }

/* No padding of its own: the space above the wordmark is --gap-wordmark-top and
   the space below it is --page-gap-logo. 6px here was a third contributor that
   applied to the home page only, because the rule further down zeroed it for
   every other page — which is most of the 7px the two heads differed by. */
body.ouci header {
  background: transparent;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* The wordmark. It is the same word in the same place on every page, so it is
   one size and one treatment: this rule dresses the clickable BOOKLAB on the
   inner pages and .ouci-hero__mark dresses the home page's, both from
   --fs-wordmark. They used to be 30px at .22em here and 20px at .28em there,
   which read as two different logos when you moved between the two. */
body.ouci .ouci-logo {
  display: inline-block;
  font-family: 'e-Ukraine', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-wordmark);
  /* 1.8 by inheritance: a 22px word in a 40px box, which put ~9px of invisible
     leading above it and made --gap-wordmark-top mean 16 and measure 23. */
  line-height: 1.2;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouci-muted);
  text-decoration: none;
  padding: 0;
}
body.ouci .ouci-logo:hover { color: var(--ouci-ink); }

/* Category menu: plain text nav, no coloured bar. */
body.ouci #menu.navbar {
  background: transparent !important;
  border: 0;
  padding-left: 0;
  padding-right: 0;
}
body.ouci #menu .nav-link,
body.ouci #menu #category,
body.ouci #menu #menu-ai-button {
  color: var(--ouci-ink);
  background: transparent;
  border: 0;
  font-weight: 300;
}
body.ouci #menu .nav-link { opacity: .7; }
body.ouci #menu .nav-link:hover { opacity: 1; }
body.ouci #menu .dropdown-menu {
  border: 0;
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
  padding: 24px;
}
body.ouci #menu .dropdown-item {
  font-weight: 300;
  border-radius: 0;
  padding-left: 0;
}

/* ---------- home hero ---------- */

body.ouci .ouci-hero { padding-top: 12px; }
@media (max-width: 991.98px) {
  body.ouci .ouci-hero { padding-top: 8px; }
}

body.ouci .ouci-hero__mark {
  font-size: var(--fs-wordmark);
  line-height: 1.2;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouci-muted);
}

body.ouci .ouci-hero__title {
  margin-top: 40px;
  font-size: var(--fs-hero-title);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-shadow: 2px 4px 8px hsla(0, 0%, 45%, .18);
}

/* ---------- stat tiles ---------- */

body.ouci .ouci-stats { margin-top: 120px; }
@media (max-width: 991.98px) {
  body.ouci .ouci-stats { margin-top: 64px; }
}
body.ouci .ouci-stat {
  border-top: 4px solid var(--ouci-ink);
  padding-top: 16px;
  padding-bottom: 60px;
  line-height: 1.35;
}
body.ouci .ouci-stat__value {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 24px;
}
body.ouci .ouci-stat p {
  margin: 0;
  font-size: 15px;
}

/* ---------- section rules + product cards ---------- */

body.ouci #content h1,
body.ouci #content h2,
body.ouci #content h3 {
  font-weight: 300;
  letter-spacing: -.01em;
}
body.ouci #content h3 {
  border-bottom: 2px solid var(--ouci-ink);
  padding-bottom: 10px;
  margin-bottom: 32px;
  font-size: var(--fs-section);
}

body.ouci .product-thumb {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.ouci .product-thumb .image img { border-radius: 2px; }
body.ouci .product-thumb .description,
body.ouci .product-thumb .caption { padding-left: 0; padding-right: 0; }
body.ouci .product-thumb h4,
body.ouci .product-thumb .caption a {
  font-size: 15px;
  font-weight: 300;
  color: var(--ouci-ink);
  text-decoration: none;
}
body.ouci .product-thumb .price {
  font-size: 15px;
  font-weight: 400;
  color: var(--ouci-ink);
}
body.ouci .product-thumb .price-old { color: var(--ouci-muted); }
body.ouci .product-thumb .price-new { color: var(--ouci-ink); }

body.ouci .btn-primary,
body.ouci .btn-light,
body.ouci .btn-secondary {
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #333;
  --bs-btn-hover-border-color: #333;
  --bs-btn-hover-color: #fff;
  border-radius: 50px;
  font-weight: 300;
}

/* Gradient hairline used as a section divider, like OUCI's search underline. */
body.ouci .ouci-rule {
  height: 2px;
  border: 0;
  opacity: 1;
  background: linear-gradient(68.94deg,
    var(--ouci-accent-a) -4.77%,
    var(--ouci-accent-b) 46.72%,
    var(--ouci-accent-c) 90.23%,
    var(--ouci-accent-d) 134.46%);
}

/* ---------- footer ---------- */

body.ouci footer {
  background: transparent;
  color: var(--ouci-ink);
  border-top: 1px solid var(--ouci-line);
  margin-top: 80px;
  padding-top: 40px;
  padding-bottom: 40px;
  font-weight: 300;
}
body.ouci footer h5 { font-weight: 400; font-size: 15px; }
/* .65 renders as #91989e — 2.92:1 on white, the last contrast failure. .85 is
   the lowest step that clears 4.5:1 while keeping the footer visibly secondary. */
body.ouci footer a { color: var(--ouci-ink); opacity: .85; text-decoration: none; }
body.ouci footer a:hover { opacity: 1; }

/* ---------- header: hand search over to the hero ---------- */

body.ouci-common-home header .col-md-5 { display: none; }
body.ouci-common-home header .col-md-3.col-lg-4 { flex: 0 0 auto; width: auto; }
body.ouci header #cart { margin-left: auto; width: auto; flex: 0 0 auto; }
body.ouci header .row { align-items: center; }

body.ouci #cart > .btn,
body.ouci #cart button.btn {
  background: transparent !important;
  border: 1px solid var(--ouci-ink) !important;
  color: var(--ouci-ink) !important;
  border-radius: 50px;
  font-weight: 300;
  font-size: 14px;
  padding: 8px 18px;
}
body.ouci #cart > .btn:hover,
body.ouci #cart button.btn:hover {
  background: var(--ouci-ink) !important;
  color: #fff !important;
}

/* ---------- product cards: monochrome, no red circles ---------- */

body.ouci .product-thumb .btn,
body.ouci .product-thumb button {
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-ink) !important;
  border-radius: 50px;
  box-shadow: none;
}
body.ouci .product-thumb .btn:hover,
body.ouci .product-thumb button:hover {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}
body.ouci .product-thumb .image { margin-bottom: 18px; }
body.ouci .product-thumb .image img {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
body.ouci .product-thumb h4 a,
body.ouci .product-thumb .description a { color: var(--ouci-ink); }

/* Softer hero shadow, a touch more air before the tiles. */
body.ouci .ouci-hero__title { text-shadow: 1px 3px 10px hsla(0, 0%, 45%, .14); }

/* Let the pastel field show at the edges of very wide screens. */
@media (min-width: 1640px) {
  body.ouci #container { max-width: 1520px; }
}

/* ==================================================================
   STEP 2 — navigation, category and search pages
   ================================================================== */

/* ---------- navigation ---------- */

body.ouci #menu.navbar {
  border-bottom: 1px solid var(--ouci-line);
  padding-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 8px;
}
body.ouci #menu .nav-link {
  padding-left: 0;
  padding-right: 32px;
  font-size: var(--hero-ctl-fs);
  letter-spacing: .01em;
}
body.ouci #menu .dropdown-menu { margin-top: 12px; }
body.ouci #menu .dropdown-item {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 14px;
}
body.ouci #menu .dropdown-item:hover,
body.ouci #menu .dropdown-item:focus {
  background: transparent;
  color: var(--ouci-ink);
  text-decoration: underline;
}
body.ouci #menu #menu-ai-button {
  order: 3;
  margin-left: auto !important;
  border: 1px solid var(--ouci-line) !important;
  border-radius: 50px;
  font-size: 13px;
  padding: 6px 16px;
}
body.ouci #menu #menu-ai-button:hover {
  border-color: var(--ouci-ink) !important;
  background: var(--ouci-ink) !important;
  color: #fff !important;
}
@media (min-width: 992px) {
  body.ouci #menu #navbar-menu { order: 2; }
}

/* ---------- inner pages: the header search becomes the headline field ---------- */

body.ouci:not(.ouci-common-home) header .row { flex-wrap: wrap; }
body.ouci:not(.ouci-common-home) header .col-md-5 {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  order: 3;
  margin-top: 20px;
}
body.ouci:not(.ouci-common-home) header .col-md-5 > .position-relative { margin-bottom: 0 !important; }

body.ouci:not(.ouci-common-home) header form.input-group {
  position: relative;
  flex-wrap: nowrap;
  align-items: center;
  padding-bottom: 6px;
}
body.ouci:not(.ouci-common-home) header form.input-group::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(68.94deg,
    var(--ouci-accent-a) -4.77%,
    var(--ouci-accent-b) 46.72%,
    var(--ouci-accent-c) 90.23%,
    var(--ouci-accent-d) 134.46%);
}
body.ouci:not(.ouci-common-home) #input-header-search {
  font-family: inherit;
  font-size: clamp(20px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  height: auto;
  padding: 6px 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}
body.ouci:not(.ouci-common-home) #input-header-search::placeholder {
  color: #b6bbc0;
  transition: opacity .18s ease-in-out;
}
body.ouci:not(.ouci-common-home) #input-header-search:focus::placeholder { opacity: 0; }
body.ouci:not(.ouci-common-home) header form.input-group .btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--ouci-ink) !important;
  font-size: clamp(18px, 2vw, 24px);
  padding-right: 0;
  box-shadow: none;
}

body.ouci #header-search-autocomplete {
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important;
}
body.ouci #header-search-autocomplete .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--ouci-line);
  font-weight: 300;
}
body.ouci #header-search-autocomplete .list-group-item.active {
  background: #f5f5f5;
  color: var(--ouci-ink);
}

/* ---------- breadcrumb + page heading ---------- */

body.ouci .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 24px 0 8px;
  font-size: 13px;
}
body.ouci .breadcrumb-item a { color: var(--ouci-muted); text-decoration: none; }
body.ouci .breadcrumb-item a:hover { color: var(--ouci-ink); }
body.ouci .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: #c9ced3;
  background: none;
  width: auto;
  padding-right: .5rem;
}

body.ouci #content h1 {
  font-size: var(--fs-page-title);
  font-weight: 300;
  letter-spacing: -.02em;
  margin: 8px 0 var(--page-gap-title);
}

/* ---------- refine-search list ---------- */

body.ouci-product-category #content .row-cols-lg-4 ul,
body.ouci-product-category #content .col-sm-3 ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
body.ouci-product-category #content .row-cols-lg-4 li,
body.ouci-product-category #content .col-sm-3 li { margin-bottom: 10px; }
body.ouci-product-category #content .row-cols-lg-4 li a,
body.ouci-product-category #content .col-sm-3 li a {
  color: var(--ouci-ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
body.ouci-product-category #content .row-cols-lg-4 li a:hover,
body.ouci-product-category #content .col-sm-3 li a:hover { text-decoration: underline; }

/* ---------- toolbar above the product grid ---------- */

/* One flex row: view toggle on the left, the two selects pinned right, everything
   on a single baseline. (Was a Bootstrap grid with an empty column and an offset,
   which drifted out of line as soon as a label wrapped.) */
body.ouci .product-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ouci-ink);
  padding-bottom: 12px;
  margin-bottom: 40px;
}
body.ouci .product-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  flex-wrap: wrap;
}
body.ouci .product-toolbar__field {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ouci .product-toolbar__field label {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  color: var(--ouci-muted);
  white-space: nowrap;
}
/* All three controls share one height, one type size and one pill outline, so the row
   reads as a single set rather than a borrowed toggle next to two bare selects. */
body.ouci .product-toolbar {
  --toolbar-height: 40px;
}
body.ouci #content .product-toolbar .form-select {
  background-color: transparent;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  box-shadow: none;
  font-family: inherit;
  font-weight: 300;
  font-size: 14px;
  color: var(--ouci-ink);
  height: var(--toolbar-height);
  padding: 0 2.2rem 0 16px;
  background-position: right 14px center;
  width: auto;
  line-height: 1.4;
}
body.ouci #content .product-toolbar .form-select:hover,
body.ouci #content .product-toolbar .form-select:focus {
  border-color: var(--ouci-ink);
  outline: 0;
}

/* Segmented control: two halves of one pill, the active half filled. */
body.ouci .product-toolbar__view { border-radius: 50px; overflow: hidden; }
body.ouci .product-toolbar__view .btn.btn-light {
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-muted) !important;
  border-radius: 0 !important;
  height: var(--toolbar-height);
  min-width: 52px;
  padding: 0 16px;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.ouci .product-toolbar__view .btn.btn-light:first-child {
  border-radius: 50px 0 0 50px !important;
}
body.ouci .product-toolbar__view .btn.btn-light:last-child {
  border-radius: 0 50px 50px 0 !important;
  border-left: 0 !important;
}
body.ouci .product-toolbar__view .btn.btn-light:hover { color: var(--ouci-ink) !important; }
body.ouci .product-toolbar__view .btn.btn-light.active {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}

/* ---------- grid spacing, pagination, result counter ---------- */

body.ouci #product-list > .col { margin-bottom: 76px !important; }

/* The pager is the one control on a 28-page category that gets used repeatedly, so the
   targets are a real 42px rather than a line of 38px-wide text. */
body.ouci .product-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
body.ouci .product-pager__results {
  color: var(--ouci-muted);
  font-size: 13px;
}

body.ouci .pagination { --bs-pagination-border-width: 0; gap: 6px; margin: 0; }
body.ouci .pagination .page-link {
  color: var(--ouci-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50px;
  font-weight: 300;
  font-size: 15px;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.ouci .pagination .page-link:hover {
  border-color: var(--ouci-line);
  color: var(--ouci-ink);
}
body.ouci .pagination .page-item.active .page-link {
  background: var(--ouci-ink);
  border-color: var(--ouci-ink);
  color: #fff;
}
/* The ellipsis is a marker, not a target. */
body.ouci .pagination .page-item--gap .page-link {
  min-width: 24px;
  padding: 0;
  color: var(--ouci-muted);
  pointer-events: none;
}
body.ouci .pagination .page-link--nav {
  border-color: var(--ouci-line);
  font-size: 13px;
}
body.ouci .pagination .page-link--nav:hover {
  background: var(--ouci-ink);
  border-color: var(--ouci-ink);
  color: #fff;
}
body.ouci .text-end .results,
body.ouci #content > .row:last-of-type .text-end {
  color: var(--ouci-muted);
  font-size: 13px;
}

/* ---------- breadcrumb: strip the stock chevron pills ---------- */

body.ouci .breadcrumb {
  border: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
body.ouci .breadcrumb > li.breadcrumb-item {
  text-shadow: none;
  padding: 0 10px 0 0;
  /* stylesheet.css pins every crumb to `white-space: nowrap`. The last crumb is the
     product title, so on a narrow screen a long one cannot wrap and pushes the whole
     page wider than the viewport (a Spanish title overflowed 390px by 25px while the
     shorter Ukrainian one fitted). Let crumbs wrap, and break a title with no spaces. */
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.ouci .breadcrumb > li.breadcrumb-item:after { display: none !important; }
body.ouci .breadcrumb > li.breadcrumb-item + li:before {
  content: '/';
  padding: 0 10px 0 0;
  color: #c9ced3;
}
body.ouci .breadcrumb > li.breadcrumb-item > a { color: var(--ouci-muted); }
body.ouci .breadcrumb > li.breadcrumb-item > a:hover {
  color: var(--ouci-ink);
  text-decoration: underline;
}
body.ouci .breadcrumb > li.breadcrumb-item:last-child > a {
  color: var(--ouci-ink);
  font-weight: 400;
}

/* ---------- left column: OUCI-style filter list ---------- */

body.ouci #column-left { padding-right: 48px; }

body.ouci #column-left .list-group {
  border: 0;
  border-top: 4px solid var(--ouci-ink);
  border-radius: 0;
  padding-top: 14px;
}
body.ouci #column-left .list-group-item {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ouci-ink) !important;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}
body.ouci #column-left .list-group-item:hover { text-decoration: underline; }
body.ouci #column-left .list-group-item.active {
  font-weight: 400;
  box-shadow: inset 3px 0 0 var(--ouci-ink);
  padding-left: 12px;
}

/* ---------- forms and buttons on inner pages ---------- */

body.ouci .btn-primary,
body.ouci .btn-danger,
body.ouci #button-search {
  background-color: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
  border-radius: 50px;
  font-weight: 300;
  padding: 10px 28px;
}
body.ouci .btn-primary:hover,
body.ouci .btn-danger:hover,
body.ouci #button-search:hover {
  background-color: #333 !important;
  border-color: #333 !important;
}

body.ouci #content .form-select,
body.ouci #content .form-control {
  font-family: inherit;
  font-size: var(--form-ctl-fs);
  font-weight: 300;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--ouci-line);
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
}
body.ouci #content .form-select:focus,
body.ouci #content .form-control:focus {
  border-bottom-color: var(--ouci-ink);
  box-shadow: none;
}
body.ouci #content .input-group-text {
  background: transparent;
  border: 0;
  padding-left: 0;
  color: var(--ouci-muted);
  font-size: 13px;
}
body.ouci #content .form-check-label {
  font-size: 14px;
  color: var(--ouci-muted);
}
body.ouci #content .form-check-input:checked {
  background-color: var(--ouci-ink);
  border-color: var(--ouci-ink);
}

/* Search page: same rule under the section heading as elsewhere. */
body.ouci-product-search #content h2 {
  border-bottom: 2px solid var(--ouci-ink);
  padding-bottom: 10px;
  margin: 48px 0 32px;
  font-size: 1.25rem;
  font-weight: 300;
}
body.ouci-product-search #content > .row .btn-group { margin-bottom: 0; }

/* Grid/list toggle: outline pair, filled when active. */
body.ouci .btn-group #button-list,
body.ouci .btn-group #button-grid {
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-ink) !important;
}
body.ouci .btn-group #button-list.active,
body.ouci .btn-group #button-grid.active {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}

/* ==================================================================
   STEP 3 — product page
   ================================================================== */

body.ouci-product-product #content > .row.mb-3 { --bs-gutter-x: 64px; }

/* ---------- cover art ---------- */

body.ouci-product-product .image .img-thumbnail {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 2px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
}
body.ouci-product-product .image > div .img-thumbnail {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  width: 76px;
  margin-right: 8px;
}
body.ouci-product-product .image { text-align: center; }
/* The cover, at a size that leaves the page looking like a shop rather than a
   poster. Two rules used to set this — 560px here and 620px three hundred lines
   down — so the number you read was not the number on screen. One token now. */
body.ouci-product-product .image > a > .img-thumbnail {
  max-height: var(--product-image-max-h);
  width: auto;
}

/* ---------- title, meta table ---------- */

/* Same h1 as the catalogue page. It carried its own clamp() and came out 40px
   against the catalogue's 48px on the same screen. The size is --fs-page-title
   for both now; only the space under it differs, and that is a token too. */
body.ouci-product-product #content h1 { margin: 0 0 28px; }

/* It sits under the buy row now rather than directly under the h1, so it needs
   the space its own rule used to get from the heading above it. */
body.ouci .product-meta {
  border-top: 2px solid var(--ouci-ink);
  padding-top: 14px;
  margin-top: 32px;
}
body.ouci .product-meta li { font-size: 14px; padding: 7px 0; }
body.ouci .product-meta .label { color: var(--ouci-muted); font-weight: 300; }
body.ouci .product-meta .value { font-weight: 400; color: var(--ouci-ink); }
body.ouci .product-meta .dots { border-bottom-color: #e3e6e9; }
body.ouci .product-meta a {
  color: var(--ouci-ink) !important;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--ouci-line);
}
body.ouci .product-meta a:hover {
  color: var(--ouci-ink) !important;
  border-bottom-color: var(--ouci-ink);
  text-decoration: none;
}

/* ---------- price ---------- */

/* The price was declared twice — a clamp() here and --fs-product-price further
   down — and the two agreed at 1440px by coincidence and nowhere else. The
   token is the only source now. */
body.ouci-product-product #content h2 {
  font-size: var(--fs-product-price);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 24px 0 4px;
}
body.ouci-product-product .price-new { color: var(--ouci-ink); }
body.ouci-product-product .price-old {
  color: var(--ouci-muted);
  text-decoration: line-through;
  font-size: 1rem;
}

/* ---------- buy row ---------- */

/* Купити and the heart are one pair, and were 340x59 at 16px next to 54x59 at
   16.25px — a circle that was not round. Both take --hero-ctl-h, the same height
   as the catalogue, AI and search controls in the header, so the page has one
   control height rather than four. */
body.ouci .product-actions { display: flex; align-items: center; margin-top: 20px; gap: 12px; }
body.ouci #button-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ouci-ink) !important;
  border: 1px solid var(--ouci-ink) !important;
  color: #fff !important;
  border-radius: 50px;
  font-weight: 300;
  font-size: 16px;
  height: var(--hero-ctl-h);
  padding: 0 40px;
  flex: 1 1 auto;
  max-width: 340px;
}
body.ouci #button-cart:hover { background: #333 !important; border-color: #333 !important; }
body.ouci #button-wishlist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-ink) !important;
  border-radius: 50%;
  font-size: 16px;
  width: var(--hero-ctl-h);
  min-width: var(--hero-ctl-h);
  height: var(--hero-ctl-h);
  padding: 0;
  flex: 0 0 auto;
}
body.ouci #button-wishlist:hover {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}

/* ---------- trust badges + delivery block ---------- */

body.ouci .product-badges { margin: 22px 0; }
body.ouci .product-badges .badge-pill {
  background: transparent;
  color: var(--ouci-muted);
  border: 1px solid var(--ouci-line);
  font-weight: 300;
  font-size: 13px;
  padding: 7px 16px;
}
body.ouci .product-badges .badge-pill i { color: var(--ouci-ink); }

body.ouci .product-delivery-info {
  border: 0;
  border-top: 1px solid var(--ouci-line);
  border-radius: 0;
  padding: 22px 0 0;
  margin-top: 28px;
}
body.ouci .product-delivery-info h4 {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 14px;
}
body.ouci .product-delivery-info li {
  color: var(--ouci-ink);
  font-weight: 300;
  font-size: 14px;
}
body.ouci .product-delivery-info li i { color: #b9bfc5; }

/* Accepted payment marks, under the "secure payment" pill they back up. */
body.ouci .product-badges .payment-icons {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
body.ouci .product-badges .payment-icons img {
  display: block;
  width: auto;
  height: 32px;
}

/* ---------- tabs ---------- */

body.ouci .nav-tabs {
  border: 0;
  border-bottom: 2px solid var(--ouci-ink);
  margin-top: 56px;
  gap: 36px;
}
body.ouci .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--ouci-muted);
  font-weight: 300;
  font-size: 15px;
  padding: 8px 0 12px;
}
body.ouci .nav-tabs .nav-link:hover { color: var(--ouci-ink); }
body.ouci .nav-tabs .nav-link.active {
  color: var(--ouci-ink);
  box-shadow: inset 0 -3px 0 var(--ouci-ink);
}
body.ouci .tab-content { padding-top: 32px; font-weight: 300; line-height: 1.65; }
body.ouci .tab-content p { max-width: 78ch; }

/* ---------- description body ---------- */

body.ouci #tab-description h4 {
  font-size: 1.05rem;
  font-weight: 400;
  margin: 32px 0 4px;
}
body.ouci #tab-description ul {
  border: 0;
  border-radius: 0;
  margin-top: 12px;
  max-width: 78ch;
}
body.ouci #tab-description ul li {
  background: transparent;
  border-bottom: 1px solid var(--ouci-line);
  padding: 12px 0 12px 1.6em;
}
body.ouci #tab-description ul li::before {
  color: var(--ouci-ink);
  font-weight: 400;
}

/* ---------- specification table ---------- */

body.ouci #tab-specification .table {
  --bs-table-bg: transparent;
  border: 0;
  max-width: 780px;
}
body.ouci #tab-specification .table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  border-color: var(--ouci-line);
  padding: 12px 0;
  font-weight: 300;
}
body.ouci #tab-specification thead td {
  border-bottom: 2px solid var(--ouci-ink) !important;
  padding-top: 28px !important;
}
body.ouci #tab-specification thead strong { font-weight: 400; }

/* ---------- related products ---------- */

body.ouci #content h3 { margin-top: 64px; }

/* On a product page the sidebar only ever shows the single root category,
   so drop it and let the product use the full canvas. */
body.ouci-product-product #column-left { display: none !important; }

/* ==================================================================
   STEP 4 — cart and checkout
   ================================================================== */

/* ---------- cart table ---------- */

body.ouci #output-cart .table {
  border: 0;
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
body.ouci #output-cart .table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  border-color: var(--ouci-line);
  padding: 18px 12px;
  font-weight: 300;
  vertical-align: middle;
  background: transparent;
}
body.ouci #output-cart thead th {
  border-bottom: 2px solid var(--ouci-ink);
  color: var(--ouci-muted);
  font-weight: 400;
  font-size: 13px;
  padding-bottom: 10px;
}
body.ouci #output-cart td a {
  color: var(--ouci-ink);
  font-weight: 400;
  text-decoration: none;
}
body.ouci #output-cart td a:hover { text-decoration: underline; }
body.ouci #output-cart small { color: var(--ouci-muted); }
body.ouci #output-cart .img-thumbnail {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

/* quantity + update/remove controls */
body.ouci #output-cart .input-group {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
body.ouci #output-cart .input-group .form-control {
  flex: 0 0 62px;
  width: 62px;
  text-align: center;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  padding: 7px 0;
  background: transparent;
}
body.ouci #output-cart .btn-primary,
body.ouci #output-cart .btn-danger {
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-ink) !important;
  border-radius: 50% !important;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.ouci #output-cart .btn-primary:hover,
body.ouci #output-cart .btn-danger:hover {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}

/* totals */
body.ouci #checkout-total td {
  border: 0;
  padding: 8px 12px;
  font-weight: 300;
}
body.ouci #checkout-total tr:first-child td { padding-top: 22px; }
body.ouci #checkout-total tr:last-child td {
  border-top: 2px solid var(--ouci-ink);
  font-size: 1.2rem;
  font-weight: 400;
  padding-top: 16px;
}

/* ---------- accordions (shipping estimate, coupon) ---------- */

body.ouci .accordion,
body.ouci .accordion-item {
  border: 0;
  background: transparent;
  border-radius: 0;
}
body.ouci .accordion-button {
  background: transparent !important;
  color: var(--ouci-ink) !important;
  box-shadow: none !important;
  border: 0;
  border-top: 1px solid var(--ouci-line);
  border-radius: 0 !important;
  padding: 20px 0;
  font-weight: 300;
}
body.ouci .accordion-button::after { margin-left: auto; }
body.ouci .accordion-body { padding: 4px 0 26px; }

/* ---------- checkout cards ---------- */

/* Cards are dressed as the <fieldset><legend> blocks in the other column, so the
   two columns of the checkout start on the same line. */
body.ouci #checkout-checkout .card,
body.ouci #checkout-success .card {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin-bottom: 44px;
}
body.ouci #checkout-checkout .card-header,
body.ouci #checkout-success .card-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ouci-line);
  padding: 0 0 10px;
  margin-bottom: 20px;
  font-size: 1.05rem;
  font-weight: 400;
}
body.ouci #checkout-checkout .card-body,
body.ouci #checkout-success .card-body { padding: 8px 0 12px; }

body.ouci .form-label { font-size: 13px; color: var(--ouci-muted); font-weight: 300; }
body.ouci .required .form-label::after,
body.ouci .required .col-form-label::after { color: var(--ouci-ink); }
body.ouci legend {
  font-size: 1.05rem;
  font-weight: 400;
  border-bottom: 1px solid var(--ouci-line);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* ---------- alerts ---------- */

body.ouci .alert {
  border: 0;
  border-left: 3px solid var(--ouci-ink);
  border-radius: 0;
  background: #f5f5f5;
  color: var(--ouci-ink);
  font-weight: 300;
}
body.ouci .alert-danger { border-left-color: #c0392b; }
body.ouci .alert-success { border-left-color: #2e7d4f; }
body.ouci .alert i { color: var(--ouci-muted); }

/* ---------- secondary buttons ---------- */

body.ouci .btn-light:not(#button-wishlist):not(.btn-group .btn):not(header .btn) {
  background: transparent !important;
  border: 1px solid var(--ouci-ink) !important;
  color: var(--ouci-ink) !important;
  border-radius: 50px;
  font-weight: 300;
}
body.ouci .btn-light:not(#button-wishlist):not(.btn-group .btn):not(header .btn):hover {
  background: var(--ouci-ink) !important;
  color: #fff !important;
}
body.ouci #checkout-cart .row .btn,
body.ouci #checkout-checkout .btn { padding: 11px 30px; }

/* The headline search button must stay borderless — it is a .btn-light too. */
body.ouci:not(.ouci-common-home) header form.input-group .btn.btn-light {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ouci-ink) !important;
}

/* ---------- links, required markers, order summary ---------- */

body.ouci #content a:not(.btn):not(.dropdown-item):not(.page-link):not(.list-group-item):not(.category-chip) {
  color: var(--ouci-ink);
}
body.ouci div.required .col-form-label:before,
body.ouci div.required .form-label:before {
  color: var(--ouci-ink);
  font-weight: 400;
}

body.ouci #checkout-confirm .table,
body.ouci #checkout-confirm .table-bordered {
  border: 0;
  --bs-table-bg: transparent;
}
body.ouci #checkout-confirm .table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  border-color: var(--ouci-line);
  padding: 14px 0;
  font-weight: 300;
  background: transparent;
}
body.ouci #checkout-confirm thead td,
body.ouci #checkout-confirm thead th {
  border-bottom: 2px solid var(--ouci-ink) !important;
  color: var(--ouci-muted);
  font-weight: 400;
  font-size: 13px;
}
body.ouci #checkout-confirm tfoot tr:last-child td {
  border-top: 2px solid var(--ouci-ink);
  font-weight: 400;
  font-size: 1.05rem;
}

/* Toggles pick up the ink colour when on. */
body.ouci .form-check-input:checked {
  background-color: var(--ouci-ink);
  border-color: var(--ouci-ink);
}

/* ==================================================================
   STEP 5 — footer and information pages
   ================================================================== */

/* ---------- footer ---------- */

body.ouci footer {
  margin-top: 100px;
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid var(--ouci-line);
}
body.ouci footer h5 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouci-muted);
  margin-bottom: 20px;
}
body.ouci footer ul { margin-bottom: 0; }
body.ouci footer li { margin-bottom: 10px; }
body.ouci footer a {
  font-size: 14px;
  font-weight: 300;
  /* This block overrides the opacity set further up, so it is the one that
     decides the rendered colour. The base colour resolves to #6c757d, which is
     4.69:1 on white on its own — any opacity below 1 pushes it under the 4.5:1
     minimum (.75 rendered #91989e at 2.92, .85 rendered #828a91 at 3.50). The
     colour itself is already the muted token, so the footer stays secondary
     without fading it. */
  opacity: 1;
}
body.ouci footer a:hover { opacity: 1; text-decoration: underline; }
body.ouci footer hr {
  margin: 48px 0 24px;
  border: 0;
  border-top: 1px solid var(--ouci-line);
  opacity: 1;
}
body.ouci footer p {
  font-size: 13px;
  color: var(--ouci-muted);
  margin-bottom: 0;
}
body.ouci footer p a { color: var(--ouci-muted); }

/* ---------- information pages ---------- */

body.ouci-information-information #content,
body.ouci-information-contact #content { font-weight: 300; line-height: 1.7; }

body.ouci-information-information #content h1 { margin-bottom: 44px; }

body.ouci-information-information #content p,
body.ouci-information-information #content ul,
body.ouci-information-information #content ol,
body.ouci-information-contact #content address { max-width: 78ch; }

body.ouci-information-information #content h2,
body.ouci-information-information #content h3,
body.ouci-information-information #content h4 {
  font-weight: 400;
  letter-spacing: -.01em;
  margin: 44px 0 14px;
}
body.ouci-information-information #content h2 { font-size: 1.4rem; }
body.ouci-information-information #content h3 {
  font-size: 1.15rem;
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: 36px;
}
body.ouci-information-information #content li { margin-bottom: 8px; }
body.ouci-information-information #content table {
  max-width: 780px;
  --bs-table-bg: transparent;
  border: 0;
}
body.ouci-information-information #content table td,
body.ouci-information-information #content table th {
  border-left: 0;
  border-right: 0;
  border-color: var(--ouci-line);
  padding: 12px 0;
}

/* Contact page: the location card becomes a plain section. */
body.ouci-information-contact .card {
  border: 0;
  border-top: 2px solid var(--ouci-ink);
  border-radius: 0;
  background: transparent;
}
body.ouci-information-contact .card-body { padding: 24px 0 8px; }
body.ouci-information-contact #content h3 {
  font-size: 1.1rem;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 48px 0 4px;
}
body.ouci-information-contact strong { font-weight: 400; }
body.ouci-information-contact address {
  font-weight: 300;
  margin-top: 6px;
}
body.ouci-information-contact .img-thumbnail {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
body.ouci .btn-info {
  background: transparent !important;
  border: 1px solid var(--ouci-ink) !important;
  color: var(--ouci-ink) !important;
  border-radius: 50px;
  font-weight: 300;
  padding: 9px 22px;
}
body.ouci .btn-info:hover {
  background: var(--ouci-ink) !important;
  color: #fff !important;
}

/* ==================================================================
   STEP 6 — account section (opted in by the 'account/' prefix)
   ================================================================== */

/* Bootstrap utility classes carry !important, so these must too. */
body[class*="ouci-account-"] #content .border.rounded,
body[class*="ouci-account-"] #content .card {
  border: 0 !important;
  border-top: 2px solid var(--ouci-ink) !important;
  border-radius: 0 !important;
  padding: 26px 0 0 !important;
  background: transparent !important;
}
body[class*="ouci-account-"] #content .card-header {
  background: transparent;
  border: 0;
  padding: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 400;
}
body[class*="ouci-account-"] #content .card-body { padding: 0; }

body[class*="ouci-account-"] #content h2 {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}
body[class*="ouci-account-"] #content p strong {
  font-weight: 400;
  color: var(--ouci-muted);
}
body[class*="ouci-account-"] #content .col-form-label,
body[class*="ouci-account-"] #content .form-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--ouci-muted);
  padding-bottom: 2px;
}

/* ---------- sidebar (login/register put the menu on the right) ---------- */

body.ouci #column-right { padding-left: 48px; }
body.ouci #column-right .list-group {
  border: 0;
  border-top: 4px solid var(--ouci-ink);
  border-radius: 0;
  padding-top: 14px;
}
body.ouci #column-right .list-group-item {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ouci-ink) !important;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 300;
}
body.ouci #column-right .list-group-item:hover { text-decoration: underline; }
body.ouci #column-right .list-group-item.active {
  font-weight: 400;
  box-shadow: inset 3px 0 0 var(--ouci-ink);
  padding-left: 12px;
}

/* ---------- account dashboard: link lists become rules ---------- */

body.ouci-account-account #content h2 {
  font-size: 1.05rem;
  font-weight: 400;
  border-bottom: 2px solid var(--ouci-ink);
  padding-bottom: 10px;
  margin: 52px 0 4px;
  max-width: 560px;
}
body.ouci-account-account #content ul.list-unstyled { margin-bottom: 0; max-width: 560px; }
body.ouci-account-account #content ul.list-unstyled li {
  padding: 11px 0;
  border-bottom: 1px solid var(--ouci-line);
}
body.ouci-account-account #content ul.list-unstyled li a {
  text-decoration: none;
  font-weight: 300;
}
body.ouci-account-account #content ul.list-unstyled li a:hover { text-decoration: underline; }

/* ---------- tables across the account pages ---------- */

body[class*="ouci-account-"] #content .table {
  border: 0;
  --bs-table-bg: transparent;
}
body[class*="ouci-account-"] #content .table > :not(caption) > * > * {
  border-left: 0;
  border-right: 0;
  border-color: var(--ouci-line);
  padding: 16px 12px;
  font-weight: 300;
  background: transparent;
  vertical-align: middle;
}
body[class*="ouci-account-"] #content thead th {
  border-bottom: 2px solid var(--ouci-ink);
  color: var(--ouci-muted);
  font-weight: 400;
  font-size: 13px;
}
body[class*="ouci-account-"] #content .table-hover > tbody > tr:hover > * {
  background: #fafafa;
  --bs-table-accent-bg: transparent;
}
body[class*="ouci-account-"] #content .table td:first-child,
body[class*="ouci-account-"] #content thead th:first-child { padding-left: 0; }
body[class*="ouci-account-"] #content .table td:last-child,
body[class*="ouci-account-"] #content thead th:last-child { padding-right: 0; }

/* row action buttons become outline circles */
body[class*="ouci-account-"] #content .btn-info,
body[class*="ouci-account-"] #content .btn-danger,
body[class*="ouci-account-"] #content .table .btn:not(.btn-primary) {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-ink) !important;
}
body[class*="ouci-account-"] #content .btn-info:hover,
body[class*="ouci-account-"] #content .btn-danger:hover,
body[class*="ouci-account-"] #content .table .btn:not(.btn-primary):hover {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}
/* ...but the page-level buttons stay pills */
body[class*="ouci-account-"] #content .buttons .btn,
body[class*="ouci-account-"] #content .text-end > .btn,
body[class*="ouci-account-"] #content form .btn-primary {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 11px 30px !important;
  border-radius: 50px !important;
}
body[class*="ouci-account-"] #content form .btn-primary {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}

/* Text buttons inside account tables (Reorder) stay pills, not icon circles. */
body[class*="ouci-account-"] #content .table .btn-primary {
  width: auto;
  height: auto;
  display: inline-block;
  min-width: max-content;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
  white-space: nowrap;
  font-size: 13px;
}

/* The order-detail table has to fit a text button in its last column, so give the
   product column room to wrap and keep the cells tight. */
body.ouci-account-order #content .table > :not(caption) > * > * { padding: 14px 8px; }
/* Never let the last column squeeze the button — the wrapper scrolls instead. */
body.ouci-account-order #content .table-responsive > .table { min-width: max-content; }
body[class*="ouci-account-"] #content .table .btn-primary {
  padding: 7px 14px !important;
  font-size: 12px;
}

/* ==================================================================
   STEP 7 — mobile: kill the horizontal scroll
   ================================================================== */

/* The theme uses a wide grid gutter; on a phone the row's negative margins are
   bigger than the padding available to absorb them, so the grid pokes out. */
@media (max-width: 767.98px) {
  body.ouci #content .row,
  body.ouci #common-home > .row,
  body.ouci #container > main > .container > .row { --bs-gutter-x: 1.5rem; }
}

/* A long pagination (a category with 28 pages) must wrap, not scroll the page. */
body.ouci .pagination {
  flex-wrap: wrap;
  row-gap: 6px;
  justify-content: center;
}

/* Last-resort guard: nothing on the storefront may scroll the page sideways. */
body.ouci { overflow-x: hidden; }

/* The product page sets a wide gutter of its own — narrow it on a phone too. */
@media (max-width: 767.98px) {
  body.ouci-product-product #content > .row.mb-3 { --bs-gutter-x: 1.5rem; }
}

/* ==================================================================
   STEP 8 — layout corrections
   ================================================================== */

/* The theme reserved 400px (730px on phones) of empty padding under every page
   as an old sticky-footer hack. It is what left the void above the footer and
   between the last product and the "Ми не просто книгарня" block. */
body.ouci #content,
body.ouci #column-left,
body.ouci #column-right { padding-bottom: 56px; }
@media (max-width: 575.98px) {
  body.ouci #content,
  body.ouci #column-left,
  body.ouci #column-right { padding-bottom: 40px; }
}

/* ---------- brand line, now inside the header ---------- */

body.ouci .ouci-brand {
  padding-top: 0;
  padding-bottom: 26px;
}
body.ouci .ouci-brand .ouci-hero__title { margin-top: 14px; }
@media (max-width: 767.98px) {
  body.ouci .ouci-brand { padding-bottom: 16px; }
  body.ouci .ouci-brand .ouci-hero__title { margin-top: 10px; }
}

/* The wordmark says BookLab already, so the small logo would be a third
   repetition of the name — hide it on the home page only. */
body.ouci-common-home #logo { display: none; }
body.ouci-common-home header .row { min-height: 0; }

/* ---------- menu: AI button next to the catalogue, no hover gap ---------- */

body.ouci #menu #menu-ai-button {
  order: 2;
  margin-left: var(--ctl-gap-inner) !important;
}
@media (min-width: 992px) {
  body.ouci #menu #navbar-menu { order: 1; flex-grow: 0; }
  body.ouci #menu.navbar { justify-content: flex-start; }
}

/* The dropdown used to sit 12px below the link; that gap closed the menu when
   the cursor crossed it. Keep the visual offset as padding instead of margin. */
body.ouci #menu .dropdown-menu {
  margin-top: 0;
  padding-top: 26px;
}

/* ---------- "Ми не просто книгарня": photo / text tiles ---------- */

body.ouci #about-space {
  background: transparent;
  border-top: 1px solid var(--ouci-line);
  padding: 72px 0 24px;
  margin-top: 0;
}
body.ouci .about-space-heading {
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing: -.02em;
  color: var(--ouci-ink);
  margin-bottom: 40px;
}
body.ouci .about-space-tiles {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}
body.ouci .about-space-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

body.ouci .about-space-intro {
  max-width: none;
  color: var(--ouci-ink);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0;
}
body.ouci .about-space-photo {
  border-radius: 2px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}
body.ouci .about-space-photo-main { aspect-ratio: 3 / 2; }
body.ouci .about-space-photo-small { aspect-ratio: 3 / 2; }
body.ouci .about-space-features { margin-bottom: 28px; }
body.ouci .about-space-features li {
  font-weight: 300;
  font-size: 15px;
  color: var(--ouci-ink);
  border-bottom: 1px solid var(--ouci-line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
body.ouci .about-space-features li i { color: var(--ouci-ink); font-size: 1rem; }
body.ouci .about-space-cta {
  background: var(--ouci-ink);
  color: #fff;
  font-weight: 300;
  border-radius: 50px;
  padding: 11px 26px;
}
body.ouci .about-space-cta:hover { background: #333; color: #fff; }

@media (max-width: 767.98px) {
  body.ouci .about-space-tiles { flex-direction: column; gap: 28px; }
  body.ouci .about-space-col { gap: 24px; }
  body.ouci #about-space { padding-top: 48px; }
}

/* ==================================================================
   STEP 9 — wordmark logo, pill menu, stock state
   ================================================================== */

/* "Каталог" gets the same rounded outline as the AI button, for consistency. */
body.ouci #menu .navbar-nav > .nav-item > .nav-link {
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  padding: 0 20px;
  margin-right: 0;
  font-size: var(--hero-ctl-fs);
  opacity: 1;
  color: var(--ouci-ink);
}
body.ouci #menu .navbar-nav > .nav-item > .nav-link:hover,
body.ouci #menu .nav-item.dropdown:hover > .nav-link {
  border-color: var(--ouci-ink);
}
body.ouci #menu #menu-ai-button { font-size: 14px; padding: 7px 20px; }
body.ouci #menu .navbar-nav { gap: 12px; }

/* Rows of books need more air between them than inside a row. */
body.ouci .product-thumb .image { margin-bottom: 22px; }

/* ---------- out of stock ---------- */

body.ouci .product-out-of-stock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  padding: 13px 28px;
  font-weight: 300;
  color: var(--ouci-muted);
}
body.ouci .product-out-of-stock i { color: #b9bfc5; }

body.ouci .btn-buy--out {
  opacity: .45;
  cursor: not-allowed;
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-muted) !important;
}
body.ouci .btn-buy--out:hover {
  background: transparent !important;
  border-color: var(--ouci-line) !important;
  color: var(--ouci-muted) !important;
}

/* Rows of book cards — the module grids use .col.mb-3, the category page
   uses #product-list; :has() picks exactly the columns holding a card. */
body.ouci #content .col:has(> .product-thumb) { margin-bottom: 76px !important; }
@media (max-width: 767.98px) {
  body.ouci #content .col:has(> .product-thumb) { margin-bottom: 48px !important; }
  body.ouci #product-list > .col { margin-bottom: 48px !important; }
}

/* ==================================================================
   STEP 10 — one real search field, spacing corrections
   ================================================================== */

/* The home page uses the same search module as every other page — the one with
   live autocomplete — just dressed as the pill. */
/* The 820px cap dates from when this was a centred hero field on its own line.
   In the row it shares with the catalogue it left ~80px of empty track at the
   right-hand end, so the row stopped short of the margin every other element on
   the page lines up with. It takes the space that is left, as it does
   everywhere else. */
body.ouci-common-home .ouci-brand__search {
  margin: 0;
}
/* common/search.twig wraps the field in `.mb-3`. Inside a flex row aligned on
   `center` that 16px is part of the item's margin box, so the field was centred
   8px above the two pills beside it — the whole row was 72px tall for a 56px
   control. The home page zeroed it and no other page did, which is why the
   catalogue and AI sat off the search line everywhere except the front. */
body.ouci .ouci-brand__search > .position-relative { margin-bottom: 0 !important; }
/* ---------- the three controls share one container ----------
   They were the same 56px box to two decimal places and still did not read as
   one row: two had a 1px outline and no shadow, the third had no outline and a
   30px blur. On a near-white page that shadow is a soft halo above and below
   the field, so the field looked taller than the buttons it was level with.
   Material 3 puts peer controls in a row at one elevation and in one container
   style; these are the outlined one. */
body.ouci-common-home .ouci-brand__search form.input-group {
  height: var(--hero-ctl-h);
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  background: #fff;
  padding-left: 24px;
  padding-right: 4px;
  box-shadow: none;
}
body.ouci-common-home .ouci-brand__search #input-header-search {
  height: 100%;
  padding: 0;
  font-family: inherit;
  font-size: var(--hero-ctl-fs);
  font-weight: 300;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}
body.ouci-common-home .ouci-brand__search #input-header-search::placeholder {
  color: #9aa0a6;
  transition: opacity .18s ease-in-out;
}
body.ouci-common-home .ouci-brand__search #input-header-search:focus::placeholder { opacity: 0; }
/* The pills darken their outline on hover; the field does the same on focus, so
   the whole row answers to the pointer in one way. */
body.ouci header form.input-group:focus-within { border-color: var(--ouci-ink); }
body.ouci header form.input-group:hover { border-color: #d5d9dd; }
body.ouci-common-home .ouci-brand__search .btn {
  flex: 0 0 54px;
  width: 54px;
  background: transparent !important;
  border: 0 !important;
  color: var(--ouci-ink) !important;
  box-shadow: none;
}
body.ouci-common-home .ouci-brand__search #header-search-autocomplete {
  text-align: left;
  margin-top: 6px;
  border-radius: 14px;
  overflow: hidden;
}

/* ---------- spacing ---------- */

/* Less air between the wordmark and the search line. */
body.ouci:not(.ouci-common-home) header { padding-top: 0; padding-bottom: 0; }
body.ouci:not(.ouci-common-home) header .row { align-items: center; }
/* The wordmark is an inline-block, so this <div> also contributes a strut of
   its own inherited line-height — 7px of invisible box that --gap-wordmark-top
   had no way to account for. Zero here lets the inline-block alone set the
   height, and the token becomes the distance you actually measure. */
body.ouci #logo { margin-top: 0; margin-bottom: 0; line-height: 0; }

/* A little breathing room around the menu row and under the breadcrumb. */
body.ouci #menu.navbar {
  padding-top: 18px;
  padding-bottom: 18px;
  margin-bottom: 0;
}
body.ouci .breadcrumb { margin: 24px 0 12px; }
@media (max-width: 991.98px) {
  /* 44px of margin around one line of 13px text, on the screen with the least
     of it to give — and on a product page it is the last thing between the head
     of the page and the book itself. */
  body.ouci .breadcrumb { margin: 16px 0 8px; }
}
body.ouci #content h1 { margin-top: 8px; }

/* ==================================================================
   Checkout form polish
   ================================================================== */

/* Every text input on the checkout repeats its label as a placeholder, so the
   label above it is redundant. Hide it visually (kept in the DOM for screen
   readers) only where a placeholder actually carries the text — selects,
   textareas and custom fields keep their visible label. */
body.ouci-checkout-checkout #content div:has(> input.form-control[placeholder]) > label.form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The "*" required marker rides along in the placeholder instead (appended by
   ocMarkRequiredPlaceholders in register.twig) — a floating pseudo-element
   asterisk ended up next to the wrong column. */

/* The "log in instead" line at the top of the checkout has to read as a link —
   the page-wide rule paints every #content link in ink. */
body.ouci-checkout-checkout #content .checkout-login-line a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Shipping / payment options are a plain inline radio list, not a modal. */
body.ouci #content .checkout-method {
  /* Vertical only: the shorthand used to zero Bootstrap's .form-check padding-left,
     and the radio's own -1.5em margin then put it 3.5px off the left edge of a phone. */
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ouci-line);
}
body.ouci #content .checkout-method:last-child { border-bottom: 0; }
body.ouci #content .checkout-method__mark {
  width: auto;
  height: 24px;
}
body.ouci #content .checkout-method .form-check-label {
  color: var(--ouci-ink);
  cursor: pointer;
}

/* ---------- header cart: one click straight to the checkout ---------- */

/* The button is a link now; the preview opens on hover instead of on click. */
body.ouci #cart a.btn { text-decoration: none; }
body.ouci #cart .dropdown-menu {
  display: none;
  position: absolute;
  inset: auto 0 auto auto;
  top: 100%;
  min-width: 420px;
  margin: 0;
  padding: 18px 20px 14px !important;
  border: 1px solid var(--ouci-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
  background: #fff;
}
body.ouci #cart .dropdown:hover .dropdown-menu,
body.ouci #cart .dropdown:focus-within .dropdown-menu,
body.ouci #cart .dropdown.is-open .dropdown-menu { display: block; }

body.ouci #cart .cart-panel__actions {
  margin-top: 14px;
  text-align: right;
}
body.ouci #cart .cart-panel__actions .btn {
  border-radius: 50px;
  font-size: 13px;
  padding: 9px 22px;
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}

body.ouci #cart .dropdown-menu .table { --bs-table-bg: transparent; margin-bottom: 0; }
body.ouci #cart .dropdown-menu .table > :not(caption) > * > * {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ouci-line);
  padding: 10px 6px;
  font-weight: 300;
  vertical-align: middle;
}
body.ouci #cart .dropdown-menu .table--totals > :not(caption) > * > * { border-bottom: 0; }
body.ouci #cart .dropdown-menu .table--totals tr:last-child td {
  border-top: 1px solid var(--ouci-ink);
  font-weight: 400;
}
body.ouci #cart .dropdown-menu a {
  color: var(--ouci-ink);
  text-decoration: none;
}
body.ouci #cart .dropdown-menu a:hover { text-decoration: underline; }
body.ouci #cart .dropdown-menu small { color: var(--ouci-muted); }
/* stylesheet.css sets `#cart .img-thumbnail { min-width: 100px }`, which beats a
   plain max-width and blew the 47px thumb up until it collided with the title. */
body.ouci #cart .dropdown-menu .table--items td:first-child { width: 72px; }
body.ouci #cart .dropdown-menu .img-thumbnail {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  min-width: 0;
  max-width: 54px;
  height: auto;
}
body.ouci #cart .dropdown-menu .btn-danger {
  background: transparent !important;
  border: 0 !important;
  color: var(--ouci-muted) !important;
  padding: 2px 4px;
  box-shadow: none;
}
body.ouci #cart .dropdown-menu .btn-danger:hover { color: var(--ouci-ink) !important; }

/* WhatsApp gets its brand green so the icon reads as "you can message us". */
body.ouci .whatsapp-link,
body.ouci .whatsapp-link i { color: #25d366 !important; }
body.ouci .whatsapp-link:hover { text-decoration: underline; }
body.ouci nav#top .whatsapp-link { font-size: 15px; vertical-align: -1px; }

/* ---------- events section on the specials page ---------- */

body.ouci .events { margin: 8px 0 56px; }
body.ouci .events h2 {
  font-size: 1.5rem;
  font-weight: 300;
  border-bottom: 2px solid var(--ouci-ink);
  padding-bottom: 10px;
  margin: 0 0 24px;
}
body.ouci .events__lead { max-width: 62ch; font-size: 1.05rem; }
body.ouci .events__subtitle {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ouci-muted);
  margin: 24px 0 12px;
}
body.ouci .events__list { list-style: none; padding: 0; margin: 0; }
body.ouci .events__list li {
  border-bottom: 1px solid var(--ouci-line);
  padding: 9px 0;
}
body.ouci .events__list li:last-child { border-bottom: 0; }
body.ouci .events__gallery { margin: 28px 0 4px; }
body.ouci .events__gallery img { width: 100%; height: auto; }
body.ouci .events__cta { margin-top: 28px; font-size: 1.05rem; }

/* Shipping is only priced at checkout, so the cart states it in words. */
body.ouci .cart-shipping-note {
  margin-top: 16px;
  font-size: 13px;
  max-width: 78ch;
}

/* ---------- shipping hint (cart + checkout summary) ---------- */

body.ouci .shipping-hint { margin: 20px 0 6px; }
body.ouci .shipping-hint__text {
  margin: 0;
  font-size: 13px;
  color: var(--ouci-muted);
  max-width: 78ch;
}
body.ouci .shipping-hint--free .shipping-hint__text { color: var(--ouci-ink); }

/* The nudge is the one that has to be noticed: a tinted card with the progress bar,
   the sentence and a call to action that opens the shop in a new tab. */
body.ouci .shipping-hint--nudge {
  background: #f4f6f5;
  border: 1px solid var(--ouci-line);
  border-radius: 14px;
  padding: 16px 18px 18px;
}
body.ouci .shipping-hint--nudge .shipping-hint__text {
  color: var(--ouci-ink);
  font-size: 14px;
  margin-bottom: 12px;
}
body.ouci .shipping-hint__bar {
  height: 6px;
  background: #fff;
  border: 1px solid var(--ouci-line);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
body.ouci .shipping-hint__bar span {
  display: block;
  height: 100%;
  background: var(--ouci-ink);
  transition: width .3s ease;
}
body.ouci .shipping-hint__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Outlined, not filled: on the checkout page this sat directly above a grey (not yet
   active) pay button and was the strongest button on the screen, and half the guests of
   23-28 September left checkout for the catalogue. The pay button is the one to fill. */
body.ouci .shipping-hint__cta .btn {
  border-radius: 50px;
  font-size: 13px;
  padding: 8px 20px;
  background: #fff !important;
  border: 1px solid var(--ouci-ink) !important;
  color: var(--ouci-ink) !important;
}
/* This rule sits after the generic `.btn-primary:hover` and matches with the same
   specificity and !important, so it was winning on document order and the button had no
   hover at all. It needs its own. */
body.ouci .shipping-hint__cta .btn:hover {
  background: #f0f0f0 !important;
  border-color: var(--ouci-ink) !important;
  color: var(--ouci-ink) !important;
}
body.ouci .shipping-hint__note {
  font-size: 12px;
  color: var(--ouci-muted);
  flex: 1 1 180px;
}

/* ---------- cookie notice ---------- */

body.ouci #cookie.cookie-toast {
  position: fixed;
  left: 20px;
  bottom: 20px;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  max-width: 380px;
  z-index: 1080;
  opacity: 1;
  background: #fff;
  color: var(--ouci-ink);
  border: 1px solid var(--ouci-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  padding: 20px 22px 18px;
}
body.ouci .cookie-toast__text {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ouci-ink);
}
body.ouci .cookie-toast__text a { color: var(--ouci-ink); text-decoration: underline; text-underline-offset: 3px; }
body.ouci .cookie-toast__actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.ouci .cookie-toast .btn { border-radius: 50px; font-size: 13px; padding: 7px 18px; }
body.ouci .cookie-toast .btn-primary {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}
body.ouci .cookie-toast .btn-light {
  background: transparent !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-muted) !important;
}
body.ouci .cookie-toast__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ouci-muted);
  cursor: pointer;
}
body.ouci .cookie-toast__close:hover { color: var(--ouci-ink); }
@media (max-width: 575px) {
  body.ouci #cookie.cookie-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* The checkout form saves itself; this is the only feedback it needs. */
body.ouci .register-status {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ouci-muted);
  min-height: 18px;
}
body.ouci .register-status a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- editable line items in the order summary ---------- */

/* The controls now live in the total column, above the line total. */
body.ouci .confirm-qty {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 0;
}
body.ouci .confirm-line-total { margin-top: 8px; }

/* The article and the options are details of the title above them, so they are
   indented under it rather than marked with a dash. */
body.ouci .confirm-detail { padding-left: 18px; }
body.ouci .confirm-qty__btn {
  width: 24px;
  height: 24px;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--ouci-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ouci-ink);
  font-size: 14px;
  cursor: pointer;
}
body.ouci .confirm-qty__btn:hover {
  background: var(--ouci-ink);
  border-color: var(--ouci-ink);
  color: #fff;
}
body.ouci .confirm-qty__value {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
}
body.ouci .confirm-qty__remove {
  margin-left: 8px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--ouci-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.ouci .confirm-qty__remove:hover { color: var(--ouci-ink); }

/* ==================================================================
   STEP 10 — buy controls moved onto the cover
   ================================================================== */

/* The card buttons above are deliberately transparent with a hairline outline,
   which reads well against the page but disappears against artwork. On the cover
   they need to carry their own ground - still monochrome, still no red circle. */
body.ouci .product-thumb .product-actions-overlay .btn,
body.ouci .product-thumb .product-actions-overlay button {
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid var(--ouci-line) !important;
  color: var(--ouci-ink) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
body.ouci .product-thumb .product-actions-overlay .btn:hover,
body.ouci .product-thumb .product-actions-overlay button:hover {
  background: var(--ouci-ink) !important;
  border-color: var(--ouci-ink) !important;
  color: #fff !important;
}
body.ouci .product-thumb .product-actions-overlay .btn-buy--out:hover {
  background: rgba(255, 255, 255, .94) !important;
  border-color: var(--ouci-line) !important;
  color: var(--ouci-muted) !important;
}

/* The cover now sets the card's height, so the old margin under a padded square
   would double up on the gap the content block already carries. */
body.ouci .product-thumb .image { margin-bottom: 14px; }

/* The checkout's announcements link, in place of the newsletter switch. */
body.ouci #content a.checkout-telegram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ouci-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  padding: 9px 20px 9px 16px;
}
body.ouci #content a.checkout-telegram i {
  font-size: 20px;
  line-height: 1;
}
/* Hover is a shade change, the same kind the filled buttons make — not an inversion to
   solid black. It also has to be scoped through #content: `body.ouci #content a:not(.btn)…`
   carries an id and outranks a plain class selector, so a colour set without it lost and
   the label stayed dark on a black pill, i.e. invisible. */
body.ouci #content a.checkout-telegram:hover {
  border-color: var(--ouci-ink);
  background: #f2f1ee;
  color: var(--ouci-ink);
}

/* ==================================================================
   STEP 6 — the phone: first screen, basket, buy button
   ================================================================== */

/* ---------- #7 first screen ----------
   A first-time visitor met a full-width black basket saying "0 items - 0,00 €"
   before seeing a single book. It is hidden until there is something in it; the
   basket icon in the top bar is still there for anyone who wants to look. */
@media (max-width: 991.98px) {
  /* the desktop rule below covers this too; kept out of the way here */

  /* Measured on an iPhone 13 (664px tall): the first book began at 624px, so a
     visitor saw no book at all without scrolling. The space was not one mistake
     but six small ones stacked, each defensible on a desktop:

       section heading margins  64 + 32   -> 20 + 14
       hero title 32px + margins          -> 27px, tighter
       search margin-top        30        -> 16
       menu padding-top         18        -> 8
       top bar padding-top      18        -> 10

     Together they move the first row up by about 110px, which is the difference
     between a sliver of a cover and half of one. */
  body.ouci #menu.navbar { padding-top: 8px; padding-bottom: 6px; margin-bottom: 0; }
  body.ouci #top { padding-top: 10px; }
  
}

/* ---------- #4 basket ----------
   Once the basket has something in it, it follows the page instead of scrolling
   away, so "what did I just add" and "check out" are always one tap apart. */
@media (max-width: 991.98px) {
  body.ouci #cart .cart-block:not(.cart-block--empty) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1045;
    padding: 8px 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  }
  body.ouci #cart .cart-block:not(.cart-block--empty) > .btn { margin: 0; }

  /* Only added while that bar exists, so the page is not padded for nothing. */
  body.ouci-has-cart-bar { padding-top: 62px; }
}

/* A touch screen has no hover: the browser fakes one on first tap, which is why
   tapping the basket opened the panel instead of going to the checkout. Hover
   opening is now limited to devices that actually have a pointer. */
@media (hover: none) {
  body.ouci #cart .dropdown:hover .dropdown-menu,
  body.ouci #cart .dropdown:focus-within .dropdown-menu,
  body.ouci #cart .dropdown.is-open .dropdown-menu { display: none !important; }
}

/* ---------- #6 buy icon on a book card ----------
   38px is below the ~44px that a finger reliably hits, and it sat over artwork,
   so a miss opened the book instead of adding it. */
@media (max-width: 991.98px) {
  body.ouci .product-thumb .product-actions-overlay .btn-buy,
  body.ouci .product-thumb .product-actions-overlay .btn-wishlist {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}

/* ---------- #3 buy button that stays ----------
   On a long product page the real button is far above the fold by the time the
   description has been read. */
#mobile-buy-bar { display: none; }

@media (max-width: 991.98px) {
  body.ouci #mobile-buy-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1044;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ouci-line);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .10);
  }
  body.ouci #mobile-buy-bar .mobile-buy-bar__price {
    font-size: 19px;
    font-weight: 600;
    white-space: nowrap;
  }
  body.ouci #mobile-buy-bar .btn { flex: 1; padding: 12px; font-size: 16px; }

  /* Room for the bar, and for the chat bubble that would otherwise sit on it. */
  body.ouci-product-product { padding-bottom: 76px; }
  body.ouci-product-product #chatbot-widget { bottom: 84px; }
}

/* ---------- #1 endless scrolling ----------
   The page numbers stay in the document for crawlers and for anyone without
   JavaScript; they are only hidden once the script has taken over, and come back
   if a fetch fails. */
body.ouci .product-pager--auto .pagination-nav { display: none; }
body.ouci .product-pager--auto.product-pager--done .product-pager__results { opacity: .7; }

/* The cookie notice is also fixed to the bottom and sits above everything, so on
   a product page it landed straight on top of the new buy button — the one
   control on the page that must never be covered. It moves up while that bar is
   on screen; it is dismissed once and then gone. */
@media (max-width: 991.98px) {
  body.ouci-product-product #cookie.cookie-toast { bottom: 84px; }
}

/* ==================================================================
   STEP 7 — the phone: menu depth, category page, overflow
   ================================================================== */

@media (max-width: 991.98px) {

  /* ---------- what sits where in the menu bar ----------
     The collapsing panel had no `order`, so it came before the AI button and,
     once open, took the whole width and carried the button down past 29
     categories. Giving it the last order keeps the bar itself intact: the
     catalogue on the left, the AI button and ☰ on the right, the list below. */
  body.ouci #menu { flex-wrap: wrap; row-gap: 0; }
  body.ouci #menu #category { order: 0; margin-right: auto; }
  body.ouci #menu #menu-ai-button { order: 1; margin-left: var(--ctl-gap-inner) !important; }
  body.ouci #menu #navbar-menu { order: 3; width: 100%; }

  /* "Каталог" plus a 15-character label plus their padding is 363px of controls
     in a 334px bar on a 390px phone, and the AI button wrapped onto a second
     line. It is an icon button here instead — a circle the same 50px as the
     pill beside it, so the two still read as one set — and it carries its name
     in `title`/`aria-label` rather than on screen. */
  body.ouci #menu #menu-ai-button .menu-ai-label { display: none; }
  body.ouci #menu #menu-ai-button {
    width: var(--hero-ctl-h);
    min-width: var(--hero-ctl-h);
    padding: 0;
    border-radius: 50%;
  }

  /* ---------- the sort control ran off the screen ----------
     Label and select sat on one line, so a long "Ordenar por:" pushed the select
     20px past the right edge and gave the whole page a horizontal scrollbar.
     They stack now and the select uses the width it has. */
  body.ouci .product-toolbar { gap: 10px; padding-bottom: 10px; margin-bottom: 18px; }
  body.ouci .product-toolbar__controls {
    gap: 12px;
    margin-left: 0;
    width: 100%;
  }
  body.ouci .product-toolbar__field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  body.ouci .product-toolbar__field label { margin: 0; font-size: 13px; white-space: nowrap; }
  /* `min-width: 0` is the whole fix: without it a flex item refuses to shrink
     below its content, which is how the select ended up past the screen edge. */
  body.ouci #content .product-toolbar .form-select {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: 100%;
    /* 14px is the desktop pill's size; on a phone it is a control you tap, and
       below 16px iOS is entitled to zoom the page on focus. The pill is 40px
       tall, which holds 16px text without changing its shape. */
    font-size: var(--form-ctl-fs);
  }

  /* Endless scrolling made "show N per page" meaningless — the next N arrive on
     their own. It is only taking up a screen that has little to spare. */
  body.ouci .product-toolbar__field:has(#input-limit) { display: none; }

  /* ---------- "Catálogo" five times on one screen ----------
     Menu label, breadcrumb, heading, the nav link and "Ver todo". The breadcrumb
     is the one that carries nothing: with a single level it repeats the heading
     directly above it. It stays wherever it has something to say — a
     sub-category keeps its trail. */
  body.ouci .breadcrumb:has(.breadcrumb-item:nth-child(2):last-child) { display: none; }

  body.ouci #content > h1 {
    margin-top: 4px;
    margin-bottom: 12px;
    font-size: 26px;
  }
}

/* ==================================================================
   STEP 8 — the desktop first screen
   ================================================================== */

/* An empty basket is not worth a black slab on any screen: on the desktop home
   page it was the first thing above the wordmark, announcing "0 items - 0,00 €"
   to somebody who had not yet seen a book. The basket link in the top bar stays
   for anyone who wants to look. `!important` because Bootstrap's own .d-grid on
   the same element carries one. */
body.ouci #cart .cart-block--empty { display: none !important; }
/* header.twig gives the basket column Bootstrap's .mb-2. On the home page that
   column is the only thing in the header row and its contents are hidden, so
   all it contributed was 8px of margin under an empty row — which landed above
   the wordmark and made --gap-wordmark-top measure 32 there against 24
   everywhere else. */
body.ouci-common-home #cart { margin-bottom: 0 !important; }

/* The search, the catalogue and the AI button were three bands stacked with air
   between them. One line: the field takes the space it needs, the two buttons
   sit at the end of it. */
body.ouci .ouci-brand__row {
  display: flex;
  align-items: center;
  gap: var(--ctl-gap-group);
}
body.ouci .ouci-brand__row .ouci-brand__search {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
body.ouci .ouci-brand__row .ouci-brand__menu { flex: 0 0 auto; }
/* menu.twig wraps the bar in its own .container, and Bootstrap gives that 12px
   of side padding. Nested inside the header row it survived the rule that
   strips padding from the header's own container, so "Каталог" started 12px to
   the right of the breadcrumb, the page title and everything else below it. */
body.ouci .ouci-brand__row .ouci-brand__menu > .container { padding-left: 0; padding-right: 0; }
/* .me-2 on the AI button in menu.twig added 8px to the flex gap of the row, so
   the distance from the pair to the field was 24px while the distance inside
   the pair was 20px — the bigger gap was the one holding related things
   together. Both come from the two tokens now. */
body.ouci .ouci-brand__row #menu #menu-ai-button { margin-right: 0 !important; }
body.ouci .ouci-brand__row #menu.navbar {
  border-bottom: 0;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}
body.ouci .ouci-brand__row #menu .nav-link { padding-right: 0; }

@media (max-width: 991.98px) {
  /* On a phone the two do not fit side by side, so the menu drops to its own
     full-width row underneath — the same place it was before, and the same bar
     the rest of the mobile work is written against. */
  body.ouci .ouci-brand__row { flex-wrap: wrap; gap: 0; }
  body.ouci .ouci-brand__row .ouci-brand__search { flex: 1 1 100%; }
  body.ouci .ouci-brand__row .ouci-brand__menu { flex: 1 1 100%; }
  body.ouci .ouci-brand__row #menu.navbar {
    /* The hairline drew a rule across the page between the search field and the
       two pills that belong to it, so the pair read as two unrelated bands. */
    border-bottom: 0;
    padding-top: 12px;
    padding-bottom: 0;
    /* The desktop rule above sets `nowrap` so the bar stays on the search line;
       on a phone the expanding list must still be able to take a row of its own,
       or it drags the AI button down past all 29 categories. */
    flex-wrap: wrap;
  }
}

/* ==================================================================
   STEP 9 — where the catalogue sits, and one search field everywhere
   ================================================================== */

/* ---------- desktop: the catalogue moves to the left of the search ----------
   Its dropdown is four columns wide. Anchored to a button at the right-hand end
   of the row it opened towards an edge that was 80px away, so it had to hang off
   the side of the page; from the left it has the whole width to open into. */
@media (min-width: 992px) {
  body.ouci .ouci-brand__row .ouci-brand__menu { order: 0; }
  body.ouci .ouci-brand__row .ouci-brand__search { order: 1; margin-left: 0; margin-right: 0; }

  /* stylesheet.css anchors the mega-menu to #menu itself — `position: static` on
     the item, `left: 0; right: 0` on the panel — which was right while #menu was
     the full-width nav bar. Beside the search it is 375px wide, so the panel
     became 375px: four columns of 82px, and all 29 categories wrapping onto two
     lines. Anchoring it to the whole row gives it the width it was designed for. */
  body.ouci .ouci-brand__row { position: relative; }
  body.ouci .ouci-brand__row #menu { position: static; }
  body.ouci .ouci-brand__row #menu .dropdown-menu {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* ---------- desktop: the air between the sections ----------
   64px above every section heading is a lot when the heading is the only thing
   between two rows of books, and it applied twice over between Destacados and
   Novedades — once as the bottom of the row, once as the top of the heading. */
@media (min-width: 992px) {
  body.ouci-common-home #content { padding-top: 0; }
}

/* ---------- every page gets the home page's search field ----------
   Inner pages dressed the same input as a giant borderless headline with a
   gradient underline. It is the same field doing the same job on every page, so
   it looks the same on every page. The rules below mirror the home ones exactly
   rather than sharing a selector list, because the markup differs: the home page
   wraps it in .ouci-brand__search and the others leave it in the header column. */
body.ouci:not(.ouci-common-home) header form.input-group {
  height: var(--hero-ctl-h);
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  background: #fff;
  padding: 0 4px 0 24px;
  box-shadow: none;
}
/* The gradient hairline belonged to the headline treatment. */
body.ouci:not(.ouci-common-home) header form.input-group::after { content: none; }
body.ouci:not(.ouci-common-home) #input-header-search {
  height: 100%;
  padding: 0;
  font-family: inherit;
  font-size: var(--hero-ctl-fs);
  font-weight: 300;
  line-height: 1.2;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}
body.ouci:not(.ouci-common-home) #input-header-search::placeholder { color: #9aa0a6; }
body.ouci:not(.ouci-common-home) header form.input-group .btn {
  flex: 0 0 54px;
  width: 54px;
  font-size: 18px;
  padding-right: 0;
}
body.ouci:not(.ouci-common-home) header #header-search-autocomplete {
  text-align: left;
  margin-top: 6px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important;
}

/* ---------- inner pages: the wordmark goes to the middle ----------
   It sat hard left above a full-width search field, which read as a stray label
   rather than the way home. */
body.ouci:not(.ouci-common-home) header .col-md-3 {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}
body.ouci:not(.ouci-common-home) #logo { text-align: center; }

/* ---------- phone ---------- */
@media (max-width: 991.98px) {
  /* Dead space above the wordmark: the top bar's own padding, its margin, and
     the header's padding all stacked in the same gap. */
  body.ouci #top { padding-bottom: 2px; margin-bottom: 0 !important; }
  body.ouci header { padding-top: 0; }
  body.ouci .ouci-hero__mark { margin-top: 0; }

  /* "Catálogo" was 16px next to a 13px button and pinned to the left edge while
     the button sat at the right; they are one pair of controls and now read as
     one, centred together.

     Size and padding are deliberately not repeated here — they come from the
     shared control block at the end of this file. This rule used to restate
     them at 14px/7px, which the shared block then overrode, so the numbers you
     read here were not the numbers on screen. */
  body.ouci #menu { justify-content: center; }
  body.ouci #menu #category { order: 0; margin-right: 0; }
  body.ouci #menu #menu-ai-button { order: 1; margin-left: var(--ctl-gap-inner) !important; }
}

/* ==================================================================
   STEP 10 — the same controls in the same place on every page
   ================================================================== */

/* The inner-page header used to be a stack: wordmark, then the search on its own
   full-width row. It now carries the same row as the home page, so the catalogue
   and the AI button do not jump to a different place when you leave the front. */
body.ouci:not(.ouci-common-home) header .col-md-5 .ouci-brand__row { width: 100%; }

@media (max-width: 991.98px) {
  /* The checkout lists every item, the quantities and the total a few hundred
     pixels below. A bar at the top repeating the count is a second, smaller copy
     of the page the customer is already reading — and it covers the top of it. */
  body.ouci-checkout-checkout #cart .cart-block { display: none !important; }
  body.ouci-checkout-checkout.ouci-has-cart-bar { padding-top: 0; }
}

/* ==================================================================
   ВІДСТУПИ ГОЛОВНОЇ СТОРІНКИ — редагувати тут і більше ніде
   HOME PAGE SPACING — the only place these five gaps are set
   ==================================================================

   Five numbers, twice: once for a desktop and once for a phone. Nothing else in
   this file sets them any more, so changing a value here changes the page and
   nothing has to be hunted for. Larger number = more air.

       ┌──────────────────────────┐
       │  (1) над BOOKLAB         │  --gap-wordmark-top
       │      BOOKLAB             │
       │      Заголовок           │
       │  (2) під заголовком      │  --home-gap-title
       │      [ пошук ] [каталог] │
       │  (3) під пошуком         │  --home-gap-search
       │      Рекомендовані       │
       │  (4) над заголовком блоку│  --home-gap-section
       │      [книжки]            │
       │  (5) під рядом книжок    │  --home-gap-row
       └──────────────────────────┘

   Every page except the home one has a head of a different shape — a clickable
   BOOKLAB rather than a wordmark and a headline — but (1) is the same distance
   in the same place, so it is the same number:

       ┌──────────────────────────┐
       │  (1) над BOOKLAB         │  --gap-wordmark-top
       │      BOOKLAB (посилання) │
       │  (6) під ним             │  --page-gap-logo
       │      [каталог] [ пошук ] │
       └──────────────────────────┘

   (1), (4) and the three control sizes apply on every page, home included.
   There used to be two separate numbers for (1) — --home-gap-top at -35px and
   --page-gap-top at -20px — which is how the wordmark ended up touching the top
   bar on the front page and sitting 27px below it everywhere else.             */

:root {
  /* ---- ДЕСКТОП / desktop (ширше за 992px) ---- */
  --gap-wordmark-top:  24px;   /* (1) над BOOKLAB — на всіх сторінках */
  --home-gap-title:    32px;
  --home-gap-search:   32px;
  --home-gap-section:   0px;
  --home-gap-row:       0px;

  /* ---- РОЗМІР ТРЬОХ ЕЛЕМЕНТІВ КЕРУВАННЯ / the three hero controls ----
     Каталог, AI-рекомендації і поле пошуку. Обидва числа спільні для всіх
     трьох — у цьому й суть: вони мають виглядати як один набір.

     56px — це висота search bar у Material 3, і вона ж на телефоні: 50px не
     лежить на сітці 4dp, а мінімальна ціль дотику — 48dp. Кегль 16px — body
     large за M3, і нижче 16px iOS зумить сторінку на фокусі в полі. */
  --hero-ctl-h:        56px;
  --hero-ctl-fs:       16px;

  /* ---- КЕГЛЬ У ПОЛЯХ ФОРМ / type size inside form fields ----
     Те саме число і з тієї самої причини: нижче 16px iOS зумить сторінку, щойно
     покупець торкається поля. Поле пошуку це вже мало, а форма оформлення
     замовлення — ні: усі 16 її полів були 13px, тож кожен дотик на айфоні
     смикав сторінку. Число спільне для всіх ширин — 16px це body large за M3,
     а не поступка телефону. */
  --form-ctl-fs:       16px;

  /* ---- ВІДСТАНІ МІЖ КОНТРОЛАМИ / gaps inside the control row (M3, 4dp) ----
     8dp між сусідніми контролами однієї групи (Каталог ↔ AI),
     16dp між групою і полем пошуку. */
  --ctl-gap-inner:      8px;
  --ctl-gap-group:     16px;

  /* ---- ВНУТРІШНІ СТОРІНКИ / every page except the home one ----
     (6) між логотипом BOOKLAB і рядком пошуку. */
  --page-gap-logo:     12px;

  /* ---- КАТАЛОГ І СТОРІНКА ТОВАРУ: відступи ---- */
  --page-gap-title:    40px;   /* (8)  під заголовком сторінки (h1)          */
  --cat-gap-toolbar:   40px;   /* (9)  під панеллю сортування, перед сіткою  */
  --cat-gap-more:      48px;   /* (11) між сіткою і текстом категорії під нею */
  --prod-gap-title:    24px;   /* (10) під назвою товару                     */
  --product-image-max-h: 420px; /* обкладинка на сторінці товару             */

  /* ---- РОЗМІРИ ШРИФТІВ / font sizes ----
     rem і clamp() лишені там, де вони були: clamp плавно зменшує кегль на
     вужчих екранах, а фіксований піксель цього не вміє. Але число замінити
     можна на будь-яке, зокрема на просте `32px`. */
  --fs-wordmark:       22px;                                  /* BOOKLAB — на всіх сторінках */
  --fs-hero-title:     clamp(2rem, 1.1rem + 3.6vw, 4.2rem);   /* заголовок головної  */
  --fs-section:        1.25rem;                               /* Рекомендовані/Новинки */
  --fs-page-title:     clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem);/* h1 каталогу й товару */
  --fs-product-price:  2.46rem;                               /* ціна на стор. товару */
  --fs-card-name:      0.95rem;                               /* назва книжки на картці */
  --fs-card-author:    0.8rem;                                /* автор на картці        */
  --fs-card-price:     0.9375rem;                             /* ціна на картці         */
}

@media (max-width: 991.98px) {
  :root {
    /* ---- МОБІЛЬНИЙ / phone (вужче за 992px) ---- */
    --gap-wordmark-top:  16px;
    --home-gap-title:    16px;
    --home-gap-search:    8px;
    --home-gap-section:  20px;
    --home-gap-row:       0px;


    --page-gap-logo:      8px;

    --page-gap-title:    12px;
    --cat-gap-toolbar:   16px;
    --cat-gap-more:      32px;
    --prod-gap-title:    24px;
    --product-image-max-h: 300px;

    --fs-wordmark:       17px;
    --fs-hero-title:     27px;
    --fs-section:        1.25rem;
    --fs-page-title:     26px;
    --fs-product-price:  1.8rem;
    --fs-card-name:      0.95rem;
    --fs-card-author:    0.8rem;
    --fs-card-price:     0.9375rem;
  }
}

/* The five rules the numbers above drive. There is no reason to edit anything
   below this line to change spacing. */
body.ouci-common-home .ouci-hero__mark   { margin-top: var(--gap-wordmark-top); }
body.ouci-common-home .ouci-hero__title  { margin-bottom: var(--home-gap-title); }
body.ouci-common-home .ouci-brand        { padding-bottom: var(--home-gap-search); }
body.ouci #content > h2,
body.ouci #content > h3,
body.ouci .ouci-section-title            { margin-top: var(--home-gap-section); margin-bottom: 14px; }
body.ouci-common-home #content .row-cols-2,
body.ouci-common-home #content .row-cols-md-4 { margin-bottom: var(--home-gap-row); }
body.ouci:not(.ouci-common-home) header .col-md-3 { margin-top: var(--gap-wordmark-top); }
body.ouci:not(.ouci-common-home) header .col-md-5 { margin-top: var(--page-gap-logo); }

/* ---------- the three controls, one size ----------
   Catalogue, AI recommendations and the search field are one set of controls and
   were three different objects: 117x41, 191x41 and 820x60, at 14px, 14px and
   20px. Both numbers come from --hero-ctl-* above, so they cannot drift apart
   again by editing one of them.

   The catalogue also carried `text-shadow: rgba(0,0,0,.25) 0 -1px 0`, inherited
   from the stock theme where this bar was white text on a dark background. On
   white it reads as a smudge under the letters, and only that one control had
   it. */
body.ouci #menu .nav-link,
body.ouci #menu #category,
body.ouci #menu #menu-ai-button,
body.ouci header form.input-group {
  height: var(--hero-ctl-h);
  min-height: var(--hero-ctl-h);
  font-size: var(--hero-ctl-fs);
  text-shadow: none;
}
body.ouci #menu .nav-link,
body.ouci #menu #category,
body.ouci #menu #menu-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
body.ouci #input-header-search { font-size: var(--hero-ctl-fs); }

/* On a phone the catalogue was bare text beside a pill — the two do the same
   kind of job, so they look the same. */
@media (max-width: 991.98px) {
  body.ouci #menu #category {
    border: 1px solid var(--ouci-line);
    border-radius: 50px;
    padding: 0 20px;
  }
}

@media (min-width: 992px) {
  /* The nav link is a flex item of the bar, so it needs the padding back that
     the shared rule above removes from the block. */
  body.ouci #menu .nav-link { padding-left: 20px; padding-right: 20px; }
}

/* Card typography and the two page-body gaps live in stylesheet.css or in rules
   too specific to edit in place, so they are pointed at the variables here. */
/* Books with no stock stay in the catalogue and say so, rather than offering a
   button that does nothing. */
body.ouci .product-thumb .product-out-of-stock-note {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 300;
  color: #b00020;
}
body.ouci .product-thumb:has(.product-out-of-stock-note) .image-frame { opacity: .72; }

body.ouci .product-thumb .product-name      { font-size: var(--fs-card-name); }
/* The author line under a card title inherited #888 from the stock theme: 3.54:1
   on white at 12.8px, under the 4.5:1 WCAG AA minimum and the only contrast
   failure on the site. --ouci-muted is 4.69:1 and is already the token every
   other secondary text on this skin uses. */
body.ouci .product-thumb .product-manufacturer { font-size: var(--fs-card-author); color: var(--ouci-muted); }
body.ouci .product-thumb .price,
body.ouci .product-thumb .price-new         { font-size: var(--fs-card-price); }
body.ouci-product-product #content .price-new { font-size: var(--fs-product-price); }
body.ouci .product-toolbar                  { margin-bottom: var(--cat-gap-toolbar); }
/* The part of a category description after `<!--more-->`, under the book list.
   A reading measure, and section headings on the same scale as the home rows. */
body.ouci .category-more                    { margin-top: var(--cat-gap-more); max-width: 72ch; }
body.ouci .category-more h2                 { font-size: var(--fs-section); margin: 1.5em 0 .5em; }
body.ouci .category-more h2:first-child     { margin-top: 0; }
body.ouci-product-product #content h1       { margin-bottom: var(--prod-gap-title); }

/* Below 380px the two pills plus a 15-character label do not fit on one line;
   the icon carries the AI button there on its own. */
@media (max-width: 379.98px) {
  body.ouci #menu #menu-ai-button .menu-ai-label { display: none; }
}

/* ---------- sub-category chips ----------
   On a phone the Каталог pill is a link to the catalogue, and this row under
   the heading is how you move between its sub-categories — on a sub-category
   too, where it lists the siblings with the current one filled. One line that
   scrolls sideways: 29 chips wrapped took 1400px, a screen and a half, above
   the first book. 40px chips inside a 48px row, 8px apart, the M3 filter chip. */
body.ouci #content > h1:has(+ .category-chips) { margin-bottom: 16px; }
/* A flex item's min-width is its min-content, and for #content that became the
   whole unwrapped chip row: wider than the space beside #column-left, so the
   column wrapped under the sidebar and the first book sat at ~1700px on a
   1440px desktop. */
body.ouci .row > #content.col { min-width: 0; }
body.ouci .category-chips {
  display: flex;
  gap: var(--ctl-gap-inner);
  margin-bottom: var(--page-gap-title);
  padding: 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
body.ouci .category-chips::-webkit-scrollbar { display: none; }
/* A name that is still long gets an ellipsis rather than a 600px chip. */
body.ouci .category-chip {
  flex: 0 0 auto;
  display: block;
  max-width: 280px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ouci-line);
  border-radius: 50px;
  font-size: 14px;
  line-height: 38px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  scroll-snap-align: start;
}
/* The generic `#content a:not(...)` link colour excludes .category-chip, or it
   would paint the active chip's label black on black. */
body.ouci #content > .category-chips > a.category-chip { color: var(--ouci-ink); text-decoration: none; }
body.ouci #content > .category-chips > a.category-chip:hover { border-color: var(--ouci-ink); }
body.ouci #content > .category-chips > a.category-chip.is-active {
  background: var(--ouci-ink);
  border-color: var(--ouci-ink);
  color: #fff;
}
body.ouci #menu a#category { color: var(--ouci-ink); text-decoration: none; }

/* Cart badge on the small header icon, and the add-to-cart toast. */
body.ouci .header-cart-link { display: inline-block; }
body.ouci .header-cart-icon { position: relative; display: inline-block; }
body.ouci .cart-badge {
  position: absolute; top: -9px; right: -11px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #d63c2f; color: #fff;
  font: 600 11px/18px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center;
}
body.ouci .cart-badge--pulse { animation: cart-badge-pulse .5s ease-out; }
@keyframes cart-badge-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Success toast: one short line on a solid card, not a pale box over the page text. */
body.ouci #alert { top: 84px; width: auto; max-width: 92vw; left: 50%; margin-left: 0; transform: translateX(-50%); }
body.ouci #alert .alert-success {
  background: #fff; color: #1c1c1c; border: 0; border-radius: 12px;
  padding: 12px 18px; margin: 0 0 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
  animation: toast-in .25s ease-out; white-space: nowrap;
}
body.ouci #alert .alert-success .fa-circle-check { color: #2e7d32; margin-right: 6px; }
body.ouci #alert .alert-success .btn-close { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* A book already in the basket does not offer itself again from the sticky bar. */
body.ouci #mobile-buy-bar.mobile-buy-bar--in-cart { display: none !important; }

/* With a mouse the basket panel drops down on every add and is the confirmation; keep the
   toast clear of it, at the bottom. A phone has no panel, so its toast stays at the top. */
@media (hover: hover) {
  body.ouci #alert { top: auto; bottom: 28px; }
}

/* ---------- checkout: pay bar (phone) ----------
   The real button is ~3 screens below the first field. This bar carries the total and
   the same action; checkout.twig hides it while the real button is on screen. */
#checkout-paybar { display: none; }

@media (max-width: 991.98px) {
  body.ouci #checkout-paybar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1044;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ouci-line);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .10);
  }
  body.ouci #checkout-paybar .checkout-paybar__total { display: flex; flex-direction: column; line-height: 1.2; }
  body.ouci #checkout-paybar .checkout-paybar__total strong { font-size: 19px; font-weight: 600; white-space: nowrap; }
  body.ouci #checkout-paybar .btn { flex: 1; padding: 12px; font-size: 16px; }

  body.ouci-checkout-checkout { padding-bottom: 76px; }
  body.ouci-checkout-checkout #chatbot-widget { bottom: 84px; }
  body.ouci-checkout-checkout #cookie.cookie-toast { bottom: 84px; }
}