/* 2026-10-02 - AdOptimize - Sinan - eu-guarantee-labels - warranty label at the foot of the description

   Loaded by includes/extra/header/header_head/ado_guarantee_notice.php, on the product detail
   page only. Not part of tpl_plugins.min.css: that file is generated and would drop these rules
   on the next build.

   HOW IT GOT HERE, so nobody "tidies it up" back:
   - first version sat between price and buy button, framed in 2px blue, sheet half the viewport
     high. Sinan, 02.10.2026: "Auffälliger geht es nicht?"
   - then below the whole tab block, borderless. Sinan: "Das sieht noch zu billig aus."
   - now at the foot of the product description, as a proper figure beside its text.

   The one thing that must not be undone: the sheet stands OPEN. Our reading of the
   Hinweisblätter is that the warranty label may not hide behind a link, a mouseover or an
   accordion, so it may be made quiet and small, but never click-to-reveal.
   See report.md, open point 0. */

.ado-guarantee-notice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 28px 0 0 0;
  padding: 18px 0 0 0;
  /* a hairline instead of a box: it separates the notice from the description text without
     turning it into a warning panel */
  border-top: 1px solid #e5e5e5;
  text-align: left;
}

/* The sheet is A4 portrait and sits as a figure to the left of its text. Fixed width rather
   than a share of the column, so it looks the same whatever the description does.

   300px is the size Sinan settled on: at 150px the headline of the sheet was no longer
   readable, which defeats the point of showing it open at all. At 300px the sheet is about
   424px tall - that is the one number to turn if the balance has to change again. */
.ado-guarantee-notice__sheet {
  flex: 0 0 auto;
  display: block;
  width: 300px;
  height: auto;
}

/* the text column beside it */
.ado-guarantee-notice__title {
  margin: 0 0 6px 0;
  font-weight: 700;
}

.ado-guarantee-notice__text {
  margin: 0 0 8px 0;
}

.ado-guarantee-notice__link {
  display: inline-block;
}

/* Source order is title, text, sheet, link - the sheet has to move to the left of the text, and
   the heading has to stay on top of its own column. Grid does that without touching the markup:
   one narrow column for the sheet, one for everything else. */
@supports (display: grid) {
  .ado-guarantee-notice {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas:
      "sheet title"
      "sheet text"
      "sheet link";
    align-content: start;
    justify-content: start;
  }

  .ado-guarantee-notice__sheet  { grid-area: sheet; align-self: start; }
  .ado-guarantee-notice__title  { grid-area: title; }
  .ado-guarantee-notice__text   { grid-area: text; }
  .ado-guarantee-notice__link   { grid-area: link; align-self: start; }
}

/* On a phone the two columns do not fit. Stacked, and the sheet gets more width because it is
   the thing to be read. This block comes after the @supports rules above, so it wins on equal
   specificity without !important. */
@media (max-width: 767px) {
  .ado-guarantee-notice {
    display: block;
  }

  .ado-guarantee-notice__sheet {
    width: 100%;
    max-width: 320px;
    margin: 12px 0 0 0;
  }
}