/* ==========================================================================
   RADICO — section-level fixes that Elementor has no control for.
   Keep this file small; anything that can be expressed as an Elementor
   setting belongs in the template JSON, not here.
   ========================================================================== */

/* Loop Grid blowout guard.
   Elementor emits `grid-template-columns: repeat(N, 1fr)`, and `1fr` means
   `minmax(auto, 1fr)` — so a grid item whose intrinsic minimum exceeds the
   share forces every column wider than the container. The product rail
   rendered 706px columns inside a 1681px grid. `min-width: 0` restores the
   intended 4 x ~402px. */
.elementor-loop-container > .e-loop-item,
.radico-product-card {
  min-width: 0;
}

/* Product price colour outside WooCommerce pages.
   Elementor's product-price Color control is scoped
   `.woocommerce {{WRAPPER}} .price`, so it only ever matches on WooCommerce
   templates where <body> carries the `woocommerce` class. In a Loop Grid on
   the home page the rule never applies and the price inherits
   hello-elementor's #CC3366 accent instead of the design's navy. */
.radico-product-card .price,
.radico-product-card .price .woocommerce-Price-amount,
.radico-product-card .price bdi {
  color: var(--radico-blue-950);
}

/* Dynamic-tag links inherit the widget colour.
   `post-terms` renders the category as an <a>, which picks up
   hello-elementor's #CC3366 accent instead of the meta grey the design uses.
   Elementor's text-editor widget has no link-colour control. */
/* The card root is itself an <a> (container link), and `post-terms` renders
   another <a> inside the meta. Both inherit their widget's colour rather than
   hello-elementor's accent. */
.radico-blog a,
.radico-blog a:hover,
.radico-product-rail a,
.radico-product-rail a:hover {
  /* !important because hello-elementor's reset sets a bare `a{color}` and the
     card root is itself an anchor, so inherited colour never reaches the
     nested `post-terms` link otherwise. */
  color: inherit !important;
  text-decoration: none;
}

/* Catalog breadcrumb + header links use the design's navy, not the theme
   accent (same bare `a{color}` reset as the cards). */
.radico-archive-title {
  margin: 0;
  font: var(--radico-fw-bold) 40px/1.1 var(--radico-font);
  color: var(--radico-blue-950);
}
@media (max-width: 1024px) { .radico-archive-title { font-size: 34px; } }
@media (max-width: 767px)  { .radico-archive-title { font-size: 28px; } }

.radico-catalog-header a,
.radico-catalog-header a:hover {
  color: inherit !important;
  text-decoration: none;
}

/* Product page links (breadcrumb, terms) use the design's greys/navy rather
   than hello-elementor's accent. */
.radico-product-info a,
.radico-product-info a:hover {
  color: inherit !important;
  text-decoration: none;
}

/* Add-to-cart button.
   Elementor's button colour controls on the WooCommerce add-to-cart widget are
   scoped under `.woocommerce`, and WooCommerce's own button styles are more
   specific, so the design's flat panel needs stating here. */
.radico-product-info .single_add_to_cart_button {
  /* The primary action on the page, so it carries the brand's blue rather than
     the panel's grey. `!important` throughout: WooCommerce's own button styles
     are more specific, and a plain hover then loses to this base rule. */
  background: var(--radico-blue-950) !important;
  color: var(--radico-space-50) !important;
  border-radius: 0;
  font-family: var(--radico-font);
  font-size: 18px;
  font-weight: var(--radico-fw-bold);
  line-height: 1.5;
  min-height: 64px;
  flex: 1;
  /* The cart glyph sits before the label. `!important` for the same reason as
     the colours: WooCommerce's own button rule is more specific. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background .15s, color .15s;
}
.radico-product-info .single_add_to_cart_button:hover,
.radico-product-info .single_add_to_cart_button:focus-visible {
  background: var(--radico-blue-700, #194960) !important;
  color: var(--radico-space-50) !important;
}

/* The header's own cart glyph, painted through a mask so it takes the button's
   colour. It rolls forward on hover — the same gesture as dropping something
   into the basket — and holds still for anyone who asks for less motion. */
.radico-product-info .single_add_to_cart_button::before {
  content: "";
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/09/icon-cart.svg") center / contain no-repeat;
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.radico-product-info .single_add_to_cart_button:hover::before,
.radico-product-info .single_add_to_cart_button:focus-visible::before {
  animation: radico-cart-nudge .5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes radico-cart-nudge {
  0%   { transform: translateX(0) rotate(0); }
  35%  { transform: translateX(4px) rotate(-8deg); }
  70%  { transform: translateX(-2px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .radico-product-info .single_add_to_cart_button::before { transition: none; }
  .radico-product-info .single_add_to_cart_button:hover::before { animation: none; }
}

.radico-product-info form.cart { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.radico-product-info form.cart .single_variation_wrap { flex: 1 1 100%; min-width: 0; }
.radico-product-info form.cart .quantity { background: var(--radico-space-100); }

/* ==========================================================================
   Product details — match the Figma, not the widget defaults.
   Elementor's nested-tabs ships boxed tabs, and WooCommerce's attributes
   table brings its own heading, borders and striping. The design is a pair
   of underlined text tabs over a thin-divider label/value list.
   ========================================================================== */

/* Tabs: two equal, centred, text-only; active gets a 1px underline. */
.radico-product-details .e-n-tabs-heading {
  display: flex;
  gap: 0;
  border: 0;
}
.radico-product-details .e-n-tab-title {
  flex: 1 1 0;
  justify-content: center;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 0 0 8px;
  font-family: var(--radico-font);
  font-size: 18px;
  font-weight: var(--radico-fw-light);
  line-height: 1.4;
  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 .e-n-tabs-content > .e-con { padding-top: 24px; }

/* Attributes table: label left, value right, hairline dividers, no chrome. */
.radico-product-details .woocommerce-product-attributes,
.radico-product-details .shop_attributes {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
.radico-product-details .woocommerce-product-attributes-item,
.radico-product-details .shop_attributes tr {
  border-bottom: 1px solid var(--radico-space-300);
}
.radico-product-details .woocommerce-product-attributes-item th,
.radico-product-details .woocommerce-product-attributes-item td,
.radico-product-details .shop_attributes th,
.radico-product-details .shop_attributes td {
  background: none !important;
  border: 0;
  padding: 6px 0;
  font-family: var(--radico-font);
  font-size: 16px;
  font-weight: var(--radico-fw-light);
  font-style: normal;
  line-height: 1.5;
  color: var(--radico-blue-950);
}
.radico-product-details .woocommerce-product-attributes-item th,
.radico-product-details .shop_attributes th {
  text-align: left;
  width: auto;
  /* WooCommerce bolds the label cell; the design has both columns at 300. */
  font-weight: var(--radico-fw-light) !important;
}
.radico-product-details .woocommerce-product-attributes-item td,
.radico-product-details .shop_attributes td { text-align: left; width: 202px; }
.radico-product-details .woocommerce-product-attributes-item p,
.radico-product-details .shop_attributes p { margin: 0; }

/* WooCommerce prints its own "Допълнителна информация" heading above the
   table; the design has no heading there. */
.radico-product-details .e-n-tabs-content .woocommerce-product-attributes
  ~ h2,
.radico-product-details .e-n-tabs-content > .e-con
  > .elementor-widget-woocommerce-product-additional-information h2 {
  display: none;
}

/* ==========================================================================
   Контакти (Figma 2149:19299)
   ========================================================================== */
.radico-enquiry-hero {
  position: relative;
  overflow: hidden;
}
/* radico_brand_solid-element-top, 1960x1683, placed at left 0 / top -702 and
   rotated 180deg with a Y flip. Too specific for a background-image, so it is
   its own layer. */
.radico-enquiry-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: -702px;
  width: 1960px;
  height: 1683px;
  background: url("/wp-content/uploads/2026/09/brand-shape-top.svg") center / contain no-repeat;
  transform: rotate(180deg) scaleY(-1);
  pointer-events: none;
  z-index: 0;
}
.radico-enquiry-hero > .e-con-inner,
.radico-enquiry-hero > .e-con { position: relative; z-index: 1; }

/* --- Enquiry form ---------------------------------------------------------
   The design's inputs are filled #E2E7E9 boxes with a 1px #0B2F41 rule and the
   label carried as placeholder text; the submit is an underlined text row with
   a chevron, not a filled button. Elementor's Form widget has no controls for
   either shape, so both are set here. */
/* Elementor lays the fields out with per-field padding, not a wrapper gap;
   adding a gap on top of the 50% columns pushed the pair onto separate rows. */
.radico-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}
.radico-form .elementor-field-group {
  margin-bottom: 0;
  padding: 0;
}
.radico-form .elementor-field-group.elementor-col-100 { width: 100%; }
.radico-form .elementor-field-group.elementor-col-50 { width: calc(50% - 8px); }
/* Продукт and Количество share a row: the name is long, the number short. */
.radico-form .elementor-field-group.elementor-col-66 { width: calc(66.666% - 8px); }
.radico-form .elementor-field-group.elementor-col-33 { width: calc(33.333% - 8px); }
/* Its label carried as placeholder, like the text fields beside it. */
.radico-form .elementor-field-type-number .elementor-field-label { display: none; }
@media (max-width: 600px) {
  .radico-form .elementor-field-group.elementor-col-50,
  .radico-form .elementor-field-group.elementor-col-66,
  .radico-form .elementor-field-group.elementor-col-33 { width: 100%; }
}

/* Elementor's field styling is widget-class deep, so these are too. */
.radico-form.elementor-widget-form .elementor-field-textual,
.radico-form .elementor-field-textual {
  padding: 10px 32px;
  min-height: 55px;
  border: 1px solid var(--radico-blue-950);
  border-radius: 0;
  background: var(--radico-space-200);
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-form .elementor-field-textual::placeholder { color: var(--radico-blue-950); opacity: 1; }
.radico-form.elementor-widget-form .elementor-field-textual:focus,
.radico-form .elementor-field-textual:focus {
  outline: 0;
  box-shadow: none;
  border-color: var(--radico-blue-950);
  background: var(--radico-white);
}
.radico-form textarea.elementor-field-textual {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

/* In the design the textarea and radio captions sit under a hairline; they are
   real field labels now, so the rule goes on the label itself. */
.radico-form .elementor-field-type-textarea > label,
.radico-form .elementor-field-type-radio > label {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--radico-rule, var(--radico-blue-950));
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
/* Text inputs carry their label as placeholder only. */
.radico-form .elementor-field-type-text > label,
.radico-form .elementor-field-type-email > label,
.radico-form .elementor-field-type-tel > label { display: none; }

/* Radio options: two per row in the design, 18px circles. */
.radico-form .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.radico-form .elementor-field-subgroup .elementor-field-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(50% - 12px);
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
@media (max-width: 600px) {
  .radico-form .elementor-field-subgroup .elementor-field-option { width: 100%; }
}
.radico-form .elementor-field-subgroup input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--radico-blue-950);
}

/* Per-palette rule colour for those hairlines (Figma keeps one layout in
   three colour schemes). */
.radico-enquiry-space  { --radico-rule: #0b2f41; }
.radico-enquiry-akaroa { --radico-rule: #e4dbc4; }
.radico-enquiry-hippie { --radico-rule: #bfdbe2; }

.radico-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-form .elementor-field-type-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--radico-blue-950);
  border-radius: 0;
  accent-color: var(--radico-blue-950);
}

.radico-form .elementor-field-type-submit { margin-top: 16px; }
.radico-form.elementor-widget-form .elementor-button,
.radico-form .elementor-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--radico-blue-950);
  border-radius: 0;
  background: none;
  font: var(--radico-fw-bold) 18px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
  text-align: left;
}
.radico-form .elementor-button:hover { background: none; color: var(--radico-blue-700); }
.radico-form .elementor-button .elementor-button-content-wrapper { width: 100%; justify-content: space-between; }
.radico-form .elementor-button-text { flex-grow: 0; }
/* The design's chevron sits at the far right of the rule. */
.radico-form .elementor-button::after {
  content: "";
  width: 6px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--radico-chevron-right) center / contain no-repeat;
  mask: var(--radico-chevron-right) center / contain no-repeat;
}

/* --- Contact info columns -------------------------------------------------
   The label is followed by a rule that fills the rest of the row, so the label
   must not wrap or the rule drops below it. */
.radico-contacts-info .radico-rule { min-height: 1px; }
.radico-contacts-info .elementor-widget-text-editor { white-space: normal; }
.radico-contacts-info h2 + * { margin-top: 0; }

@media (max-width: 767px) {
  .radico-enquiry-hero::before { display: none; }
}
/* The label holds one line so the hairline can fill the rest of the row. On a
   phone the longer labels cannot fit and push the page sideways, so there the
   rule simply follows the wrapped label. */
/* Not `white-space: nowrap`. That was released only below 1024, and at 1280 —
   a 1600 laptop under Windows 125% — the showroom's "Виждаш материали и
   цветове" ran into the heading beside it and the last one was cut off at the
   edge. A flex item already keeps its label on one line while there is room;
   letting it wrap only changes what happens when there is not.
   The container holding the label is `width: auto` with `flex: 0 0 auto`, so
   it sizes to the label's max-content whatever the white-space is; it has to
   be allowed to shrink as well. */
.e-con:has(> .radico-nowrap) {
  flex-shrink: 1;
  min-width: 0;
}
/* The hairline beside it starts from nothing and takes what is left. With its
   own `auto` basis it claimed a full width and squeezed the label onto three
   lines even at 1920. */
.e-con:has(> .radico-nowrap) ~ .e-con {
  flex: 1 1 0;
  min-width: 24px;
}

/* ==========================================================================
   За нас (Figma 2149:19002)
   ========================================================================== */
/* The design's Мисия / Визия lists are plain discs at body size. Elementor's
   icon-list would add its own markers and spacing, so the list is rich text
   and the disc is set here. */
.radico-bullets ul {
  margin: 0;
  padding-left: 27px;
  list-style: disc;
}
.radico-bullets li + li { margin-top: 16px; }

.radico-about-intro p + p { margin-top: 1.4em; }

/* Certificate logos sit on white with no crop; the design keeps their shape. */
.radico-certificates img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Team portraits are square crops in the design. */
.radico-team-photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* The timeline dot is a 10px circle followed by a hairline that fills the
   remaining width of each step. */
.radico-story .e-con-inner { min-width: 0; }

/* ==========================================================================
   Шоурум (Figma 2149:18665)
   ========================================================================== */
/* The gallery alternates a tall and a wide frame per column; the design's
   ratios are 624:640 and 640:426. */
.radico-ratio-tall img { width: 100%; aspect-ratio: 624 / 640; object-fit: cover; }
.radico-ratio-wide img { width: 100%; aspect-ratio: 640 / 426; object-fit: cover; }

/* --- FAQ accordion --------------------------------------------------------
   The design is a hairline-separated list: bold question, chevron at the far
   right, muted answer. Elementor's nested accordion ships a boxed default. */
.radico-faq .e-n-accordion-item {
  border: 0;
  border-top: 1px solid var(--radico-space-500);
  border-radius: 0;
  background: none;
}
.radico-faq .e-n-accordion-item-title {
  padding: 20px 0;
  gap: 24px;
  background: none;
  font: var(--radico-fw-bold) 18px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-faq .e-n-accordion-item-title-text { flex: 1 1 auto; }
.radico-faq .e-n-accordion-item-title-icon { width: 32px; height: 32px; }
.radico-faq .e-n-accordion-item > .e-con { padding: 0 0 24px; background: none; }
.radico-faq .e-n-accordion-item p {
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}

/* --- Video lightbox ------------------------------------------------------- */
.radico-showroom-video .elementor-custom-embed-image-overlay img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.radico-showroom-video .elementor-custom-embed-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
}
.radico-showroom-video .elementor-custom-embed-play { z-index: 1; }

/* ==========================================================================
   Блог (Figma 2149:18785)
   ========================================================================== */
/* The category filter is a row of pills: the active one sits on a light grey
   ground in bold, the rest are plain text. Elementor's taxonomy-filter renders
   a list, so the pill chrome is here. */
.radico-blog-filters .e-filter,
.radico-blog-filters ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.radico-blog-filters .e-filter-item,
.radico-blog-filters li > * {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: none;
  cursor: pointer;
}
.radico-blog-filters .e-filter-item[aria-pressed="true"],
.radico-blog-filters .e-filter-item.e-filter-item-active,
.radico-blog-filters li.is-active > * {
  padding: 8px 24px;
  background: var(--radico-nevada-100, #f4f5f5);
  font-weight: var(--radico-fw-bold);
  line-height: 1.4;
}

/* Cards: the design's image is 544x362 (3:2), the meta row is 16px muted. */
.radico-blog .elementor-loop-container { align-items: start; }

/* ==========================================================================
   Блог вътрешна (Figma 2149:18906)
   ========================================================================== */
.radico-post-crumb p { margin: 0; }

.radico-post-featured img {
  width: 100%;
  aspect-ratio: 1696 / 795;
  object-fit: cover;
}

/* The body is a 836px measure; the design's rhythm is 18/1.4 with generous
   paragraph spacing and full-bleed-within-measure images. */
.radico-post-content {
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-post-content p { margin: 0 0 24px; }
.radico-post-content h2 {
  margin: 48px 0 16px;
  font-size: 32px;
  font-weight: var(--radico-fw-bold);
  line-height: 1.1;
}
.radico-post-content h3 {
  margin: 40px 0 16px;
  font-size: 24px;
  font-weight: var(--radico-fw-bold);
  line-height: 1.1;
}
.radico-post-content img {
  width: 100%;
  height: auto;
  margin: 48px 0;
}
.radico-post-content ul,
.radico-post-content ol { margin: 0 0 24px; padding-left: 27px; }
.radico-post-content li + li { margin-top: 12px; }
.radico-post-content blockquote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 2px solid var(--radico-blue-950);
  font-style: normal;
}

/* ==========================================================================
   Решения (Figma 2149:18031 Home office, 2149:18105 Business)
   ========================================================================== */
/* "Какво е важно" is a list of 8px dots, not the theme's default disc. */
.radico-dot-list ul { margin: 0; padding: 0; list-style: none; }
.radico-dot-list li {
  position: relative;
  padding-left: 18px;
}
.radico-dot-list li + li { margin-top: 6px; }
.radico-dot-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--radico-blue-950);
}

/* The sector pills at the top of Бизнес решения are jump links; the active
   one carries the same light ground as the blog filter. */
.radico-sector-nav a { text-decoration: none; }
.radico-sector { scroll-margin-top: 180px; }

/* ==========================================================================
   Марки (Figma 2149:18597)
   ========================================================================== */
.radico-brands__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 48px 0;
  background: var(--radico-white);
}
.radico-brands__letter {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: .5px solid var(--radico-blue-950);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--radico-blue-950);
}
.radico-brands__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0;
}
.radico-brands__item {
  display: grid;
  place-items: center;
  width: 140px;
  height: 56px;
  text-decoration: none;
}
.radico-brands__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Until a brand has a logo, its name stands in for it — inside a frame, so a
   row of logos with a name among them reads as a place kept rather than as
   text that lost its picture. */
.radico-brands__name {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--radico-space-200, #E8EAEA);
  font: var(--radico-fw-bold) 16px/1.2 var(--radico-font);
  letter-spacing: .02em;
  color: var(--radico-blue-950);
  text-align: center;
}
.radico-brands__item:hover .radico-brands__name { border-color: var(--radico-blue-950); }
.radico-brands__empty {
  padding: 48px 0;
  font: var(--radico-fw-light) var(--radico-fs-body) / 1.4 var(--radico-font);
  color: var(--radico-space-500);
}
@media (max-width: 767px) {
  .radico-brands__row { justify-content: flex-start; }
}

/* Single brand header (Figma 2149:18656) */
.radico-brand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.radico-brand-head__copy { max-width: 701px; }
.radico-brand-head__name {
  margin: 0;
  font-size: 48px;
  font-weight: var(--radico-fw-bold);
  line-height: 1.1;
  color: var(--radico-blue-950);
}
.radico-brand-head__desc {
  margin-top: 16px;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-brand-head__desc p { margin: 0; }
.radico-brand-head__logo { flex: 0 0 auto; }
.radico-brand-head__logo img {
  width: 284px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .radico-brand-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .radico-brand-head__name { font-size: 40px; }
}
@media (max-width: 767px) {
  .radico-brand-head__name { font-size: 32px; }
}

/* Business home: process steps (2149:17190) and the partner logo strip. */
.radico-process h3 { margin: 0; }
.radico-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.radico-logo-row__item {
  display: grid;
  place-items: center;
  width: 200px;
  height: 56px;
  text-decoration: none;
}
.radico-logo-row__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ==========================================================================
   Category panels — hover (Figma component 2149:17497 "Category-animation")
   The panel under the cursor fills its column with #E2E7E9 and turns dark;
   the others sit transparent over the photo in #FAFAFA. With nothing hovered
   the first panel rests in the active state, which is the frame Figma shows.
   Colours travel through --radico-panel-fg, which the widgets reference, so
   none of this has to outrank Elementor's per-element colour rules.
   ========================================================================== */
/* The band's photograph changes with the hovered panel. The resting image is
   painted on the section; the hovered one fades in over it on a pseudo-element,
   because `background-image` itself cannot transition. */
/* WebP, not JPEG. The library converts an upload and the original is not kept,
   so all three of these 404'd and the band showed its gradient over nothing —
   the hover swap worked the whole time, with no photograph to swap. A URL
   written by hand like this does not follow the library, so it is the one place
   that has to be corrected when a file is replaced. */
:root {
  --radico-cat-chairs: url("/wp-content/uploads/2026/09/categories-bg-web.webp");
  --radico-cat-desks:  url("/wp-content/uploads/2026/09/tech-2-movement-web.webp");
  --radico-cat-soft:   url("/wp-content/uploads/2026/09/card-workplace-web.webp");
}

.radico-categories {
  position: relative;
  background-image: var(--radico-cat-chairs);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.radico-categories::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--radico-cat-hover, none) center / cover no-repeat;
  transition: opacity .4s ease;
}
.radico-categories:has(.radico-category-panel:hover)::after { opacity: 1; }
.radico-categories:has(.radico-category-panel--chairs:hover) { --radico-cat-hover: var(--radico-cat-chairs); }
.radico-categories:has(.radico-category-panel--desks:hover)  { --radico-cat-hover: var(--radico-cat-desks); }
.radico-categories:has(.radico-category-panel--soft:hover)   { --radico-cat-hover: var(--radico-cat-soft); }

/* The panels sit above the fading layer and the gradient overlay. */
.radico-categories > .radico-category-panel { position: relative; z-index: 1; }

.radico-category-panel {
  --radico-panel-fg: var(--radico-space-50);
  align-self: stretch;              /* fill the column's full height */
  background-color: transparent;
  transition: background-color .25s ease, color .25s ease;
}

/* The description only shows on the active panel. */
.radico-category-panel__desc {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .2s ease, max-height .25s ease;
}

/* Active — either hovered, or the first panel while nothing is hovered. */
.radico-category-panel:hover,
.radico-category-panel:focus-within,
.radico-categories:not(:hover) .radico-category-panel.is-default {
  --radico-panel-fg: var(--radico-blue-950);
  background-color: var(--radico-space-200);
}
.radico-category-panel:hover .radico-category-panel__desc,
.radico-category-panel:focus-within .radico-category-panel__desc,
.radico-categories:not(:hover) .radico-category-panel.is-default .radico-category-panel__desc {
  opacity: 1;
  max-height: 320px;
}

/* Touch devices have no hover; show every panel in the resting treatment so
   nothing is hidden behind an interaction that cannot happen. */
@media (hover: none) {
  .radico-category-panel {
    --radico-panel-fg: var(--radico-blue-950);
    background-color: var(--radico-space-200);
  }
  .radico-category-panel__desc { opacity: 1; max-height: none; }
}

/* ==========================================================================
   Catalogue filters (Figma 2149:17787)
   A 406px sidebar: an applied-chips group, then collapsible groups of 18px
   checkboxes separated by a hairline, with Цветове as 56px swatches.
   ========================================================================== */
.radico-filters { width: 100%; font-family: var(--radico-font); }

/* Quick category navigation above the listing. Pills, not checkboxes: these
   move between category pages, and looking like the sidebar's filters would
   promise they combine with them. */
.radico-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-family: var(--radico-font);
}
.radico-chips__chip {
  padding: 8px 16px;
  border: 1px solid var(--radico-space-300, #d1d8d8);
  border-radius: 999px;
  font-size: 15px;
  font-weight: var(--radico-fw-light);
  line-height: 1.4;
  color: var(--radico-blue-950);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.radico-chips__chip:hover { border-color: var(--radico-blue-950); }
.radico-chips__chip.is-active {
  border-color: var(--radico-blue-950);
  background: var(--radico-blue-950);
  color: #fff;
}

.radico-filters__group { position: relative; }
.radico-filters__group + .radico-filters__group {
  border-top: 1px solid var(--radico-space-200);
}

/* The client's three bands. Set small and tracked out so it reads as a divider
   over the groups below rather than as another group to open — the group
   labels are 18px, this is 12px. */
.radico-filters__band {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--radico-space-300, #d1d8d8);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--radico-space-500, #6a7a81);
}

.radico-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  /* Even air above and below the label. With padding only on top, a collapsed
     group's label sat hard against the next group's border-top. */
  padding: 16px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.radico-filters__group--applied .radico-filters__head { cursor: default; }
.radico-filters__label {
  font-size: 18px;
  font-weight: var(--radico-fw-light);
  line-height: 1.4;
  color: var(--radico-blue-950);
}
.radico-filters__clear {
  font-size: 14px;
  font-weight: var(--radico-fw-light);
  line-height: 1.5;
  color: var(--radico-blue-950);
  text-decoration: underline;
}
.radico-filters__chevron {
  width: 16px;
  height: 16px;
  background-color: var(--radico-blue-950);
  -webkit-mask: var(--radico-chevron-down) center / contain no-repeat;
  mask: var(--radico-chevron-down) center / contain no-repeat;
  transition: transform .2s ease;
}
.radico-filters__group[data-open="0"] .radico-filters__chevron { transform: rotate(-90deg); }

/* Figma's group box is pt 64 / pb 24 with the header sitting at the top. */
.radico-filters__body { padding: 8px 0 24px; }
.radico-filters__group[data-open="0"] .radico-filters__body { display: none; }

.radico-filters__list { list-style: none; margin: 0; padding: 0; }
.radico-filters__list li + li { margin-top: 16px; }

.radico-filters__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--radico-fw-light);
  line-height: 1.5;
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-filters__box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--radico-blue-950);
  background: transparent;
}
.radico-filters__option.is-checked .radico-filters__box {
  background: var(--radico-blue-950);
}
.radico-filters__option:hover .radico-filters__text { color: var(--radico-blue-700); }

/* --- Applied chips -------------------------------------------------------- */
.radico-filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.radico-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--radico-space-100);
  font-size: 16px;
  font-weight: var(--radico-fw-light);
  line-height: 1.5;
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-filters__chip-x {
  width: 18px;
  height: 18px;
  background-color: var(--radico-blue-950);
  -webkit-mask: var(--radico-x) center / 14px 14px no-repeat;
  mask: var(--radico-x) center / 14px 14px no-repeat;
}

/* --- Colour swatches ------------------------------------------------------
   Superseded by the block at the end of this file, which paints each chip
   from inc/filters.php's colour map and puts the name underneath. Only the
   row layout is kept here. */

/* ==========================================================================
   Testimonials (Figma 2149:17052)
   One quote at a time with an arrow either side. The band also carries the
   brand shapes (2149:17053) over its gradient — Elementor's container takes
   either a gradient or an image, not both, so the artwork is a pseudo-element.
   ========================================================================== */
.radico-testimonial {
  position: relative;
  overflow: hidden;
}
.radico-testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/wp-content/uploads/2026/09/brand-testimonial-shape.svg")
    no-repeat right -138px top -751px / 2190px 1803px;
}
.radico-testimonial > * { position: relative; z-index: 1; }

.radico-testimonials {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.radico-testimonials__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.radico-testimonials__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .35s ease;
}
.radico-testimonials__item {
  /* One page is `per-view` quotes wide, so each item is a fraction of it. */
  flex: 0 0 calc(100% / var(--radico-testimonial-per-view, 1));
  min-width: 0;
  padding: 32px 40px;
}
@media (max-width: 1024px) {
  .radico-testimonials__item { flex-basis: 100%; }
}
.radico-testimonials__quote {
  margin: 16px 0 32px;
  font: var(--radico-fw-light) 18px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-testimonials__author {
  margin: 0;
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-testimonials__author strong {
  display: block;
  font-weight: var(--radico-fw-bold);
  line-height: 1.4;
}

/* The arrows are the design's 8x16 chevron, drawn as a mask so one file
   serves both directions. */
.radico-testimonials__nav {
  flex: 0 0 auto;
  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;
  transition: opacity .15s;
}
.radico-testimonials__nav:hover { opacity: .6; }
.radico-testimonials__nav--prev { transform: rotate(180deg); }
.radico-testimonials__nav[hidden] { display: none; }

@media (max-width: 767px) {
  .radico-testimonials { gap: 16px; }
  .radico-testimonials__item { padding: 24px 0; }
  .radico-testimonial::before { background-position: right -400px top -900px; }
}

/* ---- Catalogue toolbar ---------------------------------------------------
   Figma draws "Скрий филтри" and "Сортирай по" as plain text; both are real
   controls, so they are reset back to that appearance.
   -------------------------------------------------------------------------- */
.radico-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}
.radico-catalog-toolbar__toggle {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: var(--radico-fw-bold) 24px/1.1 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-catalog-toolbar__sort { margin: 0; }
.radico-catalog-toolbar__sort select {
  padding: 0 28px 0 0;
  border: 0;
  border-radius: 0;
  background: var(--radico-chevron-down) right center / 16px 16px no-repeat;
  appearance: none;
  cursor: pointer;
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
.radico-catalog-toolbar__sort select:focus-visible { outline: 2px solid var(--radico-blue-700); }

/* The shortcode is the top bar's only child, so it has to span it. */
.radico-catalog-topbar > .elementor-widget-shortcode { width: 100%; }

/* Collapsed sidebar: it slides out to the left and the grid takes the row.
   `display: none` cannot be transitioned, so the column collapses on width
   and opacity instead and is taken out of the tab order with inert sizing. */
.radico-catalog-filters {
  overflow: hidden;
  transition: max-width .35s ease, opacity .25s ease, transform .35s ease;
}
.radico-catalog.is-filters-hidden .radico-catalog-filters {
  max-width: 0;
  min-width: 0;
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}
.radico-catalog-grid { transition: max-width .35s ease; }
.radico-catalog.is-filters-hidden .radico-catalog-grid { max-width: none; }

/* Below the desktop breakpoint the row stacks, so collapsing the width leaves
   the sidebar's height — and the row gap — as a band of empty page. */
@media (max-width: 1024px) {
  .radico-catalog-filters {
    transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
  }
  .radico-catalog.is-filters-hidden .radico-catalog-filters {
    max-width: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* The gap belongs to the row, not the column, so it has to go too. */
  .radico-catalog.is-filters-hidden .radico-catalog-body {
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radico-catalog-filters,
  .radico-catalog-grid { transition: none; }
}

@media (max-width: 767px) {
  .radico-catalog-toolbar { flex-wrap: wrap; gap: 12px; }
  .radico-catalog-toolbar__toggle { font-size: 20px; }
}

/* ==========================================================================
   Underline CTA — hover fill
   The design's link sits under a 1px rule. On hover a solid ground wipes down
   from that rule and the label reverses out of it.
   ========================================================================== */
.radico-cta-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.radico-cta-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--radico-blue-950);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s ease;
}
.radico-cta-link:hover::before,
.radico-cta-link:focus-visible::before { transform: scaleY(1); }

/* The label and chevron reverse out. Elementor writes the colour onto the
   widget's own class, so the heading element is named here too. */
.radico-cta-link:hover .elementor-heading-title,
.radico-cta-link:hover .elementor-widget-text-editor,
.radico-cta-link:hover p {
  color: var(--radico-space-50);
}
.radico-cta-link:hover img { filter: brightness(0) invert(1); }
/* The fill is the whole hover: growing the padding changed the element's
   height and shunted everything below it down the page. */

/* The label needs room to sit inside the fill without the box changing size,
   so the inset is permanent and only the ground moves. Vertical padding is
   stated on both sides: the label was sitting low in the box because only the
   horizontal inset was set and the rule above it supplied the rest. */
.radico-cta-link {
  padding-inline: 16px;
  padding-block: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .radico-cta-link::before { transition: none; }
}

/* ==========================================================================
   Blog card meta row
   Category left, date / read time right. Elementor sets `word-break:
   break-word` on its text widgets, which split "Ергономия" mid-word once the
   two halves were squeezed.
   ========================================================================== */
.radico-blog-meta {
  /* Elementor containers size from --width, so setting `width` alone leaves
     the row short of the card and the date group short of its right edge. */
  --width: 100%;
  width: 100%;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 12px;
}
/* The category takes the slack; the date group keeps its own width.
   `--width` as well as `width`: an Elementor container sizes from the custom
   property, so the category was still claiming the full row and the date group
   printed on top of it. */
.radico-blog-meta > :first-child {
  flex: 1 1 auto;
  min-width: 0;
  --width: auto;
  width: auto;
}
/* Elementor's text widget breaks words mid-syllable once its column narrows,
   which turned "Ергономия" into three lines. !important is confined to these
   three declarations — the rule it overrides is Elementor's own widget CSS. */
.radico-blog-meta,
.radico-blog-meta * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.radico-blog-meta > :last-child {
  flex: 0 0 auto;
  --width: auto;
  width: auto;
  /* The row's `space-between` stopped placing this once both children became
     auto-width, so the date group is pushed to the right edge explicitly. */
  margin-left: auto;
  white-space: nowrap;
  text-align: right;
}

/* ==========================================================================
   Product card — the second gallery image fades in on hover
   The map of card id to image is printed by inc/shop.php; the loop item has no
   place to hang a second <img>, so it is a background layer over the first.
   ========================================================================== */
.radico-product-card > .elementor-widget-image {
  position: relative;
  overflow: hidden;
  background: var(--radico-space-100);
}
/* The whole product, not a crop of it — a portrait still in a landscape card
   loses its base to `cover`. The hover image behind it matches. */
.radico-product-card > .elementor-widget-image img { object-fit: contain; }
.radico-product-card > .elementor-widget-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--radico-card-hover, none);
  background-size: contain;
  background-position: center;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.radico-product-card:hover > .elementor-widget-image::after { opacity: 1; }
.radico-product-card > .elementor-widget-image img { transition: transform .6s ease; }
.radico-product-card:hover > .elementor-widget-image img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .radico-product-card > .elementor-widget-image::after,
  .radico-product-card > .elementor-widget-image img { transition: none; }
}

/* ==========================================================================
   Breadcrumb separator
   The exported asset is a down chevron; every breadcrumb points forward. It is
   rotated rather than re-exported so one rule covers every page that uses it —
   the file is used nowhere else as an <img>.
   ========================================================================== */
img[src$="icon-chevron-down.svg"] {
  transform: rotate(-90deg);
}

/* Same as the quantity stepper: these arrows are a mask over a background
   colour, which the global button reset would clear on hover. */
.radico-testimonials__nav,
.radico-testimonials__nav:hover,
.radico-testimonials__nav:focus {
  background-color: var(--radico-blue-950);
}

/* ==========================================================================
   FAQ accordion (Figma 2149:18753)
   Hairline rows with the chevron at the far right — not Elementor's bordered
   panel with a plus on the left.
   ========================================================================== */
.radico-faq .e-n-accordion,
.radico-faq .e-n-accordion-item {
  border: 0;
  border-radius: 0;
  background: none;
}
.radico-faq .e-n-accordion-item {
  border-bottom: 1px solid var(--radico-space-200);
}
.radico-faq .e-n-accordion-item:first-child {
  border-top: 1px solid var(--radico-space-200);
}
.radico-faq summary.e-n-accordion-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.radico-faq .e-n-accordion-item-title-header,
.radico-faq .e-n-accordion-item-title-text {
  font: var(--radico-fw-bold) 18px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}
/* The icon is first in the DOM; the design puts it last. */
.radico-faq .e-n-accordion-item-title-icon {
  order: 2;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--radico-blue-950);
}
.radico-faq .e-n-accordion-item-title-icon svg { width: 18px; height: 18px; }
.radico-faq .e-con-inner,
.radico-faq .e-n-accordion-item > .e-con {
  padding: 0 0 24px;
}
.radico-faq summary::marker,
.radico-faq summary::-webkit-details-marker { display: none; content: ""; }


/* ==========================================================================
   CTA band — the card scrolls over the photograph
   A fixed attachment holds the image still while the page moves, so the copy
   block travels across it. Only at desktop: iOS ignores `fixed` and renders
   the image at viewport size instead.
   ========================================================================== */
@media (min-width: 1025px) and (hover: hover) {
  .radico-cta,
  .radico-cta > .e-con-inner {
    background-attachment: fixed;
  }
}

/* ==========================================================================
   Footer links
   The columns are plain text until hovered; the design underlines them.
   ========================================================================== */
.radico-footer a {
  color: var(--radico-blue-950);
  text-decoration: none;
  transition: color .15s, opacity .15s;
}
.radico-footer a:hover,
.radico-footer a:focus-visible {
  color: var(--radico-blue-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.radico-footer .radico-footer__social a:hover { opacity: .7; text-decoration: none; }

/* The answer is body copy under its question — Elementor wraps each pane in a
   bordered panel and dims the text. */
.radico-faq .e-n-accordion-item > .e-con,
.radico-faq .e-n-accordion-item > .e-con > .e-con-inner {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.radico-faq .e-n-accordion-item > .e-con {
  padding: 0 0 28px;
}
.radico-faq .e-n-accordion-item p,
.radico-faq .e-n-accordion-item .elementor-widget-text-editor {
  margin: 0;
  max-width: 780px;
  font: var(--radico-fw-light) 18px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}

/* ---- Empty category ------------------------------------------------------
   Categories exist before their products do, so the grid needs something to
   say rather than an empty column.
   -------------------------------------------------------------------------- */
/* Elementor's class is `e-loop-nothing-found-message`, not the
   `elementor-nothing-found` the older widget used. */
.radico-catalog .e-loop-nothing-found-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 72px 24px;
  border: 1px solid var(--radico-space-200);
  background: var(--radico-space-50);
  font: var(--radico-fw-light) 18px/1.5 var(--radico-font);
  color: var(--radico-space-500);
  text-align: center;
}
.radico-catalog .e-loop-nothing-found-message__text { max-width: 42ch; }
.radico-catalog .e-loop-nothing-found-message::before {
  content: "";
  width: 56px;
  height: 56px;
  background: var(--radico-space-400);
  -webkit-mask: var(--radico-empty-box) center / contain no-repeat;
  mask: var(--radico-empty-box) center / contain no-repeat;
}

/* ---- Technology section artwork -----------------------------------------
   The brand shape (Figma 2149:17587) is drawn for this section's proportions
   and exported with preserveAspectRatio="none", so it stretches to the band
   rather than filling it. `cover` cropped it into a heavy grey wedge, and
   Elementor's size control has no value for `100% 100%`.
   -------------------------------------------------------------------------- */
.radico-technology__inner {
  background-image: url("/wp-content/uploads/2026/09/brand-tech-shape.svg");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Харесани продукти (Figma 2201:21478)
   The same four-across card grid as the catalogue: image, name, price. The
   heart stays on the card so an item can be taken off the list.
   ========================================================================== */
.radico-wishlist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 24px;
}
.radico-wishlist__item { position: relative; }
.radico-wishlist__thumb {
  display: block;
  aspect-ratio: 406 / 406;
  overflow: hidden;
  background: var(--radico-space-100);
}
.radico-wishlist__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.radico-wishlist__item:hover .radico-wishlist__thumb img { transform: scale(1.03); }

.radico-wishlist__name {
  display: block;
  margin: 16px 0 6px;
  font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: none;
}
.radico-wishlist__price {
  font: var(--radico-fw-light) 16px/1.5 var(--radico-font);
  color: var(--radico-blue-950);
}

.radico-wishlist__remove {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radico-radius-full);
  background: rgba(255, 255, 255, .9);
  opacity: 0;
  transition: opacity .15s;
}
.radico-wishlist__item:hover .radico-wishlist__remove,
.radico-wishlist__remove:focus-within { opacity: 1; }
/* Touch has no hover, so the control is always there. */
@media (hover: none) {
  .radico-wishlist__remove { opacity: 1; }
}

.radico-compare__empty {
  padding: 72px 0;
  font: var(--radico-fw-light) 18px/1.5 var(--radico-font);
  color: var(--radico-space-500);
}

@media (max-width: 1024px) {
  .radico-wishlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .radico-wishlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
}

/* ---- Footer at tablet ----------------------------------------------------
   The contact / address / payment / social row is laid out for 1920 and does
   not wrap, so at 834 the payment icons ran past the viewport and scrolled the
   whole site sideways. Below desktop the footer's rows simply wrap.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .radico-footer .e-con,
  .radico-footer .e-con-full { flex-wrap: wrap; }
  .radico-footer .e-con > .e-con,
  .radico-footer .e-con > .elementor-widget { min-width: 0; }
}

/* ---- Fixed widths must still shrink -------------------------------------
   The design's columns are drawn at 1920. Between the desktop breakpoint and
   1920 a fixed width has no room to give, and the page scrolls sideways — at
   1440 the split-feature CTA and the reviews block both ran past the edge.
   -------------------------------------------------------------------------- */
.radico-cta-link { max-width: 100%; }

/* The same, for every container. Fixing columns one at a time kept missing
   the next one: at 1280–1366 — a 1536 or 1707 screen under Windows 125/150%
   scaling — the home intro (784) and the category card (448, in a column
   container, where flex-shrink never applies) still ran past the edge and
   the whole page scrolled sideways. A container is never wider than the box
   it sits in; below that, its fixed width still holds. */
.e-con { max-width: 100%; }

/* The reviews row is a 549 column beside a 979 one — 1528 plus the gap, which
   does not fit between the desktop breakpoint and 1920. The columns shrink and
   the row wraps rather than pushing the page sideways; the section clips as a
   last resort so a stray fixed width can never scroll the page. */
.radico-product-reviews { flex-wrap: wrap; overflow-x: clip; }
.radico-product-reviews > .e-con {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
}

/* --- Product card rating --------------------------------------------------
   The catalogue card carries the same star line as the mega menu's card, so
   the two read alike. It only renders when a product has reviews.
   -------------------------------------------------------------------------- */
.radico-card-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.radico-card-reviews {
  font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The media block spans the card; the photograph is contained inside it so a
   portrait still is never cropped. */
.radico-product-card > .elementor-widget-image,
.radico-product-card .elementor-widget-image .elementor-widget-container {
  width: 100%;
}
/* The stills are 2:3. Contained in the card's 420x528 box they came out 352
   wide, leaving a band of ground either side of every chair. The box takes the
   photograph's own ratio instead, so it fills the card's width edge to edge and
   still nothing is cropped. */
.radico-product-card .elementor-widget-image img {
  width: 100%;
  height: auto;
  background: var(--radico-space-100);
}

/* --- "Виж всички" ----------------------------------------------------------
   A section's see-all link. It had no hover at all; the underline now thickens
   and the label deepens, without moving the row.
   -------------------------------------------------------------------------- */
.radico-viewall { cursor: pointer; }
.radico-viewall .elementor-widget-text-editor,
.radico-viewall p {
  transition: color .15s, text-decoration-color .15s;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.radico-viewall:hover .elementor-widget-text-editor,
.radico-viewall:hover p,
.radico-viewall:focus-visible .elementor-widget-text-editor,
.radico-viewall:focus-visible p {
  color: var(--radico-blue-700, #194960);
  text-decoration-thickness: 2px;
}

/* --- Card colour swatches --------------------------------------------------
   The card swaps its own photograph; it does not pick a variation, since
   nothing is being bought from the grid. The whole card is a link, so the
   script stops the click from following it.
   -------------------------------------------------------------------------- */
.radico-cardcolours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.radico-cardcolours__dot {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--radico-space-300);
  /* Square, like the swatches on the product page — no rounding. */
  border-radius: 0;
  background: var(--radico-swatch, var(--radico-space-100));
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.radico-cardcolours__dot:hover { border-color: var(--radico-blue-950); }
/* An inset ring rather than a thicker border, so the dot does not change size
   and shift its neighbours. */
.radico-cardcolours__dot.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 card's frame is square — the catalogue reads as a grid rather than a row
   of differently proportioned photographs. */
.radico-product-card .elementor-widget-image img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ---- Products with no price yet ------------------------------------------
   The desks and desk accessories are published with photographs while the
   price list is still with the client. They read as finished rather than
   broken: the price line says so, and the cart's place is taken by the way to
   ask for one.
   -------------------------------------------------------------------------- */
/* Quieter than a price: it is a state, not a number, and at the price's own
   size and weight it read as the loudest thing on the card. */
.radico-price-ask {
  font: 500 15px/1.3 var(--radico-font);
  color: var(--radico-space-500);
}
/* The panel has room for a little more; the cards keep the small one. Sized
   from the card up rather than down: the loop item's classes come from
   Elementor and are not ours to rely on. */
.radico-product-info .radico-price-ask { font-size: 18px; }
/* Scoped through the panel and the tag: `.radico-product-info a` sets
   `color: inherit !important`, and an important declaration on a bare class
   loses to it — the label came out the same blue as the button. */
.radico-enquiry-cta,
.radico-product-info a.radico-enquiry-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 32px;
  background: var(--radico-blue-950);
  /* !important, like the add-to-cart button: the theme's link colour is more
     specific than a class on an <a>, and without it the label comes out the
     same blue as the button it sits on. */
  color: var(--radico-space-50) !important;
  font: var(--radico-fw-bold) 18px/1.5 var(--radico-font);
  text-decoration: none;
  transition: background .15s;
}
.radico-enquiry-cta:hover,
.radico-enquiry-cta:focus-visible,
.radico-product-info a.radico-enquiry-cta:hover,
.radico-product-info a.radico-enquiry-cta:focus-visible {
  background: var(--radico-blue-700, #194960);
  color: var(--radico-space-50) !important;
}

/* ---- A product panel with little in it -----------------------------------
   Grouped at the top instead of stretched to the picture's height: with no
   colours, reviews or copy, "space-between" left the title and the price at
   opposite ends of an empty column.
   -------------------------------------------------------------------------- */
body.radico-product-sparse .radico-product-info {
  justify-content: flex-start;
  gap: 40px;
}

/* ---- The room shot a card shows while hovered ----------------------------
   A layer over the studio still, faded in on hover. The still itself is left
   alone: swapping its src made the browser fetch a second size from the
   srcset straight after, and the card flashed through two pictures.

   The square box it covers is the image block, which is the card's full width
   and 1:1, so the layer takes the same shape.
   -------------------------------------------------------------------------- */
.radico-product-card { position: relative; }
/* Elementor positions every widget wrapper and every container, so the layer
   measured itself against the shortcode widget — a box with no in-flow content,
   and so no width — and then, once that was stood down, against the info column
   below the photograph. Standing down every wrapper between the two hands the
   layer back to the card itself. Nothing else inside them is positioned bar the
   screen-reader text, which is hidden whichever box it hangs from. */
.radico-product-card :is(.e-con, .elementor-widget):has(.radico-card-scene) {
  position: static;
}
.radico-card-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.radico-product-card:hover .radico-card-scene,
.radico-product-card:focus-within .radico-card-scene { opacity: 1; }
/* A colour under the pointer wins: that is the shopper asking for the chair in
   that colour, not for the room. */
.radico-product-card:has(.radico-cardcolours__dot:hover) .radico-card-scene { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .radico-card-scene { transition: none; }
}

/* --- Choosing a table top ---------------------------------------------------
   Sits between the price and the cart on a desk. "Само основа" is the first
   option rather than a hidden one: a shopper replacing the top of a desk they
   already own should not have to hunt for it.
   -------------------------------------------------------------------------- */
.radico-deskcfg { display: flex; flex-direction: column; gap: 14px; }
.radico-deskcfg__label {
  margin: 0;
  font-size: 16px;
  font-weight: var(--radico-fw-light);
  line-height: 1.4;
  color: var(--radico-blue-950);
}
.radico-deskcfg__label--sub { font-size: 14px; color: var(--radico-space-500, #6E7A85); }

.radico-deskcfg__sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.radico-deskcfg__size {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 20px;
  border: 1px solid var(--radico-space-300);
  background: transparent;
  font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.radico-deskcfg__size:hover { border-color: var(--radico-blue-950); }
.radico-deskcfg__size.is-active {
  border-color: var(--radico-blue-950);
  background: var(--radico-space-100);
  font-weight: 500;
}

.radico-deskcfg__decors { display: flex; flex-direction: column; gap: 8px; }
/* `display` here outranks the browser's own rule for [hidden], so without this
   every size's decors stayed on screen at once. */
.radico-deskcfg__decors[hidden] { display: none; }
.radico-deskcfg__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Same 56px as the frame colours above them: the two rows sit one under the
   other on a desk page, and a 44px square under a 56px one reads as a mistake
   rather than as a different kind of choice. */
.radico-deskcfg__decor {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--radico-space-300);
  border-radius: 0;
  background: var(--radico-swatch, var(--radico-space-100));
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.radico-deskcfg__decor:hover { border-color: var(--radico-blue-950); }
/* An inset ring, so the swatch keeps its size and its neighbours stay put. */
.radico-deskcfg__decor.is-active {
  border-color: var(--radico-blue-950);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--radico-blue-950);
}
.radico-deskcfg__decor-name {
  margin: 0;
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
}

/* The choice stands beside its own label, so both rows can be read without
   opening anything: "Цвят на плота: Кашмир", "Размер: 138×68 см". */
.radico-deskcfg__chosen { font-weight: 500; }

.radico-deskcfg__sizerow { display: flex; flex-direction: column; gap: 10px; }
.radico-deskcfg__sizerow[hidden] { display: none; }

.radico-deskcfg__note {
  margin: 0;
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-space-500, #6E7A85);
}

/* No tabletop. Drawn as a crossed-out chip, the same size as the decors, so
   it reads as one more option in the row rather than a control of its own. */
.radico-deskcfg__decor--none {
  position: relative;
  background: transparent;
}
.radico-deskcfg__decor--none::before,
.radico-deskcfg__decor--none::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 1px;
  background: var(--radico-blue-950);
}
.radico-deskcfg__decor--none::before { transform: rotate(45deg); }
.radico-deskcfg__decor--none::after { transform: rotate(-45deg); }

/* A size this decor is not cut in, or one that is out of stock. Shown rather
   than hidden, so the row keeps its shape while decors are tried. */
.radico-deskcfg__size:disabled {
  opacity: .35;
  cursor: not-allowed;
  border-color: var(--radico-space-300);
}
.radico-deskcfg__size:disabled:hover { border-color: var(--radico-space-300); }


/* --- Extras: the cable a charger needs, the tray a desk may take ------------
   The buttons borrow the table-top chips, so a choice looks the same wherever
   it is made. What is added here is the part that says a choice is required.
   -------------------------------------------------------------------------- */
.radico-addons { display: flex; flex-direction: column; gap: 20px; }
.radico-addons__group { display: flex; flex-direction: column; gap: 8px; }
.radico-addons__must {
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--radico-space-100);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--radico-blue-700, #194960);
}
.radico-addons__why {
  margin: 0;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500, #6E7A85);
}
.radico-addons__price { margin-left: 8px; color: var(--radico-space-500, #6E7A85); }
.radico-addons__price .woocommerce-Price-amount { color: inherit; }
.radico-addons__extra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--radico-space-300);
  font: var(--radico-fw-light) 15px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  cursor: pointer;
}
.radico-addons__extra input { accent-color: var(--radico-blue-950); }
.radico-addons__extra:hover { border-color: var(--radico-blue-950); }

/* Only after a blocked attempt to buy — not on arrival, where a red frame
   around an untouched choice reads as an error the shopper has not made yet. */
.radico-addons.is-nudged.is-incomplete .radico-addons__group[data-required="1"] {
  border-left: 3px solid var(--radico-blue-700, #194960);
  padding-left: 14px;
}
.radico-addons.is-nudged.is-incomplete .radico-addons__must {
  background: var(--radico-blue-700, #194960);
  color: #fff;
}

/* The top attached to a desk in the cart: one line, but plainly a part of the
   line above rather than a loose purchase. */
.radico-cart-attached { display: block; }
.radico-cart-attached small {
  display: block;
  font-size: 13px;
  color: var(--radico-space-500, #6E7A85);
}
.radico-cart-qty { color: var(--radico-space-500, #6E7A85); }

@media (prefers-reduced-motion: reduce) {
  .radico-deskcfg__size,
  .radico-deskcfg__decor { transition: none; }
}

/* One picker read top to bottom: frame colour, tabletop colour, size. The frame
   row comes from a different shortcode to the other two, so its type and its
   chips are matched to them here rather than being left to drift. The chair
   pages keep the small chips — there the row stands alone and has nothing to
   line up with. */
.radico-colours--desk .radico-colours__label,
.radico-deskcfg__label {
  margin: 0 0 8px;
  font: var(--radico-fw-light) 16px/1.4 var(--radico-font);
  color: var(--radico-space-500);
}
.radico-colours--desk .radico-colours__chosen,
.radico-deskcfg__chosen {
  font-weight: 500;
  color: var(--radico-blue-950);
}
.radico-colours--desk .radico-colours__list { gap: 10px; }

/* The size and what it adds, one above the other in the same box. The figure
   is what decides between three sizes, so it is said where the choice is made
   rather than in a total further down. */
.radico-deskcfg__size-label { font-size: 16px; line-height: 1.3; }
.radico-deskcfg__size-note {
  font-size: 13px;
  line-height: 1.3;
  color: var(--radico-space-500, #6E7A85);
}
.radico-deskcfg__size.is-active .radico-deskcfg__size-note { color: var(--radico-blue-950); }
.radico-deskcfg__size.is-active .radico-deskcfg__size-label { font-weight: 500; }


/* A shortcode that returned nothing still takes a slot in the panel's 32px
   gap — twice over, once on each side — so an absent badge row pushed the
   tabletop picker 64px away from the frame colours above it. */
.radico-product-info .elementor-widget-shortcode:has(> .elementor-shortcode:empty) {
  display: none;
}

/* --- Price slider ----------------------------------------------------------
   Two real range inputs stacked on one track, so the control is keyboard
   operable and survives without JavaScript as two sliders and a button. The
   track and the fill are drawn separately because a range input's own track
   cannot show a span between two handles.
   -------------------------------------------------------------------------- */
.radico-price { position: relative; padding: 6px 0 4px; }
.radico-price__track {
  position: relative;
  height: 3px;
  margin: 10px 0 0;
  background: var(--radico-space-300);
}
.radico-price__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--radico-blue-950);
}
.radico-price__handle {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  background: none;
  pointer-events: none;   /* the thumbs take the clicks, not the strip */
  -webkit-appearance: none;
  appearance: none;
}
.radico-price__handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--radico-blue-950);
  border-radius: 50%;
  background: #fff;
  cursor: grab;
}
.radico-price__handle::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--radico-blue-950);
  border-radius: 50%;
  background: #fff;
  cursor: grab;
}
.radico-price__handle:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--radico-blue-700); outline-offset: 2px; }
.radico-price__values {
  display: flex;
  justify-content: space-between;
  margin: 22px 0 0;
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  font-variant-numeric: tabular-nums;
}
.radico-price__apply {
  margin-top: 10px;
  padding: 8px 18px;
  border: 1px solid var(--radico-blue-950);
  background: none;
  font: var(--radico-fw-light) 14px/1.4 var(--radico-font);
  color: var(--radico-blue-950);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.radico-price__apply:hover { background: var(--radico-blue-950); color: #fff; }

/* ---- CTA titles below 1800 ----------------------------------------------
   "Обзавеждаш офис, екип<br>или проектно пространство" breaks exactly where
   the design wants at 1920. Narrower — 1536 is a 1920 screen under Windows
   125% — the first half no longer fits, and the forced break left "екип"
   alone on a line. Below 1800 the break goes and the browser balances it.
   -------------------------------------------------------------------------- */
.radico-balance .elementor-heading-title { text-wrap: balance; }
@media (max-width: 1799px) {
  .radico-balance .elementor-heading-title br { display: none; }
}

/* "За фирми и по-големи количества: запитване за количество" — under the cart,
   quieter than it: one line of small text with the link in it. */
.radico-quantity-enquiry {
  margin: 12px 0 0;
  font: var(--radico-fw-light) 14px/1.5 var(--radico-font);
  color: var(--radico-space-500, #6a7a81);
}
.radico-quantity-enquiry a {
  color: var(--radico-blue-950);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- За нас: ценностите и цитатите ---------------------------------------
   Five values in one style (the client's brief): three and two on a desktop,
   two across on a tablet, one under another on a phone. A grid rather than
   Elementor's flex row, which squeezed five into one line.
   -------------------------------------------------------------------------- */
.e-con.radico-values {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
}
@media (max-width: 1024px) {
  .e-con.radico-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .e-con.radico-values { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.radico-value { min-width: 0; }

/* The accent quote: a rule on the left, the words given room. */
.radico-about-quote p {
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid var(--radico-blue-950);
  text-wrap: pretty;
}

/* ---- Бизнес (B2B home) -----------------------------------------------------
   The sector pills, the five direction cards, and the four-across reasons.
   -------------------------------------------------------------------------- */
.radico-b2b-pill {
  border: 1px solid rgba(11, 47, 65, .35);
  transition: background-color .15s ease, border-color .15s ease;
}
.radico-b2b-pill:hover { background: rgba(255, 255, 255, .6); border-color: var(--radico-blue-950); }
.radico-b2b-head { max-width: 860px; }
.radico-b2b-eyebrow p, .radico-b2b-eyebrow { letter-spacing: .1em; }
.radico-b2b-num p { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

.e-con.radico-b2b-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1280px) {
  .e-con.radico-b2b-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .e-con.radico-b2b-grid--5 { grid-template-columns: minmax(0, 1fr); }
}
.radico-b2b-card { min-width: 0; }
.radico-b2b-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.radico-b2b-card:hover .radico-b2b-more p { text-decoration: underline; text-underline-offset: 4px; }

.e-con.radico-values--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .e-con.radico-values--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .e-con.radico-values--4 { grid-template-columns: minmax(0, 1fr); }
}
.radico-b2b-pill p { margin: 0; white-space: nowrap; }
.e-con:has(> .radico-b2b-pill) { flex-direction: row !important; flex-wrap: wrap !important; }
.e-con.radico-b2b-pill { --width: auto; width: auto !important; flex: 0 0 auto !important; }

/* Продукт and Количество on the B2B form belong to a quantity enquiry from a
   product page, which fills them; otherwise they are not asked. */
body:not(.radico-has-item) .radico-form .elementor-field-group-product,
body:not(.radico-has-item) .radico-form .elementor-field-group-quantity { display: none; }
.radico-form .elementor-field-type-checkbox .elementor-field-subgroup { display: flex; flex-direction: column; gap: 8px; }
.radico-form .elementor-field-type-checkbox .elementor-subgroup-inline { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.radico-form .elementor-field-type-upload .elementor-upload-field { padding: 14px 16px; border: 1px dashed var(--radico-blue-950); background: var(--radico-space-200); width: 100%; }
.radico-form .elementor-field-type-upload::after {
  content: "Прикачете план, чертеж, спецификация, снимки или друг материал, който може да ни помогне да разберем проекта. До 5 файла, до 10 MB всеки.";
  display: block; margin-top: 6px; font: var(--radico-fw-light) 14px/1.5 var(--radico-font); color: var(--radico-space-500, #6a7a81);
}
.radico-form .elementor-field-type-checkbox .elementor-field-subgroup { width: 100%; }

/* Comparison off (inc/lists.php, RADICO_COMPARE_ENABLED): its header icon,
   the mobile sheet's entry, and the product page's "Сравни". */
html[data-radico-compare="off"] .radico-header__compare,
html[data-radico-compare="off"] .radico-product-compare,
html[data-radico-compare="off"] a[href$="/sravnenie/"] { display: none !important; }