/* ==========================================================================
   RADICO — single product
   Figma 2149:17790: the hero (2149:17792) and the details block (2149:17793).

   Elementor Pro's WooCommerce widgets carry the behaviour — gallery, price,
   add-to-cart, attributes — but almost none of the design's presentation, so
   the panel's typography, the pager dots, the quantity stepper, the accordion
   rows and the details table are all set here.
   ========================================================================== */

/* --- Gallery -------------------------------------------------------------- */
/* Figma puts the pager under the FIRST slide (x 479-532 of 1920), not under
   the pair. With two slides showing, half the track centres it there. */
/* Elementor's own `.elementor-widget-image-carousel .swiper-pagination`
   pins the pager 5px from the bottom, so the widget class has to be named. */
.elementor-widget-image-carousel.radico-product-carousel .swiper-pagination,
.radico-product-carousel .elementor-widget-image-carousel .swiper-pagination,
.radico-product-carousel .swiper-pagination {
  left: 0;
  right: auto;
  bottom: 39px;
  left: 33.3333%;
  width: 33.3333%;
}

/* Figma bleeds the slides over the full section height; Elementor centres
   them at their natural height and leaves a band above and below. */
/* The band's height is stated outright rather than inherited: a percentage
   would resolve against the container's `auto` height (min-height does not
   make it definite), and letting the swiper grow as a flex item feeds its own
   content height back into the container — which runs away. */
.radico-product-carousel .swiper,
.radico-product-carousel .swiper-wrapper,
.radico-product-carousel .swiper-slide,
.radico-product-carousel .swiper-slide figure {
  height: var(--radico-product-band, 959px);
}
.radico-product-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.radico-product-carousel .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: var(--radico-radius-full);
  background: var(--radico-space-300);
  opacity: 1;
}
.radico-product-carousel .swiper-pagination-bullet-active {
  background: var(--radico-blue-950);
}

@media (max-width: 1024px) {
  .radico-product-carousel { --radico-product-band: 560px; }
  .radico-product-carousel .swiper-pagination { width: 100%; bottom: 16px; }
}
@media (max-width: 767px) {
  .radico-product-carousel { --radico-product-band: 380px; }
}

/* --- Info panel ----------------------------------------------------------- */
/* The panel is as tall as its content. It used to scroll inside a fixed 959px
   band; now the band follows the photographs, and a short landscape set left
   the panel clipped with the price and cart hidden inside it. */
.radico-product-info { max-height: none; overflow: visible; }

/* Breadcrumbs — three levels with a chevron between them. */
.radico-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-crumbs a { color: inherit; text-decoration: none; }
.radico-crumbs a:hover { color: var(--radico-blue-950); }
.radico-crumb-sep {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("img/icon-chevron-right.svg") center / 6px 12px no-repeat;
  mask: url("img/icon-chevron-right.svg") center / 6px 12px no-repeat;
}

/* Title + wishlist. */
.radico-product-title-row .elementor-heading-title {
  font-size: 40px;
  line-height: 1.1;
}
/* Blown up to 32px it sat level with a 40px title and read as a second piece of
   branding rather than a control beside the name. */
.radico-product-wishlist .radico-list-toggle { width: 24px; height: 24px; }
.radico-product-wishlist .radico-list-toggle::before { width: 22px; height: 22px; }

/* Stock + SKU. The design prefixes the stock state with a check-circle;
   there is no such icon in the exported set, so it is drawn inline. */
.radico-product-meta a { color: inherit; text-decoration: none; }
.radico-product-stock { display: flex; align-items: center; gap: 4px; }
.radico-product-stock::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--radico-check) center / 18px 18px no-repeat;
  mask: var(--radico-check) center / 18px 18px no-repeat;
}
:root {
  --radico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}

/* Colour swatches. Smaller than Figma's 80px at the client's request, and
   built from the sibling products rather than three static images. */
.radico-colours__label {
  margin: 0 0 16px;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-colours__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.radico-colours__swatch {
  display: block;
  padding: 0;
  border: 1px solid var(--radico-space-300);
  line-height: 0;
  transition: box-shadow .15s, border-color .15s;
}
/* One size across the site: on a desk the row sits above the tabletop swatches
   and the size boxes and has to line up with them, while on a chair it stands
   alone — so the constrained side sets it for both.

   Back up from 44px. They stopped being flat colours once they carried the
   chair's own weave, and a weave needs room to read as a fabric rather than a
   speckle; the client asked for them larger twice. */
.radico-colours__swatch img,
.radico-colours__blank {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--radico-space-100);
}
.radico-colours__swatch:hover { border-color: var(--radico-blue-950); }
.radico-colours__swatch.is-active {
  border-color: var(--radico-blue-950);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--radico-blue-950);
}

/* --- Price ---------------------------------------------------------------- */
.radico-product-price-row .price {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.radico-price-main {
  font: var(--radico-fw-bold) 24px/1.1 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-price-was {
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: line-through;
}

.radico-product-compare .radico-list-toggle {
  gap: 16px;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  text-decoration: none;   /* the header's labelled variant underlines */
}
.radico-product-compare .radico-list-toggle::before {
  width: 20px;
  height: 20px;
  background-color: var(--radico-blue-950);
}
.radico-product-compare .radico-list-count { margin-left: -12px; }

/* --- Add to cart ---------------------------------------------------------- */
.radico-product-cart { width: 100%; }
.radico-product-cart form.cart {
  display: flex;
  /* Wraps at every width, not just on phones. A variable product puts the
     attribute table and `.single_variation_wrap` in this row too, and with
     nowrap the wrap was pushed 290px past the panel's right edge. */
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
/* Price, availability and the add-to-cart button travel together on their own
   row under the attributes. `1 1 100%` with `min-width: 0`, not `1 0 100%`:
   shrink 0 pinned the block at its 414px min-content and it hung 48px past the
   panel on a phone. */
.radico-product-cart form.cart .single_variation_wrap {
  flex: 1 1 100%;
  min-width: 0;
}
.radico-product-cart .quantity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--radico-space-100);
}
.radico-product-cart .quantity .qty {
  width: 2ch;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  -moz-appearance: textfield;
}
.radico-product-cart .quantity .qty::-webkit-inner-spin-button,
.radico-product-cart .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.radico-qty-step {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: var(--radico-blue-950);
  cursor: pointer;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.radico-qty-step--minus {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-size: 14px 2px;
  mask-size: 14px 2px;
}
/* A plus is the same bar twice, crossed — two mask layers, no icon file. */
.radico-qty-step--plus {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-size: 14px 2px, 2px 14px;
  mask-size: 14px 2px, 2px 14px;
}

.radico-product-cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: var(--radico-space-100);
  color: var(--radico-blue-950);
  font: var(--radico-fw-bold) 18px/1.5 var(--radico-font);
  transition: background .15s;
}
/* The button reverses out on hover, like the design's other CTAs. */
.radico-product-cart .single_add_to_cart_button:hover,
.radico-product-cart .single_add_to_cart_button:focus-visible {
  background: var(--radico-blue-950);
  color: var(--radico-space-50);
}

/* --- Accordions ----------------------------------------------------------- */
/* Figma draws them as hairline rows: label left, chevron right, no box. */
.radico-product-accordions .elementor-accordion,
.radico-product-accordions .elementor-toggle,
.radico-product-accordions .elementor-accordion-item,
.radico-product-accordions .elementor-toggle-item {
  border: 0;
}
.radico-product-accordions .elementor-accordion-item,
.radico-product-accordions .elementor-toggle-item {
  border-top: 1px solid var(--radico-space-200);
}
/* Elementor puts the icon first in the DOM and floats it right; a float does
   nothing inside the flex row the design needs, so it is ordered instead. */
.radico-product-accordions .elementor-accordion-icon-right,
.radico-product-accordions .elementor-toggle-icon-right { order: 2; }
.radico-product-accordions .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border: 0;
  background: none;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-product-accordions .elementor-accordion-icon,
.radico-product-accordions .elementor-toggle-icon { width: 16px; float: none; }
.radico-product-accordions .elementor-accordion-icon svg,
.radico-product-accordions .elementor-toggle-icon svg { width: 16px; height: 16px; }
.radico-product-accordions .elementor-tab-content {
  padding: 0 0 16px;
  border: 0;
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}

/* The specification inside the "Характеристики" row. Label and value on one
   line, hairline between rows: a reference list is read by scanning down the
   values, so they share an edge rather than following the label inline. The
   label column is capped so a long one wraps instead of squeezing the value. */
.radico-spec-table {
  display: grid;
  gap: 0;
  margin: 0;
}
.radico-spec-table__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--radico-space-200);
}
.radico-spec-table__row:first-child { border-top: 0; }
.radico-spec-table dt {
  margin: 0;
  font-weight: var(--radico-fw-light);
  color: var(--radico-blue-700, var(--radico-blue-950));
}
.radico-spec-table dd {
  margin: 0;
  font-weight: var(--radico-fw-regular, 400);
  color: var(--radico-blue-950);
}
@media (max-width: 480px) {
  /* Two columns at this width leave the value a few characters wide. */
  .radico-spec-table__row { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Details block (2149:17793) ------------------------------------------- */
/* Text tabs with a rule under the active one — Elementor's nested tabs ship
   as filled pills, and their colours come from CSS variables the widget
   writes, so they are reset here rather than fought with selectors. */
.radico-product-details .e-n-tabs-heading {
  --n-tabs-title-color: var(--radico-blue-950);
  --n-tabs-title-color-active: var(--radico-blue-950);
  --n-tabs-title-background-color: transparent;
  --n-tabs-title-background-color-active: transparent;
  --n-tabs-title-border-width: 0;
  gap: 0;
}
.radico-product-details .e-n-tab-title {
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-product-details .e-n-tab-title[aria-selected="true"] {
  border-bottom-color: var(--radico-blue-950);
}

.radico-product-details table.woocommerce-product-attributes {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
.radico-product-details table.woocommerce-product-attributes tr {
  border-bottom: 1px solid var(--radico-space-200);
}
.radico-product-details table.woocommerce-product-attributes th,
.radico-product-details table.woocommerce-product-attributes td {
  padding: 9px 0;
  border: 0;
  background: none;
  /* Both cells share one line box, or the value sits below its label. */
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  font-style: normal;   /* WooCommerce italicises every value */
  color: var(--radico-blue-950);
  vertical-align: baseline;
}
/* Figma sets the values on their own left edge, not ragged against the right. */
.radico-product-details table.woocommerce-product-attributes th {
  width: 45%;
  text-align: left;
  font-weight: var(--radico-fw-light);
}
.radico-product-details table.woocommerce-product-attributes td { text-align: left; }
/* WooCommerce pads the value's own <p> and gives it its own line-height,
   which drops the value below its label. */
.radico-product-details table.woocommerce-product-attributes p {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
}

/* The four spec cards under the table. Four across the row means
   calc(25% - gap), which Elementor's width control has no unit for — and a
   plain percentage overflows by the gaps and wraps the last card. */
/* Strictly equal columns. Elementor writes `flex` on the element's own class,
   which outranks a single class here — but it also writes `width: var(--width)`,
   so setting the variable is the lever that actually works. */
.radico-spec-card {
  --width: calc(25% - 18px);
  min-width: 0;
  gap: 12px;
  align-items: center;
}
.radico-spec-card > .e-con { min-width: 0; align-self: center; }
/* The chair glyphs are 102px in Figma's 1920 frame; at four to a row here they
   crowd the copy, so they hold a fixed, smaller box and the text takes the
   rest. */
.radico-spec-card > .elementor-widget-image {
  flex: 0 0 76px;
  width: 76px;
}
.radico-spec-card > .elementor-widget-image img { width: 76px; height: auto; }
.radico-spec-card > .e-con { min-width: 0; }
/* Their values come from taxonomies, so they render as term links; the design
   draws them as plain bold text. */
.radico-spec-card a {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 1024px) {
  .radico-spec-card { --width: calc(50% - 12px); }
}
@media (max-width: 767px) {
  /* Two across on a phone: one per row left the section a screen and a half
     of mostly white space. */
  .radico-spec-card { --width: calc(50% - 12px); min-width: 0; }
  .radico-spec-card > .elementor-widget-image { flex-basis: 56px; width: 56px; }
  .radico-spec-card > .elementor-widget-image img { width: 56px; }
}

/* The long description is authored with its own subheads; the design shows
   plain copy, so they come down to the section's body scale. */
.radico-product-details .elementor-widget-woocommerce-product-content h2,
.radico-product-details .elementor-widget-woocommerce-product-content h3,
.radico-product-details .elementor-widget-woocommerce-product-content h4 {
  margin: 0 0 8px;
  font: var(--radico-fw-bold) 24px/1.1 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-product-details .elementor-widget-woocommerce-product-content p {
  margin: 0 0 16px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  /* The panel floats over the gallery only at desktop; below that it stacks
     under it. Elementor writes `position:absolute` on the element's own class,
     so naming the hero as well outranks it. */
  .radico-product-hero .radico-product-info {
    position: static;
    max-height: none;
    overflow: visible;
    inset: auto;
  }
  .radico-product-hero { min-height: 0; }
  /* Same fallback as the header: the title row's children would each take a
     full line, putting the heart under the title. */
  .radico-product-title-row { flex-direction: row; flex-wrap: nowrap; }
  .radico-product-title-row > .elementor-widget-heading {
    flex: 1 1 auto;
    min-width: 0;
  }
  .radico-product-title-row > .elementor-widget-shortcode {
    --width: auto;
    width: auto;
    flex: 0 0 auto;
  }
  .radico-product-title-row .elementor-heading-title { font-size: 32px; }
}
@media (max-width: 767px) {
  .radico-product-title-row .elementor-heading-title { font-size: 26px; }
  .radico-product-cart { width: 100%; }
.radico-product-cart form.cart { flex-wrap: wrap; }
  .radico-product-cart .single_add_to_cart_button { flex: 1 1 100%; }
  /* A variable product wraps its quantity and button in this row, which does
     not inherit the form's wrapping — the button ran 48px past the panel.
     `form.cart` is in the selector to clear WooCommerce's own
     `.woocommerce div.product form.cart .variations_button`. */
  .radico-product-info form.cart .woocommerce-variation-add-to-cart,
  .radico-product-cart form.cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  /* min-width: 0 as well as the basis: a flex item will not shrink past its
     own min-content, and "Добавяне в количката" is 251px of it. */
  .radico-product-info form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
  .radico-product-cart form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* The stepper glyphs are painted with background-color through a mask, so the
   global button reset's transparent hover erased them. They keep their own
   colour on every state. */
.radico-qty-step,
.radico-qty-step:hover,
.radico-qty-step:focus,
.radico-qty-step:active {
  background-color: var(--radico-blue-950);
}
.radico-qty-step:hover { opacity: .7; }

/* The figure slides in from whichever way it was stepped. */
@keyframes radico-qty-bump {
  from { transform: translateY(var(--radico-qty-dir, 0)); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.radico-product-cart .quantity .qty.is-bump {
  animation: radico-qty-bump .22s ease;
}
.radico-product-cart .quantity .qty { transition: color .15s; }
@media (prefers-reduced-motion: reduce) {
  .radico-product-cart .quantity .qty.is-bump { animation: none; }
}


/* The carousel's slides sit outside the track by design; without clipping they
   push the page 27px wider than the phone and the whole layout scrolls. */
.radico-product-hero { overflow-x: clip; }
.radico-product-carousel .swiper,
.radico-product-carousel .elementor-image-carousel-wrapper { overflow: hidden; }

/* ==========================================================================
   Product reviews
   The design lists the quotes across the section — no avatars, no write-a-
   review form (reviews arrive from orders, not from the page).
   ========================================================================== */
.radico-product-reviews #reviews,
.radico-product-reviews #comments,
.radico-product-reviews ol.commentlist {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.radico-product-reviews ol.commentlist li {
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
}
.radico-product-reviews .comment_container {
  display: block;
  padding: 0;
  background: none;
  border: 0;
}
/* No avatars. */
.radico-product-reviews .comment_container img.avatar,
.radico-product-reviews .comment_container .avatar { display: none; }
.radico-product-reviews .comment-text {
  margin: 0;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--radico-space-200);
  border-radius: 0;
}
.radico-product-reviews .comment-text p { margin: 0 0 8px; }
.radico-product-reviews .meta {
  margin: 0 0 12px;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-product-reviews .meta strong {
  font-weight: var(--radico-fw-bold);
  color: var(--radico-blue-950);
}
.radico-product-reviews .description {
  font: var(--radico-fw-light) 18px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}

/* The form is not part of the design; reviews come in with orders. The
   section's own heading and copy sit in the left column, so WooCommerce's
   "4 отзива за …" title is the same thing said twice. */
.radico-product-reviews #review_form_wrapper,
.radico-product-reviews #review_form,
.radico-product-reviews .woocommerce-Reviews-title,
.radico-product-reviews .woocommerce-verification-required { display: none; }

/* One review, as the design sets it: attribution and stars on one line, the
   quote under them, a hairline between. */
/* The attribution reads as one phrase; only the stars go to the far edge.
   `space-between` spread the name, the badge, the dash and the date evenly
   across the row. */
.radico-product-reviews .comment-text .meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.radico-product-reviews .comment-text .star-rating,
.radico-product-reviews .comment-text .radico-stars {
  flex: 0 0 auto;
  margin-left: auto;
}

/* On a phone the list becomes a carousel — four stacked reviews is a very long
   scroll on the way to the rest of the page. */
@media (max-width: 767px) {
  .radico-reviews-carousel { position: relative; }
  .radico-reviews-carousel ol.commentlist {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
  }
  .radico-reviews-carousel ol.commentlist li {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
  }
  .radico-reviews-carousel .radico-reviews-nav {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
    margin-top: 16px;
  }
  .radico-reviews-nav button {
    width: 8px;
    height: 16px;
    padding: 0;
    border: 0;
    background-color: var(--radico-blue-950);
    cursor: pointer;
    -webkit-mask: url("img/icon-chevron-right.svg") center / 8px 16px no-repeat;
    mask: url("img/icon-chevron-right.svg") center / 8px 16px no-repeat;
  }
  .radico-reviews-nav button:hover,
  .radico-reviews-nav button:focus { background-color: var(--radico-blue-700); }
  .radico-reviews-nav .radico-reviews-prev { transform: rotate(180deg); }
}
@media (min-width: 768px) {
  .radico-reviews-nav { display: none; }
}

/* ==========================================================================
   Product gallery (theme-rendered)
   Elementor's carousel only offered the "large" size and had no video slide,
   so the gallery is rendered here: full-size stills, an optional autoplaying
   film first, and the pager under the left-hand slide as Figma draws it.
   ========================================================================== */
/* The band takes its height from the photographs. Fixing it at the design's
   959px left a grey stripe above and below every portrait still, because the
   images fit inside the slot rather than filling it — but it still needs a
   floor, or a set of landscape shots makes a band too short for the info
   panel floating over it. */
.radico-gallery {
  position: relative;
  /* No 800px floor any more: it was there for when the band took its height
     from the photograph and a landscape shot left it too short for the panel.
     The frame sets the height now, and the floor was the thing forcing a strip
     of ground under the picture. */
  min-height: 0;
  overflow: hidden;
}
.radico-gallery__track {
  display: flex;
  align-items: stretch;
  /* The same ease-out Lenis uses for the page, so the carousel and the
     document feel like one motion. */
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: grab;
  touch-action: pan-y;
}
.radico-gallery__track.is-dragging {
  cursor: grabbing;
  transition: none;
  user-select: none;
}
.radico-gallery__slide img { pointer-events: none; }
/* One frame at a time. The slide is exactly the width the panel leaves
   uncovered, so a frame always fills the visible half and the strip never ends
   on a run of empty slots — with three across, the last frame left two.
   `--radico-panel` is the panel's own width; keep the two in step. */
.radico-gallery {
  /* The frame is square, and the panel takes whatever is left of the row.
     A landscape frame left a square photograph with a band down each side —
     the only ways to fill it were to crop the chair or to make the band as
     tall as the picture was wide. A square frame does neither: square stills
     fill it exactly, and it is the format the photography is being
     standardised to. */
  /* The panel takes 45% and the frame the rest, less the peek. The frame is
     square, so its width sets the band's height — the photograph then reaches
     the bottom of the section instead of leaving a strip under it. */
  /* The frame wants 55% of the row, but never more than the screen has left
     under the header — so the picture and the card beside it are both whole
     before a scroll. Below that ceiling the split is the 55/45 it was; above
     it the frame stops growing and the panel takes what is left. */
  --radico-panel: calc(100% - var(--radico-frame));
  /* No peek: one frame fills the column and the next begins outside it, under
     the panel. The dots and the counter say there are more. */
  --radico-peek: 0px;
}
/* The frame is the column the panel leaves, less the peek, and as tall as the
   band. Height is not tied to width: the band is as tall as the panel's own
   content, and a square frame at this width would be shorter than that and
   leave a strip of ground beneath the picture. */
/* Landscape: 55% wide, and as tall as the screen has left under the header, so
   the picture and the card beside it are both whole before a scroll.
   The inset keeps the chair off the top and bottom edges — `border-box`, so the
   padding comes out of the frame rather than growing it and the section still
   ends where the screen does. */
.radico-gallery__slide {
  position: relative;
  flex: 0 0 var(--radico-frame);
  height: var(--radico-frame-h);
  box-sizing: border-box;
  /* Without script the still is simply contained with some air. With it,
     product.js frames each still around the chair — see paintBackdrop() —
     and a still framed larger than the frame is clipped to it. */
  padding-block: calc(var(--radico-frame-h) * 0.06);
  overflow: hidden;
  min-width: 0;
  background: var(--radico-space-100);
}
/* The rest of the frame is the photograph's own studio backdrop, carried out
   from its edges by product.js — see paintBackdrop(). It sits under the still,
   so until it is painted the frame shows its plain ground. */
.radico-gallery__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Fills the frame edge to edge. The frame is landscape and the stills are
   square or portrait, so the picture is cropped top and bottom rather than
   shrunk to fit — filling the column matters more here than keeping every
   pixel of the photograph. */
.radico-gallery__slide img,
.radico-gallery__slide video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* A still that is not on a plain backdrop — a lifestyle frame — cannot be
   carried outwards without a seam, so it fills the frame instead. The film
   does the same. */
.radico-gallery__slide.is-cover,
.radico-gallery__slide--video { padding-block: 0; }
.radico-gallery__slide.is-cover img,
.radico-gallery__slide--video video { object-fit: cover; }
/* A <picture> around the still would become the image's layout box; the slide
   has to stay it, so the framing sizes the <img> against the frame itself. */
.radico-gallery__slide picture { display: contents; }

/* No photograph yet: the frame stays, empty. Without it the gallery returned
   nothing at all and the panel beside it climbed over the product's title. The
   ground is the same one every slide carries, so the band reads as a picture
   still to come rather than as a hole. */
/* Keeps the frame's own height: the band is full-bleed by design and the panel
   floats over it, so a shorter placeholder only opens a gap under the panel.
   An earlier attempt cut this to two thirds on the theory that it was pushing
   the title under the header — measuring a chair, which has photographs, showed
   the same title position and the same full-width band, so that was the
   template behaving normally rather than a fault to fix. */
.radico-gallery__slide--empty {
  padding-block: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--radico-space-100) 0 14px,
      var(--radico-space-200, #E8EAEA) 14px 28px
    );
  opacity: .45;
}

/* Framed by script: the still is placed and sized inline around the chair. */
.radico-gallery__slide.is-framed { padding-block: 0; }
.radico-gallery__slide.is-framed img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.radico-gallery__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The pager spans the part of the band the visitor can actually see — the
   white info panel covers everything from 58.07% across — so the dots centre
   on the images. The counter sits at that strip's left edge, out of the
   centring so the dots do not shift as its digits grow. */
.radico-gallery__pager {
  position: absolute;
  left: 0;
  right: calc(var(--radico-panel) + var(--radico-peek));
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radico-gallery__count {
  position: absolute;
  left: 24px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .85);
  font: var(--radico-fw-light) 14px/1.2 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-gallery__count .radico-gallery__current {
  font-weight: var(--radico-fw-bold);
}

/* Circles, not squares. The Elementor kit zeroes every button's radius from
   `.elementor-kit-12 button` — two classes — so this needs three to win. */
.radico-gallery .radico-gallery__dots .radico-gallery__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: var(--radico-space-300);
  cursor: pointer;
  transition: background-color .2s;
}
.radico-gallery .radico-gallery__dots .radico-gallery__dot.is-active,
.radico-gallery .radico-gallery__dots .radico-gallery__dot:hover {
  background-color: var(--radico-blue-950);
}

/* The header is 168px before it tightens on scroll; the admin bar adds its own
   when someone is signed in. */
.radico-product-hero {
  --radico-header: 168px;
  /* The frame keeps its 55% — it does not shrink to fit. What fits the screen
     is its height, and the picture is cropped top and bottom to fill it. */
  --radico-frame: 55%;
  --radico-frame-h: calc(100dvh - var(--radico-header));
}
body.admin-bar .radico-product-hero { --radico-header: 200px; }

/* The white panel runs the full height of the band, as in Figma, and takes the
   width the square frame leaves. */
.radico-product-hero .radico-product-info {
  bottom: 0;
  width: calc(100% - var(--radico-frame));
}

/* The band holds two things in one place: the film strip, which runs the full
   width so the next still peeks out behind, and the white panel over its right
   portion. Elementor did that by taking the panel out of flow — `absolute`,
   pinned top and bottom — which locked its height to the picture's. The panel's
   own content was already 955px against a 912px band with both accordions shut,
   so it spilled over the section below; opening one made the overlap plain.
   A single grid cell holds both instead. Overlapping keeps the Figma band
   exactly as it was, but the panel is back in flow and the row grows to fit it,
   however far the accordions open. The strip then sticks to the top of the
   viewport for as long as that row lasts, so the picture stays in view while the
   panel is read — which is the behaviour asked for, and it comes free once the
   panel is the thing that sets the height. */
@media (min-width: 1025px) {
  .radico-product-hero {
    display: grid;
    grid-template-columns: 100%;
    align-items: start;
  }
  /* Both children occupy the same cell. */
  .radico-product-hero > .radico-product-info,
  .radico-product-hero > :has(.radico-gallery) {
    grid-area: 1 / 1;
  }
  .radico-product-hero > :has(.radico-gallery) {
    position: sticky;
    /* The tightened header, not the full one — see product.js. */
    top: var(--radico-header-tight, var(--radico-header));
    height: var(--radico-frame-h);
    z-index: 1;
  }
  .radico-product-hero > .radico-product-info {
    position: relative;
    inset: auto;
    justify-self: end;
    height: auto;
    min-height: var(--radico-frame-h);
    z-index: 2;
  }
}

/* Two across on a tablet: one portrait still spanning 834px makes a band
   1251px tall, which is most of the screen before a word of copy. */
@media (max-width: 1024px) {
  .radico-gallery {
    min-height: 0;
    --radico-peek: 0px;
  }
  .radico-product-hero { --radico-frame: 100%; --radico-frame-h: 62vh; }
  .radico-gallery__slide { flex-basis: 100%; }
  /* The panel stacks under the gallery below desktop, so the whole band is
     visible and the pager centres on all of it. */
  .radico-gallery__pager { right: 0; bottom: 16px; }
  /* The panel stacks under the gallery here, so it takes the whole width —
     the desktop rule subtracts the frame and the peek and would leave it a few
     dozen pixels wide. */
  .radico-product-hero .radico-product-info {
    bottom: auto;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .radico-gallery__pager { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .radico-gallery__track { transition: none; }
}

/* The per-product lifestyle band and explainer film. */
/* The band shows the whole photograph rather than cropping it to a fixed
   height — the shot is wide and 940px of `cover` cut the room in half. */
.radico-lifestyle {
  display: block;
  width: 100%;
  height: auto;
}
.radico-product-lifestyle .elementor-widget-shortcode,
.radico-product-lifestyle .elementor-shortcode { height: 100%; }
/* The explainer film is shot vertically, so it is boxed rather than stretched
   across the band. */
/* Two classes, not one: a generic `video { max-width: 100% }` further down the
   cascade was beating the single-class rule and letting the film run to 540px.
   The height is capped to the band's own so the section keeps its proportions
   rather than growing to 80vh. */
.radico-product-assembly .radico-explainer,
.radico-explainer {
  display: block;
  width: auto;
  max-width: 420px;
  max-height: 560px;
  margin-inline: auto;
  background: var(--radico-space-100);
}

/* WooCommerce's breadcrumb is a <nav> with a paragraph's bottom margin, which
   added to the container gap and pushed the title away from its kicker. */
.radico-product-info .radico-crumbs { margin-bottom: 0; }

/* ---- Variation colours ---------------------------------------------------
   The swatch row is the control; WooCommerce's own select is the mechanism
   behind it and stays in the DOM so its script keeps working.
   -------------------------------------------------------------------------- */
/* Only the colour row is replaced by swatches. The headrest row is a real
   choice with no other control, so the table itself has to stay visible —
   hiding `.variations` wholesale took the headrest with it. */
.radico-product-cart .reset_variations { display: none; }

/* The table is laid out as blocks: a table cell shrinks to its content, which
   left the selects 112px wide instead of filling the panel. */
.radico-product-cart .variations,
.radico-product-cart .variations tbody,
.radico-product-cart .variations tr {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}
/* The cart form is a flex row, so the table shrank to its content and
   `width: 100%` had nothing to resolve against. */
.radico-product-cart .variations {
  flex: 1 1 100%;
  min-width: 0;
  margin-bottom: 24px;
}
.radico-product-cart .variations td.value,
.radico-product-cart .variations th.label { width: 100%; }
/* After the display rules, not before: at equal specificity the later rule
   wins, and `tr { display: block }` was putting the colour row back. */
.radico-product-cart .variations tr.radico-variation-select { display: none; }
.radico-product-cart .variations th,
.radico-product-cart .variations td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  text-align: left;
}
.radico-product-cart .variations th.label label {
  display: block;
  margin: 0 0 16px;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-product-cart .variations select {
  width: 100%;
  min-height: 56px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--radico-space-300);
  border-radius: 4px;
  background: #fff;
  font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  cursor: pointer;
  /* Native arrow sits inconsistently across platforms; the design's chevron
     is drawn here instead. */
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B2F41' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.radico-product-cart .variations select:focus-visible {
  outline: 2px solid var(--radico-blue-950);
  outline-offset: 2px;
}

.radico-colours__swatch[aria-pressed] { cursor: pointer; }
.radico-colours__blank {
  background: var(--radico-swatch, var(--radico-space-100));
}

/* The variation's own price replaces the product's range while a colour is
   chosen — showing both is the same figure twice, in two type styles. */
.radico-product-info.has-variation .radico-product-price-row .price { display: none; }

.radico-product-cart .woocommerce-variation-price,
.radico-product-cart .woocommerce-variation-price .price,
.radico-product-cart .woocommerce-variation-price .price .amount,
.radico-product-cart .woocommerce-variation-price .price bdi,
.radico-product-cart .woocommerce-variation-price .price ins {
  font: var(--radico-fw-bold) 24px/1.1 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-product-cart .woocommerce-variation-price { margin-bottom: 16px; }
.radico-product-cart .woocommerce-variation-availability p {
  margin: 0 0 8px;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}

/* --- Explainer player ------------------------------------------------------
   The bare <video controls> put the browser's own control bar across the film
   as its entire presentation. The shell gives it a play affordance in the
   design's language and only reveals the native controls once it is running,
   so playback, scrubbing and fullscreen still come from the browser.
   -------------------------------------------------------------------------- */
.radico-video {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--radico-space-100);
}
.radico-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(11, 47, 65, .18);
  cursor: pointer;
  transition: background .2s;
}
.radico-video__play:hover { background: rgba(11, 47, 65, .3); }
.radico-video__icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* The glyph is painted with a gradient rather than a border triangle so the
     control keeps one background declaration — see docs/build-notes.md on the
     masked-glyph controls this theme uses elsewhere. */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' viewBox='0 0 22 26'%3E%3Cpath d='M21 13L0 26V0z' fill='%230B2F41'/%3E%3C/svg%3E") no-repeat center;
  background-size: 22px 26px;
  transition: transform .2s;
}
.radico-video__play:hover .radico-video__icon { transform: scale(1.08); }
.radico-video.is-playing .radico-video__play { display: none; }

/* --- Variation option cards ------------------------------------------------
   A two-way choice reads better as two tiles than as a dropdown. The native
   select stays in the DOM and keeps driving WooCommerce; the cards drive it,
   exactly as the colour swatches do. The select is hidden only once the cards
   exist (`.radico-has-vopts` is added by the script), so with JavaScript off
   the dropdown is still there and still works.
   -------------------------------------------------------------------------- */
.radico-vopts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.radico-vopt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--radico-space-300);
  border-radius: 4px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.radico-vopt__name {
  font: var(--radico-fw-bold) 16px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-vopt__note {
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-vopt:hover { border-color: var(--radico-blue-950); }
/* An inset ring rather than a thicker border: a 2px border would change the
   tile's size and shift its neighbour. */
.radico-vopt.is-active {
  border-color: var(--radico-blue-950);
  box-shadow: inset 0 0 0 1px var(--radico-blue-950);
}

/* The select and WooCommerce's "Изчистване" link are the mechanism, not the
   control, once the cards are rendered. */
/* The class lands on the select's row, whatever element that turns out to be —
   a `tr` in WooCommerce's table markup, the wrapping cell otherwise. */
/* `!important` for the same reason the reset link needs it: Elementor's cart
   widget sets `display` on these selects at a higher specificity, and this is a
   deliberate hide of a control the cards have replaced. */
.radico-product-cart .variations .radico-has-vopts select,
.radico-has-vopts select { display: none !important; }
.radico-product-info .reset_variations,
.radico-product-cart .reset_variations { display: none !important; }

/* No filled bands behind the label or the row — the panel is white. */
.radico-product-cart .variations,
.radico-product-cart .variations tbody,
.radico-product-cart .variations tr,
.radico-product-cart .variations th,
.radico-product-cart .variations td { background: none; }

/* The variation price and the compare control share a line; the quantity and
   add-to-cart keep their own row beneath. */
.radico-product-cart form.cart .single_variation_wrap.radico-has-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.radico-has-compare .woocommerce-variation { flex: 0 1 auto; }
.radico-has-compare .radico-product-compare { flex: 0 0 auto; }
.radico-has-compare .woocommerce-variation-add-to-cart { flex: 1 0 100%; }
/* The panel's own price row holds nothing once the control has moved. */
.radico-product-price-row.is-compare-moved { display: none; }

/* --- Product attributes ----------------------------------------------------
   Replaces both WooCommerce's "Additional information" table and the four
   static chair cards that used to sit below it. Four across, the icon large on
   the left, then the attribute's label small and grey above its value. The
   hairline under each row is the one the old cards carried.
   -------------------------------------------------------------------------- */
.radico-specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.radico-specs__row {
  display: flex;
  /* Top, not centre: a cell with three lines of value pushed its icon and its
     label down, so nothing lined up across the row. */
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  margin: 0;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--radico-space-300);
}
/* The slot keeps its width whether or not a glyph exists, so the labels stay
   in one column while the rest of the set is drawn. */
.radico-specs__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin-top: -4px;
  display: grid;
  place-items: center;
}
.radico-specs__icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.radico-specs__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* The label is set small, uppercase and tracked out, so it reads as a caption
   over the value rather than competing with it. */
.radico-specs__label {
  font: var(--radico-fw-light) 13px/1.3 var(--radico-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--radico-space-500);
}
.radico-specs__value {
  font: var(--radico-fw-bold) 24px/1.25 var(--radico-font);
  color: var(--radico-blue-950);
  /* "Комбиниран (мрежа+текстил)" is one unbreakable token wider than its
     column, and without this it paints over the neighbouring tile's icon
     instead of wrapping — 74px of it, measured. */
  overflow-wrap: anywhere;
}
.radico-specs__value sup {
  font-size: .6em;
  vertical-align: super;
  color: var(--radico-space-500);
}
/* The height qualification, footnoted under the grid rather than inside a tile
   so the four columns keep their baselines. */
.radico-specs__note {
  margin: 18px 0 0;
  font: var(--radico-fw-light) 14px/1.6 var(--radico-font);
  color: var(--radico-space-500);
}

@media (max-width: 1024px) {
  .radico-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radico-specs__value { font-size: 22px; }
  .radico-specs__icon { flex-basis: 52px; width: 52px; height: 52px; }
}
@media (max-width: 767px) {
  .radico-specs { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .radico-specs__value { font-size: 20px; }
  .radico-specs__icon { flex-basis: 48px; width: 48px; height: 48px; }
}

/* Client's chair master template: expertise first, specifications last. */
.radico-editorial { color: var(--radico-blue-950); font: 300 17px/1.65 var(--radico-font); }
.radico-editorial h2 { font: 600 clamp(28px, 2.6vw, 44px)/1.18 var(--radico-font); margin: 0 0 24px; }
.radico-editorial h3 { font: 500 20px/1.3 var(--radico-font); margin: 0 0 8px; }
.radico-editorial p { margin: 0 0 18px; }
.radico-editorial__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .13em; }
.radico-editorial__lead { font-size: 24px; font-weight: 400; }
.radico-sitting { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 72px; padding: clamp(32px, 6vw, 96px); background: #f2eee2; }
.radico-editorial dt { font-weight: 300; }
.radico-editorial dd { margin: 0; font-weight: 500; }
.radico-sitting .radico-sitting__note { grid-column: 1 / -1; max-width: 1040px; margin: 0; font-size: 14px; }
.radico-editorial__section { padding: clamp(32px, 6vw, 96px); }

/* 6vw is 86px top and bottom at 1440, and the square grows with the column —
   together they made each block 770px tall for 598px of film and at most 503px
   of text, and the three ran to 2311px, or two and a half screens. The client
   asked for the premium feel without the excess; the air comes down, the
   picture stops growing, and nothing about the arrangement changes. */
.radico-editorial__story { padding: clamp(28px, 4.2vw, 68px); background: #f3f5f6; }
.radico-editorial__story:nth-child(even) { background: #fff; }
.radico-editorial__story > div { max-width: 780px; }
.radico-editorial__story.has-image { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.radico-editorial__story:nth-child(even) .radico-editorial__image { order: 2; }
.radico-editorial__image { width: 100%; aspect-ratio: 1; object-fit: contain; }
/* Scoped to the story, because a bare class lost the max-width to a wider
   rule for media — computed came back as 100% and the square grew with the
   column instead of stopping. */
.radico-editorial__story .radico-editorial__image { max-width: 520px; margin-inline: auto; }
/* The two halves of one recommendation — one plate, split by a rule, rather
   than two cards side by side.

   Two cards stretched to the same height was the first attempt at "визуално
   свързани", and it put 240px of empty ground under the shorter one: the list
   runs to eight lines and the caveat to two paragraphs, and nothing was going
   to make them the same length. Columns of one object may differ in length
   without it reading as a gap — and sharing a plate binds them harder than
   matching their heights ever did. */
.radico-editorial__fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* The box stretches, the text does not: the rule between the columns has to
     run the full height of the plate, and on `start` it stopped where the
     shorter column's text ended. There is no second background to leave empty
     any more, so stretching costs nothing. */
  align-items: stretch;
  gap: 0;
  margin: 0 clamp(28px, 4.2vw, 68px) clamp(28px, 4.2vw, 68px);
  background: #f2eee2;
  border-top: 2px solid var(--radico-blue-950);
}
.radico-expert-card { padding: clamp(24px, 2.6vw, 44px); }
.radico-expert-card + .radico-expert-card {
  border-left: 1px solid var(--radico-rule, #d9d3c2);
}
.radico-expert-card h2 { margin-top: 6px; }
.radico-expert-card p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .radico-editorial__fit { grid-template-columns: 1fr; }
  .radico-expert-card + .radico-expert-card {
    border-left: 0;
    border-top: 1px solid var(--radico-rule, #d9d3c2);
  }
}
/* Conditions, not bullets. The heading ends "ако:" and each line is something
   the reader checks against themselves, so each carries the tick the panel
   already uses beside "В наличност" rather than a disc. */
.radico-editorial__fit ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.radico-editorial__fit li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 34px;
}
.radico-editorial__fit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 20px;
  height: 20px;
  background: var(--radico-blue-950);
  -webkit-mask: var(--radico-check) center / 20px 20px no-repeat;
  mask: var(--radico-check) center / 20px 20px no-repeat;
}

/* Capped at 1100px the list used about three fifths of the band and left the
   rest empty. Widening the rows instead would put the value a long way from its
   label on a wide screen, so the list runs in two columns and the rows keep
   their reading length. One column below 1200px, where two would leave the
   value a few characters wide. */
.radico-editorial__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  margin: 0;
}
@media (max-width: 1199px) {
  .radico-editorial__specs { grid-template-columns: 1fr; }
}
/* Label above value, not beside it. Side by side, a long value wrapped to two
   lines while its neighbour took one, so the two columns never lined up and
   the rules across them staggered. Stacked, every entry is the same shape and
   the reading line stays short. */
.radico-editorial__specs > div {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid #d1d8d8;
}
.radico-editorial__specs dt {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--radico-space-500, #6a7a81);
}
.radico-editorial__specs dd { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; }
/* Two columns rather than a wrapped row. Run on one line they read as one
   long sentence of fragments with no telling where one ends and the next
   begins; in columns each sits on its own line and the glyphs stack into a
   left edge, which separates them without a rule or a dot between. */
.radico-profile-badges {
  display: grid;
  /* As many columns as there are facts — three on a chair, four on a desk —
     set from the markup so neither leaves an empty slot. */
  grid-template-columns: repeat(var(--radico-badges, 3), minmax(0, 1fr));
  gap: 18px 20px;
  list-style: none;
  margin: 20px 0;
  padding: 0;
}
@media (max-width: 767px) {
  .radico-profile-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* No frame around them. A box each made seven boxes in a block under the
   title, competing with the option cards below that are genuinely boxes
   because they are pressed. These are read, not clicked — the glyph carries
   them, and the spacing keeps them apart. */
.radico-profile-badges li {
  /* Stacked, not side by side: four across the panel leaves no room for a
     glyph and a phrase on one line, and the glyph is what is read first. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 14px/1.35 var(--radico-font);
  color: var(--radico-blue-950);
}
/* Drawn at 26px these were four faint marks that added nothing beside the
   words. The glyph is the thing being read first, so it is sized to be read. */
.radico-profile-badges img { display: block; width: 40px; height: 40px; flex: 0 0 auto; }
@media(max-width:1024px) {
 .radico-sitting, .radico-editorial__fit { grid-template-columns: 1fr; gap: 32px; }
}
@media(max-width:600px) {
 .radico-editorial { font-size:16px; }
 .radico-editorial__story.has-image { grid-template-columns:1fr; }
 .radico-editorial__story:nth-child(even) .radico-editorial__image { order:0; }

 
 .radico-sitting { padding:32px 24px; }
}

/* A square-image hero was tried here and removed: `--radico-frame-h: 100cqw`
   makes the frame as tall as the column is wide, so at 55% of a 1920px window
   the picture ran past 1000px and `align-items: start` stopped the panel
   stretching, leaving a void beneath it. The band takes its height from the
   section, as it did before. The client also asked to keep the existing
   carousel rather than switch to single square frames. */
.radico-resources { padding-left:20px; }
.radico-resources li { margin:12px 0; }
.radico-resources a { color:inherit; text-decoration:underline; text-underline-offset:4px; }
.radico-deskcfg__decor:disabled { opacity:.35; cursor:not-allowed; }

/* The chosen colour's name, beside its label — see the desk picker, which says
   its choices the same way. */
.radico-colours__chosen { font-weight: 500; }

/* The price moved down beside the cart (see placePriceByCart). It sits on the
   same line as the compare control, which is where the stock sentence used to
   be — the same fact is already stated at the top of the panel beside the SKU,
   so it is not said twice. */
.single_variation_wrap .radico-product-price-row.is-at-cart:not(.is-compare-moved) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: auto;
  padding: 0;
}
.radico-has-compare .woocommerce-variation-availability { display: none; }

/* The six adjustments the film goes through, listed beside it. */
.radico-adjustments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.radico-adjustments li {
  position: relative;
  padding-left: 22px;
}
.radico-adjustments li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 2px;
  background: var(--radico-blue-950);
}
@media (max-width: 767px) {
  .radico-adjustments { grid-template-columns: 1fr; }
}

/* The film is square (1080x1080). Held at a size that balances the copy beside
   it rather than the 948 Figma drew for a landscape still. */
.radico-product-assembly .radico-video { width: 420px; max-width: 100%; }
.radico-product-assembly .radico-explainer { display: block; width: 100%; height: auto; }

/* What every order comes with, under the cart. Quiet: a row of promises set in
   the same weight as the panel's body, not a banner — they reassure at the
   moment of deciding rather than compete with the price above them. */
.radico-usp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 20px;
  margin: 4px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--radico-space-200);
  list-style: none;
}
.radico-usp li {
  display: flex;
  /* Same shape as the four facts above the colours, so the panel reads as one
     column of information rather than two unrelated lists. */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font: var(--radico-fw-light) 14px/1.35 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-usp img { display: block; width: 40px; height: 40px; flex: 0 0 auto; }
.radico-usp__certs { color: var(--radico-space-500, #6E7A81); }

/* The colour swatches carry the chair's own weave where the photograph could
   be shown to hold it — a flat green says green, a patch of the mesh says
   which green and that it is a mesh. The flat colour stays underneath, so a
   swatch with no weave looks deliberate rather than unfinished. */
.radico-colours__blank.has-weave {
  background-image: var(--radico-weave);
  background-size: cover;
  background-position: center;
}

/* Tabs for the specification and the supplier's material. Before JavaScript
   runs, and without it, every panel is visible one after another — which is
   what these sections were, so nothing is lost when the script does not. */
.radico-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--radico-space-300, #d1d8d8);
}
.radico-tabs__tab {
  padding: 12px 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: var(--radico-fw-light) 17px/1.4 var(--radico-font);
  color: var(--radico-space-500, #6a7a81);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.radico-tabs__tab:hover { color: var(--radico-blue-950); }
.radico-tabs__tab.is-active {
  color: var(--radico-blue-950);
  border-bottom-color: var(--radico-blue-950);
  font-weight: 500;
}
.radico-tabs.is-live .radico-tabs__panel { display: none; }
.radico-tabs.is-live .radico-tabs__panel.is-active { display: block; }
.radico-assembly-film { display: block; width: 100%; max-width: 900px; }

/* The extras as boxes: a picture, a name, what it adds, and its colours under
   it. Two "Метална поставка" rows differing only by a colour word in the name
   was the choice stated in the least legible shape available. */
.radico-addbox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* Stretched, not start-aligned: a two-line name and a three-line one gave
     boxes of different heights side by side, with the prices off each other's
     baseline. */
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.radico-addbox__item {
  min-width: 0;
  /* The colour row sits under the card inside the same cell. With the card at
     `height: 100%` the row hung below the cell and the next row of cards
     covered it; as a column the card takes what the colours leave. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radico-addbox__item > .radico-addbox__card { flex: 1 1 auto; height: auto; }
.radico-addbox__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--radico-space-300, #d1d8d8);
  background: none;
  font: var(--radico-fw-light) 14px/1.35 var(--radico-font);
  color: var(--radico-blue-950);
  text-align: center;
  /* The card is a <button>, and buttons here inherit `white-space: nowrap`:
     without this the name stays on one line and runs over the box beside it,
     which no amount of width on the span fixes. */
  white-space: normal;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.radico-addbox__card:hover { border-color: var(--radico-blue-950); }
.radico-addbox__card.is-on {
  border-color: var(--radico-blue-950);
  box-shadow: inset 0 0 0 1px var(--radico-blue-950);
}
/* The photograph fills the box, edge to edge. Floated in the middle of a padded
   card it read as a thumbnail pinned to a label; filling the box makes the
   picture the thing being chosen, which is what it is. */
.radico-addbox__card { height: 100%; padding: 0; gap: 0; overflow: hidden; }
.radico-addbox__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.radico-addbox__name { padding: 12px 12px 0; }
/* Pushed to the foot of the card so the prices line up across the row whatever
   the names do above them. */
.radico-addbox__price { margin-top: auto; padding: 4px 12px 12px; }
/* A box with no photograph still needs its top edge off the text. */
.radico-addbox__card > .radico-addbox__name:first-child { padding-top: 14px; }

/* The headrest is a yes/no, not an accessory: two labelled options, each with
   the same chair drawn above it and differing only by the pad. */
.radico-addons__glyph { display: block; margin-bottom: 2px; }
.radico-addons__glyph img { display: block; width: 34px; height: 34px; }

/* The frame belongs to the option, not to the button, so the colours can sit
   inside it — a headrest's colour is part of choosing the headrest, and under
   the pair it read as a third, unrelated control. */
/* The colours sit beside the label, not under it: stacked, they pushed the
   price up and made the card a third taller than its pair. */
[data-headrest] .radico-headrest__opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--radico-space-300);
  transition: border-color .15s, background-color .15s;
}
[data-headrest] .radico-headrest__opt:hover { border-color: var(--radico-blue-950); }
/* The selected look reads off the button the wrapper holds, so the existing
   toggle in product.js keeps working untouched. */
[data-headrest] .radico-headrest__opt:has(.radico-deskcfg__size.is-active) {
  border-color: var(--radico-blue-950);
  background: var(--radico-space-100);
}
[data-headrest] .radico-deskcfg__size {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
}
[data-headrest] .radico-deskcfg__size.is-active { background: none; }

/* Shown only when the chair's colour has no headrest to match it, so it needs
   to say why it is asking — by then the shopper has been told nothing about
   the headrest's colour, because until now there was nothing to tell. */
.radico-headrest__colours { margin-top: 14px; }
.radico-headrest__colours[hidden] { display: none; }
.radico-headrest__colours-label {
  margin: 0 0 8px;
  font: var(--radico-fw-light) 13px/1.45 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-headrest__colours .radico-addbox__colours {
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}
/* Both need a width: in a column flex box centred on the cross axis, an item
   is sized by its content and a long name runs straight out of the card and
   over its neighbour rather than wrapping. */
.radico-addbox__name {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
}
.radico-addbox__price { display: block; width: 100%; font-weight: 500; }
/* `display: flex` below outranks the browser's own rule for [hidden], so
   without this the headrest's colours stayed on screen under "Без подглавник"
   — asking what colour the thing you just declined should be. */
.radico-addbox__colours[hidden] { display: none; }
.radico-addbox__colours {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.radico-addbox__colour {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--radico-space-300, #d1d8d8);
  background: var(--radico-swatch, var(--radico-space-100));
  cursor: pointer;
}
.radico-addbox__colour.is-active {
  border-color: var(--radico-blue-950);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--radico-blue-950);
}

/* The support level, filled. A level is a quantity, so it fills — unlike the
   sitting profile's character axes, which are a position between two ends and
   must not be drawn as a score. */
.radico-meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}
.radico-meter__bar {
  width: 5px;
  height: 100%;
  border: 1px solid var(--radico-blue-950);
  background: none;
}
.radico-meter__bar.is-on { background: var(--radico-blue-950); }

/* --- RADICO Sitting Profile: the two scales ------------------------------- */
/* Character and capability are drawn differently on purpose. A character axis
   is a position between two ends with no better end, so nothing fills; a
   capability is a quantity out of ten, so it does. Drawn alike, "Спокойна"
   would read as a low score when it is a preference. */
/* The block now occupies the right-hand column of the sitting section, beside
   the text rather than under it, so the two assessments stack and each one runs
   two across inside its own part. Side by side in half a column, an axis had
   room for its track and neither of its pole labels. */
.radico-scales {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  /* The column is stretched to the height of the text beside it; without this
     the spare height went between "Най-подходящ за" and the scales. */
  align-content: start;
}
.radico-scales__axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 36px;
  margin-top: 20px;
}
/* Three across, under the text. Two columns put one assessment alone on a
   second row and cost a band of height the left column already had spare. */
.radico-scales__caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 24px;
  margin-top: 20px;
}
.radico-scales--expert { margin-top: 40px; }

.radico-axis__name {
  margin: 0 0 4px;
  font: 400 12px/1.4 var(--radico-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--radico-space-500, #6a7a81);
}
.radico-axis__value {
  margin: 0 0 14px;
  font: 500 18px/1.3 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-axis__track { position: relative; height: 18px; }
.radico-axis__rule {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--radico-space-300, #d1d8d8);
}
.radico-axis__notch {
  position: absolute;
  top: 4px;
  width: 1px;
  height: 9px;
  background: var(--radico-space-300, #d1d8d8);
}
.radico-axis__marker {
  position: absolute;
  top: 3px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--radico-blue-950);
}
.radico-axis__poles {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  font: var(--radico-fw-light) 13px/1.4 var(--radico-font);
  color: var(--radico-space-500, #6a7a81);
}

/* The three names run to different lengths — one of them to four lines — so the
   column stretches and the name pushes its meter down to the foot of it. The
   three meters then sit on one line whatever the names above them do. */
.radico-capability { display: flex; flex-direction: column; height: 100%; }
.radico-capability__name {
  flex: 1 1 auto;
  margin: 0 0 10px;
  font: var(--radico-fw-light) 15px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-capability__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.radico-capability__meter { display: flex; gap: 2px; }
.radico-capability__bar {
  width: 11px;
  height: 11px;
  border: 1px solid var(--radico-blue-950);
}
.radico-capability__bar.is-on { background: var(--radico-blue-950); }
.radico-scales .radico-capability__why {
  margin: 10px 0 0;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500, #6a7a81);
}
/* With a reason under each, the three share rows: name, meter, reason. Each
   row is as tall as its tallest cell, so the meters sit on one line and the
   reasons start on one line whatever the names above them run to. */
.radico-scales__caps:has(.radico-capability__why) { grid-template-rows: repeat(3, auto); row-gap: 0; }
.radico-scales__caps:has(.radico-capability__why) .radico-capability {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
.radico-capability:has(.radico-capability__why) .radico-capability__name { margin-bottom: 10px; }
.radico-capability__score {
  font: 500 14px/1 var(--radico-font);
  color: var(--radico-blue-950);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The client's written notes. "Най-подходящ за" introduces both scales, so it
   spans them; the per-scale notes sit under the scale they explain, quieter
   than it and than the figures above them. */
.radico-scales__lead {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin: 0;
  font: var(--radico-fw-light) 18px/1.55 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-scales__lead-label {
  display: block;
  margin-bottom: 6px;
  font: 400 12px/1.4 var(--radico-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--radico-space-500, #6a7a81);
}
.radico-scales__note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--radico-space-300, #d1d8d8);
  font: var(--radico-fw-light) 15px/1.6 var(--radico-font);
  color: var(--radico-space-500, #6a7a81);
}
.radico-scales__note p { margin: 0 0 8px; }
.radico-scales__note p:last-child { margin-bottom: 0; }
.radico-scales__note ul { margin: 0; padding-left: 18px; }
.radico-scales__note li { margin-bottom: 6px; }
.radico-scales__note li:last-child { margin-bottom: 0; }
/* Written as a descendant selector, not a bare class: the rule above already
   sets margin on every p in the note and would otherwise win on specificity. */
.radico-scales__note .radico-scales__note-label {
  margin: 0 0 10px;
  font: 400 12px/1.4 var(--radico-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--radico-blue-950);
}

@media (max-width: 900px) {
  .radico-scales { grid-template-columns: 1fr; gap: 40px; }
  .radico-scales__lead { font-size: 16px; }
}

/* Where the total comes from. The headrest keeps its own cart line, so a summed
   price with nothing under it makes two rows at checkout look like a surprise
   rather than the thing that was chosen on this page. */
.radico-price-note {
  margin: 4px 0 0;
  font: var(--radico-fw-light) 13px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}

/* --- phone ---------------------------------------------------------------
   Four across is a desktop count. On a phone the four facts and the four
   promises go two by two — one per row made each of them a line of its own and
   pushed the price a screen down. */
@media (max-width: 600px) {
  .radico-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The three stay three on a phone — they are short enough, and two across
     would leave the third alone on a second row. */
  /* Three stay three on a phone; four go two by two rather than squeezing a
     "Диапазон на височината" into a quarter of 390px. */
  .radico-profile-badges { grid-template-columns: repeat(min(var(--radico-badges, 3), 3), minmax(0, 1fr)); }
  .radico-profile-badges[style*="--radico-badges:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radico-profile-badges img,
  .radico-usp img { width: 36px; height: 36px; }

  /* "Добавяне в количката" did not fit beside the quantity box at any phone
     width: narrowing the box to 92px still left the label 11px short at 390px
     and 26px short at 360px, and letting it wrap made a 103px-tall button with
     the words broken over three lines. Stacked, the button has the whole width.

     Written against `.radico-product-cart` because that is how the desktop
     rules are written, and a bare class loses to them on specificity — the
     first attempt set flex and font-size here and neither reached the page. */
  /* Elementor Pro pins this row with
     `:is(.elementor-widget-woocommerce-product-add-to-cart, …) form.cart.variations_form
      .woocommerce-variation-add-to-cart { flex-wrap: nowrap }`
     — specificity (0,5,2), which no sane selector of ours reaches. This is the
     one declaration in the file that has to shout. */
  .radico-product-cart form.cart .woocommerce-variation-add-to-cart,
  .radico-product-cart form.cart { flex-wrap: wrap !important; row-gap: 12px; }
  .radico-product-cart form.cart .quantity { flex: 0 0 auto; }
  .radico-product-cart form.cart .single_add_to_cart_button {
    flex: 1 0 100%;
    font-size: 16px;
    white-space: nowrap;
  }
}

/* --- Zoom ------------------------------------------------------------------
   The band crops every photograph to a square frame, so detail at the edge of
   a wide still never reached the page. This is where the whole picture lives.
   -------------------------------------------------------------------------- */
.radico-zoom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 11, 13, .92);
  overscroll-behavior: contain;
  cursor: zoom-out;
}
.radico-zoom__image {
  /* Against the viewport, not the grid area: `max-height: 100%` resolved
     against a row the picture itself was sizing, so a square still ran off the
     bottom of the screen. dvh so a phone's retracting address bar does not
     crop it either. */
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 48px);
  /* The pinch and the wheel write the transform; the origin stays at the
     centre so the arithmetic in product.js has one fixed point to work from. */
  transform-origin: center center;
  touch-action: none;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.radico-zoom.is-zoomed .radico-zoom__image { cursor: grab; }
.radico-zoom__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}
.radico-zoom__close::before,
.radico-zoom__close::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: #fff;
}
.radico-zoom__close::before { transform: rotate(45deg); }
.radico-zoom__close::after { transform: rotate(-45deg); }
.radico-zoom__close:hover { background: rgba(255, 255, 255, .22); }

/* A photograph that opens on click should say so before it is clicked. */
.radico-gallery__slide { cursor: zoom-in; }
.radico-gallery__track.is-dragging .radico-gallery__slide { cursor: grabbing; }

/* --- RADICO Sitting Profile on a phone ------------------------------------
   The client's QA: three capabilities across a phone put the labels and the
   scales so close that the scales read as one block. Each gets its own row,
   its own label, its own meter and its own figure. The character axes go the
   same way — a pole name at each end of a 150px track is two words fighting
   over one line.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* One under another there is nothing to line up with: back to a stack. */
  .radico-scales__caps:has(.radico-capability__why) { grid-template-rows: none; row-gap: 28px; }
  .radico-scales__caps:has(.radico-capability__why) .radico-capability { display: flex; grid-row: auto; }
  .radico-scales__caps,
  .radico-scales__axes {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  /* The name no longer has to stretch to align three meters that are no longer
     side by side, so it sits straight above its own. */
  .radico-capability { height: auto; }
  .radico-capability__name { flex: 0 0 auto; margin-bottom: 8px; }
  .radico-capability__bar { width: 13px; height: 13px; }
  .radico-scales { gap: 32px; }
  .radico-scales--expert { margin-top: 28px; }
  .radico-axis__value { font-size: 18px; }
}

/* The figure is what is read; the name under it says what the figure is. */
.radico-profile-badges__value {
  display: block;
  font: var(--radico-fw-bold) 15px/1.3 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-profile-badges__label {
  display: block;
  /* A word longer than its column breaks rather than running into the next. */
  overflow-wrap: break-word;
  hyphens: manual;
  font: var(--radico-fw-light) 12.5px/1.35 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-profile-badges li { gap: 6px; }

/* --- Gallery arrows ---------------------------------------------------------
   For a mouse. On a phone the swipe is the gesture and the arrows would sit on
   the photograph for nothing, so they are hidden where the pointer is coarse.
   -------------------------------------------------------------------------- */
.radico-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 6px rgba(11, 47, 65, .12);
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.radico-gallery__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -7px;
  border: solid var(--radico-blue-950);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(-45deg);
}
.radico-gallery__arrow--prev { left: 20px; }
.radico-gallery__arrow--prev::before { margin-left: -3px; transform: rotate(135deg); }
.radico-gallery__arrow--next {
  /* Off the panel. The gallery runs full-bleed and the panel floats over its
     right-hand part, so "right: 20px" put this arrow underneath it — the same
     reason the pager is measured from --radico-panel. */
  right: calc(var(--radico-panel, 0px) + var(--radico-peek, 0px) + 20px);
}
.radico-gallery__arrow:hover { background: #fff; }
/* The theme's button reset zeroes border-radius at a higher specificity. */
.radico-gallery .radico-gallery__arrow { border-radius: 50%; }
.radico-gallery__arrow:focus-visible { outline: 2px solid var(--radico-blue-700); outline-offset: 2px; }
[data-radico-gallery]:focus-visible { outline: 2px solid var(--radico-blue-700); outline-offset: -2px; }
@media (pointer: coarse), (max-width: 767px) {
  .radico-gallery__arrow { display: none; }
}
/* Below desktop the panel stacks under the gallery, so nothing covers it. */
@media (max-width: 1024px) {
  .radico-gallery__arrow--next { right: 20px; }
}