/* DICHANA v2.2.62 — scalable three-column product library inspired by the approved reference. */

/* Every selected CMS product flows into a predictable two-card row. */
@media (min-width: 761px) {
  body.product-library-card-detail-v8557 .product-concept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Large desktop: category | form/type | products.
   The two selector columns remain available while any number of product rows
   continues down the page in the results column. */
@media (min-width: 1281px) {
  body.product-library-ux-v8559 .product-library-shell {
    grid-template-columns: minmax(218px, 252px) minmax(0, 1fr);
    gap: clamp(18px, 1.8vw, 28px);
  }

  body.product-library-ux-v8559 .product-library-results {
    position: relative;
    display: grid;
    grid-template-columns: minmax(330px, .78fr) minmax(560px, 1.22fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(18px, 1.7vw, 28px);
  }

  body.product-library-ux-v8559 .product-selection-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.product-library-ux-v8559 .product-choice-panel {
    position: sticky;
    top: 108px;
    grid-column: 1;
    grid-row: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-self: start;
    margin: 0;
    padding: 17px 18px;
  }

  body.product-library-ux-v8559 .product-choice-section + .product-choice-section {
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid rgba(216, 224, 235, .82);
    border-left: 0;
  }

  body.product-library-ux-v8559 .product-group-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.product-library-ux-v8559 .product-results-header.product-results-header-compact {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    column-gap: clamp(10px, 1vw, 16px);
    min-width: 0;
    min-height: 86px;
    padding: 4px 3px 13px;
  }

  body.product-library-ux-v8559 .product-results-header-compact .product-results-current {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    min-width: 0;
    max-width: none;
  }

  body.product-library-ux-v8559 .product-results-header-compact .product-results-eyebrow {
    align-self: start;
    padding-top: 6px;
    white-space: nowrap;
  }

  body.product-library-ux-v8559 .product-results-header.product-results-header-compact .product-results-current h2 {
    min-width: 0;
    max-width: none;
    margin: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
  }

  body.product-library-ux-v8559 .product-results-header.product-results-header-compact .product-result-count {
    align-self: start;
    justify-self: end;
    min-width: max-content;
    white-space: nowrap;
  }

  body.product-library-ux-v8559 .product-concept-grid {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.35vw, 20px);
  }

  body.product-library-ux-v8559 .product-noscript,
  body.product-library-ux-v8559 .product-load-more {
    grid-column: 2;
  }

  body.product-library-ux-v8559 .product-concept-body {
    min-height: 0;
    padding: 15px 16px 17px;
  }

  body.product-library-ux-v8559 .product-concept-body h3 {
    min-height: 0;
    margin: 10px 0 6px;
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  body.product-library-ux-v8559 .product-card-type,
  body.product-library-ux-v8559 .product-card-ingredients {
    display: none;
  }

  body.product-library-ux-v8559 .product-card-focus {
    min-height: 0;
    font-size: 11px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
  }

  body.product-library-ux-v8559 .product-card-detail-link {
    padding-top: 10px;
    font-size: 10.5px;
  }
}

/* Tablet and mobile return to the established stacked selector flow. */
@media (max-width: 1280px) {
  body.product-library-ux-v8559 .product-library-results {
    display: block;
  }
}

@media (max-width: 760px) {
  body.product-library-card-detail-v8557 .product-concept-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}