/* Phone catalogue: one compact row per product so all products stay visible with less scrolling. */
@media (max-width: 640px) {
  #productsGrid { gap: 10px !important; grid-template-columns: 1fr !important; }
  #productsGrid .product-card {
    display: grid !important; grid-template-columns: 84px 1fr; min-height: 0 !important;
    border-radius: 14px !important; transform: none !important; opacity: 1 !important;
  }
  #productsGrid .product-image.reference-cover { height: auto !important; min-height: 100%; padding: 10px 8px !important; }
  /* Cover cards: cover beside badge, title and description; price and buttons use the full
     width underneath, so no empty column is left below the cover. */
  #productsGrid .product-card:has(.product-cover) { grid-template-columns: 104px 1fr; grid-template-rows: auto auto 1fr auto; }
  #productsGrid .product-card:has(.product-cover) .product-content { display: contents !important; }
  #productsGrid .product-image.product-cover { grid-column: 1; grid-row: 1 / 4; width: 94px; margin: 12px 0 0 10px; align-self: start; border: 2px solid #090909 !important; border-radius: 10px; }
  #productsGrid .product-card:has(.product-cover) .bestseller-badge { grid-column: 2; grid-row: 1; justify-self: start; width: max-content; margin: 12px 12px 6px; }
  #productsGrid .product-card:has(.product-cover) .product-title { grid-column: 2; grid-row: 2; padding: 0 12px; margin-top: 12px !important; }
  #productsGrid .product-card:has(.bestseller-badge) .product-title { margin-top: 0 !important; }
  #productsGrid .product-card:has(.product-cover) .product-description { grid-column: 2; grid-row: 3; padding: 4px 12px 0; align-self: start; }
  #productsGrid .product-card:has(.product-cover) .product-footer { grid-column: 1 / -1; grid-row: 4; padding: 12px !important; margin: 0 !important; }
  #productsGrid .reference-cover-label { font-size: .62rem !important; line-height: 1.2; position: static !important; display: block; margin-top: 6px; }
  #productsGrid .reference-signal { font-size: 1.5rem !important; position: static !important; display: block; line-height: 1; }
  #productsGrid .bestseller-ribbon { position: static !important; display: inline-block; font-size: .55rem !important; padding: 2px 6px !important; margin-bottom: 6px; }
  #productsGrid .product-content { padding: 10px 12px !important; gap: 6px !important; }
  #productsGrid .product-title { font-size: .95rem !important; line-height: 1.25 !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.5em; }
  #productsGrid .product-title .share-btn, #productsGrid .product-reference-tag { display: none !important; }
  #productsGrid .product-description { font-size: .8rem !important; line-height: 1.4 !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0 !important; }
  #productsGrid .product-footer { margin-top: 2px !important; padding: 0 !important; gap: 6px !important; }
  #productsGrid .product-card-price-row { margin: 0 !important; font-size: .9rem; }
  #productsGrid .product-action-row { gap: 6px !important; }
  #productsGrid .product-action-row .btn, #productsGrid .cart-add-btn { min-height: 38px !important; height: 38px !important; padding: 0 12px !important; font-size: .82rem !important; }
  #productsGrid .cart-add-btn { width: 38px !important; }
}
/* Catalogue cover images (script.js getCardCoverSrc). */
#productsGrid .product-image.product-cover { height: auto !important; aspect-ratio: 1 / 1; padding: 0 !important; overflow: hidden; background: #F7F7F3 !important; border-bottom: 1px solid #D8D8D1; }
#productsGrid .product-image.product-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bestseller-badge { width: max-content; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-bottom: 8px; padding: 3px 9px; border: 1.5px solid #090909; border-radius: 999px; background: #FFCA3A; color: #090909; font: 700 12px/1.2 'JetBrains Mono', monospace; letter-spacing: .03em; text-transform: uppercase; }
/* Filtered-out products (script.js applyActiveProductFilter) stay hidden on every layout. */
#productsGrid .product-card[hidden] { display: none !important; }
.product-result-count { margin: 0 0 12px; font-size: .85rem; color: var(--text-muted, #666761); }
.product-result-count:empty { display: none; }
/* Blog and testimonials: first three shown, the rest one tap away (home-compact.js). */
.d2q-more-hidden { display: none !important; }
.d2q-more-wrap { text-align: center; margin: 22px 0 0; }

/* Hide the two floating buttons while the catalogue is on screen (class set in script.js), so they
   never cover a card's price or Buy Now button. They return as soon as the catalogue scrolls away. */
body.catalogue-in-view .d2q-tawk-launcher,
body.catalogue-in-view .d2q-adv-fab { opacity: 0 !important; pointer-events: none !important; }

/* Desktop and tablet: square covers made cards taller, so titles and descriptions are kept to
   two lines each (the full text is on the product page). */
@media (min-width: 641px) {
  #productsGrid .product-card:has(.product-cover) .product-title .share-btn { display: none !important; }
  #productsGrid .product-card:has(.product-cover) .product-title {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #productsGrid .product-card:has(.product-cover) .product-description {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0 !important;
  }
}


/* Wide screens: four cards per row with covers, five from 1440px, so the catalogue needs fewer
   rows. Five cards between 1200px and 1440px (a 1920px screen at 150% scaling is 1280px) were
   narrower than the +, share and Buy Now row, which ran past the card edge and cut Buy Now
   off. The small format tag is dropped on cover cards (the cover already names the format). */
@media (min-width: 1200px) {
  #productsGrid:has(.product-cover) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; }
  #productsGrid .product-card:has(.product-cover) .product-reference-tag { display: none !important; }
}
@media (min-width: 1440px) {
  #productsGrid:has(.product-cover) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
/* Complete Bundle: one full-width strip at the top of the catalogue (script.js COMPLETE_BUNDLE_ID). */
#productsGrid .product-card.bundle-strip { grid-column: 1 / -1; border: 2px solid #090909 !important; background: #FFFBEA !important; }
#productsGrid .bundle-strip .bundle-strip-badge { background: #090909; color: #FFCA3A; }
#productsGrid .bundle-strip .bundle-strip-value { margin: 6px 0 0; font-size: .9rem; color: #090909; }
#productsGrid .pack-badge { background: #fff; }
@media (max-width: 640px) {
  #productsGrid .bundle-strip .bundle-strip-value { grid-column: 1 / -1; grid-row: 4; padding: 8px 12px 0; margin: 0; font-size: .82rem; }
  #productsGrid .product-card.bundle-strip { grid-template-rows: auto auto 1fr auto auto; }
  #productsGrid .product-card.bundle-strip:has(.product-cover) .product-footer { grid-row: 5; }
}
@media (min-width: 641px) {
  #productsGrid .product-card.bundle-strip:not([hidden]) { display: grid !important; grid-template-columns: 280px 1fr; align-items: center; }
  /* The cover column runs the card's full height with the square cover centred in it, on
     the cover's own paper colour: no strip of card background under a shorter cover. */
  #productsGrid .bundle-strip .product-image.product-cover { width: 100%; align-self: stretch; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid #D8D8D1; }
  #productsGrid .bundle-strip .product-image.product-cover img { height: auto; aspect-ratio: 1 / 1; }
  #productsGrid .bundle-strip .product-content { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px !important; }
  #productsGrid .bundle-strip .product-title { -webkit-line-clamp: unset !important; max-height: none !important; font-size: 1.6rem !important; }
  #productsGrid .bundle-strip .product-description { -webkit-line-clamp: unset !important; max-height: none !important; max-width: 60ch; }
  #productsGrid .bundle-strip .product-footer { max-width: 520px; }
}
/* Wide screens: the strip is over 1100px wide, so price and buttons get their own column on
   the right (cover | details | buy box) instead of leaving that side of the card empty. */
@media (min-width: 1200px) {
  #productsGrid .bundle-strip .product-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: 36px; align-content: center; }
  #productsGrid .bundle-strip .product-content > * { grid-column: 1; }
  #productsGrid .bundle-strip .product-footer { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; align-content: center; max-width: none; margin: 0 !important; padding: 0 0 0 36px !important; border-left: 1px solid #E6DEC2; }
}

/* Homepage: links to every product page, folded away under the catalogue. */
body.d2q-launchzone .all-resources-list {
  margin-top: 18px;
}
body.d2q-launchzone .all-resources-list summary {
  display: inline-block;
  padding: 10px 2px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.d2q-launchzone .all-resources-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
body.d2q-launchzone .all-resources-list a {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-decoration: none;
  background: var(--lz-white, #fff);
  border: 1px solid var(--lz-line-strong, #c9c9c2);
  border-radius: 999px;
}
body.d2q-launchzone .all-resources-list a:hover {
  border-color: var(--lz-ink, #090909);
}