:root {
    --evo-brand-default: #493493;
    --evo-brand-secondary: #ffd344;
    --evo-brand-accent: #DBD6E9;
    --evo-text-col: #404041;
    --evo-font-size-base: .9em;
    --evo-font-size-h1: 2em;
    --evo-font-size-h2: 1.75em;
    --evo-font-size-h3: 1.5em;
    --evo-font-size-h4: 1.125em;
    --evo-font-size-h5: 1em;
    --evo-font-size-h6: .875px;
    --evo-link-color: #404041;
    --evo-link-hover-color: #000000;
    --evo-header-background: transparent;
    --evo-header-text: #404041;
    --evo-footer-background: #493493;
    --evo-footer-text: #ffffff;
    --evo-brand-accent: #edebf4;
    --evo-btn-default-color: #404041;
    --evo-btn-default-bg: #ffd344;
    --evo-btn-default-color-hover: #ffffff;
    --evo-btn-default-bg-hover: #ffc711;
  	--evo-page-bg-light: #f7f8fb;
   --pdp-bg: #f7f8fb;
  --pdp-card: #ffffff;
  --pdp-muted: #6b7280;
  --pdp-ink: #111827;
  --pdp-brand: #6d28d9;
  --pdp-brand-700: #5b21b6;
  --pdp-line: #eef0f5;
  --pdp-radius-lg: 16px;
  --pdp-radius-md: 12px;
  --pdp-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}


/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 17 Jan 2026, 12:16:00
    Author     : DavidOBrien
*/


/* =========================================================
   Global button background colour
   ========================================================= */
.btn-default,
.btn-primary,
.btn-sm,
.btn-xs {
    background-color: var(--evo-brand-secondary);
}


/* =========================================================
   Header Section 1 – Promo Bar
   ========================================================= */

header .header-full > .headersection-1 {
    /* Visual design */
    background-color: var(--evo-brand-default);
    border-bottom: 2px solid #bbb0e3;
    color: #fff;
    text-align: center;

    /* Override global header padding */
    padding: 5px 0;

    /* CLS protection */
    line-height: 1.3;
}

/* Ensure inner content doesn’t reintroduce spacing issues */
header .header-full > .headersection-1 .row {
    margin-left: 0;
    margin-right: 0;
}

header .header-full > .headersection-1 .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Header Section 1 – ensure links are white */
header .header-full > .headersection-1 a {
    color: #fff;
}

header .header-full > .headersection-1 a:hover,
header .header-full > .headersection-1 a:focus {
    color: #fff;
    text-decoration: underline; /* keeps affordance */
}


/* =========================================================
   Header Section 2 – Utility Links
   ========================================================= */

header .header-full > .headersection-2 {
    background-color: #36276d;
    padding: 6px 0;
    line-height: 1.4;

    /* This controls the | separators */
    color: var(--evo-brand-default);
}

header .header-full > .headersection-2 .header-links {
    font-size: 1em;
}

header .header-full > .headersection-2 .header-links a {
    color: #fff;
    display: inline-flex;
    transition: color .35s ease;
    padding: 0 8px;
}

header .header-full > .headersection-2 .header-links a:last-child {
    margin-right: 0;
}

header .header-full > .headersection-2 .header-links a:hover,
header .header-full > .headersection-2 .header-links a:focus {
    color: #e6e2ff;
    text-decoration: none;
}

@media (max-width: 767px) {
    header .header-full > .headersection-2 .header-links {
        text-align: center;
    }
}

/* =========================================================
   Header Section 2 – Right-aligned links padding fix
   ========================================================= */

header .header-full > .headersection-2 .header-links.text-right a:last-child {
    padding-right: 0;
}

/* =========================================================
   Header Section 3 – Core Header (background only for now)
   ========================================================= */

header .header-full > .headersection-3 {
    background-color: var(--evo-brand-default);
}

/* =========================================================
   Header Section 3 – Logo sizing
   ========================================================= */

header .header-full > .headersection-3 .widgetlogo img {
    max-height: 70px !important;
    width: auto;
}

/* Decorative strapline under logo – positioned relative to logo image.
   Uses bottom anchoring to remain stable if logo height changes. */


header .logo {
    position: relative; /* anchor for ::after */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

header .logo img {
    display: block;
}

header .logo::after {
    position: absolute;
    bottom: -5px;
    left: 76px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

body.ex-branch-363 header .logo::after,
body.ex-branch-463 header .logo::after {
    content: "Ireland\2019s Trusted Choice";
}

body.ex-branch-995 header .logo::after {
    content: "Britain\2019s Trusted Choice";
}


@media (max-width: 767px) {
    header .logo::after {
        display: none;
    }
}



/* =========================================================
   Header Section 3 – Custom column widths
   ========================================================= */

/* Tablet+ baseline */
@media (min-width: 768px) {
    header .header-full > .headersection-3 .logo_container {
        width: 13%;
    }

    header .header-full > .headersection-3 .search_container {
        width: 61%;
    }

    header .header-full > .headersection-3 .shoppingtools_container {
        width: 15%;
    }

    header .header-full > .headersection-3 .minicart_container {
        width: 11%;
    }
}


/* Mid-desktop (fix “logo butting up to search”) */
@media (min-width: 992px) {
    header .header-full > .headersection-3 .logo_container {
        width: 14%;
    }

    header .header-full > .headersection-3 .search_container {
        width: 59%;
    }

    header .header-full > .headersection-3 .shoppingtools_container {
        width: 16%;
    }

    header .header-full > .headersection-3 .minicart_container {
        width: 11%;
    }
}


@media (min-width: 992px) {
    header .header-full > .headersection-3 .logo_container {
        padding-right: 8px;
    }
}


/* Large desktop (optional: reclaim search space for 1200+) */
@media (min-width: 1200px) {
    header .header-full > .headersection-3 .logo_container {
        width: 16%;
    }

    header .header-full > .headersection-3 .search_container {
        width: 58%;
    }

    header .header-full > .headersection-3 .shoppingtools_container {
        width: 15%;
    }

    header .header-full > .headersection-3 .minicart_container {
        width: 11%;
    }
}


/* =========================================================
   Header Section 3 – Vertical alignment (BS3-safe)
   ========================================================= */

header .header-full > .headersection-3 .row.row-3 {
    display: table;
    width: 100%;
    table-layout: fixed;   /* prevents “growing” columns from breaking layout */
}

header .header-full > .headersection-3 .row.row-3 > [class*="col-"] {
    float: none;           /* important: stop BS3 floats in this one row */
    display: table-cell;
    vertical-align: middle;
}

/* =========================================================
   Header Section 3 – Search button styling
   ========================================================= */

header .header-full > .headersection-3 .widgetsearch .search-form {
    position: relative; /* ensures the absolute button positions correctly */
}

/* Set a consistent input height (tune if your design uses a different height) */
header .header-full > .headersection-3 .widgetsearch .search-form .form-control {
    height: 40px;
    padding-right: 44px; /* room for the submit button */
    border-radius: 5px;  /* keep input radius; button will visually integrate */
}

/* Submit button: fill the input height and sit inside the right edge */
header .header-full > .headersection-3 .widgetsearch .search-form button[type="submit"] {
    background: var(--evo-brand-accent, #e6effb);
    color: #000; /* change if needed for contrast */
    border: 1px solid var(--evo-brand-accent, #e6effb);
    cursor: pointer;

    position: absolute;
    top: 0;
    right: 0;
    height: 46px;      /* match input height */
    width: 50px;       /* comfortable tap target */
    padding: 0;

    /* Only right corners */
    border-radius: 0 5px 5px 0;

    /* Override legacy centering rules */
    transform: none;

    /* Keep it above input */
    z-index: 2;
}

header .header-full > .headersection-3 .widgetsearch .search-form button[type="submit"] {
    border-left: 1px solid rgba(0,0,0,0.1);
}

/* =========================================================
   Header Section 3 – Search input height
   ========================================================= */

header .header-full > .headersection-3 .widgetsearch .search-form .form-control {
    height: 46px;
    padding-right: 50px; /* adjusted to match taller button */
    border-radius: 5px;
}

header .header-full > .headersection-3 .widgetsearch .search-form .form-control {
    line-height: 46px;
}


/* Optional: hover/focus affordance without changing layout */
header .header-full > .headersection-3 .widgetsearch .search-form button[type="submit"]:hover,
header .header-full > .headersection-3 .widgetsearch .search-form button[type="submit"]:focus {
    opacity: 1;              /* prevents legacy opacity transitions doing odd things */
    outline: none;
}

/* =========================================================
   Header Section 3 – Shopping tools colour
   ========================================================= */

header .header-full > .headersection-3 .shoppingtools_container {
    color: #fff;
}

/* Links, labels, and text inherit white */
header .header-full > .headersection-3 .shoppingtools_container a,
header .header-full > .headersection-3 .shoppingtools_container label,
header .header-full > .headersection-3 .shoppingtools_container span {
    color: inherit;
}

header .header-full > .headersection-3 .shoppingtools_container i,
header .header-full > .headersection-3 .shoppingtools_container .material-icons {
    color: #fff;
}

header .header-full > .headersection-3 .shoppingtools_container .arrow-your-account {
    color: #fff;
}

/* =========================================================
   Header – account dropdown hover/focus colour
   ========================================================= */

header .shoppingtools_container .shopping-tools-wrapper
.dropdown-menu .pointer:hover,
header .shoppingtools_container .shopping-tools-wrapper
.dropdown-menu .pointer:focus-visible {
    background-color: var(--evo-brand-accent);
}

/* =========================================================
   Header Section 3 – Logged-in adjustment
   Purpose: Hide Quick Order button when customer is logged in
   to make space for contract-specific tools.
   ========================================================= */

body.ex-loggedin header .header-full > .headersection-3
.shoppingtools_container .shopping-tools-wrapper .quickordertoggle {
    display: none;
}

/* =========================================================
   Header Section 3 – Minicart count badge
   Match search submit button accent colour
   ========================================================= */

header .header-full > .headersection-3
.minicart_container .cart-btn > a.btn .minicart_count {
    background: var(--evo-brand-accent, #e6effb);
    color: #000; /* adjust if you want white instead */
}

/* =========================================================
   Mobile minicart count – match desktop styling
   ========================================================= */
header .header-mobile .header-right .minicart_count {
    background-color: var(--evo-brand-accent); /* same as desktop */
    /*  width: 24px;
      height: 24px;*/
    border-radius: 50%;
    color: #000;
    font-size: 0.75rem;
    line-height: normal;

    display: flex;
    align-items: center;
    justify-content: center;

    top: -6px;   /* fine-tune if needed */
    right: -6px; /* fine-tune if needed */
}


/* =========================================================
  Header Section 3 – Minicart align to container edge
  (works with table-cell row-3 alignment)
  ========================================================= */

header .header-full > .headersection-3 .minicart_container {
    text-align: right;
}

header .header-full > .headersection-3 .minicart_container .toolbar {
    width: 100%;
}

@media (min-width: 992px) {
    header .header-full > .headersection-3 .minicart_container {
        padding-right: 0;
    }
}
/* =========================================================
   Header Section 3 – CLS guard (only if needed)
   Keeps the core header from jumping as fonts/icons load.
   Tune the min-height after measuring.
   ========================================================= */

header .header-full > .headersection-3 {
    min-height: 90px; /* adjust if your final visual height differs */
}

/* =========================================================
   Header Section 3 – Search AJAX dropdown width
   Match search input width
   ========================================================= */

header .header-full > .headersection-3
.widgetsearch .ajax-results {
    width: 100%;
    left: 0;
    border-radius: 0 0 5px 5px;
}


/* =========================================================
   Header Section 4 – Nav bar foundation (no behavior changes)
   ========================================================= */

header .header-full > .headersection-4 {
    background: var(--evo-brand-default);
    padding: 0; /* because you already have .py-0 */
    border-top: 1px solid #7b65c8;
}

/* Keep the nav itself transparent inside the header */
header .header-full > .headersection-4 .menu,
header .header-full > .headersection-4 .menu .catalog-block {
    background: transparent !important;
}

/* Make sure the bar height is consistent */
header .header-full > .headersection-4 ul.catalog > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* tune to taste */
    padding: 0 14px;  /* tune to taste */
    color: #fff;
    text-decoration: none;
}

/* =========================================================
   Header Section 4 – Lock top-level nav link hover colour
   ========================================================= */

header .header-full > .headersection-4 ul.catalog > li > a:hover,
header .header-full > .headersection-4 ul.catalog > li > a:focus {
    color: #fff;
    text-decoration: none;
}


/* =========================================================
   Header Section 4 – Left-align main navigation
   ========================================================= */

header .header-full > .headersection-4
nav.menu .catalog-block ul.catalog {
    justify-content: flex-start;
}

/* =========================================================
   Header Section 4 – Constrain nav content to site container
   ========================================================= */

header .header-full > .headersection-4 .catalog-block {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;     /* matches bootstrap gutters */
    padding-right: 15px;
}

/* Match your custom 1470px breakpoint container width */
@media (min-width: 1470px) {
    header .header-full > .headersection-4 .catalog-block {
        max-width: 1450px;
    }
}

/* Match BS3 container widths at other breakpoints */
@media (min-width: 992px) and (max-width: 1199px) {
    header .header-full > .headersection-4 .catalog-block {
        max-width: 970px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    header .header-full > .headersection-4 .catalog-block {
        max-width: 750px; /* Bootstrap 3 default container width */
    }
}

/* =========================================================
   Header Section 4 – Mega menu (revised + scoped)
   Safe with your left-aligned, container-matched nav work
   ========================================================= */

/* Allow mega menu to escape without clipping (safe target) */
header .header-full > .headersection-4 .headermenu_container {
    position: static;
}

/* ---- Column balancing (ONLY if you still want it) ---- */
header .header-full > .headersection-4
.nav1-menu > .submenu > .submenucontainer > li:nth-child(2n-1),
header .header-full > .headersection-4
.nav2-menu > .submenu > .submenucontainer > li:nth-child(2n-1) {
    min-height: 230px;
}

/* Mega menu image tiles */
header .header-full > .headersection-4
.menu.expanded .catalog .submenu li.has-image {
    height: auto;
    margin-bottom: 30px;
}

/* Ensure “has-image” items behave consistently in header only */
header .header-full > .headersection-4
.menu .catalog .has-image {
    display: inline-block !important;
}

/* Submenu column padding */
header .header-full > .headersection-4
.menu .catalog li .submenu .submenucontainer > li {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Submenu section headers (2nd-level) */
header .header-full > .headersection-4
.menu.expanded .catalog .submenu .submenucontainer > li > a {
    padding: 0;
    overflow: visible; /* safer than unset */
    font-weight: 800;
    font-size: 16px;
}

/* Submenu item links */
header .header-full > .headersection-4
.menu.expanded .catalog .submenu li a {
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* “See All” last link emphasis */
header .header-full > .headersection-4
.menu.expanded .catalog .submenu > .submenucontainer .has-submenu li:last-of-type a {
    color: #493594;
    font-weight: 800;
}

/* 2nd-level category links with icons */
header .header-full > .headersection-4
.menu.expanded .catalog .submenu .submenucontainer > li:not(.has-image) > a {
    padding-left: 35px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 30px;
    margin-bottom: 5px;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    max-height: 49px;
    min-height: 30px;
    line-height: 1.1;

    display: flex;
    align-items: center;
}

/* Image styling */
header .header-full > .headersection-4
.menu .catalog .has-image img {
    outline: 5px solid transparent;
    transition: outline-color 0.35s ease;
    width: 100%;
    object-fit: cover;
}

header .header-full > .headersection-4
.menu .catalog .has-image img:hover {
    outline-color: #493593;
}

/* 6-column mega menu layout (desktop)
   NOTE: selector fixed to match your HTML:
   ul.submenu > div.submenucontainer > li
*/
@media (min-width: 1200px) {
    header .header-full > .headersection-4
    .menu.expanded .catalog > li > ul.submenu > .submenucontainer > li {
        width: calc(100% / 6);
    }
}

/* Narrower desktops/tablets: reduce padding inside columns */
@media (max-width: 1200px) {
    header .header-full > .headersection-4
    .menu .catalog li .submenu .submenucontainer > li {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* =========================================================
   Header Section 4 – Icon mapping (scoped)
   ========================================================= */

/* NAV 1 (Office Supplies) */
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-essentials > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-02.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-storage > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-07.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-desktop > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-books > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-08.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-paper > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-04.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-writing > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-09.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-files > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-05.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-meeting > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-10.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-envelopes > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-06.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-computer > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/supplies/Icon-11.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-machine > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav1-menu .nav1-mailroom > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-03.svg");
}

/* NAV 2 (Technology) */
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-smart > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-02.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-shredders > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-07.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-computer > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-smartwear > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-08.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-printer > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-04.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-laptopbag > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-09.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-monitor > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-05.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-projector > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-10.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-speaker > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-06.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-keyboard > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/tech/Icon-11.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav2-menu .nav2-storage > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-06.svg");
}

/* NAV 3 (Catering) */
header .header-full > .headersection-4 .menu.expanded .catalog .nav3-menu .nav3-drinks > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/catering/Icon-02.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav3-menu .nav3-food > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/catering/Icon-05.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav3-menu .nav3-appliances > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/catering/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav3-menu .nav3-tablewear > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/catering/Icon-06.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav3-menu .nav3-essentials > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/catering/Icon-04.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav3-menu .nav3-disposables > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/catering/Icon-07.svg");
}

/* NAV 4 (Cleaning) */
header .header-full > .headersection-4 .menu.expanded .catalog .nav4-menu .nav4-covid > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/cleaning/Icon-02.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav4-menu .nav4-supplies > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/cleaning/Icon-05.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav4-menu .nav4-equip > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/cleaning/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav4-menu .nav4-wash > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/cleaning/Icon-06.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav4-menu .nav4-rubbish > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/cleaning/Icon-04.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav4-menu .nav4-cleaning > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/cleaning/Icon-07.svg");
}

/* NAV 5 (Facilities) */
header .header-full > .headersection-4 .menu.expanded .catalog .nav5-menu .nav5-health > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-02.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav5-menu .nav5-car > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-05.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav5-menu .nav5-mailroom > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav5-menu .nav5-heating > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-06.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav5-menu .nav5-warehouse > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-04.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav5-menu .nav5-cash > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/facilities/Icon-07.svg");
}

/* NAV 6 (Office Furniture) */
header .header-full > .headersection-4 .menu.expanded .catalog .nav6-menu .nav6-desks > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-02.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav6-menu .nav6-chairs > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-05.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav6-menu .nav6-screens > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-03.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav6-menu .nav6-storage > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-06.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav6-menu .nav6-tables > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-04.svg");
}
header .header-full > .headersection-4 .menu.expanded .catalog .nav6-menu .nav6-interior > a {
    background-image: url("https://eu.evocdn.io/dealer/1301/content/media/My_Theme/icons/megamenu/furniture/Icon-07.svg");
}

/* =========================================================
   Header Section 4 – Keep all 12 top-level items visible
   Core CSS hides items from #8 onwards at <=1366px
   ========================================================= */
@media (max-width: 1366px) {
    header .header-full > .headersection-4 .menu .catalog > li:nth-child(n+8) {
        display: inline-block !important;
    }
}

@media (max-width: 1366px) {
    header .header-full > .headersection-4 ul.catalog > li > a {
        padding: 0 10px; /* was 14px */
    }
}


/* Override body font Size for Menuv */
nav.menu .catalog-block ul.catalog>li>a {
 font-size: 1em; 
}


/* =========================================================
   Header Section 5 – USP Bar (flex version)
   ========================================================= */

header .header-full > .headersection-5 .ppw-pdp-uspbar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    /*  padding: 10px 0 !important;
      margin: 12px 0 10px !important;*/
}

/* Flex row */
header .header-full > .headersection-5 .ppw-pdp-uspbar .ppw-usp-inner {
    display: flex;
    align-items: center;
    justify-content: center; /* change to flex-start if you want left aligned */
    gap: 18px;
    flex-wrap: wrap;
    text-align: center;
    padding-left: 15px;   /* match Bootstrap container gutter */
    padding-right: 15px;
}

/* Each USP item */
header .header-full > .headersection-5 .ppw-pdp-uspbar .ppw-usp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    position: relative; /* needed for divider pseudo-element */
}

header .header-full > .headersection-5 .ppw-pdp-uspbar .usp-text {
    white-space: nowrap;
}

/* Icons */
header .header-full > .headersection-5 .ppw-pdp-uspbar .ppw-usp i {
    font-style: normal;
    font-size: 16px;
    line-height: 1;
}

/* Links behave like the rest of the USP */
header .header-full > .headersection-5 .ppw-pdp-uspbar .ppw-usp a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Divider between items (truly between content blocks) */
@media (min-width: 992px) {
    header .header-full > .headersection-5
    .ppw-pdp-uspbar .ppw-usp + .ppw-usp {
        padding-left: 18px; /* creates space for the divider */
    }

    header .header-full > .headersection-5
    .ppw-pdp-uspbar .ppw-usp + .ppw-usp::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: rgba(0, 0, 0, 0.12);
    }
}

header .header-full > div:last-of-type {
    border-bottom: none;
}

/* Default – fallback */
.ppw-usp .usp-price::after {
    content: " \20AC 3.99";
}

.ppw-usp .usp-locale::after {
    content: " Irish";
}

/* Euro branches */
body.ex-branch-363 .ppw-usp .usp-price::after,
body.ex-branch-463 .ppw-usp .usp-price::after {
    content: " \20AC 3.99";
}

body.ex-branch-363 .ppw-usp .usp-locale::after,
body.ex-branch-463 .ppw-usp .usp-locale::after {
    content: " Irish";
}

/* UK branch */
body.ex-branch-995 .ppw-usp .usp-price::after {
    content: " \00A3 3.99";
}
body.ex-branch-995 .ppw-usp .usp-locale::after {
    content: " British";
}

/* =========================================================
   Footer – Global Baseline Reset (Scoped + Production Safe)
   ========================================================= */
footer.footer{
    padding:0;
    width:100%;
    font-size:.875em;
    color:#fff;
    background-color:#efefef;
    background-image:none;
    background-repeat:no-repeat;
}

/* Legacy rule exists: footer.footer > * { padding: 15px 0; }
   We neutralise it and control spacing per section. */
footer.footer > *{
    padding:0;
}

/* =========================================================
   Footer Section 1 – Newsletter + Panda Points (Zoho-safe shell)
   Notes:
   - We DO NOT style Zoho inputs/buttons/forms to avoid breakage
   - We only align outer layout containers
   ========================================================= */
footer.footer .footersection-1{
    padding:14px 0;
}

/* Two main columns: newsletter (left) + panda points (right) */
footer.footer .footersection-1 .row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

/* Normalise padding for direct grid children only */
footer.footer .footersection-1 .row > [class*="col-"]{
    padding-left:15px;
    padding-right:15px;
}

/* Newsletter wrapper */
footer.footer .footersection-1 .bsr-newsletter{
    width:100%;
}

/* Label + Zoho embed columns */
footer.footer .footersection-1 .zoho-footer-newsletter{
    width:100%;
    align-items:center;
}

/* Left label column */
footer.footer .footersection-1 .zoho-footer-newsletter > .col-lg-3{
    min-width:240px;
}

/* Right embed column */
footer.footer .footersection-1 .zoho-footer-newsletter > .col-lg-9{
    flex:1 1 420px;
    min-width:260px;
}

/* Desktop: keep Panda Points block neatly right-aligned (it is hidden below 992px already) */
@media (min-width:992px){
    footer.footer .footersection-1 .hidden-xs.hidden-sm.hidden-md{
        display:flex;
        align-items:center;
        justify-content:flex-end;
    }
}

/* Mobile (390×844): stack cleanly */
@media (max-width:767px){
    footer.footer .footersection-1{
        padding:12px 0;
    }

    /* Avoid flex fighting with Zoho inline widths */
    footer.footer .footersection-1 .row{
        display:block;
    }

    footer.footer .footersection-1 .zoho-footer-newsletter > .col-lg-3{
        width:100%;
        min-width:0;
        margin-bottom:8px;
    }
    footer.footer .footersection-1 .zoho-footer-newsletter > .col-lg-9{
        width:100%;
        min-width:0;
    }

    /* Ensure the intended label variant is used on small screens */
    footer.footer .footersection-1 .zoho-footer-newsletter .desktop{
        display:none !important;
    }
    footer.footer .footersection-1 .zoho-footer-newsletter .mobile{
        display:inline !important;
    }
}

/* =========================================================
   Footer Section 1 – Zoho Newsletter Button Alignment Fix
   Fix:
   - Prevents button wrapping under input at 1280×720 and similar widths
   - Uses flex on the form row only, does not touch the actual input/button styling
   ========================================================= */

/* Apply on all non-mobile widths */
@media (min-width:768px){

    /* Make the form a single-row flex layout */
    footer.footer .footersection-1 .quick_form_9_css form{
        display:flex !important;
        align-items:center;
        flex-wrap:nowrap;
    }

    /* Input wrapper: stop using Zoho's 80% width, let flex size it */
    footer.footer .footersection-1 .footEmailInput{
        width:auto !important;
        flex:1 1 auto;
        min-width:0;              /* prevents overflow forcing wrap */
        margin-right:10px;
    }

    /* Button wrapper: fixed width, never wraps */
    footer.footer .footersection-1 .footEmailButton{
        width:143px !important;
        flex:0 0 143px;
        margin:0 !important;      /* neutralise Zoho margin that can push it down */
    }
}


/* =========================================================
   Footer Section 2 – Empty Section (Remove gaps safely)
   ========================================================= */
footer.footer .footersection-2{
    padding:0 !important;
    margin:0 !important;
}
footer.footer .footersection-2 > .container-fluid{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* =========================================================
   Footer Section 3 – Main Links + Contact + Social
   Notes:
   - Mobile (≤767px): existing accordion behaviour remains
   - Tablet/Desktop (≥768px): accordion is neutralised via CSS
   - No JS changes required
   ========================================================= */

footer.footer .footersection-3{
    background:#efefef;
    color:#222;
    padding:26px 0;
}

/* =========================================================
   Base Typography & Links (All Viewports)
   ========================================================= */
footer.footer .footersection-3 .footAccordian h4{
    margin:0 0 10px 0;
    font-size:14px;
    font-weight:700;
    color:#493493;
}

footer.footer .footersection-3 .footAccordian ul{
    margin:0;
    padding:0;
    list-style:none;
}

footer.footer .footersection-3 .footAccordian li{
    margin:0 0 7px 0;
}

footer.footer .footersection-3 .footAccordian a{
    color:#222;
}

footer.footer .footersection-3 .footAccordian a:hover,
footer.footer .footersection-3 .footAccordian a:focus{
    color:#493493;
}

/* =========================================================
   Contact Blocks
   ========================================================= */
footer.footer .footersection-3 .contacts .contact-block{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

footer.footer .footersection-3 .contacts .contact-icon{
    width:18px;
    flex:0 0 18px;
    text-align:center;
    color:#493493;
    margin-top:2px;
}

footer.footer .footersection-3 .contacts .contact-description p{
    margin:0;
}

/* =========================================================
   Social Icons
   ========================================================= */
footer.footer .footersection-3 .contacts .social{
    display:flex;
    gap:12px;
    margin-top:10px;
}

footer.footer .footersection-3 .contacts .social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:999px;
    background:rgba(73,52,147,.08);
    color:#493493;
}

footer.footer .footersection-3 .contacts .social a:hover,
footer.footer .footersection-3 .contacts .social a:focus{
    background:rgba(73,52,147,.16);
    text-decoration:none;
}

/* =========================================================
   Desktop Layout Stabilisation (Grid)
   ========================================================= */
@media (min-width:992px){
    footer.footer .footersection-3 .row{
        display:flex;
        flex-wrap:nowrap;
    }
    footer.footer .footersection-3 .row > [class*="col-"]{
        float:none !important;
    }
}

/* =========================================================
   Footer Section 3 – Main Links + Contact + Social (Base)
   Notes:
   - Mobile (≤767px): accordion active (collapsed by default)
   - Tablet/Desktop (≥768px): normal footer (always open)
   ========================================================= */
footer.footer .footersection-3{
    background:#efefef;
    color:#222;
    padding:26px 0;
}

/* =========================================================
   Footer Section 3 – Base Typography (All Viewports)
   ========================================================= */
footer.footer .footersection-3 .footAccordian h4{
    margin:0 0 10px 0;
    font-size:14px;
    font-weight:700;
    color:#493493;
}

footer.footer .footersection-3 .footAccordian ul{
    margin:0;
    padding:0;
    list-style:none;
}

footer.footer .footersection-3 .footAccordian li{
    margin:0 0 7px 0;
}

footer.footer .footersection-3 .footAccordian a{
    color:#222;
}

footer.footer .footersection-3 .footAccordian a:hover,
footer.footer .footersection-3 .footAccordian a:focus{
    color:#493493;
}

/* Contact blocks */
footer.footer .footersection-3 .contacts .contact-block{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}

footer.footer .footersection-3 .contacts .contact-icon{
    width:18px;
    flex:0 0 18px;
    text-align:center;
    color:#493493;
    margin-top:2px;
}

footer.footer .footersection-3 .contacts .contact-description p{
    margin:0;
}

/* Social icons */
footer.footer .footersection-3 .contacts .social{
    display:flex;
    gap:12px;
    margin-top:10px;
}

footer.footer .footersection-3 .contacts .social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:999px;
    background:rgba(73,52,147,.08);
    color:#493493;
}

footer.footer .footersection-3 .contacts .social a:hover,
footer.footer .footersection-3 .contacts .social a:focus{
    background:rgba(73,52,147,.16);
    text-decoration:none;
}

/* =========================================================
   Footer Section 3 – Desktop Layout Stabilisation (≥992px)
   ========================================================= */
@media (min-width:992px){
    footer.footer .footersection-3 .row{
        display:flex;
        flex-wrap:nowrap;
    }
    footer.footer .footersection-3 .row > [class*="col-"]{
        float:none !important;
    }
}

/* =========================================================
   Footer Section 3 – Tablet/Desktop (≥768px): Disable Accordion
   Fixes:
   - Ensures lists/contacts are always visible
   - Removes plus/minus icons & click affordance
   - Prevents any max-height/overflow hiding from mobile rules
   ========================================================= */
@media (min-width:768px){
    footer.footer .footersection-3 .footAccordian h4{
        cursor:default;
        padding:0;
        border-bottom:0;
    }

    footer.footer .footersection-3 .footAccordian h4::after{
        content:none !important;
        display:none !important;
    }

    footer.footer .footersection-3 .footAccordian ul{
        max-height:none !important;
        overflow:visible !important;
        transition:none !important;
    }

    footer.footer .footersection-3 .footAccordian .contacts > div{
        max-height:none !important;
        overflow:visible !important;
        transition:none !important;
    }

    /* Undo mobile link tap-target styling */
    footer.footer .footersection-3 .footAccordian ul li a{
        display:inline;
        padding:0;
        font-size:14px;
        background:none;
    }

    /* Always show social on desktop/tablet */
    footer.footer .footersection-3 .footAccordian .contacts .social{
        display:flex !important;
    }
}

/* =========================================================
   Footer Section 3 – Mobile (≤767px): Accordion Active
   Improvements vs your current:
   - Single mobile media query (less duplication)
   - Sets max-height large enough for long lists (avoid clipping)
   - Ensures contact text + social behave predictably
   ========================================================= */
@media (max-width:767px){

    footer.footer .footersection-3{
        padding:20px 0;
    }

    footer.footer .footersection-3 .row > [class*="col-"]{
        margin-bottom:18px;
    }

    /* Headings look/feel clickable */
    footer.footer .footersection-3 .footAccordian h4{
        cursor:pointer;
        margin:0;
        padding:15px 0;
        color:#222;
        text-align:left;
        border-bottom:1px solid rgba(0,0,0,.2);
        font-size:16px;
        line-height:1;
    }



    /* Collapsed by default */
    footer.footer .footersection-3 .footAccordian ul{
        max-height:0 !important;
        overflow:hidden !important;
        transition:max-height 300ms ease-out;
        padding:0;
        margin:0;
    }

    footer.footer .footersection-3 .footAccordian .contacts > div{
        max-height:0 !important;
        overflow:hidden !important;
        transition:max-height 300ms ease-out;
        padding:0;
        margin:0;
    }

    /* Mobile link styling */
    footer.footer .footersection-3 .footAccordian ul li{
        margin:0;
    }

    footer.footer .footersection-3 .footAccordian ul li a{
        display:block;
        padding:8px 8px 8px 15px;
        font-size:16px;
        background:none;
    }

    /* Hide social unless opened */
    footer.footer .footersection-3 .footAccordian .contacts .social{
        display:none !important;
    }


    footer.footer .footersection-3 .footAccordian.open ul,
    footer.footer .footersection-3 .footAccordian.open .contacts > div{
        height:auto;
        max-height:1000px !important; /* prevents clipping long lists */
        transition:max-height 350ms ease-in-out !important;
        padding-top: 20px;
    }

    /* Show social when open */
    footer.footer .footersection-3 .footAccordian.open .contacts .social{
        display:flex !important;
    }

    /* =========================================================
      Footer Section 3 – Mobile Accordion Chevron (FA 4.7)
      Closed: Right ▸
      Open:   Down ▾
      ========================================================= */
    footer.footer .footersection-3 .footAccordian h4::after{
        content: "\f054";              /* fa-chevron-right */
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 1;
        float: right;
        color: #493493;
        transition: transform 200ms ease;
    }

    /* Open state */
    footer.footer .footersection-3 .footAccordian.open h4::after{
        content: "\f078";              /* fa-chevron-down */
    }

    /* Align icon vertically */
    footer.footer .footersection-3 .footAccordian h4::after{
        margin-top: 1px;
    }

    /* Increase tappable spacing */
    footer.footer .footersection-3 .footAccordian h4{
        padding-right: 20px;
    }

}




/* =========================================================
   Footer Section 4 – Legal + Payment Logos
   ========================================================= */
footer.footer .footersection-4{
    padding:14px 0;
    color:#222;
    background:#efefef;
}

footer.footer .footersection-4 .copyright_container p{
    margin:0;
    font-size:12px;
    opacity:.95;
}

/* Desktop alignment */
@media (min-width:768px){
    footer.footer .footersection-4 .row{
        display:flex;
        align-items:center;
    }
    footer.footer .footersection-4 .payment{
        text-align:right;
    }
}

/* Mobile alignment */
@media (max-width:767px){
    footer.footer .footersection-4 .copyright_container{
        text-align:center;
        margin-bottom:10px;
    }
    footer.footer .footersection-4 .payment{
        text-align:center;
    }
}

/* Payment icon sizing */
footer.footer .footersection-4 .payment img{
    height:22px;
    width:auto;
    margin-left:8px;
    margin-bottom:6px;
}


/* 1280×720 tuning: reduce wrapping risk */
@media (min-width:992px) and (max-width:1199px){
    footer.footer .footersection-4 .payment img{
        height:20px;
        margin-left:6px;
    }
}


/* =========================================================
   Footer Section 4 – Stripe + Direct Debit Inline + Mobile Centering
   Fixes:
   - 1280×720: force Stripe + Direct Debit to sit inline (no wrap)
   - 390×844: center the Stripe/Direct Debit block
   Notes:
   - Avoids CMS IDs, targets stable containers and alt text
   ========================================================= */

/* Make the "Stripe + Direct Debit" container a flex row */
footer.footer .footersection-4 .htmlcontent_container > div > div[style*="text-align:right"]{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
}

/* Ensure Stripe and Direct Debit images don't become block-level unexpectedly */
footer.footer .footersection-4 .htmlcontent_container > div > div[style*="text-align:right"] img{
    display:inline-block;
    vertical-align:middle;
    height:26px;
    width:auto;
    max-width:100%;
}

/* 1280×720 (and generally <1200): reduce logo height a touch to prevent wrap */
@media (min-width:992px) and (max-width:1199px){
    footer.footer .footersection-4 .htmlcontent_container > div > div[style*="text-align:right"] img{
        height:22px;
    }
}

/* Mobile: center the whole Stripe/Direct Debit block */
@media (max-width:767px){
    footer.footer .footersection-4 .htmlcontent_container > div > div[style*="text-align:right"]{
        justify-content:center !important;
        text-align:center !important;
        width:100%;
    }
}

/* =========================================================
   Footer Section 3 – Contact Blocks Centering on Mobile
   Fix:
   - 390×844: center icon + text as a unit, keep text readable
   ========================================================= */
@media (max-width:767px){
    footer.footer .footersection-3 .contacts{
        text-align:center;
    }

    footer.footer .footersection-3 .contacts .contact-block{
        justify-content:center;
    }

    /* Keep the paragraph text centered under mobile */
    footer.footer .footersection-3 .contacts .contact-description{
        text-align:center;
    }

    /* Social row centered too */
    footer.footer .footersection-3 .contacts .social{
        justify-content:center;
    }
}


/* =========================================================
   Footer Section 5 – Modal Section (Leave alone)
   ========================================================= */


/* =========================================================
   PDP – Outer Frame, USP Bar & Column Layout
   Changes:
   - Apply shared light canvas background to PDP surfaces
   - Keep headersection-5 (USPs bar) visually aligned with PDP
   - Update PDP two-column layout to ~60% / ~40% with ~2% gap
   Context:
   - Scoped to body.ex-product to avoid sitewide impact
   - Uses existing global Evo + PDP design tokens
   - Safe with Bootstrap 3 float-based grid
   ========================================================= */

/* ---------- PDP canvas background ---------- */
/* Applies light canvas behind all PDP content */
body.ex-product .page-content.twocolumnsright {
    background-color: var(--evo-page-bg-light);
}

/* ---------- PDP header USP bar background ---------- */
/* headersection-5 = USP container */
body.ex-product .headersection-5 {
    background-color: var(--evo-page-bg-light);
}

/* ---------- PDP two-column layout with gap (desktop+) ---------- */
@media (min-width: 992px) {

    /* Main PDP content column (left) */
    body.ex-product .twocolumnsleft .col-lg-10,
    body.ex-product .twocolumnsright .col-lg-10,
    body.ex-product .twocolumnsleft .col-md-10,
    body.ex-product .twocolumnsright .col-md-10 {
        width: 59%;
        background: var(--pdp-card);
        border: 1px solid var(--pdp-line);
        border-radius: var(--pdp-radius-lg);
        box-shadow: var(--pdp-shadow);
    }

    /* Secondary / support column (right) */
    body.ex-product .twocolumnsleft .col-lg-2,
    body.ex-product .twocolumnsright .col-lg-2,
    body.ex-product .twocolumnsleft .col-md-2,
    body.ex-product .twocolumnsright .col-md-2 {
        width: 39%;
        margin-left: 2%; /* visual gap between columns */
        background: var(--pdp-card);
        border: 1px solid var(--pdp-line);
        border-radius: var(--pdp-radius-lg);
        box-shadow: var(--pdp-shadow);
    }
}

/* =========================================================
   PDP – zonebottom Container Alignment (PDP only)
   Purpose:
   - Constrain zonebottom rows to standard .container widths
   - Prevent full-bleed container-fluid layouts on PDP
   - Preserve legacy markup and widget behaviour
   Scope:
   - body.ex-product ONLY
   - Does NOT affect PLP, CMS, or other page types
   ========================================================= */

body.ex-product section.zonebottom > div > .container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Match theme container widths exactly */

/* ≥1470px viewport */
@media (min-width: 1470px) {
    body.ex-product section.zonebottom > div > .container-fluid {
        width: 1450px;
    }
}

/* 1200–1469px viewport */
@media (min-width: 1200px) and (max-width: 1469px) {
    body.ex-product section.zonebottom > div > .container-fluid {
        width: 1180px;
    }
}

/* 992–1199px viewport */
@media (min-width: 992px) and (max-width: 1199px) {
    body.ex-product section.zonebottom > div > .container-fluid {
        width: 970px;
    }
}

/* <992px: allow natural fluid behaviour */
@media (max-width: 991px) {
    body.ex-product section.zonebottom > div > .container-fluid {
        width: auto;
    }
}

/* Remove random margin on PDP top and bottom */
body.ex-product .page-content.twocolumnsright {
    margin-bottom: 0;
    margin-top: 0;
}

body.ex-product .IcecatLive.container {
    width: 100%;
    max-width: 1450px;
}

body.ex-product .pet-container {
    max-width: 1450px !important;
    width: 100%;
}
/* Hide Rewards Badge on list globally */
.item-merchandising .list-attribute.product-rewards-badge, .product-shopping-actions .list-attribute.product-rewards-badge, .list-attribute.product-rewards-badge {
    display: none;
}


/* Hide Indicators Grid on PLP */
body.ex-category .indicators-grid,
body.ex-contractitems .indicators-grid,
body.ex-searchresult .indicators-grid,
body.ex-frequentlypurchased .indicators-grid {
    display: none !important;
}

.productsrelated_container .productsrelated .indicators-grid {
    display: none;
}

.widget-lastviewedproducts-html .lastviewedproducts-content .indicators-grid {
    display: none;
}


.catalog-grid [role=row-section], .page-content [role=row-section], .zonebottom [role=row-section], .zonetop [role=row-section] {
    margin-bottom: 20px;
}


/* ===========================================
   GOOGLE SHOPPING - VAT LABELS
   Required for Google Feeds structured data
   =========================================== */

/* Global - works in some areas */
.price-label.has-price::after,
.price > .has-price::after,
.price.has-price::after {
    content: ' excl VAT';
    font-size: 14px;
}

.product.non-taxable .price-label.has-price::after,
.product.non-taxable .price > .has-price::after,
.product.non-taxable .price.has-price::after {
    content: ' incl VAT';
    font-size: 14px;
}


.rewards-tab {
    left: 85px;
    right: auto !important;
}



.ribbon-wrapper .ribbon {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

body.ex-product .productimage_container .badges-wrapper {
    top: 60px;
  	left: 20px;

}

body.ex-product .productimage_container .ribbon-wrapper .ribbon {
    border-radius: 999px;
}

/* ==========================================================================
   REWARDS DASHBOARD STYLES
   Only applies when user is logged in and on customer account pages
   Scoped to: body.ex-customer.ex-loggedin
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Flexbox Utility - Shared layout pattern
   Used for filters and general flex layouts with space-between alignment
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .nFlex,
body.ex-customer.ex-loggedin .visualFilters .filter-section-header,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-list .filter-options label a,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-grid .filter-options,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-grid .filter-options label a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   REWARDS DASHBOARD STYLES
   Only applies when user is logged in and on customer account pages
   Scoped to: body.ex-customer.ex-loggedin
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Flexbox Utility - Shared layout pattern
   Used for filters and general flex layouts with space-between alignment
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .nFlex,
body.ex-customer.ex-loggedin .visualFilters .filter-section-header,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-list .filter-options label a,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-grid .filter-options,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-grid .filter-options label a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   REWARDS DASHBOARD STYLES
   Only applies when user is logged in and on customer account pages
   Scoped to: body.ex-customer.ex-loggedin
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Flexbox Utility - Shared layout pattern
   Used for filters and general flex layouts with space-between alignment
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .nFlex,
body.ex-customer.ex-loggedin .visualFilters .filter-section-header,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-list .filter-options label a,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-grid .filter-options,
body.ex-customer.ex-loggedin .visualFilters.vf-itemstyle-grid .filter-options label a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Dashboard Banner - Main container
   Purple branded banner with two-column layout
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .dashboardBanner {
    background: #4a3493; /* Purple Panda brand color */
    display: flex;
    flex-wrap: wrap;
    position: relative; /* For absolute positioned link overlay */
    padding: 5px;
    margin: 10px 0;
}

/* ---------------------------------------------------------------------------
   Dashboard Banner - Left Column
   Contains left-side content with decorative background image
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .dashboardBanner .left {
    width: 50%;
    padding-left: 40px;
    padding-right: 40px;
    background: url(https://eu.evocdn.io/dealer/1301/content/media/My_Theme/pan-dashboard-left.jpg) no-repeat right;
    background-size: contain;
}

/* ---------------------------------------------------------------------------
   Dashboard Banner - Right Column
   Contains right-side content with decorative background image
   Vertically centered content with min-height for consistent sizing
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .dashboardBanner .right {
    width: 50%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    padding-left: 40px;
    padding-right: 40px;
    background: url(https://eu.evocdn.io/dealer/1301/content/media/My_Theme/pan-dashboard-right_1.jpg) no-repeat right;
    background-size: contain;
    background-position: calc(100% - 40px); /* Offset from right edge */
}

/* ---------------------------------------------------------------------------
   Dashboard Banner - Text Styles
   Ensures all text elements are white for readability on purple background
   Covers: h1, h2, h3, p, span, and links
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .dashboardBanner .left h3,
body.ex-customer.ex-loggedin .dashboardBanner .left h3 span,
body.ex-customer.ex-loggedin .dashboardBanner .right h1,
body.ex-customer.ex-loggedin .dashboardBanner .right h2,
body.ex-customer.ex-loggedin .dashboardBanner .right p,
body.ex-customer.ex-loggedin .dashboardBanner a {
    color: #ffffff; /* White text for contrast on purple background */
}

/* ---------------------------------------------------------------------------
   Dashboard Banner - Heading Size
   Normalize h3 size within the banner
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .dashboardBanner .left h3 {
    font-size: 1em;
}

/* ---------------------------------------------------------------------------
   Dashboard Banner - Link Overlay
   Invisible clickable link covering entire banner
   Makes the whole banner act as a single clickable area
   --------------------------------------------------------------------------- */
body.ex-customer.ex-loggedin .dashboardBanner > a.nLinkArea {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

body.ex-customer.ex-rewards .reward-title-wrapper, body.ex-customer.ex-rewards .breadcrumb {
display: none;
}


/* ---------------------------------------------------------------------------
Breadcrumb styling globally
--------------------------------------------------------------------------- */

.row-breadcrumb {
    margin-bottom: 0 !important;
}


/* Hide Product List Actions Globally */
#grid .product-list-actions, .lastviewedproducts-content .product-list-actions, .productsrelated_container .product-list-actions, .product-list-actions, button.showquickviewbtn .quickview-icon, button.showquickviewbtn .quickview-icon    {
    display: none !important;
}

/* Unit price column */
.minicart td.unit-price {
    font-size: 11px;
    color: #000;
    text-align: center;
    white-space: nowrap;
    padding-right: 4px;
    padding-left: 10px;
}

.minicart td.unit-price .unit-price-value,
.minicart td.unit-price .unit-price-label {
    display: block;
    text-align: center;
}

.minicart td.unit-price .unit-price-label {
    font-size: 10px;
}

/* Coupon toggle */
.coupon-toggle {
    text-align: center;
    padding: 6px 0;
}

.coupon-toggle span {
    font-size: 12px;
    color: #999;
    text-decoration: underline;
    cursor: pointer;
}

.coupon-toggle span:hover {
    color: #666;
}

/* Hide .promotion_discount inside cart dropdown once toggle is active.
   Uses !important here safely because slideToggle operates on the
   .coupon-toggle's next sibling, not this directly rebuilt element. */
.cart-dropdown.has-coupon-toggle > .arrow_box .promotion_discount:not(.coupon-open) {
    display: none !important;
}

/* Hide Cart Button */
.ex-cart button.btn-media-full[onclick="return window.print()"] {
  display: none;
}

@media (min-width: 1200px) {
 .ex-cart .shopping-cart .cart-resume {
   	float: right;
    width: 60%;
  }
}

.ex-cart .btn-block, .ex-cart .btn-media-full, .ex-cart .delete-btn {
    background-color: #fafafa;
    border: 1px solid #fafafa;
  	padding: 15px 30px; 
}

.ex-cart .btn-block:hover, .ex-cart .btn-media-full:hover, .ex-cart .delete-btn:hover {
    background-color: #fafafa;
    color: #404041;
  	border: 1px solid #000;
}

.shopping-cart table td.delete .delete-btn, .wishlist table td.delete .delete-btn {
    background: #fafafa !important;
}

.shopping-cart table td.delete .delete-btn:hover, .wishlist table td.delete .delete-btn:hover {
    background: #fafafa !important;
}

.shopping-cart a.delete-btn {
    color: #404041;
}

@media only screen and (min-width: 650px) {
    .shopping-cart .to-checkout {
        padding: 15px 50px;
    }
}

.shopping-cart .to-checkout {
  background: #ffd344;
   color: #404041;
   font-weight: 700;
 }


header .minicart_container .cart-btn .footer.group a.to-checkout {
   background: #ffd344 !important;
   color: #404041 !important;
   font-weight: 700 !important;
}

header .minicart_container .cart-btn .footer.group a.to-checkout:hover {
   color: #fff !important;
}

.shopping-cart .to-checkout:hover {
   color: #fff;
}

.shopping-cart .to-checkout i {
  display: none;
}