/* ============================================
   VELOUR — Design System & Stylesheet
   ============================================ */

/* ---------- TOKENS ---------- */
:root {
  /* ---- Brand palette: #ff009e → #8700f9 ---- */
  /* Neutral grey page background (was a warm cream, then progressively
     darkened greys) for clearer contrast against the white product cards.
     Also overridden directly on several homepage Elementor sections
     further down this file (their own hardcoded background, not this
     variable) — kept in sync with this value there too. */
  --clr-bg:          #f8f8f8;
  --clr-surface:     #ffffff;
  --clr-surface-2:   #f2f0ec;
  --clr-surface-3:   #ebe8e3;
  --clr-border:      rgba(0,0,0,0.08);
  --clr-border-2:    rgba(0,0,0,0.14);

  --clr-primary:     #9c50ff;
  --clr-primary-2:   #af73ff;
  --clr-primary-dark:#7a2ed6;
  --clr-accent:      #6bdd99;
  --clr-accent-2:    #8be6b3;
  --clr-gold:        #b8860b;
  --clr-gold-2:      #d4af37;
  --clr-teal:        #0d9488;
  --clr-teal-2:      #14b8a6;

  --clr-text:        #1a0a1e;
  --clr-text-muted:  #5c4466;
  --clr-text-dim:    #a08ab0;

  --grad-brand:      linear-gradient(135deg, #8d5bf5 0%, #d347ee 100%);
  --grad-brand-r:    linear-gradient(135deg, #d347ee 0%, #8d5bf5 100%);
  --grad-purple:     linear-gradient(135deg, #fce7ff 0%, #fde8fb 50%, #ffe4f5 100%);
  --grad-gold:       linear-gradient(135deg, #fffbf0 0%, #fff8e1 50%, #fffbf0 100%);
  --grad-teal:       linear-gradient(135deg, #f0fdfa 0%, #e6faf8 50%, #f0fdfa 100%);
  --grad-card:       linear-gradient(160deg, #ffffff 0%, #f9f8f5 100%);

  --shadow-sm:       0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:       0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:       0 20px 60px rgba(0,0,0,0.13);
  --shadow-glow:     0 0 40px rgba(160,2,208,0.15);
  --shadow-gold-glow:0 0 40px rgba(184,134,11,0.10);

  --radius-sm:       8px;
  --radius-md:       14px;
  --radius-lg:       20px;
  --radius-xl:       28px;

  --font-display:    'Space Grotesk', system-ui, sans-serif;
  --font-sans:       'Inter', system-ui, sans-serif;

  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Several accordions on this site (shop sidebar categories, mobile nav
   categories, login/register tabs) toggle visibility via the [hidden]
   attribute rather than a class, so JS only has to flip one thing. The
   browser's own UA stylesheet sets [hidden]{display:none}, but any author
   rule on the same element that also sets `display` (e.g. .berry-cat-list,
   .mobile-nav__subcats both use display:flex for their open state) wins
   the cascade at equal specificity — silently making [hidden] do nothing
   and showing the element regardless of the attribute. This guarantees
   [hidden] always wins, everywhere, regardless of what any other rule sets
   display to. */
[hidden] { display: none !important; }

/* Hello Biz's own theme.css ships a theme-wide reset,
   `button:hover, button:focus { background-color: #c36; color: #fff; }`
   (#c36 — a hot reddish-pink completely outside this site's purple/mint
   palette). Any real <button> element that only ever got its RESTING
   state styled (not an explicit :hover/:focus override) silently
   inherits this on tap/hover/keyboard-focus — confirmed live as the root
   cause of at least three separate, unrelated-looking bug reports this
   project (the qty stepper's leaked border, and most recently the
   product-detail page's "Описание" accordion turning bright pink on
   tap). Rather than keep patching each newly-discovered button
   individually, this resets the default here once, for every plain
   <button> site-wide: hover/focus do nothing unless a MORE SPECIFIC
   selector (higher specificity, e.g. any of this file's own button
   classes with their own :hover rule) overrides it again. Scoped to the
   bare `button` element to match hello-biz's own selector exactly, so
   this doesn't touch actual `<a class="button">` links or anything else. */
button:hover,
button:focus {
  background-color: inherit;
  color: inherit;
}

/* overflow-x:hidden deliberately NOT set here (only on body, below) —
   setting it on BOTH html and body triggers a real CSS spec quirk: when
   overflow-x and overflow-y differ in "visible-ness" on the same element,
   the visible one silently computes to `auto` instead. Doing that to
   `html` — the actual root scrolling element in standards mode — hijacks
   which element the browser treats as the page's root scroller, which
   broke window.scrollY tracking (stuck at 0 no matter how far the page
   was scrolled) and, as a direct consequence, broke the header's
   `position:sticky` (calculated relative to the viewport/root scroller)
   — confirmed live: with this rule in place the header scrolled away
   with the page instead of sticking, taking the search bar with it. */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-surface-2); }
::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 3px; }

/* ============================================
   TOP BAR
   ============================================ */
.topbar {
  background: linear-gradient(90deg, #8d5bf5, #d347ee, #8d5bf5);
  background-size: 200% 100%;
  animation: gradientShift 6s ease infinite;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 8px 24px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--grad-brand);
  border-bottom: none;
  border-radius: 0 0 0 40px; /* Only bottom-left is rounded */
  transition: all 0.3s ease;
}

/* Mobile auto-hide on scroll-down / instant reappear on scroll-up — see
   initHeaderScroll() in berry-app.js. transform, not display:none, so the
   existing `transition: all` above animates it smoothly rather than
   snapping away; sticky positioning keeps working with a translated
   element since it's just visually offset, not removed from flow. */
.header--autohidden {
  transform: translateY(-100%);
}

.logo-img-white {
  filter: brightness(0) invert(1);
}

.logo-img {
  transition: filter 0.3s ease;
}

.nav-sale {
  color: #8b5cf6 !important;
  font-weight: 800 !important;
}

.header .nav-sale {
  color: #fff !important;
  background: rgba(255,255,255,0.2);
}

.footer .nav-sale {
  color: #fbcfe8 !important; /* light pink */
}

/* This targeted the reference's own old class name (.logo-img), which
   doesn't exist on our actual markup — the real logo image uses
   .logo__img (see the SVG-sizing fix elsewhere in this file). Left as
   dead code (harmless) and replaced with a rule that actually matches:
   the logo SVG is all-white, invisible once .header.scrolled turns the
   background white below, so force it dark via brightness(0) rather than
   invert (which would shift the leaf accent to an odd magenta instead of
   a clean dark rendering). */
.header.scrolled .logo-img {
  filter: invert(1) hue-rotate(180deg);
}

/* Two stacked logo images (white text+green heart for the transparent/
   purple-gradient top-of-page state vs. purple text+green heart for the
   scrolled white-background state) instead of a filter, since a filter
   can only recolor the whole SVG uniformly and would turn the green heart
   black along with the "berry" text. */
/* Selectors below need two classes (.logo__img.logo__img--color etc.) to
   out-specificity the plain .logo__img { display:block !important... }
   rule further down this file (0,1,0), which otherwise wins by source
   order and defeats this toggle regardless of the .scrolled state. */
.logo__img.logo__img--color {
  display: none;
}

.header.scrolled .logo__img.logo__img--white {
  display: none;
}

.header.scrolled .logo__img.logo__img--color {
  display: block;
}

.header.scrolled #cartBtn .header-action-icon svg,
.header.scrolled #wishBtn .header-action-icon svg,
.header.scrolled #accountBtn .header-action-icon svg {
  stroke: var(--clr-primary);
}

.header.scrolled .burger-btn span {
  background: var(--clr-primary);
}

.header.scrolled .search-btn {
  color: var(--clr-primary);
}

.header.scrolled .header-cart-count {
  background: var(--clr-primary);
  color: #fff;
}

/* Same invisible-on-white bug for the header action buttons (Любими/
   Количка/Акаунт labels + their SVG icons): .header-action-btn hardcodes
   color:#fff unconditionally (further down this file) and each icon's
   inline SVG hardcodes stroke="#fff" directly in the markup — both
   correct for the purple gradient state, both invisible once .scrolled
   turns the background white. SVG presentation attributes like
   stroke="#fff" have the lowest possible CSS specificity, so a plain
   element selector here is enough to override them. */
.header.scrolled .header-action-btn {
  color: var(--clr-primary) !important;
}

.header.scrolled .header-action-icon svg {
  stroke: var(--clr-text);
}

/* !important on background: verified via getComputedStyle that this
   rule was empirically losing the cascade despite correct specificity
   math (0,2,0 vs no competing rule at all on #header/.header found
   anywhere in this file) — matches the same unexplained-but-consistently-
   !important-fixable cascade behavior hit repeatedly elsewhere in this
   theme (search-input border-radius, courier radio circle position,
   etc.), so applying the same proven fix rather than continuing to chase
   a root cause with diminishing returns. */
.header.scrolled {
  top: 0;
  border-radius: 0;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Gradient Header Overrides (Only when at top) */
.header:not(.scrolled) .logo__main {
  background: none;
  -webkit-text-fill-color: initial;
  color: #fff;
}
.header:not(.scrolled) .nav-link {
  color: rgba(255,255,255,0.85);
}
.header:not(.scrolled) .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}
.header:not(.scrolled) .nav-link--sale {
  color: #fff;
  font-weight: 700;
}
.header:not(.scrolled) .nav-link--sale:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.header:not(.scrolled) .search-wrap {
  background: #fff;
}
.header:not(.scrolled) .search-input {
  background: transparent;
  border: none;
  color: var(--clr-text);
}
.header:not(.scrolled) .search-input:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.4);
}
.header:not(.scrolled) .search-btn {
  color: var(--clr-text-muted);
}
.header:not(.scrolled) .search-btn:hover {
  color: var(--clr-primary);
}
.header:not(.scrolled) .icon-btn {
  color: #fff;
}
.header:not(.scrolled) .icon-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.header:not(.scrolled) .badge {
  background: #fff;
  color: var(--clr-primary);
}
.header:not(.scrolled) .burger-btn span {
  background: #fff;
}

.header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}

/* The real logo SVG (logo_BERRY_05.svg) has no width/height attributes on
   its root element, only a viewBox — inside this .logo flex container that
   makes browsers report 0x0 intrinsic size and collapse it, regardless of
   the height="" HTML attribute already on the <img> tag. Explicit CSS
   height forces correct sizing; width:auto preserves its aspect ratio. */
.logo__img {
  height: 48px !important;
  width: auto !important;
  display: block;
}

/* The original brief called for a "large centered logo" in the footer —
   .footer__brand is a flex column (align-items defaults to stretch), so
   .logo (itself flex-direction:column) stretches to the column's full
   width, but its img child (explicit width:auto for the SVG sizing fix
   above) doesn't fill that stretched width, leaving it sitting at the
   start/left edge instead of centered within the now-wider box. Scoped to
   the footer only — the header logo is already correctly centered via its
   own row layout and shouldn't be touched by this. */
.footer__brand .logo {
  align-items: center;
}

.footer__brand .logo__img {
  height: 44px !important;
}

.logo__main {
  font-family: 'Raleway', sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo__sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* Category nav row: a second row under the logo/search/actions row,
   listing the 7 top-level product categories (wired up via wp_nav_menu
   at the 'menu-1' location — see berry_render_site_header()). The
   original reference hides this to make room for a big search bar;
   the user explicitly asked for a visible category navbar instead,
   so it's shown here as its own full-width row below header__inner
   rather than fighting for space beside the logo/search. */
/* Reverted per explicit request: the reference site itself hides this bar
   on desktop too ("Hidden on desktop to make room for big search" — see
   the original comment further down), relying on the "Всички категории"
   dropdown next to search and the mobile hamburger menu for category
   access instead. The wp_nav_menu() call in berry_render_site_header()
   is left in place (harmless, just produces display:none markup) rather
   than removed, so re-enabling this later is a one-line CSS change. */
.header__nav {
  display: none;
}

.header__nav .nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links sit on the header's dark purple/magenta gradient, so they
   need the same white-on-dark treatment already used for the header's
   icons and .nav-sale below, not .nav-link's default muted-purple
   color (which is meant for the light cream page background). */
.header__nav .nav-link {
  display: inline-block;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
}

.header__nav a:hover .nav-link {
  color: #fff;
  background: rgba(255,255,255,0.16);
}

@media (max-width: 900px) {
  .header__nav { display: none; }
}

.nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--clr-text-muted);
  padding: 6px 14px;
  border-radius: 6px;
  transition: var(--transition);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--clr-text);
  background: rgba(0,0,0,0.05);
}

.nav-link--sale {
  color: var(--clr-accent);
}

.nav-link--sale:hover {
  color: var(--clr-accent);
  background: rgba(219,39,119,0.07);
}

.header__center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 12px;
}

.header__right {
  display: flex;
  /* #accountBtn's name label is now taken out of flow (position:absolute,
     see below) so every button in this row — Wishlist/Cart/Account alike
     — has the exact same 44px box height again; plain align-items:center
     lines all three icons up with each other AND with the logo, the same
     way the row aligned before the logged-in name label existed. */
  align-items: center;
  gap: 16px;
}

.header-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  transition: var(--transition);
}

.header-action-btn:hover {
  opacity: 0.8;
}

.header-action-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: none;
  transition: var(--transition);
}

/* Custom account avatar (see inc/avatar-upload.php) inside #accountBtn's
   own .header-action-icon — that wrapper is already a perfect 44x44
   circle, so the image only needs to fill it; no separate circle/size
   rule duplicated here. */
.berry-navbar-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.header-action-btn:hover .header-action-icon {
  background: rgba(255,255,255,0.1);
}

.header-action-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Logged-in customer's first name below (not beside) the account icon —
   per request, its own stacked layout distinct from the shared row
   layout .header-action-btn normally uses for every header action
   (Cart/Wishlist/Account alike), scoped to #accountBtn only so
   Cart/Wishlist stay unaffected.
   position:relative + the label positioned absolute below (rather than a
   normal flex-column stack) keeps #accountBtn's own box exactly 44px
   tall, identical to Cart/Wishlist's box — so header__right's plain
   align-items:center lines every icon (and the logo) up on one row
   regardless of whether the name label is present, instead of the name
   growing the button's box and throwing off the row's vertical centering
   (the "icons not aligned with the logo" bug). Being position:absolute
   also means the label's own width can NEVER push Cart/Wishlist around —
   it's out of the normal flow entirely, so widening/wrapping it below is
   safe on both desktop and mobile. */
#accountBtn {
  position: relative;
}

#accountBtn .header-action-text {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -6px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* Was truncated with an ellipsis ("danil.ne...") behind a 64px cap.
     Tried wrapping onto 2 lines, then tried pushing Количка/Любими over
     with margin — both rejected per request ("i want them to be next to
     eachother the icons but make it so the name just continues under the
     cart icon"): keep the icon row tight, let the name run underneath
     instead. This is safe specifically because Количка/Любими have NO
     text label of their own on mobile (confirmed live: their .header-
     action-text is display:none here, this theme's own CSS a few rules
     up) — the space directly below those two icons is empty, so a long
     name's overflow has nothing to visually collide with even though it
     geometrically passes under the cart icon. Single line (no wrap, no
     width cap); the icons themselves keep the original tight gap. */
  #accountBtn .header-action-text {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .logo-img { height: 26px !important; }
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 50px;
}

.search-category {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 12px 20px;
  cursor: pointer;
  color: var(--clr-text);
  font-size: 13px;
  font-weight: 500;
  border-radius: 50px 0 0 50px;
  white-space: nowrap;
}

.search-category:hover {
  background: rgba(0,0,0,0.03);
}

.search-category__dropdown {
  position: absolute;
  top: 120%;
  left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 8px 0;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 250;
}

.search-category.open .search-category__dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.search-category__option {
  padding: 10px 20px;
  color: var(--clr-text);
  font-size: 14px;
  transition: var(--transition);
}

.search-category__option:hover {
  background: var(--clr-surface-2);
  color: var(--clr-primary);
}

.search-divider {
  width: 1px;
  height: 24px;
  background: var(--clr-border);
}

.search-input {
  background: transparent;
  border: none;
  /* Fully rounded now that the "Всички категории" dropdown (which used to
     own the left half of this pill) is gone — the search box is the only
     thing left in .search-wrap, so it owns the whole rounded shape.
     -webkit-appearance/appearance: none is required here specifically
     because this is <input type="search"> — browsers apply their own
     native "searchfield" chrome (with its own small fixed border-radius)
     to that input type by default, which silently overrides any custom
     border-radius until the native appearance is turned off. */
  -webkit-appearance: none;
  appearance: none;
  /* !important: Hello Biz's own theme.css has a generic
     `input[type="search"], input[type="text"], ...` rule at border-
     radius:3px — that selector list is MORE specific than plain
     .search-input (it also includes the "input" element selector, e.g.
     "input[type=search]" = 0,1,1 vs ".search-input" = 0,1,0), so it wins
     the cascade regardless of load order without this. */
  border-radius: 50px !important;
  color: var(--clr-text);
  font-size: 14px;
  padding: 12px 40px 12px 22px;
  width: 100%;
  outline: none;
  box-shadow: none;
}

.search-btn {
  position: absolute;
  right: 14px;
  background: transparent;
  color: var(--clr-text-muted);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn-transparent {
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* Burger */
.burger-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 300;
  padding: 10px;
  transition: var(--transition);
}
.burger-btn:hover {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}

.burger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-text-muted);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.burger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger-btn.open span:nth-child(2) {
  opacity: 0;
}
.burger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Nav */
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 280px;
  height: 100vh;
  background: var(--clr-surface);
  border-right: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
  /* Above .mobile-bottom-nav's z-index:250 (see below) so this drawer —
     now opened from the bottom nav's Categories tab — fully covers it
     while open, instead of the sticky bar poking through its bottom
     edge. */
  z-index: 260;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* Was 125px — sized back when this drawer opened from a hamburger
     button INSIDE the sticky top header (see the "MOBILE BOTTOM NAV"
     comment in inc/global-chrome.php's berry_render_site_header()) and
     needed that much top padding to slide out from underneath it. It now
     opens from the bottom nav's "Категории" tab instead — this drawer
     itself has no header/logo of its own to clear anymore, so the old
     header-height reservation was just a large empty gap above
     "КАТЕГОРИИ" (confirmed live via screenshot). 20px matches the small
     top breathing room every other panel edge already gets from
     .mobile-nav__inner's own 20px padding. */
  padding-top: 20px;
  /* Category subcategories can expand the list well past 100vh (7
     categories × up to 7 subcategories each) — without this the overflow
     just clipped off-screen with no way to reach it. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav.open { left: 0; }

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 4px;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-text);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  transition: var(--transition);
  text-decoration: none;
}

.mnav-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.mnav-icon svg {
  width: 26px;
  height: 26px;
}

.mnav-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* Full-color 3D category badges (own rounded-square background baked into
   the PNG, same set used by the homepage carousel and shop sidebar) — no
   chip background/tint needed, the image fills the whole box. */
.mnav-icon--3d { background: none; }
.mnav-icon--3d img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mnav-icon--pink { background: rgba(236,72,153,0.1); color: #ec4899; }
.mnav-icon--gold { background: rgba(212,175,90,0.1); color: #d4af5a; }
.mnav-icon--blue { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.mnav-icon--teal { background: rgba(20,184,166,0.1); color: #14b8a6; }
.mnav-icon--purple { background: rgba(156,80,255,0.1); color: var(--clr-primary); }
.mnav-icon--red { background: rgba(239,68,68,0.1); color: #ef4444; }

.mobile-nav__link:hover .mnav-icon {
  transform: scale(1.1);
}

.mobile-nav__link:hover {
  color: var(--clr-primary);
  background: var(--clr-surface-2);
}

.mobile-nav__link--sale { color: var(--clr-accent); }


/* Category group heading + divider, used above the 7 category links and
   between them and the generic links (shop/bestsellers/account/etc). */
.mobile-nav__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
  padding: 8px 16px 2px;
}

.mobile-nav__divider {
  height: 1px;
  background: var(--clr-border);
  margin: 8px 4px 4px;
}

/* Collapsible subcategories under each category link — mirrors the shop
   sidebar's accordion (.berry-cat-list__item/__row/__expand), toggled by
   initMobileNavCategoryAccordion() in berry-app.js. */
.mobile-nav__cat-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-nav__cat-row .mobile-nav__link {
  flex: 1 1 auto;
  min-width: 0;
}

/* Plain arrow, no box — the Hello Biz parent theme's generic button reset
   ([type="button"],[type="submit"],button { border: 1px solid #cc3366; ... })
   was leaking through the old boxed version of this button (only a couple
   of properties were overridden, not appearance/border/background), which
   on some renderers showed as a solid-looking pink blob instead of a
   visible chevron. Overriding every property it sets, !important, removes
   that whole class of bug rather than patching around it. */
.mobile-nav__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.mobile-nav__expand:hover {
  color: var(--clr-primary);
}

.mobile-nav__expand svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.mobile-nav__cat-item.is-open .mobile-nav__expand svg {
  transform: rotate(180deg);
}

.mobile-nav__subcats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 6px 56px;
}

.mobile-nav__sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-muted);
  transition: var(--transition);
  text-decoration: none;
}

.mobile-nav__sublink-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
}

.mobile-nav__sublink:hover {
  color: var(--clr-primary);
  background: var(--clr-surface-2);
}

/* ============================================
   MOBILE BOTTOM NAV (Wildberries-style sticky tab bar)
   ============================================
   Replaces the old top-left hamburger as the primary mobile nav — see
   berry_render_site_header() in inc/global-chrome.php for the 4 items
   (Начало/Категории/Количка/Любими) and berry-app.js's initBurger()/
   initCart() for how Categories/Cart re-open the existing drawer/cart-
   drawer rather than duplicating that UI. .mobile-only (defined above,
   768px breakpoint) is what actually shows this only on mobile — this
   block just supplies its own layout/visuals. */
.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 250;
  display: flex;
  /* Was a plain white bar — now the same purple as the header/hero
     gradient's start color, so the two fixed bars (top header, bottom
     nav) read as one consistent brand color instead of one purple + one
     white. */
  background: var(--clr-primary, #9c50ff);
  border-top: none;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: transform 0.25s ease;
}

/* Auto-hide on scroll-down / instant reappear on scroll-up, same
   mechanism and reasoning as .header--autohidden above — see
   initHeaderScroll() in berry-app.js. */
.mobile-bottom-nav--autohidden {
  transform: translateY(100%);
}

.mobile-bottom-nav__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 6px;
  color: rgba(255,255,255,0.75);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-bottom-nav__item svg {
  width: 22px;
  height: 22px;
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item.is-active {
  color: #fff;
}

/* Reuses .header-action-icon (see functions.php's inline style block —
   position:relative anchor) + .header-cart-count (the purple/white badge)
   for the two badged items, same components the desktop header already
   uses — see #bottomNavCartCount/#bottomNavWishCount fragment wiring in
   functions.php and berry-app.js's berryUpdateHeaderWishCount(). */
/* .header-action-icon's own base rule (44x44px) is sized for the desktop
   header's bigger circular icon buttons — inside this dense bottom-nav
   row, that made "Количка"/"Любими" (the two badge-carrying items, which
   need this wrapper for the badge's position:relative anchor) render a
   noticeably taller icon box than "Начало"/"Категории" (plain <svg>, no
   wrapper), which both share the same flex column with justify-content:
   center — the mismatched icon height was enough to push those two
   items' text labels down onto a visibly different line. Shrinking the
   wrapper to match the bare-svg items' real 22px icon size (only in this
   context — the desktop header's own .header-action-icon usage is
   untouched) puts all four labels on the same baseline. Confirmed live:
   spanTop was 778/779px (Начало/Категории) vs 789/790px (Количка/Любими)
   before this fix — an 11px gap matching the 22px height difference. */
.mobile-bottom-nav__item .header-action-icon {
  position: relative;
  width: 22px;
  height: 22px;
}

/* Body needs bottom padding on mobile so page content (and the cart
   drawer/toasts) don't render underneath this fixed bar. */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0));
  }
}

/* Hides the "Cookie Law Info" / CookieYes plugin's floating "revisit
   consent" icon (bottom-left circular button that reopens the cookie
   preferences after the initial banner is dismissed) — not wanted here.
   Its on/off toggle lives in a JSON blob inside a plugin-managed DB table
   (wp_cky_banners), not a simple option, so hiding via its own stable
   class name is safer/more maintainable than parsing and rewriting that
   JSON. Also collides with the mobile bottom nav's Categories tab
   position otherwise. */
.cky-btn-revisit-wrapper {
  display: none !important;
}

/* Homepage "🚚 Бърза доставка / 🛡️ Защитено плащане / 🔄 Лесно връщане /
   👀 Преглед преди плащане" trust-badge row (Elementor section id 9597f28
   on the Homepage page, post ID 53). Removed from the page's own
   _elementor_data JSON directly (confirmed clean in the DB), but
   Elementor's render pipeline on this install keeps re-emitting this
   exact section from an internal cache we couldn't invalidate (not a
   transient, not a postmeta value, not a file under
   wp-content/uploads/elementor — verified via direct DB/file scans and
   by instrumenting Elementor's own render hooks). Hiding by its stable
   data-id is the reliable fix regardless of that caching layer. */
[data-id="9597f28"] {
  display: none !important;
}

/* ============================================
   ICON STYLE — Wildberries-inspired line weight
   ============================================
   Original icons (this site's own SVGs — not traced/copied from
   Wildberries), just aligned on general style language: a lighter,
   more uniform stroke weight than the inline stroke-width="2"/"2.5"
   most of these icons originally shipped with (Feather Icons' default),
   closer to Wildberries' thinner minimal-line look, plus a slightly
   softer corner radius on the icon "chip" backgrounds (header actions,
   mobile nav, bottom nav) for a more consistent grid across icon sizes.
   Scoped to the icon-bearing surfaces sitewide rather than every <svg>
   on the page (product photos etc. aren't icons). */
.header-action-icon svg,
.mnav-icon svg,
.mobile-bottom-nav__item svg,
.icon-btn svg,
.icon-btn-transparent svg,
.search-btn svg,
.search-category svg,
.mobile-nav__expand svg,
.berry-cat-list__expand svg,
.cart-btn-icon {
  stroke-width: 1.75 !important;
}

.header-action-icon,
.mnav-icon,
.icon-btn,
.icon-btn-transparent {
  border-radius: 14px;
}

/* ============================================
   HERO SLIDER
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  height: 560px;
}

.hero__slider {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
  transform: translateX(40px);
}

.hero__slide.active {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

/* ---------- HERO PROMO BANNER ---------- */
.hero-banner-new {
  position: relative;
  width: 100%;
  max-width: 1390px;
  margin: 40px auto 20px auto;
  border-radius: 40px;
  padding: 0 24px;
}

.hero-banner-new__img {
  width: 100%;
  aspect-ratio: 3.8 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 40px;
  display: block;
  box-shadow: 0 15px 40px rgba(156,80,255,0.2);
}
.hero-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 40px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-25px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes float-x {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -15px); }
}

.bubble-anim {
  position: absolute;
  border-radius: 50%;
}

.bubble-anim--1 {
  width: 40px;
  height: 40px;
  background: #00f08b;
  top: 20%;
  left: 25%;
  animation: float 3.5s ease-in-out infinite;
}

.bubble-anim--2 {
  width: 25px;
  height: 25px;
  background: #00f08b;
  bottom: 25%;
  right: 25%;
  animation: float-x 4s ease-in-out infinite reverse;
}

.bubble-anim--3 {
  width: 35px;
  height: 35px;
  background: #00f08b;
  top: 60%;
  left: 8%;
  animation: float 4.5s ease-in-out infinite;
}

.bubble-anim--4 {
  width: 20px;
  height: 20px;
  background: #fff;
  top: 15%;
  left: 5%;
  animation: float-x 3.5s ease-in-out infinite reverse;
}

/* Large background bubble */
.circle-bg-green {
  background: #00f08b;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  width: 220px;
  height: 220px;
  bottom: -65px;
  left: 25%;
  animation: float 10s ease-in-out infinite;
}

.hero-cta-btn {
  position: absolute;
  top: calc(80% - 60px);
  left: 10%;
  background: #00f08b;
  color: #5b21b6;
  font-weight: 800;
  font-size: 16px;
  padding: 12px 28px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 15px rgba(0,240,139,0.3);
  transition: transform 0.3s ease;
  z-index: 5;
}

.hero-cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
}
.hero-pill-nav {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  width: 95%;
  max-width: 1240px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  z-index: 10;
}

.hero-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 0 16px;
}

.hero-feature:not(:last-child) {
  border-right: 1px solid var(--clr-border);
}

.hero-feature__icon {
  font-size: 18px;
  background: rgba(135, 0, 249, 0.05);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-feature__text {
  display: flex;
  flex-direction: column;
}

.hero-feature__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 0;
}

.hero__slide--1 {
  background: linear-gradient(135deg, #8700f9 0%, #c400cb 50%, #ff009e 100%);
}

.hero__slide--1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('hero_banner.png') center/cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  z-index: 1;
}

.hero__slide--1::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(100,0,140,0.60) 0%,
    rgba(160,0,180,0.30) 55%,
    rgba(200,10,120,0.10) 100%);
  z-index: 2;
}

.hero__slide--1 .hero__content { position: relative; z-index: 3; }
.hero__slide--1 .hero__visual  { display: none; }

.hero__slide--2 {
  background: linear-gradient(160deg, #6200ba 0%, #8700f9 40%, #c400cb 70%, #ff009e 100%);
}

.hero__slide--2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('hero_banner.png') center/cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  z-index: 1;
}

.hero__slide--2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(100,0,140,0.62) 0%,
    rgba(180,0,180,0.32) 55%,
    rgba(220,10,130,0.10) 100%);
  z-index: 2;
}

.hero__slide--2 .hero__content { position: relative; z-index: 3; }
.hero__slide--2 .hero__visual  { display: none; }

.hero__slide--2 .hero__tag,
.hero__slide--3 .hero__tag {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.40);
  color: #fff;
}
.hero__slide--2 .hero__title,
.hero__slide--3 .hero__title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(100,0,130,0.4);
}
.hero__slide--2 .hero__title em,
.hero__slide--3 .hero__title em {
  background: linear-gradient(135deg, #ffe4f5, #ffd6fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__slide--2 .hero__desc,
.hero__slide--3 .hero__desc { color: rgba(255,230,250,0.88); }
.hero__slide--2 .btn--ghost,
.hero__slide--3 .btn--ghost,
.hero__slide--3 .btn--ghost-teal {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}
.hero__slide--2 .btn--ghost:hover,
.hero__slide--3 .btn--ghost:hover,
.hero__slide--3 .btn--ghost-teal:hover {
  border-color: rgba(255,255,255,0.65);
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.hero__slide--3 {
  background: linear-gradient(115deg, #ff009e 0%, #c400cb 60%, #8700f9 100%);
}

.hero__slide--3::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('hero_banner.png') center/cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: luminosity;
  z-index: 1;
}

.hero__slide--3::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(90,0,120,0.65) 0%,
    rgba(180,0,150,0.32) 55%,
    rgba(220,10,100,0.10) 100%);
  z-index: 2;
}

.hero__slide--3 .hero__content { position: relative; z-index: 3; }
.hero__slide--3 .hero__visual  { display: none; }

.hero__content {
  flex: 1;
  padding: 0 80px;
  z-index: 2;
}

.hero__tag {
  display: inline-block;
  background: rgba(124,58,237,0.1);
  border: 1px solid rgba(124,58,237,0.3);
  color: var(--clr-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}

/* Slide 1 — brand magenta, all-white text */
.hero__slide--1 .hero__tag {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.40);
  color: #fff;
}

.hero__slide--1 .hero__title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(100,0,130,0.4);
}

.hero__slide--1 .hero__title em {
  background: linear-gradient(135deg, #ffe4f5, #ffd6fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__slide--1 .hero__desc {
  color: rgba(255,230,250,0.88);
}

.hero__slide--1 .btn--ghost {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
}

.hero__slide--1 .btn--ghost:hover {
  border-color: rgba(255,255,255,0.65);
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.hero__slide--2 .hero__tag {
  background: rgba(184,134,11,0.1);
  border-color: rgba(184,134,11,0.3);
  color: var(--clr-gold);
}

.hero__slide--3 .hero__tag {
  background: rgba(13,148,136,0.1);
  border-color: rgba(13,148,136,0.3);
  color: var(--clr-teal);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--clr-text);
  margin-bottom: 18px;
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__slide--2 .hero__title em {
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__slide--3 .hero__title em {
  background: linear-gradient(135deg, var(--clr-teal), var(--clr-teal-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__desc {
  font-size: 15px;
  color: var(--clr-text-muted);
  max-width: 420px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.hero__controls {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(124,58,237,0.2);
  transition: var(--transition);
}

.hero__dot.active {
  background: var(--clr-primary);
  width: 24px;
  border-radius: 4px;
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--clr-border-2);
  color: var(--clr-text);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.hero__arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
  color: var(--clr-primary);
}

.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }

/* ---- Product Showcase (CSS art) ---- */
.hero__product-showcase {
  position: relative;
  width: 320px;
  height: 380px;
}

.showcase-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  animation: orbFloat 6s ease-in-out infinite;
}

.showcase-orb--1 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(139,92,246,0.4), transparent);
  top: 20px; left: 30px;
}

.showcase-orb--2 {
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(236,72,153,0.3), transparent);
  bottom: 30px; right: 20px;
  animation-delay: -2s;
}

.showcase-orb--3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,175,90,0.35), transparent);
  top: 30px; left: 40px;
}

.showcase-orb--4 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(20,184,166,0.35), transparent);
  top: 30px; left: 50px;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.05); }
}

.showcase-bottle {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bottleFloat 4s ease-in-out infinite;
}

.showcase-bottle--tall {
  left: 60px; top: 40px;
  animation-delay: 0s;
}

.showcase-bottle--short {
  right: 50px; bottom: 60px;
  animation-delay: -1.5s;
}

.showcase-bottle--perfume {
  left: 50%; top: 30px;
  transform: translateX(-50%);
}

.showcase-bottle--cleaning {
  left: 50%; top: 20px;
  transform: translateX(-50%);
}

@keyframes bottleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.showcase-bottle--perfume {
  animation: bottleFloat 4s ease-in-out infinite;
  transform: translateX(-50%) !important;
}

@keyframes bottleFloatCentered {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-12px); }
}

.showcase-bottle--perfume,
.showcase-bottle--cleaning {
  animation: bottleFloatCentered 4s ease-in-out infinite;
}

.bottle-body {
  border-radius: 12px 12px 6px 6px;
  position: relative;
  overflow: hidden;
}

.bottle-body--serum {
  width: 55px;
  height: 140px;
  background: linear-gradient(160deg, rgba(255,255,255,0.15) 0%, rgba(139,92,246,0.4) 40%, rgba(100,50,200,0.6) 100%);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 30px rgba(139,92,246,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

.bottle-body--cream {
  width: 75px;
  height: 70px;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(255,255,255,0.2) 0%, rgba(236,72,153,0.3) 50%, rgba(180,40,120,0.5) 100%);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 25px rgba(236,72,153,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}

.bottle-body--perfume {
  width: 70px;
  height: 120px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(160deg, rgba(255,240,180,0.2) 0%, rgba(212,175,90,0.35) 50%, rgba(160,120,40,0.5) 100%);
  border: 1px solid rgba(212,175,90,0.4);
  box-shadow: 0 0 35px rgba(212,175,90,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}

.bottle-body--cleaning {
  width: 60px;
  height: 130px;
  border-radius: 10px 10px 20px 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.15) 0%, rgba(20,184,166,0.35) 50%, rgba(10,120,110,0.5) 100%);
  border: 1px solid rgba(20,184,166,0.4);
  box-shadow: 0 0 30px rgba(20,184,166,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

.bottle-cap {
  width: 30px;
  height: 20px;
  background: linear-gradient(180deg, #c4b5fd, #7c3aed);
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
}

.bottle-cap--gold {
  background: linear-gradient(180deg, var(--clr-gold-2), var(--clr-gold));
}

.bottle-pump {
  width: 8px;
  height: 35px;
  background: rgba(20,184,166,0.6);
  border-radius: 4px;
  margin-bottom: -1px;
}

.bottle-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-align: center;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap;
}

.bottle-label--dark { color: rgba(80,40,0,0.9); }
.bottle-label--teal { color: rgba(255,255,255,0.9); }

.showcase-sparkle {
  position: absolute;
  color: var(--clr-primary-2);
  animation: sparklePulse 2.5s ease-in-out infinite;
  font-size: 14px;
}

.s1 { top: 15px; right: 60px; animation-delay: 0s; }
.s2 { bottom: 40px; left: 40px; animation-delay: -0.8s; }
.s3 { top: 50%; right: 30px; animation-delay: -1.5s; }
.s4 { bottom: 70px; right: 80px; animation-delay: -1s; }

@keyframes sparklePulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.btn--primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 4px 20px rgba(139,92,246,0.35);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139,92,246,0.5);
  filter: brightness(1.1);
}

.btn--teal {
  background: linear-gradient(135deg, var(--clr-teal), #0d9488);
  color: #fff;
  box-shadow: 0 4px 20px rgba(20,184,166,0.35);
}

.btn--teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(20,184,166,0.5);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.2);
  color: var(--clr-text-muted);
}

.btn--ghost:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--clr-text);
  background: rgba(255,255,255,0.05);
}

.btn--ghost-teal {
  border-color: rgba(20,184,166,0.3);
  color: var(--clr-teal-2);
}

.btn--ghost-teal:hover {
  border-color: var(--clr-teal);
  background: rgba(20,184,166,0.08);
}

.btn--white {
  background: #fff;
  color: #111;
}

.btn--white:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.btn--dark {
  background: rgba(0,0,0,0.5);
  border-color: rgba(212,175,90,0.4);
  color: var(--clr-gold-2);
}

.btn--dark:hover {
  background: rgba(212,175,90,0.1);
  border-color: var(--clr-gold);
  transform: translateY(-2px);
}

.btn--outline-white {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.8);
}

.btn--outline-white:hover {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  background: rgba(255,255,255,0.05);
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.categories {
  padding: 18px 0 10px;
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 12px;
  border-radius: var(--radius-lg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
}

.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--clr-primary);
  box-shadow: 0 8px 30px rgba(139,92,246,0.15);
}

.cat-card--1:hover { border-color: var(--clr-primary); box-shadow: 0 8px 30px rgba(139,92,246,0.15); }
.cat-card--2:hover { border-color: var(--clr-accent); box-shadow: 0 8px 30px rgba(236,72,153,0.15); }
.cat-card--3:hover { border-color: var(--clr-teal); box-shadow: 0 8px 30px rgba(20,184,166,0.15); }
.cat-card--4:hover { border-color: var(--clr-gold); box-shadow: 0 8px 30px rgba(212,175,90,0.15); }
.cat-card--5:hover { border-color: #f97316; box-shadow: 0 8px 30px rgba(249,115,22,0.15); }
.cat-card--6:hover { border-color: #22c55e; box-shadow: 0 8px 30px rgba(34,197,94,0.15); }

.cat-card__icon {
  font-size: 32px;
  line-height: 1;
}

.cat-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text);
}

.cat-card__count {
  font-size: 11px;
  color: var(--clr-text-dim);
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.products-section {
  padding: 18px 0 12px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary-2);
  margin-bottom: 6px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--clr-text);
  line-height: 1.2;
}

.section-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-primary-2);
  transition: var(--transition);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.section-link:hover {
  border-bottom-color: var(--clr-primary-2);
}

/* ============================================
   PRODUCT GRID & CARDS
   ============================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.product-card {
  /* min-width:0 — same fix/reasoning as .woocommerce ul.products li.product
     above: without it this card (a grid item wherever it sits inside
     .products-grid / .berry-favorites-grid) won't shrink narrower than its
     own content, which forces the whole grid wider than the viewport on
     narrow 2-column mobile layouts instead of letting content wrap. */
  min-width: 0;
  background: #ffffff;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.product-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.product-card__image-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__image-bg {
  transform: scale(1.04);
}

/* CSS Product Art */
.prod-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.prod-art__glow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.prod-art__bottle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prod-art__body {
  border-radius: 10px 10px 4px 4px;
  position: relative;
  overflow: hidden;
}

.prod-art__body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 20%;
  height: 100%;
  background: rgba(255,255,255,0.15);
  border-radius: 0 4px 4px 0;
}

.prod-art__cap {
  border-radius: 3px 3px 0 0;
  margin-bottom: -1px;
}

.prod-art__label-text {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-align: center;
  white-space: nowrap;
  font-style: italic;
  color: rgba(255,255,255,0.8);
}

/* Small square brand mark, top-left on every product image (real Berry
   asset — b-letter-square.svg — matches the reference's own
   .product-card__brand-stamp treatment on every card). */
.product-card__brand-stamp {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Badge overlays */
.product-card__badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 2;
}

.product-card__badge,
.product-card__discount-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 50px;
}

.product-card__discount-badge {
  background: #ef4444; /* bright red */
  color: #fff;
  font-size: 8px;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.badge--sale {
  background: var(--clr-accent);
  color: #fff;
}

.badge--new {
  background: var(--clr-primary);
  color: #fff;
}

.badge--hit {
  background: var(--clr-gold);
  color: #111;
}

/* ИЗБОР НА КЛИЕНТА (customer's choice) — see berry_get_product_extra_
   badges() in functions.php for the review-count/rating eligibility rule.
   Mint (#00F08B) is this site's own primary brand accent (already used for
   every main CTA — Buy Now button, hero CTAs, etc.), the natural next color
   in this design system after badge--new's purple and badge--hit's gold;
   dark text for contrast against the bright mint background, same pairing
   the reference itself uses for this exact badge (accent bg + near-black
   text). */
.badge--choice {
  background: #00F08B;
  color: #3B0768;
}

/* Отстъпка лоялност price tag (see inc/loyalty-discount.php,
   berry_render_loyalty_price_tag() — hooked right after the price on
   every product card). Same brand gradient the badge version used to
   have when this lived as an image-overlay pill, kept here so it's still
   instantly recognizable as "that same special deal" even after moving
   next to the price instead. inline-block so it sits right alongside the
   price text, wrapping to its own line only if the card is too narrow. */
.berry-loyalty-price-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.badge--eco {
  background: #22c55e;
  color: #fff;
}

/* Wishlist btn on card */
/* This is the Favorites page's own card style (berry_render_product_card()
   in functions.php) — different from the shop/category grid, which has
   its own separate .woocommerce ul.products li.product .product-card__wish
   override placing the heart inline next to "Добавяне в количката".
   Here the card has a full-width ".product-card__quick-add" bar across
   the very bottom of the image (no room beside it), and the badge stack
   in the top-right corner can grow to 2-3 badges (discount + НОВО/ХИТ/
   ИЗБОР), so a fixed top offset near the badges would collide again as
   soon as more than one badge shows — moved to bottom-right instead,
   clear above the quick-add bar (~44-48px tall), a position that stays
   safe regardless of how many badges are stacked above. */
.product-card__wish {
  position: absolute;
  bottom: 56px;
  right: 12px;
  top: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  z-index: 2;
  transition: var(--transition);
  opacity: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.product-card:hover .product-card__wish {
  opacity: 1;
  transform: scale(1);
}

/* Native WooCommerce grid only (shop/category archives, homepage product
   rows): the heart used to sit at position:absolute top-right, overlapping
   the ХИТ/НОВО badge stack in that same corner. Now rendered inside a
   shared flex row alongside "Добавяне в количката" instead (see
   inc/wishlist.php's combined woocommerce_after_shop_loop_item callback,
   which wraps both in .product-card__actions-row) so it reliably sits to
   the button's right regardless of how narrow the column is — the button
   flexes/shrinks first rather than pushing the heart onto a new line. The
   base .product-card__wish rule above (absolute, top-right) is left as-is
   for the Favorites page's own card layout, which still wants it overlaid
   on the image there. */
.product-card__actions-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  /* Pushes this row to the bottom of the card (see the flex-column added to
     .woocommerce ul.products li.product below) so the add-to-cart/wishlist
     buttons land at the same height on every card in a grid row, instead
     of sitting right after however much title/price text that particular
     product happens to have — was the cause of buttons visibly staggered
     up/down between neighboring cards when one product's title or sale
     price wrapped to more lines than another's. */
  margin-top: auto;
  padding-top: 12px;
}

.product-card__actions-row .button.add_to_cart_button {
  margin-top: 0 !important;
}

/* WooCommerce core's own add-to-cart.js inserts a "Преглед на количката"
   (View cart) link — <a class="added_to_cart wc-forward"> — right after
   the add-to-cart button on every successful classic AJAX add, purely via
   JS DOM insertion (AddToCartHandler.prototype.updateButton in
   assets/js/frontend/add-to-cart.js), not through any server-rendered
   template or filterable string. This site already opens the cart drawer
   automatically on every add (see the `added_to_cart` handler in
   functions.php that calls window.openCart()), making this extra text
   link pure redundant clutter next to the wish heart on a product card —
   removed with CSS since it's the only place that can intercept a plain
   JS-appended sibling regardless of exactly which page/card it shows up
   on (shop grid, homepage rows, cross-sells, single-product page). */
.added_to_cart.wc-forward {
  display: none !important;
}

/* ---------- WOOCOMMERCE NOTICES (site-wide) ----------
   Core's own woocommerce.css renders these as a plain white box, default
   3px top border (blue/green/red), and its own icon-font glyph — same
   "unstyled WooCommerce default" look already fixed once for the My
   Account page specifically (see .woocommerce-message/-error/-info in
   my-account-theme.css). Same treatment here, just site-wide: every other
   page (single-product add-to-cart errors, Cart page notices, etc.) was
   still getting the unstyled default. Left-accent bar instead of core's
   top border for the single-accent look used everywhere else in this
   design; icon glyph dropped rather than fought into position (it assumes
   a much wider left padding than this design uses, and shows as a
   "missing glyph" box when the icon font doesn't load — confirmed live,
   same reasoning as the My Account fix). */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--clr-surface);
  border-top: none;
  padding: 14px 18px;
  margin-bottom: 20px;
  list-style: none;
  font-family: var(--font-sans);
  color: var(--clr-text);
}
.woocommerce-message {
  border-left: 4px solid #00f08b;
}
.woocommerce-error {
  border-left: 4px solid #ef4444;
}
.woocommerce-info {
  border-left: 4px solid var(--clr-primary);
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  content: none;
}

/* The "Преглед на количката" (View cart) button WooCommerce appends to
   these notices (wc_add_to_cart_message() on a successful add, and some
   stock-validation errors too — e.g. "already have N in your cart") is
   redundant here for the same reason as .added_to_cart.wc-forward above:
   the cart drawer already opens automatically on every successful add,
   and for an error notice it's just clutter next to the actual message. */
.woocommerce-message .button.wc-forward,
.woocommerce-error .button.wc-forward,
.woocommerce-info .button.wc-forward {
  display: none !important;
}

.woocommerce ul.products li.product .product-card__wish {
  position: static;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Same purple-while-pressed / green-once-favorited pairing built for the
   single product page's two wish hearts (see .berry-single-badges-wrap
   .product-card__wish.wished etc. further down this file) — applied here
   on the plain, unscoped .product-card__wish so every OTHER heart on the
   site (shop/category grid, homepage product rows, Favorites page cards)
   gets the same real, visible green outline, not just an icon-color tint.
   A real border (width+style, not just border-color) is required here —
   base .product-card__wish above ships border:none, so a bare
   border-color like this rule used to have would render invisibly. */
.product-card__wish:hover,
.product-card__wish:active {
  background: #fff;
  border: 2px solid var(--clr-primary, #9c50ff);
  color: var(--clr-primary, #9c50ff);
}

.product-card__wish.wished {
  background: #fff;
  border: 2px solid #00F08B;
  color: #00F08B;
}

/* Quick add */
.product-card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  z-index: 2;
  border: none;
  cursor: pointer;
}
.product-card__quick-add:hover {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
}

.product-card:hover .product-card__quick-add {
  opacity: 1;
}

/* Card body */
.product-card__body {
  padding: 14px 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__brand {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 5px;
}

.product-card__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--clr-text);
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.star-icons {
  color: var(--clr-gold);
  font-size: 11px;
  letter-spacing: 1px;
}

.review-count {
  font-size: 10px;
  color: var(--clr-text-dim);
}

.product-card__price-row {
  /* Column, not row: this store's dual-currency price text (EUR/BGN) makes
     the old/current price spans long enough that a row layout wraps at a
     different, incidental point per product depending on that product's
     specific price text length — sometimes two clean lines, sometimes
     crammed mid-wrap on one. Column stacking makes every sale card show
     old-price-then-new-price on two consistent, predictable lines
     regardless of text length (matches the native WooCommerce grid's
     .price fix right above/below this rule in the file). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: auto;
}

.price-current {
  font-size: 20px;
  font-weight: 700;
  color: var(--clr-text);
}

.price-current--sale {
  color: #e11d48; /* cool rose-red */
}

.price-old {
  font-size: 14px;
  color: var(--clr-text-dim);
  text-decoration: line-through;
}

.price-discount {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-accent);
  margin-left: auto;
}

/* ============================================
   WIDE BANNERS
   ============================================ */
.wide-banner {
  margin: 24px 0;
  overflow: hidden;
  position: relative;
}

.wide-banner__inner {
  display: flex;
  align-items: stretch;
  min-height: 300px;
}

.wide-banner--violet .wide-banner__inner,
.wide-banner--gold .wide-banner__inner,
.wide-banner--teal .wide-banner__inner {
  background: linear-gradient(135deg, #8d5bf5 0%, #d347ee 100%);
}

.wide-banner__content {
  flex: 1;
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  z-index: 2;
}

.wide-banner__content--right {
  align-items: flex-end;
  text-align: right;
}

.wide-banner__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(233,213,255,0.85);
  margin-bottom: 14px;
}

.wide-banner__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

.wide-banner__title em {
  font-style: normal;
  color: #6bdd99;
}

.wide-banner__desc {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  max-width: 440px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.wide-banner__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Force outline button to white on purple banners */
.wide-banner .btn--white {
  background: rgba(255,255,255,0.95);
  color: #3b0764;
  font-weight: 700;
}

.wide-banner .btn--white:hover {
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.wide-banner .btn--dark {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
}

.wide-banner .btn--dark:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.7);
}

.wide-banner .btn--outline-white {
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.85);
}

.wide-banner .btn--outline-white:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.floating-dots-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.f-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: dotFloat 6s ease-in-out infinite;
  filter: blur(2px);
}

.f-dot-1 { width: 40px; height: 40px; top: 15%; left: 10%; animation-duration: 7s; }
.f-dot-2 { width: 120px; height: 120px; bottom: -20px; left: 20%; animation-duration: 9s; animation-direction: reverse; background: rgba(255, 255, 255, 0.08); filter: blur(8px); }
.f-dot-3 { width: 60px; height: 60px; top: 25%; right: 15%; animation-duration: 8s; }
.f-dot-4 { width: 25px; height: 25px; bottom: 20%; right: 25%; animation-duration: 5s; animation-direction: reverse; }
.f-dot-5 { width: 15px; height: 15px; top: 50%; left: 80%; animation-duration: 4s; }

@keyframes dotFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.bp-orb--1 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(139,92,246,0.5), transparent);
  top: 20px; left: 20px;
}

.bp-orb--2 {
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(236,72,153,0.4), transparent);
  bottom: 20px; right: 30px;
  animation-delay: -2.5s;
}

.bp-orb--gold1 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(212,175,90,0.5), transparent);
  top: 10px; right: 20px;
}

.bp-orb--gold2 {
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(240,208,128,0.3), transparent);
  bottom: 30px; left: 30px;
  animation-delay: -3s;
}

.bp-orb--teal1 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(20,184,166,0.45), transparent);
  top: 0px; right: 10px;
}

/* Banner serum bottle */
.bp-bottle--serum-lg {
  position: relative;
  animation: bottleFloat 4s ease-in-out infinite;
}

.bp-body {
  width: 70px;
  height: 180px;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(139,92,246,0.45) 40%, rgba(80,20,180,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 0 50px rgba(139,92,246,0.4), inset 0 1px 0 rgba(255,255,255,0.35), inset -10px 0 20px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.bp-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  width: 15%;
  height: 100%;
  background: rgba(255,255,255,0.12);
}

.bp-dropper {
  width: 12px;
  height: 45px;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(139,92,246,0.6));
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}

.bp-label {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-align: center;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

/* Petals */
.bp-petals { position: absolute; inset: 0; pointer-events: none; }

.petal {
  position: absolute;
  font-size: 24px;
  animation: petalFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(236,72,153,0.5));
}

.p1 { top: 30px; left: 30px; animation-delay: 0s; }
.p2 { top: 60px; right: 40px; animation-delay: -1.5s; }
.p3 { bottom: 50px; left: 60px; animation-delay: -2.8s; }

@keyframes petalFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
  50% { transform: translateY(-15px) rotate(15deg); opacity: 1; }
}

/* Stars */
.bp-stars { position: absolute; inset: 0; pointer-events: none; }

.bstar {
  position: absolute;
  color: var(--clr-gold-2);
  animation: sparklePulse 2.5s ease-in-out infinite;
  font-size: 18px;
  filter: drop-shadow(0 0 5px rgba(212,175,90,0.7));
}

.bstar.s1 { top: 25px; right: 50px; animation-delay: 0s; }
.bstar.s2 { top: 55%; left: 30px; animation-delay: -1s; }
.bstar.s3 { bottom: 35px; right: 80px; animation-delay: -2s; }

/* Perfume bottle */
.bp-perfume-bottle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bottleFloat 4s ease-in-out infinite;
  animation-delay: -0.5s;
}

.bp-perf-body {
  width: 85px;
  height: 140px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(160deg, rgba(255,240,200,0.22) 0%, rgba(212,175,90,0.4) 50%, rgba(140,100,20,0.65) 100%);
  border: 1px solid rgba(212,175,90,0.5);
  box-shadow: 0 0 50px rgba(212,175,90,0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset -10px 0 20px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}

.bp-perf-body::after {
  content: '';
  position: absolute;
  top: 0; left: 18%; width: 12%; height: 100%;
  background: rgba(255,255,255,0.12);
}

.bp-perf-cap {
  width: 40px; height: 28px;
  background: linear-gradient(180deg, var(--clr-gold-2), var(--clr-gold));
  border-radius: 5px 5px 0 0;
  margin-bottom: -1px;
  box-shadow: 0 0 15px rgba(212,175,90,0.3);
}

.bp-perf-label {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-align: center;
  color: rgba(255,240,180,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  white-space: nowrap;
}

/* Eco bottles */
.eco-bottles {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  animation: bottleFloat 4s ease-in-out infinite;
}

.eco-b {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eco-body {
  width: 54px;
  height: 120px;
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(20,184,166,0.4) 50%, rgba(10,100,90,0.65) 100%);
  border: 1px solid rgba(20,184,166,0.45);
  box-shadow: 0 0 35px rgba(20,184,166,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}

.eco-body--2 {
  height: 100px;
  background: linear-gradient(160deg, rgba(255,255,255,0.15) 0%, rgba(34,197,94,0.35) 50%, rgba(20,120,60,0.6) 100%);
  border-color: rgba(34,197,94,0.4);
  box-shadow: 0 0 30px rgba(34,197,94,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}

.eco-pump {
  width: 8px;
  height: 30px;
  background: rgba(20,184,166,0.7);
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
}

.eco-b--2 .eco-pump {
  background: rgba(34,197,94,0.7);
}

.eco-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-align: center;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.eco-leaves { position: absolute; inset: 0; pointer-events: none; }

.leaf {
  position: absolute;
  font-size: 22px;
  animation: petalFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(34,197,94,0.4));
}

.l1 { top: 20px; left: 20px; animation-delay: 0s; }
.l2 { top: 50%; right: 25px; animation-delay: -1.2s; }
.l3 { bottom: 30px; left: 50px; animation-delay: -2.5s; }

/* ============================================
   BRANDS STRIP
   ============================================ */
.brands-strip {
  padding: 32px 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
}

.brands-strip__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  text-align: center;
  margin-bottom: 20px;
}

.brands-strip__logos {
  display: flex;
  gap: 48px;
  animation: brandsScroll 20s linear infinite;
  width: max-content;
}

@keyframes brandsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-logo {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--clr-text-dim);
  white-space: nowrap;
  transition: var(--transition);
}

.brand-logo:hover { color: var(--clr-text-muted); }

/* ============================================
   USP STRIP
   ============================================ */
.usp-strip {
  padding: 20px 0;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.usp-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
}

.usp-card:hover {
  border-color: var(--clr-border-2);
  background: var(--clr-surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.usp-icon {
  font-size: 36px;
  margin-bottom: 14px;
}

.usp-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 8px;
}

.usp-desc {
  font-size: 13px;
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  margin-top: 10px;
  background: var(--grad-brand);
  border-top: none;
  color: #fff;
}

.footer__top {
  padding: 24px 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 280px 1fr 1fr 240px;
  gap: 48px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  /* Centering just the logo (see .footer__brand .logo above) left the
     tagline and social-icon row still sitting at the left edge below a
     centered logo — a lopsided look, not the "large centered logo" block
     the original brief called for. Centering the whole column instead so
     logo/tagline/social read as one cohesive centered group. */
  align-items: center;
  text-align: center;
  gap: 16px;
}

.footer__tagline {
  font-size: 13.5px;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  font-family: var(--font-serif);
  font-style: italic;
}

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: var(--transition);
}

.social-link:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  background: rgba(255,255,255,0.25);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

.footer__link {
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  transition: var(--transition);
}

.footer__link:hover {
  color: #fff;
  padding-left: 4px;
}

.footer__contact {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

.newsletter-form {
  display: flex;
  margin-top: 8px;
}

.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: #fff;
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
  font-family: var(--font-sans);
  transition: var(--transition);
}

.newsletter-input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);
}

.newsletter-input::placeholder { color: rgba(255,255,255,0.6); }

.newsletter-btn {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: var(--transition);
}

.newsletter-btn:hover { background: rgba(255,255,255,0.3); }

.footer__bottom {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.footer__bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__bottom p {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.footer__payments {
  display: flex;
  gap: 8px;
}

.payment-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  padding: 4px 8px;
}

/* ============================================
   CART DRAWER
   ============================================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 100vw;
  height: 100vh;
  background: var(--clr-surface);
  border-left: 1px solid var(--clr-border);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
}

.cart-drawer.open { right: 0; }

.cart-drawer__header {
  padding: 24px;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-drawer__header h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cart-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.cart-drawer__close:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px 0;
}

/* Was the 🛒 emoji — swapped for a currentColor SVG (see
   berry_render_cart_drawer_body() in functions.php) so it reliably
   renders the theme's purple everywhere. An emoji glyph is drawn by the
   OS/browser's own emoji font and generally can't be recolored via CSS
   `color` at all — confirmed live as exactly why it was showing up
   plain black/outline instead of purple. */
.cart-empty__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--clr-primary);
}
.cart-empty p { color: var(--clr-text-muted); font-size: 15px; }

.cart-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--clr-border);
}

.cart-item__img {
  width: 64px;
  height: 80px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.cart-item__info { flex: 1; }

.cart-item__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.cart-item__brand {
  font-size: 11px;
  color: var(--clr-text-dim);
  margin-bottom: 10px;
}

/* Controls row now holds the qty-row AND the price together (moved out
   of a separate outer `.cart-item` column — see cart-item__price below).
   flex-wrap is a safety net only: on a normal-width drawer everything
   sits on one line via space-between, but if the price text is long
   (dual EUR/BGN display can run to "72,39 € / 141,58 лв.") and the
   drawer is very narrow, the price alone drops to its own line while
   the qty-row (minus/value/plus/remove) NEVER breaks apart, because
   it's a single flex-shrink:0 unit, not four separate flex children
   competing for space — this is what was actually breaking before. */
.cart-item__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 12px;
}

.cart-item__qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--clr-surface-3);
  color: var(--clr-text);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.qty-btn:hover { background: var(--clr-primary); color: #fff; }

.qty-btn:disabled,
.qty-btn:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

.qty-val {
  font-size: 14px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.cart-item__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
}

/* Crossed-out original line total, shown next to the current one when
   the product is on sale — see berry_render_cart_drawer_body() in
   functions.php. Same muted-grey/strikethrough treatment as every other
   "was" price on the site (.price del on product cards). */
.cart-item__price-regular {
  font-size: 12px;
  font-weight: 400;
  color: var(--clr-text-dim, #a08ab0);
  text-decoration: line-through;
}

/* Red for the discounted price, matching every other sale-price surface
   on the site (.price ins on product cards, .price-current--sale on
   Favorites). Only applied when there's an actual regular price to
   compare against — a non-sale item's price stays the normal text color. */
.cart-item__price-current--sale {
  color: #e11d48;
}

.cart-item__remove {
  color: var(--clr-text-dim);
  font-size: 14px;
  transition: var(--transition);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.cart-item__remove:hover { color: #fff; background: var(--clr-accent); }

/* Per-item share button — same 24px circular treatment as .cart-item__remove
   right next to it, so the two read as a matched pair of icon actions
   rather than one styled button next to a plain one. Purple on hover
   (instead of remove's green) so "share" and "delete" stay visually
   distinct at a glance, not just by icon shape. */
.cart-item__share {
  /* padding:0 — same leaked-padding issue already fixed twice elsewhere
     this session (.pd-qty-btn, form.cart's qty stepper): unlike
     .cart-item__remove (a plain <a>), this is a real <button>, so it
     catches hello-biz theme.css's generic [type="button"],button
     {padding:0.5rem 1rem} reset, widening it past the intended 24px to
     match .cart-item__remove exactly. */
  padding: 0;
  color: var(--clr-text-dim);
  transition: var(--transition);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: none;
}

.cart-item__share:hover {
  color: #fff;
  background: var(--clr-primary, #9c50ff);
}

/* Cart-drawer busy state: set on #cartDrawer (a node that never gets
   replaced by the fragment-refresh AJAX) while a quantity-stepper or
   remove request is in flight, so rapid clicks can't fire overlapping
   requests — see initCartQtyStepper() in berry-app.js. */
.cart-drawer.is-updating .qty-btn,
.cart-drawer.is-updating .cart-item__remove {
  opacity: 0.5;
  pointer-events: none;
}

.cart-drawer__footer {
  padding: 20px 24px;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* ============================================
   TOAST
   ============================================ */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--clr-surface-3);
  border: 1px solid var(--clr-border-2);
  color: var(--clr-text);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 50px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .wide-banner__visual { flex: 0 0 260px; }
  .wide-banner__content { padding: 18px 20px; }
}

@media (max-width: 768px) {
  .topbar { display: none !important; }
  
  .header { height: auto; padding: 12px 0; }
  .header__inner {
    flex-wrap: wrap;
    height: auto;
    padding: 0 16px;
    gap: 16px;
    /* flex-start, not the base center — the icon cluster (.header__right)
       got taller once the logged-in account button gained a name label
       under it, so centering it against the plain logo (.header__left,
       no extra content) no longer put the logo and icon row at the same
       visual height. Top-anchoring both to the row's own top edge is a
       simpler, more robust "aligned" than trying to re-center two
       different-height siblings against each other. */
    align-items: flex-start;
  }
  .header__left { order: 1; flex: 1; }
  .header__right { order: 2; flex: none; gap: 6px; }
  .header__center { order: 3; flex: 100%; margin-top: 4px; }

  /* Top navbar mobile icon order: Акаунт, Количка, Любими */
  .header__right #accountBtn { order: 1; }
  .header__right #cartBtn { order: 2; }
  .header__right #wishBtn { order: 3; }
  
  .search-wrap { 
    width: 100%; 
    max-width: 100%; 
    height: 44px; 
  }
  
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .wide-banner__inner { flex-direction: column; }
  .wide-banner__content { padding: 16px 16px; }
  .wide-banner__visual { flex: 0 0 200px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .footer__col:nth-child(1) { grid-column: 1 / -1; }
  .footer__col:nth-child(4) { grid-column: 1 / -1; }
  .usp-grid { grid-template-columns: 1fr; }
  
  /* Banners */
  .hero-banner-new { display: none !important; }
  .hero-banner-mobile { display: flex !important; }
  .mobile-marquee { display: block !important; }
  
  /* Make Add to Cart visible on mobile */
  .product-card__quick-add {
    opacity: 1;
    font-size: 11px;
    padding: 10px 4px;
  }
  
  /* Compact Product Cards */
  .product-card__body { padding: 10px 8px 12px; }
  .product-card__brand { font-size: 9px; margin-bottom: 2px; }
  .product-card__name { 
    font-size: 12px; 
    -webkit-line-clamp: 1; 
    margin-bottom: 4px; 
  }
  .product-card__stars { margin-bottom: 6px; }
  .star-icons { font-size: 10px; }
  .price-current { font-size: 17px; }
  .price-old { font-size: 13px; }
}

/* ============================================
   MOBILE HERO & MARQUEE
   ============================================ */
.hero-banner-mobile {
  display: none;
  background: var(--grad-brand);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  margin: 10px 16px 4px;
  text-align: center;
  color: #fff;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-md);
}

.hero-banner-mobile h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-banner-mobile p {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

.hero-banner-mobile .btn {
  background: #00f08b;
  color: #5b21b6;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 40px;
  box-shadow: 0 8px 15px rgba(0,240,139,0.3);
  text-transform: uppercase;
  margin-top: 8px;
}

.mobile-marquee {
  display: none;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 0;
  margin-bottom: 24px;
}

.mobile-marquee span {
  display: inline-block;
  animation: marquee 12s linear infinite;
  padding-left: 100%;
}

@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* ============================================
   BANNER BREAK
   ============================================ */
.banner-break {
  grid-column: 1 / -1;
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: #fff;
}

.mobile-only { display: none !important; }
.desktop-only { display: flex !important; }

@media (max-width: 768px) {
  .mobile-only { display: flex !important; }
  .desktop-only { display: none !important; }
}

.banner-break--purple {
  background: var(--grad-brand);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
}

.banner-break--green {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}

.banner-break h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: #fff;
}

.banner-break p {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

/* ============================================
   HOMEPAGE ELEMENTOR CONTENT — WooCommerce shortcode
   product grids (Products widget is Elementor-Pro-only,
   so the free-tier homepage build uses Elementor's
   Shortcode widget + WooCommerce's native [products]
   shortcode instead; this reskins that default WC markup
   to match the Berry palette used everywhere else).
   Palette: mint #00F08B, deep purple #5B21B6 / #3B0768,
   cream #F7F5F2, font Inter.
   ============================================ */
.woocommerce ul.products {
  /* 5 columns, minimal gap per request — denser grid, closer to
     Wildberries'/Ozon's listing density, while keeping Berry's own card
     styling (rounded corners, shadow, colors) rather than copying their
     visual skin. */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* row-gap column-gap — rows need their own visible breathing room
     (cards were reading as touching between rows with a flat 4px shared
     value) even though columns stay minimal per the earlier request. */
  gap: 16px 4px;
}

/* Shop/category/search results (.berry-shop-layout — sidebar + grid,
   see inc/shop-sidebar.php) get fewer columns than the flat 5 above.
   That 5-column density was tuned for the homepage's Оферта на деня /
   Топ продажби sections, which were ALSO made full-width edge-to-edge to
   fit it — .berry-shop-layout instead reserves 272px for the category
   sidebar inside a 1320px-max container, leaving the grid only ~968px to
   work with, so the same 5 columns squeeze each card down to a visibly
   cramped ~185px instead (confirmed live via a screenshot: fine on
   mobile, where the sidebar collapses above the grid instead of beside
   it, but "awful" on desktop specifically because of that missing
   ~350px). 4 columns fits this narrower content width comfortably
   instead. */
@media (min-width: 1025px) {
  /* .woocommerce is a <body> class (body.woocommerce…), not a div nested
     inside .berry-shop-layout — confirmed live via the actual rendered
     HTML after the first version of this rule (.berry-shop-layout
     .woocommerce ul.products) had zero effect: that ordering required
     .woocommerce to be a DESCENDANT of .berry-shop-layout, but it's
     really the other way around (an ancestor, on <body>), so the
     selector could never match anything at all. */
  .woocommerce .berry-shop-layout ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* WooCommerce core ships ul.products::before/::after as an old-school
   float clearfix (content:" "; display:table;) — harmless/invisible in
   its original float-based layout, but once this grid override turns
   ul.products into `display:grid`, that pseudo-element becomes a real
   first grid item (a hidden 1-column-wide cell), silently pushing every
   actual product one slot to the right and leaving an empty gap in the
   top-left position. Neutralize both so only real <li> products are
   grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}

@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  /* Tighter than the base 12px per request — just enough gap to tell the
     two side-by-side cards apart, not a full gutter. The narrower gap
     also means each card (and its image, which fills the card's own
     width) gets a bit wider within the same row, since less space is
     spent on the gap between them. Row-gap trimmed too (was 16px) per
     follow-up request to reduce the empty space above/below each row. */
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 8px 3px; }

  /* li.product's own padding, the image/frame sizing, brand/title text
     size, and .price spacing for this same 2-column mobile grid are ALL
     set further down this file instead of here — see the
     @media(max-width:768px) block right after
     .berry-product-card__img-frame's own base rule. Every one of those
     selectors ALSO has an unscoped (always-on) base rule later in this
     file for the same property; a mobile override placed here, physically
     BEFORE those base rules, loses the cascade every time regardless of
     !important, because CSS resolves same-specificity ties by SOURCE
     ORDER — being inside an active media query doesn't change that.
     Confirmed live via screenshot: several rounds of "smaller title/
     bigger photo" edits made here had literally zero visible effect,
     because that's exactly what was happening. Same root cause already
     documented once before in this file, on the "MOBILE PRODUCT CARD"
     section further down — missed applying that same lesson here. */
}
@media (max-width: 480px) {
  /* Stays at 2 columns instead of dropping to 1 — a single full-width
     product per row wasted most of the screen on small phones. */
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 8px 3px; }
}

.woocommerce ul.products li.product {
  /* min-width:0 overrides the grid-item default of min-width:auto, which
     otherwise refuses to let this card shrink narrower than its own
     content's natural width (e.g. the add-to-cart button, or an unwrapped
     price string) — without it, on a 2-column mobile grid the card content
     doesn't fit the available column width, so the GRID ITSELF grows wider
     than the viewport instead of the content wrapping, causing the whole
     page to scroll horizontally. Confirmed via screenshot: right-column
     product text/buttons were clipped by the viewport edge with a visible
     horizontal scrollbar. */
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: #ffffff;
  border-radius: 20px;
  /* Less side padding than before (was 16px) — with 5 narrower columns
     now, shaving the padding down lets the image (100% width of this
     padded box) actually grow bigger instead of losing even more space
     to the same fixed border on a smaller card. */
  padding: 8px 8px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Anchors the absolutely-positioned .product-card__wish heart toggle
     (see inc/wishlist.php's woocommerce_after_shop_loop_item hook) to this
     card instead of the nearest positioned ancestor further up the page. */
  position: relative;
  /* flex column + .product-card__actions-row's margin-top:auto (see that
     rule) is what anchors the add-to-cart/wishlist row to the bottom of
     the card — CSS Grid already stretches every card in a row to the
     tallest sibling's height (grid's default align-items:stretch), so
     without this the row just sat right after whatever content that one
     product had, landing at a different height than its shorter/taller
     neighbors in the same row. */
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.woocommerce ul.products li.product img {
  /* Enforced 1:1 ratio + object-fit:cover — Wildberries-style consistent
     grid images regardless of a given photo's native dimensions, instead
     of relying on every uploaded image happening to already be square. */
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 12px !important;
}

/* Brand "eyebrow" line — berry_get_product_brand_name(), printed just
   above the title via woocommerce_shop_loop_item_title. Same purple used
   for the identical eyebrow on the single-product page
   (.product-detail__brand, --clr-primary-2) so it reads as the same
   component everywhere it appears. */
.woocommerce ul.products li.product .berry-card-brand {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-primary-2, #af73ff);
  margin-bottom: 3px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #1A0A1E;
  padding: 0;
  line-height: 1.3;
  /* Clamped to a fixed 2-line box (not just visually truncated) so every
     card in a row reserves the SAME title height regardless of how long
     that product's actual name is — otherwise a short 1-line title pulls
     everything below it (rating/price/button) up, landing the price row
     at a different height than a neighboring card with a longer,
     2-line-wrapping title. This is what actually caused prices to look
     misaligned between cards, not sale vs. non-sale price markup (that
     renders the same single-line height either way — confirmed live via
     getBoundingClientRect() on both). */
  min-height: calc(12.5px * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.woocommerce ul.products li.product .star-rating {
  margin: 6px 0;
  color: #b8860b;
}

/* Review-list star rating (#reviews, WooCommerce's own real star-rating
   widget on each submitted review — NOT the hand-rolled "★★★★½ (N)" text
   used for the product's own aggregate rating line, and NOT the
   interactive star-PICKER in the review form, a separate .stars/.star-N
   widget that doesn't use this class at all). WooCommerce core
   (woocommerce.css) renders this as two stacked star-glyph layers with no
   color of its own on the filled one: .star-rating::before (the grey
   background layer) is hardcoded color:#cfc8d8 directly on the
   pseudo-element itself, but .star-rating span::before (the filled
   layer, clipped to the actual rating % via its parent span's width) has
   no explicit color — it just inherits from its ancestors, which
   defaulted to plain black/inherited text color here. Setting `color`
   on the outer .star-rating wrapper is enough to color that inherited
   filled layer (confirmed working via the identical technique already
   used two rules above, for the shop-grid's own star-rating) without
   touching the grey background layer's own hardcoded color. */
#reviews .star-rating {
  color: #FFB400;
}

/* "4,7 · 764 отзива" next to the star-rating widget above (both hooked on
   woocommerce_after_shop_loop_item_title, priorities 5/6 — see
   berry-badges.php's woocommerce_after_shop_loop_item_title callback). */
.woocommerce ul.products li.product .bb-review-count {
  display: inline-block;
  margin-left: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-muted, #5c4466);
  vertical-align: middle;
}

.woocommerce ul.products li.product .price {
  /* Old price + new price side by side on one line — this store is
     EUR-only now (multi-currency disabled), so the short "17,90 €" /
     "13,90 €" strings this used to wrap column-stacked to avoid are no
     longer a wrapping risk. flex-wrap:wrap is kept as a safety net for
     an unusually long price string rather than reintroducing the forced
     column stack. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  color: #5B21B6;
  font-weight: 700;
}

.woocommerce ul.products li.product .price ins {
  /* Red for the discounted price, matching the single-product page
     (.product-detail__info p.price ins) and Favorites card
     (.price-current--sale) — this was the one surface still using purple
     instead, inconsistent with the rest of the site. */
  text-decoration: none;
  color: #e11d48;
}

.woocommerce ul.products li.product .price del {
  color: #a08ab0;
  opacity: 0.8;
  font-weight: 400;
  font-size: 13px;
}

/* "Още" (WooCommerce core's own default add_to_cart_text() string, "Read
   more") — shown instead of the real add-to-cart button whenever a
   product is out of stock (confirmed live: this class combo, .button
   .product_type_simple WITHOUT .add_to_cart_button, is exactly how core
   marks that case — see woocommerce_template_loop_add_to_cart() in
   wc-template-functions.php). Was rendering as an unstyled, plain-grey WC
   default box (3px corners, grey-on-grey) that looked like a leftover
   bug next to this theme's own purple/green pill buttons — restyled to
   match that same pill shape, but in a deliberately muted grey/purple
   tone (not the active green/purple CTA colors) so it still reads as
   "can't buy this right now", just as an intentional design state
   instead of an unstyled one. :not(.add_to_cart_button) keeps this from
   ever touching the real, purchasable-product button below, which
   shares the .product_type_simple class. */
.woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50px;
  padding: 10px 16px;
  /* Unlike .button.add_to_cart_button (which gets this same reset a bit
     further up), this out-of-stock variant inherited a stray 13px
     margin-top from a generic button reset — invisible in isolation, but
     since .product-card__actions-row centers its children by MARGIN box
     (align-items:center), that alone was enough to visibly push this
     circle down relative to the same-size wish heart next to it even
     though both boxes measured the same 38x38. */
  margin-top: 0;
  /* Red (same #e11d48 already used for sale prices elsewhere on this
     site — .price ins, .price-current--sale) instead of the earlier
     neutral grey — "out of stock" is a stop/blocker, not just a passive
     unavailable state, so it reads more clearly as one at a glance.
     Opacity bumped (was 0.1, barely visible against the card's white
     background per request) so the red actually reads at a glance. */
  background: rgba(225,29,72,0.22);
  color: #e11d48;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button):hover {
  background: rgba(225,29,72,0.18);
}

/* Icon (a "no stock" slash-circle, see inc/wishlist.php) stays hidden on
   desktop/laptop — same default-hidden/mobile-only pattern as the real
   add-to-cart button's own .cart-btn-icon right below, so both buttons on
   this row follow one consistent responsive rule instead of two
   different ones. white-space:nowrap above keeps the desktop label from
   ever wrapping now that it fits in the same pill width the real
   button's own label already reliably fits in — confirmed live, no
   wrapping at any of the grid's real-world column widths. */
.woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) .cart-btn-icon {
  display: none;
}

/* Mobile/tablet: same 38px round icon-only collapse as the real
   add-to-cart button (see the shared @media (max-width: 768px) block
   below it) — the two sit side by side with the wishlist heart on this
   row, so all three should read as one even set of round icon buttons,
   not one pill fighting for space against two circles. */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
  }

  .woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) .cart-btn-icon {
    display: block;
  }

  .woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) .cart-btn-label {
    display: none;
  }
}

/* Desktop/laptop default: full pill button with the text label — the icon
   (see inc/wishlist.php's woocommerce_loop_add_to_cart_link filter, which
   adds a cart SVG into the button alongside its existing text label) stays
   hidden here and only takes over on the 2-column mobile/tablet grid,
   below, where there's no longer room for the full label next to the
   wishlist heart without either silently clipping mid-word
   (text-overflow:ellipsis doesn't work reliably on this button's
   display:inline-flex) or wrapping into a lumpy multi-line blob. */
.woocommerce ul.products li.product .button.add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 20px;
  background: #00F08B;
  color: #3B0768;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  border-radius: 50px;
  border: none;
  box-shadow: 0 4px 14px rgba(0,240,139,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product .button.add_to_cart_button .cart-btn-icon {
  display: none;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,240,139,0.45);
}

/* Mobile/tablet: icon-only, matching the wishlist heart it sits next to
   (38px, same as .product-card__wish) so the two read as an even pair. An
   icon has no text to wrap or clip in the first place, at any width, so
   this removes the whole "button too narrow for its own label" bug class
   at the widths where the grid is only 2 columns wide, rather than
   continuing to patch around it. */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .button.add_to_cart_button {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-top: 0;
    border-radius: 50%;
  }

  .woocommerce ul.products li.product .button.add_to_cart_button .cart-btn-icon {
    display: block;
  }

  .woocommerce ul.products li.product .button.add_to_cart_button .cart-btn-label {
    display: none;
  }
}

.woocommerce ul.products li.product .button.added {
  background: #5B21B6;
  color: #fff;
}

.woocommerce ul.products li.product span.onsale {
  background: #ef4444;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 8px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 50px;
  /* 8px, not 12px — matches the brand stamp's inset (see
     .berry-brand-stamp and the overflow:hidden now on
     a.woocommerce-LoopProduct-link above): at 12px this badge sat just
     outside the actual photo's bounds (the card's own padding starts the
     image at 16px), which the new overflow:hidden would otherwise clip. */
  top: 8px;
  /* Right-anchored (not left) to match the reference: the brand stamp
     occupies top-left on every card, badges (sale/new/hit) stack top-right. */
  left: auto;
  right: 8px;
  margin: 0;
}

/* НОВО/ХИТ badges on the native WooCommerce grid — stack above/below the
   core .onsale badge in the same top-right corner (see berry_render_
   extra_product_badges() in functions.php, hooked to
   woocommerce_before_shop_loop_item_title). */
.woocommerce ul.products li.product .berry-extra-badges {
  /* Bottom-left, unconditionally (every breakpoint, not just mobile) —
     top-left is the Berry brand stamp, top-right is the discount badge,
     so bottom-left is НОВО/ХИТ/etc.'s own dedicated corner regardless of
     screen size. */
  position: absolute;
  bottom: 8px;
  left: 8px;
  top: auto;
  right: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ============================================
   MOBILE PRODUCT CARD — Wildberries-style layout
   ============================================
   Matches the reference screenshot's card conventions on mobile only
   (desktop keeps the existing layout): wishlist heart top-right of the
   photo (was bottom-right, sharing the actions row), discount/НОВО/ХИТ
   badges bottom-left of the photo (was top-right — top-left stays
   reserved for the Berry brand stamp, an earlier explicit requirement),
   and a full-width solid purple pill add-to-cart button with icon+label
   (was a small icon-only circle) — now that the heart no longer shares
   that row, there's room for the label again.

   MUST stay physically AFTER every base (non-media-query) rule above
   for these same selectors (.onsale, .berry-extra-badges,
   .product-card__wish, .button.add_to_cart_button) — this block was
   originally placed much earlier in the file (right after the cookie-
   icon fix), and at matching specificity, CSS resolves ties by SOURCE
   ORDER regardless of whether a rule sits inside an active media query.
   With the block positioned before the base .onsale rule, the base
   rule's `top: 8px` (no media condition, so always "on") won the
   cascade over this block's `top: auto` while this block's `bottom: 8px`
   still applied uncontested — top AND bottom both set with no explicit
   height stretches an absolutely-positioned box to fill the gap between
   them, which is exactly what happened: the -20%/discount badge
   ballooned into a ~218px-tall red bar down the card instead of staying
   a small pill. Moving this block to load after every conflicting base
   rule is the actual fix, not just the property values themselves
   (confirmed by forcing a real ≤768px viewport and reading the badge's
   own getBoundingClientRect()/computed top+bottom before/after the move). */
@media (max-width: 768px) {
  /* Discount badge back to top-right (matches the base/desktop rule — no
     override needed here anymore) now that the wishlist heart no longer
     overlays that corner (it moved into the actions row, next to the
     cart button — see below). НОВО/ХИТ/etc. now sit bottom-left
     unconditionally (see the base .berry-extra-badges rule above), so no
     mobile-specific override is needed for it either anymore. */

  /* Heart no longer overlays the image on mobile — it falls back to the
     base native-grid .product-card__wish rule (position:static; flex:0 0
     auto;) inside .product-card__actions-row (base rule: display:flex),
     so it sits to the cart button's right, same as desktop. The button
     below gets flex:1 (was width:100%, which only made sense when it had
     the whole row to itself) so it shrinks to leave the heart its fixed
     38px. */
  /* At a real ~320px-wide phone the whole row (button + heart) only has
     ~95-100px total. justify-content:center (inherited from the base/
     desktop rule) centers the icon+label as a group WITHIN the button's
     padded content box — when that group is wider than the content box
     (as it was here: icon+gap+label needed ~60px but only ~36px was
     available after padding), centering makes it overflow EQUALLY on
     both sides rather than clipping, so the icon visually bled out past
     the button's own rounded left edge — reading as "cut off" even
     though nothing was technically clipped. Fix is to shrink every
     dimension enough that icon+gap+label actually FITS inside the
     padded box, so there's no overflow left to bleed anywhere. */
  .woocommerce ul.products li.product .button.add_to_cart_button {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    /* Rectangle, not a pill — a 50px radius on a ~34px-tall button reads
       as a stretched oval capsule; 10px keeps the corners softened
       without the oval look. */
    border-radius: 10px;
    background: var(--clr-primary, #9c50ff);
    color: #fff;
    padding: 7px 6px;
    gap: 3px;
    box-shadow: 0 4px 14px rgba(156,80,255,0.35);
  }

  .woocommerce ul.products li.product .button.add_to_cart_button:hover {
    box-shadow: 0 8px 20px rgba(156,80,255,0.45);
  }

  /* Explicit fixed size + flex-shrink:0 — without it, the icon (an inline
     SVG flex-child of the button) shrinks to 0 width the moment the row
     gets tight (heart + button sharing ~90-100px total), which is exactly
     what was happening: no icon, and the label text wrapping to 2 lines
     instead of shrinking the icon out of its way. */
  .woocommerce ul.products li.product .button.add_to_cart_button .cart-btn-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }

  .woocommerce ul.products li.product .button.add_to_cart_button .cart-btn-label {
    display: inline;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Heart shrinks a bit further (was 38px, then 32px) to give the button
     more of the row's limited width to breathe — a smaller fixed circle
     next to a roomier pill reads better than two cramped elements.
     padding:0 is required, not cosmetic: this button inherits 8px 16px
     from a generic button reset, and 16px of horizontal padding alone
     (32px both sides) is wider than the 24px width below — with no
     override, the box was forced wider than tall (a flex item's padding
     sets a hard floor on its own size) instead of a clean circle.
     Centering still works fine at padding:0 since the base rule already
     centers content via display:flex/align-items/justify-content. */
  .woocommerce ul.products li.product .product-card__wish {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
  }

  /* Out-of-stock button — was a bare 38px icon-only circle (a plain
     "no entry" slash with no indication of what it meant); now a
     flexible text pill instead, same treatment as the real add-to-cart
     button right above, so "Очаквайте скоро" (see the
     woocommerce_product_add_to_cart_text filter in inc/wishlist.php) is
     actually readable instead of collapsing to an unexplained icon.
     Keeps the button's own existing red "stop" tint (background/color
     already set on the non-mobile base rule) rather than the cart
     button's purple, since red still correctly reads as "can't buy this
     right now". The sibling wishlist heart no longer needs its own
     38px override either — it falls back to the same 24px base rule the
     in-stock/flexible-pill case already uses just above. */
  .woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 7px 6px;
  }

  .woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) .cart-btn-icon {
    display: none;
  }

  .woocommerce ul.products li.product .button.product_type_simple:not(.add_to_cart_button) .cart-btn-label {
    display: inline;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .product-card__actions-row {
    gap: 4px;
  }
}

/* Single product page — brand stamp + badges overlaid on the main gallery
   image. WooCommerce core's own .woocommerce-product-gallery is
   position:relative by default, so this wrapper just needs to fill it;
   pointer-events:none so it never blocks the real gallery's zoom/lightbox
   clicks, with interactive children (the wish heart) opting back into
   normal click behavior via their own rules further down.
   `bottom: 0` (not just top/left/right) is required, not cosmetic: every
   child of this wrapper is itself position:absolute, so — without an
   explicit bottom/height — this wrapper collapses to zero height (absolute
   children never contribute to a parent's auto height) and any child using
   `bottom: Npx` (the wish heart, see .product-card__wish override below)
   would resolve against that zero-height box and land near the TOP of the
   image instead of the bottom. Confirmed by testing: without `bottom: 0`
   here, the gallery wish button rendered overlapping the badges instead of
   in its intended bottom-right corner. */
.berry-single-badges-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.berry-brand-stamp--single {
  /* !important on width/height: WooCommerce core's own woocommerce-layout.css
     ships `.woocommerce img, .woocommerce-page img { height: auto; max-width:
     100%; }`, which — being a class+element selector — outranks this single
     class selector in specificity regardless of this file loading later.
     Without the override, height:auto collapses this img to 0 height before
     its SVG has loaded (no width/height attrs on the <img> or intrinsic pixel
     size on the source SVG to derive an aspect ratio from), which in turn
     stops the browser from ever firing the native loading="lazy" fetch for
     it — the brand stamp silently never appears on the single product page.
     Same root cause + same fix already used for .logo-img above in this
     file. */
  position: absolute;
  top: 16px;
  left: 16px;
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.berry-extra-badges--single {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ============================================
   DESKTOP — bigger badges everywhere, single-product zoom-icon collision
   ============================================
   Every badge size (span.onsale, .product-card__badge/.product-card__
   discount-badge) was shrunk down to ~8px across several rounds of
   mobile-specific requests earlier — fine on a narrow phone card, but
   left over unconditionally (no media query), so desktop inherited the
   same tiny sizing on a much larger layout. This bumps them back up,
   scoped to desktop only so mobile is untouched.

   Also fixes a real collision on the single-product page: WooCommerce's
   own zoom-trigger (magnifying-glass icon, .woocommerce-product-gallery__
   trigger) sits at the image's top-right by default, and .berry-extra-
   badges--single (discount/НОВО/ХИТ pills) was ALSO anchored top:16px;
   right:16px — same corner, same offset. They rendered exactly on top of
   each other (confirmed live via getBoundingClientRect() — all three
   elements shared virtually the same rect) once the gallery image itself
   got bigger and drew more attention to that corner. Pushed the badges
   down to clear the ~36px-tall trigger icon instead of sharing its spot. */
@media (min-width: 769px) {
  .woocommerce ul.products li.product span.onsale {
    font-size: 12px;
    padding: 5px 12px;
  }

  .product-card__badge,
  .product-card__discount-badge {
    font-size: 11px;
    padding: 5px 12px;
  }

  .berry-extra-badges--single {
    top: 60px;
  }
}

/* Native-grid brand stamp — same asset/treatment as .product-card__brand-stamp,
   just scoped under the real WooCommerce markup instead of the custom
   Favorites-page card markup. */
/* Anchors the brand stamp AND clips it to the product photo's own box
   (not the wider card, which has 16px of its own padding around the
   image) — previously the stamp was positioned 12px from the CARD edge
   while the image itself starts 16px in (the card's padding), so the
   badge sat 4px outside the actual picture on its top-left, over the
   card's white padding instead of "inside the picture". overflow:hidden
   here is a hard guarantee it can never poke past the image edge
   regardless of exact offset math. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
}

/* The actual positioning/clipping frame for the brand stamp, extra
   badges, core's onsale flash, and the thumbnail image — NOT the
   surrounding <a> (which also wraps the title and price as one big
   clickable area, ~234px tall vs. the ~100px image itself, confirmed
   live: bottom-anchored badges positioned against the anchor landed
   near the price instead of the photo's own bottom edge). See
   functions.php's three woocommerce_before_shop_loop_item_title
   callbacks (priorities 8/9/11) for how this frame brackets exactly
   those four elements. */
.woocommerce ul.products li.product .berry-product-card__img-frame {
  /* aspect-ratio here (matching the image's own 1:1) rather than relying
     on auto height: the frame's auto height otherwise includes the
     image's own margin-bottom:12px (spacing before the title, which
     sits outside this frame) as part of its content height, landing a
     few px taller than the image itself — small, but enough to let
     bottom-anchored badges overflow past the actual photo edge. */
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  /* Photo fills the card edge-to-edge (reference request: "make the
     photos exactly like [the Wildberries screenshot]") instead of
     sitting inset inside the card's own padding. Negative margin equal
     to that padding pulls the frame out to the card's own left/right/top
     edges — bottom stays put since title/price/rating/button still need
     their normal padded spacing below. Top corners match the card's own
     20px radius (li.product) so the photo's curve lines up with the card
     outline exactly; bottom corners are squared off since the card's
     white body continues immediately below.
     Must match li.product's own padding (8px 8px 20px) exactly — this
     was left at -16px -16px after that padding was later shaved down
     from 16px to 8px (see the padding rule's own comment), so the frame
     was overshooting 8px past the card's actual edge on every side.
     With only a 4-6px gap between cards, that 8px overshoot was enough
     to visibly bleed into the row above and the neighboring column —
     confirmed live as the cause of product photos appearing to overlap
     each other. */
  margin: -8px -8px 0;
  border-radius: 20px 20px 0 0;
}

/* Mobile 2-column grid — card padding, image/frame sizing, brand/title
   text size, and .price spacing. Deliberately placed HERE, physically
   after every one of these selectors' own unscoped base rule above
   (li.product, li.product img, .berry-product-card__img-frame,
   .berry-card-brand, .woocommerce-loop-product__title, .price all have
   one earlier in this file) — a same-specificity override placed BEFORE
   those base rules loses the cascade regardless of !important or being
   inside an active media query, since ties resolve by source order. An
   earlier, differently-placed version of this block was confirmed live
   (via screenshot) to have zero visible effect for exactly that reason. */
@media (max-width: 768px) {
  /* Side padding shaved down (was 8px) per "less dead space on the
     left/right of the products" — the image-frame's own negative margin
     right below MUST match this exactly (-6px, not -8px) or the frame
     overshoots the card's real edge, the same mismatch bug already fixed
     once this session when the card padding was first shaved from 16px
     to 8px without updating that margin to match. Bottom padding also
     trimmed (was 20px) — read as dead space under every card on mobile. */
  .woocommerce ul.products li.product {
    padding: 6px 6px 12px;
  }

  /* Bigger/taller photo, smaller info block below it, per request — was
     a flat 1:1 square; both the <img> AND its clipping frame
     (overflow:hidden) need the same ratio, or the frame clips the taller
     image back down to square. */
  .woocommerce ul.products li.product img {
    aspect-ratio: 4 / 5;
    margin-bottom: 4px !important;
  }

  .woocommerce ul.products li.product .berry-product-card__img-frame {
    margin: -6px -6px 0;
    aspect-ratio: 4 / 5;
  }

  /* Brand eyebrow + title shrunk per request ("descriptions tinier").
     Title's min-height recalculated to match its own new font-size/
     line-height exactly (same reserved-2-line technique as the base
     rule, just smaller numbers) so short vs. long titles still don't
     misalign the price row between neighboring cards. */
  .woocommerce ul.products li.product .berry-card-brand {
    font-size: 6px;
    margin-bottom: 1px;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 8px;
    min-height: calc(8px * 1.3 * 2);
  }

  /* Price shrunk (was 15px/13px) and its own top margin zeroed — was
     reading as too large/too much dead space above it per request. Any
     .star-rating between the title and price (rendered even at 0 stars
     for products with no reviews yet) also zeroed out so its own 6px
     top+bottom margin doesn't sit there as invisible dead space when
     there's nothing to actually show. */
  .woocommerce ul.products li.product .price {
    margin: 0;
    font-size: 12px;
  }

  .woocommerce ul.products li.product .price del {
    font-size: 10px;
  }

  .woocommerce ul.products li.product .star-rating {
    margin: 0;
  }
}

.woocommerce ul.products li.product .berry-brand-stamp {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ============================================
   SHOP / CATEGORY ARCHIVE — sidebar layout & header
   ============================================
   Pre-launch QA found /shop/ and every /product-category/* archive had NO
   sidebar at all (Hello Biz's sidebar.php is an empty stub, nothing was
   ever registered) — this section is a from-scratch build, not a restyle.
   Markup/rendering: inc/shop-sidebar.php. Same mint/purple/cream palette
   as the product-grid rules above (#00F08B / #5B21B6 / #3B0768 / #F7F5F2).

   Layout: `.berry-shop-layout` wraps WooCommerce's own #primary/.site-main
   (untouched markup) and the new <aside class="berry-shop-sidebar"> as a
   2-column CSS grid — see inc/shop-sidebar.php for why they land as
   siblings under one wrapper (opened/closed across two separate
   woocommerce_before_main_content / woocommerce_sidebar hooks). #primary's
   own max-width/centering (from Hello Biz's generic .site-main rule) is
   neutralized inside the wrapper so it fills its grid column instead of
   trying to self-center within it.
   ============================================ */
.berry-shop-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  align-items: start;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* The PARENT Hello Biz theme's own theme.css carries a generic
   `.site-main { padding-inline: 10px; }` — applies to every page's main
   content wrapper by default, Elementor sections included, since this
   Elementor version has no automatic full-width breakout technique of
   its own (confirmed by checking frontend.min.css directly: no width/
   margin override exists for .elementor-section-full_width). That 10px
   was the actual, previously-unaccounted-for source of "there's still
   side padding" even after the "Оферта на деня" grid section's own
   padding was already reduced to a genuine 0 — every other full-width
   homepage section (the category carousel, the daily-offer banner) has
   the exact same unaddressed gap, just less noticeable there. Zeroed
   for the homepage only — other page types may still rely on that
   default 10px inset (e.g. blog posts/static pages not made full-width). */
body.home .site-main {
  padding-inline: 0;
}

/* Same fix, same root cause, extended to Промоции: the parent theme's
   generic `.site-main { padding-inline: 10px; }` (see comment above)
   was still the remaining source of visible side padding here even
   after .berry-shop-layout's own padding was already zeroed for this
   page (see .berry-promo-page .berry-shop-layout above) — confirmed
   live via getBoundingClientRect: cards still sat 10px in from the
   edge, not flush, after that first fix alone.
   !important: the actual winning rule at narrow widths turned out to be
   a DIFFERENT, narrower-breakpoint copy in the parent theme
   (`@media (max-width: 575px) { body:not([class*="elementor-page-"])
   .site-main { padding-inline: 10px; } }`), confirmed live by walking
   every matching stylesheet rule — its `body:not(...)` pushes its
   specificity one notch above a plain two-class selector like this one,
   regardless of source order, so equalizing specificity alone wasn't
   enough. */
.berry-promo-page .site-main {
  padding-inline: 0 !important;
}

.berry-shop-layout #primary.content-area,
.berry-shop-layout .site-main {
  max-width: 100%;
  width: 100%;
  /* min-width:0 — grid/flex items default to min-width:auto, which floors
     their size at their CONTENT's natural unwrapped width and overrides
     width:100% above. Normally invisible since category titles are short,
     but a search-results title ("Резултати от търсенето: ...") echoes
     back whatever the visitor typed, which can be long enough to force
     real overflow — confirmed live: the H1 measured 477px wide in a
     375px viewport, silently clipped by body's overflow-x:hidden rather
     than wrapping, cutting text off mid-word instead of onto a 2nd line. */
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Hello Biz's generic .site-main is `display:flex; flex-direction:column;
   gap:60px` — sensible spacing between big page sections generally, but
   on the shop/category/search archive .site-main directly wraps a run of
   small, tightly-related controls (breadcrumb, title, result count, sort
   dropdown, product grid) stacked right on top of each other. Left alone
   that inserts a flat 60px gap between every single one of them —
   confirmed live: breadcrumb->header 72px (60 + header's own spacing),
   header->result-count 120px total, result-count->sort 73px, sort->grid
   76px, none of which came from those elements' own (much smaller)
   margins. */
.berry-shop-layout .site-main {
  /* flex-direction:column is the real fix here, not just the gap value —
     Hello Biz's parent theme has a SEPARATE, more specific rule just for
     the native WP search template (`.search .site-main{display:flex;
     gap:60px;padding:60px}`) that never sets flex-direction at all,
     defaulting to row. On body.search specifically (this page), that
     silently laid breadcrumb/title/result-count/sort-dropdown/product-
     grid out SIDE BY SIDE instead of stacked, with 60px gaps between each
     — confirmed live via a screenshot showing the breadcrumb floating
     alone in open space between the sidebar and the rest of the content,
     which is exactly what "breadcrumb is one flex item in a row, product
     grid is another, 60px apart" looks like. Explicit here so shop/
     category archives (which only ever hit the generic already-column
     rule) and search results (which hit this more specific one instead)
     both actually stack. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.berry-shop-layout .woocommerce-result-count {
  margin-bottom: 8px;
}

.berry-shop-layout .woocommerce-ordering {
  margin-bottom: 8px;
}

/* Search-results title specifically — shortened to just the quoted query
   (see woocommerce_page_title filter in inc/search-cyrillic-brands.php).
   Hidden entirely per request — the breadcrumb directly above it already
   reads "Резултати от търсенето на "X"", making this second, bigger
   repeat of the same quoted query redundant. */
body.search .woocommerce-products-header {
  display: none;
}

.berry-shop-layout > aside.berry-shop-sidebar {
  order: -1;
}

/* Archive title/breadcrumb/description — previously fell back to Hello
   Biz's generic (unbranded weight-500, no display font) heading styles. */
.woocommerce-breadcrumb {
  font-size: 13px;
  color: #5c4466;
  margin-bottom: 12px;
}

.woocommerce-breadcrumb a {
  color: #5c4466;
}

.woocommerce-breadcrumb a:hover {
  color: #5B21B6;
}

/* Back arrow — injected by initBreadcrumbBackArrow() in berry-app.js,
   site-wide (any page with a .woocommerce-breadcrumb: shop/category
   archives, single product, ...). Wraps the breadcrumb in a flex row
   with a real circular button as its own sibling (not squeezed inline
   into the trail's small text) so it's a proper, clearly-visible touch
   target rather than a tiny glyph. */
.berry-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.berry-breadcrumb-row .woocommerce-breadcrumb {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.berry-breadcrumb-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-primary, #9c50ff);
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(156,80,255,0.3);
  transition: var(--transition);
}

.berry-breadcrumb-back:hover {
  background: var(--clr-primary-dark, #7a2ed6);
}

.woocommerce-products-header__title.page-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  color: #3B0768;
}

.woocommerce-products-header .term-description {
  color: #5c4466;
  font-size: 15px;
  max-width: 60ch;
}

/* Category archive subcategory tiles — 4-or-fewer layout (see
   inc/category-subcategory-icons.php; more than 4 reuses the homepage
   category carousel's own classes instead, further down this file).
   Same small-badge/label card language as the homepage category carousel
   (.berry-cat-carousel__card) for a consistent "shop by category" look
   across the site, just a plain wrapping row here instead of a
   horizontal scroller — 4 or fewer items always fit comfortably without
   needing to scroll. Originally built for "Филтриране на вода" only
   (.berry-water-subcats); generalized to every category using this same
   grid, so the class name/comment no longer name that one category. */
.berry-subcat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 0 1.5rem;
}

.berry-subcat-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  /* Guaranteed 2-per-row (not just "however many happen to fit the flex
     row") — a grid instead of the desktop flex-wrap so each card's width
     is exactly half the row regardless of gap/label-wrapping width. Same
     768px mobile breakpoint the product grid itself switches to 2
     columns at, for consistency. */
  .berry-subcat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: initial;
    gap: 16px;
  }

  .berry-subcat-grid__card {
    width: 100%;
  }
}

.berry-subcat-grid__card:hover {
  transform: translateY(-2px);
}

.berry-subcat-grid__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.berry-subcat-grid__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.berry-subcat-grid__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clr-text, #1A0A1E);
  line-height: 1.25;
}

/* More-than-4 layout: no new rules needed here at all — see
   inc/category-subcategory-icons.php's berry_render_subcat_carousel(),
   which reuses .berry-cat-carousel__wrap/__track/__card/__icon/__label/
   __dots verbatim (styled further down this file, originally for the
   homepage's own category row) rather than a lookalike copy. The extra
   .berry-subcat-carousel class on that markup isn't targeted by any
   rule — kept only as a hook in case this in-content instance ever needs
   its own override later, without touching the homepage's shared
   classes. */

.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: #5c4466;
}

.woocommerce-ordering select {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
}

/* ---------- SIDEBAR CARD SHELL ---------- */
.berry-shop-sidebar {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  padding: 24px;
  position: sticky;
  top: 24px;
}

.berry-shop-sidebar__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #F7F5F2;
  border: 1px solid rgba(0,0,0,0.08);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #3B0768;
}

.berry-shop-sidebar__toggle-icon {
  transition: transform 0.25s ease;
}

.berry-shop-sidebar.is-open .berry-shop-sidebar__toggle-icon {
  transform: rotate(180deg);
}

.berry-shop-sidebar__section-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3B0768;
  margin-bottom: 14px;
}

.berry-shop-sidebar__section + .berry-shop-sidebar__section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ---------- CATEGORY LIST ---------- */
.berry-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.berry-cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #1A0A1E;
  transition: background 0.2s ease, color 0.2s ease;
}

.berry-cat-list a:hover {
  background: #F7F5F2;
}

.berry-cat-list li.is-active a {
  background: #00F08B;
  color: #3B0768;
  font-weight: 700;
}

.berry-cat-list__text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.berry-cat-list__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.berry-cat-list__icon {
  flex: 0 0 auto;
  display: flex;
  width: 24px;
  height: 24px;
}

.berry-cat-list__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.berry-cat-list__count {
  font-size: 12px;
  color: #a08ab0;
}

.berry-cat-list li.is-active .berry-cat-list__count {
  color: #3B0768;
  opacity: 0.75;
}

/* Subcategory variant — same list, slightly smaller/indented so it visually
   reads as nested under the top-level category list above it. */
.berry-cat-list--sub a {
  padding-left: 22px;
  font-size: 13px;
}

/* ---------- CATEGORY LIST — ACCORDION ----------
   Each top-level .berry-cat-list__item wraps its own link (inside
   .berry-cat-list__row, alongside the expand toggle) and, if it has
   subcategories, a nested .berry-cat-list--sub shown/hidden via the
   [hidden] attribute (see berry-render-shop-sidebar's wp_footer script). */
.berry-cat-list--accordion .berry-cat-list--sub {
  margin: 3px 0 8px;
}

.berry-cat-list__row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.berry-cat-list__row a {
  flex: 1 1 auto;
  min-width: 0;
}

.berry-cat-list__row.is-active a {
  background: #00F08B;
  color: #3B0768;
  font-weight: 700;
}

.berry-cat-list__row.is-active .berry-cat-list__count {
  color: #3B0768;
  opacity: 0.75;
}

/* Plain arrow, no box — same fix as .mobile-nav__expand above: the Hello
   Biz parent theme's generic button reset (border/background on every
   <button>) was leaking through here too since only background/color were
   previously overridden, not border/appearance. */
.berry-cat-list__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  color: #a08ab0;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.berry-cat-list__expand:hover {
  color: #3B0768;
}

.berry-cat-list__expand svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.berry-cat-list__item.is-open .berry-cat-list__expand svg {
  transform: rotate(180deg);
}

/* ---------- PRICE FILTER (WooCommerce core widget markup) ---------- */
.berry-shop-sidebar .price_slider_wrapper {
  font-family: 'Inter', system-ui, sans-serif;
}

.berry-shop-sidebar .price_slider {
  margin-bottom: 20px;
}

.berry-shop-sidebar .ui-slider.ui-slider-horizontal {
  position: relative;
  display: block;
  height: 4px;
  background: #ebe8e3;
  border: 0;
  border-radius: 2px;
}

.berry-shop-sidebar .ui-slider .ui-slider-range {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  background: #00F08B;
  border-radius: 2px;
}

.berry-shop-sidebar .ui-slider .ui-slider-handle {
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  top: -6px;
  margin-left: -8px;
  background: #fff;
  border: 3px solid #5B21B6;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  z-index: 2;
}

.berry-shop-sidebar .ui-slider .ui-slider-handle:focus {
  outline: 2px solid #5B21B6;
  outline-offset: 2px;
}

.berry-shop-sidebar .price_slider_amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  text-align: left;
  line-height: 1.4;
}

.berry-shop-sidebar .price_slider_amount input[type="text"] {
  flex: 1 1 76px;
  min-width: 0;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  background: #F7F5F2;
  color: #1A0A1E;
}

.berry-shop-sidebar .price_slider_amount input[type="text"]:focus {
  outline: none;
  border-color: #5B21B6;
}

.berry-shop-sidebar .price_slider_amount button.button {
  flex: 0 0 auto;
  background: #00F08B;
  color: #3B0768;
  border: none;
  border-radius: 50px;
  padding: 8px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  box-shadow: 0 4px 14px rgba(0,240,139,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.berry-shop-sidebar .price_slider_amount button.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,240,139,0.4);
}

.berry-shop-sidebar .price_slider_amount .price_label {
  flex-basis: 100%;
  order: 3;
  font-size: 12.5px;
  color: #5c4466;
}

/* ---------- IN-STOCK TOGGLE ---------- */
.berry-instock-form label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #1A0A1E;
  cursor: pointer;
}

.berry-instock-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #00F08B;
  cursor: pointer;
}

/* ---------- CLEAR FILTERS ---------- */
.berry-shop-sidebar__clear {
  display: inline-block;
  margin-top: 22px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #5B21B6;
  text-decoration: underline;
}

.berry-shop-sidebar__clear:hover {
  color: #3B0768;
}

/* ---------- CART SHARE (see inc/cart-share.php) ---------- */
.berry-cart-share {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: flex;
  justify-content: center;
}

.berry-cart-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1.5px solid var(--clr-border-2, rgba(0,0,0,0.14));
  background: #fff;
  color: var(--clr-primary, #9c50ff);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.berry-cart-share__btn:hover {
  background: var(--clr-surface-2, #f2f0ec);
  border-color: var(--clr-primary, #9c50ff);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .berry-shop-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    /* Trimmed (was 20px 16px 48px) — same "use up more of the screen,
       less dead space" pass already applied to the homepage grid,
       extended to the shop/category archive wrapper. */
    padding: 12px 8px 24px;
  }

  /* Промоции specifically goes all the way to 0 side padding, same
     treatment as the homepage's own product grid (.elementor-element-
     9e7fdda) — per follow-up request ("there is sidepadding that u have
     to get rid of on both sides"), the real-category-archive-matching
     8px this rule normally carries (see above) was still visible enough
     to read as unwanted padding once cards were sized up to fill the
     row. Scoped to .berry-promo-page (the <main> wrapper in page-
     promotsii.php) so real shop/category archives keep their own 8px
     untouched — only this one page changes. */
  .berry-promo-page .berry-shop-layout {
    padding-left: 0;
    padding-right: 0;
  }

  .berry-shop-sidebar {
    position: static;
    padding: 16px;
  }

  .berry-shop-sidebar__toggle {
    display: flex;
  }

  .berry-shop-sidebar__body {
    display: none;
    margin-top: 16px;
  }

  .berry-shop-sidebar.is-open .berry-shop-sidebar__body {
    display: block;
  }
}

/* Mobile only (desktop/tablet keep the filter toggle as-is): drop the
   whole "Филтри" sidebar so the shop-archive header goes straight from
   breadcrumbs into the category title, no extra collapsed control taking
   up the top of the page. */
@media (max-width: 768px) {
  .berry-shop-sidebar {
    display: none;
  }

  /* Smaller and kept to a single truncated line (rather than wrapping to
     2 lines at the default 13px) — still useful for the parent-category
     context the H1 alone doesn't show, just lighter-weight on a narrow
     screen. Truncated with an ellipsis rather than made horizontally
     scrollable — a swipeable region here risked being misread as a
     pan/zoom gesture on real mobile browsers, which was pushing the
     whole page into a zoomed-in state (reported as content clipped
     symmetrically on both left and right edges). */
  .woocommerce-breadcrumb {
    display: block;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .berry-shop-layout {
    padding: 8px 8px 20px;
  }

  .woocommerce-products-header__title.page-title {
    font-size: 28px;
  }
}

/* ============================================
   SINGLE PRODUCT — actions row (Buy Now / quantity / Add to cart)
   ============================================
   form.cart's own children (core's .quantity div + .single_add_to_cart_button)
   are plain block-level elements by default; the Buy Now button
   (inc/buy-now.php, woocommerce_before_add_to_cart_button) is prepended as
   a further sibling at the START of that same form — ahead of the quantity
   stepper and the Add to cart button — so it reads as the first, most
   prominent action. Laying the whole row out with flex-wrap here is enough
   to line all of them up without touching core's own quantity/add-to-cart
   markup. (The wish heart used to render here too; it now lives on the
   gallery image itself — see .berry-single-badges-wrap .product-card__wish.)
   ============================================ */
.woocommerce div.product form.cart {
  /* Stacked column (Buy Now → Add to cart → quantity, per the order:1/2/3
     values below) instead of a wrapped row, all left-aligned rather than
     centered/stretched to full width. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  /* Core WooCommerce's own default is margin-bottom: 2em (~32px),
     unrelated to anything this theme deliberately spaced out — left the
     accordions section sitting a full 50px below the buttons. */
  margin-bottom: 12px;
}

.woocommerce div.product form.cart .quantity {
  margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  /* Visual order only (DOM order from the hooks is unchanged) — Buy Now
     leads (order:1, see .berry-buy-now-btn below), Add to cart follows,
     quantity is pushed to the end of the row (order:3, see
     .pd-qty-selector) since it's the least important action here. */
  order: 2;
  /* align-self:stretch (here and on .berry-buy-now-btn) makes both buttons
     the same WIDTH — both size to form.cart's own content width instead
     of their own text — without touching this button's own padding/
     font-size/height, which stay exactly as before. */
  align-self: stretch;
  text-align: center;
  border-radius: 50px;
  background: var(--grad-brand);
  border: none;
  box-shadow: 0 4px 20px rgba(139,92,246,0.35);
  transition: var(--transition);
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139,92,246,0.5);
  filter: brightness(1.1);
}

/* "Notify me when back in stock" — inc/stock-notifications.php, only
   rendered for genuinely out-of-stock products, right after the native
   "Няма в наличност" stock-status text. */
.berry-stock-notify {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-lg, 14px);
  background: var(--clr-surface-2, #f2f0ec);
  border: 1px solid var(--clr-border, rgba(0,0,0,0.08));
}

.berry-stock-notify__text {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin: 0 0 12px;
}

.berry-stock-notify__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.berry-stock-notify__input {
  flex: 1 1 200px;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  border: 1px solid var(--clr-border-2, rgba(0,0,0,0.14));
  background: #fff;
  font-size: 14px;
  color: var(--clr-text);
}

.berry-stock-notify__input:focus {
  outline: none;
  border-color: var(--clr-primary, #9c50ff);
}

.berry-stock-notify__btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 24px;
  border-radius: 50px;
  background: var(--clr-primary, #9c50ff);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.berry-stock-notify__btn:hover:not(:disabled) {
  background: var(--clr-primary-dark, #7a2ed6);
}

.berry-stock-notify__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.berry-stock-notify__message {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.berry-stock-notify__message.is-success {
  color: #059669;
}

.berry-stock-notify__message.is-error {
  color: #e11d48;
}

/* Buy Now button + its own small wish-heart, side by side (inc/buy-now.php)
   — .berry-buy-now-row is the actual flex child of form.cart now (order:1,
   moved from .berry-buy-now-btn itself now that it's nested one level
   deeper), so it leads the stacked actions column as before. */
.berry-buy-now-row {
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Was needed to lay the row's button + wish-heart out side by side; the
     heart moved to the gallery overlay (the ONE wish toggle now, desktop
     and mobile alike — see .berry-single-badges-wrap .product-card__wish),
     so this row is just the Buy Now button, but it still needs to stretch
     to match .single_add_to_cart_button's width below it. */
  align-self: stretch;
}

.berry-buy-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Same width as .single_add_to_cart_button (align-self:stretch fills
     .berry-buy-now-row, which itself stretches to form.cart's content
     width) regardless of "Купи сега" vs "Добавяне в количката" being very
     different text lengths — padding/font-size below are unchanged from
     before, so each button keeps its own original height/shape, only the
     width now matches. */
  width: 100%;
  padding: 16px 34px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: var(--font-sans);
  background: #00F08B;
  color: #3B0768;
  border: none;
  box-shadow: 0 4px 14px rgba(0,240,139,0.35);
  transition: var(--transition);
  white-space: nowrap;
}

.berry-buy-now-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,240,139,0.5);
}

.berry-buy-now-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ============================================
   BUY NOW POPUP — centered modal + real /checkout/ iframe
   ============================================
   Same overlay/backdrop-blur/box-shadow visual language as the existing
   cart drawer (.cart-overlay/.cart-drawer, see the CART DRAWER section
   above) so this reads as the same design system, just centered instead
   of a side panel. Higher z-index than the cart drawer (400/500) so if a
   customer somehow triggers both, Buy Now's own modal always wins.
   ============================================ */
.buy-now-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.buy-now-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.buy-now-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(560px, 94vw);
  height: min(760px, 92vh);
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 601;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.buy-now-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.buy-now-modal__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.buy-now-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.buy-now-modal__close:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

.buy-now-modal__body {
  position: relative;
  flex: 1;
  min-height: 0;
}

#buyNowFrame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.buy-now-modal.frame-ready #buyNowFrame {
  opacity: 1;
}

.buy-now-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--clr-surface);
  color: var(--clr-text-muted);
  font-size: 13.5px;
  transition: opacity 0.2s ease;
}

.buy-now-modal.frame-ready .buy-now-modal__loading {
  opacity: 0;
  pointer-events: none;
}

.buy-now-modal__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--clr-border-2);
  border-top-color: var(--clr-primary);
  animation: berrySpin 0.8s linear infinite;
}

@keyframes berrySpin {
  to { transform: rotate(360deg); }
}

/* Infinite-scroll sentinel (see inc/shop-infinite-scroll.php) — sits below
   the product grid where WooCommerce's numbered pagination used to be.
   The spinner is always in the DOM (keeps the sentinel a real, measurable
   element for IntersectionObserver to watch) but only visibly spinning
   while a fetch is in flight, via .is-loading. */
.berry-infinite-scroll {
  display: flex;
  justify-content: center;
  padding: 14px 0;
}

.berry-infinite-scroll__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--clr-border-2);
  border-top-color: var(--clr-primary);
  opacity: 0;
  animation: berrySpin 0.8s linear infinite;
}

.berry-infinite-scroll.is-loading .berry-infinite-scroll__spinner {
  opacity: 1;
}

@media (max-width: 640px) {
  .buy-now-modal {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ============================================
   WISHLIST AUTH PROMPT — "log in to save favorites"
   ============================================
   Same overlay/scale-in language as the Buy Now popup above (centered
   card instead of a side panel, same transition curve) — shown instead of
   favoriting when a signed-out visitor clicks a heart (see inc/wishlist.php
   and initWishlist()/initWishlistAuthPrompt() in berry-app.js). Same
   z-index tier as Buy Now (both are the only two centered modals on the
   site, mutually exclusive in practice — a customer isn't favoriting
   mid-Buy-Now).
   ============================================ */
.berry-auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.berry-auth-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.berry-auth-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(400px, 92vw);
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 601;
  padding: 40px 32px 32px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.berry-auth-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.berry-auth-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
}

.berry-auth-modal__close:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

.berry-auth-modal__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 10px 24px rgba(156,80,255,0.35);
}

.berry-auth-modal__title {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1A0A1E;
}

.berry-auth-modal__text {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--clr-text-muted);
}

.berry-auth-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.berry-auth-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: var(--transition);
}

.berry-auth-modal__btn--primary {
  background: var(--grad-brand);
  color: #fff;
}

.berry-auth-modal__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156,80,255,0.4);
}

.berry-auth-modal__btn--secondary {
  background: transparent;
  border: 1.5px solid var(--clr-border-2);
  color: var(--clr-text);
}

.berry-auth-modal__btn--secondary:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

/* ============================================
   MY ACCOUNT — Login/Register tabs (injected by my-account-tabs.js)
   ============================================
   No dedicated spacing existed for this bar at all -- it rendered flush
   against the sticky header with zero gap (confirmed live: header bottom
   edge and tabs top edge at the exact same y). */
.berry-account-tabs {
  margin: 28px 0 20px;
}

/* ============================================
   FAVORITES PAGE (/lyubimi/) — see page-lyubimi.php
   ============================================ */
.berry-favorites-page {
  padding: 16px 0 32px;
}

.berry-favorites-page__head {
  margin-bottom: 12px;
}

/* Back arrow — injected by initPageHeadBackArrow() in berry-app.js, for
   pages with no .woocommerce-breadcrumb (top-prodazhbi, lyubimi). Reuses
   .berry-breadcrumb-back's circular button styling. */
.berry-page-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.berry-page-head-row .berry-favorites-page__head,
.berry-page-head-row .woocommerce-products-header {
  margin-bottom: 0;
}

.berry-favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  background: var(--clr-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  gap: 16px;
}

.berry-favorites-empty__icon {
  font-size: 48px;
  color: var(--clr-accent);
}

.berry-favorites-empty p {
  color: var(--clr-text-muted);
  font-size: 15px;
  margin-bottom: 4px;
}

.berry-favorites-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .berry-favorites-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .berry-favorites-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .berry-favorites-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================
   MOBILE-ONLY HERO
   ============================================
   The reference site (Store_5) swaps the wide desktop hero banner image
   (which has its own baked-in "SUPER SALE -61%" graphic on the left third
   of a very wide image) for a plain text-based hero at mobile widths,
   since that wide image crops badly/loses its own message on a narrow
   screen. Matched here: #berry-hero-desktop (the real banner section)
   hides below 768px, #berry-hero-mobile (a plain HTML widget, see
   page-53 Elementor data) shows only below that width. */
#berry-hero-mobile { display: none; }

.hero-banner-mobile {
  background: var(--grad-brand);
  padding: 48px 28px 40px;
  text-align: left;
  border-radius: 0 0 0 40px;
}

.hero-banner-mobile h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 14px;
}

.hero-banner-mobile p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin: 0 0 24px;
  max-width: 320px;
}

.hero-banner-mobile .btn {
  display: inline-block;
  background: #00F08B;
  color: #3B0768;
  font-weight: 800;
  font-size: 14px;
  padding: 13px 30px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,240,139,0.35);
}

@media (max-width: 767px) {
  #berry-hero-desktop { display: none; }
  #berry-hero-mobile { display: block; }
}

/* ============================================
   SINGLE PRODUCT PAGE — product-detail rebuild
   ============================================
   Markup/hooks: woocommerce/content-single-product.php (template override,
   documented there), woocommerce/single-product/rating.php (override),
   inc/single-product.php (brand line, qty stepper buttons, accordions,
   related/upsell reorder, reviews section), and the gallery-overlay hook in
   functions.php (badges + brand stamp + wish button, priority 25 on
   woocommerce_before_single_product_summary).

   Colors reuse this file's own existing tokens (mint #00F08B, deep purple
   #5B21B6/#3B0768, --clr-* variables ported from the reference at the top
   of this file) rather than the reference's raw hex values, for consistency
   with every other section already built from those tokens.
   ============================================ */

.single-product .woocommerce-breadcrumb {
  max-width: 1320px;
  margin: 0 auto 12px;
  padding: 24px 24px 0;
}

.product-detail {
  display: grid;
  /* Was 4.5fr 5.5fr (gallery narrower than the info column) — swapped so
     the product photo gets more of the row's width on desktop. Mobile
     (≤900px, below) is untouched — it already stacks to a full-width
     single column regardless of this ratio. */
  grid-template-columns: 5.5fr 4.5fr;
  gap: 40px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto 28px;
  padding: 0 24px;
}

/* ---------- GALLERY ---------- */
/* Deliberately NOT fighting WooCommerce's own gallery markup (zoom/
   lightbox/thumbnail-slider all come from core + Hello Biz's own
   add_theme_support('wc-product-gallery-zoom'/'-lightbox'/'-slider')) —
   .product-detail__main-img-wrap only adds the rounded-card frame; the real
   gallery widget inside (.woocommerce-product-gallery) keeps its own
   default sizing/behaviour so zoom and the thumbnail strip keep working. */
.product-detail__gallery {
  width: 100%;
}

/* WooCommerce core's own woocommerce-layout.css ships
   ".woocommerce div.product div.images { width: 48% }" — its legacy
   default two-column single-product layout (gallery/summary side by
   side at 48%/48%). .woocommerce-product-gallery carries the plain
   "images" class core targets, so that 48% rule was capping the gallery
   at roughly HALF of .product-detail__main-img-wrap's real width
   regardless of how wide this custom grid's column was — confirmed live
   (271px rendered vs. 565px actually available). This isn't a slider/JS
   sizing issue, just this one leftover core rule needing an override. */
.product-detail__main-img-wrap .woocommerce-product-gallery {
  width: 100% !important;
}

/* Root cause of "tapping the photo doesn't open fullscreen" (only the
   magnifying-glass icon worked): WooCommerce's own hover-zoom feature
   (assets/js/zoom/jquery.zoom.js) permanently injects a second <img
   class="zoomImg"> directly into .woocommerce-product-gallery__image,
   stacked on top of the real image+link at opacity:0 whenever the mouse
   isn't hovering — confirmed live via elementFromPoint() that this
   invisible layer, not the <a>, was the actual click target. The zoom
   plugin only ever binds its mouseenter/mousemove/mouseleave handlers to
   the underlying source link (confirmed in jquery.zoom.js), never to
   zoomImg itself, so it doesn't need to receive pointer events at all —
   letting clicks pass through restores WooCommerce's own click-to-open
   PhotoSwipe binding without touching the hover-zoom effect. */
.woocommerce-product-gallery__image .zoomImg {
  pointer-events: none;
}

/* Positioning context for .berry-single-badges-wrap once berry-app.js's
   initSingleProductGalleryOverlay() moves it in here — confines the
   overlay's absolute bottom/left/etc. to just this (the main) image,
   instead of the old behavior of resolving against the combined height
   of the main photo + thumbnail row below it. */
.woocommerce-product-gallery__image:first-child {
  position: relative;
}

/* Gap between the main photo and the small thumbnail row below it — core's
   simple gallery (see inc/single-product.php, flexslider removed) lays the
   main image out as a block and the thumbnails as inline-block siblings
   right after it with no spacing at all, so they sat flush against each
   other with zero visual separation. */
.woocommerce-product-gallery__image:not(:first-child) {
  margin-top: 12px;
}

.product-detail__main-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Defense in depth alongside removing the flexslider gallery support
     (see inc/single-product.php) — explicitly tells the browser that a
     vertical drag starting on the photo should scroll the PAGE, not be
     captured by any swipe/gesture handler. Was the suspected cause of a
     reported mobile bug: the quantity stepper below the image felt
     unreachable, like the page was "stuck" and wouldn't scroll past the
     photo. */
  touch-action: pan-y;
}

/* Background moved here from .product-detail__main-img-wrap: that wrap
   spans the main photo AND the thumbnail row below it as one box (see
   the DOM — .woocommerce-product-gallery__wrapper holds every
   .woocommerce-product-gallery__image, main + thumbnails, as siblings),
   so a background on the wrap painted a big grey rectangle behind the
   leftover empty space next to/below the small (width:25%, WooCommerce
   core) thumbnails too — confirmed live as the "ugly grey space" between
   the photo and the thumbnails. Scoped to just the main photo container
   instead, where it belongs as a loading/letterbox backdrop. */
.woocommerce-product-gallery__image:first-child {
  background: var(--clr-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Fullscreen zoom modal (PhotoSwipe, WooCommerce core) — confirmed live
   that when open (.pswp--open), it computes top:32px / height:calc(100%
   - 32px) instead of covering the true viewport, leaving a visible gap
   at the top with the site header showing through. This is a known
   WordPress quirk: the admin toolbar (only visible to logged-in admins,
   never to real customers) shifts position:fixed elements down by its
   own height in some browsers, even though the toolbar and the modal
   have no actual parent/child relationship. Forcing both back to true
   fullscreen here makes it bulletproof either way — for a logged-in
   admin testing the site AND for every real visitor who'll never see
   the admin bar at all. */
.pswp.pswp--open {
  top: 0 !important;
  height: 100% !important;
}

/* PhotoSwipe's default skin (photoswipe/default-skin.css) ships black for
   the full-screen backdrop and the top/bottom UI bars — recolored to the
   site's theme purple so the fullscreen viewer matches the rest of the
   store instead of looking like an unbranded stock lightbox. Same rules
   apply on both mobile and desktop (PhotoSwipe doesn't have separate
   breakpoint styling for these). */
.pswp__bg {
  background: var(--clr-primary, #9c50ff) !important;
}

.pswp__top-bar,
.pswp__caption,
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: var(--clr-primary, #9c50ff) !important;
}

.product-detail__main-img-wrap .woocommerce-product-gallery__wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-detail__main-img-wrap img {
  border-radius: var(--radius-lg);
}

/* Brand stamp + badges + wish heart overlay — see berry-single-badges-wrap
   base rules earlier in this file (~line 3110). Extended here only for the
   parts specific to this page: the discount/pill badge pair, and the wish
   heart, which now renders INSIDE .berry-extra-badges--single itself (see
   functions.php) so it's just one more item in that flex column — stacks
   right below whatever badge(s) are present (НОВО/ХИТ/ИЗБОР/discount)
   using the column's own `gap`, right-aligned under them like the
   reference asked for, instead of a separate absolutely-positioned corner
   that could collide with a variable number of badges. */
.berry-single-badges-wrap .product-card__discount-badge {
  display: block;
}

.berry-single-badges-wrap .product-card__wish {
  pointer-events: auto;
  position: static;
  /* Bigger + higher-contrast than the base .product-card__wish (38px,
     light-grey heart) — that grey outline against a white product photo
     was nearly invisible until hovered; the deep-purple icon color reads
     clearly at rest, matching the rest of this page's dark-purple icon/
     text color (Buy Now's own text, qty stepper digits). Hover/active/
     wished states are handled by the plain, unscoped .product-card__wish
     rule now (same purple/green treatment sitewide — shop grid, Favorites,
     homepage rows — not just this page). */
  width: 48px;
  height: 48px;
  font-size: 24px;
  color: #3B0768;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

/* ---------- INFO COLUMN ---------- */
/* Same root cause already fixed on the gallery side (see
   .product-detail__main-img-wrap .woocommerce-product-gallery above):
   WooCommerce core's legacy 2-column layout CSS (woocommerce-layout.css)
   ships `.woocommerce div.product div.summary { float:right; width:48%; }`
   — this element carries WC's own `summary` class alongside
   product-detail__info, so that rule silently capped it at 48% of its real
   grid-track width (222px instead of 462px, confirmed live) regardless of
   this custom grid's column sizing. That's what was forcing Buy Now/Add to
   cart/quantity onto separate stacked lines instead of flowing together. */
.product-detail__info {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  float: none !important;
}

.product-detail__info .product-detail__brand {
  /* display:block + text-decoration:none — this renders as a real <a>
     linking to the brand's product archive whenever one exists (see
     inc/single-product.php), and a plain <p> otherwise; the <a> case
     needs these two explicit since anchors are inline with an underline
     by default, unlike the <p> case which is already block with no
     decoration. Underline comes back on hover as the one visual hint
     this specific instance is clickable (the plain-text fallback case
     never gets :hover styling applied since nothing triggers it). */
  display: block;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary-2, #af73ff);
  margin: 0 0 8px;
}

a.product-detail__brand:hover {
  text-decoration: underline;
}

.product-detail__info .product_title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #3B0768;
  margin: 0 0 12px;
}

.product-detail__stars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.product-detail__stars .star-icons {
  color: var(--clr-gold, #b8860b);
  font-size: 16px;
  letter-spacing: 1px;
}

.product-detail__stars .review-count {
  font-size: 13.5px;
  color: var(--clr-text-muted);
}

.pd-leave-review {
  font-size: 13px;
  color: var(--clr-primary, #9c50ff);
  text-decoration: underline;
  margin-left: 6px;
}

.pd-leave-review:hover {
  text-decoration: none;
}

/* Price — reuses WooCommerce's own real .price markup (already dual-
   currency via the Bulgarisation plugin site-wide); only reskinned here to
   read at product-page scale instead of card scale.

   Column, not row+wrap: same dual-currency wrapping inconsistency as
   .product-card__price-row / .woocommerce ul.products li.product .price
   above in this file — del/ins text length varies enough per product
   (EUR + BGN in each) that a row layout lands on one line for some
   products and wraps mid-string for others at this column's width.
   Forcing the stack makes every product page show old-price-then-
   new-price on two consistent lines, matching that same fix. */
.product-detail__info > .price,
.product-detail__info p.price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* Matches the listing page's normal (non-sale) price color exactly
     (.woocommerce ul.products li.product .price, above in this file) —
     was #3B0768 (a different purple), now #5B21B6 to be the same color
     everywhere a plain price shows. !important is required here: core
     WooCommerce's own woocommerce.css ships
     ".woocommerce:where(...) div.product p.price { color: #958e09;
     font-size: 1.25em }" — the :where() wrapper zeroes THAT selector's
     own specificity, but the div/p/p.price tags outside it still count,
     giving core's rule a higher raw specificity (0,2,3) than this rule's
     (0,2,1) even though both have 2 classes — ties on class-count fall
     through to element-count, and core has more. Confirmed live: without
     !important the price rendered gold (rgb(149,142,9)) at a 1.25em size
     (20px, inherited from body's 16px) instead of this rule's own color/
     size — font-size needs the same !important treatment color already
     has, or it silently loses the same way. */
  font-size: 34px !important;
  font-weight: 700;
  color: #5B21B6 !important;
  margin: 0 0 10px;
}

.product-detail__info p.price ins {
  text-decoration: none;
  color: #e11d48;
}

.product-detail__info p.price del {
  font-size: 17px;
  font-weight: 500;
  color: var(--clr-text-dim);
  opacity: 1;
}

/* "Няма в наличност" — see inc/single-product.php's woocommerce_get_
   stock_html filter. Only ever rendered when a product is genuinely out
   of stock (the in-stock "Налични X" count stays hidden, unchanged from
   before); same red already used everywhere else on this site for a
   sale/urgent price (.price ins, .price-current--sale, and the matching
   shop-grid out-of-stock button), so this reads as one consistent
   "attention" color instead of introducing a new one. */
p.stock.out-of-stock.berry-out-of-stock-notice {
  color: #e11d48;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
}

.product-detail__info .woocommerce-product-details__short-description {
  font-size: 15px;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.product-detail__info .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* ---------- QTY STEPPER + ADD TO CART ROW ---------- */
/* form.cart is already display:flex (see the SINGLE PRODUCT — actions row
   section earlier in this file) — .pd-qty-selector just becomes one more
   flex item in that existing row, sitting where the bare .quantity div
   used to sit alone. */
.pd-qty-selector {
  /* Pushed to the end of the actions row — see the order:1/2 comment on
     .berry-buy-now-btn/.single_add_to_cart_button above. position:relative
     anchors the visually-hidden native .qty input (position:absolute,
     below) to this row rather than some further, unrelated ancestor. */
  order: 3;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-border-2);
  border-radius: 50px;
  overflow: hidden;
  flex-shrink: 0;
}

.pd-qty-selector .quantity {
  display: contents;
}

.pd-qty-btn {
  /* padding:0 + min-width:0 override two things that otherwise win over
     the explicit width below: hello-biz theme.css's generic button reset
     ([type="button"], button { padding-left/right: 1rem }), and flex
     items' default min-width:auto — which floors a flex item's width at
     its content+padding size, silently overriding a smaller explicit
     width unless min-width is reset. Confirmed live: without these two,
     the button rendered ~33.6px wide regardless of the width set here. */
  width: 42px;
  height: 44px;
  min-width: 0;
  padding: 0;
  /* border:none — hello-biz theme.css's generic button reset
     ([type="button"], button) ships a 1px solid reddish-pink border
     (rgb(204,51,102)) on every plain button by default; without this
     override it leaked through onto these +/- buttons. */
  border: none;
  /* Site's mint brand-accent green, same color as the Buy Now button
     (#00F08B) — matches the primary CTA's color language instead of the
     previous neutral grey. */
  background: #00F08B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #3B0768;
  transition: var(--transition);
}

.pd-qty-btn:hover {
  background: #00d67c;
}

/* Visually hidden — the visible digit is .pd-qty-selector__value below
   instead (a plain span, kept in sync by initPdQtyStepper() in
   berry-app.js). This input is still real and functional (form.cart
   submits it, buy-now.php reads it, its aria-label is still what a screen
   reader announces) — only its own on-screen rendering is removed.
   WHY: mobile Safari renders <input type="number"> with native OS chrome
   that fought this compact 42px custom box hard enough to make the digit
   disappear entirely (confirmed via user screenshots) even after trying
   -webkit-appearance:none and full custom width/padding/background resets
   — a native <input>'s per-browser rendering quirks can't be fully ruled
   out with CSS alone, but a plain <span> has none of that surface at all.
   position:absolute removes it from .pd-qty-selector's flex row entirely,
   so the row's three visible items are just minus/value-span/plus (see
   .pd-qty-selector position:relative above, its new anchor). */
.pd-qty-selector .qty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.pd-qty-selector__value {
  width: 42px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--clr-border-2);
  border-right: 1px solid var(--clr-border-2);
  font-size: 16px;
  font-weight: 700;
  color: #3B0768;
  user-select: none;
}

.pd-qty-selector .qty::-webkit-outer-spin-button,
.pd-qty-selector .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- ACCORDIONS ---------- */
.pd-accordions {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--clr-border);
  margin-top: 12px;
}

.pd-accordion {
  border-bottom: 1px solid var(--clr-border);
}

.pd-accordion__head {
  width: 100%;
  text-align: left;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 700;
  color: #3B0768;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

/* :hover/:focus explicitly reset — this is a real <button>, and Hello
   Biz's own theme.css ships a generic `button:hover, button:focus {
   background-color: #c36; color: #fff; }` reset (that same reddish-pink
   that's leaked through as a border/color in a few other places this
   session — .pd-qty-btn, the "Не е в наличност" card button, etc., all
   the same root cause: this one theme-wide button reset). Only the
   resting state was ever styled here, so tapping/hovering the accordion
   exposed that hot-pink background straight from the parent theme.
   Confirmed live: exactly what showed in the reported screenshot. */
.pd-accordion__head:hover,
.pd-accordion__head:focus {
  background: transparent;
  color: #3B0768;
}

.pd-accordion__head span {
  font-size: 20px;
  font-weight: 400;
  color: var(--clr-text-muted);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.pd-accordion.active .pd-accordion__head span {
  transform: rotate(45deg);
}

.pd-accordion__body {
  display: none;
  padding-bottom: 18px;
  font-size: 14px;
  color: var(--clr-text-muted);
  line-height: 1.65;
}

.pd-accordion__body p {
  margin-bottom: 10px;
}

.pd-accordion__body p:last-child {
  margin-bottom: 0;
}

.pd-accordion.active .pd-accordion__body {
  display: block;
}

/* ---------- RELATED / UPSELL PRODUCT ROWS ---------- */
/* Both render through WooCommerce core's own related.php/up-sells.php
   templates (real <ul class="products"><li class="product">... markup),
   which already carries every bit of the site's existing shop-grid styling
   (brand stamp, badges, wish heart, price — see the .woocommerce ul.products
   li.product rules earlier in this file). Only the section-level chrome
   (heading, spacing) is added here, reusing the products-section/section-
   title classes the homepage rows already use, for one consistent
   "section of product cards" look across the whole site. */
.single-product .related.products,
.single-product .up-sells.products {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.single-product .related.products {
  padding-top: 32px;
  border-top: 1px solid var(--clr-border);
}

.single-product .related.products > h2,
.single-product .up-sells.products > h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #3B0768;
  margin: 0 0 28px;
}

/* Less dead space on mobile — same general tightening pass already
   applied to the homepage/shop grids: smaller side gutters and less
   space above the section/around its heading. */
@media (max-width: 768px) {
  .single-product .related.products,
  .single-product .up-sells.products,
  .berry-crosssell {
    padding-left: 8px;
    padding-right: 8px;
  }

  .single-product .related.products {
    padding-top: 20px;
  }

  .berry-crosssell {
    padding-top: 20px;
  }

  .single-product .related.products > h2,
  .single-product .up-sells.products > h2,
  .berry-crosssell__title {
    margin-bottom: 14px;
  }
}

/* "Заедно купуват" (bought-together / cross-sell) — inc/product-relations.php.
   Same section-chrome pattern as .related.products right above (own
   ul.products grid comes from .woocommerce ul.products li.product's
   existing card styling further up this file), just its own top border
   so it reads as a clearly separate section under "Подобни продукти",
   not a continuation of it. */
.berry-crosssell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 24px 0;
  border-top: 1px solid var(--clr-border);
}

.berry-crosssell__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #3B0768;
  margin: 0 0 28px;
}

/* "Подобни продукти" + "Заедно купуват" carousels — arrow buttons/wrap
   injected by initProductCarousels() in berry-app.js (both sections are
   plain WooCommerce product-loop markup with no template hook to add
   arrows into directly), same visual language as the homepage
   partners-bar carousel. The ul.products grid itself is overridden from
   WooCommerce's default CSS Grid to a horizontal scroll-snap row —
   !important needed since core's own woocommerce.css sets
   `display: grid` on this exact selector at equal specificity, loaded
   after this stylesheet in some contexts (same recurring cascade-order
   issue already worked around elsewhere in this file). */
.berry-product-carousel__wrap {
  position: relative;
}

.related.products ul.products,
.berry-crosssell__grid ul.products {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding: 4px 4px 16px;
}

.related.products ul.products::-webkit-scrollbar,
.berry-crosssell__grid ul.products::-webkit-scrollbar {
  display: none;
}

.related.products ul.products li.product,
.berry-crosssell__grid ul.products li.product {
  /* !important required: core's own woocommerce.css ships
     `.woocommerce ul.products[class*="columns-"] li.product { width: 48% }`
     — the real ul.products element here always carries a "columns-N"
     class from WC core, and that attribute-selector rule's specificity
     (0,4,2) beats this rule's (0,3,2) outright, so without !important
     every card silently stayed at core's 48%-of-track width (measured
     1084px in a 1092px-wide track — i.e. barely different from 100%,
     not the compact 220px carousel card this rule asks for) regardless
     of source order. */
  flex: 0 0 auto !important;
  width: 220px !important;
  scroll-snap-align: start;
}

/* Narrower on mobile — 220px left barely more than a sliver of the next
   card visible in a ~330px track (viewport minus the section's own side
   padding), and what little did peek through sat right under the
   right-arrow button's own footprint, effectively hiding it entirely.
   150px reliably leaves a real, visible peek of card 2 clear of the
   arrow. */
@media (max-width: 768px) {
  .related.products ul.products li.product,
  .berry-crosssell__grid ul.products li.product {
    width: 150px !important;
  }
}

.berry-product-carousel__arrow {
  position: absolute;
  /* 44% — measured live to match the vertical center of the "НОВО"
     badge (.berry-extra-badges, bottom:8px/left:8px of the image) exactly,
     per feedback that the arrows sat too high up near the top of the
     image. Doesn't collide with the badge itself despite the shared
     height: the badge sits inset *inside* the image (left:8px), while
     the arrow sits at the card's outer edge (left:-24px, well outside
     the image) — same row, opposite ends, confirmed live with zero
     bounding-box overlap. */
  top: 44%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  /* padding:0 required — this <button> otherwise inherits a generic
     8px/16px browser/theme button padding, which combined with the
     fixed 32px width left almost no room for the icon (same class of
     bug already hit and fixed on the out-of-stock cart button earlier
     this session), pushing/overflowing it out past the circle's own
     visible edge instead of sitting centered inside it. */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--clr-primary, #9c50ff);
  color: #fff;
  box-shadow: 0 4px 14px rgba(156,80,255,0.35);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.berry-product-carousel__arrow svg {
  width: 15px;
  height: 15px;
}

.berry-product-carousel__arrow:hover:not(:disabled) {
  background: var(--clr-primary-dark, #7a2ed6);
}

.berry-product-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.berry-product-carousel__arrow--prev {
  /* Was -4px — the card's product image runs almost edge-to-edge inside
     the card (unlike the partners-bar pills this carousel pattern was
     borrowed from, which have visible padding around their content), so
     a shallow overlap here landed the circle right on top of the actual
     product photo instead of on blank space. Pulled out further so it
     clears the image, sitting over the card's own white margin instead. */
  left: -30px;
}

.berry-product-carousel__arrow--next {
  right: -30px;
}

@media (min-width: 769px) {
  .berry-product-carousel__arrow {
    /* Same badge-height target as the mobile 44% (measured live against
       .berry-extra-badges again), just a different number — the wider
       220px desktop card changes how much of the total card height the
       image takes up vs. the title/price/button text below it, so the
       same percentage doesn't land in the same place at both widths. */
    top: 51%;
  }
  .berry-product-carousel__arrow--prev {
    left: -32px;
  }
  .berry-product-carousel__arrow--next {
    right: -32px;
  }
}

/* ---------- REVIEWS SECTION ---------- */
/* Real native WooCommerce review list + submission form (comments_template(),
   see inc/single-product.php) — the "Остави оценка" link's real destination. */
.single-product #reviews {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  border-top: 1px solid var(--clr-border);
}

/* Review card layout — replaces core WooCommerce's own layout technique
   (woocommerce.css: the avatar is `position:absolute; top:0; left:0;
   width:32px`, floated out of flow, with `.comment-text { margin-left:
   50px }` left as the only thing reserving space for it) with a plain
   flex row instead. That absolute-positioning trick is exactly why the
   avatar read as "too small, almost not visible" (32px, core's own fixed
   size) and why the reviewer name/date/stars looked cramped on narrow
   screens (a fixed 50px margin doesn't adapt, and the meta line has no
   wrapping behavior of its own at any width). Flex fixes both: the
   avatar can be sized freely without fighting position:absolute, and
   flex-wrap on the meta row below lets name/date/stars reflow naturally
   instead of relying on core's fixed-width assumptions.
   Same card look (border, radius, background) as this file's other
   Berry-styled boxes rather than core's plain bordered box, so it reads
   as one visual system with the rest of the page. */
.single-product #reviews .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  background: #fff;
}

/* !important throughout: WooCommerce core's own woocommerce.css targets
   this same <img> via `.woocommerce #reviews #comments ol.commentlist li
   img.avatar` — 2 IDs (#reviews, #comments) vs. our 1 (#reviews), so core
   was winning outright despite coming first in source order, leaving the
   avatar rendered with core's own `position:absolute; top:0; left:0;
   width:32px` — floating out of flow at the card's top-left corner,
   overlapping the border, instead of sitting inline in this flex row.
   Confirmed live via getComputedStyle before this fix. Matching core's
   ID count (adding #comments here) still loses on core's extra element-
   selectors (ol/li/img), so !important is the reliable fix rather than
   another specificity arms race. */
/* Premium ring treatment per request ("still looks strange make it look
   premium ... like the avatar i mean") — a flat solid --clr-primary
   border read as plain/flat next to the rest of the page's gradient-
   heavy button/badge language. Swapped for the same --grad-brand
   gradient used on CTAs/tiles site-wide: `padding` (not `border`) plus a
   gradient `background` is what makes the gradient show as a ring rather
   than being hidden behind the photo — object-fit:cover only fills the
   IMG's content-box, leaving the padding band around it to show the
   background through, a standard technique confirmed live before
   landing here (a floating clone at 150px, since this section's own
   screenshots are unreliable in this dev pane — see gap/position checks
   above for how that was worked around). */
.single-product #reviews .comment_container .avatar {
  position: static !important;
  float: none !important;
  flex-shrink: 0;
  width: 52px !important;
  height: 52px !important;
  padding: 3px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: var(--grad-brand) !important;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(141,91,245,0.35) !important;
}

/* Same core-vs-theme specificity fight as .avatar above: core's own
   `.woocommerce #reviews #comments ol.commentlist li .comment-text` (2
   IDs) was winning over this rule's 1 ID, leaving core's own `margin:
   0 0 0 50px; border: 1px solid; padding: 1em 1em 0` in effect — a
   second bordered box nested inside this file's own card, pushed 50px
   right of the avatar instead of sitting flex-gap (14px) away from it. */
/* Grid instead of the old plain flex column: puts the date on the same
   row as the stars, and the "verified" badge on the same row as the
   name, using the free horizontal space next to each instead of one
   long wrapping line underneath the stars (per request — "cant we put
   this in the free space next to the name or somewhere else" / "like
   the date next to the starts and verified next to the name"). Core's
   markup nests author/verified/dash/time inside a single <p class="meta">
   sibling of .star-rating, so `display: contents` on p.meta below
   flattens it — its children become direct grid items here, placeable
   independently of that original grouping without a template override. */
.single-product #reviews .comment-text {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 4px;
}

.single-product #reviews .comment-text .star-rating {
  grid-column: 1;
  grid-row: 1;
  float: none;
  margin: 0;
}

/* Same core-vs-theme specificity gap as .avatar/.comment-text above —
   core's `#reviews #comments ol.commentlist li .comment-text p.meta` /
   `...li .meta` beat color here too, so that needs !important. */
.single-product #reviews .comment-text p.meta {
  display: contents;
  margin: 0 !important;
  color: var(--clr-text-muted) !important;
}

.single-product #reviews .comment-text .woocommerce-review__author {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text);
}

/* Was italic plain text ("(потвърден клиент)") stuck between the name
   and the dash — now that it sits alone next to the name, a small pill
   reads more like a real "verified" badge than leftover parenthetical
   text. */
.single-product #reviews .comment-text .woocommerce-review__verified {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-primary);
  background: #f6f0ff;
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
}

/* The "–" only made sense between verified/date on one shared line —
   both now sit in their own spot, so it's redundant. */
.single-product #reviews .comment-text .woocommerce-review__dash {
  display: none;
}

.single-product #reviews .comment-text time {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 12.5px;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.single-product #reviews .comment-text .description {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 4px;
}

.single-product #reviews .comment-text .description p {
  margin: 0 !important;
}

.single-product #reviews .woocommerce-Reviews-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: #3B0768;
  margin: 0 0 24px;
}

/* Review card felt oversized on phones ("too big on mobile like the
   whole review") — every size here was still the desktop value (52px
   avatar, core's own 1em/16px stars rendering an 86px-wide row, 16px/
   25.6px review text, 16px card padding), which on a ~340px-wide card
   left almost nothing feeling proportionate. Scaled the whole card down
   together rather than just the avatar, at this file's usual 768px
   breakpoint. `.star-rating`'s font-size here already outranks core's
   `.woocommerce .star-rating` (0 IDs) without !important — same reason
   the desktop float:none override didn't need it either. */
@media (max-width: 768px) {
  .single-product #reviews {
    padding: 16px 16px 20px;
  }

  .single-product #reviews .comment_container {
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
  }

  .single-product #reviews .comment_container .avatar {
    width: 40px !important;
    height: 40px !important;
    padding: 2px !important;
    box-shadow: 0 3px 10px rgba(141,91,245,0.3) !important;
  }

  .single-product #reviews .comment-text .star-rating {
    font-size: 13px;
  }

  .single-product #reviews .comment-text .woocommerce-review__author {
    font-size: 13px;
  }

  .single-product #reviews .comment-text .woocommerce-review__verified {
    font-size: 10px;
    padding: 2px 8px;
  }

  .single-product #reviews .comment-text time {
    font-size: 11.5px;
  }

  .single-product #reviews .comment-text .description p {
    font-size: 14px;
    line-height: 1.5;
  }

  .single-product #reviews .woocommerce-Reviews-title {
    margin: 0 0 16px;
  }
}

.single-product #reviews .comment-form-rating label,
.single-product #reviews .comment-form-comment label,
.single-product #reviews .comment-form-author label,
.single-product #reviews .comment-form-email label {
  font-size: 13.5px;
  font-weight: 600;
  color: #3B0768;
}

/* Review FORM's interactive star-PICKER ("Вашата оценка", p.stars/a.star-N
   — a different widget from #reviews .star-rating above, which only
   DISPLAYS an already-submitted rating). WooCommerce core (woocommerce.css)
   draws each star via a WooCommerce-icon-font glyph on ::before (outline
   star \e021 by default, filled star \e020 on hover or once picked via
   .selected a.active) with no color of its own set on either state, so it
   inherited plain ambient text color — same root cause, same fix as the
   review-list stars: set `color` directly, here on the ::before itself
   since core's own rule already targets that exact pseudo-element (equal
   selector specificity, this file loading after woocommerce.css settles
   which one wins). One color covers every state (empty outline, hover
   preview, and the confirmed pick) since none of core's state-specific
   rules touch color themselves, only which glyph shows. */
.woocommerce p.stars a::before {
  color: #FFB400;
}

.single-product #reviews #submit,
.single-product #reviews input#submit {
  border-radius: 50px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
    /* Was 14px — now that .product-detail__info's children are unwrapped
       into direct grid items (see display:contents below), this same gap
       lands between EVERY one of them (brand/title/gallery/price/cart/
       accordions), not just the one gallery<->info boundary it used to
       separate. Dropped to 6px so it reads as a small consistent seam
       rather than compounding with each element's own margin into a much
       bigger gap than intended — most visibly between price and the
       cart/buttons form just below it. */
    gap: 6px;
    margin-bottom: 14px;
  }

  .product-detail__info .product_title {
    font-size: 24px;
  }

  .product-detail__info > .price,
  .product-detail__info p.price {
    font-size: 26px !important;
    /* 0, not 8px — the grid's own 6px gap (above) now supplies the
       separation from the cart/buttons form right after it. */
    margin: 0;
  }

  /* Brand + title above the gallery image on mobile (was: gallery first,
     then the whole info column — brand/title included — below it).
     .product-detail__info's own box is "dissolved" via display:contents
     so its children (brand, title, price, cart form, accordions) become
     direct grid items of .product-detail alongside .product-detail__gallery,
     letting each be individually reordered instead of moving as one block.
     Brand/title get a negative order to land before the gallery; gallery
     sits at -1 (after them, still before price/cart/accordions, which
     stay at the default order: 0 and keep their normal source-order
     position right after the gallery). */
  .product-detail__info {
    display: contents;
  }

  .product-detail__brand,
  .product-detail__info .product_title {
    order: -2;
  }

  .product-detail__gallery {
    order: -1;
  }
}

/* ============================================
   CART PAGE SUGGESTIONS — "Наскоро разгледани" +
   "Клиентите, купили тези продукти, купиха и"
   (inc/cart-suggestions.php)

   Reuses .product-card / .product-card__* as-is (same component the
   Favorites page uses via berry_render_product_card()) — no new card
   markup. The only new thing here is the horizontally-scrolling "mini"
   row layout: .berry-cart-suggestions__track constrains each card to a
   narrower fixed width instead of the Favorites page's CSS grid, which
   is what makes these read as compact tiles rather than full grid cards.
   Scoped entirely under .berry-cart-suggestions-wrap / __track / __item
   so nothing here touches .product-card rules used elsewhere on the site.
   ============================================ */
.berry-cart-suggestions-wrap {
  padding: 8px 0 24px;
}

.berry-cart-suggestions.products-section {
  padding: 32px 0;
}

.berry-cart-suggestions .section-header {
  margin-bottom: 20px;
}

.berry-cart-suggestions__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  /* Snap-scroll makes the row feel deliberate on touch devices instead of
     landing mid-card after a swipe. */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.berry-cart-suggestions__track::-webkit-scrollbar {
  height: 6px;
}

.berry-cart-suggestions__track::-webkit-scrollbar-thumb {
  background: var(--clr-surface-2);
  border-radius: 999px;
}

.berry-cart-suggestions__item {
  flex: 0 0 168px;
  max-width: 168px;
  scroll-snap-align: start;
}

/* The reused .product-card is display:flex/flex-direction:column with its
   own internal sizing already compact (see PRODUCT GRID & CARDS above) —
   only the outer width needs constraining here for the "mini" feel; card
   internals (image aspect-ratio, name/price/star font sizes) are left
   untouched so this stays visually identical to every other product-card
   on the site, just narrower. */
.berry-cart-suggestions__item .product-card {
  height: 100%;
}

@media (min-width: 640px) {
  .berry-cart-suggestions__item {
    flex-basis: 192px;
    max-width: 192px;
  }
}

/* ============================================
   "Работим с" (partners) row
   ============================================
   The ORIGINAL Elementor section (id 8b40c99) hit this install's
   unresolved render-cache bug — DB updates never reached the live page —
   and only had 5 fixed slots regardless, not enough for the real 11-brand
   list. Hidden outright; replaced by berry_render_partners_bar()
   (inc/homepage-partners-bar.php), spliced in right after this hidden
   section via the_content, with real brand logos and no slot limit.
   Section d085788 (a separate Elementor section, just the standalone
   "Работим с" heading above the pill row) is hidden too — the new
   section renders its own heading. */
[data-id="8b40c99"],
[data-id="d085788"] {
  display: none !important;
}

/* Homepage background color fix — the visible page background isn't
   actually body's background in most places; the homepage is built as a
   stack of Elementor sections, and several of them carry their own
   hardcoded background-color (#F7F5F2, the old cream — set in Elementor's
   own editor UI, baked into its generated per-post stylesheet
   post-53.css, not this theme's CSS at all) covering the full section
   width/height. Changing --clr-bg above only affects bare body background
   showing through GAPS — invisible everywhere one of these sections
   fully covers the viewport, confirmed live via getComputedStyle walking
   the section ancestor chain behind the "Нови Продукти" heading. Overriding
   each cream section's own generated rule directly (via matching its
   stable elementor-element-XXXXX class, !important since Elementor's own
   post-53.css rule already carries a non-trivial :not() selector) is the
   same technique already used above for hiding 8b40c99/d085788 — safer
   than hand-editing generated Elementor CSS, which gets silently
   regenerated/overwritten. The two sections ALREADY hidden above
   (8b40c99, d085788) are skipped here since recoloring an invisible
   element does nothing. Sections that were already white (943a9e0,
   7dc5a56, fe28c33) are deliberately left alone — they're intentionally
   flush white content blocks, not standing in for page background, and
   this site's own alternating cream/white section rhythm collapses into
   the reference's single flat grey specifically where cream was used. */
.elementor-element-121f01e,
.elementor-element-4517773,
.elementor-element-a1fb3d9,
.elementor-element-9e7fdda,
.elementor-element-8a6ff74 {
  background-color: var(--clr-bg, #d8d8d8) !important;
}

/* These 5 sections each carry a hefty 56px (70px for 8a6ff74) padding on
   their outward-facing edge, baked into Elementor's own generated
   per-post CSS (not this file) — see the note above on why overriding
   here beats hand-editing that generated output. On mobile that reads as
   a big empty gap (e.g. directly under .hero-banner-mobile, which sits
   flush against 121f01e with zero gap of its own — confirmed by measuring
   getBoundingClientRect() live). The 8px seam side facing an adjacent
   section is already tight and deliberately left alone. */
@media (max-width: 768px) {
  .elementor-element-121f01e { padding-top: 14px !important; }
  .elementor-element-4517773 { padding-bottom: 14px !important; }
  .elementor-element-a1fb3d9 { padding-top: 14px !important; }
  .elementor-element-9e7fdda { padding-bottom: 14px !important; }
  /* Elementor's own generated per-post CSS (post-53.css) gives this
     section a flat 24px left/right padding at every breakpoint (it has
     no responsive override of its own) — on a narrow phone that reads as
     a big wasted margin on both sides of the product grid instead of the
     grid using the available width. Shrunk to just enough to keep cards
     off the screen edge, matching the request to use up the left/right
     space with only a little breathing room left (was 8px, shrunk
     further per follow-up request to use up even more of the width). */
  .elementor-element-9e7fdda { padding-left: 0 !important; padding-right: 0 !important; }
  /* Belt-and-suspenders: every ancestor between this section and the
     actual product grid, forced to 0 side padding/margin and full width
     with !important. The section's own padding above already tested as
     genuinely 0 in the served CSS (re-verified directly against a fresh
     copy of Elementor's generated post-53.css, WooCommerce core's own
     woocommerce.css/woocommerce-smallscreen.css, and the parent Hello Biz
     theme's theme.css — none of them add side padding here on mobile),
     but a visible gap was still reported live after that — covering the
     whole chain at once rules out any remaining source in one pass
     instead of guessing at a single specific culprit. */
  .elementor-element-9e7fdda .elementor-container,
  .elementor-element-9e7fdda .elementor-column,
  .elementor-element-9e7fdda .elementor-widget-wrap,
  .elementor-element-9e7fdda .elementor-widget-shortcode,
  .elementor-element-9e7fdda .elementor-shortcode,
  .elementor-element-9e7fdda .woocommerce {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .elementor-element-8a6ff74 { padding-bottom: 20px !important; }

  /* The heading widget's own wrapper also carries a small generated
     top padding (Elementor's per-widget spacing) that stacks on top of
     the section padding above — zero it out so the section padding is
     the only gap left before the heading. */
  .elementor-element-121f01e .elementor-widget-wrap,
  .elementor-element-a1fb3d9 .elementor-widget-wrap {
    padding-top: 0 !important;
  }

  /* "Топ Продажби" heading — smaller on mobile (was a flat 30px at every
     viewport width, no responsive scaling of its own). */
  .elementor-element-f07362a .elementor-heading-title {
    font-size: 20px !important;
  }

  /* Center all homepage section headings + their "Виж всички"-style
     links on mobile. Each of these ("Топ Продажби", "Оферта на деня", ...)
     is a plain Elementor heading widget (defaults to left/"start") sitting
     next to a button widget carrying Elementor's own .elementor-align-right
     utility class (a per-widget text-align setting, unrelated to this
     theme's CSS) — once the two columns stack on mobile that reads as
     "title on the left, link stranded on the right" instead of one
     centered block. Scoped to body.home so it only affects the homepage,
     not .elementor-align-right/heading usage elsewhere on the site. */
  body.home .elementor-heading-title,
  body.home .elementor-widget-text-editor,
  body.home .elementor-align-right,
  body.home .elementor-align-left {
    text-align: center !important;
  }
  body.home .elementor-align-right,
  body.home .elementor-align-left {
    justify-content: center !important;
  }

  /* "Филтриране на вода" promo section (943a9e0) — eyebrow/heading/desc
     text-editor widgets + button all left-aligned by default; center the
     whole column so nothing sits lopsided once it stacks full-width. */
  body.home .elementor-element-ad8c550 {
    align-items: center !important;
  }

  /* Wide promo banners (purple gradient sections with heading/desc/CTA) —
     left-aligned by default, centered here to match. */
  .wide-banner__content,
  .wide-banner__content--right {
    align-items: center !important;
    text-align: center !important;
  }
  .wide-banner__desc { margin-left: auto; margin-right: auto; }
  .wide-banner__ctas { justify-content: center; }
}

/* "Филтриране на вода" heading — removed per request, leaving just the
   description text below it and the now-bigger, now-clickable banner
   image next to it. */
.elementor-element-c90c9be {
  display: none !important;
}

/* Same treatment for the "Продукти за грижа и релакс" / "Почистване и
   пране" section headings — removed per request, banners next to them
   made clickable through to their category the same way. */
.elementor-element-c0acf7e,
.elementor-element-06f9732 {
  display: none !important;
}

/* "Оферта на деня" eyebrow text ("Обновява се всеки ден") — removed per
   request, leaving just the heading + "Към всички оферти" link. */
.elementor-element-8018ef3 {
  display: none !important;
}

/* Whole "Оферта на деня" header row (eyebrow/heading/"Към всички оферти"
   button — the eyebrow was already hidden above) — replaced with an
   actual banner graphic per request ("get rid of the headline and
   instead of it put the banner there"). See inc/homepage-daily-offer-
   banner.php, which inserts that banner directly in front of this now-
   hidden section rather than editing its Elementor data (safer — avoids
   a hand-edit Elementor could silently overwrite next time this post is
   saved in the editor). */
.elementor-element-a1fb3d9 {
  display: none !important;
}

.berry-daily-offer-banner-section {
  padding: 16px 0 8px;
}

.berry-daily-offer-banner {
  display: block;
  width: 100%;
}

/* !important on height: Elementor's own frontend.min.css ships
   `.elementor img { height: auto; max-width: 100% }` — this banner sits
   inside Elementor's page wrapper, so that rule matches too, at the
   EXACT same specificity (one class + one element) as this rule. Same-
   specificity ties resolve by source order, and Elementor's stylesheet
   loads after this one, so without !important it silently won, letting
   the image expand to its full intrinsic aspect-ratio height (~159px on
   desktop) instead of the intended 140px — cropping the bottom off (the
   second line of "Оферти на деня" got cut, confirmed live: computed
   height was 158.913px, exactly width * naturalHeight/naturalWidth,
   i.e. plain intrinsic sizing, not the 140px this rule specifies). */
.berry-daily-offer-banner picture,
.berry-daily-offer-banner img {
  display: block;
  width: 100%;
  height: 140px !important;
  object-fit: cover;
}

@media (max-width: 768px) {
  .berry-daily-offer-banner-section {
    padding: 8px 0 4px;
  }

  .berry-daily-offer-banner picture,
  .berry-daily-offer-banner img {
    height: 90px !important;
  }
}

/* Green eyebrow tags + shop/browse buttons on the three promo sections
   ("Филтриране на вода" / "Продукти за грижа и релакс" / "Почистване и
   пране") — removed per request, leaving heading + description text only. */
.elementor-element-0c17087,  /* "✦ БЕЗКОМПРОМИСНА ЧИСТОТА" eyebrow, water section */
.elementor-element-dbd50d1,  /* "Разгледай продуктите" button, water section */
.elementor-element-3389272,  /* "✦ ВРЕМЕ ЗА СЕБЕ СИ" eyebrow, care section */
.elementor-element-64bc3e9,  /* "Пазарувай" button, care section */
.elementor-element-a192b43,  /* "✦ БЕЗКОМПРОМИСНА ЧИСТОТА" eyebrow, cleaning section */
.elementor-element-9e7f5e3 { /* "Разгледай продуктите" button, cleaning section */
  display: none !important;
}

/* Description paragraphs below the "Продукти за грижа и релакс" /
   "Почистване и пране" headings — removed per request, heading only. */
.elementor-element-7f8d035,  /* "Малки ритуали..." description, care section */
.elementor-element-ba45f18 { /* "Ефективни формули..." description, cleaning section */
  display: none !important;
}

/* With eyebrow/description/button all gone, these two text columns (now
   just a single heading) were left pinned to the top of their column,
   leaving a large empty gap below to match the taller image sitting next
   to them — align-items:center on the widget-wrap only centers on the
   CROSS axis, which for a column-direction flex container is horizontal,
   not vertical. justify-content is what centers along the main axis
   (vertical, here) and had no override, so it defaulted to flex-start.
   Confirmed live by the heading sitting flush at the top of a much
   taller column instead of centered against the image beside it. */
.elementor-element-c3f2e50 > .elementor-widget-wrap,
.elementor-element-b696f00 > .elementor-widget-wrap {
  justify-content: center !important;
}

/* Seam between "Топ Продажби" (4517773) and "Оферта на деня" (a1fb3d9) —
   both carry Elementor's own generated 56px "outward-facing" padding
   (see the note above on 121f01e/4517773/a1fb3d9/9e7fdda/8a6ff74), which
   stack to 112px of empty space at this specific seam once the two
   sections sit back-to-back. Desktop-only (the mobile pair already gets
   14px+14px above); trimmed to a normal-looking section gap instead. */
@media (min-width: 769px) {
  .elementor-element-4517773 { padding-bottom: 24px !important; }
  .elementor-element-a1fb3d9 { padding-top: 24px !important; }
}

/* "Филтриране на вода" promo section — 4 category quick-links (bottles &
   thermoses / pitchers / built-in systems / replacement filters),
   replacing the old plain description paragraph in widget 06479ff. Icons
   are inlined SVGs with fill="currentColor" so this CSS controls their
   color. 2x2 grid: the column this sits in is already narrow (a 50/50
   split with an image on desktop, full-width stacked on mobile), so a
   single row of 4 would cramp the labels — 2 columns reads better at
   every width this section actually renders at. */

/* CTA button widget below the icon links (dbd50d1, "Разгледай продуктите")
   — redundant now that the 4 icon links themselves are the navigation. */
.elementor-element-dbd50d1 {
  display: none !important;
}

.berry-water-cat-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 360px;
  margin: 4px 0 8px;
}

.berry-water-cat-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  text-align: center;
  padding: 14px 8px;
  border-radius: var(--radius-lg, 14px);
  background: #fff;
  border: 1px solid rgba(59,7,104,0.1);
  transition: var(--transition);
}

.berry-water-cat-link:hover {
  transform: translateY(-2px);
  border-color: var(--clr-primary, #9c50ff);
  box-shadow: 0 6px 16px rgba(59,7,104,0.12);
}

.berry-water-cat-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary, #9c50ff);
}

/* Flat solid-purple icons, no circle backdrop — sized as <img> now, not
   inline <svg>. Sized up since removing the circle's own fixed
   width/height left nothing constraining them. */
.berry-water-cat-link__icon img {
  width: 64px;
  height: 64px;
  display: block;
}

.berry-water-cat-link__label {
  font-size: 12px;
  font-weight: 700;
  color: #1A0A1E;
  line-height: 1.3;
}

@media (min-width: 769px) {
  /* Single row of 4 instead of the mobile 2x2 grid — the 2x2 layout
     capped at 400px was sitting left-aligned inside a much wider ~570px
     column (the 50/50 split with the product image), leaving ~160px of
     unused space to its right instead of using the room the desktop
     layout actually has. */
  .berry-water-cat-links {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
  }
  .berry-water-cat-link__icon img { width: 92px; height: 92px; }
  .berry-water-cat-link__label { font-size: 13px; }
}

/* "Безплатно над 20 €." within the "Бърза Доставка" trust-bar card
   (c7dd729) — wrapped in its own span in the Elementor content so it can
   be styled distinctly from the rest of the sentence; bold + the same
   mint used for "Безплатно" everywhere else free shipping is called out
   (checkout/cart drawer, .berry-shipping-value--free). */
.berry-free-ship-highlight {
  color: var(--berry-mint, #00f08b);
  font-weight: 800;
}

/* Trust-bar cards (Бърза Доставка / 100% Оригинални / Лесно Връщане /
   Създай Свой Дизайн — section 8a6ff74) stack into a single column on
   mobile with zero space between them (Elementor's own configured 20px
   "gap_columns_custom" only ever applies horizontally, between columns
   sitting side by side — once they wrap to their own rows there's no gap
   setting for that axis), so each card's white background touched the
   next one directly. Skips the last card so there's no trailing gap
   before the section's own bottom padding. */
@media (max-width: 768px) {
  .elementor-element-8a6ff74 > .elementor-container > .elementor-column {
    margin-bottom: 14px;
  }

  .elementor-element-8a6ff74 > .elementor-container > .elementor-column:last-child {
    margin-bottom: 0;
  }
}

/* New partners carousel — one unified layout for both mobile and
   desktop (not two separate breakpoint-specific behaviors): a
   horizontal scroll-snap strip, fixed pill width, so it always reads as
   "swipe/scroll for more" regardless of viewport, rather than switching
   between a grid and a stack at some arbitrary breakpoint. */
.berry-partners-bar {
  padding: 16px 0;
}

.berry-partners-bar__title {
  text-align: center;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-text, #1A0A1E);
  margin: 0 0 20px;
}

/* Positioning context for the two arrow buttons, which sit ON TOP of the
   track's edges (absolute) rather than pushing it narrower — same visible
   scroll width on every screen size, arrows just overlay it. */
.berry-partners-bar__wrap {
  position: relative;
}

.berry-partners-bar__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 24px 10px;
}

.berry-partners-bar__track::-webkit-scrollbar {
  display: none;
}

.berry-partners-bar__pill {
  /* Now a real <a> (clicking a brand pill goes to that brand's product
     archive — see homepage-partners-bar.php) — text-decoration:none
     since this is a whole card acting as a link, not inline text, and a
     subtle hover lift matching the same convention used elsewhere on the
     site (product cards, buttons) so it reads as clickable. */
  text-decoration: none;
  transition: var(--transition);
  flex: 0 0 auto;
  /* center (not start) — with the track's snap area sitting between the
     two overlaid arrow buttons (56px side padding clears them), centering
     each snapped pill puts it squarely between the arrows instead of
     flush against the left one. */
  scroll-snap-align: center;
  /* Bumped up from 160x80 (padding 12px 20px) — logos were reading too
     small/cramped on mobile to make out clearly; a bigger card AND less
     padding both grow the actual visible logo, not just the white space
     around it. */
  width: 180px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(59,7,104,0.1);
  border-radius: 14px;
}

.berry-partners-bar__pill:hover {
  transform: translateY(-2px);
  border-color: var(--clr-primary, #9c50ff);
  box-shadow: 0 6px 16px rgba(59,7,104,0.12);
}

.berry-partners-bar__pill img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.berry-partners-bar__pill-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-primary-2, #af73ff);
  letter-spacing: 0.03em;
  text-align: center;
}

@media (min-width: 769px) {
  .berry-partners-bar__pill {
    width: 190px;
    height: 96px;
  }
}

/* Prev/next arrows — same purple used across the site's icon chips
   (--clr-primary), one shared size that works as a real touch target on
   mobile (44px, meets the usual minimum tap-target guideline) and still
   reads as a normal desktop nav control. click handling is
   initPartnersCarousel() in berry-app.js. */
.berry-partners-bar__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--clr-primary, #9c50ff);
  color: #fff;
  box-shadow: 0 4px 14px rgba(156,80,255,0.35);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.berry-partners-bar__arrow:hover:not(:disabled) {
  background: var(--clr-primary-dark, #7a2ed6);
  box-shadow: 0 6px 18px rgba(156,80,255,0.45);
}

.berry-partners-bar__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.berry-partners-bar__arrow--prev {
  left: 0;
}

.berry-partners-bar__arrow--next {
  right: 0;
}

/* Track gets breathing room on both sides so the pills never render
   underneath the arrow buttons, on any screen size. */
.berry-partners-bar__track {
  padding-left: 56px;
  padding-right: 56px;
}

/* On mobile only one pill fits in the visible strip at a time, so the
   rest position (scrollLeft: 0) needs enough left padding on its own to
   center that first pill — scroll-snap can't do it alone, since centering
   the first/last pill via scrolling would require scrolling past 0/max,
   which the browser clamps. Padding = (container width - pill width) / 2,
   expressed as calc(50% - half-pill-width) so it centers correctly at
   ANY phone width instead of only the one width it happened to be
   measured against (a fixed px value here only centered correctly on
   the exact viewport it was tuned on, and drifted off-center on other
   real device widths). Pill is 180px wide on mobile, so half = 90px. */
@media (max-width: 768px) {
  .berry-partners-bar__track {
    padding-left: calc(50% - 90px);
    padding-right: calc(50% - 90px);
  }
}

/* Homepage promo banner sections — "Филтриране на вода" (with the 4
   category icon links), "Продукти за грижа и релакс", "Почистване и
   пране" — removed per request. Hidden via CSS (not deleted from
   Elementor's own _elementor_data) so they're easy to bring back later
   if wanted, same reversible pattern used elsewhere on this page. */
.elementor-element-943a9e0,
.elementor-element-7dc5a56,
.elementor-element-fe28c33 {
  display: none !important;
}

/* ============================================
   HOMEPAGE CATEGORY CAROUSEL (see inc/homepage-category-carousel.php)
   Compact icon-badge style (round tinted circle + small label, no card
   box around it) — the first version used the water-filtration links'
   bigger bordered-card look, which read as too large/heavy for a row of
   7 icons; restyled smaller and lighter per request/reference (a mobile
   marketplace's own category strip: small colored circle + label, tight
   spacing, no outline). Same wrap/arrow/track skeleton as
   .berry-partners-bar just above — deliberately mirrored rather than
   shared, since a shared abstraction for two independent sections would
   need to accept every difference between them as parameters anyway.
   ============================================ */
.berry-cat-carousel-section {
  padding: 16px 0;
}

@media (max-width: 768px) {
  /* Track runs flush against both screen edges instead of behind the
     site's generic .container side padding (24px, shared by nearly every
     other section) — per request, no dead space on either side before
     "Промоции" / after "Декорация". The scroll-position dots below the
     track are what signal "this scrolls" now, so the right side no
     longer needs its own peeking-card padding either. */
  .berry-cat-carousel-section .container {
    padding-left: 0;
    padding-right: 0;
  }
}

.berry-cat-carousel__wrap {
  position: relative;
}

.berry-cat-carousel__track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* No side padding (was 44px, left over from when this track had arrow
     buttons at 0/right:0 — those were removed entirely, see
     inc/homepage-category-carousel.php). Paired with
     .berry-cat-carousel-section .container's own padding-left/right:0 on
     mobile, so the row runs flush against both screen edges with no dead
     space before "Промоции" or after "Декорация" — the scroll-position
     dots below the track are the "this scrolls" cue now, not a peeking
     edge card. */
  padding: 2px 0 6px;
}

.berry-cat-carousel__track::-webkit-scrollbar {
  display: none;
}

.berry-cat-carousel__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  text-align: center;
  padding: 4px;
  transition: var(--transition);
}

.berry-cat-carousel__card:hover {
  transform: translateY(-2px);
}

/* Full-color illustrated badges (own rounded-square purple background
   baked into the SVG itself, see inc/homepage-category-carousel.php) —
   no separate circle/tint wrapper needed here anymore, the image IS the
   whole badge. */
.berry-cat-carousel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.berry-cat-carousel__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.berry-cat-carousel__label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--clr-text, #1A0A1E);
  line-height: 1.25;
}

/* Scroll-position dots — mobile only (see the media query below, which
   hides this on desktop where the row already fits without scrolling).
   Same small-dot/active-dot treatment as the hero carousel's own bullets
   (.berry-hero-carousel__bullet) for a consistent "this scrolls" language
   across the site, just static circles here rather than clickable ones
   since a native overflow-x scroller (no JS position/goTo state) drives
   this track, not the hero's custom slider. */
.berry-cat-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.berry-cat-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(59, 7, 104, 0.15);
  transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.berry-cat-carousel__dot.is-active {
  background: var(--clr-primary, #9c50ff);
  width: 16px;
  border-radius: 3px;
}

@media (min-width: 769px) {
  .berry-cat-carousel__dots {
    display: none;
  }

  /* The 44px side padding on .berry-cat-carousel__track exists only to
     clear the mobile arrow buttons' 0/right:0 positions — there are no
     arrows on desktop (removed entirely, see
     inc/homepage-category-carousel.php), and with only 7 small cards the
     whole row comfortably fits the container width without scrolling, so
     left-aligned with that leftover padding just reads as the row being
     stuck to one side with a lot of dead space on the right. Centered
     instead, no side padding needed. */
  .berry-cat-carousel__track {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 24px;
  }
  /* Bigger badges on desktop per request (was 72px/96px card) — there's
     plenty of spare width once centered with only 7 cards, so scaling
     these up doesn't risk overflow/wrapping the way it would on mobile. */
  .berry-cat-carousel__card {
    width: 116px;
  }
  .berry-cat-carousel__icon {
    width: 96px;
    height: 96px;
  }
  .berry-cat-carousel__label {
    font-size: 13.5px;
  }
}

/* ============================================
   CART PAGE (WooCommerce Cart BLOCK — /cart/, a real Gutenberg block,
   not the classic shortcode template the rest of this site's WooCommerce
   pages use)
   ============================================
   Card backgrounds, corner radius, shadow, the page's cream background,
   the "ОБЩА СУМА НА КОЛИЧКАТА" heading color/size and the checkout
   button's green/purple pairing already matched this theme out of the box
   (WC Blocks pulls its default palette from the site's registered global
   colors) — confirmed live via getComputedStyle before writing anything
   here, so none of that is touched below. What's left is the handful of
   sub-components WC Blocks still renders in its own plain default style:
   product name/price typography, the quantity stepper's shape/color, the
   remove icon, and the coupon panel — brought in line with the same
   patterns already established elsewhere (.pd-qty-btn's green pill
   stepper from the single-product page, the site's purple link/price
   color, etc.).

   !important throughout this section: WooCommerce Blocks ships its OWN
   dedicated cart.css (separate from the general woocommerce.css every
   other page on this site loads), with rules like
   `.wc-block-components-quantity-selector .wc-block-components-quantity-
   selector__button { background: none transparent; }` — two classes,
   outranking a plain one-class override regardless of this file's load
   order. Confirmed live via a matched-rules walk (same debugging
   technique used for the WC core gallery-width/summary-column bugs
   earlier in this project) that this was the actual cause, not a typo —
   !important was the reliable fix there, so it's applied consistently to
   every rule in this section rather than chasing exact specificity for
   each individual sub-component one at a time. */

/* Product name — was underlined dark grey-purple (WC Blocks' own default
   link style); this site's other product titles (shop grid, single
   product) are never underlined and use a bolder purple. */
.wc-block-cart-items .wc-block-components-product-name {
  color: #5B21B6 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.wc-block-cart-items .wc-block-components-product-name:hover {
  text-decoration: underline !important;
}

/* Price — was plain/unbolded near-black; matches the price color already
   used for the single-product page's own price (see .product-detail
   price rule, ~line 4970: "was #3B0768, now #5B21B6"). */
.wc-block-cart-item__prices .wc-block-components-formatted-money-amount {
  color: #5B21B6 !important;
  font-weight: 700 !important;
}

/* Quantity stepper — WC Blocks renders its own plain square-cornered
   +/- component here (confirmed live: 4px corners, transparent
   background, no border). Restyled to match .pd-qty-selector/.pd-qty-btn,
   the same green-pill stepper already established on the single product
   page, rather than leaving two differently-shaped qty controls on the
   same site. WC core CSS already sets the correct flex `order` (minus,
   input, plus) on these three children — confirmed live — so only
   shape/color needs overriding here, not layout order. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--clr-border-2, #e5dff0) !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  height: 44px !important;
  /* cart.css hardcodes width:107px, sized for its own smaller default
     buttons — too narrow for three real 42px items (126px), which were
     getting clipped by the overflow:hidden above (needed for the pill's
     rounded corners to actually clip the buttons' square ones) before
     this override. 128px (not the exact 126px sum) leaves a hairline of
     slack for the wrapper's own 1px border under box-sizing:border-box —
     without it the plus button's last ~1px was still being clipped. */
  width: 128px !important;
  background: transparent !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  width: 42px !important;
  min-width: 0 !important;
  /* flex-shrink:0 — this stepper's own wrapping table cell is narrower
     than 3 real 42px items + the input need (confirmed live: 107px
     available), so the default flex-shrink:1 was visibly squashing these
     buttons down to ~19px regardless of the width set above. A little
     horizontal overflow out of that narrow cell reads better than a
     squashed, illegible stepper. */
  flex-shrink: 0 !important;
  background: #00F08B !important;
  color: #3B0768 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  transition: var(--transition);
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: #00d67c !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
  opacity: 0.45 !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  border-left: 1px solid var(--clr-border-2, #e5dff0) !important;
  border-right: 1px solid var(--clr-border-2, #e5dff0) !important;
  color: #3B0768 !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  width: 42px !important;
}

/* Remove-item (trash) icon — was plain near-black; muted grey at rest,
   the site's pink/accent color on hover (same hover-to-accent convention
   as .berry-wish-btn/.product-card__wish elsewhere) so "this deletes the
   item" reads clearly without the icon shouting for attention constantly. */
.wc-block-cart-item__remove-link {
  color: var(--clr-text-muted, #8a7a99) !important;
  transition: var(--transition);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--clr-accent, #6bdd99) !important;
}

/* Coupon panel toggle ("Добави промо код") — was plain near-black default
   text; recolored to the same purple used for every other label/heading
   in the sidebar card (.wc-block-cart__totals-title etc., already
   matching on its own). */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: #3B0768 !important;
  font-weight: 600 !important;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
  fill: #3B0768 !important;
}

/* Divider lines directly above/below the coupon row — WC Blocks core
   renders every .wc-block-components-totals-item (subtotal, coupon,
   shipping, grand total) with its own border-top by default, which reads
   as two redundant lines sandwiching this one row now that
   initCartCouponOpenByDefault() (berry-app.js) keeps it permanently
   expanded instead of a collapsed one-line toggle. Removed on the coupon
   row itself, the row right after it (its own border-top is what
   visually reads as "the line below the coupon"), AND the panel's own
   inner content/expand wrapper (WC Blocks nests the actual input/button
   row one level deeper, inside its own bordered panel — confirmed still
   visible live even after the outer row's own border was already
   stripped, meaning the line was coming from this inner wrapper, not the
   outer row). Bottom padding zeroed on that same inner wrapper too — the
   border alone wasn't the only thing leaving dead space underneath, the
   wrapper's own padding was reserving room for it independently. Leaves
   the dividers between every OTHER row (subtotal/shipping/total)
   untouched. */
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon + .wc-block-components-totals-item,
.wc-block-components-totals-coupon__content,
.wc-block-components-totals-coupon .wc-block-components-panel__content,
/* Still visible live even after every rule above — the wrapper WC Blocks
   puts around each individual totals row (subtotal/fee/shipping, one
   .wc-block-components-totals-wrapper per row — see the "Общо SUBTOTAL
   row" rule right below this one for confirmation that's a real element
   here, not a guess) carries its own border, and the grand-total row has
   its own separate wrapper/border too. Between the plain rows themselves
   (Междинна сума/ДДС/Доставка) no line was ever visible in the first
   place — only right after the coupon and right after "Общо" — so a
   blanket removal here matches what's actually wanted rather than
   needing to single out which specific row's border was showing. */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-footer-item {
  border-top: none !important;
  border-bottom: none !important;
}

.wc-block-components-totals-coupon__content,
.wc-block-components-totals-coupon .wc-block-components-panel__content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Smaller input/button per request — was full-size, reading as oversized
   for a one-line "enter a code" field compared to everything else in
   this compact totals sidebar. */
.wc-block-components-totals-coupon__input input {
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  min-height: 0 !important;
}

.wc-block-components-totals-coupon__input label {
  font-size: 13px !important;
}

.wc-block-components-totals-coupon__button.wc-block-components-button {
  border-radius: 50px !important;
  background: #00F08B !important;
  color: #3B0768 !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  min-height: 0 !important;
}

/* Grand total row ("Приблизителна обща сума") — the one row that should
   read as the final, most important number on the page, same emphasis
   convention as this site's product price (.product-detail price rule)
   rather than the same small/plain weight as the Общо/Доставка rows
   above it. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: #3B0768 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

/* Checkout button hover — matches the same lift/glow convention already
   used by every other primary CTA on the site (.berry-buy-now-btn:hover,
   .single_add_to_cart_button:hover). */
.wc-block-cart__submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,240,139,0.5);
}

/* ============================================
   LOYALTY DISCOUNT CALLOUT (single product page — see
   inc/loyalty-discount.php)
   ============================================
   Two states share the same card shell: --guest (the sales pitch, brand
   gradient background so it reads as a special offer, with a real CTA
   button to the registration page) and --active (a quieter green
   confirmation for a customer who already gets this discount, once
   they're logged in — no need to keep selling them on something they
   already have). */
.berry-loyalty-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 14px;
  margin: 4px 0 20px;
}

.berry-loyalty-callout__icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.berry-loyalty-callout__text {
  flex: 1 1 200px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.berry-loyalty-callout--guest {
  background: var(--grad-brand);
  color: #fff;
}

.berry-loyalty-callout--guest .berry-loyalty-callout__text strong {
  color: #fff;
}

.berry-loyalty-callout__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 50px;
  background: #00F08B;
  color: #3B0768;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition);
}

.berry-loyalty-callout__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,240,139,0.4);
}

.berry-loyalty-callout--active {
  background: rgba(0,240,139,0.12);
  border: 1px solid rgba(0,240,139,0.4);
  color: #3B0768;
}

.berry-loyalty-callout--active .berry-loyalty-callout__icon {
  color: #00c777;
  font-weight: 700;
}

@media (max-width: 480px) {
  .berry-loyalty-callout {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    /* Tighter padding/gap than the desktop row layout — this card reads
       fine as a wide horizontal strip on desktop, but stacked vertically
       on mobile the same spacing left a lot of visibly empty room. */
    padding: 14px 16px;
    gap: 8px;
  }

  /* The bug: flex-basis is a MAIN-AXIS size, and flex-direction:column
     (set right above) makes the main axis vertical — so the 200px
     flex-basis this element uses for its desktop min-*width* (a sensible
     value when the row is horizontal) became a 200px *height* here
     instead, with flex-grow:1 free to stretch it even taller. That 200px-
     tall text box (confirmed live: 2 short lines of text in a box more
     than 4x taller than the text itself) was the actual empty space in
     the screenshot, not padding or gap. flex:none + width:100% removes
     both the basis and the grow, sizing the box to its real text content
     while still filling the column's width. */
  .berry-loyalty-callout__text {
    flex: none;
    width: 100%;
  }

  .berry-loyalty-callout__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   FREE SHIPPING PROGRESS (Checkout page — see
   inc/checkout-free-shipping-progress.php)
   ============================================
   .is-pending (short of the threshold) uses the site's purple/mint
   gradient card language (same as .berry-loyalty-callout--guest) so it
   reads as an active, ongoing offer; .is-unlocked switches to the flat
   mint-green "confirmation" treatment (matching .berry-loyalty-
   callout--active) once the customer has actually qualified — same
   pending/confirmed color pairing as the loyalty-discount callout, for
   one consistent "progress vs. done" visual language across the site. */
/* Compact note under the order summary's "Общо" grand total (appended
   there by initCheckoutFreeShippingProgressPlacement() in berry-app.js —
   this used to be a big full-width purple-gradient banner with its own
   CTA button above the whole item list; replaced with a quieter footnote
   on the final total instead, since the banner competed with the actual
   order review for attention and duplicated the page's own separate
   "Продължи пазаруването" button). Top border instead of a filled card
   visually separates it from the totals block above without another
   heavy background block. */
.berry-free-shipping-note {
  margin-top: 6px;
  padding: 6px 2px 0;
  border-top: 1px solid var(--clr-border);
}

/* Checkout only: moved to be the FIRST thing in the order summary instead
   of the last (see initCheckoutFreeShippingProgressPlacement() in
   berry-app.js — prepend() instead of appendChild()) — the base rule's
   top border/margin above were built to separate this from the totals
   block that used to sit above it; now that the item list follows
   instead, it needs a bottom separator against that instead, not a top
   one against nothing. */
.wc-block-components-checkout-order-summary__content .berry-free-shipping-note {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 0 2px 10px;
  border-top: none;
  border-bottom: 1px solid var(--clr-border);
}

/* Cart drawer only: this note sits directly above the "Към поръчката"
   button here (see berry_render_cart_drawer_footer() in functions.php),
   unlike Checkout where it's the last thing in the order-summary panel
   with no button immediately below it — needs its own bottom breathing
   room that the base rule above doesn't have. */
.cart-drawer__footer .berry-free-shipping-note {
  margin-bottom: 14px;
}

.berry-free-shipping-note__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.berry-free-shipping-note__icon {
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1;
}

.berry-free-shipping-note__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--clr-text-muted);
}

.berry-free-shipping-note__text strong {
  color: var(--clr-primary);
}

.is-unlocked .berry-free-shipping-note__text strong {
  color: #00b371;
}

.berry-free-shipping-note__bar {
  margin-top: 8px;
  height: 4px;
  border-radius: 50px;
  background: rgba(156,80,255,0.15);
  overflow: hidden;
}

.is-unlocked .berry-free-shipping-note__bar {
  background: rgba(0,240,139,0.2);
}

.berry-free-shipping-note__bar-fill {
  height: 100%;
  border-radius: 50px;
  background: var(--clr-primary);
  transition: width 0.4s ease;
}

.is-unlocked .berry-free-shipping-note__bar-fill {
  background: #00F08B;
}

/* Exactly ONE order summary on mobile, not two or three (kept as-is on
   desktop, where it's a normal always-visible sidebar column and none of
   this applies — confirmed live none of the elements below exist in the
   DOM at desktop widths).

   WooCommerce Blocks Checkout's own mobile behavior actually renders the
   order summary in up to THREE places once its shared open/closed state
   is expanded (see initCheckoutOrderSummaryOpenByDefault() in
   berry-app.js, which force-expands it on load — none of this content
   exists until expanded):
     1. A collapsed teaser bar (title + total + chevron only, no line
        items) — always redundant once always-expanded, hidden below.
     2. The REAL sidebar component's own inline content (product, promo
        code, totals), physically positioned early on the page (roughly
        where the teaser bar was) — this is the copy KEPT.
     3. A second, independent full copy of the exact same content that
        core additionally "Fills" into a slot right after the "Направи
        поръчка" button — hidden below, since #2 already covers it. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
  /* !important: same-specificity tie against WooCommerce core's own
     checkout.css, which happens to load after this stylesheet — without
     it, source order wins and this rule loses despite matching. */
  display: none !important;
}

.checkout-order-summary-block-fill-wrapper {
  display: none !important;
}

/* Qty-stepper + remove (×) button added to each Cart/Checkout order-
   summary line item — see initCheckoutOrderSummaryQtyStepper() in
   berry-app.js. Reuses the cart drawer's own .qty-stepper/.qty-btn/
   .qty-val markup for free, just recolored green here specifically
   (scoped to .berry-order-summary-qty, not the base .qty-btn, so the
   cart drawer's own steppers elsewhere on the site are untouched). */
/* WC Blocks' order-summary line items fall back to the product's full
   description (truncated mid-sentence) whenever the short description/
   excerpt is empty -- true for every product on this site. Harmless
   before this session's description rewrite (nothing meaningful to show),
   now clutters the compact checkout summary with a chopped-off sentence
   under every line item. Checkout should stay scannable: name, qty,
   price -- not marketing copy. */
.wc-block-components-product-metadata__description {
  display: none;
}

.berry-order-summary-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.berry-order-summary-qty .qty-btn {
  background: #00F08B;
  color: #3B0768;
}

.berry-order-summary-qty .qty-btn:hover:not(:disabled) {
  background: #00d67a;
  color: #3B0768;
}

.berry-order-summary-qty .qty-btn:disabled {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

/* The quantity number briefly scales up/down on every +/- click — a
   plain re-render alone (the number just silently changing) was easy to
   miss next to the small buttons; this makes the change itself visible
   at a glance regardless of which direction it moved. */
@keyframes berryQtyBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.berry-order-summary-qty .berry-qty-bump {
  animation: berryQtyBump 0.28s ease;
}

.berry-order-summary-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--clr-text-muted, #8a7a99);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.berry-order-summary-remove:hover {
  background: rgba(225,29,72,0.1);
  color: #e11d48;
}

.berry-order-summary-item--removing {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Core's own small "Включително X € ДДС" caption under the grand total —
   redundant once initCheckoutVatBreakdown() (berry-app.js) adds real
   "Междинна сума без ДДС" / "ДДС" rows above the total with the same
   figures spelled out properly. */
.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
  display: none !important;
}

/* Core's own "Общо" SUBTOTAL row (always the first row inside this
   totals-block — Subtotal, then Fee/Discount if any, then Shipping, in
   that fixed order every time) — redundant now that "Междинна сума без
   ДДС" already says the same thing more clearly a few rows down.
   :first-child, not a class, because WC Blocks doesn't give the
   subtotal row its own distinguishing class the way it does for
   shipping/fee/discount. */
.wp-block-woocommerce-checkout-order-summary-totals-block > .wc-block-components-totals-wrapper:first-child {
  display: none !important;
}

/* Core's own "Доставка" row — hidden here (not removed: still fully
   present/updating in the DOM, just visually suppressed) because
   initCheckoutVatBreakdown() reads its label/value/description and
   rebuilds an identical row lower down, between "ДДС" and the grand
   total, rather than physically moving this React-owned element (which
   risks React losing track of a node it expects to still be its own
   child when shipping cost/method changes later). */
.wc-block-components-totals-shipping {
  display: none !important;
}

/* Second "Продължи пазаруването" — see berry_render_checkout_continue_
   shopping_link() in inc/checkout-free-shipping-progress.php. Solid
   theme purple (not the progress widget's green) and the same full-width
   pill shape as the real "Направи поръчка" button right above it, so it
   reads as a real secondary action on the same footing, not a stray
   afterthought link. */
.berry-checkout-continue-shopping {
  /* No max-width/centering here anymore — initCheckoutContinueShoppingPlacement()
     in berry-app.js moves this element to be a real sibling of the
     "Направи поръчка" button's own row inside .wc-block-checkout__main,
     so it inherits that column's actual width instead of guessing it. */
  margin: 12px 0 0;
}

.berry-checkout-continue-shopping__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border-radius: 50px;
  background: var(--clr-primary, #9c50ff);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  /* !important: some ancestor inside the checkout block area applies its
     own underline to plain links (same class of WC-core-vs-theme
     specificity fight already hit repeatedly elsewhere in this file —
     e.g. .pd-qty-btn's leaked border/padding) that otherwise wins over
     the plain declaration here. */
  text-decoration: none !important;
  transition: var(--transition);
}

.berry-checkout-continue-shopping__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156,80,255,0.4);
}

/* Inline gibberish-input feedback on the checkout address fields — see
   initCheckoutFieldValidation() in berry-app.js (real-time UX) and
   inc/checkout-field-validation.php (the actual, authoritative check that
   blocks the order server-side). */
input.berry-field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 !important;
}

.berry-field-error-msg {
  margin: 4px 0 0;
  font-size: 12px;
  color: #ef4444;
}

/* "Разгледай магазина" on the Cart page's own empty-cart-block pattern
   (see the Cart page's post_content) — a plain core Button block, which
   renders with WordPress's own generic black-pill default styling since
   nothing themes it otherwise. Same brand purple as
   .berry-checkout-continue-shopping__btn above, full width to match this
   site's other pill CTAs, but smaller/less heavy padding — this is a
   lower-stakes "go look around" nudge, not a primary action like Place
   Order or Add to cart. */
/* Cart page's empty state, trimmed to just the "Обратно към магазина"
   button per request — no heading, no "Нови продукти" upsell grid (both
   removed from the block's own post_content, see the Cart page's
   post_content). Padding here so the lone button doesn't sit flush
   against the header. */
/* !important throughout: WooCommerce Blocks' own stylesheet sets
   competing display/flex-direction/align-items on this exact class
   (.wp-block-woocommerce-empty-cart-block), loaded after this file, so a
   plain (non-important) declaration here lost the centering silently —
   confirmed live as the actual reason the button stayed pinned to the
   left instead of centering. */
/* Parent theme (Hello Biz) bug, not specific to this block: theme.css's
   own `.alignwide{margin-inline:-80px}` is a flat, non-responsive value —
   correct on desktop (where the surrounding container has enough side
   padding to absorb an 80px "breakout" on each edge) but on a narrow
   mobile viewport the actual gutter is only ~10-20px, so the same -80px
   overshoots by ~60-70px and pushes the whole block off-screen to the
   left, clipped invisibly by the site's overflow-x:hidden rather than
   becoming scrollable. Confirmed live via getBoundingClientRect() on the
   Cart page's .wp-block-woocommerce-cart.alignwide (x:-70, same width as
   its own non-offset parent) — this affects any .alignwide block on
   mobile, not just the empty-cart state; reset generally rather than
   only for this one selector. */
@media (max-width: 768px) {
  .alignwide {
    margin-inline: 0;
  }
}

.berry-empty-cart-block--minimal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 60vh;
  padding: 48px 20px;
  text-align: center;
}

/* Bigger button on desktop — the mobile-sized pill (13px text, 10px/20px
   padding) read as too small/lost in the middle of a wide empty page. */
@media (min-width: 769px) {
  .berry-empty-cart-block--minimal .wp-block-button__link {
    max-width: 420px;
    padding: 16px 32px;
    font-size: 16px;
  }
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
/* Checkout's OWN separate empty-cart fallback (.wc-block-checkout-empty
   — a hardcoded React component, not the same block/markup as the Cart
   page's pattern above despite using the exact same core Button-block
   class) — same styling goal, needs its own selector since it isn't
   nested under .wp-block-woocommerce-empty-cart-block at all. Without
   width:100%+height reset here specifically, this one also inherits a
   stray height:238px from somewhere in that component's own layout,
   rendering as a tall dark oval rather than a normal pill (confirmed
   live). */
.wc-block-checkout-empty .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 16px auto 0;
  padding: 10px 20px;
  border-radius: 50px;
  background: var(--clr-primary, #9c50ff);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  transition: var(--transition);
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wc-block-checkout-empty .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(156,80,255,0.4);
  color: #fff;
}

.wc-block-checkout-empty .wp-block-button {
  display: block;
  text-align: center;
}