/* Product archives only (shop front, categories, product search): category tiles and
   navigation disclosure, shop-front hero and help block, archive pagination, phone layout.
   Loaded after shop.css. */

/* Native Bricks archive pagination keeps usable targets as page counts grow. */
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .brxe-pagination :is(a, span).page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
}
body:is(.post-type-archive-product, .tax-product_cat, .tax-product_tag) .brxe-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dino-cat-tiles { margin-bottom: 8px; }

/* USP strip and engine banner: shop-promo.css (also used on the Reservedele landing page). */
/* ---------------------------------------------------------------------------
 * Shop front hero: the archive header section (title, breadcrumb, intro, search)
 * on the first shop page only (body.dino-shop-front). Decorative images via CSS.
 * ------------------------------------------------------------------------- */
body.dino-shop-front #brxe-02de2e {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 72px 80px;
  background: var(--dino-ink, #080909);
  color: var(--dino-white, #fff);
}
body.dino-shop-front #brxe-02de2e::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(8 9 9 / 94%) 0%, rgb(8 9 9 / 84%) 48%, rgb(8 9 9 / 40%) 100%);
}
body.dino-shop-front #brxe-02de2e::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(16px, calc(50% - 640px));
  bottom: 24px;
  width: min(40vw, 540px);
  aspect-ratio: 612 / 408;
  filter: drop-shadow(0 24px 30px rgb(0 0 0 / 45%));
}
/* The photo: <img class="dino-hero-backdrop" fetchpriority=high> from [dino_shop_hero_backdrop]
   (same files and pattern as the brochure heroes); the gradient ::before sits above it. */
body.dino-shop-front #brxe-02de2e img.dino-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.dino-shop-front #brxe-02de2e > .brxe-container > * { max-width: 600px; }
body.dino-shop-front #brxe-02de2e h1 { color: inherit; font-size: var(--dino-h1-page); line-height: var(--dino-h1-lh); }
/* Dark band on the shop front only (the section is light on category pages): the .dino-dark focus tokens. */
body.dino-shop-front #brxe-02de2e { --dino-focus-ring: var(--dino-white, #fff); --dino-focus-halo: var(--dino-ink, #080909); }
body.dino-shop-front #brxe-02de2e :is(.brxe-woocommerce-breadcrumbs, .brxe-woocommerce-breadcrumbs *, .woocommerce-breadcrumb, .woocommerce-breadcrumb a, p) { color: #e3e5e5; }
body.dino-shop-front #brxe-02de2e #brxe-sintro { font-size: 18px; }
body.dino-shop-front #brxe-02de2e .dino-shop-search label { color: var(--dino-white, #fff); }
body.dino-shop-front #brxe-02de2e .dino-shop-search input[type=search] { border-color: var(--dino-white, #fff); }
@media (max-width: 991px) {
  body.dino-shop-front #brxe-02de2e { padding-block: 48px 56px; }
  body.dino-shop-front #brxe-02de2e::before { background: linear-gradient(180deg, rgb(8 9 9 / 90%), rgb(8 9 9 / 82%)); }
  /* Decorative cutout only where it sits beside the text (not downloaded on smaller screens). */
  body.dino-shop-front #brxe-02de2e::after { content: none; }
}
/* The cutout image only where it is shown (no request on smaller screens). */
@media (min-width: 992px) {
  body.dino-shop-front #brxe-02de2e::after { background: url("odin.webp") center / contain no-repeat; }
}

/* Sidebar heading: a card title, like the cart totals heading. */
#brx-content .dino-shop-sidebar > h2.brxe-heading { font-size: var(--dino-card-title); font-weight: var(--dino-card-title-weight); line-height: var(--dino-card-title-lh); }
/* Sidebar help link: 44px tap height. */
.dino-shop-sidebar > .brxe-text-link { display: inline-flex; align-items: center; min-height: var(--dino-tap); }

/* Front: larger top-category tiles. */
.dino-cat-tiles--front ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.dino-cat-tiles--front .dino-cat-tile-media { aspect-ratio: 4 / 3; padding: 12px; }
.dino-cat-tiles--front .dino-cat-tile-name { padding: 16px 18px 2px; font-size: 18px; }
.dino-cat-tiles--front .dino-cat-tile-count { padding: 0 18px 16px; font-size: var(--dino-small); }

/* ---------------------------------------------------------------------------
 * Category navigation disclosure. Wide screens: always open, the sidebar heading
 * names it and the summary is hidden. Below 992px: a "Categories" toggle.
 * ------------------------------------------------------------------------- */
.dino-catnav > summary { display: none; }
@media (max-width: 991px) {
  .dino-shop-sidebar { padding: 0; background: none; }
  .dino-shop-sidebar > .brxe-heading { display: none; }
  .dino-shop-sidebar > .brxe-text-link { padding: 0; font-size: var(--dino-body); }
  .dino-catnav { border: var(--dino-input-border); border-radius: var(--dino-radius); background: var(--dino-surface, #f3f4f4); }
  .dino-catnav > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .dino-catnav > summary::-webkit-details-marker { display: none; }
  .dino-catnav > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
  }
  .dino-catnav[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .dino-catnav-current { overflow: hidden; color: var(--dino-muted, #555b60); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
  .dino-catnav-current::before { content: "· "; }
  .dino-catnav .dino-category-navigation { padding: 0 16px 12px; border-top: 1px solid var(--dino-line, #dadddd); }
  .dino-catnav .dino-category-navigation > ul { display: block; }
  .dino-catnav .dino-category-navigation a { display: block; padding-block: 10px; }
}

/* Phones: category tiles (shop front and subcategories) as one swipeable row, so the
   products start near the top. */
@media (max-width: 767px) {
  .dino-cat-tiles ul {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 2px 2px 12px;
    margin-inline: -2px;
  }
  .dino-cat-tiles li { flex: 0 0 136px; scroll-snap-align: start; }
  .dino-cat-tiles--front li { flex-basis: 152px; }
  .dino-cat-tiles .dino-cat-tile-media { aspect-ratio: 4 / 3; padding: 6px; }
  .dino-cat-tiles .dino-cat-tile-name { padding: 10px 10px 2px; font-size: var(--dino-body); }
  .dino-cat-tiles .dino-cat-tile-count { padding: 0 10px 10px; font-size: var(--dino-small); }
}

/* Shop front: help and trust block. */
.dino-shop-help { padding: 0 40px 80px; }
.dino-shop-help-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
.dino-shop-help-card { padding: 32px; border-radius: var(--dino-card-radius); }
.dino-shop-help-card h2 { margin: 0 0 12px; color: inherit; }
.dino-shop-help-card p { margin: 0 0 16px; }
.dino-shop-help-card ul { margin: 0; padding: 0; list-style: none; }
.dino-shop-help-contact { background: var(--dino-ink, #080909); color: var(--dino-white, #fff); }
.dino-shop-help-contact p { color: #d5d8d8; }
.dino-shop-help-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 12px !important; }
.dino-shop-help-links a { display: inline-block; padding-block: 8px; color: var(--dino-white, #fff); font-size: 22px; font-weight: 600; text-decoration: none; }
.dino-shop-help-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dino-shop-help-hours { font-size: 16px; }
/* .dino-shop-help-more is a .dino-button; the contact card is a .dino-dark band. */
.dino-shop-help-trust { border: 1px solid var(--dino-line, #dadddd); background: var(--dino-surface, #f3f4f4); }
.dino-shop-help-trust li { display: flex; align-items: flex-start; gap: 12px; padding-block: 8px; }
.dino-shop-help-trust svg { flex: 0 0 auto; margin-top: 3px; color: var(--dino-red, #c00); }
.dino-shop-help-trust a { color: var(--dino-ink, #080909); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 991px) {
  .dino-shop-help { padding: 0 24px 56px; }
  .dino-shop-help-inner { grid-template-columns: 1fr; }
}
@media (max-width: 478px) {
  .dino-shop-help { padding: 0 20px 48px; }
  .dino-shop-help-card { padding: 24px 20px; }
  .dino-shop-help-links a { font-size: 20px; }
}

/* Phones: keep the catalogue near the top. */
@media (max-width: 767px) {
  .dino-shop-sidebar > .brxe-text-link { margin-top: 0 !important; }
  /* Result count and sorting on one row. */
  .brxe-container:has(> .brxe-woocommerce-products-orderby) { flex-flow: row wrap; align-items: center; gap: 8px 16px; }
  .brxe-woocommerce-products-total-results { flex: 1 1 auto; margin: 0 !important; }
  .brxe-woocommerce-products-total-results .woocommerce-result-count { margin: 0; padding: 0; font-size: var(--dino-small); }
  .brxe-woocommerce-products-orderby { flex: 1 1 200px; }
  .brxe-woocommerce-products-orderby .woocommerce-ordering { margin: 0; }
  .dino-shop-layout > #brxe-smain0 { row-gap: 16px; }
  body.dino-shop-front #brxe-02de2e { padding-block: 32px 40px; }
  body.dino-shop-front #brxe-02de2e #brxe-sintro { font-size: 16px; }
  /* Shop front: the top-category tiles are the category navigation and the help block
     follows the catalogue, so the sidebar would only repeat them. */
  body.dino-shop-front .dino-shop-sidebar { display: none; }
}

/* ScanNet bottom category description (e.g. Fuchs), below the product list as on the live shop. */
.dino-category-bottom-description { margin-top: 32px; max-width: 70ch; }
.dino-category-bottom-description > :last-child { margin-bottom: 0; }