/* Caroloptic — child theme overrides.
   Loaded LAST, after custom.css, so equal-specificity rules win on source order.
   ⛔ Nothing in the default theme is edited. Reverting = switch config_theme back. */

/* ── 1.2a  The mobile hero collapsed to 60px ─────────────────────────────────
   custom.css sets `.imagslidehome { height: auto; padding: 30px 0; }` below
   991px. The div's only visual content is a BACKGROUND image, which contributes
   no height, and the inner text column is empty — so the box collapsed to its
   padding: 30 + 30 = exactly the 60px measured on a 390px screen.
   The banners are 1920x887 and 1672x941 (ratio ~0.46 and ~0.56), so give the box
   a real aspect ratio and let background-size:cover fill it. */
@media (max-width: 991px) {
  .imagslidehome {
    padding: 0;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    height: auto;
  }
}

/* ── 1.2b  The doctor and the booking, first on a phone ──────────────────────
   content_bottom renders 7 modules as direct children of #common-home. The
   clinic block sat at 34% of the page and the booking form at 57%, so neither
   was visible without scrolling. Reordered on phones only; desktop is untouched.
   The clinic block carries no class of its own, but it is always the element
   immediately before .imgprogramare, which is a stable handle even if the
   module order changes. If :has() is unsupported the clinic simply stays put —
   nothing breaks. */
@media (max-width: 991px) {
  #common-home { display: flex; flex-direction: column; }
  #common-home > *                            { order: 5; }
  #common-home > #content                     { order: 1; }  /* hero */
  #common-home > div:has(+ .imgprogramare)    { order: 2; }  /* clinic */
  #common-home > .imgprogramare               { order: 3; }  /* booking */
}

/* ── 1.2c  The booking form on a phone ───────────────────────────────────────
   Measured before: the page is 7.4 screens, the clinic block is 1.7 screens
   tall, and the booking form started at screen 2.0 — two full swipes. Ordering
   it after the clinic was not enough; the clinic is simply too long to sit in
   front of the thing that takes the money. The appointment book does roughly
   five times the volume of the webshop, so on a phone the form goes first and
   the clinic explainer follows it.
   The form itself was desktop type scaled down: a 26px title wrapping to three
   lines and 117px tall, an 18px sub-line over two more. */
@media (max-width: 991px) {
  #common-home > .imgprogramare            { order: 2; }  /* booking */
  #common-home > div:has(+ .imgprogramare) { order: 3; }  /* clinic  */

  .imgprogramare .titluboxprogramare {
    font-size: 19px;
    line-height: 1.25;
    padding: 0 8px;
  }
  .imgprogramare .discountboxprogramare {
    font-size: 14px;
    line-height: 1.35;
    padding: 0 8px;
  }
  .imgprogramare .titluinputprogramare {
    font-size: 13px;
    margin-bottom: 2px;
  }
  .imgprogramare .inputprogramare {
    font-size: 16px;   /* 16px stops iOS zooming the page on focus */
    height: 42px;
  }
  .imgprogramare .mtopinputprog { margin-top: 10px; }
  .imgprogramare .pb-4          { padding-bottom: 10px !important; }
}

/* ── 1.2d  The clinic block on a phone ───────────────────────────────────────
   Measured: the clinic section is 1.7 screens tall, and 1,334px of its 1,434px
   are two service boxes whose descriptions run 240px and 280px. Each already
   carries a "MAI MULTE DETALII" button, so the full text on the homepage is
   redundant with the link directly beneath it. Clamp to four lines on phones;
   desktop keeps the full copy. Nothing is removed — the button still goes to
   the page that has all of it. */
@media (max-width: 991px) {
  .descboxservicii {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Section eyebrows ran 26px on a 390px screen — the same size as the headline
     under them, so neither read as the heading. Measured selectors, not guessed:
     .upfeatured is "PRODUSE", .titluboxservicii is "SERVICII", .titlufooter is
     the footer column headings. */
  .upfeatured,
  .titluboxservicii { font-size: 19px; letter-spacing: .04em; }
  .titlufooter      { font-size: 17px; }
}

/* ── 1.2e  Section headings on a phone ───────────────────────────────────────
   Selectors measured in the rendered page, not guessed: .upfeatured is the
   "PRODUSE" eyebrow, .titluboxservicii is "SERVICII", .titlufooter is the
   footer column headings. All were 26px/24px on a 390px screen — the same size
   as the headline underneath, so neither read as the heading. */
@media (max-width: 991px) {
  .upfeatured        { font-size: 19px; line-height: 1.2; }
  .titluboxservicii  { font-size: 19px; margin-top: 12px; }
  .titlufooter       { font-size: 17px; }
}


/* [caroloptic] Gen + lens width chips, on the product card and beside the product
   name. Deliberately quiet: this is information a customer scans, not a badge.
   Sized so a card gains one line and no card changes height relative to another. */
.caro-spec{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;line-height:1}
.caro-chip{display:inline-block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:600;color:#3c3c3c;background:#f1efe9;border-radius:20px;padding:4px 10px;white-space:nowrap}
.caro-chip-dim{color:#6b6b6b;background:transparent;border:1px solid #e0ddd5;font-weight:500;
  text-transform:none;letter-spacing:0}
@media (max-width:575px){
  .caro-chip{font-size:10.5px;padding:3px 8px}
}