/* =====================================================================
   PHONE LAYER - docs/design/mobil/*
   =====================================================================

   Everything below 768px, and nothing above it. The desktop layout is not
   touched: this file is loaded last and every rule that changes a shared
   component lives inside the phone media query, so at 768px and up the page
   computes exactly as it did before this file existed.

   Measurements come off the Figma frames at 375px wide: 20px page gutter, so
   the content column is 335px; cards pad 24px, so their content is 287px.

   Ramp steps used below, as elsewhere in the project:
   green-100 #f1f1ed, green-200 #e1e2dd, green-300 #cccfc6,
   green-400 #b1b4aa, green-500 #8d957f, green-600 #6e775f, ink #20231c.
   ===================================================================== */

/* Markup the desktop never draws: the phone chrome, the panels it opens, and
   the dots the phone puts under a rail. */
.m-chrome,
.m-chrome-portal,
.m-rail-dots { display: none; }

/*
  The parcel that flies into the basket when something is added, and the nudge
  the basket gives when it lands. Both live outside the phone query on purpose:
  the element is built by public/js/mobile-ui.js, which only runs below 768px,
  and a rule that only exists inside a media query would leave a half-styled
  clone on screen if that ever changed.

  It is a copy of the product's own photograph rather than a dot or an icon,
  because the question it answers is "did the right thing go in".
*/
.m-fly {
  position: fixed;
  z-index: 1150;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  object-fit: contain;
  pointer-events: none;
  will-change: transform, opacity;
  /* Slow out of the card, quick into the basket, so the eye is led rather than
     yanked. Opacity trails the movement: it is still solid over most of the
     journey and only gives out as it arrives. */
  transition: transform 0.62s cubic-bezier(0.36, 0, 0.24, 1),
              opacity 0.62s cubic-bezier(0.7, 0, 1, 1);
}

.m-fly--away { opacity: 0.1; }

/* A product with no picture to send still sends something. */
span.m-fly {
  background: var(--color-green-300, #cccfc6);
  border-radius: 999px;
}

.m-bar__cart--bump { animation: m-cart-bump 0.44s cubic-bezier(0.3, 1.4, 0.5, 1); }

@keyframes m-cart-bump {
  0% { transform: scale(1); }
  38% { transform: scale(1.24); }
  100% { transform: scale(1); }
}

/* Someone who has asked for less movement still gets the count and the nudge;
   mobile-ui.js skips the flight for them, and the nudge stays a step smaller. */
@media (prefers-reduced-motion: reduce) {
  .m-fly { transition: none; }
  @keyframes m-cart-bump {
    0% { transform: scale(1); }
    38% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
}

@media (max-width: 767.98px) {

/* =====================================================================
   1. CHROME - the 60px bar (menu.png)
   ===================================================================== */

/*
  The bar follows the reading direction: it slides out of the way on the way
  down the page and comes back the moment the visitor scrolls up, so the basket
  and the menu are a flick away instead of a trip to the top.
  public/js/mobile-ui.js adds and removes the classes.

  Two elements: the outer one holds the bar's height in the page's flow, the
  inner one is pinned to the viewport. Sticky would have been the obvious way
  and does not work here - the page sets `overflow-x: hidden` on html and body,
  which makes html a scroll container and switches sticky off entirely. The bar
  scrolled away with the page and only came back at the very top, whatever the
  script said.
*/
.m-chrome {
  display: block;
  /* The bar's own min-height. A taller one overlays by the difference rather
     than leaving a gap, which is the safer way round. */
  height: 60px;
}

.m-chrome__inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  transition: transform 0.28s ease;
}

.m-chrome-portal { display: block; }

.m-chrome--hidden .m-chrome__inner { transform: translateY(-100%); }

/* Once the page has moved under it, the bar needs an edge of its own. */
.m-chrome--stuck .m-chrome__inner { box-shadow: 0 6px 18px rgba(32, 35, 28, 0.08); }

/* The desktop header steps aside - both of them. The checkout's minimal one is
   the desktop frame's wordmark-and-phone bar and has no phone variant, so it
   used to leave the order form wearing a header the rest of the site does not
   have; layouts/app draws the bar below on every page now. */
.site-header { display: none !important; }

.m-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 12px 20px;
  background: #fff;
}

.m-bar__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-green-600);
  font-size: 22px;
  line-height: 1;
}

.m-burger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 27px;
  height: 17px;
}

.m-burger-icon span {
  display: block;
  height: 2.4px;
  border-radius: 2px;
  background: currentColor;
}

.m-bar__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}

.m-bar__logo img {
  display: block;
  width: auto;
  height: 17px;
}

/* 84x6 in the frame: the claim is set very small under the wordmark. */
.m-bar__claim {
  display: block;
  font-size: 7.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--color-ink);
  white-space: nowrap;
}

.m-bar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.m-bar__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-green-600);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.m-bar__icon--chat { font-size: 21px; }
.m-bar__cart { font-size: 20px; }

/* The presence dot on the bubble, 7px at its top right. */
.m-bar__presence {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25b161;
}

body.advisor-offline .m-bar__presence { background: var(--color-green-400); }

.m-bar__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 36px;
  background: var(--color-green-300);
}

.m-bar__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border: 2px solid #f9dbb2;
  border-radius: 999px;
  background: var(--color-primary, #ef8739);
  color: var(--color-ink);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* ---- The search field the magnifier reveals ---- */
.m-search { padding: 0 20px 12px; background: #fff; }

.m-search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--color-green-200);
  border-radius: 16px;
  background: #fff;
}

.m-search__form > i { color: var(--color-green-500); font-size: 14px; }

.m-search__form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.m-search__form input:focus { outline: none; }
.m-search__form input::placeholder { color: var(--color-green-500); }

.m-search__form button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ef8739 0%, #f29e50 100%);
  color: #40190c;
  font-size: 14px;
}

/* =====================================================================
   2. CHROME - the slide-in menu (menu_rozlozene.png) and the contact
      sheet (rychly_kontakt.png)
   ===================================================================== */

.m-overlay { position: fixed; inset: 0; z-index: 1200; }
.m-overlay[hidden] { display: none; }

.m-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.m-overlay--open .m-overlay__backdrop { opacity: 1; }

body.m-overlay-locked { overflow: hidden; }

/* The panel leaves 20px of the darkened page on its left, as the frame does,
   and rounds the two corners that edge shows. */
.m-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: calc(100% - 20px);
  /* 355 of 375 in the frame, i.e. a 20px strip of the darkened page. The cap
     keeps that strip from growing into a band on a wide phone. */
  max-width: 420px;
  padding: 24px;
  border-radius: 24px 0 0 24px;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.m-overlay--open .m-menu { transform: none; }

.m-bar--in-menu {
  min-height: 60px;
  padding: 12px 0;
  background: transparent;
}

.m-bar--in-menu .m-bar__burger { color: var(--color-green-700); }

/*
  The tinted plate behind the navigation. In the frame it runs the panel's full
  width, i.e. out past the panel's own 24px padding, which is what the negative
  margins here give back.
*/
.m-menu__body {
  flex: 1 1 auto;
  margin: 0 -24px -24px;
  padding: 16px 24px 32px;
  border-radius: 32px 0 0 0;
  background: linear-gradient(180deg, var(--color-green-100) 0%, #fff 100%);
}

.m-menu__cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--color-green-200);
}

.m-menu__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 40px;
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
}

.m-menu__cat i { font-size: 13px; color: var(--color-ink); }

.m-menu__pages {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
}

.m-menu__page {
  padding: 4px 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-green-800);
  text-decoration: none;
}

/* ---- Contact sheet ---- */
.m-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, var(--color-green-100) 0%, #fff 42.08%);
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.m-overlay--open .m-sheet { transform: none; }

.m-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.m-sheet__head strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.m-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-green-700);
  font-size: 20px;
}

.m-sheet__body { display: flex; flex-direction: column; gap: 16px; }

/* The pills are the footer's, and their link rule is scoped to the footer. */
.m-sheet .site-footer__contact-pill { max-width: none; margin-bottom: 0; }

.m-sheet a.site-footer__contact-value {
  display: inline-block;
  max-width: 100%;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: underline;
}

/* =====================================================================
   3. SHARED PIECES - buttons, headings, rails
   ===================================================================== */

/*
  akcent-button-m / primary-button-m: 40px tall, radius 14, 14px label. The
  frames use this size for every in-page call to action on the phone; the
  56px large button is kept for the buy row on the product detail.

  The selectors are listed section by section rather than as `main .btn`,
  because the basket, the checkout, Kontakt and the calculator page have no
  phone frame yet and are to be left exactly as they are.
*/
.home-hero .btn,
.home-calc-banner .btn,
.about-bento .btn,
.section-bar .btn,
.listing-hero .btn,
.listing-advisor .btn,
.recently-viewed .btn,
.komplety-band .btn,
.detail-advisor .btn,
.listing-card-col .product-card-action,
.product-grid-card .product-grid-footer .btn {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.02em;
}

.home-hero .btn i,
.home-calc-banner .btn i,
.about-bento .btn i,
.section-bar .btn i,
.komplety-band .btn i,
.listing-card-col .product-card-action i { font-size: 13px; }

/* The hero CTA is the orange accent button on the phone, not the pale one. */
.home-hero .btn-hero-light {
  background: linear-gradient(180deg, #ef8739 0%, #f29e50 100%);
  color: #40190c;
}

.section-bar .btn.btn-outline-soft,
.komplety-band .btn.btn-outline-soft {
  border: 2px solid var(--color-green-300);
  background: transparent;
  color: var(--color-green-600);
}

/* Section headings: 24px, and the row they share with a CTA stacks. */
.section-bar .section-title,
.home-calc-banner .section-title,
.recently-viewed-title,
.detail-section-title,
.reviews-title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.section-bar {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.section-bar .btn { align-self: flex-start; }

/* One card per screenful on every rail, and no peek of the next one. */
.product-rail,
.komplety-rail,
.decor-showcase-rail { gap: 20px; }

/*
  "Vše pohromadě" comes to rest on a card, like every other rail here.
  It is the one rail declared `x proximity` (storefront-export.css), which
  leaves a short flick wherever it stopped - half a card across, most of the
  time, since one card fills the screen at this width and a swipe rarely
  carries a whole one. The others all say `mandatory`; so does this one now.
*/
.komplety-rail { scroll-snap-type: x mandatory; }

.product-rail-col,
.komplety-rail-item { flex-basis: 100%; }

.decor-showcase-card { flex-basis: 100%; height: 440px; border-radius: 24px; padding: 24px; }
.decor-showcase-card-label { font-size: 24px; }

/*
  The tinted panel a band sits on. Its width comes from a bleed formula built
  for the desktop, and on a phone that formula leaves 4px of tint either side of
  the content - so the heading all but touched the edge of its own panel. The
  frame runs the panel the full width of the screen (its "bg" is 375px wide at
  left 0) with the content on the page's own 20px gutter, which is what this is.
*/
.recently-viewed > .container,
.komplety-band > .container {
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 32px;
}

/* The round arrows are for the mouse; a phone swipes and reads the pills. */
.carousel-shell .carousel-arrow { display: none !important; }

.decor-showcase-progress,
.komplety-rail-pills { gap: 4px; margin-top: 16px; }

/* The pills under "Najděte svůj dekor": on the phone the arrows are gone, and
   without them nothing said the rail could be swiped. Bootstrap's [hidden]
   still wins while the script has nothing to show. */
.decor-showcase-progress--phone { display: flex; }
/* The empty basket lays the same cards out as a grid, so there is nothing to swipe. */
.cart-empty-decor .decor-showcase-progress--phone { display: none; }

.decor-showcase-progress span,
.komplety-rail-pills span,
.komplety-rail-pills button {
  width: 23px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-green-200);
}

.decor-showcase-progress span.is-active,
.komplety-rail-pills span.is-active,
.komplety-rail-pills button.is-active { background: var(--color-green-500); }

/*
  "Zobrazit všechny komplety" belongs after the rail, not beside the heading -
  the frame puts it under the slide pills, where it reads as "and the rest of
  them" rather than as a second heading. The heading and the button share a
  .section-bar, so the bar steps out of the layout with display:contents and
  the band's own column orders its four children instead.
*/
.komplety-band > .container {
  display: flex;
  flex-direction: column;
}

.komplety-band > .container > .section-bar { display: contents; }
.komplety-band > .container .section-title { order: 0; margin-bottom: 16px; }
.komplety-band > .container > .carousel-shell { order: 1; }
.komplety-band > .container > .komplety-rail-pills { order: 2; }

.komplety-band > .container .section-bar > .btn {
  order: 3;
  align-self: flex-start;
  margin-top: 20px;
}

/*
  On a product page the button reads as the end of the rail rather than as
  another item in a left-aligned column, so it sits in the middle. By id, not
  by class: the homepage draws the same band and keeps its own alignment.
*/
#detail-komplety > .container .section-bar > .btn { align-self: center; }

/* =====================================================================
   4. HOMEPAGE
   ===================================================================== */

.home-hero { padding-top: 20px; }
.home-hero-grid { gap: 20px; }

/*
  banner-1: 335x440 with padding 120px 24px. That bottom padding is what puts
  the copy on the lower half rather than on the bottom edge, and leaves the
  120px band the mascot's feet stand in.
*/
.home-hero-visual {
  min-height: 440px;
  padding: 24px;
  padding-bottom: 120px;
  border-radius: 24px;
}

.home-hero-visual-inner { max-width: 287px; }

.home-hero-title {
  margin-bottom: 8px;
  font-size: 32px;
  line-height: 1.2;
}

.home-hero-text {
  margin-bottom: 32px;
  max-width: 287px;
  font-size: 14px;
  line-height: 1.48;
}

/* 202x234 at left 148 / top 105 inside the 335x440 panel: its head comes up
   beside the headline's last line and its feet stand in the bottom band. */
.home-hero-mascot {
  display: block;
  position: absolute;
  z-index: 2;
  right: -4%;
  /*
    The frame's own 105/234 of 440 assume its mascot's framing. The image the
    shop actually ships is a wider pose, and at that size and height its crest
    came up over the headline, so it sits a little lower and smaller: head
    beside the headline's last line, feet in the bottom band, as the frame has
    it.
  */
  bottom: 6%;
  left: auto;
  top: auto;
  height: 44%;
  width: auto;
  /* maskot_vitaz already faces left, into the copy. Not mirrored, anywhere. */
  transform: none;
  pointer-events: none;
}

/* calculator-mobile: 335x477 with the brand chips, the two-line heading, the
   copy and the three fields stacked. */
.home-hero-calc { padding: 24px; border-radius: 24px; }
.home-hero-calc .chip-row { margin-bottom: 16px; gap: 8px; }

.home-hero-calc .chip,
.home-calc-banner .chip {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.24;
}

.home-hero-calc-title { margin-bottom: 16px; font-size: 24px; line-height: 1.2; }
.home-hero-calc-text { margin-bottom: 16px; font-size: 14px; line-height: 1.48; }
.home-hero-calc-form .calc-field { margin-bottom: 8px; }

.home-hero-calc .calc-field label,
.home-calc-banner .calc-field label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-ink);
}

.home-hero-calc .calc-input,
.home-calc-banner .calc-input {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #fff;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.02em;
}

.home-hero-calc-form .btn { margin-top: 8px; }

/* ---- Benefits panel (usp-s-mobile): 335x288, four rows ---- */
/*
  The partial ships `padding: 0 0 40px` - no top gap at all, because the
  homepage's own band supplies one. The category listings include it directly,
  so there it sat straight against the strip above it. The frame leaves the
  same 20px it leaves between every other pair of sections.
*/
.listing-benefits { padding-top: 20px; }
.listing-benefits-bar { padding: 24px; gap: 16px; border-radius: 32px; }
.listing-benefit { align-items: center; gap: 24px; }

.listing-benefit-icon {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.listing-benefit-icon svg { width: 32px; height: 32px; }

.listing-benefit-text {
  font-size: 14px;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

/*
  The homepage's calculator banner is not drawn on a phone.

  It is a tall block - the copy, the advisor, the mascot and a three-field form
  - and on a phone it landed between the bestsellers and the about tiles as a
  screen and a half of scrolling before anything else happened. The calculator
  itself is still a tap away from the menu and from the hero, so nothing here
  becomes unreachable.

  By id, not by class: the same banner also closes the about page, and that one
  stays. The rules below therefore still have a banner to style.
*/
#kalkulacka-banner { display: none; }

/* ---- Calculator banner (calculator-mobile, 335x756) - the about page's ---- */
.home-calc-banner {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 24px;
  border-radius: 24px;
}

/*
  The frame's heading is short enough to clear the mascot beside it. The
  admin's own wording is not always, so the heading keeps the bird's width
  free and wraps before it instead of running underneath it.
*/
.home-calc-banner .section-title {
  max-width: none;
  margin-bottom: 16px;
  padding-right: 104px;
  font-size: 28px;
}
.home-calc-banner-text { max-width: none; margin-bottom: 16px; font-size: 14px; line-height: 1.48; }
.home-calc-banner-advisor strong { margin-bottom: 8px; }

/*
  The mascot comes back on the phone: the frame puts it at 128x173 over the
  heading's right side, mirrored, with the copy running underneath it.
*/
.home-calc-banner-mascot {
  display: block;
  left: auto;
  right: -8px;
  top: 46px;
  height: 173px;
  transform: scaleX(-1);
}

/* The form gets the 3px rule above it the frame draws, and its own gap. */
.home-calc-banner-form {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 3px solid var(--color-green-300);
}

.home-calc-banner-form-title { font-size: 18px; }
.home-calc-banner-form-text { margin-bottom: 16px; font-size: 14px; line-height: 1.48; }
.home-calc-banner-fields { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.home-calc-banner-fields .btn { min-height: 40px; }

/* ---- About tiles (about-us-mobile) ---- */
.about-bento { padding: 20px 0 0; }
.about-bento-grid { gap: 16px; }
.about-bento-row { gap: 16px; }
.about-bento-cell { padding: 24px; border-radius: 24px; }
.about-bento-cell--story { min-height: 400px; }
.about-bento-title { font-size: 18px; line-height: 1.2; }
.about-bento-title--lg { font-size: 18px; }
.about-bento-cell p { font-size: 14px; line-height: 1.48; }

/* The frame left-aligns the two statistic tiles on the phone. */
.about-bento-cell--stat { align-items: flex-start; text-align: left; }
.about-bento-cell--delivery p,
.about-bento-cell--experience p { text-align: left; max-width: none; }
.about-bento-stat,
.about-bento-stat--xl { font-size: 18px; }

.about-bento-cell--experience { position: relative; min-height: 220px; }

/*
  The line drawing behind the bird: the frame's "dvere_2", a 181x167 door
  outline at right 24 / top 24 of the tile, drawn in #474C3F. Only its right
  and bottom edges are inked, which is the pair of lines the frame shows and
  what gives the mascot something to stand in front of.
*/
.about-bento-cell--experience::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 24px;
  right: 24px;
  width: min(181px, 56%);
  height: 167px;
  border-right: 1px solid rgba(71, 76, 63, 0.5);
  border-bottom: 1px solid rgba(71, 76, 63, 0.5);
  pointer-events: none;
}

/*
  182x243 at top 54 of the frame's 220px tile, so 77px of it is below the tile
  and the tile's own edge crops the feet. Not mirrored: maskot_vitaz faces left
  already, into the copy beside it.
*/
.about-bento-mascot {
  display: block;
  position: absolute;
  z-index: 1;
  right: -10px;
  bottom: -77px;
  left: auto;
  top: auto;
  width: auto;
  height: 243px;
  transform: none;
  pointer-events: none;
}

.about-bento-cell--experience > *:not(img) { max-width: 60%; }

.about-bento-points { gap: 16px; }
.about-bento-point { gap: 24px; font-size: 12px; line-height: 1.24; }

/* The frame keeps the divider between the two benefit rows, laid flat. */
.about-bento-point + .about-bento-point {
  padding-top: 16px;
  border-top: 1px solid var(--color-green-400);
}

.about-bento-point-icon {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 21px;
}

.about-bento-link { font-size: 14px; }

/* =====================================================================
   5. CATEGORY LISTING (sortiment_cely.png)
   ===================================================================== */

.listing-hero-wrap { padding: 20px 0 0; }

.listing-hero {
  gap: 16px;
  padding: 24px;
  border-radius: 32px;
}

.listing-hero-breadcrumb { margin-bottom: 0; font-size: 12px; }
.listing-hero-title { font-size: 32px; line-height: 1.2; }
.listing-hero-intro { font-size: 14px; line-height: 1.48; }
.listing-hero-tips-title { font-size: 16px; }
.listing-hero-tips ul { gap: 8px; }
.listing-hero-tips a,
.listing-hero-tips span { font-size: 14px; }

/*
  173x232, mirrored, cropped by the panel's bottom edge. The wrapper is hidden
  from the tablet breakpoint down; it comes back here as a zero-height box the
  image is positioned against, so the panel's own edge does the cropping.
*/
.listing-hero > .listing-hero-visual { display: block; }

.listing-hero-visual img {
  position: absolute;
  z-index: 0;
  top: auto;
  /*
    The frame puts the bird at top 350 of a 497px panel and 232px tall, so its
    feet run 85px past the foot and the panel's own edge crops them - it stands
    out of the bottom rather than floating in the card. Both numbers are given
    as a share of the panel, because the panel is only 497px tall when the
    category's intro runs to six lines.
  */
  bottom: -17%;
  left: auto;
  right: -12px;
  height: 47%;
  /* maskot_vitaz already faces left, into the copy. Not mirrored. */
  transform: none;
}

/* The copy stays over the bird whatever the intro's length. */
.listing-hero-copy,
.listing-hero-tips { position: relative; z-index: 2; }

/* Filter button and sort field share one row, as the frame lays them out. */
.shop-topbar { margin-bottom: 20px !important; }
.shop-topbar-meta .listing-count { display: none; }

.shop-topbar-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.mobile-filter-trigger-wrap { flex: 0 0 auto; }

.mobile-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 52px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.02em;
}

.mobile-filter-trigger i { font-size: 18px; }

.shop-topbar-sort { flex: 1 1 auto; min-width: 0; }

.shop-topbar-sort .shop-topbar-label {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
  color: #727272;
}

.shop-topbar-sort .form-select {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 40px 0 14px;
  border: 1px solid #c2c2c2;
  border-radius: 16px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}

/* One card per row, at the frame's own 24px padding rather than the 14px the
   old phone rules squeezed it to. */
.listing-card-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }

/*
  "Naposledy prohlížené produkty" is a rail on the phone, like every other
  strip of cards. Stacked, four cards ran the page on for two thousand pixels
  for a strip nobody came for. Same snapping row the other rails use, and
  public/js/mobile-ui.js puts the pills under it.
*/
.recently-viewed-rail {
  flex-wrap: nowrap;
  /*
    The cards keep one height, as on every other rail. This strip mixes a door
    photo with a lock, so one card is always the taller; left to their own
    heights the shorter one ended halfway up the panel and left the pills
    floating in bare tint. Stretched, the spare room is inside the card's own
    fill and the pills stay where they were.
  */
  align-items: stretch;
  gap: 20px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-anchor: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.recently-viewed-rail::-webkit-scrollbar { display: none; }

.recently-viewed-rail > * {
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  scroll-snap-align: start;
}
.listing-card-col .product-card { padding: 24px; border-radius: 24px; }
.product-card-badges { top: 32px; left: 32px; gap: 8px; }
.listing-card-col .product-card .product-body { padding: 16px 0 0; }
.listing-card-col .product-card .product-footer { padding: 16px 0 0; }
.listing-card-col .product-card .swatch-label { font-size: 13px; }

/* 24px on the phone, and round, as the frame renders them. */
.product-card-color-dots--large .product-card-color-dot {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.product-card-color-dots--large { min-height: 24px; margin: 4px 0 0; }

.listing-card-col .product-card .product-category,
.listing-card-col .product-card .product-card-title,
.product-grid-card .product-grid-category,
.product-grid-card .product-grid-title,
.product-grid-card .product-grid-title a { font-size: 18px; }

.listing-card-col .product-card .product-card-text,
.product-grid-card .product-grid-desc { font-size: 14px; }

.listing-card-col .product-card .product-price,
.product-grid-card .product-grid-price strong { font-size: 16px; }

/* ---- Doplňky and kování: the standalone card (shop/_product_card) ----
  These two categories draw the other card, and it takes its photo box from
  `aspect-ratio: 336/400`. A lock or a cylinder is a small object, so on the
  phone that left a 360px box with a 90px product adrift in the middle, and a
  product with no photo at all left 360px of nothing. The box goes back to the
  height the admin already carries for the phone ("Výška obrázku na mobilu"),
  and the photo is centred in it.
*/
.product-grid-card { padding: 20px; }

.product-grid-card .product-grid-image {
  aspect-ratio: auto;
  /* The related-products strip sets a floor of its own; the phone height has
     to outrank it or the box keeps the desktop's. */
  min-height: 0;
  height: var(--product-card-image-max-height-mobile, 190px);
  margin-bottom: 4px;
}

.product-grid-card .product-grid-image img { max-height: 100%; }

/* `right: auto` matters: the strip's own rule pins the badge to the right, and
   a left as well as a right stretches it across the card. */
.product-grid-card .product-grid-stock-badge { top: 20px; left: 20px; right: auto; }

/*
  The card prints four lines of type before the price - category, name,
  manufacturer, blurb - and at 18px the category read as a second heading. It
  becomes the small kicker over the name that the frame's cards carry.
*/
.product-grid-card .product-grid-category {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-green-600);
}

.product-grid-card .product-grid-content { margin-top: 8px; }
.product-grid-card .product-grid-title,
.product-grid-card .product-grid-title a { font-size: 17px; line-height: 1.24; }
.product-grid-card .product-grid-meta { margin-top: 4px; font-size: 13px; }
.product-grid-card .product-grid-desc { font-size: 13px; }
.product-grid-card .product-grid-count { font-size: 13px; }

/* The name runs to three lines on these, and the frame's cards end on an
   arrowed accent button, so the footer keeps its own air. */
.product-grid-card .product-grid-footer { padding-top: 12px; }

/* ---- Doplňky and kování detail: shop/show.blade.php ----
  This page is the old plain layout, not the configurator, and on the phone it
  came apart. app.css zeroes the info column's left padding below 768px while
  the Bootstrap row keeps its -24px gutter margin, so every line in the column
  - the kicker, the name, the price, the parameter rows - started 4px off the
  left edge of the screen and was cut. And the photo tile carries a 560px
  floor, which is most of a phone screen for a lock the size of a hand.
*/
.product-detail .product-info {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.product-detail .product-image-main {
  min-height: 0;
  height: 300px;
  padding: 20px;
  border-radius: 24px;
}

.product-detail .product-image-main img { max-height: 100%; }
.product-detail .price-big { font-size: 28px; line-height: 1.24; }

/* The stepper and the button share one flex row; side by side at 390px the
   button's label broke in two, so each takes a line, as on the door detail. */
.product-detail .product-info form.d-flex {
  flex-direction: column;
  align-items: stretch;
  gap: 12px !important;
}

.product-detail .quantity-stepper { width: 100%; justify-content: space-between; }
.product-detail .product-info form.d-flex .btn { width: 100%; }

/*
  "Podobné produkty" gets the treatment the "Vše pohromadě" band has: the
  tinted panel out to both edges of the screen, and the cards on a snapping
  rail with pills under them. Two across at 390px broke the names into five
  lines, and one per row stacked ran the page on for four screenfuls.
*/
.related-products-band {
  margin-top: 24px !important;
  margin-left: -20px;
  margin-right: -20px;
  padding: 24px 20px;
  border-radius: 32px;
  background: linear-gradient(180deg, var(--color-green-100) 0%, #fff 42%);
}

.related-products-band > h3 { margin-bottom: 16px !important; font-size: 24px; }

.related-products-rail {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-anchor: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.related-products-rail::-webkit-scrollbar { display: none; }

.related-products-rail > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
  scroll-snap-align: start;
}

/* The written paragraph under the grid, and the advisor card after it. */
.listing-seo-title { font-size: 18px; }
.listing-seo-text { font-size: 14px; line-height: 1.3; }

.listing-advisor { padding: 24px; border-radius: 24px; }
/* 103x137 in the frame. The variable, not width - `left` is derived from it. */
.listing-advisor-mascot { --advisor-mascot-width: 103px; }

/* =====================================================================
   6. PRODUCT DETAIL (konfiguracia.png)
   ===================================================================== */

.detail-page { padding-top: 0; }

.detail-breadcrumb { margin-bottom: 0; padding: 20px 0; font-size: 12px; }

/*
  The gallery is a snapping rail on the phone: the hero tile and every thumb
  are the same square, each as wide as the content column, so exactly one
  photo is on screen edge to edge and a flick brings the next. The pills
  under it count the photos - one per tile - and stay away while there is
  only one. It is the same DOM the desktop uses - shop-configurator.js keeps
  filling #imageGallery - only laid out along one line instead of two rows.
*/
/*
  The selectors carry .detail-page because the page's own stylesheet writes
  `.detail-page.product-configurator .detail-gallery { display: grid
  !important }` at 0-3-0 and its thumbs at 0-4-0. Matching that weight and
  arriving later is what turns the two-column grid into one line.
*/
.detail-page .detail-media {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-anchor: none;
  /* The thumbs measure themselves against the rail (100cqw below). */
  container-type: inline-size;
}

.detail-page .detail-media::-webkit-scrollbar { display: none; }

.detail-page .detail-media .detail-stage {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* shop-configurator.css insets the stage 14px under 576px; the tile is
     meant to run to the column's edge, as the thumbs beside it do. */
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.detail-page .detail-media .detail-gallery {
  display: flex !important;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  gap: 16px;
  margin: 0;
  padding: 0;
  background: none;
}

/* Nothing in it yet: an empty flex box would still take the gap beside it. */
.detail-page .detail-media .detail-gallery:empty { display: none !important; }

/*
  The hero tile already shows the active photo, and on the desktop its thumb
  stays in the grid as the highlighted one. On the phone every thumb is a
  full slide, so that thumb would be the same photo twice in a row; it steps
  aside and the rail reads hero, then each of the other photos once.
*/
.detail-page .detail-media .detail-gallery .detail-thumb.active { display: none; }

/*
  Every tile is a full screenful of the rail, so the gallery is measured by
  the rail rather than by a fixed pixel size and fits any phone. The width
  is what makes them slides; the square comes from the ratio, as it does on
  the desktop tile. The hero is the rail's own child and takes 100%; a thumb
  sits inside the auto-width gallery, where a percentage has nothing to
  resolve against, so it reads the rail's width through the container unit.
*/
/*
  The square is written as a height, not left to aspect-ratio. A photo of a
  door is three times taller than it is wide and is fitted into the tile by
  max-height: 100% - and Safari on the iPhone does not resolve that
  percentage against a height that only aspect-ratio implies, so the door
  came out at its full height and the tile grew to hold it. Against an
  explicit height every engine fits it.
*/
.detail-page .detail-media .detail-gallery .detail-thumb {
  flex: 0 0 100cqw;
  width: 100cqw;
  height: 100cqw;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 24px;
  border-radius: 24px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.detail-page .detail-media .detail-main-media {
  width: 100%;
  height: 100cqw;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  padding: 24px;
  border-radius: 24px;
}

.detail-page .detail-media .detail-main-media img,
.detail-page .detail-media .detail-gallery .detail-thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* The zoom hint is a pointer affordance; a tap opens the lightbox anyway. */
.detail-main-media-hint { display: none; }

.detail-variant-chip {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.m-rail-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}

/* Empty is how the script says "one screenful, no dots needed". */
.m-rail-dots:empty { display: none; }

.m-rail-dots span {
  width: 29px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-green-200);
}

.m-rail-dots span.is-active { background: var(--color-green-500); }

.detail-product { gap: 24px; }
.detail-title { font-size: 24px; line-height: 1.24; }
.detail-rating,
.detail-rating-score,
.detail-rating-meta { font-size: 12px; }
.detail-rating-stars { font-size: 14px; }
.detail-lede,
.detail-lede-note { font-size: 14px; line-height: 1.48; }
.detail-more-link { font-size: 14px; }

/* konfigurator-mob: 335x470, one field per row. */
.detail-configurator,
.product-configurator--zarubna .detail-configurator,
.product-configurator--kovanie .detail-configurator {
  padding: 24px;
  border-radius: 24px;
}

.detail-configurator-title { font-size: 18px; }
.detail-configurator-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Dropdown-Default at 287x64: a 22px label over a 40px white box. */
.detail-configurator-fields .config-title { font-size: 12px; line-height: 22px; }

.detail-configurator-fields .config-section-summary {
  height: 40px;
  padding: 0 40px 0 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 22px;
}

.detail-configurator-fields .config-section.has-summary-media .config-section-summary { padding-left: 48px; }
.detail-configurator-fields .config-section-summary-media { left: 12px; bottom: 8px; }
.detail-configurator-fields .config-section-toggle-icon { right: 14px; bottom: 10px; }

/* The mascot leans in from the right, cropped by the card's edge. */
.detail-configurator-mascot {
  display: block;
  position: absolute;
  z-index: 0;
  right: -46px;
  bottom: -6px;
  left: auto;
  top: auto;
  width: auto;
  height: 271px;
  transform: scaleX(-1);
  pointer-events: none;
}

/* The frame stacks the mascot at 1 and the field groups at 2 and up, so the
   bird leans in behind the boxes and their chevrons stay readable. */
.detail-configurator-fields,
.detail-configurator-title { position: relative; z-index: 2; }

/* The buy row: the stock pill and the shipping link, then the price, then the
   stepper and the 56px accent button, each on its own line. */
.detail-buy-top { flex-wrap: wrap; gap: 8px 12px; }
.detail-stock-pill { font-size: 12px; }
.detail-shipping-link { font-size: 12px; }
.detail-price-main { font-size: 28px; line-height: 1.24; }
.detail-price-sub { font-size: 12px; }

.detail-buy-row { flex-direction: column; align-items: stretch; gap: 16px; }

/* The form is the row that holds the stepper and the button; the frame gives
   each of them a line of its own, at full width. */
.detail-buy-actions {
  flex: 1 1 auto;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.detail-qty {
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
}

.detail-cart-btn {
  min-height: 56px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 18px;
  line-height: 22px;
}

/*
  Advisor card. Stacked, the copy's `flex: 1 1 190px` reads as a 190px height,
  which is what opened the gap between the heading and the contacts; and the
  frame runs both channels down the card's full width rather than centring a
  pill in it.
*/
.detail-advisor {
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
}

.detail-advisor-copy { flex: 0 0 auto; }
.detail-advisor-title { font-size: 16px; }
.detail-advisor-text { font-size: 14px; line-height: 1.48; }
.detail-advisor-contact { align-items: flex-start; gap: 10px; padding: 0; }
.detail-advisor-channels { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.detail-advisor-channel a { font-size: 16px; }

.detail-benefit-icon { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; }
.detail-benefit-icon svg { width: 32px; height: 32px; }
.detail-benefit-text { font-size: 14px; line-height: 1.24; }

.detail-recommended { padding: 20px; border-radius: 16px; }
.detail-recommended-title { font-size: 14px; }
.detail-recommended-name { font-size: 14px; }
.detail-recommended-media { flex-basis: 71px; width: 71px; height: 71px; }

.detail-accordion-trigger { font-size: 14px; }

/* The written story and the four cards after it. */
.detail-story-title { font-size: 36px; line-height: 1.2; }
.detail-story-body { font-size: 16px; line-height: 1.48; }
.detail-card { padding: 24px; border-radius: 24px; text-align: center; }
.detail-card-title { font-size: 18px; }
.detail-card p { font-size: 14px; line-height: 1.48; }
.detail-card--lead .detail-card-title { font-size: 24px; }
.detail-card--photo { min-height: 375px; }

/*
  The bird under "Falcové, nebo bezfalcové?". The phone rules hid it, on the
  grounds that it would cover the copy - but the frame has it on this card at
  264x351 over a 335x375 tile, centred and 19.5px right of centre, standing out
  of the tile's bottom edge with the copy above it. So the card is given the
  frame's height and the bird its place in it.
*/
.detail-card--mascot { min-height: 375px; justify-content: flex-start; }

.detail-card-mascot {
  display: block;
  left: 16.4%;
  top: 42.7%;
  width: 78.8%;
  height: auto;
}

/* Parameters and reviews. */
.detail-spec-row { margin-bottom: 20px; font-size: 14px; }
.reviews-summary { padding: 24px; border-radius: 24px; }
.review-item { padding: 24px; border-radius: 24px; }
.review-photos img { width: 58px; height: 58px; border-radius: 16px; }
.review-text { font-size: 16px; line-height: 1.2; }

/* =====================================================================
   7. FOOTER (footer-variants)
   ===================================================================== */

.site-footer__panel { border-radius: 24px 24px 0 0; }
.site-footer__inner { padding-top: 24px; padding-bottom: 24px; }
.site-footer__grid { gap: 24px; }

/*
  The lockup band at the top of the footer. The frame draws a hairline across
  the whole panel with the mascot standing on it, and the wordmark set 32px
  lower than the panel's own padding. One offset drives all three, so the
  bird's foot and the line cannot drift apart.
*/
.site-footer__inner { --m-footer-rule: 191px; }

.site-footer__mascot {
  display: block;
  position: absolute;
  left: auto;
  right: 6px;
  top: 36px;
  bottom: auto;
  width: auto;
  /* Ends exactly on the rule, which reads as the bird rising out of it. */
  height: calc(var(--m-footer-rule) - 36px);
  pointer-events: none;
}

.site-footer__col--brand { position: relative; padding-top: 32px; }

/* The rule itself, out to both panel edges. */
.site-footer__col--brand::before {
  content: '';
  position: absolute;
  z-index: 0;
  /* The column starts at the inner's 24px padding. */
  top: calc(var(--m-footer-rule) - 24px);
  left: -20px;
  right: -20px;
  border-top: 1px solid rgba(177, 180, 170, 0.85);
  pointer-events: none;
}

/*
  The frame sets the wordmark left, with the mascot filling the space beside
  it. It is centred here by a legacy rule in storefront-export.css that reads
  `.site-footer img { margin-left: auto !important; margin-right: auto
  !important }` under its own max-width:768px query - hence the !important
  back, which is the only thing that beats it. The payment logos below stay
  centred, because the frame centres those.
*/
.site-footer .site-footer__logo {
  height: 32px;
  width: auto;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.site-footer__tagline { font-size: 13px; }
/*
  The newsletter opens just under the rule. The lockup above it runs 32px of
  padding + a 32px wordmark + 10px + a 17px claim = 91px from the column's top,
  and the frame sets the title 21px below the rule at 167px, so the gap is the
  difference.
*/
.site-footer__newsletter { margin-top: calc(var(--m-footer-rule) - 24px - 91px + 21px); }
.site-footer__newsletter-title { font-size: 16px; }

.site-footer__newsletter-input {
  height: 48px;
  border-radius: 16px;
  font-size: 14px;
}

.site-footer__newsletter-note { font-size: 12px; line-height: 1.2; }

.site-footer__newsletter-submit {
  min-height: 40px;
  border-radius: 14px;
  font-size: 14px;
}

/*
  "Sortiment" and "Zákaznický servis" fold away behind their heading, which is
  what the frame shows: a chevron on the right and the list collapsed.
  public/js/mobile-ui.js turns the two headings into the buttons.
*/
.site-footer__col--foldable .site-footer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  min-height: 24px;
  font-size: 16px;
  cursor: pointer;
}

.site-footer__col--foldable .site-footer__heading::after {
  content: '\f107'; /* chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.site-footer__col--foldable.is-open .site-footer__heading::after { transform: rotate(180deg); }

.site-footer__col--foldable .site-footer__links {
  display: none;
  margin-top: 12px;
}

.site-footer__col--foldable.is-open .site-footer__links { display: block; }

/* The contact block sits under a 3px rule, as the frame draws it. */
.site-footer__col--contact {
  padding-top: 24px;
  border-top: 3px solid var(--color-green-400);
}

.site-footer__heading { font-size: 16px; }
.site-footer__contact-pill { border-radius: 32px; }
.site-footer__social-title { font-size: 16px; }
.site-footer__social-link { width: 48px; height: 48px; border-radius: 16px; }

.site-footer__bottom-inner {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.site-footer__payments { order: -1; gap: 24px; }
.site-footer__payments-label { display: none; }
.site-footer__copyright { font-size: 13px; font-weight: 600; }
.site-footer__cookies { font-size: 13px; font-weight: 600; }

/* =====================================================================
   8. CART (kosik.png)
   =====================================================================

   375 wide on a 20px gutter, so a card is 335 and its content 295. The frame
   folds the desktop's six-column row into a card two blocks tall: the stock
   pill and the name beside the thumbnail on the first, the stepper and the
   price on the second. Nothing is dropped - the same cells are re-placed.
   ===================================================================== */

/* text-products: the heading opens 20px down and leaves 30 to the first card.
   18px, not the desktop's 48 - the frame sets it as a label over the list
   rather than as a page title, with the piece count beside it. */
.buy-head { padding-top: 20px; }

.buy-title {
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0;
}

.buy-title__count {
  padding-top: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #727272;
}

/* 30 to the first card, and 20 from the cross-sell strip down to the summary -
   the gap products-2-mobile leaves under itself. */
.cart-shell { gap: 20px; padding-top: 30px; }

/* ---- the row as a card: product-cards-komplet, 335x159, radius 24 ---- */

.cart-rows { gap: 16px; }

.cart-row {
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  /* Row 1 is pinned to the pill's own height so the 58px thumbnail spanning
     rows 1-2 spends its spare height under the name, where the frame leaves
     it, instead of pushing the pill down. */
  grid-template-rows: 24px auto auto auto;
  grid-template-areas:
    "thumb stock  remove"
    "thumb name   remove"
    "qty   total  total"
    "qty   unit   unit";
  align-items: start;
  column-gap: 16px;
  row-gap: 0;
  min-height: 0;
  padding: 20px;
  border-radius: 24px;
}

/* The thumbnail and the names are wrapped together for the desktop's row; here
   they are two cells of the card's own grid, so the wrapper steps out of the
   layout rather than being laid out itself. */
.cart-row__product { display: contents; }

.cart-row__thumb {
  grid-area: thumb;
  width: 26px;
  min-width: 26px;
  height: 58px;
}

/* Flex, not the block it is on the desktop: the pill inside is inline, and an
   inline box carries half-leading that pushed it 2px below the row's top. */
.cart-row__stock {
  display: flex;
  grid-area: stock;
  justify-self: start;
  margin-bottom: 8px;
}

.cart-row__names { grid-area: name; }

/* The frame prints one name - the kind and the model on the same line - so the
   two blocks the desktop stacks run together as a sentence here. */
.cart-row__kind,
.cart-row__name {
  display: inline;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.cart-row__kind::after { content: ' '; }

.cart-row__remove {
  grid-area: remove;
  justify-self: end;
  width: 20px;
  height: 20px;
  border-radius: 0;
  color: #727272;
  font-size: 16px;
}

.cart-row__remove:hover {
  background: transparent;
  color: var(--color-ink);
}

/* The stepper and the price end on one line at the card's foot: 126x45 against
   a 94x42 price stack, which is what the 16px above them and `align-self: end`
   between them produce. */
.cart-qty {
  grid-area: qty;
  align-self: end;
  justify-content: space-between;
  width: 126px;
  height: 45px;
  margin-top: 16px;
  padding: 0 20px;
  border-color: var(--color-green-300);
  border-radius: 16px;
}

.cart-qty__btn {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 15px;
}

/* Minus is drawn in the border's own grey and plus in ink: the frame gives
   "one fewer" less weight than "one more". */
.cart-qty__btn[data-qty-step="1"] { color: var(--color-ink); }
.cart-qty__btn:hover:not(:disabled) { background: transparent; }

.cart-qty__input {
  flex: 0 1 auto;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 124%;
  letter-spacing: -0.02em;
}

.cart-row__total {
  grid-area: total;
  justify-self: end;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
}

.cart-row__unit {
  grid-area: unit;
  justify-self: end;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #616161;
}

/* The stock pill is a rounded rectangle here, not a lozenge: radius 8, 12px
   type, 4x8 of padding. Same on the cross-sell cards below. */
.buy-stock-pill {
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 124%;
}

.buy-stock-pill i { font-size: 12px; }

/* ---- cross-sell strip: upsell-p-card-mobile, 335x317, radius 16 ----
   Six cards do not fit two at a time, so the grid becomes a snapping rail two
   wide with pills under it - see the note in cart/_cross_sell.blade.php. */

.cart-cross {
  margin-top: 20px;
  padding: 20px 20px 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--color-green-50) 0%, var(--color-white) 42.08%);
}

.cart-cross__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #2f2f2f;
}

.cart-cross__grid {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cart-cross__grid::-webkit-scrollbar { display: none; }

.cart-cross-card {
  flex: 0 0 calc((100% - 16px) / 2);
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-radius: 24px;
  background: var(--color-green-50);
  scroll-snap-align: start;
}

/* 8 of the card's own rhythm plus 8 here is the 16 the frame leaves under the
   photograph; the same trick gives the button its 20. */
.cart-cross-card__media {
  width: 100%;
  height: 67px;
  aspect-ratio: auto;
  margin-bottom: 8px;
  border-radius: 8px;
}

.cart-cross-card__stock { margin-bottom: 0; }

/*
  The photographs are shot on white and the frame's cards are not, so without
  this each product sits on a white plate a shade brighter than the card around
  it. Multiply drops that plate into the card's own tint and leaves the product
  standing on it - which is what the quick-cart drawer already does with these
  very same pictures. The cart rows and the checkout summary carry it too: they
  are the same photographs on the same green-50.
*/
.cart-row__thumb img,
.cart-cross-card__media img,
.checkout-item__thumb img { mix-blend-mode: multiply; }

.cart-cross-card__name {
  width: 100%;
  min-height: 2.4em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
  text-align: center;
  color: #2f2f2f;
}

.cart-cross-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #2f2f2f;
}

.cart-cross-card__price small {
  margin-left: 0;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 124%;
  letter-spacing: -0.02em;
  color: #9f9f9f;
}

.cart-cross-card__add {
  gap: 8px;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cart-cross .m-rail-dots { margin-top: 24px; }

/* ---- order summary: sum, 335x320, radius 24, cream ---- */

.buy-summary {
  padding: 20px;
  border-radius: 24px;
}

.buy-summary__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
}

.buy-summary__row {
  padding: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.02em;
}

.buy-summary__row + .buy-summary__row { margin-top: 16px; }
.buy-summary__row-note { font-size: 12px; }

/* The frame draws the divider as the top edge of the total block, 3px in the
   cream's own mid step, so the rule is not a separate element here. */
.buy-summary__rule { display: none; }

.buy-summary__total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 3px solid var(--color-orange-200);
}

.buy-summary__total-label,
.buy-summary__total-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
}

.buy-summary__novat {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #868686;
}

/* 16 of the total block's own bottom padding and 16 of the panel's gap. */
.buy-summary__cta {
  height: 52px;
  margin-top: 32px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.buy-coupon { margin-top: 16px; }
.buy-coupon__field { height: 48px; border-radius: 16px; }

.buy-back {
  margin-top: 16px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-green-700);
}

/* =====================================================================
   9. CHECKOUT (objednavka.png)
   =====================================================================

   One column: the title row, then the summary folded into a band under it,
   then the form. The three are siblings for exactly this reason - see the
   note at the top of checkout/index.blade.php.
   ===================================================================== */

.checkout-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.checkout-head-side { order: 0; padding: 0; }
.checkout-summary-side { order: 1; padding: 0; background: var(--color-white); }
.checkout-form-side { order: 2; padding: 0; }

.checkout-page .checkout-form-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* head-suhrn: the title and the 3D-secure chip share one row. */
.checkout-head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 20px 20px 0;
}

.checkout-head__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0;
}

.checkout-secure {
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 124%;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.checkout-secure__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #004612;
  font-size: 14px;
}

.checkout-secure strong { font-weight: 600; }
.checkout-secure span { color: var(--color-ink); }

/* suhrn: an 86px band on green-50 between two 3px rules, the heading
   underlined on the left and the total set large on the right. */
.checkout-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 29px 20px;
  border: 0;
  border-top: 3px solid var(--color-green-200);
  border-bottom: 3px solid var(--color-green-200);
  background: var(--color-green-50);
  text-align: left;
  cursor: pointer;
}

.checkout-summary-bar__label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: underline;
}

.checkout-summary-bar__chevron {
  font-size: 13px;
  color: var(--color-ink);
  transition: transform 0.2s ease;
}

.checkout-page.is-summary-open .checkout-summary-bar__chevron { transform: rotate(180deg); }

.checkout-summary-bar__total {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* Folded away until the band is tapped. It is the same panel the desktop puts
   in a column of its own, not a second copy of it. */
.checkout-summary-side { display: none; }
.checkout-page.is-summary-open .checkout-summary-side { display: block; }

.checkout-page .checkout-summary-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px;
}

/* The drawer is 295 wide against the desktop rail's 520, so the line items are
   drawn down to fit rather than left to fight over it. */
.checkout-item { gap: 12px; min-height: 0; padding: 12px 16px; }
.checkout-item__thumb { flex: 0 0 32px; width: 32px; height: 44px; }
.checkout-item__name { font-size: 14px; overflow-wrap: anywhere; }
.checkout-item__qty { font-size: 13px; }
.checkout-item__price { min-width: 0; font-size: 14px; }

/* udaje: 32px in from the band, 20px gutters, 32 between blocks. */
.checkout-form-side .checkout-form-inner { padding: 32px 20px; }

.checkout-block { margin-bottom: 32px; }

.checkout-block__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0;
}

/* One field per row, except street/number and town/postcode, which the frame
   keeps paired with the short one held at 95px. */
.checkout-grid { gap: 8px 16px; }
.checkout-grid--halves { grid-template-columns: minmax(0, 1fr); }
.checkout-grid--street { grid-template-columns: minmax(0, 1fr) 95px; }
.checkout-grid--next { margin-top: 8px; }

.checkout-field__label {
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-ink);
}

.checkout-page .form-control,
.checkout-page .form-select,
.checkout-phone {
  height: 50px;
  border-radius: 16px;
}

.checkout-page .form-control,
.checkout-page .form-select {
  padding: 0 24px;
  font-size: 16px;
  font-weight: 600;
}

/* The country field is a select the frame draws with a chevron on its right.
   The shared rule sets a flat white `background`, which drops the arrow the
   browser would have painted, so it is put back as the field's own mark. */
.checkout-page .form-select {
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2320231c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 14px 14px;
}

/* The prefix is a 120px chip on its own grey, with the flag, the code and the
   chevron the frame draws after it. */
.checkout-phone__prefix {
  width: 120px;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  background: #f8f8f8;
  font-size: 16px;
  font-weight: 600;
}

.checkout-phone__caret {
  display: inline-block;
  font-size: 12px;
  color: var(--color-ink);
}

.checkout-phone input { padding: 0 16px; font-weight: 600; }

.checkout-check {
  gap: 8px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

.checkout-check input[type="checkbox"] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1.2px solid #868686;
  border-radius: 5px;
}

/* Delivery and payment rows: 60 tall, 24 of padding, the radio 24 clear of the
   icon it introduces and 8 from the icon to the label. */
.checkout-option {
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

/* The frame draws the radio itself: a 22px ring in ink on white, filled with a
   ringed dot once it is the chosen one. Selection is shown here and nowhere
   else - the row keeps its white fill and grey edge either way, which is what
   lets the two payment rows read as one control. */
.checkout-option input[type="radio"] {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-right: 16px;
  appearance: none;
  -webkit-appearance: none;
  border: 1.2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-white);
}

.checkout-option input[type="radio"]:checked {
  background: var(--color-ink);
  box-shadow: inset 0 0 0 3.5px var(--color-white);
}

.checkout-option:has(input:checked) {
  border-color: #dcdcdc;
  background: var(--color-white);
}

.checkout-option__icon { font-size: 16px; }

/* Free to shrink, so a long delivery name wraps inside its own column instead
   of shouldering the price onto a line of its own. */
.checkout-option__label { flex: 1 1 0; min-width: 0; }
.checkout-option__label small { font-size: 12px; }
.checkout-option__price { order: 3; margin-left: auto; font-size: 14px; font-weight: 600; }

/* The card logo sits under the price, right-aligned, as the frame stacks it. */
.checkout-option__logo {
  order: 4;
  flex-basis: 100%;
  height: 12px;
  margin-top: 4px;
  object-fit: contain;
  object-position: right center;
}

/* Two payment rows read as one control: the pair shares an edge and only the
   outer corners are rounded. */
.checkout-options .checkout-option:first-child:not(:last-child) {
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
}

.checkout-options .checkout-option:last-child:not(:first-child) {
  border-radius: 0 0 16px 16px;
}

.checkout-option + .checkout-option { margin-top: 0; }

/* The newsletter opt-out is the only checkbox outside a block, and the frame
   sets it a step smaller than the two inside the address one. */
.checkout-form-side form > .checkout-check {
  margin-top: 32px;
  font-size: 12px;
  line-height: 16px;
}

.checkout-terms {
  margin: 16px 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: #727272;
}

.checkout-terms a { color: #727272; }

.checkout-submit {
  height: 72px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* =====================================================================
   10. EMPTY CART (prazdny_kosik.png) and ORDER SENT (hotova_objednavka.png)
   =====================================================================

   Both frames are the same panel - popis-text-mob, 375x672, radius 32, the
   upsell gradient - with the copy at the top and the mascot standing under it.
   Only the headline, the button's colour and which bird it is differ.
   ===================================================================== */

.buy-hero {
  border-radius: 32px;
  background: linear-gradient(180deg, var(--color-green-50) 0%, var(--color-white) 42.08%);
}

.buy-hero__inner,
.buy-hero--empty .buy-hero__inner,
.buy-hero--sent .buy-hero__inner {
  display: block;
  min-height: 672px;
  padding: 20px 0 0;
}

.buy-hero__copy,
.buy-hero--empty .buy-hero__copy,
.buy-hero--sent .buy-hero__copy {
  max-width: none;
  padding: 0;
}

.buy-hero__title,
.buy-hero--empty .buy-hero__title,
.buy-hero--sent .buy-hero__title {
  margin: 0 0 30px;
  font-size: 36px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0;
  white-space: normal;
}

.buy-hero__text {
  margin: 0 0 30px;
  font-size: 16px;
  font-weight: 400;
  line-height: 148%;
}

.buy-hero__cta {
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/*
  The mascot is placed rather than laid out: the frame gives it an exact top
  and lets it stand under the copy, which a flow item beside a column cannot do
  at this width. The panel is its positioned ancestor, so the numbers below are
  the frame's own.
*/
.buy-hero__mascot {
  position: absolute;
  left: 0;
  right: 0;
  height: auto;
  pointer-events: none;
}

/* The desktop caps the mascot at the copy column's width; here the frame's own
   size is wider than the 335 gutter allows, and it is meant to be. */
.buy-hero__mascot img { max-width: none; max-height: none; }

/* 353 square at top 314. The frame mirrors its own asset to get the bird
   pointing back into the copy; ours is already stored that way round, so
   nothing is flipped here. */
.buy-hero--empty .buy-hero__mascot { top: 314px; }
.buy-hero--empty .buy-hero__mascot img {
  width: 353px;
  height: 353px;
}

/*
  The order-sent headline breaks after "objednávka" here, not after the comma.
  The break in the markup is the desktop frame's, where "Hotovo," is a line of
  its own; at 36px on 335 the phone frame sets the same words as two lines of
  its own accord, which is exactly the 86px the frame gives the block.
*/
.buy-hero--sent .buy-hero__title br { display: none; }

/* 277x368 at top 338, and 5px left of centre. The negative margin is halved by
   the centring, which is why it is written as 10.

   The frame draws the bird 34px past the panel's 672 - Figma does not clip it,
   and the render shows the whole foot - so the panel is let down onto it here
   rather than cutting the toes off on its rounded edge. */
.buy-hero--sent .buy-hero__inner { min-height: 706px; }
.buy-hero--sent .buy-hero__mascot { top: 338px; }
.buy-hero--sent .buy-hero__mascot img {
  width: 277px;
  height: 368px;
  margin-left: -10px;
}

/* dvere_3: the left edge of a 626 circle crossing the panel from the right. */
.buy-hero__arc {
  top: 87px;
  left: 206px;
  width: 626px;
  height: 626px;
  aspect-ratio: auto;
  border-width: 1px;
}

/* ---- categories-mobile: the decor rail becomes a grid two cards wide ----
   The frame lays all of them out at once here rather than as a rail, with an
   odd last one running the full width at a lower height. */

.cart-empty-decor { padding: 20px 0 0; }

.cart-empty-decor .section-bar--center {
  justify-content: flex-start;
  margin-bottom: 24px;
  text-align: left;
}

.cart-empty-decor .section-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 120%;
}

.cart-empty-decor .decor-showcase-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  overflow: visible;
}

.cart-empty-decor .decor-showcase-card {
  flex-basis: auto;
  height: 182px;
  padding: 24px;
  border-radius: 24px;
}

.cart-empty-decor .decor-showcase-card:nth-child(odd):last-child {
  grid-column: 1 / -1;
  height: 110px;
}

.cart-empty-decor .decor-showcase-card-label {
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
}

/* Everything is on screen, so there is nothing for the pills to count. */
.cart-empty-decor .decor-showcase-progress { display: none; }

/*
  The gap above the benefits bar, and only once.

  The bar carries its own 20px top padding on every page - see .listing-benefits
  in section 3 - so a wrapper that pads as well is paying for the same gap
  twice, which is what pushed the order-sent bar to 40 and the empty cart's to
  60 against the frames' 20 and 40. The wrapper now contributes only the
  difference the frame actually asks for.
*/
.cart-empty-benefits { padding-top: 20px; }
.thankyou-benefits { padding-top: 0; }

/* =====================================================================
   11. ABOUT (/o-nas)
   =====================================================================

   This page has no frame of its own in docs/design/mobil, so it is built
   from what the frames elsewhere already settle: the 335px column on a 20px
   gutter, cards padding 24 at radius 24, 24px section headings over 14px /
   1.48 copy. The gap between one section and the next is 32 rather than the
   20 the frames elsewhere use: this page is eight sections of nothing but
   panels, and at 20 they read as one undivided stack.

   Two of the desktop page's own ideas are kept rather than dropped, because
   they are what makes this page look like this page: the hairline arc, and
   maskot_mava standing in the hero. The desktop lets the bird leave the band
   and finish behind the story panel below it; a phone has no room for a band
   that tall, so the hero becomes a card instead - the homepage's own banner-1
   pattern, copy over the bottom band the bird stands in - and the card's edge
   crops the feet the way the story panel does on the desktop.
   ===================================================================== */

/* ---- Hero: the 731px band becomes a 335px card ---- */
/*
  The band's own tint moves onto the card, so the section is just the
  breadcrumb and the card. It clips, because the bird is a sibling of the
  container rather than a child of the card and the card's own overflow
  cannot reach it: the section's box ends where the card ends, which is the
  edge the feet are cropped on.
*/
.about-hero {
  min-height: 0;
  padding: 12px 0 0;
  overflow: hidden;
  background: none;
}

.about-hero-grid {
  position: relative;
  overflow: hidden;
  gap: 12px;
  margin-top: 16px;
  /* banner-1's rhythm: 24 all round, over the band the mascot stands in. */
  padding: 24px 24px 148px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--color-green-100) 0%, var(--color-green-200) 100%);
}

/*
  The desktop's decoration refitted. There it is a 643px circle struck from
  the middle of a 1920px page, which means nothing at 390; here the same
  hairline is hung off the card's bottom right corner, so the curve runs
  behind the bird and the card's own radius clips it.
*/
.about-hero-grid::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -104px;
  bottom: -186px;
  width: 392px;
  height: 392px;
  border: 1.5px solid rgba(141, 149, 127, 0.32);
  border-radius: 50%;
  pointer-events: none;
}

.about-hero-title,
.about-hero-text {
  position: relative;
  z-index: 1;
}

/*
  24px, not the 32 this page had: where the headline breaks is a copy
  decision taken in the admin, and at 24 its longest line still holds inside
  the card's 287px rather than wrapping into a fifth.
*/
.about-hero-title { font-size: 24px; line-height: 1.2; }
.about-hero-text { font-size: 14px; line-height: 1.48; }

/*
  Mirrored, so it faces the copy, as on the desktop. Hung from the card's
  bottom edge and 18px past it: the asset is cropped mid-body at its own
  foot, and that edge is what hides the cut. 150px of it show, which is the
  bottom band less its 2px of air.

  32px from the right, not 14: it is placed against the section, which runs
  the full 390, while the card is inset by the page's own 20px gutter - so
  the 32 is 12px inside the card, clear of its 24px radius.
*/
.about-hero-mascot {
  display: block;
  z-index: 2;
  left: auto;
  right: 32px;
  bottom: -18px;
  width: auto;
  height: 168px;
}

/* ---- Proč vzniklo Dverko ---- */
/* The bird no longer stands across the two, so they take the page's gap. */
.about-story { padding-top: 32px; }
.about-story-panel { padding: 24px; border-radius: 24px; }
.about-story-title { margin-bottom: 16px; font-size: 24px; }
.about-story-cols { gap: 16px; }
.about-story-cols p { font-size: 14px; line-height: 1.48; }

/* ---- The three tiles ---- */
.about-tiles { padding-top: 32px; }
.about-tiles-grid { gap: 16px; }
.about-tile { gap: 8px; padding: 24px; border-radius: 24px; }
.about-tile-title { font-size: 20px; line-height: 1.2; }
.about-tile-text { font-size: 14px; line-height: 1.48; }

/* ---- Poznejte náš tým ---- */
/*
  Two to a row. One card per row is how the desktop's 307px cell falls out at
  335, and four of them ran a screen and a half of mostly empty card; at two
  the whole team is one screenful. The card gets the tint the desktop leaves
  off - at half width it needs an edge of its own to read as a card - and the
  avatar stops being a 110px plate and becomes the card's own square.
*/
.about-team { padding: 32px 0 0; }

/* Left, like every other heading on the phone, rather than centred. */
.about-team-title {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.2;
  text-align: left;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-team-card {
  flex: none;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: var(--color-green-100);
}

.about-team-head { gap: 4px; }

/*
  The 110px plate becomes the card's own square. The portrait the admin
  uploads is taller than it is wide, and the plate is a flex box sized by its
  content, so at width:100% the photograph would set the height and the
  square would come out a rectangle: hence the block box with the ratio on it
  and the picture laid absolutely inside, which is the only arrangement where
  the ratio is what decides the height.
*/
.about-team-avatar {
  position: relative;
  display: block;
  width: 100%;
  /* 145 on a 390 screen, and the cap only bites on the wide ones - a landscape
     phone would otherwise give the photograph a 340px square to fill. */
  max-width: 168px;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-green-200);
}

.about-team-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.about-team-name { font-size: 15px; line-height: 1.2; }
.about-team-role { font-size: 12px; line-height: 1.3; }

/* Names wrap to two lines and roles do not, so the two cards in a row end at
   different heights; the row stretches them and the numbers stay in line. */
.about-team-links { margin-top: auto; gap: 2px; }
.about-team-links a { font-size: 12px; line-height: 1.35; }

/* ---- Jak nakupovat?, the calculator, the rail and the benefits ---- */
/*
  All four are shared blocks that carry their own phone rules; only the gaps
  between them are this page's, and the page had the desktop's 64.
*/
#about-faq.doors-faq { padding: 32px 0 0; }
#about-faq .doors-faq-title { margin-bottom: 20px; }

.about-calc { padding-top: 32px; }
.about-bestsellers { padding-top: 32px; }

/*
  The tinted panel behind the rail. Its width comes from a bleed formula built
  for the desktop, which at 390 leaves 4px of tint either side of the content
  - see .recently-viewed in section 3, which has the same panel and the same
  fix: full width, with the content on the page's own 20px gutter.
*/
.about-bestsellers > .container {
  max-width: none;
  padding: 24px 20px;
  border-radius: 32px;
}

/* The benefits bar carries its own 20px top padding wherever it is drawn, so
   the wrapper only adds the 12 that makes the page's 32. */
.about-usps { padding-top: 12px; }

/* =====================================================================
   12. DOPRAVA A PLATBA (/doprava-a-platba)
   =====================================================================

   docs/design/dap/dap.png is a 1920 frame and nothing else, so below 768 the
   page fell back to its own desktop breakpoints - and one of those was wrong
   on a phone: the advisor card still held its two channels side by side, a row
   that needs 154px more than a 390px screen has, so the e-mail and its badge
   ran 25px off the edge. That row is the page's own rule for its two-up
   desktop layout, and it outranks the phone layer's column on specificity
   rather than on order, so the column has to be said again in the same shape
   for it to take.

   Everything else here is the frame's own design, only sized for the screen.
   This page is prose - the frame draws it as prose, unboxed, and so does the
   phone. What it lacked was the air and the measure that make prose readable
   at 350px: a bigger name for the page, a hairline between one subject and
   the next instead of a box round each, and a line that is shorter and looser
   than the desktop's.
   ===================================================================== */

.shipping-title { margin-top: 18px; font-size: 32px; line-height: 1.2; }
.shipping-body { gap: 24px; margin-top: 24px; }

/* The heading sits close to its own copy; the gap that matters is the one
   between subjects, and that is the body's. */
.shipping-block { gap: 10px; }
.shipping-block h2 { font-size: 20px; line-height: 1.2; }

/*
  15px over 1.6, not the desktop's 18 over 1.48. A 350px column takes about
  eight words at 18px and the lines pack tight; a step down and a looser
  leading is what a phone reads comfortably.
*/
.shipping-block p { font-size: 15px; line-height: 1.6; }

/*
  A hairline where one subject ends and the next begins - the structure a box
  would give, without four panels stacked down the page. Only between the
  prose blocks: the gateway strip and the advisor cards are panels already and
  separate themselves.
*/
.shipping-block ~ .shipping-block {
  padding-top: 24px;
  border-top: 1px solid var(--color-green-200);
}

/*
  The gateway strip. Its green-50 is a tint against the hero's own gradient,
  which has faded to white by the time the strip appears - so on a phone it
  needs the next step up to read as the plate for the mark that it is.
*/
.shipping-provider {
  max-width: none;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: var(--color-green-100);
}

.shipping-provider-name { font-size: 15px; }
.shipping-provider-text { font-size: 13px; line-height: 1.48; }

/* ---- The two advisor cards ---- */
.shipping-contacts { gap: 16px; }

/* Section 6's own card, not the frame's larger desktop one - and the column
   the overflow above needs. */
.shipping-contacts .detail-advisor { gap: 16px; padding: 24px; }
.shipping-contacts .detail-advisor-copy { flex: 0 0 auto; max-width: none; }
.shipping-contacts .detail-advisor-contact { align-items: flex-start; gap: 10px; padding: 0; }

.shipping-contacts .detail-advisor-channels {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
}

.shipping-contacts .detail-advisor-channel a { font-size: 16px; }
.shipping-contacts .detail-advisor-badge { font-size: 13px; padding: 2px 6px; }
.shipping-contacts .detail-advisor-avatar { flex-basis: 44px; width: 44px; height: 44px; }
.shipping-contacts .detail-advisor-avatar img { width: 44px; height: 44px; border-radius: 18px; }

/* The benefits bar brings its own 20px, so this adds the 12 that makes 32. */
.shipping-usps { padding: 12px 0 0; }

/* =====================================================================
   13. KONTAKT (/kontakt)
   =====================================================================

   docs/design/Kontakt/kontakt.png is a 1920 frame, so below 768 the page fell
   back to its own desktop breakpoints - and two of those are measured in a
   way that only works on a wide screen:

     the hero's sage panel is drawn 1850 wide inside a 1920 page and widened
     to --panel-max on the live site, with the content column staying 1600.
     At 390 that formula leaves the panel 4px wider than the text it holds, so
     the panel stopped being a panel and became a 4px outline round the copy.
     The team's band behind the cards is built the same way and did the same.

     the team's cards are 307 wide, laid out auto-fit and centred. At 390 only
     one track fits, so four cards ran 1044px down the page - each one a 74px
     portrait and two short lines in a 249px box.

   Both are now what the phone frames do with a panel: it runs the page's own
   20px gutter and pads 24 inside, or it runs the full width of the screen with
   the content on the gutter. The team goes two to a row, as /o-nas does. The
   sections are 32px apart, the gap this page's neighbours settled on.
   ===================================================================== */

.contact-hero-wrap { padding-top: 12px; }

/*
  The panel becomes the card. No bleed: at this width the formula it is built
  from cannot produce one, and the panel wants to be the 335px card every
  other page's hero is - the gutter outside it, 24 of padding inside.
*/
.contact-hero-panel {
  margin-left: 0;
  margin-right: 0;
  padding: 24px;
  border-radius: 24px;
}

/*
  The frame's three arcs are struck from a 1850px panel; refitted here to the
  350px one, and only two of them - the third crosses the panel's bottom
  right, which on a phone is entirely behind the form.
*/
.contact-hero-panel::before {
  width: 660px;
  height: 660px;
  left: -370px;
  top: -270px;
}

.contact-hero-panel::after {
  width: 420px;
  height: 420px;
  right: -190px;
  top: -270px;
}

.contact-hero-arc { display: none; }

/* The copy and the form are two rows now, not two columns. */
.contact-hero-grid { gap: 24px; }

.contact-breadcrumb { font-size: 13px; }

/*
  24px, not the 27 the page had: the frame breaks this headline into three
  lines itself and the break is a copy decision, so the type has to be the
  size at which its longest line still holds inside the card's 302px.
*/
.contact-hero-title {
  margin: 16px 0 20px;
  max-width: none;
  font-size: 24px;
  line-height: 1.2;
}

.contact-pills { gap: 10px; margin-bottom: 20px; }
.contact-pill { min-width: 0; min-height: 68px; }
.contact-pill-avatar,
.contact-pill-avatar img { flex-basis: 52px; width: 52px; height: 52px; }
.contact-pill-value { font-size: 15px; }

/*
  A hairline rather than a second box: the company's own details are a
  different kind of thing from the two channels above them, and on the sage
  panel a light rule says so without another card inside a card.
*/
/* Stretched, because the copy column aligns its children to flex-start and
   this one would otherwise shrink to its own text - leaving the rule above it
   as a stub two thirds of the way across the card. */
.contact-identity {
  align-self: stretch;
  max-width: none;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.contact-identity-name { margin-bottom: 6px; font-size: 16px; }
.contact-identity-lines { font-size: 13px; line-height: 1.48; }

/* ---- The form, a pale card inside the sage one ---- */
.contact-form { gap: 12px; padding: 20px; border-radius: 20px; }
.contact-form-title { font-size: 18px; }
.contact-form-row { gap: 12px; }
.contact-field label { font-size: 13px; line-height: 20px; }
.contact-field input,
.contact-field textarea { padding: 12px 16px; border-radius: 14px; }
.contact-field input { height: 48px; }
.contact-field textarea { height: 112px; }
.contact-form-consent { font-size: 12px; line-height: 1.35; }
.contact-form-submit { height: 48px; border-radius: 14px; font-size: 15px; }

/* ---- Jak nakupovat? ---- */
/* The block already pads 32 top and bottom on a phone, which is this page's
   gap; only its heading is further from the questions than it needs to be. */
#kontakt-faq .doors-faq-title { margin-bottom: 20px; }

/* ---- Poznejte náš tým ---- */
/*
  24, not 32: the gap that reads is the one to the band's edge, and the FAQ
  above already pads 32 below itself. Inside the band the cards sit 24 from
  it, the same way the bestsellers band on /o-nas holds its heading.
*/
.contact-team { padding: 24px 0; }

/* The band, like the panel above it: the full width of the screen, with the
   cards on the page's own gutter. */
.contact-team::before {
  left: 0;
  width: 100%;
  transform: none;
  border-radius: 24px;
}

/* Left, like every other heading on the phone, rather than centred. */
.contact-team-title {
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.2;
  text-align: left;
}

/*
  Two to a row. One 307px card per row left each of them a 74px portrait and
  two short lines in a 249px box, and four of those is a screen and a half of
  mostly empty card.
*/
.contact-team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 12px;
}

.contact-team-card {
  min-height: 0;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
}

.contact-team-card-head { gap: 10px; }

/* The 74px tile down to 56, and the portrait in it from 58 to 44. */
.contact-team-avatar {
  flex-basis: 56px;
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 22px;
}

.contact-team-avatar img { width: 44px; height: 44px; border-radius: 16px; }

/* The presence dot follows the tile in. */
.contact-team-avatar--live::before { top: 5px; right: 0; width: 11px; height: 11px; }
.contact-team-avatar--live::after { top: 7px; right: 2px; width: 7px; height: 7px; }

.contact-team-name { font-size: 15px; }
.contact-team-role { font-size: 12px; line-height: 1.3; }

/*
  The card truncates its links with an ellipsis, which is right in a 307px
  cell and wrong in a 137px one: on the narrowest phones an address would be
  cut to "reklamace@dverk...". A wrapped address is longer; a cut one is not
  an address.
*/
.contact-team-links a {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  font-size: 12px;
  line-height: 1.5;
}

/* The benefits bar brings its own 20px, so this adds the 12 that makes 32. */
.contact-usps { padding: 12px 0 0; }

} /* ===== end of the phone layer ===== */