/* =====================================================================
   OPENING CALCULATOR
   ---------------------------------------------------------------------
   The calculator page and the shared calculator section.

   This file used to carry a palette of its own - a dark brown gradient
   shell (#221913 -> #3f3229), beige form panels (#f6efe6 / #eadfd2),
   terracotta accents and deep drop shadows - from before the storefront
   moved to the green / cream / orange ramps in app.css. It was the one
   page that read as a different site.

   Everything below is expressed in those tokens instead:

     the calculator shell   the sage panel treatment (green-500 -> 400)
                            that the homepage calculator banner and hero
                            card already use, so the calculator looks the
                            same wherever it appears
     the page hero          the muted panel (green-200 -> 300) that every
                            category listing opens with
     radii                  24px panels, 20px cards, 16px controls
     depth                  hairlines and fills, no drop shadows - the
                            design's own rule, enforced with
                            box-shadow:none!important in
                            storefront-export.css

   The shell is a light panel now, so the copy inside it is ink rather
   than white. The Bootstrap text-white utilities that used to be typed
   into the markup were removed with it: being !important, they would
   have survived this change and left invisible text.
   ===================================================================== */

.opening-calculator-section {
  scroll-margin-top: 120px;
}

.opening-calculator-section .section-head .eyebrow {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opening-calculator-section .section-head h2 {
  color: var(--color-dark);
}

/* ---------------------------------------------------------------------
   THE CALCULATOR SHELL
   Copy on the left over the sage fill, the form panel on the right.
   --------------------------------------------------------------------- */

.opening-calc-stage {
  position: relative;
}

.opening-calc-shell {
  position: relative;
  border-radius: var(--border-radius-panel);
  /* The horizontal (90deg) form the other sage panels use, not the vertical
     --gradient-sage token, which is the button fill. */
  background: linear-gradient(90deg, var(--color-green-500) 0%, var(--color-green-400) 100%);
  overflow: hidden;
  isolation: isolate;
}

/*
  The same decorative arcs the other sage panels carry (see the panel
  gradients block in storefront-export.css): oversized thin circles in
  white at low opacity, clipped by the panel. They are declared here
  rather than borrowed by adding .panel-sage to the markup, because that
  class also brings 44px of padding, which this two-column shell sets
  per column instead.
*/
.opening-calc-shell::before,
.opening-calc-shell::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  pointer-events: none;
}

.opening-calc-shell::before {
  width: 900px;
  height: 900px;
  left: -300px;
  top: -560px;
}

.opening-calc-shell::after {
  width: 1120px;
  height: 1120px;
  left: -420px;
  bottom: -740px;
}

/* Content above the arcs. */
.opening-calc-shell > * {
  position: relative;
  z-index: 1;
}

.opening-calc-copy {
  padding: 44px;
  color: var(--color-dark);
}

.opening-calc-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}

.opening-calc-copy p {
  color: var(--color-dark);
  font-size: 1rem;
  line-height: 1.6;
}

.opening-calc-copy .eyebrow {
  color: var(--color-green-800);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Brand chips: the .chip treatment from app.css ---- */
.opening-calc-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px;
}

.opening-calc-brands span {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-dark);
  font-size: 0.82rem;
  line-height: 1.3;
}

/* ---- Numbered steps ----
   .calc-points / .calc-point carry the geometry (storefront-export.css);
   only the colours the sage fill needs are set here. The numbered discs
   are the accent, which is the one place this panel uses orange. */
.opening-calc-copy .calc-point strong {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.opening-calc-copy .calc-point h5 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
}

.opening-calc-copy .calc-point p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-green-900);
}

/* ---- Closing note ---- */
/* ---- The standing notes ----
   Two of them now, stacked: what happens when several configurations match,
   and what happens after a calculation. The second was the form panel's
   resting text until it moved here, which is what lets the panel shrink to
   the height of the form.

   The stack owns the spacing, so the bubbles themselves carry no margin. It
   opens lower than the single note used to - there is more to read here, and
   the extra air keeps it off the copy above. */
.opening-calc-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 34px;
}

.opening-calc-note {
  display: flex;
  /* The mark sits against the middle of the note, however many lines it
     runs to, rather than against its first line. */
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-btn-l);
  background: rgba(255, 255, 255, 0.42);
  color: var(--color-dark);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* The round "i". Same idea as the configurator's info mark, but on the
   storefront's own accent rather than that one's blue, so it belongs to this
   page instead of looking borrowed from a browser dialog.

   It takes the same orange as the numbered discs in the copy above it - the
   accent gradient - so the two sets of round marks on this page match rather
   than being two different oranges. Black ink for the "i" and a black ring
   around it, which is what separates it from the bubble behind. */
.opening-calc-note-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid var(--color-ink, #20231c);
  border-radius: 50%;
  background: var(--gradient-primary, linear-gradient(180deg, #ef8739 0%, #f29e50 100%));
  color: var(--color-ink, #20231c);
  font-size: 0.86em;
}

.opening-calc-note-text {
  margin: 0;
  min-width: 0;
}

/* ---- The link across to the standalone page (homepage layout only) ---- */
.opening-calc-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--radius-btn-l);
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

.opening-calc-home-link:hover,
.opening-calc-home-link:focus-visible {
  background: var(--color-orange-600);
  color: var(--color-on-primary);
}

/* ---------------------------------------------------------------------
   THE FORM PANEL
   --------------------------------------------------------------------- */

.opening-calc-form {
  height: 100%;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.opening-calc-panel {
  width: 100%;
  padding: 28px;
  border-radius: var(--border-radius);
  background: var(--color-white);
}

.opening-calc-panel .eyebrow {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opening-calc-panel-title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}

.opening-calc-panel-text {
  margin-bottom: 18px;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.opening-calc-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--color-dark);
}

/* 52px tall and radius 12, matching .calc-input in storefront-export.css.
 *
 * Typed to the address box rather than to "input": the consent tick lives in
 * the same field now, and a checkbox stretched to 100% and 52px tall is the
 * giant grey slab it would otherwise become. */
.opening-calc-field input,
.opening-calc-panel .calc-email-field input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 15px 18px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-dark);
  font-family: inherit;
  font-size: 0.95rem;
}

.opening-calc-field input::placeholder,
.opening-calc-panel .calc-email-field input[type="text"]::placeholder {
  color: var(--color-muted);
}

.opening-calc-field input:focus,
.opening-calc-panel .calc-email-field input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
}

.opening-calc-field small {
  display: block;
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.opening-calc-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.opening-calc-actions .btn {
  min-height: 52px;
}

/* ---------------------------------------------------------------------
   RESULT / MESSAGE STATES
   --------------------------------------------------------------------- */

.opening-calc-results {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.opening-calc-result {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
}

.opening-calc-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.opening-calc-result-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark);
}

.opening-calc-result-sub {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.opening-calc-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-dark);
  font-size: 0.78rem;
  font-weight: 600;
}

.opening-calc-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.opening-calc-meta div {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-white);
}

.opening-calc-meta strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.opening-calc-meta span {
  color: var(--color-dark);
  font-weight: 600;
}

.opening-calc-empty,
.opening-calc-error {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-btn-l);
  font-size: 0.92rem;
  line-height: 1.5;
}

.opening-calc-empty {
  background: var(--color-bg-alt);
  color: var(--color-muted);
}

/* The one warm-red on the page. Kept off the orange ramp on purpose: the
   accent is what the submit button uses, so an error in the same family
   would read as another call to action. */
.opening-calc-error {
  background: rgba(179, 38, 30, 0.08);
  color: #b3261e;
}

/* ---------------------------------------------------------------------
   THE PAGE
   --------------------------------------------------------------------- */

/*
  The page had a radial orange wash over a beige gradient. It now uses the
  homepage's tint band: white at the top, settling into green-100.
*/
.opening-calculator-page {
  padding: 20px 0 0;
  /*
    White in, grey through the middle, white back out.

    It used to stop at the second stop, which left the band solid grey to its
    last pixel and then a straight horizontal edge against the white the body
    paints behind the footer. Fading out over the closing fifth ends the
    section where the eye already expects it to, and the benefits band below
    then sits on white the same way it does on every other page.
  */
  background: linear-gradient(
    180deg,
    #fff 0%,
    var(--color-green-100) 34%,
    var(--color-green-100) 80%,
    #fff 100%
  );
}

.opening-calculator-page .opening-calculator-section {
  /* The band already supplies the page's fill. */
  background: transparent;
  /* Tighter at both ends than it was. The hero and the calculator are one
     thought - read the promise, then use the thing - so 30px between them was
     reading as two separate blocks; and the closing gap to the benefits band
     is shared with that band's own 48px, which was more than enough between
     them without the 60px here as well. */
  padding: 14px 0 44px;
}

/* ---- Hero: the muted panel every listing opens with ---- */
.opening-calculator-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  gap: 32px;
  /* Start, not centre: centred in a 420px panel the breadcrumb sat 52px lower
     than the one on every category page, which is the only thing that made
     this page open differently from them. */
  align-items: start;
  border-radius: var(--border-radius-panel);
  background: linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%);
  overflow: hidden;

  /*
    Side bleed, the same one the category hero uses (see .listing-hero in
    shop/_group_listing_styles). The panel reaches out to --panel-max while
    the copy inside it stays flush with the page's 1600px content column, so
    only the green surface widens:

      panel  = min(--panel-max, 100vw - 2 * --panel-gap)
      column = min(1600px, 100vw - 2 * --page-gutter)
      bleed  = (panel - column) / 2

    This page used to draw the panel at the column width, which made it the
    one hero on the site narrower than the rest.
  */
  --calc-panel-bleed: max(0px, calc((min(var(--panel-max), 100vw - 2 * var(--panel-gap)) - min(1600px, 100vw - 2 * var(--page-gutter))) / 2));
  margin-left: calc(-1 * var(--calc-panel-bleed));
  margin-right: calc(-1 * var(--calc-panel-bleed));
  /* Longhands on purpose: a var() inside the `padding` shorthand is resolved
     at computed-value time and Chrome drops the horizontal component, which
     silently leaves the copy sitting on the panel edge. */
  padding-top: 52px;
  padding-bottom: 52px;
  padding-left: var(--calc-panel-bleed);
  padding-right: var(--calc-panel-bleed);
}

/*
  The arcs the rest of the storefront draws behind its panels - two oversized
  thin circles clipped by the panel edge, as on the category hero. A touch
  heavier here than there: this panel carries only a heading and a chip, so
  there is room for them to be seen rather than merely sensed.
*/
.opening-calculator-hero::before,
.opening-calculator-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 2px solid rgba(177, 180, 170, 0.6);
  border-radius: 50%;
  pointer-events: none;
}
.opening-calculator-hero::before {
  width: 1180px;
  height: 1180px;
  left: -260px;
  top: -820px;
}
.opening-calculator-hero::after {
  width: 1460px;
  height: 1460px;
  right: -420px;
  top: -1010px;
}

/* Everything in the panel sits above the arcs. */
.opening-calculator-hero-copy,
.opening-calculator-hero-media {
  position: relative;
  z-index: 1;
}

/* Same measurements as the category hero's breadcrumb, so the two pages open
   on the same line in the same place. */
.opening-calculator-hero-breadcrumb {
  margin-bottom: 30px;
  padding: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

.opening-calculator-hero-breadcrumb .breadcrumb-item a {
  color: var(--color-dark);
  text-decoration: none;
}

.opening-calculator-hero-breadcrumb .breadcrumb-item.active {
  color: var(--color-green-500);
}

/*
  The page's name, and now the largest thing on the panel. It runs a little
  above the category hero's 42px because the word is short and the panel is
  otherwise sparse - a heading of one word at listing size reads as a label.
*/
.opening-calculator-hero-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-dark);
}

/*
  "Správné dveře za 30 sekund" - the claim that used to be the heading.

  A chip rather than another line of text: it has to read as a promise the
  page is making, which a paragraph in the same colour as the intro under it
  would not. The white fill is what lifts it off the sage panel, and the
  stopwatch says which part of the sentence is the point.
*/
.opening-calculator-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.opening-calculator-hero-kicker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-green-100);
  color: var(--color-green-700);
  font-size: 1.05rem;
}

.opening-calculator-hero-intro {
  margin: 0;
  max-width: 56ch;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-dark);
}

.opening-calculator-hero-media {
  justify-self: end;
  align-self: center;
  max-width: 100%;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.opening-calculator-hero-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
}

/* ---- Mascot: leaning on the shell's top edge ---- */
.opening-calc-mascot {
  display: none;
}

.opening-calculator-section--page .opening-calc-stage {
  padding-top: 74px;
  overflow: visible;
}

.opening-calculator-section--page .opening-calc-mascot {
  position: absolute;
  z-index: 5;
  top: -200px;
  left: 34%;
  width: 350px;
  transform: translateX(-50%);
  pointer-events: none;
}

.opening-calculator-section--page .opening-calc-mascot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.opening-calculator-section--page .opening-calc-copy {
  padding-bottom: 32px;
}

/* The page hero carries the image; the shell's own copy of it would be
   the same picture twice. */
.opening-calculator-section--page .opening-calc-image-card {
  display: none;
}

/* ---- Homepage layout of the shared section ---- */
.opening-calculator-section--home .opening-calc-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.opening-calculator-section--home .opening-calc-copy h2,
.opening-calculator-section--home .opening-calc-brands {
  margin-bottom: 0;
}

.opening-calc-image-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.opening-calc-image-card img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .opening-calculator-section--page .opening-calc-mascot {
    top: -150px;
    left: 31%;
    width: 260px;
  }
}

@media (max-width: 991px) {
  .opening-calculator-hero {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .opening-calculator-hero-media {
    justify-self: stretch;
    width: 100%;
  }

  .opening-calculator-hero-media img {
    width: 100%;
  }

  .opening-calc-copy,
  .opening-calc-form {
    padding: 30px;
  }

  .opening-calc-form {
    justify-content: flex-start;
    /* The copy above already ends on the sage fill; a second block of it
       between the two would double the gap. */
    padding-top: 0;
  }

  .opening-calculator-section--page .opening-calc-stage {
    padding-top: 54px;
  }

  .opening-calculator-section--page .opening-calc-mascot {
    top: -140px;
    left: auto;
    right: 24px;
    width: 220px;
    transform: none;
  }

  .opening-calc-image-card {
    width: 100%;
  }

  .opening-calc-image-card img {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .opening-calculator-hero,
  .opening-calc-copy,
  .opening-calc-form {
    padding: 22px;
  }

  .opening-calc-form {
    padding-top: 0;
  }

  .opening-calc-panel {
    padding: 20px;
  }

  .opening-calc-meta {
    grid-template-columns: 1fr;
  }

  /* Below this the mascot has no room left beside the heading. */
  .opening-calculator-section--page .opening-calc-mascot {
    display: none;
  }

  .opening-calculator-section--page .opening-calc-stage {
    padding-top: 0;
  }
}