/**
 * Category hub page styles.
 * Loaded only on product_cat pages that have subcategories (see
 * dcsupplies_enqueue_category_hub_assets() in inc/category-archive.php).
 *
 * Uses CSS custom properties with fallbacks so it's easy to re-point at
 * your existing theme colors — just define these vars higher up
 * (e.g. on :root in main.css) to override.
 */

/**
 * FIX: the "Featured Products" carousel block further down (and the
 * related-products/product-card rules it shares with single-product.php)
 * reference --surface-1, --surface-2, --fill-accent, --fill-primary,
 * --fill-danger, --text-primary, --text-secondary, --shadow-sm and
 * --shadow-lg — but none of those custom properties were ever defined
 * anywhere in main.css. An undefined var() with no fallback makes the
 * WHOLE declaration invalid, so every card border, background, shadow
 * and accent color in that section was silently dropped — that's why
 * the carousel rendered as plain unstyled boxes instead of cards.
 * Defining them here (mapped onto the colors that already exist in
 * main.css's :root) fixes that everywhere these classes are used.
 */
/**
 * FIX: no box-sizing rule existed anywhere in this stylesheet (or in
 * main.css). That meant every padded/bordered element (product cards,
 * category tiles, sidebar boxes) rendered WIDER than its declared
 * width/flex-basis, because padding+border were added on top instead
 * of being included inside it. That's what caused:
 *   - the 3rd featured-product card overflowing/cutting off on desktop
 *     (each card was really ~50px wider than its calc() width)
 *   - the whole hub page overflowing horizontally on phones, so the
 *     page scrolled sideways and content looked clipped/misaligned
 * Scoped to .category-hub so it can't affect the rest of the theme.
 */
 .category-hub,
 .category-hub *,
 .category-hub *::before,
 .category-hub *::after {
     box-sizing: border-box;
 }
 
  :root {
     --surface-1: #FFFFFF;
     --surface-2: #FFFFFF;
     --text-primary: var(--text, #12181E);
     --text-secondary: var(--text-light, #6E6E6E);
     --fill-accent: var(--accent, #9B1E22);
     --fill-primary: var(--primary, #9B1E22);
     --fill-danger: #9B1E22;
     --red: #9B1E22;
     --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.18);
 }
 
 /* No underlines anywhere in the hub — links, buttons, in every state.
    (Moved here from category-hub.php's inline <style> block — that
    inline block was overriding this file's responsive .category-hub__tiles
    rules further down because it rendered later in the document with
    equal specificity, which is what was breaking the mobile 2-column
    tile layout. Keep tile/tile-grid rules living HERE only.) */
 .category-hub a,
 .category-hub button,
 .category-hub a:hover,
 .category-hub a:focus,
 .category-hub a:active,
 .category-hub button:hover,
 .category-hub button:focus {
     text-decoration: none !important;
 }
 
  .category-hub {
     --dc-accent: var(--color-accent, #9B1E22);
     --dc-text: var(--color-text, #12181E);
     --dc-muted: var(--color-muted, #6E6E6E);
     --dc-border: var(--color-border, #E2E2E2);
     --dc-link: var(--color-link, #9B1E22);
 
     max-width: 1440px;
     margin: 0 auto;
     padding: 24px 20px 60px;
     overflow-x: hidden;
 }
 
 .category-hub__breadcrumb {
     font-size: 13px;
     color: var(--dc-muted);
     margin-bottom: 16px;
 }
 
 .category-hub__header {
     margin: 24px 0 32px;
 }
 
 .category-hub__header .archive-title {
     font-size: 28px;
     font-weight: 700;
     color: var(--dc-text);
     margin: 0 0 8px;
 }
 
 .category-hub__header .archive-description {
     color: var(--dc-muted);
     font-size: 14px;
     max-width: 760px;
 }
 
 .category-hub__section-title {
     font-size: 20px;
     font-weight: 700;
     color: var(--dc-text);
     margin: 0 0 16px;
     padding-bottom: 8px;
     border-bottom: 2px solid var(--dc-border);
 }
 
 /* ---------- Subcategory tiles ---------- */

 .category-hub__types {
     margin-bottom: 48px;
 }

 .category-hub__tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 20px;
 }

 @media (max-width: 900px) {
     .category-hub__tiles {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 560px) {
     .category-hub__tiles {
         grid-template-columns: 1fr;
     }
 }

 .category-tile {
     position: relative;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     background: #FFFFFF;
     border: 1px solid var(--dc-border);
     border-radius: 20px;
     padding: 28px 24px 24px;
     box-shadow: 0 1px 3px rgba(13, 13, 13, 0.04);
     transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
 }

 /* Soft red wash that fades in from the top-right corner on hover —
    matches the reference's tinted hover state. Sits behind everything
    else via z-index/stacking, purely decorative. */
 .category-tile::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 0;
     opacity: 0;
     background: radial-gradient(120% 100% at 100% 0%, rgba(155, 30, 34, 0.10) 0%, rgba(155, 30, 34, 0.03) 45%, transparent 75%);
     transition: opacity 0.3s ease;
     pointer-events: none;
 }

 .category-tile:hover {
     box-shadow: 0 14px 30px rgba(13, 13, 13, 0.1);
     border-color: rgba(155, 30, 34, 0.25);
     transform: translateY(-3px);
 }

 .category-tile:hover::before {
     opacity: 1;
 }

 .category-tile > * {
     position: relative;
     z-index: 1;
 }

 .category-tile__link {
     text-decoration: none;
     color: inherit;
     display: block;
 }

 .category-tile__image-wrap {
     width: 100%;
     aspect-ratio: 1 / 1;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     border-radius: 10px;
     background: #FCFAF8;
     border: 1px solid var(--dc-border);
     overflow: hidden;
 }

 .category-tile__image-wrap img {
     max-width: 82%;
     max-height: 82%;
     object-fit: contain;
 }

 .category-tile__count {
     display: block;
     margin: 0 0 6px;
     font-size: 11.5px;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--dc-muted);
 }

 .category-tile__title {
     font-size: 19px;
     font-weight: 800;
     color: var(--dc-text);
     margin: 0 0 22px;
     transition: color 0.15s ease;
 }

 .category-tile__link:hover .category-tile__title {
     color: var(--dc-accent);
 }

 .category-tile__sublist {
     list-style: none;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 0 0 20px;
     padding: 0;
     flex-grow: 1;
     align-content: flex-start;
 }

 .category-tile__sublist li {
     margin: 0;
 }

 .category-tile__sublist a {
     display: inline-flex;
     align-items: center;
     font-size: 12.5px;
     line-height: 1;
     font-weight: 600;
     color: var(--dc-text);
     background: #FFFFFF;
     border: 1px solid var(--dc-border);
     border-radius: 999px;
     padding: 7px 13px;
     text-decoration: none;
     white-space: nowrap;
     transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
 }

 .category-tile__sublist a:hover {
     color: var(--dc-accent);
     border-color: var(--dc-accent);
     background: rgba(155, 30, 34, 0.04);
     text-decoration: none;
 }

 .category-tile__shop-all {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     align-self: flex-start;
     
     font-size: 13px;
     font-weight: 700;
     color: #FFFFFF;
     background: var(--dc-accent);
     border: 1px solid var(--dc-accent);
     border-radius: 8px;
     padding: 10px 14px;
     text-decoration: none;
     text-align: center;
     margin-top: auto;
     transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }

 .category-tile__shop-all svg {
     transition: transform 0.15s ease;
 }

 .category-tile__shop-all:hover {
     background: var(--accent-dark, #7A171B);
     border-color: var(--accent-dark, #7A171B);
     color: #FFFFFF;
     transform: translateY(-1px);
 }

 .category-tile__shop-all:hover svg {
     transform: translate(2px, -2px);
 }

 @media (max-width: 560px) {
     .category-tile {
         padding: 22px 20px 20px;
     }
 }
 
 /* ---------- Two-column body: content + static sidebar banners ---------- */
 
 .category-hub__body {
     display: grid;
     grid-template-columns: 260px minmax(0, 1fr) 320px;
     gap: 28px;
     align-items: start;
 }
 
 @media (max-width: 1200px) {
     .category-hub__body {
         grid-template-columns: 260px minmax(0, 1fr) !important;
     }
     .category-hub__picks {
         grid-column: 1 / -1;
     }
 }
 
 /* FIX: even with !important, staying on `display: grid` here left the
    door open for some other grid-template-columns rule (seemingly from
    another stylesheet loaded elsewhere on the site) to reassert 2
    columns on phone widths. Switching to flexbox removes that risk
    completely — grid-template-columns has zero effect once display
    isn't grid, so nothing else can squeeze the sidebar/content/picks
    back into side-by-side columns on a phone. */
 @media (max-width: 992px) {
     .category-hub__body {
         display: flex !important;
         flex-direction: column !important;
         grid-template-columns: none !important;
     }
 
     .category-hub__body > .category-hub__sidebar,
     .category-hub__body > .category-hub__picks {
         width: 100% !important;
         flex: 1 1 100% !important;
         grid-column: auto !important;
     }

     /* `order` can only reorder DIRECT flex children of .category-hub__body
        (sidebar / content / picks) as whole blocks — it can't reach INSIDE
        .category-hub__content to move just the banner in front of the
        sidebar while leaving the title/tiles/featured-products behind it.
        `display: contents` removes .category-hub__content itself from the
        layout so its own children (banner, header, types section, featured
        section, etc.) become direct flex items of .category-hub__body and
        can each get their own `order` individually. */
     .category-hub__content {
         display: contents;
     }

     .category-hub__content > * {
         width: 100% !important;
         flex: 1 1 100% !important;
         order: 3; /* everything in content, by default, after banner + sidebar */
     }

     /* Banner leads the page — covers both the custom admin banner
        (.banner-block) and the auto-generated one (.category-hub__banner-fallback). */
     .category-hub__content > .category-hub__banner-fallback,
     .category-hub__content > .banner-block {
         order: 1;
     }

     .category-hub__body > .category-hub__sidebar {
         order: 2;
     }

     .category-hub__body > .category-hub__picks {
         order: 4;
     }
 }
 
 /* If category-hub-sidebar.php / category-hub-picks.php have nothing to
    show (no categories/brands, or no products for the picks rail) they
    return early and print nothing. Without these rules the grid still
    reserves an empty column on desktop. */
 .category-hub__body:not(:has(.category-hub__sidebar)):not(:has(.category-hub__picks)) {
     grid-template-columns: 1fr;
 }
 
 .category-hub__body:has(.category-hub__sidebar):not(:has(.category-hub__picks)) {
     grid-template-columns: 260px minmax(0, 1fr);
 }
 
 .category-hub__body:not(:has(.category-hub__sidebar)):has(.category-hub__picks) {
     grid-template-columns: minmax(0, 1fr) 320px;
 }
 
 .category-hub__sidebar {
     display: flex;
     flex-direction: column;
     gap: 16px;
     position: sticky;
     top: 20px;
 }
 
 @media (max-width: 992px) {
     .category-hub__sidebar {
         position: static;
         flex-direction: row;
         flex-wrap: wrap;
     }
 }
 
 /* Row+wrap above works for tablet width, where two side-by-side boxes
    still have room to breathe. On an actual phone that squeezes two
    dark navy boxes awkwardly — go back to a clean single column, each
    box taking the full width, same as desktop just without the sticky
    positioning. */
 @media (max-width: 600px) {
     .category-hub__sidebar {
         flex-direction: column;
         flex-wrap: nowrap;
         gap: 14px;
     }
 
     .hub-sidebar-categories,
     .hub-sidebar-brands {
         width: 100%;
         flex: 1 1 100%;
     }
 }
 
 .hub-sidebar-categories,
 .hub-sidebar-brands {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius, 12px);
     padding: 18px 16px;
     background: #0D0D0D;
     box-shadow: 0 4px 16px rgba(13, 13, 13, 0.18);
     overflow: hidden;
 }
 
 .hub-sidebar-categories .category-hub__section-title,
 .hub-sidebar-brands .category-hub__section-title {
     position: relative;
     margin: -18px -16px 14px;
     padding: 14px 16px 12px 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 13px;
     font-weight: 800;
     letter-spacing: 0.6px;
     text-transform: uppercase;
     color: #FFFFFF;
 }
 
 .hub-sidebar-categories .category-hub__section-title::before {
     content: "";
     position: absolute;
     left: 0;
     top: 12px;
     bottom: 12px;
     width: 4px;
     border-radius: 0 3px 3px 0;
     background: var(--accent, #9B1E22);
 }
 
 .hub-sidebar-brands .category-hub__section-title::before {
     content: "";
     position: absolute;
     left: 0;
     top: 12px;
     bottom: 12px;
     width: 4px;
     border-radius: 0 3px 3px 0;
     background: var(--accent, #9B1E22);
 }
 
 /* "By Category" tree — custom recursive accordion markup output by
    dcsupplies_render_category_branch() / the top-ancestor row in
    category-hub-sidebar.php (.hub-sidebar-categories__list / __item /
    __toggle / __panel). Dark navy nav to match the homepage, with the
    top ancestor and every parent category collapsible: clicking its
    label or chevron (both sit inside the same <button>) toggles the
    sibling panel, since a category with children is a section header
    here rather than a destination. Leaf categories (no children) stay
    plain links straight to their listing, with a trailing "›". */
 .hub-sidebar-categories__list {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
 .hub-sidebar-categories__panel .hub-sidebar-categories__list {
     margin: 2px 0 6px 10px;
     padding: 0 0 0 12px;
     border-left: 2px solid rgba(255, 255, 255, 0.12);
 }
 
 .hub-sidebar-categories__item {
     margin: 0;
 }
 
 .hub-sidebar-categories__item > a,
 .hub-sidebar-categories__toggle {
     position: relative;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding: 10px 10px;
     border: 0;
     border-radius: 6px;
     background: transparent;
     color: rgba(255, 255, 255, 0.85);
     font: inherit;
     font-size: 13.5px;
     font-weight: 500;
     text-decoration: none;
     text-align: left;
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
 }
 
 .hub-sidebar-categories__toggle--top {
     font-size: 14.5px;
     font-weight: 700;
     color: #FFFFFF;
     margin-bottom: 2px;
 }
 
 .hub-sidebar-categories__item > a:hover,
 .hub-sidebar-categories__toggle:hover {
     background: rgba(255, 255, 255, 0.08);
     color: #FFFFFF;
     padding-left: 14px;
 }
 
 .hub-sidebar-categories__label {
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .hub-sidebar-categories__icon {
     flex: 0 0 auto;
     color: var(--accent, #9B1E22);
 }
 
 /* Chevron: a simple CSS-drawn corner that points right when collapsed
    and rotates to point down once the panel is expanded. */
 .hub-sidebar-categories__chevron {
     flex: 0 0 auto;
     width: 7px;
     height: 7px;
     border-right: 2px solid rgba(255, 255, 255, 0.45);
     border-bottom: 2px solid rgba(255, 255, 255, 0.45);
     transform: rotate(-45deg);
     transition: transform 0.2s ease, border-color 0.2s ease;
 }
 
 .hub-sidebar-categories__item.is-expanded > .hub-sidebar-categories__toggle .hub-sidebar-categories__chevron {
     transform: rotate(45deg);
 }
 
 .hub-sidebar-categories__toggle:hover .hub-sidebar-categories__chevron {
     border-color: var(--accent, #9B1E22);
 }
 
 .hub-sidebar-categories__panel[hidden] {
     display: none;
 }
 
 .hub-sidebar-categories__item.is-current > a,
 .hub-sidebar-categories__item.is-current > .hub-sidebar-categories__toggle {
     background: rgba(155, 30, 34, 0.16);
     color: #FFFFFF;
     font-weight: 700;
 }
 
 .hub-sidebar-categories__item.is-current > a::before,
 .hub-sidebar-categories__item.is-current > .hub-sidebar-categories__toggle::before {
     content: "";
     position: absolute;
     left: -2px;
     top: 6px;
     bottom: 6px;
     width: 3px;
     border-radius: 2px;
     background: var(--accent, #9B1E22);
 }
 
 /* Popular Brands — restyled as dark cards to match the homepage's own
    "Shop By Brand" section (.brand-v2-card in new.css) so the palette
    and feel are consistent site-wide, just scaled down for the rail. */
 .hub-sidebar-brands {
     background: var(--sidebar-bg, #0D0D0D);
     border-color: rgba(255, 255, 255, 0.08);
 }
 
 .hub-sidebar-brands .category-hub__section-title {
     color: #FFFFFF;
     border-bottom-color: rgba(255, 255, 255, 0.1);
 }
 
 .hub-sidebar-brands__list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
 .hub-sidebar-brands__list a {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 12px 14px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.05);
     color: #FFFFFF;
     font-size: 14px;
     font-weight: 700;
     text-decoration: none;
     transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
 }
 
 .hub-sidebar-brands__list a::after {
     content: "Shop \203a";
     align-self: flex-start;
     margin-top: 2px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.3px;
     color: var(--accent, #9B1E22);
 }
 
 .hub-sidebar-brands__list a:hover {
     transform: translateX(3px);
     background: rgba(255, 255, 255, 0.09);
     border-color: var(--accent, #9B1E22);
     color: #FFFFFF;
 }
 
 .hub-sidebar-brands__count {
     color: rgba(255, 255, 255, 0.55);
     font-size: 11.5px;
     font-weight: 500;
 }
 
 .hub-sidebar-banner {
     border: 1px solid var(--dc-border);
     border-radius: var(--radius, 12px);
     overflow: hidden;
     line-height: 0;
 }
 
 .hub-sidebar-banner img {
     width: 100%;
     height: auto;
     display: block;
 }
 
 @media (max-width: 992px) {
     .hub-sidebar-banner {
         flex: 1 1 200px;
     }
 }
 
 /* Featured products section now reuses the related-products / product-carousel
    classes verbatim (see block further down) — .category-hub__featured is only
    used as a wrapper for scoping, its spacing comes from .related-products
    itself, so no standalone rule is needed here. */
 
 /* ---------- Glossary / info block ---------- */
 
 .category-hub__glossary {
     border-top: 1px solid var(--dc-border);
     padding-top: 24px;
     color: var(--dc-text);
     font-size: 14px;
     line-height: 1.7;
     max-width: 900px;
 }
 
 .category-hub__glossary h1,
 .category-hub__glossary h2,
 .category-hub__glossary h3 {
     margin-top: 24px;
     margin-bottom: 10px;
 }
 
 .category-hub__glossary p {
     margin-bottom: 14px;
 }
 
 /* ---------- Banner (extends content-banner.php's .banner-block) ---------- */
 
 .category-hub .banner-block {
     margin-bottom: 32px;
     border-radius: 6px;
     padding: 40px;
     color: #FFFFFF;
 }
 
 .category-hub .banner-block__title {
     font-size: 26px;
     margin: 0 0 8px;
 }
 
 .category-hub .banner-block__subtitle {
     font-size: 15px;
     opacity: 0.9;
     margin: 0 0 16px;
 }
 
 /* ---------- Fallback banner (auto-generated when no admin banner is
    configured for this term yet) — mirrors the homepage hero's gradient
    + glow treatment (.dcs-hero in main.css) so it still feels on-brand
    instead of looking like a placeholder. ---------- */
 
 .category-hub__banner-fallback {
     position: relative;
     overflow: hidden;
     min-height: 200px;
     margin-bottom: 32px;
     padding: 40px 44px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-radius: var(--radius, 12px);
     background: #0D0D0D;
     color: #FFFFFF;
     box-shadow: 0 10px 30px rgba(13, 13, 13, 0.22);
 }
 
 /* When a real image is available (the category's own thumbnail, or a
    representative product photo) it's applied as this element's
    background-image via inline style from category-hub.php, with a
    dark gradient scrim laid on top so text stays legible — this is
    what replaces the flat "blue banner" look whenever an image exists,
    even before an editor sets a dedicated banner in wp-admin. */
 /* When more than one candidate image is found, the fallback banner
    becomes a slow auto-rotating carousel of those images instead of a
    single static photo — see the JS in main.js that toggles .is-active
    every few seconds. The dark scrim sits above the slides and below
    the text so the headline stays legible no matter which photo is
    showing. */
 .category-hub__banner-carousel {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
 }
 
 .category-hub__banner-carousel::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(100deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.72) 42%, rgba(13, 13, 13, 0.25) 100%);
 }
 
 .category-hub__banner-slide {
     position: absolute;
     inset: 0;
     background-image: var(--dc-banner-image);
     background-size: cover;
     background-position: center;
     opacity: 0;
     transition: opacity 1.2s ease;
 }
 
 .category-hub__banner-slide.is-active {
     opacity: 1;
 }
 
 .category-hub__banner-fallback--image {
     background-image:
         linear-gradient(100deg, rgba(13, 13, 13, 0.92) 0%, rgba(13, 13, 13, 0.72) 42%, rgba(13, 13, 13, 0.25) 100%),
         var(--dc-banner-image);
     background-size: cover;
     background-position: center;
 }
 
 /* Diagonal accent stripes so a plain-color fallback (no image found at
    all) still reads as an intentional design, not an empty placeholder. */
 .category-hub__banner-fallback:not(.category-hub__banner-fallback--image)::after {
     content: "";
     position: absolute;
     inset: 0;
     background-image: repeating-linear-gradient(
         115deg,
         rgba(255, 255, 255, 0.035) 0px,
         rgba(255, 255, 255, 0.035) 2px,
         transparent 2px,
         transparent 46px
     );
     pointer-events: none;
 }
 
 .category-hub__banner-fallback-glow {
     position: absolute;
     top: -140px;
     right: -100px;
     width: 340px;
     height: 340px;
     border-radius: 50%;
     background: rgba(155, 30, 34, 0.28);
     filter: blur(80px);
     pointer-events: none;
 }
 
 .category-hub__banner-fallback-eyebrow {
     position: relative;
     display: inline-block;
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--accent, #9B1E22);
     margin-bottom: 10px;
 }
 
 .category-hub__banner-fallback-title {
     position: relative;
     font-size: 30px;
     font-weight: 800;
     margin: 0 0 10px;
     color: #FFFFFF;
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
 }
 
 .category-hub__banner-fallback-desc {
     position: relative;
     font-size: 15px;
     line-height: 1.6;
     max-width: 640px;
     color: rgba(255, 255, 255, 0.85);
     margin: 0;
 }
 
 @media (max-width: 600px) {
     .category-hub__banner-fallback {
         min-height: 160px;
         padding: 28px 24px;
     }
     .category-hub__banner-fallback-title {
         font-size: 22px;
     }
 }
 
 /* ---------- Right rail: Trending Picks ---------- */
 
 .category-hub__picks {
     position: sticky;
     top: 20px;
 }
 
 .hub-picks {
     border: 1px solid var(--dc-border);
     border-radius: var(--radius, 12px);
     padding: 18px 16px;
     background: #FFFFFF;
     box-shadow: 0 2px 12px rgba(13, 13, 13, 0.06);
 }
 
 .hub-picks__heading {
     position: relative;
     margin: -18px -16px 16px;
     padding: 14px 16px 12px 20px;
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 10px;
     border-bottom: 1px solid var(--dc-border);
 }
 
 .hub-picks__heading::before {
     content: "";
     position: absolute;
     left: 0;
     top: 12px;
     bottom: 12px;
     width: 4px;
     border-radius: 0 3px 3px 0;
     background: var(--fill-danger, #9B1E22);
 }
 
 .hub-picks .category-hub__section-title {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 14px;
     font-weight: 800;
     letter-spacing: 0.3px;
     text-transform: uppercase;
     color: var(--dc-text);
 }
 
 .hub-picks__view-all {
     flex: 0 0 auto;
     padding: 4px 12px;
     border: 1px solid var(--accent, #9B1E22);
     border-radius: 999px;
     font-size: 11.5px;
     font-weight: 700;
     color: var(--accent, #9B1E22);
     text-decoration: none;
     white-space: nowrap;
     transition: background 0.15s ease, color 0.15s ease;
 }
 
 .hub-picks__view-all:hover {
     background: var(--accent, #9B1E22);
     color: #FFFFFF;
     text-decoration: none;
 }
 
 .hub-picks__list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }
 
 .hub-pick-card {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px;
     border: 1px solid var(--dc-border);
     border-radius: 10px;
     transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }
 
 .hub-pick-card:hover {
     border-color: var(--primary, #9B1E22);
     box-shadow: 0 4px 14px rgba(13, 13, 13, 0.08);
     transform: translateY(-2px);
 }
 
 .hub-picks__list .hub-pick-card:last-child {
     padding: 12px;
     border: 1px solid var(--dc-border);
 }
 
 .hub-pick-card__image-wrap {
     flex: 0 0 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 8px;
     background: #FCFAF8;
     overflow: hidden;
 }
 
 .hub-pick-card__image-wrap img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }
 
 .hub-pick-card__body {
     flex: 1 1 auto;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 4px;
 }
 
 .hub-pick-card__title {
     color: var(--dc-text);
     font-size: 13px;
     font-weight: 600;
     line-height: 1.35;
     text-decoration: none;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
 
 .hub-pick-card__title:hover {
     color: var(--primary, #9B1E22);
 }
 
 .hub-pick-card__meta {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
 }
 
 .hub-pick-card__price {
     font-size: 14px;
     font-weight: 800;
     color: var(--primary-dark, #7A171B);
 }
 
 .hub-pick-card__price del {
     margin-right: 6px;
     font-size: 12px;
     font-weight: 400;
     color: var(--dc-muted);
 }
 
 .hub-pick-card__price ins {
     text-decoration: none;
     color: var(--fill-danger, #9B1E22);
 }
 
 .hub-pick-card__cta {
     flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     color: var(--dc-link, #9B1E22);
     font-size: 16px;
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
     transition: background 0.15s ease, transform 0.15s ease;
 }
 
 .hub-pick-card__cta:hover {
     background: rgba(155, 30, 34, 0.1);
     transform: translateX(2px);
 }
 
 @media (max-width: 1200px) {
     .category-hub__picks {
         position: static;
     }
     .hub-picks__list {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
         gap: 16px;
     }
     .hub-pick-card {
         border-bottom: 0;
         padding-bottom: 0;
         border: 1px solid var(--dc-border);
         border-radius: 8px;
         padding: 12px;
     }
 }
 
 /* ---------- Business accounts CTA (net-30 terms) ---------- */
 
 .hub-business-banner {
     border-radius: var(--radius, 12px);
     padding: 22px 20px;
     background: #0D0D0D;
     box-shadow: 0 4px 16px rgba(13, 13, 13, 0.18);
     color: #FFFFFF;
 }
 
 .hub-business-banner--spaced {
     margin-top: 20px;
 }
 
 .hub-business-banner__eyebrow {
     display: inline-block;
     margin-bottom: 8px;
     color: var(--accent, #9B1E22);
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 0.6px;
     text-transform: uppercase;
 }
 
 .hub-business-banner__title {
     margin: 0 0 8px;
     font-size: 18px;
     font-weight: 800;
     line-height: 1.3;
     color: #FFFFFF;
 }
 
 .hub-business-banner__desc {
     margin: 0 0 16px;
     font-size: 13px;
     line-height: 1.5;
     color: rgba(255, 255, 255, 0.75);
 }
 
 .hub-business-banner__cta {
     display: inline-flex;
     align-items: center;
     padding: 9px 18px;
     border-radius: 8px;
     background: var(--accent, #9B1E22);
     color: #FFFFFF;
     font-size: 13px;
     font-weight: 700;
     text-decoration: none;
     transition: background 0.15s ease, transform 0.15s ease;
 }
 
 .hub-business-banner__cta:hover {
     background: var(--accent-dark, #7A171B);
     color: #FFFFFF;
     transform: translateY(-1px);
 }
 
 
 /* ==========================================================================
    RELATED PRODUCTS / PRODUCT CAROUSEL — reused verbatim from single-product.css
    (the same classes power the "Related Products" carousel on the single
    product page). Selectors are shared/global (.related-products,
    .product-carousel, .product-card, etc.) so they apply automatically to
    the "Featured Products" section on this hub page too — a couple of
    selectors below were extended to also target .category-hub__featured
    directly (marked inline).
 
    NOTE: the .related-products-summary rules (the "Selected: 0 / View Cart"
    bar) are included here for completeness since they share this block in
    the original file, but that markup is NOT rendered on hub pages — it's
    a single-product-specific upsell bar. These rules are harmless if unused.
    ========================================================================== */
 .related-products__heading {
     position: relative;
     min-height: 40px;
     margin: 0 0 16px;
     padding: 0 0 14px;
     display: flex;
     align-items: baseline;
     justify-content: space-between;
     gap: 12px;
     border-bottom: 2px solid var(--dc-border, var(--border));
 }
 
 .related-products__heading::before {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     height: 2px;
     width: 90px;
     background: var(--fill-accent);
 }
 
 .related-products__view-all {
     flex: 0 0 auto;
     padding: 7px 18px;
     border: 1.5px solid var(--primary, #9B1E22);
     border-radius: 6px;
     color: var(--primary, #9B1E22);
     font-size: 13px;
     font-weight: 700;
     text-decoration: none;
     white-space: nowrap;
     transition: background 0.15s ease, color 0.15s ease;
 }
 
 .related-products__view-all:hover {
     background: var(--primary, #9B1E22);
     color: #FFFFFF;
     text-decoration: none;
 }
 
 .single-product__related .section-title,
 .category-hub__featured .section-title {
     margin: 0;
     padding: 0;
     border: 0;
     color: var(--text-primary);
     font-size: 16px;
     font-weight: 700;
     line-height: 1.25;
 }
 
 .related-products {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 24px;
     padding: 0;
     border: 0;
     background: transparent;
     box-shadow: none;
 }
 
 .product-carousel {
     position: relative;
     width: 100%;
     margin: 0;
     padding: 0;
     display: flex;
     align-items: center;
     gap: 0;
     border: 0;
     background: transparent;
     box-shadow: none;
 }
 
 .product-carousel__track {
     flex: 1 1 auto;
     min-width: 0;
     display: flex !important;
     flex-wrap: nowrap !important;
     align-items: stretch;
     gap: 22px;
     overflow-x: auto;
     padding: 4px 2px 14px;
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
 }
 
 .product-carousel__track::-webkit-scrollbar {
     display: none;
 }
 
 /* Arrows sit INSIDE the card row, overlapping the edge of the first/
    last card (Newegg-style), instead of floating in reserved space
    outside it. Blue outline + blue chevron by default, filling solid
    blue on hover/focus. */
 .product-carousel__nav {
     position: absolute;
     top: 45%;
     transform: translateY(-50%);
     z-index: 3;
     flex: none;
     width: 42px;
     height: 42px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--primary, #9B1E22);
     border-radius: 50%;
     background: #FFFFFF;
     color: var(--primary, #9B1E22);
     cursor: pointer;
     font-size: 0;
     line-height: 1;
     box-shadow: 0 4px 14px rgba(13, 13, 13, 0.14);
     transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 }
 
 .product-carousel__nav--prev {
     left: 12px;
 }
 
 .product-carousel__nav--next {
     right: 12px;
 }
 
 .product-carousel__nav::before {
     display: block;
     font-size: 20px;
     font-weight: 700;
     line-height: 1;
 }
 
 .product-carousel__nav--prev::before {
     content: "\2039";
 }
 
 .product-carousel__nav--next::before {
     content: "\203a";
 }
 
 .product-carousel__nav:hover:not(:disabled),
 .product-carousel__nav:focus-visible:not(:disabled) {
     background: var(--primary, #9B1E22);
     color: #FFFFFF;
     box-shadow: 0 6px 18px rgba(13, 13, 13, 0.22);
     transform: translateY(-50%) scale(1.06);
 }
 
 .product-carousel__nav:disabled {
     opacity: 0;
     visibility: hidden;
 }
 
 /* Cards per view is a WHOLE number at every breakpoint — no card
    ever sits half-cut at rest. Widening the page further wouldn't fix
    this on its own, since the center content column is still squeezed
    by the 260px sidebar + 320px picks columns; instead each tier below
    picks a clean count of full cards for however wide that column
    actually is at that breakpoint, matching the same breakpoints
    .category-hub__body already uses to change its own columns. */
 /* FIX: cards previously sat inside a solid white, bordered, drop-shadowed
    box at rest (per the reference design, the card face itself — badge,
    title, price, button — should read as sitting directly on the page,
    with no visible box around it). Background/border/shadow are dropped
    to transparent/none here; the border and shadow still come back on
    :hover just below, so hovering a card still gets a clear elevated
    "picked up" state — it's only the permanent white box that's gone. */
 .product-carousel__track .product-card {
     position: relative;
     flex: 0 0 calc((100% - 44px) / 3) !important;
     width: calc((100% - 44px) / 3) !important;
     min-width: 0;
     display: flex !important;
     flex-direction: column;
     gap: 0;
     padding: 14px;
     border: 1px solid transparent;
     border-radius: 14px;
     background: transparent;
     color: var(--text-primary);
     box-shadow: none;
     scroll-snap-align: start;
     text-align: left;
     transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
     background-color: white;
 }
 
 /* 1200px down: .category-hub__body drops the picks column, content
    gets noticeably wider — show 4 full cards. */
 @media (max-width: 1200px) {
     .product-carousel__track .product-card {
         flex: 0 0 calc((100% - 66px) / 4) !important;
         width: calc((100% - 66px) / 4) !important;
     }
 }
 
 /* 992px down: .category-hub__body stacks to a single column, so
    content becomes the FULL container width — 5 full cards fit
    comfortably. Mobile (767px) below overrides this with exactly 1
    card at a time. */
 @media (max-width: 992px) and (min-width: 768px) {
     .product-carousel__track .product-card {
         flex: 0 0 calc((100% - 88px) / 5) !important;
         width: calc((100% - 88px) / 5) !important;
     }

     .product-carousel__track .product-card__image-wrap img {
         width: 100% !important;
         max-width: 277px !important;
         height: 100% !important;
         max-height: 280px !important;
         object-fit: contain;
         transition: transform 0.3s ease;
     }
    }
/* On phone the wrapper was `aspect-ratio: 1/1` at nearly the full
   card width (a ~340px square), while the photo inside stays capped
   around 176x181px — leaving a big empty box around a small image,
   which is what read as an oversized grey/blank area. Instead of just
   shrinking the image further, cap the BOX's height directly so the
   whole thing sits close to the photo's actual size. */
@media (max-width: 767px) {
    .product-carousel__track .product-card__image-wrap {
        aspect-ratio: unset !important;
        height: 160px !important;
    }

    /* Keeping the grey frame around the photo (not removing it), just
       shrinking how much of it shows — the box is ~100% of the card
       width while the image was capped at only 150px wide, leaving a
       wide empty margin on both sides. Letting the image run wider
       (closer to the box) keeps a thin visible border without the
       big gap. */
    .product-carousel__track .product-card__image-wrap img {
        max-width: 230px !important;
        max-height: 150px !important;
    }
}
 
 .product-carousel__track .product-card:hover {
     border-color: var(--primary, #9B1E22);
     box-shadow: 0 16px 32px rgba(13, 13, 13, 0.14);
     transform: translateY(-5px);
 }
 
 .product-carousel__track .product-card__image-wrap {
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;
     height: auto;
     margin: 0 0 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     background: transparent;
     overflow: hidden;
 }
 
 /* Discount ribbon — appears automatically whenever the price block has
    a struck-through compare-at price (WooCommerce renders <del> only
    when there's a sale), so no template change is needed to turn it
    on/off per product. */
 .product-card:has(.product-card__price del) .product-card__image-wrap::before {
     content: "SALE";
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
     padding: 4px 9px;
     border-radius: 5px;
     background: var(--fill-danger, #9B1E22);
     color: #FFFFFF;
     font-size: 10.5px;
     font-weight: 800;
     letter-spacing: 0.5px;
 }
 
 .product-carousel__track .product-card__image-wrap img {
     width: 100%;
     max-width: 176px;
     height: 100%;
     max-height: 181px;
     object-fit: contain;
     /* Product photos typically ship with generous grey/white studio
        background baked in around the actual product. object-fit:
        contain keeps that whole photo -- padding included -- visible,
        which reads as an oversized grey border around a small
        product. A gentle zoom crops that margin out; the wrapper's
        overflow: hidden clips whatever spills past the box. */
     transform: scale(1.18);
     transition: transform 0.3s ease;
 }
 
 .product-carousel__track .product-card:hover .product-card__image-wrap img {
     transform: scale(1.26);
 }
 
 .product-carousel__track .product-card__body {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: 0;
 }
 
 .product-card__meta-top {
     min-height: 24px;
     margin-bottom: 14px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
 }
 
 .product-card__reviews {
     flex: 1 1 auto;
     min-width: 0;
     display: inline-flex;
     align-items: center;
     gap: 4px;
     color: var(--text-secondary);
     font-size: 12px;
     font-weight: 400;
     line-height: 1;
 }
 
 .product-card__review-count {
     display: none;
 }
 
 .product-card__reviews .dc-form-stars {
     display: inline-flex;
     gap: 1px;
 }
 
 .product-card__reviews .dc-form-star {
     width: 14px;
     height: 14px;
     font-size: 14px;
     cursor: default;
     pointer-events: none;
 }
 
 .product-card__reviews .dc-form-star:hover {
     color: inherit;
     transform: none;
 }
 
 .product-card__reviews .dc-form-star.active,
 .product-card__reviews .dc-form-star.active:hover {
     color: var(--fill-accent);
 }
 
 .product-card__brand-icon {
     max-width: 110px;
     min-width: 24px;
     height: 22px;
     padding: 0 9px;
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 0;
     border-radius: 5px;
     background: #0D0D0D;
     color: #FFFFFF;
     font-size: 10px;
     font-weight: 800;
     letter-spacing: 0.6px;
     line-height: 1;
     text-overflow: ellipsis;
     text-transform: uppercase;
     white-space: nowrap;
 }
 
 .product-carousel__track .product-card__title {
     min-height: 38px;
     margin: 2px 0 14px;
     color: var(--text-primary);
     font-size: 14px;
     font-weight: 700;
     line-height: 1.35;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
 
 .product-carousel__track .product-card__title a {
     color: inherit;
     text-decoration: none;
 }
 
 .product-carousel__track .product-card__title a:hover {
     color: var(--fill-accent);
 }
 
 .product-carousel__track .product-card__model,
 .product-carousel__track .product-card__condition {
     display: flex;
     align-items: center;
     gap: 8px;
     margin: 0 0 10px;
     color: var(--text-secondary);
     font-size: 12px;
     font-weight: 500;
     line-height: 1.35;
 }
 
 .product-carousel__track .product-card__condition {
     margin-bottom: 16px;
 }
 
/* Green checkmark in front of each spec line — same idea as the
   "checklist" style specs on the reference card design. Applies to
   every card variant site-wide (carousels, plain grids, homepage
   carousel, similar-products carousel) — not just inside
   .product-carousel__track — so "Model No" always gets the same tick
   regardless of which template/page renders the card. */
.product-card__model::before,
.product-card__condition::before,
.product-card__mpn::before,
.dcs-card__mpn::before {
    content: "\2713";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.product-card__model,
.product-card__condition,
.product-card__mpn,
.dcs-card__mpn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.product-card__model .dashicons,
.product-card__condition .dashicons,
.product-card__mpn .dashicons,
.dcs-card__mpn .dashicons {
    display: none;
}
 
 .product-carousel__track .product-card__price {
     margin: 6px 0 20px;
     padding-top: 14px;
     border-top: 1px dashed var(--dc-border, var(--border));
     color: var(--primary-dark, var(--text-primary));
     font-size: 18px;
     font-weight: 800;
     line-height: 1.2;
 }
 
 .product-carousel__track .product-card__price del {
     margin-right: 8px;
     color: var(--text-secondary);
     font-size: 13px;
     font-weight: 400;
     opacity: 1;
 }
 
 .product-carousel__track .product-card__price ins {
     color: var(--fill-danger, #9B1E22);
     text-decoration: none;
 }
 
 .product-card__quote-block,
 .product-carousel__track .product-card__footer {
     margin-top: auto;
     padding-top: 0;
     border-top: 0;
 }
 
 .product-card__add-to-cart,
 .product-card__get-quote {
     width: 100%;
     min-height: 40px;
     height: 40px;
     padding: 8px 12px !important;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     border: 0;
     border-radius: 8px;
     color: #FFFFFF;
     font-size: 13px;
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
     cursor: pointer;
     transition: background 0.15s ease, transform 0.15s ease;
 }
 
 .product-carousel__track .product-card__add-to-cart {
     background: var(--fill-accent) !important;
 }
 
 .product-carousel__track .product-card__add-to-cart:hover {
     background: var(--accent-dark, #7A171B) !important;
     color: #FFFFFF;
     transform: translateY(-1px);
 }
 
 .product-carousel__track .product-card__get-quote {
     background: var(--fill-primary) !important;
 }
 
 .product-carousel__track .product-card__get-quote:hover {
     background: var(--primary-dark, #7A171B) !important;
     color: #FFFFFF;
     transform: translateY(-1px);
 }
 
 .product-card__get-quote svg,
 .product-card__add-to-cart svg {
     width: 16px;
     height: 16px;
     fill: none;
     stroke: currentColor;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 2;
 }
 
 .product-card .added_to_cart,
 .product-card .wc-forward,
 .product-card__view-btn {
     display: none !important;
 }
 
 .related-products-summary {
     width: 100%;
     min-height: 102px;
     padding: 16px 16px 13px ;
     display: flex;
     align-items: center;
     gap: 12px;
     border: 0.5px solid var(--border);
     border-radius: 8px;
     background: var(--surface-2);
     box-shadow: var(--shadow-sm);
     background-color: white;
 }
 
 .related-products-summary__main {
     min-width: 0;
     display: flex;
     flex: 1 1 auto;
     align-items: center;
     gap: 12px;
 }
 
 .related-products-summary__image {
     flex: 0 0 60px;
     width: 60px;
     height: 60px;
     border: 0.5px solid var(--border);
     border-radius: 6px;
     object-fit: contain;
     background: #FCFAF8;
 }
 
 .related-products-summary__title {
     min-width: 0;
     overflow: hidden;
     color: var(--text-primary);
     font-size: 14px;
     font-weight: 500;
     line-height: 1.3;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .related-products-summary__actions {
     display: flex;
     flex: 0 0 auto;
     align-items: center;
     gap: 12px;
 }
 
 .related-products-summary__selected-wrap {
     position: relative;
     display: none;
 }
 
 .related-products-summary__selected {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     min-height: 32px;
     padding: 6px 14px;
     border: 1px solid var(--border, #E2E2E2);
     border-radius: 20px;
     background: #FCFAF8;
     color: var(--text-primary, #0D0D0D);
     font: inherit;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: background 0.15s ease, border-color 0.15s ease;
 }
 
 .related-products-summary__selected:hover,
 .related-products-summary__selected[aria-expanded="true"] {
     border-color: var(--fill-accent, #9B1E22);
     background: #F0F0F0;
 }
 
 .related-products-summary__total {
     display: none;
     color: #9B1E22;
     font-size: 17px;
     font-weight: 700;
     white-space: nowrap;
 }
 
 .related-products.has-selection .related-products-summary__selected-wrap,
 .related-products.has-selection .related-products-summary__total {
     display: block;
 }
 
 .related-products-summary__view-cart {
     width: 140px;
     height: 36px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     border: 0;
     border-radius: 6px;
     background: var(--fill-accent);
     color: #FFFFFF;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     opacity: 1;
     transition: background 0.2s ease;
 }
 
 .related-products-summary__view-cart:disabled {
     cursor: pointer;
     opacity: 1;
 }
 
 .related-products-summary__view-cart:not(:disabled):hover {
     background: var(--accent-dark, #7A171B);
 }
 
 .related-products-summary__popover {
     position: absolute;
     top: calc(100% + 8px);
     left: 0;
     z-index: 20;
     width: min(350px, 88vw);
     max-height: 400px;
     overflow: auto;
     padding: 16px;
     border: 0.5px solid var(--border);
     border-radius: 8px;
     background: var(--surface-2);
     box-shadow: var(--shadow-lg);
 }
 
 .related-products-summary__popover::before {
     content: "Selected Products";
     display: block;
     margin: 0 0 12px;
     padding: 0 0 10px;
     border-bottom: 0.5px solid var(--border);
     color: var(--text-primary);
     font-size: 14px;
     font-weight: 500;
 }
 
 .related-products-summary__empty {
     margin: 0;
     color: var(--text-secondary);
     font-size: 13px;
 }
 
 .related-products-summary__list {
     display: flex;
     flex-direction: column;
     gap: 0;
     margin: 0;
     padding: 0;
 }
 
 .related-products-summary__item {
     display: grid;
     grid-template-columns: 40px minmax(0, 1fr) auto 32px;
     align-items: center;
     gap: 10px;
     padding: 10px 6px;
     border-radius: 6px;
     border-bottom: 0.5px solid var(--border);
     transition: background 0.15s ease;
 }
 
 .related-products-summary__item:hover {
     background: #FCFAF8;
 }
 
 .related-products-summary__item:last-child {
     border-bottom: 0;
 }
 
 .related-products-summary__item img {
     width: 40px;
     height: 40px;
     border: 0.5px solid var(--border);
     border-radius: 6px;
     object-fit: contain;
     background: #FCFAF8;
 }
 
 .related-products-summary__item-title {
     overflow: hidden;
     color: var(--text-primary);
     font-size: 13px;
     line-height: 1.3;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .related-products-summary__quantity {
     padding: 3px 9px;
     border-radius: 10px;
     background: #FCFAF8;
     color: var(--text-secondary, #6E6E6E);
     font-size: 12px;
     font-weight: 700;
     white-space: nowrap;
 }
 
 .related-products-summary__remove {
     width: 32px;
     height: 32px;
     border: 0;
     border-radius: 6px;
     background: transparent;
     color: var(--text-secondary);
     cursor: pointer;
 }
 
 .related-products-summary__remove:hover {
     color: var(--fill-danger);
     background: rgba(199, 0, 30, 0.08);
 }
 
 @media (max-width: 1024px) {
 
     .related-products-summary__actions {
         gap: 10px;
     }
 }
 
 @media (max-width: 767px) {
 
     .related-products__heading {
         padding-right: 0;
         padding-left: 0;
     }
 
     .related-products {
         padding: 0;
     }
 
     .product-carousel {
         gap: 6px;
     }
 
     .product-carousel__track {
         gap: 14px;
     }
 
     .product-carousel__nav {
         flex-basis: 34px;
         width: 34px;
         height: 34px;
     }
 
     .product-carousel__nav--prev {
         left: 6px;
     }
 
     .product-carousel__nav--next {
         right: 6px;
     }
 
     .product-carousel__track .product-card {
         flex: 0 0 100% !important;
         width: 100% !important;
         min-width: 0;
         padding: 18px;
     }
 
     .related-products-summary {
         min-height: 0;
         padding: 16px;
         display: grid;
         grid-template-columns: 1fr;
     }
 
     .related-products-summary__main,
     .related-products-summary__actions {
         width: 100%;
     }
 
     .related-products-summary__actions {
         flex-wrap: wrap;
         justify-content: flex-start;
         padding-top: 12px;
     }
 
     .related-products-summary__view-cart {
         flex: 1 1 100%;
         width: 100%;
     }
 
 
     .product-buybox__form .single_add_to_cart_button,
 .product-buybox__form button[type="submit"] {
     flex: 0;
 }
 }
/*
 * Real brand logo images (dcsupplies_get_brand_logo_html output) were
 * rendering at full native resolution because neither the modifier
 * class (.product-card__brand-icon--logo) nor the <img> class
 * (.product-card__brand-logo) had any size constraint defined —
 * only the plain text-badge wrapper (.product-card__brand-icon) did.
 */
.product-card__brand-icon--logo,
.dcs-card__brand-icon--logo {
    background: transparent;
    padding: 0;
    max-width: 88px;
}

.product-card__brand-logo,
.dcs-card__brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 142px;
    max-height: 88px;
    object-fit: contain;
}