/*
Theme Name: DC Supplies Theme
Theme URI: https://www.dcsupplies.net/
Author: DC Supplies
Author URI: https://www.dcsupplies.net/
Description: Custom WooCommerce theme for DC Supplies, inspired by Newegg Business.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dcsupplies-theme
*/

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:      #9B1E22;
    --primary-dark: #7A171B;
    --accent:       #9B1E22;
    --accent-dark:  #7A171B;
    --red:          #9B1E22;
    --text:         #12181E;
    --text-light:   #6E6E6E;
    --bg:           #FCFAF8;
    --border:       #E2E2E2;
    --white:        #FFFFFF;
    --footer-bg:    #0D0D0D;
    --sidebar-bg:   #0D0D0D;
    --navy:         #0D0D0D;   /* was referenced but never defined — CTA banner gradient rendered blank */
    --navy-2:       #1A1A1A;

    /* Tokens referenced by woocommerce-cart-checkout.css
       (added here so cart/checkout render correctly) */
    --accent-fg:    #FFFFFF;   /* text color on top of --accent buttons */
    --card:         #FFFFFF;   /* card / table backgrounds */
    --sidebar:      #0D0D0D;   /* cart totals & order review sidebar bg */
    --radius:       10px;      /* shared corner radius */
    --brand-red:    #9B1E22;   /* required-field asterisk, etc. */
    --muted:        #6E6E6E;   /* secondary/quiet text */
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER — 3-ROW NEWEGG BUSINESS LAYOUT
═══════════════════════════════════════════════════════════════════ */


.site-branding img { height: 52px; width: auto; }
.site-branding .custom-logo { height: 52px; width: auto; }

.search-form-outer { flex: 1; display: flex; }
.search-form-outer form { display: flex; width: 100%; }

.search-cat-select {
    border: none;
    border-right: 1px solid #6E6E6E;
    padding: 0 12px;
    font-size: 13px;
    background: #F4EFEB;
    color: var(--text);
    outline: none;
    cursor: pointer;
    max-width: 53px;
    flex-shrink: 0;
}
.search-cat-select:focus { background: #E2E2E2; }

.search-input-field {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    border: none;
    outline: none;
    font-family: inherit;
    min-width: 0;
}
.search-submit-btn {
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    padding: 0 24px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 3px 3px 0;
    transition: background 0.15s;
}
.search-submit-btn:hover { background: var(--accent-dark); }
.search-submit-btn .dashicons { font-size: 22px; width: 22px; height: 22px; }



/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE ABOVE-FOLD: LEFT SIDEBAR + HERO SLIDER
═══════════════════════════════════════════════════════════════════ */

.homepage-above-fold {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: stretch; /* hero banner matches the sidebar's height. Safe now
                              that submenus open as an absolute-positioned
                              flyout instead of pushing the sidebar taller. */
    gap: 9px;
}

/* Left Category Sidebar — fixed-width column. Submenus below open as an
   absolutely-positioned flyout (see .home-cat-sidebar__sublevel), so this
   box's own height never changes and the hero column never stretches. */
.home-cat-sidebar {
    position: relative; /* positioning context for the flyout submenus */
    flex: 0 0 210px;
    width: 210px;
    background: var(--sidebar-bg);
    z-index: 20;
    overflow: visible;
}
.home-cat-sidebar__list { padding: 0; margin: 0; }

/* Quick links panel — Net Terms / E-Procurement / Quote Request / Tax
   Exemption. Sits directly below the category list inside the same
   sidebar column, visually set apart with a slightly lighter navy card
   and small accent-colored bullet dots (Newegg Business-style). */
.home-cat-sidebar__quicklinks {
    list-style: none;
    margin: 10px;
    padding: 12px 14px;
    background: #1A1A1A;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}
.home-cat-sidebar__quicklinks li + li {
    margin-top: 8px;
}
.home-cat-sidebar__quicklink {
    position: relative;
    display: block;
    padding-left: 16px;
    color: rgba(255,255,255,0.88);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.home-cat-sidebar__quicklink::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
}
.home-cat-sidebar__quicklink:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Quote Request button in this list — match the footer's "Request a
   Quote" text link (solid white, 13px) instead of the dimmer default
   quicklink color. Hover stays white/underline like its siblings; the
   footer's red hover (see button.js-request-quote rules further down)
   is scoped to .footer-menu/.footer-accordion__content so it never
   applies here. */
.home-cat-sidebar__quicklink.js-request-quote {
    color: #FFFFFF;
    font-size: 13px;
    background: #1A1A1A;
}
.home-cat-sidebar__quicklink.js-request-quote:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.home-cat-sidebar__row {
    display: flex;
    align-items: stretch;
}
.home-cat-sidebar__link {
    flex: 1 1 auto;
    display: block;
    padding: 8px 16px;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.home-cat-sidebar__item > .home-cat-sidebar__row,
.home-cat-sidebar__subitem > .home-cat-sidebar__row {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Hover — a dark, slightly lighter-than-sidebar tone (matching the shop
   page's "By Category" widget), not white. Skipped on the currently
   expanded (active) row so it doesn't fight with the red active background. */
.home-cat-sidebar__item:not(.is-row-active) > .home-cat-sidebar__row .home-cat-sidebar__link:hover,
.home-cat-sidebar__subitem:not(.is-row-active) > .home-cat-sidebar__row .home-cat-sidebar__link:hover {
    background: #262626;
    color: #FFFFFF;
    text-decoration: none;
}

/* Active / expanded row — red highlight, matching the reference "By
   Category" widget on the shop page. */
.home-cat-sidebar__item.is-row-active > .home-cat-sidebar__row,
.home-cat-sidebar__subitem.is-row-active > .home-cat-sidebar__row {
    background: var(--accent);
}
.home-cat-sidebar__item.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link,
.home-cat-sidebar__subitem.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link {
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
}
.home-cat-sidebar__item.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link:hover,
.home-cat-sidebar__subitem.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link:hover {
    text-decoration: none;
}

.cat-toggle {
    flex: 0 0 auto;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.cat-toggle__arrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    transition: transform 0.15s ease, color 0.15s ease;
}
.home-cat-sidebar__row:hover .cat-toggle__arrow {
    color: #FFFFFF;
}
.is-row-active > .home-cat-sidebar__row .cat-toggle__arrow,
.cat-toggle[aria-expanded="true"] .cat-toggle__arrow {
    color: #FFFFFF;
}
.cat-toggle[aria-expanded="true"] .cat-toggle__arrow {
    transform: rotate(90deg);
}

/* Submenus (both the top-level flyout and, nested inside it, the
   grandchild flyout) open as an absolutely-positioned panel anchored to the
   right of their row. Being position: absolute takes them out of normal
   document flow — expanding one never changes the sidebar's own height, so
   it can never stretch the hero banner sitting next to it. Only one flyout
   per level is open at a time (see JS), and both levels share the exact
   same slide-and-fade transition so drilling down feels consistent. */
.home-cat-sidebar__item,
.home-cat-sidebar__subitem {
    position: relative;
}
.home-cat-sidebar__sublevel {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 100%;
    width: 230px;
    max-height: none;
    overflow: visible;
    background: var(--sidebar-bg);
    box-shadow: 6px 0 18px rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none; /* keeps it non-interactive while closed, without
                              the hard on/off snap that `visibility` causes —
                              that's what lets opacity + transform ease smoothly */
    transform: translateX(-28px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-cat-sidebar__sublevel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.home-cat-sidebar__link--level2 {
    padding-left: 16px;
    font-size: 12.5px;
}

/* Grandchild list (level 3) opens downward, in normal flow, inside the
   top-level flyout — it's the only level that doesn't cascade sideways.
   It still gets the same buttery fade + slide feel as the flyout above,
   just on the vertical axis, and JS animates max-height to the list's
   actual pixel height (instead of a big arbitrary cap) so short and long
   lists both ease in at the same, correctly-timed pace rather than
   snapping open. */
.home-cat-sidebar__sublevel--3 {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    box-shadow: none;
    background: rgba(0,0,0,0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-cat-sidebar__sublevel--3.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.home-cat-sidebar__sublevel--3 .home-cat-sidebar__link--level3 {
    padding-left: 32px;
    font-size: 12px;
    color: rgba(255,255,255,0.88);
}
.home-cat-sidebar__link--level3:hover {
    background: #262626;
    color: #FFFFFF;
    text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
   HOVER-TO-OPEN — same flyouts, opened by mouse hover instead of a
   click. Re-uses the exact opacity/transform transitions already
   defined above on .home-cat-sidebar__sublevel and
   .home-cat-sidebar__sublevel--3, so hovering feels identical to the
   old click-triggered open state, just smoother/instant on mouse-in.
   This works because .home-cat-sidebar__sublevel(--3) is a DOM child
   of the row it belongs to — hovering anywhere inside the open flyout
   (including its own grandchild flyout) keeps the parent's :hover
   active, so nothing closes while the cursor is still over it.
   Left in place alongside the existing is-open/aria-expanded/click
   logic, which still matters for touch and keyboard users (no hover
   on touch devices) — the two don't conflict, they just both end up
   toggling the same opacity/transform styles.
   ───────────────────────────────────────────────────────────────── */

/* Level 2 flyout (sideways) */
.home-cat-sidebar__item:hover > .home-cat-sidebar__sublevel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Level 3 / grandchild flyout (downward, nested inside level 2) */
.home-cat-sidebar__subitem:hover > .home-cat-sidebar__sublevel--3 {
    max-height: 800px; /* generous cap so any realistic list opens fully;
                           CSS can't animate to "auto", so a fixed value
                           is used instead of the JS-measured exact height */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Arrow rotates/brightens on hover too, matching the active/expanded look */
.home-cat-sidebar__item:hover > .home-cat-sidebar__row .cat-toggle__arrow,
.home-cat-sidebar__subitem:hover > .home-cat-sidebar__row .cat-toggle__arrow {
    color: #FFFFFF;
    transform: rotate(90deg);
}

/* Hero Area — fills remaining flex space next to the sidebar. Height is now
   set by its own content (the slider's aspect ratio / min-height below),
   not by matching the sidebar, so opening a category flyout never crops or
   distorts the banner image. */
.home-hero-area {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Hero Slider — fixed minimum height so the banner has a stable, predictable
   size regardless of what the sidebar next to it is doing. */
.hero-slider {
    position: relative;
    background: #0D0D0D;
    flex: 1 1 auto;
    min-height: 340px;
    overflow: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    /* object-fit: cover; */
    width: 100%;
    height: 100%;
    opacity: 1;
}

.hero-slide__content {
    position: relative;
    z-index: 2;
    padding: 32px 40px;
    color: #FFFFFF;
    max-width: 520px;
}
.hero-slide__eyebrow {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.hero-slide__title {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hero-slide__title em { color: var(--accent); font-style: normal; }
.hero-slide__sub {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 24px;
}
.hero-slide__cta {
    display: inline-block;
    background: var(--accent);
    color: #FFFFFF !important;
    padding: 11px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 3px;
    text-decoration: none !important;
    transition: background 0.15s;
}
.hero-slide__cta:hover { background: var(--accent-dark); }

.hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #FFFFFF;
    border: none;
    width: 38px;
    height: 56px;
    font-size: 22px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.hero-slider__arrow:hover { background: rgba(0,0,0,0.75); }
.hero-slider__arrow--prev { left: 0; border-radius: 0 4px 4px 0; }
.hero-slider__arrow--next { right: 0; border-radius: 4px 0 0 4px; }

.hero-slider__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}
.hero-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.hero-slider__dot.is-active { background: var(--accent); }

/* ── Mobile: kill the absolute sidebar + its 219px offset ──────────
   Nothing in this file ever reset these for small screens, which is
   what was pushing the hero/category grid/carousels sideways. Mobile
   already has its own hamburger + category drawer, so this sidebar
   is just hidden here rather than reflowed. */
   @media (max-width: 991px) {
    .homepage-above-fold { display: block; max-width: 100%; }
    .home-cat-sidebar { display: none; }
    .home-hero-area {
        display: block;
        margin: 7px;
       margin-top: 15px;
        padding: 10px;               /* margin around the banner, via padding
                                         on the wrapper so it doesn't interact
                                         with the slider's own aspect-ratio box */
        background: var(--sidebar-bg);
    }
    .hero-slider {
        flex: none;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        margin: 0;
        border-radius: 0;       /* flat corners */
    }
    .hero-slide__bg { object-fit: contain; } /* let the image scale by width instead of being cropped */
    .hero-slide__content { padding: 24px 20px; max-width: 100%; }
    .hero-slide__title { font-size: 22px; }
}
@media (max-width: 560px) {
    .hero-slide__content { padding: 20px 18px; }
}
/* Promo Mini Banners — now a standalone full-width section below
   .homepage-above-fold (see front-page.php), spanning under both the
   sidebar and hero columns above it, matching the reference layout. Uses
   the same 1280px container convention as the other homepage sections. */
.promo-mini-banners-section {
    max-width: 1280px;
    margin: 0 auto;
}
.promo-mini-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    background: #FFFFFF;
    padding: 6px 0 0 0;
}
.promo-mini-banner {
    background: var(--sidebar-bg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.15s;
    min-height: 90px;
    text-decoration: none !important;
    border-radius: 8px;
    overflow: hidden;
}
.promo-mini-banner:hover { background: #0D0D0D; text-decoration: none !important; }
.promo-mini-banner__text strong { display: block; font-size: 13px; color: #FFFFFF; font-weight: 700; margin-bottom: 4px; }
.promo-mini-banner__text span { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.4; }
.promo-mini-banner__icon {
    font-size: 28px;
    flex-shrink: 0;
}
.promo-mini-banner__icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}
.promo-mini-banner__cta {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
}

/* Image-only variant — a plain banner image, sized to fit without cropping
   or stretching. */
.promo-mini-banner--image-only {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-height: 90px;
    padding: 0;
    background: #0D0D0D;
}
.promo-mini-banner--image-only img {
    width: auto;
    height: 90px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Must come after the base .promo-mini-banners / .promo-mini-banner rules
   above — same specificity, so source order decides the winner. Some of
   these overrides used to live in the earlier 991px block near the top of
   the file, where the later, unconditional base rules (padding, border-
   radius, grid-template-columns) always won and silently cancelled them
   out. Keeping every mobile override for this component here, after the
   base rules, is what actually makes them apply. */
@media (max-width: 991px) {
    .promo-mini-banners { grid-template-columns: 1fr; }

    .promo-mini-banners-section {
        padding: 0 0px 10px;        /* left/right/bottom margin; top margin
                                         comes from the hero area's own
                                         bottom padding above it */
        background: var(--sidebar-bg);
       margin:7px;
    }
    .promo-mini-banners { gap: 10px; padding: 0; }
    .promo-mini-banner,
    .promo-mini-banner--image-only { border-radius: 0; }
    .promo-mini-banner--image-only { max-height: none; }
    /* Was width:100%, which force-upscaled the (small, ~401x106px) source
       images past their native resolution on phone screens — that's what
       was reported as "blurry / not HD". object-fit:contain + auto width
       renders at native size (or smaller, if the screen is narrower),
       never larger, so it stays sharp. The dark background (set on
       .promo-mini-banner--image-only above) fills any leftover space. */
    .promo-mini-banner--image-only img { width: auto; max-width: 100%; height: auto; object-fit: contain; }
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY SHOWCASE — CIRCULAR GRID
═══════════════════════════════════════════════════════════════════ */
.category-showcase {
    background: #FFFFFF;
    padding: 28px 0;
  
}
.category-showcase__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.category-showcase__header { text-align: center; margin-bottom: 28px; }
.category-showcase__title {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-bottom: 8px;
}
.category-showcase__subtitle {
    font-size: 13px;
    color: var(--primary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

.category-showcase__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.category-showcase__item { text-align: center; }
.category-showcase__item a {
    display: block;
    text-decoration: none !important;
}
.category-showcase__item a:hover .cat-circle {     border: 2px solid #eae2e2; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 16px 24px rgba(0, 0, 0, 0.06); }
/* .category-showcase__item a:hover .cat-name { color: var(--primary); } */

.cat-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #F0F0F0;
    border: 2px solid #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cat-circle img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}
.cat-circle .cat-icon { font-size: 52px; line-height: 1; }
.cat-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    transition: color 0.15s;
}
@media (max-width: 991px) {
    .category-showcase__grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
    .cat-circle { width: 100px; height: 100px; }
    .cat-circle img { width: 72px; height: 72px; }
    .cat-circle .cat-icon { font-size: 36px; }
}
@media (max-width: 480px) {
    .category-showcase__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Dot pagination for the phone swipe carousels (Who We Serve, Shop Our
   Wide Range) — replaces the native scrollbar line. Hidden by default
   since those sections are a normal, non-scrolling grid above the
   768px breakpoint; the carousel media query below turns it on. */
.carousel-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.carousel-dots__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.carousel-dots__dot.is-active {
    background: var(--primary);
    width: 16px;
    border-radius: 3px;
}
.who-we-serve .carousel-dots__dot { background: rgba(255,255,255,0.35); }
.who-we-serve .carousel-dots__dot.is-active { background: #FFFFFF; }
@media (max-width: 768px) {
    .carousel-dots { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════
   WHO WE SERVE
═══════════════════════════════════════════════════════════════════ */
.who-we-serve {
    background: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary-dark) 55%, #3a0a0d 100%);
    padding: 40px 16px;
}
.who-we-serve__inner { max-width: 1280px; margin: 0 auto; }
.who-we-serve__title {
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.who-we-serve__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.who-we-serve__card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 24px 16px;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
    display: block;
    text-decoration: none;
}
.who-we-serve__card:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-2px);
    text-decoration: none;
}
.who-we-serve__icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}
.who-we-serve__card h3 { font-size: 13px; font-weight: 700; color: #FFFFFF; margin: 0 0 4px; }
.who-we-serve__subtitle {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    margin: 0;
    line-height: 1.4;
}
@media (max-width: 991px) {
    .who-we-serve__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
    .who-we-serve__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   PURCHASING RESOURCES
═══════════════════════════════════════════════════════════════════ */
.purchasing-resources {
    background: var(--bg);
    padding: 44px 16px;
    border-bottom: 1px solid var(--border);
}
.purchasing-resources__inner { max-width: 1280px; margin: 0 auto; }
.purchasing-resources__title {
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.purchasing-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.purchasing-resources__card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px 22px;
    text-align: center;
}
.purchasing-resources__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 20px;
    margin-bottom: 14px;
}
.purchasing-resources__card h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.purchasing-resources__card p { font-size: 13.5px; color: var(--text-light); line-height: 1.5; margin: 0 0 16px; }
@media (max-width: 768px) {
    .purchasing-resources__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICES STRIP
═══════════════════════════════════════════════════════════════════ */
.services-strip { background: #6d0b0b; padding: 20px 16px; }
.services-strip__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
}
.service-block {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    padding: 8px 0;
    border-right: 1px solid rgba(255,255,255,0.2);
}
.service-block:last-child { border-right: none; }
.service-block__icon {
    font-size: 28px;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #FFFFFF; /* monochrome white — was colorful emoji, read as "kiddish" */
}
.service-block__title { font-size: 13px; font-weight: 700; }
.service-block__desc { font-size: 11px; opacity: 0.8; margin-top: 2px; }
@media (max-width: 768px) {
    .services-strip__inner { grid-template-columns: 1fr 1fr; }
    .service-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 12px; }
}
@media (max-width: 480px) {
    .services-strip__inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURED PRODUCTS
═══════════════════════════════════════════════════════════════════ */
.home-featured {
    padding: 32px 16px;
    background: var(--bg);
}
.home-featured__inner { max-width: 1280px; margin: 0 auto; }
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT CARDS
═══════════════════════════════════════════════════════════════════ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .archive-layout { grid-template-columns: 1fr; }
    .archive-sidebar { order: 2; }
}
@media (max-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.product-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: #6E6E6E; }

/* Compare checkbox: top-right pill over the card, above the image.
   !important on position/top/right/z-index guarantees it wins the
   top-right corner even if another absolutely-positioned element
   (e.g. the wishlist button) is also anchored there. */
.product-card__compare {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 6 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    user-select: none;
}
.product-card__compare:hover { color: var(--text); border-color: #6E6E6E; }
.product-card__compare input { margin: 0; cursor: pointer; }
.product-card__compare:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}

/* Floating "Compare (n)" bar, shown once 2+ products are selected */
.compare-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 120%);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--sidebar, #0D0D0D);
    color: #FFFFFF;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform .2s ease;
}
.compare-bar.is-visible { transform: translate(-50%, 0); }
.compare-bar__count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.compare-bar__clear {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.compare-bar__clear:hover { color: #FFFFFF; }
.compare-bar__go {
    background: var(--accent);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}
.compare-bar__go:hover { background: var(--accent-dark); color: #FFFFFF; }
@media (max-width: 480px) {
    .compare-bar { left: 12px; right: 12px; transform: translateY(120%); width: auto; }
    .compare-bar.is-visible { transform: translateY(0); }
}

.product-card__media-wrap { position: relative; }

.product-card__image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 12px;
    border-bottom: 1px solid #E2E2E2;
    background: #FCFAF8;
}
.product-card__image-wrap img {
    max-width: 100%;
    max-height: 171px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    display: block;
}

/* Discount badge on the product image (rendered by content-product.php)
   had no positioning rules at all, so it was rendering as a normal flex
   item next to the image instead of floating over it — the pair then
   centered together, which is what made the image itself look
   off-center/shifted whenever a badge was present. */
.product-card__discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: #c53030;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.product-card__body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.product-card__title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.product-card__title a { color: var(--text); text-decoration: none; }
.product-card__title a:hover { color: var(--primary); text-decoration: none; }

/* Price colors/sizes matched to the front page and Outlet page: current
   price in the brand red, crossed-out original price in near-black and
   smaller. get_price_html() only wraps in <del>/<ins> when a sale is
   active, so the plain rule below covers non-sale prices too. */
.product-card__price,
.product-card__price .woocommerce-Price-amount {
    color: #A91E22;
    font-weight: 700;
    font-size: 17px;
}
.product-card__price del,
.product-card__price del .woocommerce-Price-amount {
    color: #12181E !important;
    text-decoration: line-through;
    font-weight: 400;
    font-size: 13px;
}
.product-card__price ins,
.product-card__price ins .woocommerce-Price-amount {
    color: #A91E22 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
}

.product-card__sku { font-size: 11px; color: var(--text-light); }
.product-card__stock-in { font-size: 12px; color: #2a7a2a; font-weight: 600; }
.product-card__stock-out { font-size: 12px; color: var(--red); }
.product-card__footer { margin-top: auto; padding-top: 8px; }
.product-card__footer .button,
.product-card__footer a.button { width: 100%; text-align: center; font-size: 13px; }

/* Add to Cart was inheriting the bigger global .button padding (9px 20px)
   while Request Quote had no explicit padding of its own. Give both the
   same compact padding so they match. */
.product-card__footer .button,
.product-card__footer a.button,
.product-card__get-quote,
.product-card__add-to-cart {
    padding: 8px 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE / CATEGORY PAGE
═══════════════════════════════════════════════════════════════════ */
.archive-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    max-width: 1280px;
    margin: 20px auto;
    padding: 0 16px;
}
.archive-sidebar { align-self: start; }
.filter-sidebar {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 16px;
}
.filter-sidebar .widget-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.filter-sidebar ul li { margin-bottom: 6px; font-size: 13px; }
.filter-sidebar ul li a { color: var(--text); }
.filter-sidebar ul li a:hover { color: var(--primary); }


.archive-header {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 16px 16px 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    flex-wrap: wrap;
}
.archive-title { font-size: 18px; font-weight: 700; }
.archive-count { font-size: 13px; color: var(--text-light); }
.woocommerce-ordering select { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; border-radius: 3px; }

.no-results {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 48px;
    text-align: center;
}
.no-results p { margin-bottom: 16px; color: var(--text-light); }

/* ═══════════════════════════════════════════════════════════════════
   SINGLE PRODUCT
═══════════════════════════════════════════════════════════════════ */
.single-product-wrap {
    max-width: 1280px;
    margin: 20px auto;
    padding: 0 16px;
}
.single-product-layout {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    gap: 32px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 24px;
    margin-bottom: 20px;
    background: #FCFAF887;
}
.product-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.product-sku-line { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.product-price { font-size: 28px; font-weight: 700; color: var(--red); margin-bottom: 12px; }
.product-short-description { font-size: 13px; color: var(--text-light); margin-top: 16px; line-height: 1.6; }

.single-product__related {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════════ */
.nav-links { display: flex; gap: 4px; margin-top: 24px; justify-content: center; }
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: #FFFFFF;
    color: var(--text);
    font-size: 13px;
    border-radius: 2px;
    text-decoration: none;
    padding: 0 8px;
}
.page-numbers.current { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.page-numbers:hover:not(.current) { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   Note: .dcs-footer__grid, .dcs-subscribe, .dcs-footer__contact,
   .dcs-footer__social, and .dcs-footer__desc are already fully styled
   in main.css (incl. responsive breakpoints) — not duplicated here.
   This file only covers what main.css doesn't: the wrapper, the old
   .footer-col/.footer-menu naming footer.php still uses, and logo size.
═══════════════════════════════════════════════════════════════════ */
/* ─── Newsletter banner (sits above the footer) ─── */
/* Newsletter banner: a standalone rounded card with breathing room above
   and below, instead of a full-bleed bar fused directly onto the footer. */
.footer-newsletter {
    background: transparent;
    padding: 48px 16px;
}
.footer-newsletter__inner {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--sidebar, #0D0D0D);
    border-radius: 16px;
    padding: 36px 44px;
    box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.08));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-newsletter__text h3 {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
}
.footer-newsletter__text p {
    color: #C9C9C9;
    font-size: 13.5px;
    margin: 0;
}
.footer-newsletter__form { flex: 0 0 380px; max-width: 420px; }
.footer-newsletter__form.dcs-footer__subscribe form { max-width: 100%; }
@media (max-width: 640px) {
    .footer-newsletter { padding: 32px 16px; }
    .footer-newsletter__inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; border-radius: 12px; }
    .footer-newsletter__form { flex: 1 1 100%; max-width: 100%; }
}

.site-footer { background: var(--footer-bg); color: #E2E2E2;  }
.site-footer__inner { padding: 40px 0 0; }
.dcs-footer__grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

.footer-menu__static { color: #C9C9C9; font-size: 13px; line-height: 1.5; }

/* ─── Bottom bar: legal text left, social icons right ─── */
.dcs-footer__bottom {
    max-width: 1280px;
    margin: 32px auto 0;
    padding: 20px 16px;
    border-top: 1px solid #0D0D0D;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dcs-footer__legal {
    font-size: 12px;
    color: #C9C9C9;
    margin: 0;
}
.dcs-footer__legal a { color: #C9C9C9; text-decoration: none; }
.dcs-footer__legal a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) {
    .dcs-footer__bottom { flex-direction: column; text-align: center; justify-content: center; }
}

.dcs-footer__brand { display: flex; flex-direction: column; gap: 14px; }

/* White box behind the footer logo */
.dcs-footer__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.dcs-footer__brand .dcs-footer__logo img { height: 40px; width: auto; display: block; }

.footer-col h4 {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #0D0D0D;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.footer-menu li { margin-bottom: 8px; }
.footer-menu a { color: #FFFFFF; font-size: 13px; }
.footer-menu a:hover { color: var(--accent); text-decoration: none; }
.footer-trust { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #FFFFFF; }
.footer-trust span::before { content: '✔ '; color: #4caf50; }

.dcs-footer__subscribe h4 { color: #FFFFFF; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.dcs-footer__subscribe > p { color: #FFFFFF; font-size: 13px; margin-bottom: 14px; }

.site-info {
    border-top: 1px solid #0D0D0D;
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    max-width: 1280px;
    margin: 0 auto;
}
.site-info a { color: #FFFFFF; text-decoration: none; }
.site-info a:hover { color: var(--accent); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   WOOCOMMERCE OVERRIDES
═══════════════════════════════════════════════════════════════════ */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--primary);
    background: #F0F0F0;
    padding: 12px 16px;
    font-size: 13px;
    margin-bottom: 16px;
}
.woocommerce-breadcrumb {
    font-size: 12px;
    color: var(--text-light);
    padding: 8px 16px;
    max-width: 1280px;
    margin: 0 auto;
}
.woocommerce-breadcrumb a { color: var(--primary); }

.button, button.button, input[type="submit"] {
    display: inline-block;
    padding: 9px 20px;
    background: var(--accent);
    color: #FFFFFF !important;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    border-radius: 2px;
    text-decoration: none !important;
    transition: background 0.15s;
    font-family: inherit;
}
.button:hover { background: var(--accent-dark); text-decoration: none !important; }
.button.button-primary, input[type="submit"] { background: var(--primary); }
.button.button-primary:hover { background: var(--primary-dark); }

/*=========================================================
    PREMIUM MOBILE FOOTER
=========================================================*/

.mobile-footer{

    display:none;

    background:#0D0D0D;

    color:#FFFFFF;

    padding:42px 24px 30px;

}

/*------------------------------*/

.mobile-footer__brand{

    text-align:center;

    margin-bottom:36px;

}

.mobile-footer__brand img{

    width:150px;

    height:auto;

}

.mobile-footer__brand p{

    margin:16px auto;

    max-width:260px;

    color:#6E6E6E;

    font-size:14px;

    line-height:1.6;

}

.mobile-footer__phone{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#9B1E22;

    text-decoration:none;

    font-weight:600;

    font-size:16px;

}

/*------------------------------*/

.mobile-footer__nav{

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-footer__nav a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    color:#FFFFFF;

    text-decoration:none;

    font-size:15px;

    transition:.2s;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.mobile-footer__nav a:last-child{

    border-bottom:none;

}

.mobile-footer__nav a:hover{

    color:#9B1E22;

}

.mobile-footer__nav .dashicons{

    font-size:18px;

}

/*------------------------------*/

.mobile-footer__trust{

    padding:32px 0;

}

.mobile-footer__trust h4{

    margin-bottom:18px;

    font-size:16px;

    color:#FFFFFF;

}

.mobile-footer__trust ul{

    list-style:none;

    margin:0;

    padding:0;

}

.mobile-footer__trust li{

    position:relative;

    padding-left:22px;

    margin-bottom:14px;

    color:#E2E2E2;

    font-size:14px;

}

.mobile-footer__trust li:before{

    content:"✓";

    position:absolute;

    left:0;

    color:#4CAF50;

    font-weight:bold;

}

/*------------------------------*/

.mobile-footer__legal{

    border-top:1px solid rgba(255,255,255,.08);

    margin-top:24px;

    padding-top:24px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.mobile-footer__legal a{

    color:#6E6E6E;

    text-decoration:none;

    font-size:14px;

}

.mobile-footer__legal a:hover{

    color:#FFFFFF;

}

/*------------------------------*/

.mobile-footer__copyright{

    margin-top:22px;

    text-align:center;

    color:#6E6E6E;

    font-size:13px;

}

/*=========================================================*/

.desktop-footer{

    display:block;

}

.mobile-footer{

    display:none;

}

@media(max-width:1024px){

    .desktop-footer{

        display:none;

    }

    .mobile-footer{

        display:block;

    }
    /*-----------------------------------
    Accordion
-----------------------------------*/

.footer-accordion{

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-accordion__button{

    width:100%;

    background:none;

    border:none;

    color:#FFFFFF;

    padding:18px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

}

.footer-accordion__button .dashicons{

    transition:.3s;

}

.footer-accordion.active .dashicons{

    transform:rotate(180deg);

}



.footer-accordion__content{

    display:none;

    padding-bottom:16px;

}

.footer-accordion__content a{

    display:block;

    color:#E2E2E2;

    text-decoration:none;

    padding:10px 0 10px 18px;

    font-size:14px;

    transition:.2s;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.footer-accordion__content a:hover{

    color:#FFFFFF;

}

/* Give the "Request a Quote" button the same divider as its sibling
   links, and drop the border off whichever item ends up last so the
   list doesn't end on a double line against .footer-accordion's own
   bottom border. */
.footer-accordion__content a:last-child,
.footer-accordion__content button.js-request-quote:last-child{

    border-bottom:none;

}



.footer-single-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    color:#FFFFFF;

    text-decoration:none;

    border-bottom:1px solid rgba(255,255,255,.08);

    font-weight:600;

}

.footer-single-link:hover{

    color:#9B1E22;

}

}

/*=========================================================
    TABLET FOOTER (577px – 1024px)
    Two real grid columns: brand + nav on the left,
    subscribe/contact on the right, legal + copyright
    spanning the full width underneath. Everything shares
    the same column edges so it lines up cleanly.
=========================================================*/
@media (min-width: 577px) and (max-width: 1024px) {

    .mobile-footer {
        padding: 48px 40px 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 48px;
        row-gap: 8px;
    }

    /* the logo/description wrapper — reset the flex/centering
       that was meant for the phone layout, and place it as a
       normal grid item in the left column */
    .mobile-footer .dcs-footer__grid {
        display: block;
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .mobile-footer .dcs-footer__brand {
        text-align: left;
        max-width: 420px;
    }

    .mobile-footer__nav {
        grid-column: 1;
        grid-row: 2;
        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: none;
        margin-top: 20px;
    }

    .footer-accordion {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .footer-accordion__button {
        font-size: 16px;
        padding: 18px 0;
    }

    .footer-accordion__content a {
        font-size: 15px;
        padding: 10px 0 10px 4px;
    }

    .mobile-footer .dcs-footer__subscribe {
        grid-column: 2;
        grid-row: 1 / 3;
        max-width: 380px;
        margin: 0;
        text-align: left;
    }

    .mobile-footer .dcs-footer__subscribe .dcs-footer__contact {
        align-items: flex-start;
    }

    .mobile-footer .dcs-footer__social {
        justify-content: flex-start;
    }

    .mobile-footer__legal {
        grid-column: 1 / -1;
        justify-content: center;
        border-top: 1px solid rgba(255,255,255,.08);
        padding-top: 24px;
        margin-top: 16px;
    }

    .mobile-footer__copyright {
        grid-column: 1 / -1;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TEMPLATES — SHARED
═══════════════════════════════════════════════════════════════════ */
.dc-page-hero {
    background: var(--primary-dark);
    color: #FFFFFF;
    padding: 36px 0;
    margin-bottom: 40px;
}
.dc-page-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}
.dc-page-hero__title {
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.dc-page-hero__sub {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
}
.dc-page-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 60px;
}
.dc-section-title {
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--primary-dark);
    border-bottom: 3px solid var(--primary);
    padding-bottom: 10px;
    margin-bottom: 24px;
}

/* Category cards — Hard Drives, Networking */
.dc-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}
.dc-cat-card {
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.dc-cat-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-color: var(--primary);
    text-decoration: none;
    color: var(--primary);
}
.dc-cat-card__icon { font-size: 38px; }
.dc-cat-card__name { font-weight: 700; font-size: 15px; }
.dc-cat-card__count { font-size: 12px; color: #6E6E6E; }
.dc-cat-card__desc { font-size: 12px; color: #6E6E6E; }

/* Brands A-Z */
.dc-brands-page { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; }
.dc-brands-letter-group { margin-bottom: 28px; }
.dc-brands-letter {
    font-size: 20px;
    font-weight: 900;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 5px;
    margin-bottom: 12px;
    display: inline-block;
    min-width: 34px;
}
.dc-brands-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-brands-list a {
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dc-brands-list a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
    text-decoration: none;
}

/* Contact page */
.dc-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 60px;
}
.dc-contact-info h2,
.dc-contact-form-wrap h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary-dark);
}
.dc-contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    font-size: 15px;
}
.dc-contact-info__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.dc-contact-info__label { font-weight: 600; display: block; margin-bottom: 2px; }
.dc-contact-form label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: #12181E;
}
.dc-contact-form input,
.dc-contact-form select,
.dc-contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E2E2;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.dc-contact-form input:focus,
.dc-contact-form select:focus,
.dc-contact-form textarea:focus { outline: none; border-color: var(--primary); }
.dc-contact-form textarea { height: 130px; resize: vertical; }
.dc-contact-form .dc-btn-submit {
    background: var(--accent);
    color: #FFFFFF;
    border: none;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.dc-contact-form .dc-btn-submit:hover { background: var(--accent-dark); }
.dc-form-notice {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.dc-form-notice--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.dc-form-notice--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Customers page */
.dc-customers-page { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; }
.dc-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}
.dc-resource-card {
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    padding: 28px 24px;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dc-resource-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-color: var(--primary);
    text-decoration: none;
    color: var(--primary-dark);
}
.dc-resource-card__icon { font-size: 36px; }
.dc-resource-card__title { font-weight: 700; font-size: 15px; }
.dc-resource-card__desc { font-size: 13px; color: #6E6E6E; }

/* Info box */
.dc-info-box {
    background: #FCFAF8;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    padding: 28px 32px;
}
.dc-info-box h3 { font-size: 16px; font-weight: 700; color: var(--primary-dark); margin-bottom: 12px; }

/* CTA banner */
.dc-cta-banner {
    background: var(--navy);
    color: #FFFFFF;
    padding: 32px;
    border-radius: 8px;
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.dc-cta-banner__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.dc-cta-banner__sub { color: rgba(255,255,255,0.8); font-size: 14px; }

@media (max-width: 768px) {
    .dc-contact-layout { grid-template-columns: 1fr; }
    .dc-cta-banner { flex-direction: column; text-align: center; }

   
    
}



/* quote btn */
.quote-popup{
    position: fixed;
    inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.65);
    z-index: 999999999;
}

.quote-popup.active{
    display:flex;
}

.wpcf7 select{
    cursor:pointer;
    width:100%;
    height:42px;
    padding:0 38px 0 12px;
    border:1px solid #E2E2E2;
    border-radius:6px;
    background:#FFFFFF;
    font-size:14px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    transition:.2s;
}

.wpcf7 select:focus{
    border-color:#9B1E22;
    outline:none;
}

.quote-popup__wrapper{
    position:relative;
}

.quote-popup__content{
    background:#FFFFFF;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    width:680px;
    max-width:92vw;
    max-height:94vh;      /* was 80vh — gives content more room before it has to scroll */
    overflow-y:auto;
    padding:20px 26px;    /* was 24px 30px */
}

.quote-popup__close{
    position:absolute;
    top:-18px;
    right:-18px;
    width:42px;
    height:42px;
    background:#FFFFFF;
    border:none;
    border-radius:50%;
    font-size:22px;
    font-weight:600;
    box-shadow:0 4px 15px rgba(0,0,0,.25);
    transition:.2s;
    cursor:pointer;
}

.quote-popup__close:hover{
    background:#9B1E22;
    color:#FFFFFF;
}

.quote-popup__title{
    text-align:center;
    font-weight:700;
    font-size:22px;       /* was 28px */
    margin-bottom:14px;   /* was 20px */
}

.form_row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:10px;   /* new — was relying on flex gap alone, so rows had no vertical spacing */
}

.col50{
    width:calc(50% - 5px);
}

.col-12{
    width:100%;
}

.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select{
    width:100%;
    padding:9px 12px;     /* was 11px 14px */
    font-size:14px;       /* was 15px */
    border:1px solid #E2E2E2;
    border-radius:6px;
    box-sizing:border-box;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus{
    outline:none;
    border-color:#9B1E22;
    box-shadow:0 0 0 3px rgba(206,0,0,.12);
}

.wpcf7 textarea{
    min-height:70px;      /* was 100px */
    resize:vertical;
}

.wpcf7 input[readonly]{
    background:#FCFAF8;
}

.quote-btn,
.wpcf7-submit{
    width:100%;
    background:#9B1E22;
    color:#FFFFFF;
    border:none;
    padding:12px;         /* was 14px */
    font-size:15px;       /* was 16px */
    font-weight:600;
    border-radius:6px;
    cursor:pointer;
}

.submit-wrap{
    margin-top:12px;      /* was 18px */
}

.quote-popup__content::-webkit-scrollbar{
    width:8px;
}

.quote-popup__content::-webkit-scrollbar-thumb{
    background:#E2E2E2;
    border-radius:20px;
}

.quote-popup__content::-webkit-scrollbar-track{
    background:transparent;
}

@media(max-width:768px){
    .col50{
        width:100%;
    }
    .quote-popup__close{
        top:15px;
        right:15px;
    }
}
    /* email subscription form */
/* Newsletter row */



.dcs-subscribe__field{
    height:38px;
}

.dcs-subscribe__input{
    height:38px;
}

.dcs-subscribe__icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    color:#6E6E6E;
    pointer-events:none;
}



.dcs-subscribe__input::placeholder{
    color:rgba(255,255,255,.5);
}
.dcs-subscribe__input:focus{
    outline:none;
    box-shadow:none;
}

.dcs-subscribe__field .wpcf7-form-control-wrap{
    display:flex;
    flex:1;
    width:100%;
}
/* Remove Chrome autofill color */
.dcs-subscribe__input:-webkit-autofill,
.dcs-subscribe__input:-webkit-autofill:hover,
.dcs-subscribe__input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color:#12181E !important;
    transition:background-color 5000s ease-in-out 0s;
}

/* Subscribe button */
/* Icon-only submit button */

/* Icon-only submit button, orange */
.dcs-subscribe__button{
    position:relative;
    width:38px;
    height:38px;
    padding:0;
    flex-shrink:0;
    background:transparent;
    border:none;
    color:transparent;
    font-size:0;
    overflow:hidden;
    cursor:pointer;
    padding-bottom: 26px;
}

.dcs-subscribe__button::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:18px;
    height:18px;
    transform:translate(-50%,-50%);
    background-color:#9B1E22; /* match your phone-icon orange — adjust if it's a different hex */
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}
.dcs-subscribe__button:hover::after{
    background-color:#EADAD6; /* slightly lighter on hover */
}

.dcs-subscribe__button:active{
    background:#7A171B;
}

/* Success/Error message */
.wpcf7-response-output{
    margin:10px 0 0 !important;
    padding:8px 12px !important;
    font-size:13px;
    border-radius:4px;
    max-width:340px;
}

/* CF7 default green/red still shows through borders CF7 adds inline,
   but base text color should read on dark footer bg */
.dcs-footer__subscribe .wpcf7-response-output{
    color:#FFFFFF;
}

/* Newsletter form: CF7 appends the response/error message as the last
   child of the same flex row that holds the email field + Sign Up
   button, which used to squeeze it in beside them or push it below.
   Wrapping instead of nowrap + pulling it to order:-1 puts it on its
   own full-width line ABOVE the email/button row. */
.dcs-footer__subscribe form{
    flex-wrap: wrap;
}
.dcs-footer__subscribe .wpcf7-response-output{
    order: -1;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 10px !important;
}




.dcs-subscribe__input:-webkit-autofill,
.dcs-subscribe__input:-webkit-autofill:hover,
.dcs-subscribe__input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.06) inset !important;
    -webkit-text-fill-color:#FFFFFF !important;
    transition:background-color 5000s ease-in-out 0s;
}



/* ─── Footer newsletter form: reserve error space, tighten gap, icon button ─── */

/* Space above the field reserved for the validation error message */
.dcs-footer__subscribe .wpcf7-form,
.dcs-footer__subscribe form {
    margin-top: 18px;
}
.dcs-footer__subscribe .wpcf7-form p,
.dcs-footer__subscribe form p {
    margin: 0;
}

/* Remove the extra gap between the subscribe form and the phone/email/address block below it.
   CF7 injects a .screen-reader-response element after the form; if it isn't visually
   hidden it renders as an empty block and pushes the content below it down. */
.dcs-footer__subscribe .screen-reader-response {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.dcs-footer__subscribe form {
    margin-bottom: 0;
}
.dcs-footer__subscribe .wpcf7 {
    margin-bottom: 0;
}
.dcs-footer__contact--no-rule {
    margin-top: 0;
    padding-top: 0;
}

/* "Sign Up" text button instead of icon-only arrow */
.dcs-footer__subscribe input[type="submit"],
.dcs-footer__subscribe .wpcf7-submit {

    height: 36px;
    min-width: 110px;
    padding: 0 22px;
    flex-shrink: 0;
    background-color: #9B1E22;
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    text-indent: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.dcs-footer__subscribe input[type="submit"]:hover,
.dcs-footer__subscribe .wpcf7-submit:hover {
    background-color: #7A171B;
}

/* Defensive override: if the CF7 field also carries the older
   .dcs-subscribe__button icon-button class, force it back into a
   normal "Sign Up" text button and drop the arrow icon pseudo-element. */
.dcs-footer__subscribe .dcs-subscribe__button{
    width: auto;
    height: 48px;
    min-width: 110px;
    padding: 0 22px;
    color: #FFFFFF;
    font-size: 14px;
    overflow: visible;
}
.dcs-footer__subscribe .dcs-subscribe__button::after{
    content: none;
}
.dcs-footer__subscribe form {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    max-width: 340px;
}
.dcs-footer__subscribe .wpcf7-form-control-wrap {
    flex: 1;
    width: 100%;
}




/* Mobile */
@media(max-width:768px){
    .dcs-subscribe{
        flex-direction:column;
        max-width:100%;
    }

    .dcs-subscribe__field,
    .dcs-subscribe__button{
        width:100%;
    }

    .dcs-subscribe__input{
        border-radius:6px;
    }

    .dcs-subscribe__button{
        border-radius:6px;
        margin-top:10px;
    }

    /* Footer newsletter form specifically: keep the email field and the
       submit icon side-by-side on one row instead of stacking, at every
       phone width down to the smallest supported screens. */
    .dcs-footer__subscribe,
    .dcs-footer__subscribe form,
    .dcs-footer__subscribe .wpcf7 {
        width: 100%;
        max-width: 100%;
    }

    .dcs-footer__subscribe .dcs-subscribe {
        flex-direction: row !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .dcs-footer__subscribe .dcs-subscribe__field {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .dcs-footer__subscribe input[type="submit"],
    .dcs-footer__subscribe .wpcf7-submit {
        min-width: 90px;
        height: 44px;
        padding: 0 16px;
        font-size: 13px;
        flex-shrink: 0;
        margin-top: 0;
    }
}

@media(max-width:400px){
    .dcs-footer__subscribe .dcs-subscribe__input,
    .dcs-footer__subscribe input[type="email"] {
        font-size: 13px;
    }

    .dcs-footer__subscribe input[type="submit"],
    .dcs-footer__subscribe .wpcf7-submit {
        min-width: 76px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* ─── Newsletter field/button alignment fix (mobile) ─────────────────────
   A separately-loaded stylesheet (main.css) also targets .dcs-subscribe
   and fights this file's row layout, which is what was causing the email
   field and Sign Up button to stack instead of sitting side by side. This
   block pins every property involved with !important so it wins
   regardless of load order. */
@media (max-width: 768px) {
    .dcs-footer__subscribe .dcs-subscribe,
    .footer-newsletter__form .dcs-subscribe {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .dcs-footer__subscribe .dcs-subscribe__field,
    .footer-newsletter__form .dcs-subscribe__field {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin-top: 0 !important;
    }

    .dcs-footer__subscribe .dcs-subscribe__field .wpcf7-form-control-wrap {
        width: 100% !important;
    }

    .dcs-footer__subscribe input[type="submit"],
    .dcs-footer__subscribe .wpcf7-submit,
    .footer-newsletter__form input[type="submit"],
    .footer-newsletter__form .wpcf7-submit {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-top: 20px !important;
    }
}

.wpcf7-spinner {
 height: 0;
}

/* ─── Mobile header logo: prevent distortion ──────────────────────────────
   The mobile logo <img> carries fixed width/height attributes (180x46).
   Without an explicit CSS override the browser stretches the real logo
   file to exactly that box, squashing it. This lets it scale
   proportionally instead, the same way the desktop logo already does
   via .site-branding img. */
.mobile-header__logo img,
.mobile-header__logo .custom-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
}
/* ─── Mobile Utility Bar: Phone + Request a Quote (row 1),
   B2B Accounts dropdown (row 2) ────────────────────────────────────────────
   Mirrors the desktop utility bar (.header-utility-bar) and the desktop
   B2B Accounts dropdown (.subnav-dropdown) but split into two rows on
   mobile so nothing feels cramped, and given its own stacking context so
   the dropdown panel is never hidden behind the search bar underneath it. */
.mobile-utility-bar {
    display: none;
    flex-direction: column;
    background: var(--sidebar-bg);
    position: relative !important;
    isolation: isolate; /* own stacking context: keeps z-index below contained,
                            no matter what the sibling search bar does */
    z-index: 9999 !important;
}

.mobile-utility-bar__row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
}

.mobile-utility-bar__phone {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-utility-bar__phone .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.mobile-utility-bar__quote {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
}

.mobile-utility-bar__quote .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

.mobile-utility-bar__quote:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.mobile-utility-bar__b2b {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-utility-bar__b2b-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 12px;
    cursor: pointer;
}

.mobile-utility-bar__b2b-chev {
    font-size: 15px;
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.mobile-utility-bar__b2b.is-open .mobile-utility-bar__b2b-chev {
    transform: rotate(180deg);
}

.mobile-utility-bar__b2b-panel {
    display: none;
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sidebar-bg);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    padding: 6px 0;
    z-index: 10000 !important;
}

.mobile-utility-bar__b2b.is-open .mobile-utility-bar__b2b-panel {
    display: block;
}

.mobile-utility-bar__b2b-panel a {
    display: block;
    padding: 12px 16px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-utility-bar__b2b-panel a:last-child {
    border-bottom: none;
}

.mobile-utility-bar__b2b-panel a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

@media (max-width: 1024px) {
    .mobile-utility-bar {
        display: flex;
    }
}

@media (max-width: 360px) {
    .mobile-utility-bar__phone {
        font-size: 12px;
    }

    .mobile-utility-bar__quote {
        font-size: 11px;
        padding: 7px 10px;
    }
}

/*
 * 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.
 * Fixed with !important below since dcsupplies_get_brand_logo_html()
 * appears to emit an inline height on the <img>, which otherwise beats
 * any external stylesheet rule regardless of specificity.
 *
 * Second issue, reported after the first fix: a flat "height: 14px"
 * on the <img> doesn't render every brand at the same visual size —
 * a wide wordmark logo and a small/low-res square icon logo (e.g.
 * HPE's) scale completely differently under a plain height clamp, so
 * some brands ended up looking near-invisible next to others. Switched
 * to a fixed-size flex box (the wrapper) with the <img> filling its
 * full height via object-fit: contain — this scales EVERY logo (up or
 * down, regardless of source resolution or aspect ratio) to the same
 * visual weight, the way a real logo-badge grid should behave.
 */
 .product-card__brand-icon--logo,
 .dcs-card__brand-icon--logo {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     width: 96px !important;
     height: 32px !important;
     background: transparent;
     padding: 0 !important;
     overflow: hidden;
     flex-shrink: 0;
 }
 
 .product-card__brand-logo,
 .dcs-card__brand-logo,
 .product-card__brand-icon--logo img,
 .dcs-card__brand-icon--logo img {
     display: block !important;
     width: auto !important;
     height: auto !important;
     max-width: 100% !important;
     max-height: 100% !important;
     object-fit: contain !important;
     object-position: center !important;
     margin: 0 auto !important;
 }

/*
 * Price colors on homepage carousel cards, matched to the Outlet page:
 * current/sale price in the brand red, crossed-out original price in
 * near-black. get_price_html() wraps the old price in <del> and the
 * new price in <ins> only when a sale is active — a non-sale price
 * has no <del>/<ins> at all, so it's covered by the plain rule below.
 */
.dcs-card__price,
.dcs-card__price .woocommerce-Price-amount {
    color: #A91E22;
    font-weight: 700;
    font-size: 17px;
}

.dcs-card__price del,
.dcs-card__price del .woocommerce-Price-amount {
    color: #12181E !important;
    text-decoration: line-through;
    font-weight: 400;
    font-size: 13px;
}

.dcs-card__price ins,
.dcs-card__price ins .woocommerce-Price-amount {
    color: #A91E22 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
}

button.js-request-quote {
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    cursor: pointer;
}

/* Keep keyboard accessibility — only show a focus ring when
   tabbing to the button, not on a mouse click */
button.js-request-quote:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}
.footer-menu button.js-request-quote {
    display: inline;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Mobile accordion links are display:block with 10px 0 10px 18px padding
   (see .footer-accordion__content a) — match that box model here so the
   button lines up with the rest of the list instead of sitting flush-left. */
.footer-accordion__content button.js-request-quote {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 10px 0 10px 18px;
    margin: 0;
    font: inherit;
    font-size: 14px;
    color: #E2E2E2;
    text-align: left;
    cursor: pointer;
}

.footer-menu button.js-request-quote:hover,
.footer-accordion__content button.js-request-quote:hover {
    color: #9B1E22; /* match whatever your .footer-menu a:hover already does */
}

.footer-menu button.js-request-quote:focus-visible,
.footer-accordion__content button.js-request-quote:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP BY BRAND — compact block grid
   Was rendering as one full-width column per brand with a lot of
   empty space to the right of the text (name/tag/Shop stacked on
   the left, nothing filling the rest of the card). This turns it
   into a real grid of small, evenly-sized blocks so brands sit
   side-by-side instead of each eating a full screen-width row.
═══════════════════════════════════════════════════════════════════ */
.home-brands-v2 { padding: 40px 16px; }
.home-brands-v2__inner { max-width: 1280px; margin: 0 auto; }

.brands-v2-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-top: 24px;
}

.brand-v2-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 16px !important;
    gap: 4px;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
}
.brand-v2-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    text-decoration: none !important;
}
.brand-v2-card__logo {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 800;
}
.brand-v2-card__tag {
    color: rgba(255, 255, 255, 0.65);
    font-size: 11.5px;
    line-height: 1.3;
}
.brand-v2-card__cta {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
}

@media (max-width: 991px) {
    .brands-v2-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
    .brands-v2-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 18px; }
    .brand-v2-card { padding: 14px !important; }
    .brand-v2-card__logo { font-size: 15px; }
    .brand-v2-card__tag { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DENSITY PASS — fixes the "too zoomed in" feel vs. the
   Newegg Business reference. The mobile view was showing fewer,
   larger elements per screen (tall hero, bulky utility bar, generous
   section padding); this tightens spacing and font sizes at mobile
   widths so more content is visible per screen without changing
   layout structure.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mobile-utility-bar__row1 { padding: 7px 12px; }
    .mobile-utility-bar__quote { padding: 6px 10px; }
    .mobile-utility-bar__b2b-toggle { padding: 7px 12px; font-size: 11px; }

    .hero-slider { aspect-ratio: 16 / 8; }
    .hero-slide__content { padding: 16px; }
    .hero-slide__title { font-size: 19px; margin-bottom: 6px; }
    .hero-slide__sub { font-size: 13px; margin-bottom: 14px; }
    .hero-slide__cta { padding: 8px 20px; font-size: 13px; }

    /* Product cards (shop grid, related-products carousel, Featured
       Products page) — shorter image area, smaller heading/badge/button
       type so more of the grid is visible per screen on phone.
       !important is used throughout this card block because the title/
       price/footer rules exist at the same specificity elsewhere in
       this file and, without it, source order alone wasn't reliably
       winning on every card variant. */
    .product-card__image-wrap { height: 96px !important; padding: 6px !important; }
    .product-card__image-wrap img { max-height: 82px !important; }
    .product-card__body { padding: 7px 8px !important; gap: 2px !important; }
    .product-card__title {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card__model,
    .product-card__condition {
        font-size: 10px !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-card__sku,
    .product-card__stock-in,
    .product-card__stock-out { font-size: 10px !important; }
    .product-card__price,
    .product-card__price .woocommerce-Price-amount { font-size: 13px !important; }
    .product-card__price del,
    .product-card__price del .woocommerce-Price-amount { font-size: 10.5px !important; }
    .product-card__price ins,
    .product-card__price ins .woocommerce-Price-amount { font-size: 13px !important; }
    .product-card__footer { padding-top: 4px !important; }

    /* Badges — sale/discount badge and the Compare pill */
    .product-card__discount-badge { font-size: 10px !important; padding: 3px 7px !important; top: 6px; left: 6px; }
    .product-card__compare { padding: 3px 6px !important; font-size: 10px !important; gap: 4px; top: 6px; right: 6px; }

    /* Buttons — Add to Cart / Request Quote on the card, and the
       text-only brand badge when a real brand logo isn't available */
    .product-card__footer .button,
    .product-card__footer a.button,
    .product-card__get-quote,
    .product-card__add-to-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13.5px !important;
        padding: 11px 6px !important;
        gap: 4px !important;
    }
    .product-card__get-quote svg,
    .product-card__add-to-cart svg { width: 12px !important; height: 12px !important; }
    .product-card__brand-icon { font-size: 10px !important; padding: 2px 6px !important; }

    /* Real brand-logo images: same fixed-box technique as the base rule
       above. Kept close to the base size (not shrunk down further) —
       a smaller box was making logos hard to read on phone — every
       logo, whatever its native resolution or aspect ratio, is still
       centered inside an identical box so brands read as one
       consistent, clearly-visible row. */
    .product-card__brand-icon--logo,
    .dcs-card__brand-icon--logo {
        width: 84px !important;
        height: 28px !important;
    }

    /* Homepage product carousels (dcs-card / dcs-carousel) */
    .dcs-card__media { padding: 10px; }
    .dcs-card__body { padding: .6rem; gap: .3rem; }
    .dcs-card__title {
        font-size: .76rem !important;
        min-height: 0 !important;
        -webkit-line-clamp: 2;
    }
    .dcs-card__brand { font-size: .62rem; }
    .dcs-card__badge { font-size: .58rem; padding: .18rem .5rem; top: .5rem; left: .5rem; }
    .dcs-card__price { font-size: 13px !important; }
    .dcs-card__price-now { font-size: .82rem !important; }
    .dcs-card__price-old { font-size: .68rem; }
    .dcs-btn { font-size: .76rem !important; padding: .55rem .85rem !important; gap: .3rem !important; }

    /* Who We Serve — swipeable single-row carousel on phone */
    .who-we-serve { padding: 22px 0 22px 16px; }
    .who-we-serve__title { font-size: 16px; margin-bottom: 14px; padding-right: 16px; }
    .who-we-serve__grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* -webkit-overflow-scrolling: touch removed — on iOS Safari this
           combined with border-radius + overflow:hidden + transition on
           child elements (.who-we-serve__card) triggers a known WebKit
           compositing bug that paints a solid black bar over the row
           during/after scroll. Modern iOS scrolls overflow-x:auto with
           native momentum by default, so this property is no longer
           needed and removing it removes the bug. */
        gap: 10px;
        padding-right: 16px;
        padding-bottom: 6px;
        margin-right: -16px;
        scrollbar-width: none;
    }
    .who-we-serve__grid::-webkit-scrollbar { display: none; }
    .who-we-serve__card {
        flex: 0 0 108px;
        scroll-snap-align: start;
        padding: 12px 8px;
    }
    .who-we-serve__icon { width: 32px; height: 32px; margin-bottom: 6px; }
    .who-we-serve__card h3 { font-size: 10.5px; line-height: 1.25; margin: 0 0 2px; }
    .who-we-serve__subtitle { font-size: 9px; line-height: 1.3; }

    /* Shop Our Wide Range of Business Products — swipeable carousel of
       category circles on phone, smaller heading to match. */
    .category-showcase { padding: 22px 0; }
    .category-showcase__header { padding: 0 16px; margin-bottom: 16px; }
    .category-showcase__title { font-size: 15px; margin-bottom: 6px; }
    .category-showcase__subtitle { font-size: 11.5px; }
    .category-showcase__grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* -webkit-overflow-scrolling: touch removed — on iOS Safari this
           combined with border-radius + overflow:hidden + transition on
           .cat-circle triggers a known WebKit compositing bug that paints
           a solid black bar over this row during/after scroll (the bug
           reported on the homepage "Shop Our Wide Range" section).
           Modern iOS scrolls overflow-x:auto with native momentum by
           default, so this property is no longer needed and removing it
           removes the bug. */
        gap: 14px;
        padding: 2px 16px 8px;
        scrollbar-width: none;
    }
    .category-showcase__grid::-webkit-scrollbar { display: none; }
    .category-showcase__item { flex: 0 0 82px; scroll-snap-align: start; }
    .cat-circle { width: 72px; height: 72px; margin: 0 auto 8px; }
    .cat-circle img { width: 50px; height: 50px; }
    .cat-circle .cat-icon { font-size: 28px; }
    .cat-name { font-size: 10.5px; }

    .purchasing-resources { padding: 28px 16px; }
    .purchasing-resources__title { font-size: 18px; margin-bottom: 18px; }
    .purchasing-resources__card { padding: 20px 16px; }

    .services-strip { padding: 14px 16px; }

    .home-brands-v2 { padding: 26px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE HEADER v3 — 2 calm rows, per reference design
   Row 1: hamburger + logo  ⋯  phone / wishlist / account / cart icons
   Row 2: full-width search  +  B2B chip  +  red Quote button
   One red accent only (Quote button + cart badge) — everything else
   is neutral so the header doesn't compete with page content.
═══════════════════════════════════════════════════════════════════ */

/* ── Row 1: menu + logo + icon cluster ─────────────────────────── */
.mobile-header__top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mobile-header__menu-btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    color: var(--text);
    cursor: pointer;
}
.mobile-header__menu-btn .dashicons { font-size: 20px; width: 20px; height: 20px; }

.mobile-header__logo { flex: 0 0 auto; margin-right: auto; }
.mobile-header__logo img,
.mobile-header__logo .custom-logo {
    height: 26px !important;
    width: auto !important;
    max-width: 100%;
    display: block;
}

.mobile-header__top-icons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.mobile-header__icon-btn {
    all: unset;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text) !important;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: none !important;
    border: none !important;
}
.mobile-header__icon-btn svg { display: block; }

.mobile-header__icon-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 8px;
    padding: 0 3px;
}
.mobile-header__icon-badge.is-hidden { display: none; }

/* ── Row 2: search + B2B + Quote ───────────────────────────────── */
.mobile-header__bar2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    background: var(--sidebar-bg);
    padding: 10px 12px 12px;
}

.mobile-header__bar2-search { flex: 1 1 auto; min-width: 0; }
.dcs-mheader2-search-form {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 40px !important;
    background: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.dcs-mheader2-search-icon {
    flex: 0 0 auto !important;
    margin-left: 12px !important;
    color: var(--text-light) !important;
    pointer-events: none;
}
.dcs-mheader2-search-input {
    all: unset !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--text) !important;
    background: transparent !important;
}
.dcs-mheader2-search-input::placeholder { color: var(--text-light); }
/* Search icon is decorative-only (see .dcs-mheader2-search-icon above);
   the submit button stays in the DOM for Enter-key/native submission
   but isn't shown, since the reference design has no separate search
   button — tapping the icon area or the return key both submit. */
.mobile-header__bar2-search-submit {
    all: unset !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.mobile-header__bar2-b2b {
    flex: 0 0 auto;
    position: relative;
    border-top: none !important;
}
.mobile-header__bar2-b2b .mobile-utility-bar__b2b-toggle {
    display: flex !important;
    align-items: center;
    gap: 2px;
    padding: 0 10px !important;
    height: 40px;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    width: auto !important;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: #FFFFFF;
    white-space: nowrap;
}
.mobile-header__bar2-b2b .mobile-utility-bar__b2b-chev { font-size: 13px; width: 13px; height: 13px; }
.mobile-header__bar2-b2b .mobile-utility-bar__b2b-panel {
    left: auto !important;
    right: 0 !important;
    min-width: 220px;
}

.mobile-header__bar2-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    padding: 0 16px;
    height: 40px;
    border-radius: 8px;
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .mobile-header__top,
    .mobile-header__bar2 { display: flex; }
}