/*
 * Product-compare feature -- shared between the product detail page's "Product variants" tab
 * (con_products Family/Show.html -> Show/Tab/ProductVariants.html -> Show/Article.html for each
 * listed variant), the standalone Compare page (Compare/Show.html), and the "add to compare"
 * button reused on product-listing cards (List/Item.html, used by Family/List.html and
 * Accessories.html). Combines TWO source files that split this one feature's CSS:
 * Scss/Content/_products.scss (".product_module_compare"/".card button.add-to-compare") and
 * Scss/Extensions/_product_compare.scss
 * ("#compareStatus" -- moved to its own compare-status.css instead, see that file --
 * ".product_module_compare"'s table/compare-grid styling, "#conpareTable",
 * ".compareTable__actions", ".goToProductDetail"). ".product_module_compare" itself was defined
 * piecemeal in both files; merged here into one place.
 *
 * Dropped as dead code (confirmed no live consumer):
 * - ".product_compare_box" (was nested inside ".product_module_compare", @extend-ing
 *   ".tb_element"/".background-gray") -- zero template matches anywhere in con_products.
 *
 * ".article" (variant cards) moved to product-detail.css (CON-1238 facelift); "#results_found" is now part of the filter bar (product-filter.css).
 *
 * ".tab-content .row { margin: 0; }" (Accessories.html's Bootstrap-native data-toggle="tab" tabs,
 * a third, still-unmigrated tab system distinct from ".product-tabs" and the jQuery UI trio, see
 * the Phase 5 tabs-migration commit) stays behind in Scss/Content/_products.scss on purpose --
 * that file survives in trimmed form, same pattern as _tables.scss/_scaffolding.scss.
 */
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
@layer organisms {
  .product_module_compare table td {
    vertical-align: top;
  }
  .product_module_compare table tbody td {
    padding: 10px;
  }
  .product_module_compare table tbody label {
    font-weight: bold;
    min-width: 150px;
    margin: 0;
  }
  .product_module_compare table tbody tr:nth-child(even) {
    background-color: transparent;
  }
  .product_module_compare table tbody tr {
    border-bottom: 1px solid var(--shade-grey-070);
  }
  .product_module_compare table tbody a,
  .product_module_compare table tbody button {
    width: 100%;
  }
  .product_module_compare table tbody h3 {
    margin: 0;
  }
  .product_module_compare table tbody .image-col div {
    margin-top: 15px;
  }
  .product_module_compare table tbody .add-to-compare {
    font-size: 0.8em;
  }
  .product_module_compare .center {
    text-align: center;
  }
  /* Icon-only in Ruhe, klappt bei Hover/Focus zu einer Pille mit Label auf. Zwei Flex-Kinder:
     ".add-to-compare__icon" ist eine fixe Box (Icon zentriert sich nie neu), das Label ist das
     einzige, das waechst -- Button-Breite wird nie direkt animiert, nur das Label-Element
     (siehe "max-width"-Transition unten). */
  .card button.add-to-compare {
    --add-to-compare-icon-size: 48px; /* live gegen Figma 54x48 abstimmen */
    --add-to-compare-glyph-size: 24px; /* live gegen Figma 24x24 abstimmen */
    display: flex;
    align-items: center;
    margin: auto;
    position: absolute;
    inset: var(--padding-s) var(--padding-m) auto auto;
    /* Ruhezustand: nur Icon, kein sichtbarer Hintergrund -- neutralisiert .btn's
       atoms-Layer-Pille (Hintergrund/Farbe/Padding/Radius) explizit statt implizit. */
    background: transparent;
    color: var(--body-text-color);
    padding: 0;
    border-radius: 50%;
    transition: all 350ms ease; /* bewusst langsamer als sitewide 250ms (button.scss %btn-shape) */
  }
  /* Stabile, eckige Hit-Area: border-radius (50% -> 12px) und Box-Groesse aendern sich beim Hover, die
     Ecken des Kreises sind in Ruhe nicht "hoverbar" -- Maus an Rand/Ecke flackerte sonst zwischen beiden. */
  .card button.add-to-compare::before {
    content: "";
    position: absolute;
    inset: -8px;
  }
  /* Aktiver Status (Artikel schon im Vergleich, Klasse setzt product-compare.js) und Hover/Focus-
     Preview teilen sich die SVG-Farbe. Die negativen Icon-Margins gleichen nur das Pill-Padding
     bei Hover/Focus aus -- im Ruhezustand wuerden sie das Icon verschieben. */
  .card button.add-to-compare:hover .add-to-compare__icon,
  .card button.add-to-compare:focus-visible .add-to-compare__icon {
    margin-left: -22px;
    margin-block: -8px;
  }
  .add-to-compare.active-add-to-compare svg,
  .card button.add-to-compare:hover svg,
  .card button.add-to-compare:focus-visible svg {
    color: var(--shade-white);
  }
  .add-to-compare.active-add-to-compare svg .hexagon,
  .card button.add-to-compare:hover svg .hexagon,
  .card button.add-to-compare:focus-visible svg .hexagon {
    stroke: var(--color-primary-orange);
    fill: var(--color-primary-orange);
  }
  .add-to-compare__icon {
    display: grid;
    place-items: center;
    flex: none; /* fixe Groesse -- waechst/schrumpft nie mit */
    order: 1;
    width: var(--add-to-compare-icon-size);
    height: var(--add-to-compare-icon-size);
    transition: margin 350ms ease; /* synchron zum Button-Padding, sonst schrumpft die Hover-Box im ersten Frame */
  }
  .card button.add-to-compare:hover,
  .card button.add-to-compare:focus-visible {
    background: var(--color-primary-orange);
    color: var(--shade-white);
    padding: var(--padding-button-t-b) var(--padding-button-l-r);
    border-radius: var(--border-radius-button);
  }
  .card button.add-to-compare > span:not(.add-to-compare__icon) {
    order: 2;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 350ms ease, opacity 200ms ease, margin-left 350ms ease;
  }
  .card button.add-to-compare:hover > span:not(.add-to-compare__icon),
  .card button.add-to-compare:focus-visible > span:not(.add-to-compare__icon) {
    max-width: 200px; /* live gegen laengste Uebersetzung aller 11 Sprachen abstimmen */
    opacity: 1;
  }
  /*
   * Compare page (Compare/Show.html), Figma "Compare" 3652:29549. One grid: product heads, then per
   * attribute a full-width label with rule and one value cell per product. Columns are at least
   * 312px (19.5rem) wide, so more than ~4 products scroll horizontally inside .compare__scroll.
   * --compare-cols is set in the template and kept in sync by product-compare.js on removal.
   */
  /*
   * Head row lives in its own bar (.compare__bar) above the scroller: a vertical "sticky" inside an
   * overflow-x scroller would never stick to the viewport. product-compare.js mirrors the scroller's
   * scrollLeft onto the bar. Both grids share --compare-cols (set on .compare).
   */
  :is(.compare__sticky, .compare__scroll) {
    margin-inline-end: calc((100% - 100vw) / 2);
  }
  html:has(.compare__sticky) {
    overflow-anchor: none;
  }
  .compare__sentinel {
    height: 1px;
    margin-block: var(--gap-xxl) -1px;
  }
  .compare {
    container-type: inline-size;
    --compare-header-offset: 71px;
  }
  @media (min-width: 1200px) {
    .compare {
      --compare-header-offset: var(--sticky-header-height);
    }
  }
  .compare__sticky {
    position: sticky;
    top: calc(var(--compare-header-offset) + var(--gap-s));
    z-index: 2;
    background: var(--shade-white);
  }
  .compare__sticky.-stuck::before {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--compare-header-offset) + var(--gap-s))) 0 100%;
    background: var(--shade-white);
  }
  .compare__bar {
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--shade-white);
  }
  .compare__bar::-webkit-scrollbar {
    display: none;
  }
  .compare__bar .compare__grid {
    padding-bottom: var(--gap-m);
  }
  .compare__scrollbar {
    height: 0.5rem;
    margin-bottom: var(--gap-s);
    margin-inline-end: min(1.5rem, (100vw - 100cqw) / 2);
    border-radius: 0.25rem;
    background: var(--shade-grey-100);
    touch-action: none;
    cursor: pointer;
  }
  .compare__scrollbar[hidden] {
    display: none;
  }
  .compare__thumb {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary-orange);
    cursor: grab;
  }
  .compare__thumb:active {
    cursor: grabbing;
  }
  .compare__scroll {
    overflow-x: auto;
    scrollbar-width: none;
    container-type: inline-size;
  }
  .compare__scroll::-webkit-scrollbar {
    display: none;
  }
  .compare__grid {
    display: grid;
    grid-template-columns: repeat(var(--compare-cols, 1), minmax(19.5rem, 1fr));
    column-gap: var(--grid-gutter-default);
    min-width: calc(var(--compare-cols, 1) * 19.5rem + (var(--compare-cols, 1) - 1) * var(--grid-gutter-default));
  }
  .compare__scroll .compare__grid {
    padding-bottom: var(--gap-xxl);
  }
  .compare__head {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
  }
  .compare__head img {
    width: 11.6875rem;
    height: 11.6875rem;
    object-fit: contain;
    object-position: left center;
    transition: width var(--motion-base) var(--motion-ease), height var(--motion-base) var(--motion-ease);
  }
  .compare__sticky.-stuck .compare__head img {
    width: 6.25rem;
    height: 6.25rem;
  }
  .compare__sticky.-stuck .compare__actions {
    padding-top: var(--button-gap-xs);
  }
  .compare__title {
    margin: 0;
  }
  .compare__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--motion-base) var(--motion-ease);
  }
  .compare__title a:hover, .compare__title a:focus-visible {
    color: var(--color-primary-orange);
  }
  .compare__actions {
    display: flex;
    align-items: center;
    gap: var(--button-gap-xs);
    margin-top: auto;
    padding-top: var(--button-gap-default);
    transition: padding-top var(--motion-base) var(--motion-ease);
  }
  .compare__remove {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--body-text-color);
    font-family: "lucide";
    font-size: 24px;
    cursor: pointer;
    transition: color var(--motion-base) var(--motion-ease);
  }
  .compare__remove::before {
    content: "\e18e";
  }
  .compare__remove:hover, .compare__remove:focus-visible {
    color: var(--color-primary-orange);
  }
  .compare__group {
    display: contents;
  }
  .compare__label {
    grid-column: 1/-1;
    justify-self: start;
    position: sticky;
    left: 0;
    width: 100cqw;
    margin-top: var(--gap-xxl);
    margin-bottom: var(--gap-m);
    padding-bottom: var(--gap-m);
    border-bottom: var(--border-default-width) solid var(--shade-grey-100);
  }
  .compare__cell {
    min-width: 0;
  }
  .compare__foot {
    margin-top: var(--gap-xxl);
  }
}