/*
 * Azalia design tokens.
 *
 * Cassiopeia and Bootstrap already provide the base styles. Component rules
 * and their responsive media queries will be added here when the design is set.
 */

:root {
  /* Brand colors. */
  --color-accent: #6f0413;
  --color-accent-strong: #5e0310;
  --color-accent-rgb: 111, 4, 19;
  --color-text: #212529;
  --color-text-rgb: 33, 37, 41;
  --color-muted: #e4e6ed;
  --color-bg: #fdfaf7;
  --color-surface: #f8f3ef;
  --color-border: var(--color-muted);

  /* Shared surface for every dropdown/panel that floats over content:
     catalog mega-menu, header menu dropdown, login modal. Was three
     different near-white shades in three places — one source now. */
  --dropdown-surface: #fffdfb;

  /* Route Bootstrap's own link/accent variables through the brand accent. */
  --bs-link-color: var(--color-accent);
  --bs-link-color-rgb: var(--color-accent-rgb);
  --bs-link-hover-color: var(--color-accent-strong);
  --bs-link-hover-color-rgb: var(--color-accent-rgb);

  /* Temporary sizes. */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-display: clamp(2rem, 4vw, 3.5rem);
  --h1-size: clamp(2rem, 4vw, 3.5rem);
  --h2-size: clamp(1.625rem, 3vw, 2.5rem);
  --h3-size: clamp(1.375rem, 2.2vw, 1.875rem);
  --line-height-tight: 1.15;
  --line-height-base: 1.55;
  --line-height-loose: 1.75;

  --container-space: 1.5rem;

  /* Shared vertical spacing for full page sections (.container-compo and,
     later, individual modules that want to line up with it) — one value
     instead of repeating 40px 0px everywhere it's needed. */
  --section-space-y: 40px;

}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-strong);
}

h1 {
  text-transform: uppercase;
}

/* Site-wide h1 { text-transform: uppercase } shouldn't touch the product
   page title either (same reasoning as the hero slider exception below) —
   the reference design keeps it in the title's own serif case. */
.rm-product__title {
  text-transform: none;
}

.brand-logo img {
  display: block;
  height: 55px;
  width: auto;
}

@media (max-width: 767.98px) {
  .brand-logo img {
    height: 40px;
  }
}

.container-home-faq {
  padding: var(--section-space-y) 0;
}

/* FAQ module (mod_azalia_faq). A quiet editorial frame for wholesale buyers:
   the left column explains the section, while Bootstrap's accordion keeps
   the answers compact and keyboard-accessible on the right. Column widths
   come from Bootstrap's own grid (.row/.col-xl-5/.col-xl-7 in the
   template), not a custom CSS grid. */
.azalia-faq__row {
  align-items: stretch;
}

.azalia-faq__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 3rem;
  border-radius: 1.25rem;
  background: url("/images/bg5.webp") no-repeat center / cover;
}

.azalia-faq__features {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}

.azalia-faq__feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.azalia-faq__feature-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.azalia-faq__feature-title {
  color: var(--color-text);
  font-weight: 600;
}

.azalia-faq__feature-text {
  color: var(--color-text);
  opacity: .6;
  font-size: var(--font-size-xs);
}

.azalia-faq__feature-icon {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
}

.azalia-faq__feature-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.azalia-faq__note {
  margin: .85rem 0 0;
  color: var(--color-text);
  opacity: .6;
  font-size: var(--font-size-xs);
}

.azalia-faq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--color-accent-rgb), .2);
  border-radius: 1rem;
  background: rgba(255, 253, 251, .46);
}

.azalia-faq__item+.azalia-faq__item {
  margin-top: 1.3rem;
}

.azalia-faq__item+.azalia-faq__item::before {
  position: absolute;
  top: -1.05rem;
  left: 50%;
  z-index: 2;
  color: var(--color-accent);
  content: "✦";
  font-size: .85rem;
  opacity: .72;
  transform: translateX(-50%);
}

.azalia-faq__trigger.accordion-button {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2.75rem;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 1.35rem 1.4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-text);
  text-align: left;
}

.azalia-faq__trigger.accordion-button::after {
  display: none;
}

.azalia-faq__trigger.accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--color-text);
}

.azalia-faq__trigger.accordion-button:focus-visible {
  z-index: 1;
  box-shadow: inset 0 0 0 2px rgba(var(--color-accent-rgb), .42);
}

.azalia-faq__number {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(238, 207, 197, .28);
  color: var(--color-accent);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: 1.55rem;
  font-weight: 400;
}

.azalia-faq__question {
  min-width: 0;
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.2;
}

.azalia-faq__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(var(--color-accent-rgb), .7);
  border-radius: 50%;
  color: var(--color-accent);
}

.azalia-faq__toggle::before,
.azalia-faq__toggle::after {
  position: absolute;
  width: .9rem;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform .2s ease;
}

.azalia-faq__toggle::after {
  transform: rotate(90deg);
}

.azalia-faq__trigger:not(.collapsed) .azalia-faq__toggle::after {
  transform: rotate(0);
}

.azalia-faq__answer.accordion-body {
  padding: 0 1.4rem 1.5rem 5.9rem;
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: 1.65;
  opacity: .72;
}

.azalia-faq__answer p:last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .azalia-faq__trigger.accordion-button {
    grid-template-columns: 2.6rem minmax(0, 1fr) 2.35rem;
    gap: .7rem;
    padding: 1rem;
  }

  .azalia-faq__number {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.2rem;
  }

  .azalia-faq__question {
    font-size: 1.15rem;
  }

  .azalia-faq__toggle {
    width: 2.35rem;
    height: 2.35rem;
  }

  .azalia-faq__answer.accordion-body {
    padding: 0 1rem 1.15rem 4.3rem;
    font-size: var(--font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {

  .azalia-faq__toggle::before,
  .azalia-faq__toggle::after {
    transition: none;
  }
}

/* Cassiopeia's default offcanvas glide is a snappy .3s ease-in-out — and it
   re-declares --offcanvas-transition on .offcanvas itself, not just :root,
   so an override has to land on that same selector to actually win (a
   :root-level redeclaration loses to the element's own local one). Slows
   every offcanvas on the site: nav menu, top search, RadicalMart cart. */
/* Direct `transition` (not the --offcanvas-transition variable) so this
   survives prefers-reduced-motion, whose own core rule also sets
   `transition` directly on plain .offcanvas — same pattern as parmaled's
   .site-offcanvas/.cart-offcanvas. Covers any offcanvas that doesn't have
   its own dedicated class below (e.g. RadicalMart's cart drawer). */
.offcanvas {
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hero slider (mod_azalia_slider, "swiper" layout, banner position) */

/* Home category strip (mod_radicalmart_categories, home_slider override). */
.container-top-a>.container {
  width: 100%;
  margin-inline: auto;
}

.container-top-a .top-a.card,
.container-top-a .top-a.card>.card-body,
.azalia-category-strip,
.azalia-category-strip__viewport,
.azalia-category-strip__swiper {
  width: 100%;
}

.container-top-a .top-a.card>.card-body {
  padding-inline: 0;
}

.container-top-a .card:has(.azalia-category-strip) {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.azalia-category-strip {
  position: relative;
  padding: 1rem 0 1.75rem;
}

.azalia-category-strip__viewport {
  position: relative;
}

.azalia-category-strip__swiper {
  margin: 0;
  padding: .15rem .1rem .35rem;
  overflow: hidden;
  /* The vertical padding belongs to the slider itself, so include it in
     the reserved height and keep the 104px card fully inside the viewport. */
  height: calc(104px + .15rem + .35rem);
  min-height: calc(104px + .15rem + .35rem);
}

/* The module is rendered before the deferred Swiper script initializes it.
   Keep that first, non-interactive frame out of sight, but reserve the exact
   final height above so initialization cannot move the content below it. */
.azalia-category-strip__swiper:not(.azalia-category-slider-ready) {
  visibility: hidden;
}

.azalia-category-strip__viewport:not(:has(.azalia-category-slider-ready)) .azalia-category-strip__nav {
  visibility: hidden;
}

.azalia-category-strip__slide {
  width: clamp(245px, 18vw, 310px);
  height: 104px;
}

.azalia-category-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 104px;
  min-height: 0;
  padding: .8rem 1rem;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.azalia-category-card:hover,
.azalia-category-card:focus-visible {
  border-color: rgba(var(--color-accent-rgb), .15);
  background: rgba(var(--color-accent-rgb), .06);
  color: var(--color-text);
  transform: translateY(-2px);
}

.azalia-category-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.azalia-category-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-bg);
}

.azalia-category-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azalia-category-card__info {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: .2rem;
}

.azalia-category-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.azalia-category-card__count {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  opacity: .55;
}

.azalia-category-card__arrow {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  opacity: .55;
}

.azalia-category-strip__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.azalia-category-strip__nav--prev {
  left: 0;
  right: auto;
}

.azalia-category-strip__nav--next {
  right: 0;
}

.azalia-category-strip__nav:hover,
.azalia-category-strip__nav:focus-visible {
  background: var(--color-accent);
  color: #fff;
}

.azalia-category-strip__nav.swiper-button-disabled {
  cursor: default;
  opacity: .3;
  pointer-events: none;
}

.azalia-category-strip__nav svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Home "Подборки для бизнеса" strip — mod_radicalmart_categories (id 136) in
   the home-collections position, overridden at
   templates/cassiopeia_azalia/html/mod_radicalmart_categories/home_collections.php.
   Title row reuses .rm-page-head; the nav buttons reuse
   .azalia-category-strip__nav's color/border/hover (just repositioned
   inline, via .azalia-collections__nav resetting position); the subtitle
   reuses .category-subtitle; the footer link reuses
   .rm-badge-products__catalog-link; the flower reuses the same asset as the
   benefits strip and the wholesale promo panel. */
.container-home-collections {
  padding: var(--section-space-y) 0;
}

.azalia-collections__nav-group {
  display: flex;
  flex: 0 0 auto;
  gap: .6rem;
  margin-left: auto;
}

.azalia-collections__nav {
  position: static;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  transform: none;
}

.azalia-collections__viewport {
  margin-top: 1.75rem;
}

.azalia-collections__swiper {
  margin: 0;
  padding: .15rem .1rem .5rem;
  overflow: hidden;
}

/* Fixed slidesPerView (see the JS breakpoints below) makes Swiper size each
   slide to fill the row evenly while there's room for all of them — no gap
   on the right with only a handful of categories — and switch to a
   scrollable strip once more are added than fit. */
.azalia-collections__swiper:not(.azalia-collections-slider-ready) {
  visibility: hidden;
  height: calc(520px + .15rem + .5rem);
}

.azalia-collection-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(17, 17, 17, .06);
  transition: box-shadow .2s ease, transform .2s ease;
}

.azalia-collection-card:hover,
.azalia-collection-card:focus-visible {
  color: var(--color-text);
  box-shadow: 0 10px 28px rgba(17, 17, 17, .12);
  transform: translateY(-4px);
}

.azalia-collection-card__image {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.azalia-collection-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azalia-collection-card__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.1rem 1.25rem;
}

.azalia-collection-card__info {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.azalia-collection-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.azalia-collection-card__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text);
  opacity: .6;
  font-size: var(--font-size-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.azalia-collection-card__arrow {
  display: flex;
  flex: 0 0 2.5rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
}

.azalia-collection-card__arrow svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.azalia-collections__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: 1.25rem;
  background: url("/images/bg3.webp") no-repeat left center / cover;
}

.azalia-collections__cta-text {
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 400;
  color: var(--color-text);
}

@media (max-width: 575.98px) {
  .azalia-collections__cta {
    padding: 1.25rem 1.5rem;
  }
}

/* Home "Доставка и получение заказа" strip — HTML custom module in
   home-delivery position. Title reuses .rm-page-head/.category-subtitle,
   the "Подробнее"/"Адрес и график" links reuse
   .rm-badge-products__catalog-link, the manager card's button reuses
   .knopka/.ripple-hover + the shared .open-contact-modal trigger (same
   #contactModal as the collections CTA), and the reservation banner reuses
   the bg3.webp band from .azalia-collections__cta. Only the icon circles
   (.azalia-delivery-icon) and the map card are new — no existing
   component matches either. */
.container-home-delivery {
  padding: 3.5rem 0;
  margin: 20px 10px;
  border-radius: 28px;
  background: url("/images/bg4.webp") no-repeat center / cover;
}

.azalia-delivery__row {
  align-items: stretch;
}

.azalia-delivery-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), .1);
}

.azalia-delivery-icon svg {
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.azalia-delivery-map {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--color-accent-rgb), .08);
  border-radius: 1.25rem;
  background: var(--color-surface);
}

/* map.webp is a self-contained infographic (routes, city labels, its own
   "Основные/Другие направления" legend baked in at the bottom-left) at a
   native 3:2 ratio — matching that ratio here instead of forcing
   height:100% means object-fit:cover never actually needs to crop
   anything, at any breakpoint. No text overlay needed on top of it either
   (that used to duplicate the legend baked into the image itself). */
.azalia-delivery-map__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.azalia-delivery-map__note {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.25rem 1.5rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.azalia-delivery-map__note-icon {
  width: 3rem;
  height: 3rem;
}

.azalia-delivery-map__note-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.azalia-delivery-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.azalia-delivery-card {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.21);
}

.azalia-delivery-card .rm-badge-products__catalog-link {
  font-weight: 400;
}

.azalia-delivery-card__icon {
  width: 4.5rem;
  height: 4.5rem;
}

.azalia-delivery-card__icon svg {
  width: 2rem;
  height: 2rem;
}

.azalia-delivery-card__body {
  min-width: 0;
}

.azalia-delivery-card__title {
  margin: 0 0 .3rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-xl);
  font-weight: 400;
}

.azalia-delivery-card__text {
  margin: 0 0 .5rem;
  color: var(--color-text);
  opacity: .65;
  font-size: var(--font-size-sm);
}

.azalia-delivery-card .knopka {
  margin-top: .25rem;
}

@media (max-width: 575.98px) {
  .azalia-delivery-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Home "Товары для профессионалов" strip — mod_radicalmart_category (id 122)
   in the home-products position, overridden at
   templates/cassiopeia_azalia/html/mod_radicalmart_category/grid.php. */
.container-home-products {
  padding: .5rem 0 0;
}

.rm-badge-products {
  padding: .5rem 0 1.5rem;
}

.rm-badge-products__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .35rem;
}

.rm-badge-products__title {
  margin: 0;
}

.rm-badge-products__head-rule {
  position: relative;
  flex: 1 1 4rem;
  height: 1px;
  background-color: #eadbd5;
}

.rm-badge-products__head-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  transform: translateY(-50%);
}

.rm-badge-products__tabs {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: .6rem;
}

.rm-badge-products__tab {
  padding: .55rem 1.25rem;
  border: 1px solid #eadbd5;
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color .15s, border-color .15s, color .15s;
}

.rm-badge-products__tab:hover {
  border-color: var(--color-accent);
}

.rm-badge-products__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.rm-badge-products__tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.rm-badge-products__panel {
  display: none;
}

.rm-badge-products__panel.is-active {
  display: block;
}

.rm-badge-products__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--color-accent-rgb), .1);
}

.rm-badge-products__catalog-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.rm-badge-products__catalog-link:hover {
  color: var(--color-accent-strong);
}

.rm-badge-products__catalog-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-badge-products__note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-text);
  opacity: .55;
  font-size: var(--font-size-xs);
}

.rm-badge-products__note svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767.98px) {
  .rm-badge-products {
    padding: 1.25rem 0 1.1rem;
  }

  .rm-badge-products__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .rm-badge-products__tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Home "Оптовые условия" strip — HTML custom module in home-wholesale
   position. Title reuses the shared .rm-page-head pattern (same as
   category/cart/checkout/etc). Icon circles reuse .azalia-benefit__icon
   (same look as the "Преимущества" strip) and the step divider reuses
   .rm-card-divider (product card title/price divider) — both already
   unscoped/reusable. The row gets its own align-items rule spelled out
   explicitly (rather than relying on Bootstrap's row default) so the two
   panels reliably match height. */
.container-home-wholesale {
  padding: 3.5rem 0;
  background: #faf2ef;
  margin: 20px 10px;
  border-radius: 28px;
}

.azalia-wholesale__row {
  align-items: stretch;
}

.azalia-wholesale-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 2.5rem 2.25rem;
  border-radius: 1.25rem;
  background: url("/images/optbg.webp") no-repeat center / cover;
  box-sizing: border-box;
}

.azalia-wholesale-promo__eyebrow {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.azalia-wholesale-promo__title {
  max-width: 20ch;
  margin: 0 0 1rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  /* --h3-size scaled up ~1.5x, kept adaptive with the same clamp shape. */
  font-size: clamp(2.0625rem, 3.3vw, 2.8125rem);
  font-weight: 400;
  line-height: 1.2;
}

.azalia-wholesale-promo__text {
  max-width: 52ch;
  margin: 0 0 1.75rem;
  color: var(--color-text);
  opacity: .72;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.azalia-wholesale-how {
  height: 100%;
  padding: 2.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .65);
  box-shadow: 0 1rem 2.5rem rgba(58, 24, 29, .1);
  box-sizing: border-box;
}

.azalia-wholesale-how__title {
  margin: 0 0 1.75rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--h3-size);
  font-weight: 400;
}

.azalia-wholesale-step {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .5rem 0;
}

/* .azalia-benefit__icon sizes/tints for an <img>; the step icons are inline
   svg instead, so they need their own fill/stroke to pick up the same
   muted tone as the benefit icon files (#8b7d7b). */
.azalia-wholesale-step__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: #8b7d7b;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.azalia-wholesale-step__body {
  min-width: 0;
}

.azalia-wholesale-step__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .3rem;
}

.azalia-wholesale-step__num {
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
}

.azalia-wholesale-step__title {
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-lg);
  font-weight: 400;
}

.azalia-wholesale-step__text {
  margin: 0;
  color: var(--color-text);
  opacity: .65;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.azalia-wholesale-step__divider {
  margin: .25rem 0 .25rem calc(3rem + 1.25rem);
}

.azalia-wholesale-callout {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: .6rem 1.25rem .6rem .6rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .azalia-wholesale-promo {
    padding: 2rem;
  }
}

@media (max-width: 575.98px) {
  .azalia-wholesale-how {
    padding: 1.5rem 1.25rem;
  }

  .azalia-wholesale-step__divider {
    margin-left: calc(3rem + 1rem);
  }
}

/* Home benefits strip (HTML custom module in home-benefits position). */
.container-home-benefits {
  padding: 0 0 1.5rem;
  margin-top: -20px;
}

.azalia-benefits {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(var(--color-accent-rgb), .08);
  border-radius: 18px;
  background: var(--color-surface);
}

.azalia-benefits__flower {
  position: absolute;
  right: -1rem;
  bottom: -4.5rem;
  width: 13rem;
  height: auto;
  pointer-events: none;
}

.azalia-benefits__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
}

.azalia-benefit {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  padding: .25rem 1.35rem;
}

.azalia-benefit+.azalia-benefit {
  border-left: 1px solid rgba(var(--color-accent-rgb), .2);
}

/* The icon files are soft-tint-filled + stroked (see
   media/templates/site/cassiopeia_azalia/images/benefits/*.svg) so they
   carry their own visual weight already; this circle just contains them —
   plain floating outline glyphs directly on the card background is what
   read as "ugly" before. */
.azalia-benefit__icon {
  display: block;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  padding: .6rem;
  border-radius: 50%;
  background: rgba(139, 125, 123, .12);
  object-fit: contain;
  box-sizing: border-box;
}

.azalia-benefit__content {
  min-width: 0;
}

.azalia-benefit__title,
.azalia-benefit__text {
  display: block;
}

.azalia-benefit__title {
  margin: 0 0 .2rem;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: 1.25;
}

.azalia-benefit__text {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  opacity: .62;
}

/* Bootstrap gives the benefits two columns at md. Add the row divider only
   to the second row and keep the column divider between the two cards. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .azalia-benefit:nth-child(odd) {
    border-left: 0;
  }

  .azalia-benefit:nth-child(n + 3) {
    border-top: 1px solid rgba(var(--color-accent-rgb), .14);
  }
}

@media (max-width: 767.98px) {
  .azalia-category-strip {
    padding-bottom: 1rem;
  }

  .azalia-category-strip__slide {
    width: min(78vw, 300px);
  }

  .azalia-category-strip__nav--prev {
    display: none;
  }

  .azalia-category-strip__nav--next {
    right: .25rem;
  }

  .container-home-benefits {
    padding-bottom: 1rem;
  }

  .azalia-benefits {
    padding: 1rem;
  }

  .azalia-benefits__grid {
    display: flex;
  }

  .azalia-benefit {
    padding: .25rem .75rem;
  }

  .azalia-benefit+.azalia-benefit,
  .azalia-benefit:nth-child(3) {
    border-left: 0;
  }

  .azalia-benefit+.azalia-benefit {
    padding-top: .85rem;
    margin-top: .6rem;
    border-top: 1px solid rgba(var(--color-accent-rgb), .14);
  }

  .azalia-benefit__icon {
    flex-basis: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .azalia-benefit__title {
    font-size: var(--font-size-base);
  }
}

.azalia-hero {
  position: relative;
  margin: 0 10px;
}

.container-header {
  padding: 10px 0px;
  /* Cassiopeia core sets position:relative !important on this same
     selector, so a plain position:sticky here would just lose — needs
     !important to actually win. */
  position: sticky !important;
  top: 0;
  z-index: 1020;
  transition: none !important;
  /* Core's own background-color/background-image on this selector reads
     var(--cassiopeia-color-primary)/var(--cassiopeia-color-hover) — custom
     properties that are never actually defined anywhere in this project
     (only ever referenced as a fallback elsewhere), so the header has
     silently had NO background at all this whole time. Wasn't obvious
     until the header started sticking over scrolled content. Using the
     same background the rest of the site already uses instead of core's
     unrelated brand-gradient pattern. */
  background-color: var(--color-bg);
  background-image: none;
  /* Keep the header's geometry identical at the top and after scroll. A
     post-load size change is visible as a jump when the browser restores a
     deep scroll position during reload. */
  box-shadow: 0 8px 20px rgba(160, 146, 135, 0.1);
}

.divider.icon-location.icon-fw {
  display: none;
}

.breadcrumb-item+.breadcrumb-item::before {
  float: left;
  padding-right: var(--breadcrumb-item-padding-x);
  color: var(--breadcrumb-divider-color);
  content: var(--breadcrumb-divider, "-");
}

.pathway {
  text-decoration: none;
}

.container-compo {
  padding: var(--section-space-y) 0px;
}

/* Shared "page title" heading — title + rule line with an accent dot,
   the house pattern for every RadicalMart page header override (category,
   cart, checkout, personal, settings, orders, favorites, single order,
   done). Deliberately its own class, not folded into .category-title below
   — that one predates this pattern and still carries an underline-bar
   treatment used in a couple of places this wasn't asked to touch. */
.rm-page-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.rm-page-head__rule {
  position: relative;
  flex: 1 1 4rem;
  height: 1px;
  background-color: #eadbd5;
}

.rm-page-head__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  transform: translateY(-50%);
}

/* Category page heading (html/com_radicalmart/category/default.php) */

.category-title,
#RadicalMart.category-table>h1,
#RadicalMart.categories>h1,
#RadicalMart.categories-alphabetical>h1,
#RadicalMart.category-manufacturer [radicalmart-ajax="title"] {
  position: relative;
  padding-bottom: 1.1rem;
  margin-bottom: 1rem !important;
}

.category-title::after,
#RadicalMart.category-table>h1::after,
#RadicalMart.categories>h1::after,
#RadicalMart.categories-alphabetical>h1::after,
#RadicalMart.category-manufacturer [radicalmart-ajax="title"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-accent);
}

.category-subtitle {
  color: var(--color-text);
  opacity: .75;
}

/* Category page toolbar: sort dropdown + grid/list view switcher
   (html/com_radicalmart/category/default.php) — design lifted from the
   parmaled project's #RadicalMart .rm-catalog-toolbar, retoned to azalia's
   own palette, table view dropped (grid/list only). */
#RadicalMart .rm-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--color-border);
}

#RadicalMart .rm-catalog-toolbar .form-select {
  /* Bootstrap's .form-select paints its own two-tone chevron box via
     background-image on top of the native control — reads as a generic
     browser widget. appearance:none drops that entirely so this is a
     single flat pill with our own chevron, matching the rest of the
     site's controls (search box, catalog trigger, etc). */
  appearance: none;
  -webkit-appearance: none;
  min-height: 42px;
  padding: 0.65rem 2.5rem 0.65rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212529' stroke-opacity='0.55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.9rem;
  color: var(--color-text);
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color .15s;
}

#RadicalMart .rm-catalog-toolbar .form-select:hover {
  border-color: var(--color-accent);
}

#RadicalMart .rm-catalog-toolbar .form-select:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: none;
}

#RadicalMart .rm-view-switcher {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background-color: var(--color-bg);
}

.container-banner {
  margin: 0;
  display: block;
}

#RadicalMart .rm-view-switcher__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.25rem;
  padding: 0;
  color: var(--color-text);
  opacity: .5;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .2s ease, opacity .2s ease, background-color .2s ease;
}

#RadicalMart .rm-view-switcher__button+.rm-view-switcher__button {
  border-left: 1px solid var(--color-border);
}

#RadicalMart .rm-view-switcher__button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#RadicalMart .rm-view-switcher__button:hover,
#RadicalMart .rm-view-switcher__button:focus-visible,
#RadicalMart .rm-view-switcher__button.is-active {
  color: #fff;
  opacity: 1;
  background-color: var(--color-accent);
}

/* Category filter scale. The filter module's own stylesheet uses oversized
   controls (56px price fields, 42px option rows and 28px swatches), which
   makes the sidebar feel heavier than the rest of the catalog. Keep the
   module and its behavior intact; only tune its catalog-sidebar presentation
   here. */
#RadicalMart .category-filter-column .duf-vfilter {
  padding: 1.25rem 1.35rem 1.1rem;
  border-radius: 0.8rem;
  margin-bottom: 1rem;
}

#RadicalMart .category-filter-column .duf-vfilter__button {
  min-height: 2.65rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

#RadicalMart .category-filter-column .duf-vfilter__body {
  padding-bottom: 0.9rem;
}

#RadicalMart .category-filter-column .duf-vchecklist .form-check {
  min-height: 2.15rem;
}

#RadicalMart .category-filter-column .duf-vchecklist [hidden] {
  display: none !important;
}

#RadicalMart .category-filter-column .duf-vchecklist .form-check-input,
#RadicalMart .category-filter-column .rm-color-swatches__swatch {
  flex-basis: 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
}

#RadicalMart .category-filter-column .duf-vchecklist .form-check-input {
  margin-right: 0.65rem;
  box-shadow: 0 0 0 3px rgba(234, 216, 212, .2);
}

#RadicalMart .category-filter-column .duf-vchecklist .form-check-label {
  gap: 0.75rem;
  font-size: 0.9rem;
}

#RadicalMart .category-filter-column .duf-option-label__count {
  font-size: 0.75rem;
}

#RadicalMart .category-filter-column .duf-price-slider__inputs {
  gap: 0.7rem;
  margin: 0 0 0.25rem;
}

#RadicalMart .category-filter-column .duf-price-slider__field-label {
  margin: 0 0 0.4rem 0.15rem;
  color: rgba(var(--color-accent-rgb), 0.7);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#RadicalMart .category-filter-column .duf-vfilter .duf-price-slider__inputs input[type="number"] {
  height: 2.75rem;
  padding: 0 0.85rem;
  color: var(--color-text);
  background: linear-gradient(145deg, #fffdfb 0%, #fbf4f0 100%);
  border: 1px solid rgba(var(--color-accent-rgb), 0.15);
  border-radius: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(76, 24, 24, 0.04);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
  -moz-appearance: textfield;
}

#RadicalMart .category-filter-column .duf-vfilter .duf-price-slider__inputs input[type="number"]::-webkit-inner-spin-button,
#RadicalMart .category-filter-column .duf-vfilter .duf-price-slider__inputs input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#RadicalMart .category-filter-column .duf-vfilter .duf-price-slider__inputs input[type="number"]:hover {
  border-color: rgba(var(--color-accent-rgb), 0.35);
}

#RadicalMart .category-filter-column .duf-vfilter .duf-price-slider__inputs input[type="number"]:focus {
  border-color: var(--color-accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__ranges {
  height: 2rem;
  margin: 0.75rem 0 0.15rem;
  border-radius: 999px;
}

/* The module makes the range inputs transparent to pointer events and only
   enables events on the pseudo-thumb. That prevents the browser from
   capturing a drag reliably, so restore interaction on the native controls. */
#RadicalMart .dharma-filter-price-slider__range {
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__track,
#RadicalMart .category-filter-column .dharma-filter-price-slider__fill {
  height: 4px;
  box-shadow: 0 1px 2px rgba(76, 24, 24, 0.08);
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__track {
  background: #eadeda;
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__fill {
  background: linear-gradient(90deg, #8e1024 0%, var(--color-accent) 100%);
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__range::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -6.5px;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 3px #fffdfb, 0 4px 10px rgba(76, 24, 24, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 3px #fffdfb, 0 4px 10px rgba(76, 24, 24, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__range:hover::-webkit-slider-thumb,
#RadicalMart .category-filter-column .dharma-filter-price-slider__range:focus-visible::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px #fffdfb, 0 5px 13px rgba(76, 24, 24, 0.24);
}

#RadicalMart .category-filter-column .dharma-filter-price-slider__range:hover::-moz-range-thumb,
#RadicalMart .category-filter-column .dharma-filter-price-slider__range:focus-visible::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px #fffdfb, 0 5px 13px rgba(76, 24, 24, 0.24);
}

#RadicalMart .category-filter-column .duf-vfilter__actions {
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

#RadicalMart .category-filter-column .duf-vfilter__actions .duf-vfilter__btn {
  min-height: 2.65rem;
  border-radius: 0.55rem;
  font-size: 0.75rem;
}

#RadicalMart .category-filter-column .rm-color-swatches {
  gap: 0.2rem;
}

#RadicalMart .category-filter-column .rm-color-swatches__option {
  min-height: 2.15rem;
  gap: 0.65rem;
}

/* Category page — subcategory cards (RadicalMart's own default.php just
   dumps these as plain btn-outline-secondary chips; overridden in
   html/com_radicalmart/category/default.php). Image left, title + product
   count right, one grid shared with the header's catalog mega-menu look. */
.category-children {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .category-children {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .category-children {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1400px) {
  .category-children {
    grid-template-columns: repeat(4, 1fr);
  }
}

.category-children__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--color-surface);
  border-radius: 16px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

.category-children__item:hover {
  background: rgba(var(--color-accent-rgb), .06);
  color: var(--color-accent);
}

.category-children__image {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-bg);
  overflow: hidden;
}

.category-children__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-children__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.category-children__title {
  font-weight: 500;
}

.category-children__count {
  color: var(--color-text);
  opacity: .55;
  font-size: var(--font-size-sm);
}

/* plg_radicalmart_fields_color — sidebar filter checkboxes
   (RMFieldsColor_Filter_Colors). Same row shape as the other filter fields
   (label text + count, see .duf-option-label__text/__count in the
   module's own filter.css) with a color swatch added in front — the
   product page's own variant picker (RMFieldsColor_Variability) has its
   own similar-looking swatch widget (.rm-variability-swatches below),
   while the admin form still uses plain .form-check. */
.rm-color-swatches {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rm-color-swatches__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rm-color-swatches__option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 42px;
  cursor: pointer;
}

.rm-color-swatches__swatch {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: box-shadow .15s;
}

.rm-color-swatches__option .duf-option-label__text {
  flex: 1 1 auto;
}

/* Selecting a color rings just the swatch itself, not the whole row —
   the row background is left alone (unlike the other filter fields'
   .duf-vchecklist rows, which don't tint on select either, only on
   :checked's native input fill; the color field's own swatch already IS
   its own visual weight). */
.rm-color-swatches__option.is-active .rm-color-swatches__swatch {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

.container-breadcrumbs {
  background: var(--color-surface);
}

.container-breadcrumbs .breadcrumb {
  /* Bootstrap/core give the <ol> its own faint background + px-3 py-2
     padding — redundant now that the strip around it has a real
     full-width background and .container already handles the side
     padding, so this would've just doubled up as a slightly darker box
     inside the strip. */
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.azalia-hero__swiper {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
}

.azalia-hero__slide {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(30rem, 38vw, 42rem);
}

.azalia-hero__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azalia-hero__slide>.container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.azalia-hero__content {
  max-width: 35rem;
}

.azalia-hero__title {
  /* Only the first slide's title is an actual <h1> (one per page — see
     mod_azalia_slider's swiper.php); the rest render as <p> with this same
     class, so they don't pick up the global h1..h6 heading font-family
     rule. Setting it here directly keeps every slide's title on the
     heading font regardless of which tag it landed on. */
  font-family: var(--cassiopeia-font-family-headings);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.02;
  color: var(--color-text);
  margin: 0 0 1rem;
  /* Site-wide h1 { text-transform: uppercase } shouldn't touch the hero
     slider title — stays as authored in the slide's own casing. */
  text-transform: none;
}

.azalia-hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  opacity: .75;
  max-width: 40ch;
  margin: 0 0 1.75rem;
}

.azalia-hero__buttons {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* Reusable primary button (used site-wide, not just the hero). */
.knopka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  /* Cassiopeia core's .footer a:not(.btn){color:currentColor} (specificity
     0,2,1) otherwise beats this plain single-class rule (0,1,0) whenever a
     .knopka sits inside a .footer-classed ancestor, silently swapping the
     button text to whatever text color the footer has — knopka should
     always be white, everywhere, so this is a deliberate, safe override. */
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .15s, color .15s, transform .3s ease;
}

.knopka:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
}

.knopka:hover {
  background: var(--color-accent-strong);
  color: #fff !important;
  transform: scale(1.04);
}

.knopka svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767.98px) {
  .knopka {
    padding: 0.7rem 1.25rem;
    font-size: var(--font-size-sm);
  }
}

.azalia-hero__controls {
  position: absolute;
  z-index: 3;
  right: max(1.5rem, calc((100% - 1320px) / 2 + 0.75rem));
  bottom: 1.75rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
}

.azalia-hero__pagination {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--font-size-lg);
}

.azalia-hero__pagination .swiper-pagination-current {
  font-weight: 700;
  color: var(--color-text);
}

.azalia-hero__pagination .swiper-pagination-total {
  font-weight: 400;
  color: var(--color-text);
  opacity: .5;
}

.azalia-hero__pagination-sep {
  display: inline-block;
  width: 1.4em;
  height: 1px;
  background: var(--color-text);
  opacity: .35;
}

.azalia-hero__nav {
  display: flex;
  gap: 0.6rem;
  pointer-events: auto;
}

.azalia-hero__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.azalia-hero__nav-btn--next {
  background: var(--color-accent);
  color: #fff;
}

.azalia-hero__nav-btn:hover {
  background: var(--color-accent-strong);
  color: #fff;
}

.azalia-hero__nav-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 767.98px) {
  .azalia-hero__swiper {
    border-radius: 18px;
  }

  .azalia-hero__slide {
    height: clamp(30rem, 130vw, 38rem);
    align-items: center;
  }

  .azalia-hero__controls {
    bottom: 1.25rem;
  }

  .azalia-hero__subtitle {
    font-size: var(--font-size-base);
  }
}

.ar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.ar-arrow::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url('/media/templates/site/cassiopeia_azalia/images/arr.svg') center / contain no-repeat;
  mask: url('/media/templates/site/cassiopeia_azalia/images/arr.svg') center / contain no-repeat;
  transition: transform .3s ease;
}

.hero__cta:hover .ar-arrow::before {
  transform: rotate(45deg);
}

.ripple-hover {
  position: relative;
  overflow: clip;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: ripple-effect .8s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple-effect {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Core Cassiopeia gives .container-search an unconditional top margin,
   which knocked it out of line with the catalog button / icon triggers. */
.container-header .container-search {
  margin-top: 0;
  margin-right: 20px;
}

/* System success messages become quiet, short-lived toasts. Errors remain in
   the document flow so validation messages are not missed. The look
   (.azalia-toast) is unscoped so it's also reusable inline — e.g. the
   RadicalForm "message sent" alert inside #contactModal, styled via
   .azalia-toast--inline further down — only the floating position/sizing
   below stays specific to the fixed system-message toast. */
joomla-alert.azalia-toast {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: .85rem 3rem .85rem .85rem;
  overflow: hidden;
  border: 1px solid rgba(111, 4, 19, .14);
  border-radius: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
}

#system-message-container joomla-alert.azalia-toast {
  position: fixed;
  z-index: 1080;
  top: 1.25rem;
  right: max(1rem, calc((100vw - 1320px) / 2));
  width: min(calc(100vw - 2rem), 25rem);
  margin: 0;
  box-shadow: 0 1rem 2.5rem rgba(58, 24, 29, .16);
}

joomla-alert.azalia-toast .alert-heading {
  display: grid;
  flex: 0 0 2.25rem;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0 .75rem 0 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
}

joomla-alert.azalia-toast .alert-heading .success::before {
  display: block;
  content: '✓';
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

joomla-alert.azalia-toast .alert-wrapper {
  min-width: 0;
  width: auto;
}

joomla-alert.azalia-toast .alert-message {
  padding: 0;
  margin: 0;
  color: var(--color-text);
  font-size: .9rem;
  line-height: 1.4;
}

joomla-alert.azalia-toast .joomla-alert--close {
  top: 50%;
  right: .65rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.5rem;
  transform: translateY(-50%);
  transition: background-color .15s, color .15s;
}

joomla-alert.azalia-toast .joomla-alert--close:hover,
joomla-alert.azalia-toast .joomla-alert--close:focus {
  background: var(--color-surface);
  color: var(--color-accent-strong);
  opacity: 1;
}

joomla-alert.azalia-toast .joomla-alert--close:focus-visible {
  outline: 2px solid rgba(111, 4, 19, .35);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  #system-message-container joomla-alert.azalia-toast {
    top: .75rem;
    right: .75rem;
    width: calc(100vw - 1.5rem);
  }
}

/* The "message sent" alert inside #contactModal (see user.js) reuses
   .azalia-toast above for its look — just inline in the form instead of
   fixed/floating over the page. */
joomla-alert.azalia-toast.azalia-toast--inline {
  width: 100%;
  margin-top: 1rem;
}

/* mod_menu ships colored white for a dark navbar; our header is light. */
.container-menu .mod-menu {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 1.15vw, 1.5rem);
  color: var(--color-text);
  font-size: 15px;
  white-space: nowrap;
}

.container-menu .mod-menu>li>a {
  transition: color .15s;
}

.container-menu .mod-menu>li:hover>a {
  color: var(--color-accent);
}

/* Swap the oversized icon-font caret for a small masked chevron. */
.container-menu .mod-menu .icon-chevron-down {
  font-size: 0;
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.container-menu .mod-menu .icon-chevron-down::before {
  content: none;
}

/* Open on hover (and keyboard focus), instead of click-only. */
.container-menu .mod-menu .parent:hover>.mod-menu__sub,
.container-menu .mod-menu .parent:focus-within>.mod-menu__sub {
  display: block;
  animation: azaliaDropdownIn .4s ease-in;
}

.container-menu .mod-menu__sub {
  padding: 1.5rem !important;
  background-color: var(--dropdown-surface);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.container-menu .mod-menu__sub a,
.container-menu .mod-menu__sub span {
  color: var(--color-text);
}

.container-menu .mod-menu__sub a:hover {
  color: var(--color-accent);
}

@keyframes azaliaDropdownIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile burger + offcanvas menu (md and below) */

.site-header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s;
}

.site-header__burger:hover {
  background: var(--color-accent-strong);
}

.site-header__burger-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.site-header__burger-icon span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: width .3s ease, transform .3s ease;
}

.site-header__burger-icon span:nth-child(2) {
  width: 13px;
  align-self: flex-end;
}

.site-header__burger:hover .site-header__burger-icon span:nth-child(2) {
  width: 18px;
}

.site-offcanvas {
  width: min(340px, 88vw);
  background-color: var(--color-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.site-offcanvas .offcanvas-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  gap: 8px;
}

.site-offcanvas .offcanvas-header .brand-logo img {
  height: 40px;
}

.site-offcanvas__city {
  margin-top: 1rem;
}

.site-offcanvas__city .top_geo {
  margin-left: 0;
}

.site-offcanvas .offcanvas-body {
  padding: 1.25rem;
  background-color: var(--color-surface);
}

.site-offcanvas .mod-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-offcanvas .mod-menu>li {
  position: relative;
  background-color: var(--color-bg);
  border-radius: 10px;
  overflow: hidden;
}

.site-offcanvas .mod-menu>li>a,
.site-offcanvas .mod-menu>li>span {
  display: block;
  padding: 1rem 2.75rem 1rem 1.1rem;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.site-offcanvas .mod-menu>li.active>a,
.site-offcanvas .mod-menu>li.active>span,
.site-offcanvas .mod-menu>li>a:hover,
.site-offcanvas .mod-menu>li>span:hover {
  color: var(--color-accent);
}

.site-offcanvas .mod-menu__toggle-sub {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 100%;
  border: 0;
  background: none;
  color: var(--color-text);
}

/* A round backing behind the chevron so the toggle reads as a tappable
   button, not just a faint mark — the bare 8px mask was easy to miss. */
.site-offcanvas .mod-menu__toggle-sub::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--color-surface);
  transform: translate(-50%, -50%);
}

.site-offcanvas .mod-menu__toggle-sub .mod-menu__chevron-icon {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--color-text);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .2s;
  z-index: 1;
}

.site-offcanvas .mod-menu__toggle-sub[aria-expanded="true"] .mod-menu__chevron-icon {
  transform: translate(-50%, -50%) rotate(180deg);
}

.site-offcanvas .mod-menu__sub {
  margin: 0;
  padding: 0 0.5rem 0.5rem 1.1rem;
  list-style: none;
  background-color: var(--color-bg);
}

/* Cassiopeia core: .container-header .mod-menu .parent > ul { display: none; }
   (specificity 0,3,1) — it's meant to hide the desktop dropdown by default,
   but matches our offcanvas instance too since both live inside
   .container-header. It permanently overrides Bootstrap's .collapse.show,
   so the submenu never actually became visible even though the JS toggle
   itself was working correctly (aria-expanded and the .show class were
   both changing). Beat it with higher specificity, scoped to .show only. */
.container-header .site-offcanvas .mod-menu .parent>.mod-menu__sub.show {
  display: block;
}

.site-offcanvas .mod-menu__sub a {
  display: block;
  padding: 0.6rem 0.5rem;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

/* Cassiopeia core sets .container-header .mod-menu .mod-menu__sub a to
   white below 992px (for its own dark dropdown) — 3 classes vs our 2, so
   it wins on specificity regardless of load order. Match it with the same
   specificity (the offcanvas really is inside .container-header) instead
   of reaching for !important. This was making the submenu text invisible
   (white on our light background) even though it was expanding correctly. */
.container-header .site-offcanvas .mod-menu__sub a {
  color: var(--color-text);
}

.container-header .site-offcanvas .mod-menu__sub a:hover {
  color: var(--color-accent);
}

/* Header icon triggers (login / favorites / cart) */

.rm-icon-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  cursor: pointer;
}

/* Labels take up a lot of width on narrow screens; shrink instead of hiding. */
.rm-icon-trigger__label {
  font-size: 0.6rem;
}

@media (min-width: 992px) {
  .rm-icon-trigger__label {
    font-size: inherit;
  }
}

.rm-icon-trigger:hover {
  color: var(--color-accent);
}

.azalia-account-menu__trigger {
  max-width: 8rem;
}

#RadicalMart.rm-done {
  --azalia-done-muted: #8b7d7b;
  --azalia-done-line: #eadbd5;
  --azalia-done-surface: #fffdfb;
  padding-block: 2rem 3.5rem;
}

#RadicalMart.rm-done .rm-done__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

#RadicalMart.rm-done .rm-done__aside {
  position: sticky;
  top: 6rem;
  min-width: 0;
}

#RadicalMart.rm-done .rm-done__hero,
#RadicalMart.rm-done .rm-done-products,
#RadicalMart.rm-done .rm-done-summary {
  border: 1px solid var(--azalia-done-line);
  border-radius: 1.2rem;
  background: var(--azalia-done-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
}

#RadicalMart.rm-done .rm-done__hero {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
}

#RadicalMart.rm-done .rm-done__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(var(--color-accent-rgb), .2);
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent);
}

#RadicalMart.rm-done .rm-done__mark svg {
  width: 2.45rem;
  height: 2.45rem;
  overflow: visible;
}

#RadicalMart.rm-done .rm-done__mark circle,
#RadicalMart.rm-done .rm-done__mark path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.75;
}

#RadicalMart.rm-done .rm-done__hero-content {
  min-width: 0;
}

#RadicalMart.rm-done .rm-done__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#RadicalMart.rm-done .rm-done__eyebrow::before {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#RadicalMart.rm-done .rm-done__title {
  margin: .45rem 0 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.04;
  text-transform: none;
}

#RadicalMart.rm-done .rm-done__text {
  max-width: 42rem;
  margin: .85rem 0 1.2rem;
  color: var(--azalia-done-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#RadicalMart.rm-done .rm-done__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

#RadicalMart.rm-done .rm-done__actions .knopka {
  justify-content: center;
  min-height: 2.75rem;
  padding: .7rem 1.1rem;
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-done .rm-done__actions .knopka2 {
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
}

#RadicalMart.rm-done .rm-done__actions .knopka2:hover,
#RadicalMart.rm-done .rm-done__actions .knopka2:focus-visible {
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent-strong);
}

#RadicalMart.rm-done .rm-done-products {
  overflow: hidden;
}

#RadicalMart.rm-done .rm-done-products__head,
#RadicalMart.rm-done .rm-done-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#RadicalMart.rm-done .rm-done-products__head {
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--azalia-done-line);
  background: var(--color-surface);
}

#RadicalMart.rm-done .rm-done-products__head h2,
#RadicalMart.rm-done .rm-done-summary__head h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

#RadicalMart.rm-done .rm-done-products__head span,
#RadicalMart.rm-done .rm-done-summary__head>span {
  color: var(--azalia-done-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

#RadicalMart.rm-done .rm-done-product {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.35rem;
}

#RadicalMart.rm-done .rm-done-product+.rm-done-product {
  border-top: 1px solid var(--azalia-done-line);
}

#RadicalMart.rm-done .rm-done-product__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  overflow: hidden;
  border: 1px solid var(--azalia-done-line);
  border-radius: .85rem;
  background: var(--color-surface);
}

#RadicalMart.rm-done .rm-done-product__image-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#RadicalMart.rm-done .rm-done-product__main {
  min-width: 0;
}

#RadicalMart.rm-done .rm-done-product__category {
  margin-bottom: .2rem;
  color: var(--color-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#RadicalMart.rm-done .rm-done-product__title {
  display: block;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.2;
  text-decoration: none;
}

#RadicalMart.rm-done .rm-done-product__title:hover {
  color: var(--color-accent);
}

#RadicalMart.rm-done .rm-done-product__extras {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
  color: var(--azalia-done-muted);
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-done .rm-done-product__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  text-align: right;
}

#RadicalMart.rm-done .rm-done-product__right span {
  color: var(--azalia-done-muted);
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-done .rm-done-product__right strong {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: 700;
  white-space: nowrap;
}

#RadicalMart.rm-done .rm-done-summary {
  padding: 1.35rem;
}

#RadicalMart.rm-done .rm-done-summary__head {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--azalia-done-line);
}

#RadicalMart.rm-done .rm-done-summary__body,
#RadicalMart.rm-done .rm-done-summary__total {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

#RadicalMart.rm-done .rm-done-summary__body {
  padding: 1rem 0;
  border-bottom: 1px solid var(--azalia-done-line);
}

#RadicalMart.rm-done .rm-cart-summary__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1rem, 1fr) auto;
  align-items: baseline;
  gap: .45rem;
  color: var(--azalia-done-muted);
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-done .rm-cart-summary__row::after {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: .25rem;
  border-bottom: 1px dotted rgba(139, 125, 123, .55);
  content: "";
}

#RadicalMart.rm-done .rm-cart-summary__row>* {
  position: relative;
  z-index: 1;
  background: var(--azalia-done-surface);
}

#RadicalMart.rm-done .rm-cart-summary__row> :first-child {
  grid-column: 1;
}

#RadicalMart.rm-done .rm-cart-summary__row> :last-child {
  grid-column: 3;
  text-align: right;
}

#RadicalMart.rm-done .rm-done-summary__body strong {
  color: var(--color-text);
  font-weight: 600;
}

#RadicalMart.rm-done .rm-done-summary__body strong small {
  display: block;
  max-width: 14rem;
  margin-top: .2rem;
  color: var(--azalia-done-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.35;
}

#RadicalMart.rm-done .rm-done-summary__status {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), .09);
  color: var(--color-accent) !important;
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-done .rm-done-summary__total {
  padding-top: 1rem;
}

#RadicalMart.rm-done .rm-done-summary__total .rm-cart-summary__row--discount {
  color: var(--color-accent);
}

#RadicalMart.rm-done .rm-done-summary__total .rm-cart-summary__row--total {
  padding-top: 1rem;
  border-top: 1px solid var(--azalia-done-line);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

#RadicalMart.rm-done .rm-done-summary__total .rm-cart-summary__row--total::after {
  display: none;
}

#RadicalMart.rm-done .rm-done-summary__total .rm-cart-summary__row--total strong {
  color: var(--color-accent);
  font-size: 1.55rem;
  line-height: 1.1;
}

#RadicalMart.rm-done .rm-done-summary__pay {
  margin-top: 1.15rem;
}

#RadicalMart.rm-done .rm-done-summary__pay .knopka {
  justify-content: center;
  width: 100%;
}

#RadicalMart.rm-done .rm-done-summary__hint {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--azalia-done-line);
  color: var(--azalia-done-muted);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

#RadicalMart.rm-done .rm-done-summary__hint svg {
  flex: 0 0 auto;
  margin-top: .1rem;
  color: var(--color-accent);
}

@media (max-width: 991.98px) {
  #RadicalMart.rm-done .rm-done__aside {
    position: static;
  }
}

@media (max-width: 575.98px) {
  #RadicalMart.rm-done {
    padding-block: 1.25rem 2.5rem;
  }

  #RadicalMart.rm-done .rm-done__hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  #RadicalMart.rm-done .rm-done__title {
    font-size: 2.25rem;
  }

  #RadicalMart.rm-done .rm-done__actions {
    flex-direction: column;
    width: 100%;
  }

  #RadicalMart.rm-done .rm-done__actions .knopka {
    width: 100%;
  }

  #RadicalMart.rm-done .rm-done-products__head,
  #RadicalMart.rm-done .rm-done-product,
  #RadicalMart.rm-done .rm-done-summary {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  #RadicalMart.rm-done .rm-done-product {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: .75rem;
  }

  #RadicalMart.rm-done .rm-done-product__image {
    width: 4rem;
    height: 4rem;
  }

  #RadicalMart.rm-done .rm-done-product__right {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }

  #RadicalMart.rm-done .rm-cart-summary__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #RadicalMart.rm-done .rm-cart-summary__row::after {
    display: none;
  }

  #RadicalMart.rm-done .rm-cart-summary__row> :last-child {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  #RadicalMart.rm-done .knopka {
    transition: none;
  }
}

/* Cart add notification: a compact product toast instead of RadicalMart's
   generic Bootstrap toast, matching the Azalia cart drawer. */
@keyframes azalia-cart-toast-in {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes azalia-cart-toast-out {
  to {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
  }
}

@keyframes azalia-cart-toast-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.azalia-cart-toast {
  position: fixed;
  z-index: 1090;
  top: 1.5rem;
  right: 1.5rem;
  width: min(calc(100vw - 2.5rem), 22rem);
  overflow: hidden;
  border: 1px solid #eadbd5;
  border-radius: 1rem;
  background: var(--dropdown-surface);
  box-shadow: 0 16px 36px rgba(var(--color-accent-rgb), .16);
  animation: azalia-cart-toast-in .28s ease-out both;
}

.azalia-cart-toast.is-leaving {
  animation: azalia-cart-toast-out .22s ease-in both;
}

.azalia-cart-toast__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid #eadbd5;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.azalia-cart-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent);
}

.azalia-cart-toast__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.azalia-cart-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #a68f8d;
  font-size: 1.35rem;
  line-height: 1;
}

.azalia-cart-toast__close:hover,
.azalia-cart-toast__close:focus-visible {
  border-color: #eadbd5;
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent);
}

.azalia-cart-toast__body {
  display: flex;
  gap: .75rem;
  padding: .8rem;
}

.azalia-cart-toast__image {
  display: flex;
  flex: 0 0 4rem;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border: 1px solid #eadbd5;
  border-radius: .75rem;
  background: var(--color-surface);
}

.azalia-cart-toast__image-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.azalia-cart-toast__content {
  min-width: 0;
  flex: 1 1 auto;
}

.azalia-cart-toast__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-base);
  line-height: 1.25;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.azalia-cart-toast__title:hover {
  color: var(--color-accent);
}

.azalia-cart-toast__details {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .45rem;
  color: #8b7d7b;
  font-size: var(--font-size-xs);
  line-height: 1.3;
}

.azalia-cart-toast__details strong {
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  white-space: nowrap;
}

.azalia-cart-toast__progress {
  height: .2rem;
  background: var(--color-accent);
  transform-origin: left;
  animation: azalia-cart-toast-progress linear both;
}

@media (max-width: 575.98px) {
  .azalia-cart-toast {
    top: 1rem;
    right: 1rem;
    width: min(calc(100vw - 2rem), 22rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .azalia-cart-toast,
  .azalia-cart-toast.is-leaving,
  .azalia-cart-toast__progress {
    animation: none;
  }
}

/* Самовывоз RadicalMart: склады и карта. */
#RadicalMart .rm-pickup {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr);
  gap: 1rem;
}

#RadicalMart .rm-pickup__map {
  min-height: 14rem;
  overflow: hidden;
  border: 1px solid rgba(var(--color-accent-rgb), .18);
  border-radius: 1rem;
  background: var(--color-surface);
}

#RadicalMart .rm-pickup__map iframe {
  display: block;
  width: 100%;
  min-height: 14rem;
  height: 100%;
  border: 0;
}

#RadicalMart .rm-pickup__list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-height: 22rem;
  overflow-y: auto;
}

#RadicalMart .rm-pickup__item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .9rem;
  border: 1px solid rgba(var(--color-accent-rgb), .16);
  border-radius: .85rem;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

#RadicalMart .rm-pickup__item:hover,
#RadicalMart .rm-pickup__item--active {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .045);
  box-shadow: 0 6px 18px rgba(var(--color-accent-rgb), .08);
}

#RadicalMart .rm-pickup__item-radio {
  position: relative;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  border: 1px solid rgba(var(--color-accent-rgb), .36);
  border-radius: 50%;
}

#RadicalMart .rm-pickup__item--active .rm-pickup__item-radio {
  border-color: var(--color-accent);
}

#RadicalMart .rm-pickup__item--active .rm-pickup__item-radio::after {
  position: absolute;
  inset: .2rem;
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
}

#RadicalMart .rm-pickup__item-content {
  min-width: 0;
}

#RadicalMart .rm-pickup__item-title {
  color: var(--color-accent);
  font-size: .95rem;
  font-weight: 700;
}

#RadicalMart .rm-pickup__item-address {
  margin-top: .15rem;
  font-size: .875rem;
}

#RadicalMart .rm-pickup__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .85rem;
  margin-top: .45rem;
}

#RadicalMart .rm-pickup__item-meta-row {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: rgba(var(--color-text-rgb), .66);
  font-size: .75rem;
}

#RadicalMart .rm-pickup__item-meta-row svg {
  flex: 0 0 auto;
  color: var(--color-accent);
}

#RadicalMart .rm-pickup__item-meta-row--note {
  font-style: italic;
}

@media (max-width: 767.98px) {
  #RadicalMart .rm-pickup {
    grid-template-columns: 1fr;
  }

  #RadicalMart .rm-pickup__map {
    order: 0;
  }

  #RadicalMart .rm-pickup__list {
    order: 1;
    max-height: none;
  }
}

/* RadicalMart cart page. Structure follows ParmaLED; values are Azalia. */
#RadicalMart.rm-cart .rm-cart__subtitle {
  max-width: 54rem;
  margin: 0 0 2rem;
}

#RadicalMart.rm-cart .rm-cart__items {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

#RadicalMart.rm-cart .cart-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  background: var(--dropdown-surface);
  box-shadow: 0 8px 22px rgba(111, 4, 19, .045);
  transition: border-color .2s ease, box-shadow .2s ease;
}

#RadicalMart.rm-cart .cart-item:hover {
  border-color: rgba(var(--color-accent-rgb), .28);
  box-shadow: 0 12px 28px rgba(111, 4, 19, .08);
}

#RadicalMart.rm-cart .cart-item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 7.25rem;
  width: 7.25rem;
  height: 7.25rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: .85rem;
  background: var(--color-surface);
}

#RadicalMart.rm-cart .cart-item__image-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#RadicalMart.rm-cart .cart-item__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 7.25rem;
  padding: .15rem 2rem .1rem .1rem;
}

#RadicalMart.rm-cart .cart-item__category {
  display: block;
  margin-bottom: .35rem;
  color: var(--color-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

#RadicalMart.rm-cart .cart-item__category:hover,
#RadicalMart.rm-cart .cart-item__title:hover {
  color: var(--color-accent-strong);
}

#RadicalMart.rm-cart .cart-item__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.18;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#RadicalMart.rm-cart .cart-item__extras {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .65rem;
}

#RadicalMart.rm-cart .cart-item__extra {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), .07);
  color: var(--color-accent-strong);
  font-size: .72rem;
  line-height: 1.35;
}

#RadicalMart.rm-cart .cart-item__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: .8rem;
}

#RadicalMart.rm-cart .cart-quantity {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--az-cart-border, rgba(var(--color-accent-rgb), .22));
  border-radius: .55rem;
  background: var(--az-cart-surface, var(--color-bg));
}

#RadicalMart.rm-cart .cart-quantity__button,
#RadicalMart.rm-cart .cart-quantity__input {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

#RadicalMart.rm-cart .cart-quantity__button {
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

#RadicalMart.rm-cart .cart-quantity__button:hover,
#RadicalMart.rm-cart .cart-quantity__button:focus-visible {
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent-strong);
}

#RadicalMart.rm-cart .cart-quantity__input {
  width: 2rem;
  border-right: 0;
  border-left: 0;
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}

#RadicalMart.rm-cart .cart-quantity__input::-webkit-outer-spin-button,
#RadicalMart.rm-cart .cart-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#RadicalMart.rm-cart .cart-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--color-text);
  line-height: 1.2;
  text-align: right;
}

#RadicalMart.rm-cart .cart-item__unit-price {
  margin-bottom: .2rem;
  color: #8b7d7b;
  font-size: .76rem;
  white-space: nowrap;
}

#RadicalMart.rm-cart .cart-item__discount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  margin-bottom: .2rem;
  color: #a68f8d;
  font-size: .72rem;
  line-height: 1.15;
  white-space: nowrap;
}

#RadicalMart.rm-cart .cart-item__discount s {
  text-decoration-thickness: 1px;
}

#RadicalMart.rm-cart .cart-item__discount-value {
  color: var(--color-accent);
}

#RadicalMart.rm-cart .cart-item__price strong {
  color: var(--color-accent);
  font-size: 1.15rem;
}

#RadicalMart.rm-cart .cart-item__remove {
  position: absolute;
  top: .85rem;
  right: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a68f8d;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

#RadicalMart.rm-cart .cart-item__remove svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

#RadicalMart.rm-cart .cart-item__remove:hover,
#RadicalMart.rm-cart .cart-item__remove:focus-visible {
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent);
  transform: rotate(90deg);
}

#RadicalMart.rm-cart .rm-cart__item--out {
  opacity: .58;
}

#RadicalMart.rm-cart .rm-cart__item--error {
  border-color: #c65b63;
}

#RadicalMart.rm-cart .rm-cart__item-message {
  margin-top: .5rem;
  color: #a33a46;
  font-size: .8rem;
}

#RadicalMart.rm-cart .rm-cart-summary {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1.1rem;
  background: var(--color-surface);
  box-shadow: 0 10px 26px rgba(111, 4, 19, .06);
}

#RadicalMart.rm-cart .rm-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  color: #8b7d7b;
  font-size: .9rem;
}

#RadicalMart.rm-cart .rm-cart-summary__row--discount {
  color: var(--color-accent);
}

/* "До скидки" gets a strikethrough once any discount applies (item-level
   and/or wholesale), same convention as the product price block's own
   base/final pair — otherwise the row just looked like a second, unrelated
   number sitting above "Скидка" instead of the price being discounted
   from. */
#RadicalMart.rm-cart .rm-cart-summary__base--discounted {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Wholesale discount panel — reuses .rm-wholesale-box (same component as
   the product page/card badge) instead of a plain text row, so a
   qualifying cart doesn't just show a number but the full "why": label,
   discounted amount and the "при заказе от N" threshold that earned it.
   The amount is already folded into total.discount (final gets reduced by
   it directly, see the plugin's onRadicalMartGetCartTotal hook) — this
   panel is a breakdown of that "Скидка" figure, not an extra deduction. */
#RadicalMart.rm-cart .rm-cart-summary__wholesale {
  margin: -0.15rem 0 0.2rem;
}

#RadicalMart.rm-cart .rm-cart-summary__row--total {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
}

#RadicalMart.rm-cart .rm-cart-summary__row--total strong {
  color: var(--color-accent);
  font-size: 1.55rem;
}

#RadicalMart.rm-cart .rm-cart-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .35rem;
  text-align: center;
}

#RadicalMart.rm-cart .rm-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 5rem 1.5rem;
  text-align: center;
}

#RadicalMart.rm-cart .rm-cart__empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  fill: none;
  stroke: rgba(var(--color-accent-rgb), .55);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

#RadicalMart.rm-cart .rm-cart__empty-title {
  margin: 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  text-transform: none;
}

#RadicalMart.rm-cart .rm-cart__empty-text {
  max-width: 34rem;
  margin: 0 0 .75rem;
  color: #8b7d7b;
}

@media (max-width: 767.98px) {
  #RadicalMart.rm-cart .cart-item {
    gap: .75rem;
    padding: .85rem;
  }

  #RadicalMart.rm-cart .cart-item__image {
    flex-basis: 5.25rem;
    width: 5.25rem;
    height: 5.25rem;
  }

  #RadicalMart.rm-cart .cart-item__content {
    min-height: 5.25rem;
    padding-right: 1.5rem;
  }

  #RadicalMart.rm-cart .cart-item__title {
    font-size: 1.05rem;
  }

  #RadicalMart.rm-cart .cart-item__bottom {
    align-items: flex-end;
    gap: .5rem;
  }

  #RadicalMart.rm-cart .cart-item__unit-price {
    display: none;
  }

  #RadicalMart.rm-cart .rm-cart-summary {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {

  #RadicalMart.rm-cart .cart-item,
  #RadicalMart.rm-cart .cart-quantity__button,
  #RadicalMart.rm-cart .cart-item__remove {
    transition: none;
  }
}

/* Keep the account label compact even when the name is long in other states. */
.azalia-account-menu__trigger .rm-icon-trigger__label {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-icon-trigger__icon-wrap {
  position: relative;
  display: inline-flex;
}

.rm-icon-trigger__icon {
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Login module modal */

.azalia-login-modal {
  --login-surface: var(--dropdown-surface);
  --login-soft: #f8f3ef;
  --login-line: #eadeda;
  --login-muted: #827b80;
}

.azalia-login-modal .modal-dialog {
  width: min(100% - 2rem, 620px);
  max-width: 620px;
}

.azalia-login-modal .modal-content {
  overflow: hidden;
  border: 1px solid rgba(111, 4, 19, .1);
  border-radius: 1.25rem;
  background: var(--login-surface);
  box-shadow: 0 1.5rem 4rem rgba(58, 24, 29, .2);
}

.azalia-login-modal .modal-header {
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--login-line);
  background:
    radial-gradient(circle at 0 0, rgba(232, 198, 190, .34), transparent 42%),
    var(--login-surface);
}

.azalia-login-modal__heading {
  min-width: 0;
}

.azalia-login-modal__kicker {
  display: block;
  margin-bottom: .5rem;
  color: var(--color-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.azalia-login-modal .modal-title {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  font-weight: 400;
  line-height: 1.1;
}

.azalia-login-modal .modal-title>.collapse,
.azalia-login-modal__lead>.collapse {
  display: none;
}

.azalia-login-modal .modal-title>.collapse.show,
.azalia-login-modal__lead>.collapse.show {
  display: block;
}

.azalia-login-modal__lead {
  max-width: 28rem;
  margin: .65rem 0 0;
  color: var(--login-muted);
  font-size: .95rem;
  line-height: 1.45;
}

.azalia-login-modal .btn-close {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: .1rem 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--login-soft);
  opacity: 1;
  transition: transform .25s ease, background-color .15s;
}

.azalia-login-modal .btn-close:hover,
.azalia-login-modal .btn-close:focus {
  background-color: #f0e5e1;
  transform: rotate(90deg);
}

.azalia-login-modal .btn-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(111, 4, 19, .12);
}

.azalia-login-modal .modal-body {
  padding: 1.75rem 2rem 2rem;
}

.azalia-login-form__fields {
  display: grid;
  gap: 1rem;
}

.azalia-login-form__fields .control-group {
  margin: 0;
}

.azalia-login-form__fields .azalia-login-field .controls {
  position: relative;
}

.azalia-login-form__fields .azalia-login-field .controls::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.azalia-login-form__fields .azalia-login-field--person .controls::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.25'/%3E%3Cpath d='M5 20c.7-3.5 3.1-5.4 7-5.4s6.3 1.9 7 5.4'/%3E%3C/svg%3E");
}

.azalia-login-form__fields .azalia-login-field--email .controls::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.azalia-login-form__fields .azalia-login-field--phone .controls::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 3.8 9.8 6a1.5 1.5 0 0 1 .3 1.9L8.9 10a14.7 14.7 0 0 0 5.1 5.1l2.1-1.2a1.5 1.5 0 0 1 1.9.3l2.2 2.6a1.6 1.6 0 0 1-.1 2.2l-1.5 1.5c-.6.6-1.5.8-2.3.5C9.5 18.8 5.2 14.5 3 8.2c-.3-.8-.1-1.7.5-2.3L5 4.4a1.6 1.6 0 0 1 2.2-.1Z'/%3E%3C/svg%3E");
}

.azalia-login-form__fields .azalia-login-field--password .controls::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* No icon for a plain comment textarea, so the base 3.15rem icon gutter
   (set right below, for every .controls>.form-control) needs resetting back
   to a plain padding — same pill border/radius otherwise. */
.azalia-login-form__fields .azalia-login-field--comment .controls>.form-control {
  padding-left: 1.15rem;
  min-height: 5.5rem;
  resize: vertical;
}

.azalia-login-form__fields .control-label {
  margin-bottom: .45rem;
  padding: 0;
}

.azalia-login-form__fields .control-label label {
  color: var(--color-text);
  font-size: .82rem;
  font-weight: 600;
}

.azalia-login-form__fields .controls>.form-control,
.azalia-login-form__fields .controls>.input-group,
.azalia-login-form__fields .controls>.password-group {
  width: 100%;
}

.azalia-login-form__fields .controls>.form-control,
.azalia-login-form__fields .password-group .form-control,
.azalia-login-form__fields input[name*="[username]"] {
  padding-left: 3.15rem;
  min-height: 3.1rem;
  border: 1px solid var(--login-line);
  border-radius: 1rem;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
}

.azalia-login-form__fields input[name*="[username]"],
.azalia-login-form__fields input[name$="[first_name]"],
.azalia-login-form__fields input[name$="[second_name]"],
.azalia-login-form__fields input[name$="[last_name]"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.25'/%3E%3Cpath d='M5 20c.7-3.5 3.1-5.4 7-5.4s6.3 1.9 7 5.4'/%3E%3C/svg%3E");
}

.azalia-login-form__fields input[name$="[email]"],
.azalia-login-form__fields input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.azalia-login-form__fields input[name$="[phone]"],
.azalia-login-form__fields input[name="phone"],
.azalia-login-form__fields input[type="tel"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 3.8 9.8 6a1.5 1.5 0 0 1 .3 1.9L8.9 10a14.7 14.7 0 0 0 5.1 5.1l2.1-1.2a1.5 1.5 0 0 1 1.9.3l2.2 2.6a1.6 1.6 0 0 1-.1 2.2l-1.5 1.5c-.6.6-1.5.8-2.3.5C9.5 18.8 5.2 14.5 3 8.2c-.3-.8-.1-1.7.5-2.3L5 4.4a1.6 1.6 0 0 1 2.2-.1Z'/%3E%3C/svg%3E");
}

.azalia-login-form__fields input[name$="[password]"],
.azalia-login-form__fields input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.azalia-login-form__fields input {
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.15rem 1.15rem;
}

.azalia-login-form__fields input::placeholder {
  color: var(--login-muted);
  opacity: .7;
}

.azalia-login-form__fields input:autofill,
.azalia-login-form__fields input:-webkit-autofill,
.azalia-login-form__fields input:-webkit-autofill:hover,
.azalia-login-form__fields input:-webkit-autofill:focus,
.azalia-login-form__fields input:-webkit-autofill:active {
  background-color: #fff !important;
  -webkit-text-fill-color: var(--color-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: var(--color-text);
}

.azalia-login-form__fields .controls>.form-control:focus,
.azalia-login-form__fields .password-group .form-control:focus,
.azalia-login-form__fields input[name*="[username]"]:focus {
  border-color: rgba(111, 4, 19, .48);
  box-shadow: 0 0 0 .2rem rgba(111, 4, 19, .1);
}

.azalia-login-form__fields .password-group .input-group {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.azalia-login-form__fields .password-group,
.azalia-login-form__fields .password-group .input-group {
  max-width: none;
}

.azalia-login-form__fields .password-group .input-group .form-control {
  padding-left: 3.15rem;
  width: 100%;
  border-radius: 1rem 0 0 1rem;
}

.azalia-login-form__fields .password-group .input-password-toggle {
  min-width: 3.1rem;
  border: 1px solid var(--login-line);
  border-left: 0;
  border-radius: 0 1rem 1rem 0;
  background: #fff;
  color: var(--login-muted);
}

.azalia-login-form__fields .password-group .input-password-toggle:hover,
.azalia-login-form__fields .password-group .input-password-toggle:focus {
  background: var(--login-soft);
  color: var(--color-accent);
}

.azalia-login-form__fields .form-text,
.azalia-login-form__fields .text-muted {
  color: var(--login-muted) !important;
  font-size: .8rem;
}

.azalia-login-form__error {
  margin-bottom: 1rem;
  border: 0;
  border-radius: .7rem;
  background: #f8e9e2;
  color: var(--color-accent-strong);
  font-size: .85rem;
}

.azalia-registration-success {
  padding: 1.25rem;
  border: 1px solid var(--login-line);
  border-radius: 1rem;
  background: var(--login-soft);
  text-align: center;
}

.azalia-registration-success__mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.azalia-registration-success__title {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
}

.azalia-registration-success__text,
.azalia-registration-success__note {
  max-width: 30rem;
  margin: .75rem auto 0;
  color: var(--color-text);
  line-height: 1.5;
}

.azalia-registration-success__note {
  color: var(--login-muted);
  font-size: .85rem;
}

.azalia-registration-success__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3rem;
  margin-top: 1.25rem;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-weight: 600;
}

.azalia-registration-success__button span {
  font-size: 1.2em;
  line-height: 1;
}

.azalia-login-form__question {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-radius: .8rem;
  background: var(--login-soft);
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
}

.azalia-login-form__question-actions {
  display: flex;
  justify-content: center;
  gap: .6rem;
}

.azalia-login-form__question-actions .btn {
  min-width: 6.5rem;
  border-radius: 999px;
  font-weight: 600;
}

.azalia-login-form__question-actions .btn-primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.azalia-login-form__question-actions .btn-primary:hover,
.azalia-login-form__question-actions .btn-primary:focus {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
  color: #fff;
}

.azalia-login-form__question-actions .btn-secondary {
  border-color: var(--login-line);
  background: #fff;
  color: var(--color-text);
}

.azalia-login-form__question-actions .btn-secondary:hover,
.azalia-login-form__question-actions .btn-secondary:focus {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.azalia-registration-consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 1.25rem;
  color: var(--login-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.azalia-registration-consent .form-check-input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: .1rem 0 0;
  border-color: #d8c5c0;
  border-radius: .3rem;
  box-shadow: none;
}

.azalia-registration-consent .form-check-input:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.azalia-registration-consent .form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .2rem rgba(111, 4, 19, .12);
}

.azalia-registration-consent .form-check-input:invalid {
  border-color: #c98e8e;
}

.azalia-registration-consent label {
  cursor: pointer;
}

.azalia-registration-consent a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.azalia-registration-consent a:hover {
  color: var(--color-accent);
}

.azalia-login-field label {
  display: block;
  margin-bottom: .45rem;
  color: var(--color-text);
  font-size: .82rem;
  font-weight: 600;
}

.azalia-login-field .form-control {
  min-height: 3.1rem;
  border: 1px solid var(--login-line);
  border-radius: .7rem;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
}

.azalia-login-field .form-control::placeholder {
  color: var(--login-muted);
  opacity: .68;
}

.azalia-login-field .form-control:focus {
  border-color: rgba(111, 4, 19, .48);
  box-shadow: 0 0 0 .2rem rgba(111, 4, 19, .1);
}

.azalia-login-password-wrap {
  position: relative;
}

.azalia-login-password-wrap .form-control {
  padding-right: 3.25rem;
}

.azalia-login-password-toggle {
  position: absolute;
  top: 50%;
  right: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--login-muted);
  transform: translateY(-50%);
}

.azalia-login-password-toggle:hover,
.azalia-login-password-toggle:focus {
  color: var(--color-accent);
}

.azalia-login-password-toggle:focus-visible {
  outline: 2px solid rgba(111, 4, 19, .32);
  outline-offset: 2px;
}

.azalia-login-form__remember {
  margin-top: 1rem;
  color: var(--login-muted);
  font-size: .85rem;
}

.azalia-login-form__remember .form-check-input {
  border-color: #d8c5c0;
}

.azalia-login-form__remember .form-check-input:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.azalia-login-form__extra {
  margin-top: 1rem;
}

.azalia-login-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 3.1rem;
  margin-top: 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-accent);
  font-weight: 600;
}

.azalia-login-form__submit:hover,
.azalia-login-form__submit:focus {
  background: var(--color-accent-strong);
}

.azalia-login-form__submit span {
  font-size: 1.2em;
  line-height: 1;
}

.azalia-login-form__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1rem;
  margin-top: 1.25rem;
  font-size: .82rem;
  line-height: 1.4;
}

.azalia-login-form__links a {
  color: var(--login-muted);
}

.azalia-login-form__links a:hover {
  color: var(--color-accent);
}

.azalia-login-form__pretext,
.azalia-login-form__posttext {
  margin-bottom: 1rem;
  color: var(--login-muted);
  font-size: .9rem;
  line-height: 1.5;
}

.azalia-login-form__posttext {
  margin: 1rem 0 0;
}

/* Full login page: a quieter editorial layout for B2B customers. */
.azalia-login-page {
  --login-soft: #f8f3ef;
  --login-line: #eadeda;
  max-width: 68rem;
  margin: 0 auto;
}

.azalia-login-page__head {
  margin-bottom: 2rem;
}

.azalia-login-page__layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.82fr) minmax(20rem, 1.18fr);
  gap: clamp(1.25rem, 3vw, 3.25rem);
  align-items: stretch;
}

.azalia-login-page__intro {
  position: relative;
  display: flex;
  min-height: 31rem;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(var(--color-accent-rgb), 0.12);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255, 253, 251, 0.08), rgba(111, 4, 19, 0.12)),
    url("/images/flowers-right.webp") no-repeat right bottom / 88% auto,
    var(--color-surface);
}

.azalia-login-page__eyebrow {
  display: block;
  color: var(--color-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

.azalia-login-page__intro-title {
  max-width: 16rem;
  margin: 0.65rem 0 0.9rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(1.75rem, 3.2vw, 2.65rem);
  font-weight: 400;
  line-height: 1.08;
}

.azalia-login-page__intro-text {
  max-width: 20rem;
  margin: 0;
  color: #716968;
  font-size: 0.95rem;
  line-height: 1.6;
}

.azalia-login-page__note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2rem;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 600;
}

.azalia-login-page__note-mark {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  border-radius: 50%;
  font-size: 0.9rem;
}

.azalia-login-page__panel {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(var(--color-accent-rgb), 0.13);
  border-radius: 1.25rem;
  background: var(--dropdown-surface);
  box-shadow: 0 1.25rem 3rem rgba(74, 33, 27, 0.07);
}

.azalia-login-page__form-heading {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.12);
}

.azalia-login-page__form-heading p {
  max-width: 26rem;
  margin: 0.65rem 0 0;
  color: #827b80;
  font-size: 0.92rem;
  line-height: 1.5;
}

.azalia-login-page__description {
  margin-top: 1.25rem;
  color: #827b80;
  font-size: 0.88rem;
  line-height: 1.5;
}

.azalia-login-page__description img {
  display: block;
  max-width: 100%;
  margin-top: 1rem;
  border-radius: 0.75rem;
}

.azalia-login-page .com-users-login__form {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.azalia-login-page .com-users-login__form fieldset {
  padding: 0;
}

.azalia-login-page .com-users-login__input .control-group {
  margin: 0 0 1rem;
}

.azalia-login-page .com-users-login__input .control-label {
  margin-bottom: 0.45rem;
}

.azalia-login-page .com-users-login__input .control-label label {
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 600;
}

.azalia-login-page .com-users-login__input .controls .form-control {
  min-height: 3.25rem;
  border: 1px solid var(--login-line);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
}

.azalia-login-page .com-users-login__input .controls .form-control:focus {
  border-color: rgba(var(--color-accent-rgb), 0.48);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-rgb), 0.1);
}

.azalia-login-page .password-group .input-group .form-control {
  border-radius: 0.75rem 0 0 0.75rem;
}

.azalia-login-page .password-group .input-password-toggle {
  min-width: 3.25rem;
  border: 1px solid var(--login-line);
  border-left: 0;
  border-radius: 0 0.75rem 0.75rem 0;
  background: #fff;
  color: #827b80;
}

.azalia-login-page .password-group .input-password-toggle:hover,
.azalia-login-page .password-group .input-password-toggle:focus {
  background: var(--login-soft);
  color: var(--color-accent);
}

.azalia-login-page .com-users-login__remember {
  margin: 0.25rem 0 1.25rem;
  color: #827b80;
  font-size: 0.82rem;
}

.azalia-login-page .com-users-login__remember .form-check-input {
  border-color: #d8c5c0;
}

.azalia-login-page .com-users-login__remember .form-check-input:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.azalia-login-page .com-users-login__submit {
  margin-top: 0.75rem;
}

.azalia-login-page .com-users-login__submit .controls {
  width: 100%;
}

.azalia-login-page .com-users-login__submit .btn {
  display: inline-flex;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  border-radius: 0.75rem;
  font-weight: 600;
}

.azalia-login-page .com-users-login__submit .plg_system_webauthn_login_button {
  border: 1px solid rgba(var(--color-accent-rgb), 0.2);
  background: var(--color-surface);
  color: var(--color-accent);
}

.azalia-login-page .com-users-login__submit .plg_system_webauthn_login_button:hover,
.azalia-login-page .com-users-login__submit .plg_system_webauthn_login_button:focus {
  border-color: var(--color-accent);
  background: #fff;
}

.azalia-login-page .com-users-login__submit .btn-primary {
  border: 0;
  background: var(--color-accent);
}

.azalia-login-page .com-users-login__submit .btn-primary:hover,
.azalia-login-page .com-users-login__submit .btn-primary:focus {
  background: var(--color-accent-strong);
}

.azalia-login-page .com-users-login__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.12);
}

.azalia-login-page .com-users-login__options .list-group-item {
  padding: 0;
  border: 0;
  background: transparent;
  color: #827b80;
  font-size: 0.8rem;
}

.azalia-login-page .com-users-login__options .list-group-item:hover,
.azalia-login-page .com-users-login__options .list-group-item:focus {
  background: transparent;
  color: var(--color-accent);
}

@media (max-width: 767.98px) {
  .azalia-login-page__layout {
    grid-template-columns: 1fr;
  }

  .azalia-login-page__intro {
    min-height: 15rem;
  }
}

@media (max-width: 575.98px) {
  .azalia-login-page__head {
    margin-bottom: 1.25rem;
  }

  .azalia-login-page__intro,
  .azalia-login-page__panel {
    border-radius: 1rem;
  }

  .azalia-login-page__intro {
    min-height: 13rem;
    padding: 1.35rem;
  }

  .azalia-login-page__panel {
    padding: 1.25rem;
  }
}

/* Checkout login uses the same visual language as the account modal, while
   keeping RadicalMart's checkout-specific fields and JS hooks intact. */
.azalia-checkout-login-modal .modal-dialog {
  width: min(100% - 2rem, 620px);
  max-width: 620px;
}

.azalia-checkout-login-modal .modal-title {
  max-width: 34rem;
}

.azalia-checkout-login-modal .azalia-login-modal__lead {
  max-width: 31rem;
}

.azalia-checkout-login-modal .azalia-login-form__fields {
  gap: 1rem;
}

.azalia-checkout-login-modal .azalia-login-form__fields .control-group {
  margin: 0;
}

.azalia-checkout-login-modal .azalia-login-form__fields .control-label {
  margin-bottom: .45rem;
}

.azalia-checkout-login-modal .azalia-login-form__fields .control-label label {
  color: var(--color-text);
  font-size: .82rem;
  font-weight: 600;
}

.azalia-checkout-login-modal .azalia-login-form__fields .controls>.form-control,
.azalia-checkout-login-modal .azalia-login-form__fields .controls>.input-group,
.azalia-checkout-login-modal .azalia-login-form__fields .controls>.password-group {
  width: 100%;
}

.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field .controls {
  position: relative;
}

.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field .controls>.form-control,
.azalia-checkout-login-modal .azalia-login-form__fields .password-group .form-control {
  min-height: 3.1rem;
  border: 1px solid var(--login-line);
  border-radius: 1rem;
  background-color: #fff;
  color: var(--color-text);
  box-shadow: none;
}

.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field--person .controls::before,
.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field--password .controls::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field--person .controls::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.25'/%3E%3Cpath d='M5 20c.7-3.5 3.1-5.4 7-5.4s6.3 1.9 7 5.4'/%3E%3C/svg%3E");
}

.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field--password .controls::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23827b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field--person .form-control,
.azalia-checkout-login-modal .azalia-login-form__fields .azalia-login-field--password .form-control {
  padding-left: 3.15rem;
}

.azalia-checkout-login-modal .azalia-login-form__fields .form-control:focus,
.azalia-checkout-login-modal .azalia-login-form__fields .password-group .form-control:focus {
  border-color: rgba(111, 4, 19, .48);
  box-shadow: 0 0 0 .2rem rgba(111, 4, 19, .1);
}

.azalia-checkout-login-modal .azalia-login-form__fields .btn-group-yesno {
  display: flex;
  gap: .6rem;
}

.azalia-checkout-login-modal .azalia-login-form__fields .btn-group-yesno .btn {
  flex: 1 1 0;
  min-height: 3.1rem;
  border: 1px solid var(--login-line);
  border-radius: 999px !important;
  background: #fff;
  color: var(--color-text);
  font-weight: 600;
}

.azalia-checkout-login-modal .azalia-login-form__fields .btn-group-yesno .btn:hover,
.azalia-checkout-login-modal .azalia-login-form__fields .btn-group-yesno .btn:focus,
.azalia-checkout-login-modal .azalia-login-form__fields .btn-group-yesno .btn.active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.azalia-checkout-login-modal .azalia-login-form__fields [radicalmart-login="code_repeat"] button,
.azalia-checkout-login-modal .azalia-login-form__fields [radicalmart-login="code_start"] button {
  border-color: var(--login-line);
  border-radius: 999px;
  background: var(--login-soft);
  color: var(--color-accent);
}

.azalia-checkout-login-modal .azalia-login-form__fields [radicalmart-login="code_field"] input {
  min-height: 3.1rem;
  border: 1px solid var(--login-line);
  border-radius: 1rem;
}

.azalia-checkout-login__switch-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 1rem 0 0;
  color: var(--color-muted);
  font-size: .9rem;
}

.azalia-checkout-login__switch-label {
  color: var(--color-muted);
}

.azalia-checkout-login__switch {
  padding: .45rem .8rem;
  border: 1px solid var(--login-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  font-size: .9rem;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgba(111, 4, 19, .3);
  text-underline-offset: .2em;
}

.azalia-checkout-login__switch:hover,
.azalia-checkout-login__switch:focus-visible {
  border-color: var(--color-accent);
  background: var(--login-soft);
  color: var(--color-text);
  text-decoration-color: currentColor;
}

@media (max-width: 575.98px) {
  .azalia-checkout-login__switch-wrap {
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .azalia-login-modal .modal-dialog {
    width: min(100% - 1rem, 620px);
  }

  .azalia-login-modal .modal-header,
  .azalia-login-modal .modal-body {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .azalia-login-modal .btn-close {
    transition: none;
  }
}

/* Catalog mega-menu (mod_radicalmart_categories, "menu" layout). Pure CSS,
   no JS: hover/focus-within on the trigger reveals the parent-category
   panel; hovering a parent reveals its children in a panel to the right. */
.container-catalog-menu {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* No position:relative here on purpose — .rm-catalog-menu__panel needs to
   size itself off the whole header row (see .container-header > .container
   below), not off this narrow trigger wrapper.

   Stretched to the row's full height (not just the trigger button's own
   height): the panel's top:100% is measured against that same full-height
   row, so if this hover area stopped at the button's edge, the cursor
   would cross a dead zone between the button and the panel and lose
   :hover before ever reaching it. */
.rm-catalog-menu {
  height: 100%;
  display: flex;
  align-items: center;
}

.rm-catalog-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid #f7ece7;
  border-radius: 999px;
  background: #f7ece7;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.rm-catalog-menu:hover .rm-catalog-menu__trigger,
.rm-catalog-menu:focus-within .rm-catalog-menu__trigger {
  background: rgba(var(--color-accent-rgb), .1);
  border-color: var(--color-accent);
}

.rm-catalog-menu__trigger-icon {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-catalog-menu__trigger-chevron {
  width: 0.8em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.rm-catalog-menu:hover .rm-catalog-menu__trigger-chevron,
.rm-catalog-menu:focus-within .rm-catalog-menu__trigger-chevron {
  transform: rotate(180deg);
}

.container-header>.container {
  position: relative;
}

.rm-catalog-menu__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--dropdown-surface);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .16);
  padding: 1.5rem;
}

.rm-catalog-menu:hover .rm-catalog-menu__panel,
.rm-catalog-menu:focus-within .rm-catalog-menu__panel {
  display: flex;
  align-items: flex-start;
}

/* Real sibling columns (not one absolutely positioned inside the other) —
   an absolutely positioned element never contributes to its parent's
   height, so that approach could only ever fake independent scrolling with
   a hardcoded height. Each column here owns its own max-height/overflow
   and scrolls on its own, genuinely independent of the other. */
.rm-catalog-menu__parents {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  height: 400px;
  /* Flex items default to min-height:auto, which refuses to shrink below
     their content size and silently defeats height/overflow — the classic
     flexbox scroll bug. min-height:0 opts back into respecting the height
     above so overflow-y can actually clip and scroll. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  /* No right padding here on purpose — see .rm-catalog-menu__parent-link
     below: that space lives inside the link's own box instead, so the
     <li> stays hoverable right up to the divider with no dead strip the
     pointer could fall through on its way to the children column. */
  padding: 0;
  border-right: 1px solid var(--color-border);
  list-style: none;
}

.rm-catalog-menu__parent-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 1.75rem 0.75rem 1rem;
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.rm-catalog-menu__parent:hover>.rm-catalog-menu__parent-link,
.rm-catalog-menu__parent-link:focus {
  background: var(--color-surface);
  color: var(--color-accent);
}

.rm-catalog-menu__parent-arrow {
  flex: 0 0 auto;
  width: 0.8em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
}

.rm-catalog-menu__children-wrap {
  flex: 1 1 auto;
  max-width: 66.6667%;
  height: 400px;
  min-height: 0;
  overflow-y: auto;
  /* No left padding here either, same reason as the parent list's removed
     right padding — it moved onto .rm-catalog-menu__children below, so
     the visible child block stays hoverable all the way to the divider. */
}

.rm-catalog-menu__children {
  display: none;
  padding-left: 1.25rem;
}

/* Show the first category's children by default, so the right column
   isn't empty before anything's been hovered — only while nothing in the
   panel is hovered/focused (the per-index rules below still win once
   you're actually pointing at something). */
.rm-catalog-menu__panel:not(:has(.rm-catalog-menu__parent:hover, .rm-catalog-menu__parent:focus-within, .rm-catalog-menu__children:hover)) .rm-catalog-menu__parent:first-child>.rm-catalog-menu__parent-link {
  background: var(--color-surface);
  color: var(--color-accent);
}

.rm-catalog-menu__panel:not(:has(.rm-catalog-menu__parent:hover, .rm-catalog-menu__parent:focus-within, .rm-catalog-menu__children:hover)) .rm-catalog-menu__children-wrap .rm-catalog-menu__children:first-child {
  display: block;
}

/* Hovering/focusing the Nth parent shows the Nth children block — matched
   by data-cat-index (set in PHP from the same loop counter for both
   lists), not :nth-child, since a category without children skips its
   block on the right but not its <li> on the left, which would otherwise
   throw the position-based count out of sync.

   Anchored on .rm-catalog-menu__panel (the common ancestor of both
   columns), not .rm-catalog-menu__parents, and checked against THREE
   things: the <li> hovered, the <li> focused, or — this is the important
   one — the currently-shown children block N itself being hovered. That
   third condition is what keeps the block open once the pointer has
   actually arrived on it (a block can only be hovered while it's already
   shown, so this only ever reinforces whichever N is already active, it
   never picks a different one). Combined with the ::after bridge on each
   <li> that physically closes the gap between the two columns, the
   pointer is never over dead space long enough to drop out of both
   conditions at once. Generated up to 24 categories, a generous ceiling
   over any realistic catalog depth. */
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="1"]:hover, .rm-catalog-menu__parent[data-cat-index="1"]:focus-within, .rm-catalog-menu__children[data-cat-index="1"]:hover) .rm-catalog-menu__children[data-cat-index="1"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="2"]:hover, .rm-catalog-menu__parent[data-cat-index="2"]:focus-within, .rm-catalog-menu__children[data-cat-index="2"]:hover) .rm-catalog-menu__children[data-cat-index="2"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="3"]:hover, .rm-catalog-menu__parent[data-cat-index="3"]:focus-within, .rm-catalog-menu__children[data-cat-index="3"]:hover) .rm-catalog-menu__children[data-cat-index="3"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="4"]:hover, .rm-catalog-menu__parent[data-cat-index="4"]:focus-within, .rm-catalog-menu__children[data-cat-index="4"]:hover) .rm-catalog-menu__children[data-cat-index="4"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="5"]:hover, .rm-catalog-menu__parent[data-cat-index="5"]:focus-within, .rm-catalog-menu__children[data-cat-index="5"]:hover) .rm-catalog-menu__children[data-cat-index="5"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="6"]:hover, .rm-catalog-menu__parent[data-cat-index="6"]:focus-within, .rm-catalog-menu__children[data-cat-index="6"]:hover) .rm-catalog-menu__children[data-cat-index="6"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="7"]:hover, .rm-catalog-menu__parent[data-cat-index="7"]:focus-within, .rm-catalog-menu__children[data-cat-index="7"]:hover) .rm-catalog-menu__children[data-cat-index="7"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="8"]:hover, .rm-catalog-menu__parent[data-cat-index="8"]:focus-within, .rm-catalog-menu__children[data-cat-index="8"]:hover) .rm-catalog-menu__children[data-cat-index="8"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="9"]:hover, .rm-catalog-menu__parent[data-cat-index="9"]:focus-within, .rm-catalog-menu__children[data-cat-index="9"]:hover) .rm-catalog-menu__children[data-cat-index="9"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="10"]:hover, .rm-catalog-menu__parent[data-cat-index="10"]:focus-within, .rm-catalog-menu__children[data-cat-index="10"]:hover) .rm-catalog-menu__children[data-cat-index="10"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="11"]:hover, .rm-catalog-menu__parent[data-cat-index="11"]:focus-within, .rm-catalog-menu__children[data-cat-index="11"]:hover) .rm-catalog-menu__children[data-cat-index="11"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="12"]:hover, .rm-catalog-menu__parent[data-cat-index="12"]:focus-within, .rm-catalog-menu__children[data-cat-index="12"]:hover) .rm-catalog-menu__children[data-cat-index="12"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="13"]:hover, .rm-catalog-menu__parent[data-cat-index="13"]:focus-within, .rm-catalog-menu__children[data-cat-index="13"]:hover) .rm-catalog-menu__children[data-cat-index="13"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="14"]:hover, .rm-catalog-menu__parent[data-cat-index="14"]:focus-within, .rm-catalog-menu__children[data-cat-index="14"]:hover) .rm-catalog-menu__children[data-cat-index="14"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="15"]:hover, .rm-catalog-menu__parent[data-cat-index="15"]:focus-within, .rm-catalog-menu__children[data-cat-index="15"]:hover) .rm-catalog-menu__children[data-cat-index="15"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="16"]:hover, .rm-catalog-menu__parent[data-cat-index="16"]:focus-within, .rm-catalog-menu__children[data-cat-index="16"]:hover) .rm-catalog-menu__children[data-cat-index="16"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="17"]:hover, .rm-catalog-menu__parent[data-cat-index="17"]:focus-within, .rm-catalog-menu__children[data-cat-index="17"]:hover) .rm-catalog-menu__children[data-cat-index="17"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="18"]:hover, .rm-catalog-menu__parent[data-cat-index="18"]:focus-within, .rm-catalog-menu__children[data-cat-index="18"]:hover) .rm-catalog-menu__children[data-cat-index="18"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="19"]:hover, .rm-catalog-menu__parent[data-cat-index="19"]:focus-within, .rm-catalog-menu__children[data-cat-index="19"]:hover) .rm-catalog-menu__children[data-cat-index="19"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="20"]:hover, .rm-catalog-menu__parent[data-cat-index="20"]:focus-within, .rm-catalog-menu__children[data-cat-index="20"]:hover) .rm-catalog-menu__children[data-cat-index="20"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="21"]:hover, .rm-catalog-menu__parent[data-cat-index="21"]:focus-within, .rm-catalog-menu__children[data-cat-index="21"]:hover) .rm-catalog-menu__children[data-cat-index="21"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="22"]:hover, .rm-catalog-menu__parent[data-cat-index="22"]:focus-within, .rm-catalog-menu__children[data-cat-index="22"]:hover) .rm-catalog-menu__children[data-cat-index="22"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="23"]:hover, .rm-catalog-menu__parent[data-cat-index="23"]:focus-within, .rm-catalog-menu__children[data-cat-index="23"]:hover) .rm-catalog-menu__children[data-cat-index="23"],
.rm-catalog-menu__panel:has(.rm-catalog-menu__parent[data-cat-index="24"]:hover, .rm-catalog-menu__parent[data-cat-index="24"]:focus-within, .rm-catalog-menu__children[data-cat-index="24"]:hover) .rm-catalog-menu__children[data-cat-index="24"] {
  display: block;
}

.rm-catalog-menu__children-title {
  margin: 0 0 1.25rem;
  font-family: var(--cassiopeia-font-family-headings, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}

.rm-catalog-menu__children-count {
  margin-left: 0.5rem;
  color: var(--color-text);
  opacity: .45;
  font-size: var(--font-size-base);
  font-weight: 400;
  vertical-align: super;
}

.rm-catalog-menu__children-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* lg is narrower — fewer, wider cards read better than a cramped 3-up grid. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .rm-catalog-menu__children-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rm-catalog-menu__child {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem;
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;

  transition: background-color .15s, color .15s;
}

.rm-catalog-menu__child:hover {
  background: rgba(var(--color-accent-rgb), .06);
  color: var(--color-accent);
}

.rm-catalog-menu__child-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-bg);
  overflow: hidden;
}

.rm-catalog-menu__child-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rm-catalog-menu__child-title {
  flex: 1 1 auto;
  min-width: 0;
}

.rm-catalog-menu__child-count {
  margin-left: 0.35rem;
  color: var(--color-text);
  opacity: .45;
  font-weight: 400;
  font-size: var(--font-size-sm);
}

.container-menu {
  margin: 0 20px;
  flex-shrink: 0;
}

.container-header .navbar-brand {
  margin-right: 20px;
  flex-shrink: 0;
}

.rm-icon-trigger__badge {
  position: absolute;
  top: -0.4em;
  right: -2em;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.8em;
  text-align: center;
}

/* Below xl (menu + search + icons + city all fight for space in one row),
   Войти/Поиск/Избранное/Корзина live in a single render that's repositioned
   with pure CSS — a fixed bottom tab bar on narrow screens, a normal inline
   flex row from xl up. No module is ever rendered twice. */
.site-icon-bar {
  position: fixed;
  z-index: 1030;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
}

/* The glass blur lives on a pseudo-element, not on .site-icon-bar itself:
   backdrop-filter on an element creates a new containing block for any
   position:fixed descendant — and the search offcanvas renders inside this
   bar (.container-search > .radicalmart-search-wrapper > .offcanvas), so it
   was anchoring to this fixed pill instead of the viewport, sliding in from
   the wrong place instead of the top of the screen. */
.site-icon-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .14);
}

.site-icon-bar .container-search,
.site-icon-bar .container-login,
.site-icon-bar .container-favorites,
.site-icon-bar .container-cart {
  flex: 0 0 auto;
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* Reserve space so page content isn't hidden behind the fixed bar. */
@media (max-width: 1199.98px) {
  body {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1200px) {
  .site-icon-bar {
    position: static;
    z-index: auto;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 1rem;
    background: none;
    border-top: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* The glass pill is only for the fixed bottom bar (lg/md/mobile); from xl
     up .site-icon-bar goes back to being a plain inline row in the header. */
  .site-icon-bar::before {
    content: none;
  }

  .site-icon-bar .container-search {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .site-icon-bar .container-favorites,
  .site-icon-bar .container-cart {
    width: max-content;
    min-width: max-content;
    padding-inline-start: 1rem;

  }
}

.site-header__search-trigger {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  flex: 0 0 auto;
}

.site-header__search-trigger .rm-icon-trigger__icon {
  width: 1.3em;
  height: 1.3em;
}

/* The full search needs a little more horizontal room than the 1400px
   Bootstrap breakpoint provides. Keep the compact trigger until 1600px,
   then restore the full field without squeezing the neighbouring controls. */
.site-header__search-form {
  display: none;
  min-width: 0;
}

@media (min-width: 1600px) {
  .site-header__search-trigger {
    display: none;
  }

  .site-header__search-form {
    display: block;
    flex: 1 1 16rem;
    min-width: 13rem;
  }

  .site-header__search-form .rm-search {
    width: min(100%, 22rem);
    margin-left: auto;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .container-header .navbar-brand .brand-logo img {
    height: 34px;
  }

  .top_geo {
    font-size: 12px;
  }

  .container-menu .mod-menu {
    font-size: 13px;
  }
}

/* A long city name is nowrap text inside a flex row; flex items default to
   min-width:auto (= their content's full width), so without this the row
   just overflows past the viewport instead of letting this item shrink. */
.container-city {
  min-width: 0;
}

/* Keep the city in the desktop header, but give it its own breathing room
   after the cart. Its text may shrink and ellipsize before it can collide
   with the controls to its left. */
.site-header__city {
  display: none;
}

@media (min-width: 992px) {
  .site-header__city {
    display: block;
    flex: 0 1 clamp(10rem, 13vw, 14rem);
    min-width: 8rem;
    max-width: 14rem;
    margin-left: 5rem;
    padding-left: 1rem;
    overflow: hidden;
  }

  .site-header__city .top_geo {
    min-width: 0;
    margin-left: 0;
    gap: .35rem;
  }

  .site-header__city .top_geo>a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1200px) {
  .site-header__city {
    flex-basis: clamp(10rem, 13vw, 14rem);
  }
}

/* At xl the icon bar is still using the compact search trigger. Add extra
   separation specifically in this range; lg and the wide 1600px+ header
   already have their own balanced spacing. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .site-icon-bar {
    flex: 0 0 auto;
  }

  .site-icon-bar .container-search {
    flex: 0 0 auto;
  }

  .site-header__city {
    flex: 0 1 clamp(9rem, 11vw, 13rem);
    min-width: 0;
    max-width: 13rem;
    margin-left: 0;
    transform: none;
  }
}

@media (min-width: 1600px) {
  .site-header__city {
    flex: 0 0 auto;
    max-width: none;
    margin-left: 5rem;
    padding-left: 1.25rem;
  }
}

/* Core sets height via .offcanvas.offcanvas-top (specificity 0,2,0); a
   single-class override here would silently lose to it. */
.offcanvas.offcanvas-top {
  height: 100px;
}

.site-search-offcanvas {
  background-color: var(--color-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.site-search-offcanvas .offcanvas-header {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  margin: 0;
  border: 0;
  z-index: 2;
}

.site-search-offcanvas .offcanvas-body {
  height: 100%;
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 4.5rem 0 1.25rem;
  /* Core gives .offcanvas-body overflow-y:auto. This offcanvas is a fixed
     100px bar, so that was clipping the autocomplete suggestions dropdown
     (it's taller than 100px, absolutely positioned below the input) —
     hidden instead of floating over the page like it should. */
  overflow: visible;
}

.site-search-offcanvas .rm-search {
  width: 100%;
}

.site-search-offcanvas .rm-search__input {
  height: 3rem;
}

.site-search-offcanvas .btn-close {
  width: 2rem;
  height: 2rem;
  margin: 1.55rem 1.15rem 0 0;
  background-color: var(--color-surface);
  border-radius: 50%;
  opacity: 1;
  transition: transform .25s ease, background-color .15s;
}

.site-search-offcanvas .btn-close:hover,
.site-search-offcanvas .btn-close:focus {
  background-color: rgba(var(--color-accent-rgb), .06);
  transform: rotate(90deg);
}

/* Search (mod_radicalmart_search) */

.rm-search {
  display: flex;
  align-items: center;
}

.rm-search__input {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0 3.75rem 0 1.5rem;
  color: var(--color-text);
}

.rm-search__input::placeholder {
  color: var(--color-text);
  opacity: .65;
}

.rm-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: none;
  outline: none;
  border-color: #eee;
  box-shadow: 0 0 0 .25rem #f8e9e2;
}

.rm-search__submit {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: color .15s;
}

.rm-search__submit:hover {
  color: var(--color-accent);
}

.rm-search__submit svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: max(100%, 380px);
  margin-top: 0.5rem;
  background: var(--color-bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.search-autocomplete-results.show {
  display: block;
}

.search-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  transition: background-color .15s;
}

.search-autocomplete-item:last-child {
  border-bottom: none;
}

.search-autocomplete-item:hover {
  background-color: var(--color-surface);
}

.breadcrumb {
  background-color: transparent;
  margin-bottom: 0;
  padding-left: 0px !important;
  font-size: 80%;
}

.search-autocomplete-item img,
.search-autocomplete-item-noimage {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-surface);
  flex-shrink: 0;
}

.search-autocomplete-item-info {
  flex: 1;
  min-width: 0;
}

.search-autocomplete-item-title {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-autocomplete-item-price {
  font-size: var(--font-size-sm);
  color: var(--color-success);
  font-weight: 600;
}

.search-autocomplete-loading,
.search-autocomplete-no-results {
  padding: 1rem;
  text-align: center;
  color: var(--color-text);
  opacity: .6;
}

.search-autocomplete-loading {
  font-style: italic;
}

.top_geo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text);
  margin-left: 20px;
}

.top_geo .down {
  margin-inline-start: 0.15rem;
}

.top_geo__icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
  color: var(--color-text);
}

/* Cassiopeia's own gutter is a stingy --bs-gutter-x: .75rem (12px) — same
   fix as parmaled: one variable driving the side padding of every .container
   on the site (not just the header/hero), growing at wider breakpoints. */
.container,
.containerr {
  padding-left: var(--container-space);
  padding-right: var(--container-space);
}

@media (min-width: 992px) {
  :root {
    --container-space: 2rem;
  }
}

/* Bootstrap's .container tops out at 1320px past 1400px; use the original
   Azalia widths for large monitors. Keep these global container breakpoints
   together so page sections and module wrappers use the same grid. */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
}

@media (min-width: 1900px) {
  .container {
    max-width: 1800px;
  }
}

/* Wholesale price box (plg_radicalmart_wholesale) — shown below the retail
   price on product cards/pages when a "main" discount tier is configured. */
.rm-wholesale-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: rgba(var(--color-accent-rgb), 0.06);
  border: 2px solid #fff;
}

.rm-wholesale-box__icon {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 2px solid #fff;
}

.rm-wholesale-box__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-wholesale-box__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rm-wholesale-box__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  opacity: 0.7;
}

.rm-wholesale-box__price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-accent-strong);
  line-height: 1.3;
}

.rm-wholesale-box__hint {
  font-size: 0.7rem;
  color: var(--color-accent-strong);
  opacity: 0.65;
}

/* Card "в наличии" row — same treatment as the product page's own
   .rm-product-price__stock* (see the #RadicalMart-scoped rules further
   down), but unscoped: this card partial also renders outside #RadicalMart
   (e.g. the home-page "Товары для профессионалов" module), so it needs its
   own portable copy rather than depending on that ancestor. */
.rm-product-card__stock-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.rm-product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;

  line-height: 1.2;
}

.rm-product-card__stock-dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.rm-product-card__stock--in {
  color: var(--color-text);
}

.rm-product-card__stock--in .rm-product-card__stock-dot {
  background: #2e7d32;
}

.rm-product-card__stock--out {
  color: var(--color-muted-text, #8b7d7b);
}

.rm-product-card__stock--out .rm-product-card__stock-dot {
  background: var(--color-muted-text, #8b7d7b);
}

.rm-product-card__stock-remain {
  color: var(--color-muted-text, #8b7d7b);
  font-size: 0.78rem;
}

/* Card action row: "add to cart" pill button + favorites heart button. */
.rm-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.rm-card-actions__cart {
  flex: 1 1 auto;
  min-width: 0;
}

/* List cards put the actions next to the price in a shared row (not, as in
   grid cards, alone across the full footer width) — letting the cart button
   and the quantity widget's flex:1 count both keep trying to grow there
   produced an undefined/overflowing width. Pin them to their own content
   size instead. */
.rm-product-card--list .rm-card-actions__cart {
  flex: 0 0 auto;
}

/* A flex container with no explicit width falls back to laying out as a
   block box (width:auto = fill the parent), so .rm-cart-widget was stretching
   to whatever width the ancestor flex chain (.rm-card-actions__cart >
   .rm-card-actions > the price/actions row) happened to resolve it to,
   instead of the ~128px its buttons actually need — pushing the plus button
   past the card's edge, where the card's own overflow:hidden clipped it.
   A fixed width sidesteps that resolution entirely. */
.rm-product-card--list .rm-cart-widget {
  width: 130px;
}

.rm-product-card--list .rm-cart-widget__count {
  flex: 0 0 auto;
  min-width: 2rem;
}

/* Card "add to cart"/"read more" button reuses the site-wide .knopka pill
   button (see the "Reusable primary button" block above) instead of its own
   style — just stretched to the available width via Bootstrap's w-100. */

/* "Add to cart" button <-> quantity widget swap (rm-cart-action, see user.js).
   Both are rendered up front and toggled by JS depending on whether the
   product is already in the cart; --loading hides both until that JS has
   run once (synchronously, from a localStorage cache) so a reload doesn't
   flash the wrong one. */
.rm-cart-action {
  position: relative;
}

.rm-cart-action--loading .rm-cart-action__add,
.rm-cart-action--loading .rm-cart-widget {
  visibility: hidden;
}

.rm-cart-action__remove-trigger {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  pointer-events: none;
}

/* Same light/outlined treatment as the cart drawer's own quantity stepper
   (.az-cart-quantity) — that component scopes its colors to .az-cart-offcanvas
   custom properties, out of reach here, so the values are repeated literally. */
.rm-cart-widget {
  display: flex;
  align-items: stretch;
  height: 42px;
  border: 1px solid #eadbd5;
  border-radius: 14px;
  overflow: hidden;
  background: #f8f1ed;
}

.rm-cart-widget__btn {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-accent);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.rm-cart-widget__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-cart-widget__btn:hover {
  background: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-accent-strong);
}

.rm-cart-widget__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}

.rm-cart-widget__count {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-weight: 700;
  color: var(--color-text);
}

.rm-favorite-btn {
  display: flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  border-radius: 50%;
  background: var(--color-bg);
  padding: 0;
  transition: border-color 0.15s;
}

.rm-favorite-btn:hover,
.rm-favorite-btn:focus {
  border-color: var(--color-accent);
}

.rm-favorite-btn::after {
  display: none !important;
}

.rm-favorite-btn__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-accent-strong);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-favorite-btn--active .rm-favorite-btn__icon {
  fill: var(--color-accent-strong);
}

/* Product card shell (grid/list) — full-bleed image, rounded card, soft shadow,
   replacing the plain Bootstrap .card look. Scoped to .rm-product-card so it
   doesn't affect unrelated .card usages elsewhere on the site. */
.card.rm-product-card {
  overflow: hidden;
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(17, 17, 17, 0.06);
  transition: box-shadow 0.2s ease;
}

.card.rm-product-card:hover {
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.1);
}

.rm-product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  background: var(--color-bg);
}

.rm-product-card__image-wrap--list {
  aspect-ratio: auto;
  min-height: 172px;
  border-radius: 20px 0 0 20px;
}

@media (max-width: 767.98px) {
  .rm-product-card__image-wrap--list {
    border-radius: 20px 20px 0 0;
    aspect-ratio: 1 / 0.78;
    min-height: 0;
  }
}

.rm-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
}

.rm-product-card__image-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rm-product-card .card-body {
  padding: 1.1rem 1.25rem 0.5rem;
}

.rm-product-card .card-footer {
  background: transparent;
  border-top: none;
  padding: 0 1.25rem 1.25rem;
}

.rm-product-card__category {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.rm-product-card__title {
  display: block;
  font-size: 1.05rem;
}

.rm-product-card__price {
  font-weight: 700;
}

/* Compact product parameters for list cards. The full product page uses the
   same receipt-like leader dots; keep the card version tighter and remove the
   heavy Bootstrap row spacing so several characteristics fit at a glance. */
.rm-product-card__specs {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  width: 100%;
}

.rm-product-card__spec-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1rem, 1fr) minmax(0, auto);
  align-items: baseline;
  width: 100%;
  min-width: 0;
  column-gap: 0.45rem;
}

.rm-product-card__spec-label,
.rm-product-card__spec-value {
  min-width: 0;
  margin: 0;
  line-height: 1.3;
}

.rm-product-card__spec-label {
  overflow: hidden;
  color: var(--color-muted-text, #8b7d7b);
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-product-card__spec-leader {
  display: block;
  min-width: 1rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px dotted var(--color-border);
}

.rm-product-card__spec-value {
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: left;
}

@media (max-width: 767.98px) {
  .rm-product-card__specs {
    width: 100%;
  }

  .rm-product-card__spec-row {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 8rem);
  }
}

/* Decorative divider between the title and the price, echoing the site's
   flower motif — a hairline rule split by a small ornament. */
.rm-card-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
}

.rm-card-divider__line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(var(--color-accent-rgb), 0.2);
}

.rm-card-divider__ornament {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.rm-card-divider__ornament circle {
  fill: var(--color-accent);
  stroke: none;
}

/* Card action buttons match the reference: uppercase label (matching the
   category label treatment above) and a moderate corner radius rather than
   the site-wide .knopka's full pill shape. */
.rm-card-actions .knopka {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  border-radius: 14px;
}

/* Promo badges (Акция/Хит продаж/Новинка) over the product image. */
.rm-badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.rm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.55rem 0.2rem 0.2rem;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.rm-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(17, 17, 17, 0.16);
}

.rm-badge__icon {
  display: flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.58rem;
  line-height: 1;
  overflow: hidden;
}

.rm-badge__icon svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rm-badge__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rm-badge--outline {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-accent-strong);
}

.rm-badge--outline:hover {
  background: #fff;
  color: var(--color-accent-strong);
}

.rm-badge--outline .rm-badge__icon {
  background: var(--color-accent);
  color: #fff;
}

.rm-badge--solid {
  background: var(--color-accent);
  color: #fff;
}

.rm-badge--solid:hover {
  background: var(--color-accent-strong);
  color: #fff;
}

.rm-badge--solid .rm-badge__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.rm-badge--soft {
  background: rgba(255, 240, 236, 0.95);
  color: var(--color-accent-strong);
}

.rm-badge--soft:hover {
  background: #fff;
  color: var(--color-accent-strong);
}

.rm-badge--soft .rm-badge__icon {
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-accent-strong);
}

/* RadicalMart cart drawer: warm Azalia treatment. The component's data
   attributes stay untouched so its existing AJAX quantity logic remains the
   single source of truth. */
.az-cart-offcanvas {
  --az-cart-bg: var(--dropdown-surface);
  --az-cart-surface: #f8f1ed;
  --az-cart-border: #eadbd5;
  --az-cart-muted: #8b7d7b;
  --az-cart-shadow: rgba(var(--color-accent-rgb), 0.14);
  width: min(440px, 100vw);
  border: 0;
  background: var(--az-cart-bg);
  box-shadow: -12px 0 38px var(--az-cart-shadow);
}

.az-cart-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--az-cart-bg);
}

.az-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--az-cart-border);
}

.az-cart-header__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: 1.55rem;
  line-height: 1;
}

.az-cart-header__title svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.az-cart-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--az-cart-border);
  border-radius: 50%;
  background: var(--az-cart-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.az-cart-header__close svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.az-cart-header__close:hover,
.az-cart-header__close:focus-visible {
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent);
  transform: rotate(90deg);
}

.container-header .mod-menu>li+li {
  margin-left: 0;
}

.az-cart-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: .5rem 0;
  scrollbar-color: rgba(var(--color-accent-rgb), .35) transparent;
  scrollbar-width: thin;
}

.az-cart-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--az-cart-border);
  transition: background-color .2s ease;
}

.az-cart-item:hover {
  background: rgba(var(--color-accent-rgb), .025);
}

.az-cart-item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 5rem;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border: 1px solid var(--az-cart-border);
  border-radius: .85rem;
  background: var(--az-cart-surface);
}

.az-cart-item__image-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.az-cart-item__content {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 1.4rem;
}

.az-cart-item__category {
  margin-bottom: .22rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.az-cart-item__category a {
  color: var(--az-cart-muted);
  text-decoration: none;
}

.az-cart-item__category a:hover {
  color: var(--color-accent);
}

.az-cart-item__title {
  display: block;
  margin-bottom: .65rem;
  color: var(--color-text);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.az-cart-item__title:hover {
  color: var(--color-accent);
}

.az-cart-item__extras {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: -.25rem 0 .55rem;
}

.az-cart-item__extra {
  padding: .18rem .45rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), .07);
  color: var(--az-cart-muted);
  font-size: .7rem;
}

.az-cart-item__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem;
}

.az-cart-quantity {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--az-cart-border);
  border-radius: .55rem;
  background: var(--az-cart-surface);
}

.az-cart-quantity__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.az-cart-quantity__button:hover,
.az-cart-quantity__button:focus-visible {
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent-strong);
}

.az-cart-quantity__input {
  width: 2rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.az-cart-quantity__input::-webkit-outer-spin-button,
.az-cart-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.az-cart-item__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
}

.az-cart-item__unit-price {
  color: var(--az-cart-muted);
  font-size: .68rem;
  white-space: nowrap;
}

.az-cart-item__sum {
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1.15;
  white-space: nowrap;
}

.az-cart-item__remove {
  position: absolute;
  top: .85rem;
  right: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--az-cart-muted);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.az-cart-item__remove svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.az-cart-item__remove:hover,
.az-cart-item__remove:focus-visible {
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent);
}

.az-cart-footer {
  flex: 0 0 auto;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--az-cart-border);
  background: var(--az-cart-surface);
}

.az-cart-footer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.az-cart-footer__total span {
  color: var(--az-cart-muted);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.az-cart-footer__total strong {
  color: var(--color-accent);
  font-size: 1.45rem;
  line-height: 1;
  white-space: nowrap;
}

.az-cart-footer__actions {
  display: flex;
  gap: .65rem;
}

.az-cart-footer__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  flex: 1 1 0;
  gap: .6rem;
  padding: .65rem 1rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.az-cart-footer__button:hover,
.az-cart-footer__button:focus-visible {
  transform: translateY(-1px);
}

.az-cart-footer__button--outline {
  background: transparent;
  color: var(--color-accent);
}

.az-cart-footer__button--outline:hover,
.az-cart-footer__button--outline:focus-visible {
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent-strong);
}

.az-cart-footer__button--accent {
  background: var(--color-accent);
  color: #fff;
}

.az-cart-footer__button--accent:hover,
.az-cart-footer__button--accent:focus-visible {
  background: var(--color-accent-strong);
  color: #fff;
}

.az-cart-footer__button--accent span {
  font-size: 1.2rem;
  line-height: 1;
}

.az-cart-empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 3rem 1.5rem;
  color: var(--az-cart-muted);
  text-align: center;
}

.az-cart-empty__icon {
  width: 4.25rem;
  height: 4.25rem;
  fill: none;
  stroke: rgba(var(--color-accent-rgb), .45);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.az-cart-empty p {
  margin: 0;
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: 1.35rem;
}

@media (max-width: 575.98px) {

  .az-cart-header,
  .az-cart-item,
  .az-cart-footer {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .az-cart-item__image {
    flex-basis: 4.25rem;
    width: 4.25rem;
    height: 4.25rem;
  }

  .az-cart-footer__actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {

  .az-cart-header__close,
  .az-cart-footer__button,
  .az-cart-item,
  .az-cart-quantity__button,
  .az-cart-item__remove {
    transition: none;
  }
}

/* RadicalMart checkout: ParmaLED structure in the Azalia palette. */
#RadicalMart.rm-checkout {
  overflow-x: hidden;
}

#RadicalMart .rm-checkout__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 4rem 1rem;
  text-align: center;
  color: rgba(var(--color-text-rgb), .62);
}

#RadicalMart .rm-checkout__empty-title {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-text);
}

#RadicalMart .rm-checkout__empty-text {
  margin: 0 0 .5rem;
}

#RadicalMart .rm-checkout__head {
  margin-bottom: 1.5rem;
}

#RadicalMart .rm-checkout__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#RadicalMart .rm-checkout__title {
  margin: 0;
  color: var(--color-text);
}

#RadicalMart .rm-checkout__count {
  flex: 0 0 auto;
  padding: .3rem .75rem;
  border-radius: 999px;
  background-color: var(--color-surface);
  color: rgba(var(--color-text-rgb), .62);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

#RadicalMart .rm-checkout__loading {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(253, 250, 247, .9);
}

#RadicalMart .rm-checkout__loading-inner {
  text-align: center;
}

#RadicalMart .rm-checkout__spinner {
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  border-radius: 50%;
  border: 3px solid var(--color-surface);
  border-top-color: var(--color-accent);
  animation: rm-checkout-spin .8s linear infinite;
}

@keyframes rm-checkout-spin {
  to {
    transform: rotate(360deg);
  }
}

#RadicalMart .rm-checkout__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

#RadicalMart .rm-checkout__aside {
  position: sticky;
  top: 6rem;
  min-width: 0;
}

#RadicalMart .rm-checkout__section {
  background-color: var(--color-bg);
  border: 1px solid var(--color-surface);
  border-radius: 1rem;
  box-shadow: 0 10px 26px rgba(var(--color-accent-rgb), .06);
  overflow: hidden;
}

#RadicalMart .rm-checkout__section-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-surface);
  background-color: var(--color-surface);
}

#RadicalMart .rm-checkout__section-number {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
}

#RadicalMart .rm-checkout__section-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

#RadicalMart .rm-checkout__section-subtitle {
  margin-bottom: .75rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
}

#RadicalMart .rm-checkout__section-body {
  padding: 1.25rem;
}

#RadicalMart .rm-checkout__section-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(253, 250, 247, .9);
}

#RadicalMart .rm-checkout__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}

#RadicalMart .rm-checkout__fields .control-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
}

#RadicalMart .rm-checkout__fields .control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#RadicalMart .rm-checkout__fields ::placeholder {
  color: #8b95a3;
  opacity: 1;
}

#RadicalMart .rm-checkout__fields input.invalid,
#RadicalMart .rm-checkout__fields textarea.invalid,
#RadicalMart .rm-checkout__fields select.invalid {
  border-color: #dc3545;
  background-color: #fdecea;
}

#RadicalMart .rm-checkout__fields input.invalid:focus,
#RadicalMart .rm-checkout__fields textarea.invalid:focus,
#RadicalMart .rm-checkout__fields select.invalid:focus {
  border-color: #dc3545;
}

#RadicalMart .rm-checkout__fields input.invalid::placeholder,
#RadicalMart .rm-checkout__fields textarea.invalid::placeholder {
  color: #dc3545;
}

#RadicalMart .rm-checkout__fields .control-group:has(.invalid)::after {
  content: "Заполните поле корректно";
  display: block;
  margin-top: .3rem;
  font-size: var(--font-size-xs);
  color: #dc3545;
}

#RadicalMart .rm-checkout__fields input[type="text"],
#RadicalMart .rm-checkout__fields input[type="email"],
#RadicalMart .rm-checkout__fields input[type="tel"],
#RadicalMart .rm-checkout__fields input[type="number"],
#RadicalMart .rm-checkout__fields textarea,
#RadicalMart .rm-checkout__fields select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 .9rem;
  border: 1px solid var(--color-surface);
  border-radius: 1rem;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  transition: border-color .15s ease, background-color .15s ease;
}

#RadicalMart .rm-checkout__fields textarea {
  padding-block: .65rem;
  min-height: 5rem;
  resize: vertical;
}

#RadicalMart .rm-checkout__fields input:focus,
#RadicalMart .rm-checkout__fields textarea:focus,
#RadicalMart .rm-checkout__fields select:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-bg);
}

#RadicalMart .rm-checkout__field-full {
  grid-column: 1 / -1;
}

#RadicalMart .rm-checkout__notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-surface);
  border-radius: 1rem;
  color: var(--color-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}

#RadicalMart .rm-checkout__notice svg {
  flex: 0 0 auto;
  color: var(--color-accent);
  margin-top: .1rem;
}

#RadicalMart .rm-checkout__methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

#RadicalMart .rm-checkout__method-wrap {
  min-width: 0;
}

#RadicalMart .rm-checkout__method-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#RadicalMart .rm-checkout__method {
  display: flex;
  position: relative;
  min-height: 4.25rem;
  align-items: center;
  gap: .55rem;
  padding: .65rem 2.35rem .65rem .8rem;
  border: 1px solid rgba(var(--color-accent-rgb), .18);
  border-radius: 1rem;
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#RadicalMart .rm-checkout__method-input:checked+.rm-checkout__method {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--color-accent-rgb), .16);
}

#RadicalMart .rm-checkout__method-input:checked+.rm-checkout__method .rm-checkout__method-desc {
  color: rgba(255, 255, 255, .8);
}

#RadicalMart .rm-checkout__method-input:focus-visible+.rm-checkout__method {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

#RadicalMart .rm-checkout__method-input:disabled+.rm-checkout__method {
  opacity: .5;
  cursor: not-allowed;
}

#RadicalMart .rm-checkout__method-mark {
  display: grid;
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid rgba(var(--color-accent-rgb), .22);
  border-radius: 50%;
  color: var(--color-accent);
}

#RadicalMart .rm-checkout__method-mark svg {
  width: 1rem;
  height: 1rem;
}

#RadicalMart .rm-checkout__method-input:checked+.rm-checkout__method .rm-checkout__method-mark {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

#RadicalMart .rm-checkout__method-text {
  display: flex;
  flex-direction: column;
}

#RadicalMart .rm-checkout__method-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

#RadicalMart .rm-checkout__method-desc {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
  color: rgba(var(--color-text-rgb), .62);
}

#RadicalMart .rm-checkout__method-check {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border: 1px solid rgba(var(--color-accent-rgb), .25);
  border-radius: 50%;
  color: transparent;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

#RadicalMart .rm-checkout__method-input:checked+.rm-checkout__method .rm-checkout__method-check {
  border-color: #fff;
  color: #fff;
}

#RadicalMart .rm-checkout__method-content {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-surface);
}

#RadicalMart .rm-checkout__consents {
  padding: 1rem 1.25rem;
  background-color: var(--color-surface);
  border-radius: 1rem;
}

#RadicalMart .rm-checkout__consent {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

#RadicalMart .rm-checkout__consent a {
  color: var(--color-accent);
}

#RadicalMart .rm-checkout__consent .form-check-input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: .1rem 0 0;
}

#RadicalMart .rm-checkout__consent .form-check {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 0;
}

#RadicalMart .rm-checkout__consent .form-check-label {
  margin: 0;
}

#RadicalMart .rm-checkout__consent legend {
  font-size: inherit;
}

#RadicalMart .rm-checkout__consent:has(.invalid) .form-check-input {
  border-color: #dc3545;
  box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .15);
}

#RadicalMart .rm-checkout__consent:has(.invalid) .form-check-label,
#RadicalMart .rm-checkout__consent:has(.invalid) legend {
  color: #dc3545 !important;
}

#RadicalMart .rm-checkout__consents:has(.invalid)::after {
  content: "Отметьте согласие, чтобы продолжить";
  display: block;
  margin-top: .5rem;
  font-size: var(--font-size-xs);
  color: #dc3545;
}

#RadicalMart .rm-checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#RadicalMart .rm-checkout-summary__head {
  padding-bottom: 1rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--color-surface);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

#RadicalMart .rm-checkout-summary__items {
  display: flex;
  flex-direction: column;
  max-height: 18rem;
  overflow-y: auto;
  padding-right: .25rem;
}

#RadicalMart .rm-checkout-summary__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(1.25rem, 1fr) auto;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

#RadicalMart .rm-checkout-summary__item-title {
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  font-weight: 600;
  color: var(--color-text);
}

#RadicalMart .rm-checkout-summary__item-meta {
  margin-top: .35rem;
  font-size: var(--font-size-sm);
  color: rgba(var(--color-text-rgb), .62);
}

#RadicalMart .rm-checkout-summary__item-leader {
  align-self: center;
  min-width: 1.25rem;
  margin-top: .15rem;
  border-bottom: 1px dotted rgba(var(--color-text-rgb), .38);
}

#RadicalMart .rm-checkout-summary__item-price {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

#RadicalMart .rm-checkout-summary__rows {
  padding-top: 1rem;
  border-top: 1px solid var(--color-surface);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

#RadicalMart .rm-checkout-summary__items+.rm-checkout-summary__rows {
  margin-top: 0;
  border-top: 0;
}

#RadicalMart .rm-checkout-summary .rm-cart-summary__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  color: rgba(var(--color-text-rgb), .66);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

#RadicalMart .rm-checkout-summary .rm-cart-summary__row> :last-child {
  min-width: 7rem;
  text-align: right;
}

#RadicalMart .rm-checkout-summary__row-value {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
}

#RadicalMart .rm-checkout-summary__row-label {
  font-size: var(--font-size-xs);
  color: rgba(var(--color-text-rgb), .62);
}

#RadicalMart .rm-checkout-summary__shipping-price {
  max-width: 16rem;
  color: var(--color-text);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}

#RadicalMart .rm-checkout-summary .rm-cart-summary__row--discount {
  color: var(--color-accent);
}

/* Same strikethrough + wholesale-box treatment as the cart page's own
   sidebar — see the comments on .rm-cart-summary__base--discounted and
   .rm-cart-summary__wholesale. */
#RadicalMart .rm-checkout-summary .rm-cart-summary__base--discounted {
  text-decoration: line-through;
  opacity: 0.7;
}

#RadicalMart .rm-checkout-summary__wholesale {
  margin: -0.1rem 0 0.15rem;
}

#RadicalMart .rm-checkout-summary .rm-cart-summary__row--total {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

#RadicalMart .rm-checkout-summary .rm-cart-summary__row--total strong {
  color: var(--color-accent);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

#RadicalMart .rm-checkout-summary__error {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: 1rem;
  background-color: #fdecea;
  color: #b3261e;
  font-size: var(--font-size-xs);
  text-align: center;
}

#RadicalMart .rm-checkout-summary__error-products {
  margin-top: .5rem;
  text-align: left;
  font-size: var(--font-size-xs);
}

#RadicalMart .rm-checkout-summary__error-action {
  margin-top: .6rem;
}

#RadicalMart .rm-checkout-summary__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: 1.1rem;
  text-align: center;
}

#RadicalMart .rm-checkout-summary__submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 575.98px) {
  #RadicalMart .rm-checkout-summary__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #RadicalMart .rm-checkout-summary__item-leader {
    display: none;
  }
}

#RadicalMart .rm-checkout__subtitle {
  max-width: 54rem;
  margin: .25rem 0 0;
}

@media (min-width: 768px) {
  #RadicalMart .rm-checkout__fields {
    grid-template-columns: 1fr 1fr;
  }
}

#RadicalMart .rm-checkout-summary {
  padding: 1.5rem;
  border: 1px solid rgba(var(--color-accent-rgb), .14);
  border-radius: 1rem;
  background: var(--color-surface);
  box-shadow: 0 10px 26px rgba(var(--color-accent-rgb), .06);
}

@media (max-width: 991.98px) {
  #RadicalMart .rm-checkout__aside {
    position: static;
  }
}

@media (max-width: 575.98px) {
  #RadicalMart .rm-checkout__methods {
    grid-template-columns: 1fr;
  }

  #RadicalMart .rm-checkout__section-body,
  #RadicalMart .rm-checkout__section-head {
    padding: 1rem;
  }

  #RadicalMart .rm-checkout-summary {
    padding: 1rem;
  }

  #RadicalMart .rm-checkout__head-row {
    align-items: flex-start;
  }
}

/* RadicalMart order details: the ParmaLED information hierarchy, tuned to
   Azalia's cream surface, burgundy accent and shared type scale. */
#RadicalMart.rm-order {
  --azalia-order-muted: #8b7d7b;
  --azalia-order-line: #eadbd5;
  --azalia-order-surface: #fffdfb;
  padding-block: 2rem 3.5rem;
}

#RadicalMart.rm-order .rm-order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

#RadicalMart.rm-order .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#RadicalMart.rm-order .section-eyebrow--dot::before {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#RadicalMart.rm-order .rm-order__title {
  margin: .45rem 0 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.04;
  text-transform: none;
}

#RadicalMart.rm-order .rm-order__status,
#RadicalMart.rm-order .rm-order-summary__status {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), .09);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
}

#RadicalMart.rm-order .rm-order__status {
  flex: 0 0 auto;
}

#RadicalMart.rm-order .rm-order__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

#RadicalMart.rm-order .rm-order__aside {
  position: sticky;
  top: 6rem;
  min-width: 0;
}

#RadicalMart.rm-order .rm-order-section,
#RadicalMart.rm-order .rm-order-summary {
  overflow: hidden;
  border: 1px solid var(--azalia-order-line);
  border-radius: 1.2rem;
  background: var(--azalia-order-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
}

#RadicalMart.rm-order .rm-order-section__head,
#RadicalMart.rm-order .rm-order-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#RadicalMart.rm-order .rm-order-section__head {
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--azalia-order-line);
  background: var(--color-surface);
}

#RadicalMart.rm-order .rm-order-section__head h2,
#RadicalMart.rm-order .rm-order-summary__head h2 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

#RadicalMart.rm-order .rm-order-section__head span,
#RadicalMart.rm-order .rm-order-summary__head>span {
  color: var(--azalia-order-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

#RadicalMart.rm-order .rm-order-product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.35rem;
}

#RadicalMart.rm-order .rm-order-product+.rm-order-product {
  border-top: 1px solid var(--azalia-order-line);
}

#RadicalMart.rm-order .rm-order-product__image {
  display: flex;
  flex: 0 0 4.75rem;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  overflow: hidden;
  border: 1px solid var(--azalia-order-line);
  border-radius: .85rem;
  background: var(--color-surface);
}

#RadicalMart.rm-order .rm-order-product__image-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#RadicalMart.rm-order .rm-order-product__main {
  flex: 1 1 12rem;
  min-width: 0;
}

#RadicalMart.rm-order .rm-order-product__category {
  margin-bottom: .2rem;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#RadicalMart.rm-order .rm-order-product__title {
  display: block;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-lg);
  line-height: 1.2;
  text-decoration: none;
}

#RadicalMart.rm-order .rm-order-product__title:hover {
  color: var(--color-accent);
}

#RadicalMart.rm-order .rm-order-product__extras {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
  color: var(--azalia-order-muted);
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-order .rm-order-product__data {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  text-align: right;
}

#RadicalMart.rm-order .rm-order-product__data span {
  color: var(--azalia-order-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

#RadicalMart.rm-order .rm-order-product__data strong {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: 700;
  white-space: nowrap;
}

#RadicalMart.rm-order .rm-order-product__data--sum strong {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
}

#RadicalMart.rm-order .rm-order-details {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.35rem;
}

#RadicalMart.rm-order .rm-order-details__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-order .rm-order-details__row span {
  flex: 0 0 auto;
  color: var(--azalia-order-muted);
}

#RadicalMart.rm-order .rm-order-details__row strong {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
}

#RadicalMart.rm-order .rm-order-summary {
  padding: 1.35rem;
}

#RadicalMart.rm-order .rm-order-summary__head {
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--azalia-order-line);
}

#RadicalMart.rm-order .rm-order-summary__body,
#RadicalMart.rm-order .rm-order-summary__totals {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

#RadicalMart.rm-order .rm-order-summary__body {
  padding: 1rem 0;
  border-bottom: 1px solid var(--azalia-order-line);
}

#RadicalMart.rm-order .rm-cart-summary__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1rem, 1fr) auto;
  align-items: baseline;
  gap: .45rem;
  color: var(--azalia-order-muted);
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-order .rm-cart-summary__row::after {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: .25rem;
  border-bottom: 1px dotted rgba(139, 125, 123, .55);
  content: "";
}

#RadicalMart.rm-order .rm-cart-summary__row>* {
  position: relative;
  z-index: 1;
  background: var(--azalia-order-surface);
}

#RadicalMart.rm-order .rm-cart-summary__row> :first-child {
  grid-column: 1;
}

#RadicalMart.rm-order .rm-cart-summary__row> :last-child {
  grid-column: 3;
  text-align: right;
}

#RadicalMart.rm-order .rm-order-summary__body strong {
  color: var(--color-text);
  font-weight: 600;
}

#RadicalMart.rm-order .rm-order-summary__body strong small {
  display: block;
  max-width: 14rem;
  margin-top: .2rem;
  color: var(--azalia-order-muted);
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.35;
}

#RadicalMart.rm-order .rm-order-summary__status {
  padding: .2rem .55rem;
}

#RadicalMart.rm-order .rm-cart-summary__row--discount {
  color: var(--color-accent);
}

#RadicalMart.rm-order .rm-cart-summary__row--total {
  padding-top: 1rem;
  border-top: 1px solid var(--azalia-order-line);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

#RadicalMart.rm-order .rm-cart-summary__row--total::after {
  display: none;
}

#RadicalMart.rm-order .rm-cart-summary__row--total strong {
  color: var(--color-accent);
  font-size: var(--font-size-xl);
  line-height: 1.1;
}

#RadicalMart.rm-order .rm-order-summary__pay {
  margin-top: 1.15rem;
}

#RadicalMart.rm-order .rm-order-summary__pay .knopka {
  justify-content: center;
  width: 100%;
}

@media (min-width: 992px) {
  #RadicalMart.rm-order .rm-order-product__data {
    flex: 0 0 6.5rem;
  }

  #RadicalMart.rm-order .rm-order-product__data--quantity {
    flex-basis: 4.5rem;
  }
}

@media (max-width: 991.98px) {
  #RadicalMart.rm-order .rm-order__aside {
    position: static;
  }
}

@media (max-width: 575.98px) {
  #RadicalMart.rm-order {
    padding-block: 1.25rem 2.5rem;
  }

  #RadicalMart.rm-order .rm-order__title {
    font-size: 2.25rem;
  }

  #RadicalMart.rm-order .rm-order-section__head,
  #RadicalMart.rm-order .rm-order-product,
  #RadicalMart.rm-order .rm-order-summary,
  #RadicalMart.rm-order .rm-order-details {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  #RadicalMart.rm-order .rm-order-product {
    align-items: flex-start;
  }

  #RadicalMart.rm-order .rm-order-product__data {
    flex: 1 1 auto;
    align-items: flex-start;
    text-align: left;
  }

  #RadicalMart.rm-order .rm-cart-summary__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #RadicalMart.rm-order .rm-cart-summary__row::after {
    display: none;
  }

  #RadicalMart.rm-order .rm-cart-summary__row> :last-child {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {

  #RadicalMart.rm-order .knopka,
  #RadicalMart.rm-order .rm-order-product__title {
    transition: none;
  }
}

/* RadicalMart orders list: shared order-card language for the account area. */
#RadicalMart.rm-orders {
  --azalia-orders-muted: #8b7d7b;
  --azalia-orders-line: #eadbd5;
  --azalia-orders-surface: #fffdfb;
}

#RadicalMart.rm-orders .rm-orders__head {
  margin-bottom: 1.75rem;
}

#RadicalMart.rm-orders .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#RadicalMart.rm-orders .section-eyebrow--dot::before {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#RadicalMart.rm-orders .rm-page-head {
  margin-top: .45rem;
}

#RadicalMart.rm-orders .rm-orders__intro {
  max-width: 42rem;
  margin: .85rem 0 0;
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#RadicalMart.rm-orders .rm-orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#RadicalMart.rm-orders .rm-order-card {
  overflow: hidden;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1.2rem;
  background: var(--azalia-orders-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
}

#RadicalMart.rm-orders .rm-order-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .2s ease;
}

#RadicalMart.rm-orders .rm-order-card__head:hover,
#RadicalMart.rm-orders .rm-order-card__head:focus-visible {
  background: var(--color-surface);
}

#RadicalMart.rm-orders .rm-order-card__number {
  display: block;
  margin-bottom: .3rem;
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .04em;
}

#RadicalMart.rm-orders .rm-order-card__head h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.2;
}

#RadicalMart.rm-orders .rm-order-card__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), .09);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#RadicalMart.rm-orders .rm-order-card__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem 1.35rem;
  border-top: 1px solid var(--azalia-orders-line);
  border-bottom: 1px solid var(--azalia-orders-line);
}

#RadicalMart.rm-orders .rm-order-card__meta div,
#RadicalMart.rm-orders .rm-order-card__footer div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

#RadicalMart.rm-orders .rm-order-card__meta span,
#RadicalMart.rm-orders .rm-order-card__footer span {
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-orders .rm-order-card__meta strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#RadicalMart.rm-orders .rm-order-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem;
}

#RadicalMart.rm-orders .rm-order-card__footer strong {
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

#RadicalMart.rm-orders .rm-order-card__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-accent) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s ease;
}

#RadicalMart.rm-orders .rm-order-card__link:hover,
#RadicalMart.rm-orders .rm-order-card__link:focus-visible {
  opacity: .72;
}

#RadicalMart.rm-orders .rm-order-card__link .ar-arrow::before {
  transform: rotate(45deg);
}

#RadicalMart.rm-orders .rm-orders-empty {
  padding: 3.5rem 1.5rem;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1.2rem;
  background: var(--azalia-orders-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
  text-align: center;
}

#RadicalMart.rm-orders .rm-orders-empty__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), .09);
  color: var(--color-accent);
  font-size: var(--font-size-xl);
  font-weight: 800;
}

#RadicalMart.rm-orders .rm-orders-empty h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-xl);
  font-weight: 400;
}

#RadicalMart.rm-orders .rm-orders-empty p {
  margin: .5rem 0 0;
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-orders .rm-orders__pagination {
  margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
  #RadicalMart.rm-orders .rm-order-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {

  #RadicalMart.rm-orders .rm-order-card__head,
  #RadicalMart.rm-orders .rm-order-card__footer {
    flex-direction: column;
  }

  #RadicalMart.rm-orders .rm-order-card__status,
  #RadicalMart.rm-orders .rm-order-card__link {
    align-self: flex-start;
  }

  #RadicalMart.rm-orders .rm-order-card__head,
  #RadicalMart.rm-orders .rm-order-card__meta,
  #RadicalMart.rm-orders .rm-order-card__footer {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-order-card__head {
    transition: none;
  }
}

/* Shared account shell: one navigation rail for orders, personal data and
   settings. The menu itself remains managed by RadicalMart/Joomla. */
:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  align-items: start;
  gap: 2.5rem;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-layout__sidebar {
  position: sticky;
  top: 6rem;
  min-width: 0;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar>.card {
  overflow: hidden;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1.2rem;
  background: var(--azalia-orders-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-header {
  padding: .8rem;
  border-bottom: 1px solid var(--azalia-orders-line);
  background: var(--color-surface);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-header .card-img-top {
  height: 5.5rem;
  border-radius: .85rem;
  background: var(--azalia-orders-surface) !important;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-header img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-header label,
:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-header button {
  color: var(--color-accent);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar {
  position: relative;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__frame {
  width: 100%;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  margin: .65rem 0 0;
  padding: .55rem .65rem;
  border: 1px dashed rgba(var(--color-accent-rgb), .35);
  border-radius: .75rem;
  background: rgba(var(--color-accent-rgb), .04);
  color: var(--color-accent);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 700;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__upload:hover,
:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__upload:focus-within {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .1);
  color: var(--color-accent-strong);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__upload svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__delete {
  display: block;
  margin: .45rem auto 0;
  padding: 0;
  border: 0;
  font-size: var(--font-size-xs);
  text-decoration: underline;
  text-underline-offset: .15rem;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-body {
  padding: 1rem;
  background: var(--azalia-orders-surface);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-body .h4 {
  margin-bottom: .35rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-lg);
  font-weight: 400;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-body .small {
  color: var(--azalia-orders-muted) !important;
  font-size: var(--font-size-xs);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-body .btn {
  min-height: 2.2rem;
  padding: .45rem .7rem;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-body .btn:hover,
:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .card-body .btn:focus-visible {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent-strong);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .85rem;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__actions .rm-account-sidebar__settings {
  flex: 1 1 auto;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__actions .rm-account-sidebar__logout {
  flex: 0 0 auto;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group {
  border-top: 1px solid var(--azalia-orders-line);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group-item {
  padding: .8rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--azalia-orders-line);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group-item:last-child {
  border-bottom: 0;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group-item:hover,
:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group-item:focus-visible {
  background: var(--color-surface);
  color: var(--color-accent);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group-item.active {
  background: var(--color-accent);
  color: #fff;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__menu-logout {
  color: var(--color-accent);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__modules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__module {
  padding: 1rem;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1rem;
  background: var(--azalia-orders-surface);
}

:is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar__module h2 {
  margin: 0 0 .65rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

@media (max-width: 991.98px) {
  :is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  :is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-layout__sidebar {
    position: static;
  }

  :is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar>.card {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  :is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-avatar__upload,
  :is(#RadicalMart.rm-orders, #RadicalMart.rm-personal, #RadicalMart.rm-settings, #RadicalMartFavorites.rm-favorites--authenticated) .rm-account-sidebar .list-group-item {
    transition: none;
  }
}

/* Personal data page: the same account shell, with form sections in the
   Azalia card language. */
#RadicalMart.rm-personal {
  --azalia-orders-muted: #8b7d7b;
  --azalia-orders-line: #eadbd5;
  --azalia-orders-surface: #fffdfb;
}

#RadicalMart.rm-personal .rm-personal__head {
  margin-bottom: 1.75rem;
}

#RadicalMart.rm-personal .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#RadicalMart.rm-personal .section-eyebrow--dot::before {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#RadicalMart.rm-personal .rm-page-head {
  margin-top: .45rem;
}

#RadicalMart.rm-personal .rm-personal__intro {
  max-width: 42rem;
  margin: .85rem 0 0;
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#RadicalMart.rm-personal .rm-personal__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#RadicalMart.rm-personal .rm-personal__section {
  overflow: hidden;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1.2rem;
  background: var(--azalia-orders-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
}

#RadicalMart.rm-personal .rm-personal__section-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--azalia-orders-line);
  background: var(--color-surface);
}

#RadicalMart.rm-personal .rm-personal__section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .03em;
}

#RadicalMart.rm-personal .rm-personal__section-head h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.2;
}

#RadicalMart.rm-personal .rm-personal__section-body {
  padding: 1.35rem;
}

#RadicalMart.rm-personal .rm-personal__section-body fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

#RadicalMart.rm-personal .rm-personal__section-body fieldset+fieldset {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--azalia-orders-line);
}

#RadicalMart.rm-personal .rm-personal__section-body legend {
  float: none;
  width: auto;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#RadicalMart.rm-personal .rm-personal__section-body .row {
  row-gap: 1rem;
}

#RadicalMart.rm-personal .rm-personal__section-body .control-group {
  margin-bottom: 0;
}

#RadicalMart.rm-personal .rm-personal__section-body .control-label {
  margin-bottom: .4rem;
}

#RadicalMart.rm-personal .rm-personal__section-body .control-label label,
#RadicalMart.rm-personal .rm-personal__section-body .form-check-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

#RadicalMart.rm-personal .rm-personal__section-body .form-control,
#RadicalMart.rm-personal .rm-personal__section-body .form-select,
#RadicalMart.rm-personal .rm-personal__section-body input:not([type="checkbox"]):not([type="radio"]),
#RadicalMart.rm-personal .rm-personal__section-body textarea {
  min-height: 2.8rem;
  border: 1px solid var(--azalia-orders-line);
  border-radius: .8rem;
  background: var(--azalia-orders-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-personal .rm-personal__section-body .form-control:focus,
#RadicalMart.rm-personal .rm-personal__section-body .form-select:focus,
#RadicalMart.rm-personal .rm-personal__section-body input:focus,
#RadicalMart.rm-personal .rm-personal__section-body textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .15rem rgba(var(--color-accent-rgb), .12);
}

#RadicalMart.rm-personal .rm-personal__section-body textarea {
  min-height: 6rem;
}

#RadicalMart.rm-personal .rm-personal__section-body .form-text,
#RadicalMart.rm-personal .rm-personal__section-body .help-block,
#RadicalMart.rm-personal .rm-personal__section-body .form-control-feedback {
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-personal .rm-personal__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: .25rem;
}

#RadicalMart.rm-personal .rm-personal__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-width: 11rem;
  min-height: 3rem;
  padding: .75rem 1.35rem;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

#RadicalMart.rm-personal .rm-personal__actions .ar-arrow::before {
  transform: rotate(45deg);
}

@media (max-width: 767.98px) {

  #RadicalMart.rm-personal .rm-personal__section-head,
  #RadicalMart.rm-personal .rm-personal__section-body {
    padding: 1rem;
  }

  #RadicalMart.rm-personal .rm-personal__section-head h2 {
    font-size: var(--font-size-base);
  }

  #RadicalMart.rm-personal .rm-personal__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #RadicalMart.rm-personal .rm-personal__actions .btn {
    transition: none;
  }
}

/* Account settings: keep the same navigation shell and form language as the
   personal data page. */
#RadicalMart.rm-settings {
  --azalia-orders-muted: #8b7d7b;
  --azalia-orders-line: #eadbd5;
  --azalia-orders-surface: #fffdfb;
  padding-block: 2rem 3.5rem;
}

#RadicalMart.rm-settings .rm-settings__head {
  margin-bottom: 1.75rem;
}

#RadicalMart.rm-settings .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#RadicalMart.rm-settings .section-eyebrow--dot::before {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#RadicalMart.rm-settings .rm-page-head {
  margin-top: .45rem;
}

#RadicalMart.rm-settings .rm-settings__intro {
  max-width: 42rem;
  margin: .85rem 0 0;
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#RadicalMart.rm-settings .rm-settings__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#RadicalMart.rm-settings .rm-settings__card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1.2rem;
  background: var(--azalia-orders-surface);
  box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), .06);
}

#RadicalMart.rm-settings .rm-settings__card fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}

#RadicalMart.rm-settings .rm-settings__card-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--azalia-orders-line);
  background: var(--color-surface);
}

#RadicalMart.rm-settings .rm-settings__card-mark {
  color: var(--color-accent);
  font-size: 1.6rem;
  line-height: .5;
}

#RadicalMart.rm-settings .rm-settings__card-head h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.2;
}

#RadicalMart.rm-settings .rm-settings__fields {
  padding: 1.35rem 1.35rem 0;
}

#RadicalMart.rm-settings .rm-settings__fields .control-group {
  margin-top: 0;
  margin-bottom: 1rem;
}

#RadicalMart.rm-settings .rm-settings__fields .control-label {
  margin-bottom: .4rem;
}

#RadicalMart.rm-settings .rm-settings__fields .control-label label,
#RadicalMart.rm-settings .rm-settings__fields .form-check-label {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

#RadicalMart.rm-settings .rm-settings__fields .form-control,
#RadicalMart.rm-settings .rm-settings__fields .form-select,
#RadicalMart.rm-settings .rm-settings__fields input:not([type="checkbox"]):not([type="radio"]),
#RadicalMart.rm-settings .rm-settings__fields textarea {
  min-height: 2.8rem;
  border: 1px solid var(--azalia-orders-line);
  border-radius: .8rem;
  background: var(--azalia-orders-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-settings .rm-settings__fields .form-control:focus,
#RadicalMart.rm-settings .rm-settings__fields .form-select:focus,
#RadicalMart.rm-settings .rm-settings__fields input:focus,
#RadicalMart.rm-settings .rm-settings__fields textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .15rem rgba(var(--color-accent-rgb), .12);
}

#RadicalMart.rm-settings .rm-settings__fields .form-text,
#RadicalMart.rm-settings .rm-settings__fields .help-block,
#RadicalMart.rm-settings .rm-settings__fields .form-control-feedback {
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-xs);
}

#RadicalMart.rm-settings .rm-settings__message {
  margin: 1.25rem 1.35rem 0;
  border: 0;
  border-radius: .8rem;
  font-size: var(--font-size-sm);
}

#RadicalMart.rm-settings .rm-settings__card-actions {
  display: flex;
  justify-content: flex-end;
  padding: .35rem 1.35rem 1.35rem;
}

#RadicalMart.rm-settings .rm-settings__card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-width: 11rem;
  min-height: 3rem;
  padding: .75rem 1.35rem;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
}

#RadicalMart.rm-settings .rm-settings__update {
  appearance: none;
  -webkit-appearance: none;
}

#RadicalMart.rm-settings .rm-settings__card-actions .ar-arrow::before {
  transform: rotate(45deg);
}

@media (max-width: 767.98px) {

  #RadicalMart.rm-settings .rm-settings__card-head,
  #RadicalMart.rm-settings .rm-settings__fields {
    padding: 1rem;
  }

  #RadicalMart.rm-settings .rm-settings__card-actions {
    padding: .25rem 1rem 1rem;
  }

  #RadicalMart.rm-settings .rm-settings__card-head h2 {
    font-size: var(--font-size-base);
  }

  #RadicalMart.rm-settings .rm-settings__card-actions .btn {
    width: 100%;
  }
}

/* Product gallery (com_radicalmart/product/default_gallery.php) — Swiper
   main + thumbnails with a Fancybox lightbox. Structure/behavior mirrors the
   sibling parmaled project's own version 1:1; only the visual language here
   (radius, accent, card surface) matches this site instead. */
#RadicalMart .rm-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#RadicalMart .rm-product-gallery__main {
  position: relative;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(17, 17, 17, 0.06);
  overflow: hidden;
}

#RadicalMart .rm-product-gallery__swiper-main {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Core's own slide layout wraps the <img> in a Bootstrap "contain, centered,
   white background" box (<a><div class="bg-white h-100 d-flex ... p-1">
   <img class="mh-100 mw-100">), meant for a fit-inside thumbnail — not a
   full-bleed hero image. The chain's percentage heights only resolve
   because .swiper-slide gets a definite pixel height from Swiper JS, but
   the <a> itself has no sizing rule at all (plain inline element), which
   breaks that chain: it shrinks to the image's natural size instead of
   filling the slide, leaving the white background visible as a "frame"
   around it. Forcing block + 100%/100% down every level (and ignoring the
   original max-width/max-height caps, since object-fit:cover needs the box
   itself full-size to crop against) fixes it. */
#RadicalMart .rm-product-gallery__swiper-main .swiper-slide>a {
  display: block;
  width: 100%;
  height: 100%;
}

#RadicalMart .rm-product-gallery__swiper-main .swiper-slide>a>div {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

#RadicalMart .rm-product-gallery__swiper-main img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}

#RadicalMart .rm-product-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--color-accent-strong);
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.1);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

#RadicalMart .rm-product-gallery__nav:hover {
  background-color: var(--color-accent);
  color: #fff;
}

#RadicalMart .rm-product-gallery__nav--prev {
  left: 0.75rem;
}

#RadicalMart .rm-product-gallery__nav--next {
  right: 0.75rem;
}

#RadicalMart .rm-product-gallery__nav.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

#RadicalMart .rm-product-gallery__thumbs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#RadicalMart .rm-product-gallery__thumbs {
  flex: 1 1 auto;
  min-width: 0;
  height: 5.5rem;
  padding: 5px;
  box-sizing: border-box;
  overflow: hidden;
}

#RadicalMart .rm-product-gallery__thumbs .swiper-wrapper {
  height: 100%;
}

#RadicalMart .rm-product-gallery__thumbs .swiper-slide {
  width: 5.5rem;
  height: 100%;
}

#RadicalMart .rm-product-gallery__thumb {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

/* Same core Bootstrap "contain, centered, bg-light" wrapper issue as the
   main slide (see .rm-product-gallery__swiper-main above) — the <div>
   around the <img> needs to be forced full-size or it shrinks to the
   image's own content size instead of filling the thumb. */
#RadicalMart .rm-product-gallery__thumb>div {
  display: block;
  width: 100%;
  height: 100%;
}

#RadicalMart .rm-product-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}

#RadicalMart .rm-product-gallery__thumbs .swiper-slide-thumb-active .rm-product-gallery__thumb {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

#RadicalMart .rm-product-gallery__thumb-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 5.5rem;
  border: none;
  background: transparent;
  color: var(--color-accent-strong);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s;
}

#RadicalMart .rm-product-gallery__thumb-nav:hover {
  opacity: 1;
}

#RadicalMart .rm-product-gallery__thumb-nav.swiper-button-disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* Favorites page: guests keep the full-width catalog, while authenticated
   customers get the shared account navigation rail. */
#RadicalMartFavorites.rm-favorites--authenticated {
  --azalia-orders-muted: #8b7d7b;
  --azalia-orders-line: #eadbd5;
  --azalia-orders-surface: #fffdfb;
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-favorites__head {
  margin-bottom: 1.75rem;
}

#RadicalMartFavorites.rm-favorites--authenticated .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#RadicalMartFavorites.rm-favorites--authenticated .section-eyebrow--dot::before {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-page-head {
  margin-top: .45rem;
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-favorites__intro {
  max-width: 42rem;
  margin: .85rem 0 0;
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-favorites__products .row {
  row-gap: 1rem;
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-favorites__products .mb-3 {
  margin-bottom: 0 !important;
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-favorites__empty {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--azalia-orders-line);
  border-radius: 1rem;
  background: var(--azalia-orders-surface);
  color: var(--azalia-orders-muted);
  font-size: var(--font-size-sm);
}

#RadicalMartFavorites.rm-favorites--authenticated .rm-favorites__pagination {
  margin-inline: 0;
}

/* ==========================================================================
   Product page (com_radicalmart/product/*.php) — layout mirrors the sibling
   parmaled project's own override 1:1; only the visual language here
   matches this site's card/wholesale-box/knopka conventions instead.
   ========================================================================== */

#RadicalMart.product .rm-product-card__category {
  margin-bottom: 0.4rem;
}

/* .rm-badges keeps its normal position:absolute overlay here — the gallery
   wrapper in default.php is already position:relative, same as a catalog
   card's image wrap, so no override needed; badges sit over the photo. */

#RadicalMart .rm-product-quickspecs {
  margin-top: 1.25rem;
}

#RadicalMart .rm-product-quickspecs__title {
  margin-bottom: 0.75rem;
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Receipt-style "leader dots" row: label truncates and fills the remaining
   space with dots via ::after, value sits fixed at the right — this is what
   the earlier version of this rule (an empty ::after with width:100%, on a
   non-growing flex label) was trying and failing to be; that produced a
   stray empty block instead of a line, not real dots. */
#RadicalMart .rm-product-quickspecs__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

#RadicalMart .rm-product-quickspecs__row:last-child {
  border-bottom: none;
}

#RadicalMart .rm-product-quickspecs__label {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--color-muted-text, #8b7d7b);
  font-size: 0.85rem;
  white-space: nowrap;
}

#RadicalMart .rm-product-quickspecs__label::after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  margin-left: 0.35rem;
  color: var(--color-border);
}

#RadicalMart .rm-product-quickspecs__value {
  flex: 0 0 auto;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

#RadicalMart .rm-product-intro {
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

/* Price sidebar card */
#RadicalMart .rm-product-side {
  position: sticky;
  top: 90px;
  padding: 1.45rem 1.35rem 1.35rem;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 12px 30px rgba(75, 37, 31, 0.06);
}

#RadicalMart .rm-product-price {
  margin: 0;
}

#RadicalMart .rm-product-price__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

#RadicalMart .rm-product-price__final {
  color: var(--color-text);
  font-size: clamp(1.6rem, 1.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

#RadicalMart .rm-product-price__old {
  color: var(--color-muted-text, #8b7d7b);
  font-size: 1.05rem;
  text-decoration: line-through;
}

#RadicalMart .rm-product-price__discount-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

#RadicalMart .rm-product-price__discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-accent-strong);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

#RadicalMart .rm-product-price__discount-until {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-muted-text, #8b7d7b);
  font-size: 0.75rem;
}

#RadicalMart .rm-product-price__discount-until-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#RadicalMart .rm-product-price__stock-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

#RadicalMart .rm-product-price__stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

#RadicalMart .rm-product-price__stock-remain {
  color: var(--color-muted-text, #8b7d7b);
  font-size: 0.75rem;
}

#RadicalMart .rm-product-price__stock-dot {
  display: inline-block;
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

#RadicalMart .rm-product-price__stock--in {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

#RadicalMart .rm-product-price__stock--in .rm-product-price__stock-dot {
  background: #2e7d32;
}

#RadicalMart .rm-product-price__stock--out {
  background: rgba(139, 125, 123, 0.12);
  color: var(--color-muted-text, #8b7d7b);
}

#RadicalMart .rm-product-price__stock--out .rm-product-price__stock-dot {
  background: var(--color-muted-text, #8b7d7b);
}

/* Wholesale box lives inside .rm-product-side now (nested, not a separate
   card below it) — a pink-tinted panel with the wholesale price, and a
   plain informational note under it (this is automatic at checkout, not a
   link to click, so no more arrow icon / hover state). */
#RadicalMart .rm-product-wholesale-card {
  margin-top: 1.1rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(var(--color-accent-rgb), 0.06);
}

#RadicalMart .rm-product-wholesale-card .rm-wholesale-box {
  background: transparent;
  padding: 0;
  border: none;
}

#RadicalMart .rm-product-wholesale-card .rm-wholesale-box__icon {
  background: #fff;
  border: none;
}

#RadicalMart .rm-product-wholesale-card__note {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent-strong);
  opacity: 0.75;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Quantity stepper + add-to-cart, shared radicalmart-cart wrapper */
#RadicalMart .rm-product-buy {
  display: flex;
  flex-direction: column;
  margin-top: 1.45rem;
}

#RadicalMart .rm-product-buy [radicalmart-variability] {
  order: 1;
}

#RadicalMart .rm-product-buy .cart-quantity {
  order: 2;
}

#RadicalMart .rm-product-buy__actions {
  order: 3;
}

/* Site-only rendering of the variability color picker (see
   layouts/plugins/radicalmart_fields/color/field/variability/colors.php) —
   swatch circles with a ring on the selected one, same visual language as
   the sidebar filter's .rm-color-swatches, sized for the product page.
   The generic radicalmart-variability wrapper also renders its own Joomla
   control-label ("Цвет") above the field — redundant with our own
   "Цвет: Синий" line inside the widget, so it's hidden here (scoped to
   just this widget, so other variability field types keep their label). */
#RadicalMart [radicalmart-variability] .control-group:has(> .controls > .rm-variability-swatches),
#RadicalMart [radicalmart-variability] .control-group:has(> .controls > .rm-variability-chips) {
  margin: 0;
}

#RadicalMart [radicalmart-variability] .control-group:has(> .controls > .rm-variability-swatches) .control-label,
#RadicalMart [radicalmart-variability] .control-group:has(> .controls > .rm-variability-chips) .control-label {
  display: none;
}

#RadicalMart [radicalmart-variability] .control-group:has(> .controls > .rm-variability-swatches) .controls,
#RadicalMart [radicalmart-variability] .control-group:has(> .controls > .rm-variability-chips) .controls {
  margin: 0;
}

#RadicalMart .rm-variability-swatches {
  margin: 0 0 1.05rem;
}

#RadicalMart .rm-variability-swatches__label {
  margin-bottom: 0.65rem;
  color: var(--color-text);
  font-size: 0.875rem;
}

#RadicalMart .rm-variability-swatches__current {
  font-weight: 700;
}

#RadicalMart .rm-variability-swatches__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

#RadicalMart .rm-variability-swatches__option {
  display: block;
  cursor: pointer;
}

#RadicalMart .rm-variability-swatches__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#RadicalMart .rm-variability-swatches__swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.15s, transform 0.15s;
}

#RadicalMart .rm-variability-swatches__option:not(.is-active):hover .rm-variability-swatches__swatch {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(0, 0, 0, 0.18);
}

#RadicalMart .rm-variability-swatches__option.is-active .rm-variability-swatches__swatch {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

#RadicalMart .rm-variability-swatches__option:has(.rm-variability-swatches__input:focus-visible) .rm-variability-swatches__swatch {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* Site-only rendering of non-color variability fields (see
   layouts/plugins/radicalmart_fields/standard/field/variability/buttons.php)
   — a row of pill chips, same "Label: value" line convention as the color
   swatches above, but rectangular since there's no color to show. */
#RadicalMart .rm-variability-chips {
  margin: 0 0 1.05rem;
}

#RadicalMart .rm-variability-chips__label {
  margin-bottom: 0.65rem;
  color: var(--color-text);
  font-size: 0.875rem;
}

#RadicalMart .rm-variability-chips__current {
  font-weight: 700;
}

#RadicalMart .rm-variability-chips__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#RadicalMart .rm-variability-chips__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

#RadicalMart .rm-variability-chips__option:not(.is-active):hover {
  border-color: var(--color-accent);
}

#RadicalMart .rm-variability-chips__option.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

#RadicalMart .rm-variability-chips__option:has(.rm-variability-chips__input:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

#RadicalMart .rm-variability-chips__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Add-to-cart button + the favorites heart the plugin injects right after
   it (see the beforeDisplayContent echo in default.php) — same row. */
#RadicalMart .rm-product-buy__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Match the "add to cart" button to the same size used on category product
   cards (.rm-card-actions .knopka) — shorter than the site-wide .knopka
   default, which is meant for standalone CTAs, not a button sitting next
   to a 42px favorite heart. */
#RadicalMart .rm-product-buy__actions .knopka {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  border-radius: 14px;
}

#RadicalMart .cart-quantity {
  display: flex;
  align-items: stretch;
  width: 132px;
  margin: 0 0 1rem;
  border: 1px solid #eadbd5;
  border-radius: 14px;
  overflow: hidden;
  background: #f8f1ed;
  box-sizing: border-box;
}

#RadicalMart .cart-quantity__button {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

#RadicalMart .cart-quantity__button:hover {
  background: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-accent-strong);
}

#RadicalMart .cart-quantity__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  -moz-appearance: textfield;
  appearance: textfield;
}

#RadicalMart .cart-quantity__input::-webkit-outer-spin-button,
#RadicalMart .cart-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

#RadicalMart .rm-product-buy .rm-product-variability {
  margin-bottom: 0.85rem;
}

/* Tabs (Joomla's native <joomla-tab> web component) */
#RadicalMart #rm-product-specs joomla-tab>div[role="tablist"] {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
}

#RadicalMart #rm-product-specs joomla-tab button[role="tab"] {
  padding: 0 0 0.875rem;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-muted-text, #8b7d7b);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

#RadicalMart #rm-product-specs joomla-tab button[role="tab"][aria-selected="true"] {
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--color-accent-strong);
}

#RadicalMart #rm-product-specs joomla-tab button[role="tab"]::after {
  right: 0;
  left: 0;
  height: 2px;
  background-color: transparent;
  opacity: 1;
}

#RadicalMart #rm-product-specs joomla-tab button[aria-selected="true"]::after {
  background-color: var(--color-accent);
}

#RadicalMart #rm-product-specs joomla-tab>joomla-tab-element {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* "С этим товаром часто покупают" section heading (plg_radicalmart_related
   override, templates/cassiopeia_azalia/html/plg_radicalmart_related/
   grid.php) — same flower-ornament divider motif as .rm-card-divider on the
   product cards themselves, instead of a plain Bootstrap .h3. */
#RadicalMart .rm-related-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: clamp(1.35rem, 1.6vw, 1.75rem);
  font-weight: 400;
  color: var(--color-text);
}

#RadicalMart .rm-related-title__line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(var(--color-accent-rgb), 0.25);
}

#RadicalMart .rm-related-title__ornament {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

#RadicalMart .rm-related-title__ornament circle {
  fill: var(--color-accent);
  stroke: none;
}

/* Blog landing/category view ------------------------------------------------
   The category remains Joomla's com_content blog view; these rules only give
   its existing override an editorial Azalia presentation. */
.azalia-blog-page {
  position: relative;
}

.azalia-news-intro {
  max-width: 42rem;
  margin: -0.35rem 0 2.25rem;
  color: #776e6c;
  font-size: 1.05rem;
  line-height: 1.6;
}

.azalia-blog-card {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--color-accent-rgb), 0.14);
  border-radius: 1rem;
  background: rgba(255, 253, 251, 0.72);
  box-shadow: 0 0.75rem 2rem rgba(86, 58, 49, 0.04);
}

.azalia-blog-card__media {
  overflow: hidden;
  aspect-ratio: 1.65 / 1;
  background: var(--color-surface);
}

.azalia-blog-card__media figure,
.azalia-blog-card__media .item-image,
.azalia-blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.azalia-blog-card__media img {
  object-fit: cover;
  transition: transform 400ms ease;
}

.azalia-blog-card:hover .azalia-blog-card__media img {
  transform: scale(1.035);
}

.azalia-blog-card__content {
  display: flex;
  min-height: 17rem;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.05rem 1.2rem 1.25rem;
}

.azalia-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
  color: #8c817e;
  font-size: 0.72rem;
}

.azalia-blog-card__category {
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), 0.07);
  color: var(--color-accent);
  font-size: 0.68rem;
}

.azalia-blog-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.75rem 0 1rem;
  color: #776e6c;
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.azalia-blog-card__excerpt p {
  margin: 0;
}

.azalia-blog-card__readmore {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  margin-top: auto;
  color: var(--color-accent);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.azalia-blog-card__readmore span {
  font-size: 1.15rem;
  line-height: 0.8;
  transition: transform 160ms ease;
}

.azalia-blog-card__readmore:hover span,
.azalia-blog-card__readmore:focus-visible span {
  transform: translateX(0.2rem);
}

.azalia-content-category__navigation {
  display: flex;
  justify-content: center;
  margin-top: 2.75rem;
}

.azalia-content-category__pagination .pagination__wrapper {
  display: block;
}

.azalia-content-category__pagination ul.pagination {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0;
}

.azalia-content-category__pagination .page-item {
  margin: 0;
}

.azalia-content-category__pagination .page-link {
  display: inline-flex;
  width: 2.55rem;
  height: 2.55rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent);
  font-size: 0.86rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

/* Bootstrap rounds the first/last pagination links as a joined button group.
   The Azalia pagination uses separated circular controls instead. */
.azalia-content-category__pagination .pagination .page-item:first-child .page-link,
.azalia-content-category__pagination .pagination .page-item:last-child .page-link {
  border-radius: 50% !important;
}

.azalia-content-category__pagination .page-link:hover,
.azalia-content-category__pagination .page-link:focus-visible {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.06);
  color: var(--color-accent-strong);
  box-shadow: none;
}

.azalia-content-category__pagination .page-item.active .page-link {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.azalia-content-category__pagination .page-item.disabled .page-link {
  border-color: rgba(var(--color-accent-rgb), 0.2);
  color: rgba(var(--color-accent-rgb), 0.45);
  opacity: 1;
}

.azalia-content-category__pagination .icon-angle-double-left::before,
.azalia-content-category__pagination .icon-angle-left::before,
.azalia-content-category__pagination .icon-angle-right::before,
.azalia-content-category__pagination .icon-angle-double-right::before {
  font-size: 1rem;
}

/* Universal single-material layout: shared by news articles and service pages. */
.azalia-content-article>.item-image {
  float: none;
  width: 100%;
  height: 300px;
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--color-surface);
}

.azalia-content-article>.item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.azalia-content-article__body {
  margin-top: 1.5rem;
  padding: clamp(1.35rem, 2.5vw, 2.5rem);
  border: 1px solid rgba(var(--color-accent-rgb), 0.12);
  border-radius: 1.25rem;
  background: rgba(255, 253, 251, 0.72);
  color: #4f4846;
  font-size: 1rem;
  line-height: 1.75;
}

.azalia-content-article__body> :first-child {
  margin-top: 0;
}

.azalia-content-article__body> :last-child {
  margin-bottom: 0;
}

.azalia-content-article__body h2,
.azalia-content-article__body h3,
.azalia-content-article__body h4 {
  margin-top: 2rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-weight: 400;
  line-height: 1.2;
}

.azalia-content-article__body h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
}

.azalia-content-article__body h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.azalia-content-article__body p,
.azalia-content-article__body ul,
.azalia-content-article__body ol {
  margin-bottom: 1rem;
}

.azalia-content-article__body ul,
.azalia-content-article__body ol {
  padding-left: 1.25rem;
}

@media (max-width: 767.98px) {
  .azalia-news-intro {
    font-size: 0.95rem;
  }

  .azalia-blog-card__content {
    min-height: 0;
  }

  .azalia-content-article>.item-image {
    height: 220px;
    margin-bottom: 1rem;
    border-radius: 1rem;
  }

  .azalia-content-article__body {
    font-size: 0.95rem;
    line-height: 1.65;
  }

}

/* Site footer (HTML custom module in the footer position) + the separate
   dark bottom bar (its own module/position, footer-bottom — see index.php).
   Reuses established pieces throughout: .azalia-wholesale-promo__eyebrow/
   __title/__text for the newsletter heading, .knopka/.knopka2/.ripple-hover
   for buttons, .open-contact-modal for the two CTAs (same shared
   #contactModal as the rest of the site), .azalia-delivery-icon for every
   icon circle, and the .rf-form/.rf-button-send RadicalForm wiring for the
   subscribe form. Only the layout scaffolding below is new. */
/* Cassiopeia core's own .footer rule (template.min.css) sets a dark
   gradient background + color:#fff for its default footer look, and
   .footer a:not(.btn){color:currentColor} then makes every link inherit
   that white. Overriding color here (same specificity as core's .footer
   rule, wins by cascade order since user.css loads last) fixes every
   descendant link/icon that relies on currentColor/inheritance in one
   place, instead of patching each one individually. */
/* Newsletter is its own module/position (footer-top) so its background can
   span full width the same way as the wholesale/delivery home sections
   (.container-home-wholesale etc): the outer wrapper here carries the
   margin/radius/background, .container inside just constrains the text. */
.container-footer-top {
  background: url("/images/footbg.webp") no-repeat center / cover;
}

.container-footer {
  position: relative;
  padding: var(--section-space-y) 0 0;
  background: var(--color-bg);
  color: var(--color-text);
}

.container-footer::before,
.container-footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: 15rem;
  height: 26rem;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.container-footer::before {
  left: 0;
  background-image: url("/images/flowers-left.webp");
  background-position: bottom left;
}

.container-footer::after {
  right: 0;
  background-image: url("/images/flowers-right.webp");
  background-position: bottom right;
}

.container-footer>.container {
  position: relative;
  z-index: 1;
}

.azalia-footer-newsletter {
  padding: 3rem 0;
}

.azalia-footer-newsletter__content {
  max-width: 32rem;
}

.azalia-footer-newsletter__form {
  margin-top: 1.75rem;
}

.azalia-footer-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.azalia-footer-newsletter__input {
  flex: 1 1 16rem;
  min-height: 3.1rem;
  padding: .85rem 1.35rem;
  border: 1px solid #eadbd5;
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  box-shadow: none;
}

.azalia-footer-newsletter__input::placeholder {
  color: var(--color-text);
  opacity: .5;
}

.azalia-footer-newsletter__row .knopka {
  flex: 0 0 auto;
}

.azalia-footer-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1rem;
  color: var(--color-text);
  opacity: .65;
  font-size: var(--font-size-sm);
}

.azalia-footer-divider {
  position: relative;
  height: 1px;
  margin: 0;
  background: #eadbd5;
}

.azalia-footer-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .55rem;
  height: .55rem;
  border: 1px solid var(--color-accent);
  background: var(--color-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.azalia-footer-brand__mark {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.35rem;
}

.azalia-footer-brand__text {
  max-width: 24rem;
  margin: 0 0 1.1rem;
  color: var(--color-text);
  opacity: .65;
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.azalia-footer-social {
  display: flex;
  gap: .65rem;
}

.azalia-footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(var(--color-accent-rgb), .3);
  border-radius: 50%;
  background: transparent;
  color: var(--color-accent-strong) !important;
  font-size: 1.1rem;
  text-decoration: none !important;
  transition: background-color .15s, color .15s, border-color .15s;
}

.azalia-footer-social__link:hover,
.azalia-footer-social__link:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff !important;
}

.azalia-footer-col__title {
  margin: 0 0 1.25rem;
  color: var(--color-text);
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-xl);
  font-weight: 400;
}

.azalia-footer-col__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.azalia-footer-col__list a {
  color: var(--color-text);
  opacity: .68;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: opacity .15s, color .15s;
}

.azalia-footer-col__list a:hover {
  color: var(--color-accent);
  opacity: 1;
}

.azalia-footer-contacts {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.azalia-footer-contacts li {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.azalia-footer-contacts a {
  color: var(--color-text);
  text-decoration: none;
}

.azalia-footer-contacts a:hover {
  color: var(--color-accent);
}

.azalia-footer-contacts__icon {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.azalia-footer-contacts__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.azalia-footer-cta {
  height: 100%;
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--color-surface);
}

.azalia-footer-cta .azalia-wholesale-promo__eyebrow {
  margin-bottom: .4rem;
}

.azalia-footer-cta .azalia-footer-col__title {
  font-size: var(--font-size-lg);
  line-height: 1.25;
  margin-bottom: .5rem;
}

.azalia-footer-cta .azalia-footer-brand__text {
  max-width: none;
  margin-bottom: 1.25rem;
}

.azalia-footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.azalia-footer-cta__actions .knopka {
  justify-content: center;
  flex: 0 0 auto;
}

.azalia-footer-cta__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}

.azalia-footer-cta__info-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.azalia-footer-cta__info-item a {
  color: var(--color-text);
  text-decoration: none;
}

.azalia-footer-cta__info-item a:hover {
  color: var(--color-accent);
}

.azalia-footer-cta__info-item .azalia-delivery-icon {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  background: none;
}

.azalia-footer-cta__info-item .azalia-delivery-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: var(--color-accent-strong);
}

.azalia-footer-cta__divider {
  width: 1px;
  height: 1.5rem;
  background: #eadbd5;
}

.azalia-footer-cta__note {
  margin: 0;
  color: var(--color-text);
  opacity: .55;
  font-size: var(--font-size-xs);
}

.azalia-footer-cta .knopka2 {
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent) !important;
}

.azalia-footer-cta .knopka2:hover,
.azalia-footer-cta .knopka2:focus-visible {
  background: rgba(var(--color-accent-rgb), .08);
  color: var(--color-accent-strong);
}


.azalia-footer-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.75rem 0;
  border-top: 1px solid #eadbd5;
}

.azalia-footer-trust__payment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.azalia-footer-trust__payment-label {
  margin-right: .4rem;
  color: var(--color-text);
  opacity: .55;
  font-size: var(--font-size-xs);
}

.azalia-footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 1.9rem;
  padding: 0 .6rem;
  border: 1px solid #eadbd5;
  border-radius: .5rem;
  color: var(--color-text);
  opacity: .7;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.azalia-footer-badge--icon {
  width: 1.9rem;
  min-width: 1.9rem;
  padding: 0;
  border-radius: 50%;
}

.azalia-footer-badge--brand {
  font-size: 1.3rem;
  line-height: 1;
}

.azalia-footer-badge--icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.azalia-footer-trust__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.azalia-footer-trust__badge {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--color-text);
  opacity: .75;
  font-size: var(--font-size-xs);
  max-width: 12rem;
}

.azalia-footer-trust__badge .azalia-delivery-icon {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
  background: rgba(var(--color-accent-rgb), .07);
}

.azalia-footer-trust__badge .azalia-delivery-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.azalia-footer-badge img {
  display: block;
  height: 1.05rem;
  width: auto;
}

@media (max-width: 767.98px) {
  .azalia-footer-newsletter {
    padding: 2rem;
  }

  .azalia-footer-newsletter__content {
    max-width: none;
    padding-left: 0;
  }

  .azalia-footer-trust {
    justify-content: flex-start;
  }
}

/* Dark bottom bar — separate module/position (footer-bottom), separate
   full-width background from the rest of the footer above. */
.container-footer-bottom {
  padding: 1.5rem 0;
  background: url("/images/copbg.webp") no-repeat center / cover;
}

.azalia-footer-bottom__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.azalia-footer-bottom__legal {
  margin: 0;
  color: #fff;
  opacity: .85;
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.azalia-footer-bottom__links {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  opacity: .85;
  font-size: var(--font-size-xs);
}

.azalia-footer-bottom__links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2rem;
}

.azalia-footer-bottom__links a:hover {
  opacity: .8;
}

.azalia-footer-bottom__quote {
  margin: 0;
  color: #fff;
  opacity: .85;
  font-family: var(--cassiopeia-font-family-headings, Georgia, serif);
  font-size: var(--font-size-base);
  font-style: italic;
}