/* Mirror-only additions — not part of the original theme. Deliberate
   departures from pixel-parity with live WordPress, requested by the site
   owner on 2026-07-05:
   1. Product-card thumbnails (catalog/category/tag grids and the "Още
      продукти" carousels) render at each photo's native aspect ratio on
      live, producing visibly uneven card heights. Force a uniform box.
   2. The catalog/category/tag listing area was boxed at 1140px; make it
      span the full viewport width on desktop. Already ~full-width on
      mobile (Min(100%, 1140px) resolves to 100% below that breakpoint), so
      no separate mobile rule is needed — this scales fluidly at every size.
*/

/* Uniform 4:3 thumbnail box — the photo is shown WHOLE, never cropped
   (owner requirement). Implementation history matters here, three attempts:
     1. `aspect-ratio` on the wrapper + absolutely-positioned img -> the wrapper
        had no in-flow content to size itself, so it collapsed to ~32x24 on
        mobile ("tiny thumbnails", 2026-07-09).
     2. `height:0; padding-bottom:75%` + absolute img -> correct box, BUT the
        wrapper is a flex item in a column flex container, and Chrome computes a
        flex item's intrinsic height IGNORING a child's percentage padding. At
        <=767px the flex item resolved to 1px, so the card's title/price/text
        flowed up and painted ON TOP of the photo (2026-08-07 QA blocker).
     3. (current) Let the IMG stay IN FLOW and give IT the ratio. A replaced
        element with width:100% + aspect-ratio:4/3 has a definite height, so the
        wrapper — and the flex item above it — size themselves naturally at every
        breakpoint. No percentage padding, nothing out of flow, nothing to
        collapse. object-fit:contain keeps the whole sofa visible. */
.elementor-widget-theme-post-featured-image .elementor-widget-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

/* The .elementor-141 prefix matches the theme's own loop-item rule specificity
   (0,3,1) — that rule sets fixed heights (210/230/200px) and object-fit:contain
   and would otherwise win the cascade. !important also beats its @media variants. */
.elementor-141 .elementor-widget-theme-post-featured-image .elementor-widget-container img,
.elementor-widget-theme-post-featured-image .elementor-widget-container img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center;
}

/* Full-width desktop listing area. `.archive-container` is NOT reliably the
   centered outer section — on the katalog and tag/promo templates it's an
   inner column sitting next to the sidebar (off-center from the viewport),
   which broke a viewport-centering (100vw/-50vw) breakout with overflow on
   the right edge. Overriding Elementor's own --content-width var instead is
   overflow-safe: it always resolves relative to the real parent width, never
   the viewport, so it can't push content past the edge. Each archive
   template needs its own element IDs (stable per Elementor template, found
   by tracing the container chain from breadcrumb to grid in each):
     - katalog-meka-mebel (+pagination), .elementor-102: outer row 1b2a050,
       inner grid column 7e79f5f (== .archive-container here)
     - category/*, .elementor-1183: 398d2fd (== .archive-container; this one
       IS already the outer row, hence no bug on category pages)
     - tag/promo, .elementor-818: outer row f13fb3f, inner grid column
       d391be5 (== .archive-container here) */
.elementor-102 .elementor-element.elementor-element-1b2a050,
.elementor-102 .elementor-element.elementor-element-7e79f5f,
.elementor-1183 .elementor-element.elementor-element-398d2fd,
.elementor-818 .elementor-element.elementor-element-f13fb3f,
.elementor-818 .elementor-element.elementor-element-d391be5 {
  --content-width: 100%;
}

/* ===================================================================
   UX fixes from the 2026-08-07 pre-launch audit. All low-risk, all
   scoped so desktop layout is unchanged unless stated.
   =================================================================== */

/* A single-product tag/category archive collapsed its grid to ONE track,
   blowing one sofa up to ~1030px wide. Keep the normal card size. */
.elementor-818 .elementor-loop-container,
.elementor-1183 .elementor-loop-container {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}

/* Archive banner text is white/#f5f5f5 over a pale interior photo, so the
   page title and breadcrumb were hard to read. A shadow fixes contrast
   without dulling the photograph (raising the overlay opacity would). */
.page-title,
.aux-breadcrumbs,
.page-title-section .aux-breadcrumbs a,
.page-title-section .aux-breadcrumbs span {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

/* The floating Viber bubble sat on top of the footer copyright, some card
   prices and the left edge of the red enquiry CTA. Lift it clear. */
.chaty-widget.left-position {
  bottom: 90px !important;
}

/* Prev/next product labels rendered at 11.2px — too small to read comfortably. */
.post-navigation__prev--title,
.post-navigation__next--title {
  font-size: 13px !important;
}

/* Keep BGN/EUR price ranges from orphaning the "€" onto its own line. */
.elementor-141 .elementor-widget-heading .elementor-heading-title {
  text-wrap: balance;
}

/* Large phones/small tablets showed a single column, making the catalog an
   ~15,000px scroll. Two columns from 600px shortens it without crowding. */
@media (min-width: 600px) and (max-width: 767px) {
  .elementor-102 .elementor-element.elementor-element-0f1063a,
  .elementor-1183 .elementor-loop-container,
  .elementor-818 .elementor-loop-container {
    --grid-columns: 2;
  }
}

/* ===================================================================
   Client-side search results (/search/). Styled to match the product
   cards so results feel native rather than bolted on.
   =================================================================== */
.indiva-search-wrap { padding: 2em 0 4em; }
.indiva-search-form { margin: 0 0 1.25em; }
.indiva-search-form input[type="search"] {
  width: 100%;
  max-width: 640px;
  padding: .85em 1.1em;
  font-size: 1.05rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}
.indiva-search-form input[type="search"]:focus {
  outline: none;
  border-color: #c1272d;
  box-shadow: 0 0 0 3px rgba(193,39,45,.12);
}
.indiva-search-status { margin: 0 0 1.5em; color: #555; font-size: .95rem; }
.indiva-search-status a { color: #c1272d; text-decoration: underline; }

.indiva-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.indiva-hit {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.indiva-hit:hover { box-shadow: 0 6px 22px rgba(0,0,0,.10); transform: translateY(-2px); }
.indiva-hit__img { display: block; background: #fff; }
.indiva-hit__img img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: contain; object-position: center;
}
.indiva-hit__body { display: block; padding: 1em 1.15em 1.35em; }
.indiva-hit__cat {
  display: block; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: #999; margin-bottom: .35em;
}
.indiva-hit__title { display: block; font-size: 1.15rem; font-weight: 700; margin-bottom: .4em; }
.indiva-hit__desc {
  display: block; font-size: .9rem; line-height: 1.5; color: #666; margin-bottom: .6em;
}
.indiva-hit__price { display: block; font-size: 1rem; font-weight: 700; color: #111; }

@media (max-width: 599px) {
  .indiva-search-results { grid-template-columns: 1fr; }
}

/* Mobile tap-to-call. The theme hides the header phone number below 768px, so
   on a phone — where calling is the most likely action for a furniture buyer —
   there was no number anywhere above the footer. */
@media (max-width: 767px) {
  .indiva-callbar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .5em;
    background: #c1272d;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 1rem;
    padding: .7em 1em;
    letter-spacing: .02em;
  }
  .indiva-callbar:hover, .indiva-callbar:focus { color: #fff !important; opacity: .95; }
}
.indiva-callbar { display: none; }

/* ===================================================================
   Cookie consent bar. Deliberately a slim bottom strip, not a modal:
   it must not cover the sofa the customer is looking at. Sits above the
   Chaty bubble, animates in, and disappears once a choice is made.
   =================================================================== */
.indiva-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10050;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75em 1.5em;
  padding: .6em 1.25em;
  background: rgba(24, 24, 24, .96);
  color: #f2f2f2;
  font-size: .85rem;
  line-height: 1.45;
  box-shadow: 0 -2px 18px rgba(0, 0, 0, .18);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.indiva-consent--in { transform: translateY(0); }
.indiva-consent--hiding { transform: translateY(100%); }
.indiva-consent__text { margin: 0; max-width: 62ch; }
.indiva-consent__text a { color: #fff; text-decoration: underline; }
.indiva-consent__actions { display: flex; gap: .6em; flex-shrink: 0; }
.indiva-consent__btn {
  appearance: none;
  border: 1px solid transparent;
  background: #c1272d;
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: .4em 1.15em;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.indiva-consent__btn:hover { opacity: .9; }
/* Refusal must be as easy as acceptance for consent to be valid. */
.indiva-consent__btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); }

/* Keep the Viber bubble clear of the bar while it is showing. */
.indiva-consent ~ .chaty-widget.left-position,
body:has(.indiva-consent) .chaty-widget.left-position { bottom: 150px !important; }

@media (max-width: 767px) {
  /* Stack on phones. The buttons previously overflowed the right edge because
     they sat in a wrapping row that did not account for the bar's own padding
     and gap — "Приемам" was cut off. Stacking + border-box + flex:1 1 0 with
     min-width:0 makes them share the available width exactly. */
  .indiva-consent {
    flex-direction: column;
    align-items: stretch;
    font-size: .84rem;
    padding: .7em .9em;
    gap: .55em;
  }
  .indiva-consent, .indiva-consent * { box-sizing: border-box; }
  .indiva-consent__text { text-align: center; max-width: none; }
  .indiva-consent__actions { width: 100%; display: flex; gap: .5em; }
  .indiva-consent__btn {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: .55em .5em;
    white-space: nowrap;
  }
}

/* Search results for non-product pages have no thumbnail; don't leave a gap. */
.indiva-hit:not(:has(.indiva-hit__img)) .indiva-hit__body { padding-top: 1.35em; }
.indiva-hit__img:empty { display: none; }