/*!
 * Glossybird dark mode, Phase 1 foundation (docs/dark-mode-audit.md §7, §8, §11, §14).
 *
 * Rules:
 * - Every dark rule is scoped to html[data-theme="dark"] inside @media screen.
 *   Base-element rules use :where(html[data-theme="dark"]) so they only win ties
 *   (this sheet loads after every existing stylesheet/<style>) and never outrank
 *   component classes owned by later phases.
 * - Semantic tokens exist only in dark; light rendering is unchanged.
 * - No universal selectors, no broad !important.
 */

/* ==========================================================
   Theme toggle (allowed light-DOM addition; both themes)
   ========================================================== */
.gb-theme-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    /* same face as the sibling <a> items: style.css a{font-family:'Poppins'}; AR inherits style-ar.css Almarai */
    font-family: 'Poppins';
    letter-spacing: inherit;
    text-transform: none;
    cursor: pointer;
}
html[lang="ar"] .gb-theme-toggle { font-family: inherit; }
.gb-theme-toggle svg { display: block; }
.gb-theme-toggle .gb-theme-ic-sun { display: none; }
.gb-theme-toggle .gb-util-label,
.gb-theme-toggle .gb-theme-label { white-space: nowrap; }

/* Util cluster: same box model as the sibling .gb-util links (46px tall with label, 31px without) */
.gb-theme-toggle.gb-util {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* <=480px strip: 32x32 target whose margins cancel its own size and the 14px gap,
   so the centred strip items keep their exact positions and the strip keeps its height */
.gb-theme-toggle--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-top: -3px;
    margin-bottom: -3px;
    -webkit-margin-end: -46px;
    margin-inline-end: -46px;
    border-radius: 6px;
    color: #333;
}
.gb-theme-toggle--mobile .gb-ic svg { width: 22px; height: 22px; }

/* Drawer: matches .gb-drawer-link rows */
.gb-theme-toggle.gb-drawer-link {
    width: 100%;
    border-bottom: 1px solid var(--gb-line);
    line-height: inherit;
    text-align: start;
}
.gb-theme-toggle--drawer .gb-ic svg { width: 18px; height: 18px; }

.gb-theme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.gb-theme-toggle.gb-drawer-link:focus-visible { outline-offset: -2px; }

@media print {
    html .gb-theme-toggle { display: none; }
    html[data-theme="dark"] { color-scheme: light; }
}

@media (forced-colors: active) {
    .gb-theme-toggle:focus-visible { outline-color: Highlight; }
}

/* ==========================================================
   Dark theme (screen only)
   ========================================================== */
@media screen {

    /* ---------- Semantic tokens (§8, §14) ---------- */
    html[data-theme="dark"] {
        color-scheme: dark;

        --gb-bg:              #15171a;
        --gb-surface:         #1d2024;
        --gb-surface-alt:     #262a2f;
        --gb-elevated:        #2b2f35;

        --gb-text:            #e6e6e3;
        --gb-text-body:       #c9ccd1;
        --gb-heading:         #f1f1ee;
        --gb-text-muted:      #9aa0a6;

        --gb-border:          #33373d;
        --gb-input-bg:        #202327;
        --gb-input-border:    #6b7178; /* 3.2:1 on input-bg, 3.6:1 on bg */
        --gb-input-value-bg: #646b72; /* 3.03:1 vs surface, 4.77:1 with heading text */
        --gb-placeholder:     #8a9097; /* 4.9:1 on input-bg */
        --gb-focus:           #5aa9e6; /* 7.1:1 on bg */

        --gb-ink-fill:        #e6e6e3;
        --gb-red-text:        #ef5a6b; /* 5.4:1 on bg */
        --gb-red-tint:        #3a1f24;
        --gb-overlay:         rgba(0, 0, 0, 0.6);

        --gb-success:         #5cc489;
        --gb-danger:          #f47c86;
        --gb-warning:         #f2c14e;
        --gb-info:            #63b3ed;

        --gb-btn-primary-bg:   #f4f4f2;
        --gb-btn-primary-text: #15171a;
        --gb-logo-plate:       #f4f4f2;

        background-color: var(--gb-bg);
        color: var(--gb-text);
    }

    /* ---------- Base text ---------- */
    :where(html[data-theme="dark"]) body {
        background-color: var(--gb-bg);
        color: var(--gb-text);
    }
    /* Phase-1 compatibility scope: these Phase-2 chrome surfaces stay light until Phase 2
       themes them, so the base element colours skip text inside them and the light cascade
       applies unchanged (e.g. footer text keeps .footer{color:#777} on its #fff surface).
       :where() keeps specificity at 0,0,1. Phase 2 removes each entry when it themes that surface. */
    :where(html[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6):where(:not(.gb-header *, .gb-mobile-drawer *, .footer *, .modal *, .dropdown-menu *, .page-header *, .alert *)) { color: var(--gb-heading); }
    :where(html[data-theme="dark"]) :is(p, label, legend):where(:not(.gb-header *, .gb-mobile-drawer *, .footer *, .modal *, .dropdown-menu *, .page-header *, .alert *)) { color: var(--gb-text-body); }
    :where(html[data-theme="dark"]) a:where(:not(.gb-header *, .gb-mobile-drawer *, .footer *, .modal *, .dropdown-menu *, .page-header *, .alert *)) { color: var(--gb-text); }
    :where(html[data-theme="dark"]) hr { border-top-color: var(--gb-border); }

    /* ---------- Base form controls ---------- */
    :where(html[data-theme="dark"]) input,
    :where(html[data-theme="dark"]) select,
    :where(html[data-theme="dark"]) textarea,
    :where(html[data-theme="dark"]) .form-control {
        background-color: var(--gb-input-bg);
        color: var(--gb-text);
        border-color: var(--gb-input-border);
    }
    :where(html[data-theme="dark"]) .form-control:focus {
        background-color: var(--gb-input-bg);
        color: var(--gb-text);
    }
    :where(html[data-theme="dark"]) option,
    :where(html[data-theme="dark"]) optgroup {
        background-color: var(--gb-input-bg);
        color: var(--gb-text);
    }
    :where(html[data-theme="dark"]) input::placeholder,
    :where(html[data-theme="dark"]) textarea::placeholder,
    :where(html[data-theme="dark"]) .form-control::placeholder {
        color: var(--gb-placeholder);
        opacity: 1;
    }
    :where(html[data-theme="dark"]) input[readonly],
    :where(html[data-theme="dark"]) textarea[readonly],
    :where(html[data-theme="dark"]) .form-control[readonly] {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }
    :where(html[data-theme="dark"]) input:disabled,
    :where(html[data-theme="dark"]) select:disabled,
    :where(html[data-theme="dark"]) textarea:disabled,
    :where(html[data-theme="dark"]) .form-control:disabled,
    :where(html[data-theme="dark"]) .form-control.disabled {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text-muted);
        border-color: var(--gb-border);
    }
    :where(html[data-theme="dark"]) input:-webkit-autofill,
    :where(html[data-theme="dark"]) input:-webkit-autofill:hover,
    :where(html[data-theme="dark"]) input:-webkit-autofill:focus,
    :where(html[data-theme="dark"]) textarea:-webkit-autofill,
    :where(html[data-theme="dark"]) select:-webkit-autofill {
        -webkit-text-fill-color: var(--gb-text);
        caret-color: var(--gb-text);
        box-shadow: 0 0 0 1000px var(--gb-input-bg) inset;
    }

    /* ---------- Focus (§14: outline, survives forced colours) ---------- */
    :where(html[data-theme="dark"]) :focus-visible {
        outline: 2px solid var(--gb-focus);
        outline-offset: 2px;
    }

    /* ---------- Toggle icon state (visual only; the name never changes) ---------- */
    html[data-theme="dark"] .gb-theme-toggle .gb-theme-ic-moon { display: none; }
    html[data-theme="dark"] .gb-theme-toggle .gb-theme-ic-sun { display: block; }
}

/* ---------- Theme-switch transitions: only after first paint, never under reduced motion ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
    html.gb-theme-ready[data-theme="dark"] body {
        transition: background-color 150ms ease, color 150ms ease;
    }
}

/* ==========================================================
   Phase 2: shared public chrome
   ========================================================== */
@media screen {
    html[data-theme="dark"] {
        --gb-ink: var(--gb-ink-fill);
        --gb-ink-soft: var(--gb-text-muted);
        --gb-line: var(--gb-border);
        --gb-muted: var(--gb-surface-alt);
    }

    /* GB header, navigation, search and mobile strip */
    html[data-theme="dark"] .gb-top,
    html[data-theme="dark"] .gb-nav,
    html[data-theme="dark"] .gb-mobile-icons {
        background-color: var(--gb-surface);
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] .gb-nav {
        border-bottom-color: var(--gb-border);
    }

    html[data-theme="dark"] .gb-util,
    html[data-theme="dark"] .gb-util .gb-ic,
    html[data-theme="dark"] .gb-nav-link,
    html[data-theme="dark"] .gb-hamburger,
    html[data-theme="dark"] .gb-logo {
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-util:hover,
    html[data-theme="dark"] .gb-util:hover .gb-ic,
    html[data-theme="dark"] .gb-nav-link:hover,
    html[data-theme="dark"] .gb-nav-item.active > .gb-nav-link {
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] .gb-lang-ic,
    html[data-theme="dark"] .gb-util:hover .gb-lang-ic {
        color: var(--gb-text) !important;
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] .gb-util .gb-badge {
        border-color: var(--gb-surface);
    }

    html[data-theme="dark"] .gb-logo-img,
    html[data-theme="dark"] .footer-logo {
        background-color: var(--gb-logo-plate);
        border-radius: 6px;
    }

    html[data-theme="dark"] .gb-search {
        background-color: var(--gb-input-bg);
        border-color: var(--gb-input-border);
    }

    html[data-theme="dark"] .gb-search input {
        background-color: transparent;
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-search input::placeholder {
        color: var(--gb-placeholder);
        opacity: 1;
    }

    html[data-theme="dark"] .gb-search:focus-within {
        box-shadow: 0 0 0 3px var(--gb-focus);
    }

    html[data-theme="dark"] .gb-search button {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-search button:hover {
        background-color: var(--gb-red);
        color: #fff;
    }

    html[data-theme="dark"] .gb-cart-dd-wrap .dropdown-menu,
    html[data-theme="dark"] .gb-dd {
        background-color: var(--gb-elevated);
        border-color: var(--gb-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-cart-dd-wrap .product-cart-details {
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-cart-dd-wrap .gb-util-label-text {
        color: var(--gb-text) !important;
    }

    html[data-theme="dark"] .gb-cart-dd-wrap .product-title a,
    html[data-theme="dark"] .gb-dd-item {
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-cart-dd-wrap .btn-outline-primary-2 {
        color: var(--gb-text) !important;
    }

    html[data-theme="dark"] .gb-cart-dd-wrap .btn-outline-primary-2:hover {
        background-color: var(--gb-red) !important;
        border-color: var(--gb-red) !important;
        color: #fff !important;
    }

    html[data-theme="dark"] .gb-dd-item:hover,
    html[data-theme="dark"] .gb-dd-item:hover .gb-dd-ic,
    html[data-theme="dark"] .gb-dd-item:hover .gb-dd-age {
        background-color: var(--gb-red-tint);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] .gb-dd-item .gb-dd-ic,
    html[data-theme="dark"] .gb-dd-item .gb-dd-age {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] .gb-mega-col h4 {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] .gb-mega-promo,
    html[data-theme="dark"] .gb-mega-promo.girls {
        background: linear-gradient(155deg, var(--gb-surface-alt), var(--gb-elevated));
    }

    html[data-theme="dark"] .gb-mega-promo .gb-eyebrow,
    html[data-theme="dark"] .gb-mega-promo.girls .gb-eyebrow,
    html[data-theme="dark"] .gb-mega-promo h3,
    html[data-theme="dark"] .gb-mega-promo.girls h3,
    html[data-theme="dark"] .gb-mega-promo p,
    html[data-theme="dark"] .gb-mega-promo.girls p {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] .gb-mega-promo h3,
    html[data-theme="dark"] .gb-mega-promo.girls h3 {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] .gb-mega-promo .gb-shop-btn {
        background-color: var(--gb-btn-primary-bg);
        color: var(--gb-btn-primary-text);
    }

    html[data-theme="dark"] .gb-mega-promo .gb-shop-btn:hover {
        background-color: var(--gb-red);
        color: #fff;
    }

    /* The inline foreground colours on the compact mobile controls are intentional
       in the light header; these narrow overrides let them follow the dark strip. */
    html[data-theme="dark"] .gb-mobile-icons a {
        color: var(--gb-text) !important;
    }

    html[data-theme="dark"] .gb-mobile-icons .gb-badge {
        border-color: var(--gb-surface);
    }

    html[data-theme="dark"] .gb-theme-toggle--mobile {
        color: var(--gb-text);
    }

    /* Mobile drawer and its expandable navigation */
    html[data-theme="dark"] .gb-drawer-panel {
        background-color: var(--gb-surface);
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-drawer-overlay {
        background-color: var(--gb-overlay);
    }

    html[data-theme="dark"] .gb-drawer-head,
    html[data-theme="dark"] .gb-drawer-foot,
    html[data-theme="dark"] .gb-drawer-link,
    html[data-theme="dark"] .gb-drawer-sub-link {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] .gb-drawer-head .gb-drawer-logo,
    html[data-theme="dark"] .gb-drawer-close,
    html[data-theme="dark"] .gb-drawer-link,
    html[data-theme="dark"] .gb-drawer-sub-link,
    html[data-theme="dark"] .gb-drawer-accordion-trigger {
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-drawer-close:hover,
    html[data-theme="dark"] .gb-drawer-link:hover,
    html[data-theme="dark"] .gb-drawer-accordion-trigger:hover,
    html[data-theme="dark"] .gb-drawer-accordion-trigger.open,
    html[data-theme="dark"] .gb-drawer-sub-link:hover {
        background-color: var(--gb-red-tint);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] .gb-drawer-section-title {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] .gb-drawer-sub {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] .gb-drawer-sub-link::before {
        background-color: var(--gb-border);
    }

    html[data-theme="dark"] .gb-drawer-foot-btn {
        border-color: var(--gb-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] .gb-drawer-foot-btn.primary,
    html[data-theme="dark"] .gb-drawer-foot-btn.primary:hover {
        background-color: var(--gb-btn-primary-bg);
        border-color: var(--gb-btn-primary-bg);
        color: var(--gb-btn-primary-text);
    }

    html[data-theme="dark"] .gb-header .btn-primary {
        background-color: var(--gb-btn-primary-bg) !important;
        border-color: var(--gb-btn-primary-bg) !important;
        color: var(--gb-btn-primary-text) !important;
    }

    html[data-theme="dark"] .gb-drawer-foot-btn:hover {
        background-color: var(--gb-red);
        border-color: var(--gb-red);
        color: #fff;
    }

    /* Shared footer and logo plate */
    html[data-theme="dark"] .footer {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] .footer p {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] .footer .footer-middle,
    html[data-theme="dark"] .footer .footer-bottom .container::before {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] .footer .footer-bottom .container::before {
        background-color: var(--gb-border);
    }

    html[data-theme="dark"] .footer .widget-title,
    html[data-theme="dark"] .footer .widget-about-title {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] .footer a:hover,
    html[data-theme="dark"] .footer a:focus {
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] .footer .social-phone .icon-phone {
        color: var(--gb-text) !important;
    }

    html[data-theme="dark"] .footer .bootstrap-select .dropdown-menu li a {
        color: var(--gb-text);
    }

    html[data-theme="dark"] .footer .bootstrap-select .dropdown-menu li a:hover {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text);
    }

    /* Shared page headers, breadcrumbs and pagination; background photos remain natural. */
    html[data-theme="dark"] .page-header {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] .cta.bg-image {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] .page-header h1 {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .page-header h1 span {
        color: #c88442;
    }

    html[data-theme="dark"] .breadcrumb-nav {
        border-bottom-color: var(--gb-border);
    }

    html[data-theme="dark"] .breadcrumb-item a,
    html[data-theme="dark"] .breadcrumb-item.active {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] .page-link {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] .page-item.active .page-link {
        color: var(--gb-red-text);
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] .page-item.disabled .page-link,
    html[data-theme="dark"] .page-item-total {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] .page-link:hover,
    html[data-theme="dark"] .page-link:focus {
        color: var(--gb-red-text);
        border-color: var(--gb-border);
    }

    /* Shared dropdown, modal, alert and table surfaces. Product/catalog cards stay
       owned by Phase 3 and are deliberately not selected here. */
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .popover,
    html[data-theme="dark"] .tooltip-inner {
        background-color: var(--gb-elevated);
        border-color: var(--gb-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] .dropdown-menu .dropdown-item,
    html[data-theme="dark"] .dropdown-menu > li > a {
        color: var(--gb-text);
    }

    html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
    html[data-theme="dark"] .dropdown-menu .dropdown-item:focus,
    html[data-theme="dark"] .dropdown-menu > li > a:hover,
    html[data-theme="dark"] .dropdown-menu > li > a:focus {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text);
    }

    html[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder {
        color: var(--gb-placeholder);
    }

    html[data-theme="dark"] .dropdown-divider,
    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-footer,
    html[data-theme="dark"] .table th,
    html[data-theme="dark"] .table td,
    html[data-theme="dark"] table th,
    html[data-theme="dark"] table td {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] .modal .close {
        color: var(--gb-text-muted);
        text-shadow: none;
    }

    html[data-theme="dark"] #signin-modal .nav-pills .nav-link {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] #signin-modal .form-box {
        background-color: var(--gb-surface);
        color: var(--gb-text);
    }

    html[data-theme="dark"] #signin-modal .form-tab label {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] #signin-modal .form-tab .nav.nav-pills,
    html[data-theme="dark"] #signin-modal .form-tab .form-footer {
        border-bottom-color: var(--gb-border);
    }

    html[data-theme="dark"] #signin-modal .nav-pills .nav-link.active {
        background-color: var(--gb-red-tint);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] #signin-modal .btn-outline-primary-2 {
        color: var(--gb-text) !important;
    }

    html[data-theme="dark"] #signin-modal .btn-primary {
        background-color: var(--gb-btn-primary-bg);
        border-color: var(--gb-btn-primary-bg);
        color: var(--gb-btn-primary-text);
    }

    html[data-theme="dark"] .modal-backdrop.show {
        opacity: 0.65;
    }

    html[data-theme="dark"] .table {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.035);
    }

    html[data-theme="dark"] .alert-primary,
    html[data-theme="dark"] .alert-info {
        background-color: #1b2d3d;
        border-color: #315b78;
        color: var(--gb-info);
    }

    html[data-theme="dark"] .alert-success {
        background-color: #193126;
        border-color: #2b6547;
        color: var(--gb-success);
    }

    html[data-theme="dark"] .alert-danger {
        background-color: var(--gb-red-tint);
        border-color: #68303a;
        color: var(--gb-danger);
    }

    html[data-theme="dark"] .alert-warning {
        background-color: #362e1b;
        border-color: #645024;
        color: var(--gb-warning);
    }

    html[data-theme="dark"] .alert-secondary,
    html[data-theme="dark"] .alert-dark {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-border);
        color: var(--gb-text-body);
    }
}

/* ==========================================================
   Phase 3: public catalog surfaces (P1–P3 only)
   ========================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
    html.gb-theme-ready:has(main .cat-blocks-container) body.page-wrapper,
    html.gb-theme-ready:has(main .product-details-top) body.page-wrapper {
        transition: transform 0.4s ease;
    }
}

@media screen {
    main:has(.cat-blocks-container) .smakthat > img {
        display: block;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    main:has(.cat-blocks-container) .product > .product-body,
    main:has(.toolbox-sort) .products .product > .product-body,
    main:has(.product-details-top) .owl-carousel .product.product-7 > .product-body {
        transition: transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

    main:has(.cat-blocks-container) .product > .product-body .product-title a,
    main:has(.toolbox-sort) .products .product > .product-body .product-title a,
    main:has(.product-details-top) .owl-carousel .product.product-7 > .product-body .product-title a {
        transition: color 0s ease;
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-top .product-details > #ajax_add_product > .product-price {
        --gb-p3-price: #75cf78;
    }

    /* Homepage catalog cards and collection titles; photographic sections remain untouched. */
    html[data-theme="dark"] main:has(.cat-blocks-container) .product,
    html[data-theme="dark"] main:has(.cat-blocks-container) .cat-block {
        background-color: var(--gb-surface);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .product-media {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .product-body,
    html[data-theme="dark"] main:has(.cat-blocks-container) .cat-block-title {
        background-color: var(--gb-surface);
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .product-title a,
    html[data-theme="dark"] main:has(.cat-blocks-container) .product-price,
    html[data-theme="dark"] main:has(.cat-blocks-container) .product-price .new-price {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .product-price .old-price,
    html[data-theme="dark"] main:has(.cat-blocks-container) .product-cat,
    html[data-theme="dark"] main:has(.cat-blocks-container) .ratings-text {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .product-action .btn-product {
        background-color: var(--gb-btn-primary-bg);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) {
        --gb-secondary: #276b3b;
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .smakthat h5 {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .smakthat p {
        color: var(--gb-red-text);
    }

    /* Category listing cards, toolbar, filters and pagination-adjacent controls. */
    html[data-theme="dark"] main:has(.toolbox-sort) .products .product,
    html[data-theme="dark"] main:has(.toolbox-sort) .sidebar-shop,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-media {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-body {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .toolbox,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget-clean,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget-collapsible,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-container {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .toolbox {
        background-color: var(--gb-surface);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .toolbox-info > span {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) #sortby,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap input,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget select {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-input-border);
        color: var(--gb-text);
    }

    main:has(.toolbox-sort) #sortby {
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    main:has(.toolbox-sort) .sidebar-shop .widget-title a,
    main:has(.toolbox-sort) .pagination .page-item.active .page-link {
        transition: color 0s ease;
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .toolbox-sort .select-custom::after {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .toolbox-info,
    html[data-theme="dark"] main:has(.toolbox-sort) .toolbox-sort label,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget-title,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget-clean label,
    html[data-theme="dark"] main:has(.toolbox-sort) .custom-control-label,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap input {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .widget-title a::after {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-title a,
    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-price,
    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-price .new-price {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-price .old-price,
    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-cat,
    html[data-theme="dark"] main:has(.toolbox-sort) .products .ratings-text {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .products .product-action .btn-product {
        background-color: var(--gb-btn-primary-bg);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .sidebar-shop .btn-primary {
        background-color: #c8102e;
        border-color: #c8102e;
        color: #fff;
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .pagination .page-link {
        background-color: var(--gb-surface);
        border-color: var(--gb-border);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .pagination .page-item.active .page-link {
        background-color: var(--gb-red-tint);
        border-color: var(--gb-red-tint);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .pagination .page-item.disabled .page-link {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) {
        --gb-secondary: #276b3b;
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .filter-colors a {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .price-title {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .price-field input[type="range"] {
        border-color: var(--gb-surface-alt);
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .price-field input[type="range"]::-webkit-slider-runnable-track,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-field input[type="range"]::-moz-range-track {
        background-color: var(--gb-text-muted);
    }

    /* Product detail gallery, controls, information tabs and related-product cards. */
    html[data-theme="dark"] main:has(.product-details-top) .product-main-image,
    html[data-theme="dark"] main:has(.product-details-top) .product-image-gallery,
    html[data-theme="dark"] main:has(.product-details-top) .product-gallery-item {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-top,
    html[data-theme="dark"] main:has(.product-details-top) .product-details,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-tab,
    html[data-theme="dark"] main:has(.product-details-top) .tab-content,
    html[data-theme="dark"] main:has(.product-details-top) .product-desc-content,
    html[data-theme="dark"] main:has(.product-details-top) .reviews,
    html[data-theme="dark"] main:has(.product-details-top) .review {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details .product-title,
    html[data-theme="dark"] main:has(.product-details-top) .product-details .product-content,
    html[data-theme="dark"] main:has(.product-details-top) .product-details .product-cat,
    html[data-theme="dark"] main:has(.product-details-top) .product-desc-content h3,
    html[data-theme="dark"] main:has(.product-details-top) .reviews h3,
    html[data-theme="dark"] main:has(.product-details-top) .review h4 a {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details .ratings-text,
    html[data-theme="dark"] main:has(.product-details-top) .review-date {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-top .product-cat,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-top .product-cat a {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.product-details-top) .details-filter-row,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-footer,
    html[data-theme="dark"] main:has(.product-details-top) .review {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.product-details-top) .details-filter-row .form-control,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .form-control {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-input-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-quantity .btn-spinner {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-input-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-quantity .btn-spinner i::before {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.product-details-top) .details-filter-row .select-custom::after {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.product-details-top) .btn-product-gallery {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-border);
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-cart {
        background-color: #c8102e;
        border-color: #c8102e;
        color: #fff;
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-cart > span {
        color: #fff;
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-wishlist {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-border);
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-wishlist > span {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-tab > .nav-pills .nav-link {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-tab > .nav-pills .nav-link.active {
        background-color: var(--gb-red-tint);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-media {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-body {
        background-color: var(--gb-surface);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-title a,
    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-price,
    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-price .new-price {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-price .old-price,
    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-cat,
    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .ratings-text {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.product-details-top) .owl-carousel .product-action .btn-product {
        background-color: var(--gb-btn-primary-bg);
    }

    html[data-theme="dark"] main:has(.product-details-top) {
        --gb-secondary: #276b3b;
    }

    /* Keep product status hues recognizable while making their labels readable. */
    html[data-theme="dark"] main:has(.cat-blocks-container) .product-label,
    html[data-theme="dark"] main:has(.toolbox-sort) .product-label,
    html[data-theme="dark"] main:has(.product-details-top) .product-label {
        color: var(--gb-btn-primary-text);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .product-action .btn-product:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .product-action .btn-product:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-action .btn-product:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .sidebar-shop .btn-primary:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-product:focus-visible {
        outline: 2px solid var(--gb-heading);
        outline-offset: 2px;
    }

    /* Homepage promo and hero containers keep their photos untouched. */
    html[data-theme="dark"] main:has(.cat-blocks-container) .intro-slider-container,
    html[data-theme="dark"] main:has(.cat-blocks-container) .intro-slide,
    html[data-theme="dark"] main:has(.cat-blocks-container) .banner {
        background-color: var(--gb-surface);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .intro-slider .owl-nav button {
        background-color: var(--gb-surface-alt);
        border-radius: 50%;
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .intro-slider .owl-nav .icon-angle-left::before,
    html[data-theme="dark"] main:has(.cat-blocks-container) .intro-slider .owl-nav .icon-angle-right::before {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .intro-slider .owl-nav button:focus-visible {
        outline: 2px solid var(--gb-heading);
        outline-offset: 2px;
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .smakthat h5 {
        color: var(--gb-heading) !important;
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .smakthat p {
        color: var(--gb-red-text) !important;
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .sidebar-shop .btn-primary:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) #sortby:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap input:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget select:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .filter-colors a:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-cart:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-wishlist:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .btn-product-gallery:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .details-filter-row .form-control:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-quantity .btn-spinner:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-nav-thumbs a:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-tab .nav-link:focus-visible {
        outline: 2px solid var(--gb-focus);
        outline-offset: 2px;
    }

    html[data-theme="dark"] main:has(.toolbox-sort) #sortby:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap input:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .widget select:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .details-filter-row .form-control:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .form-control:focus-visible {
        box-shadow: 0 0 0 2px var(--gb-focus);
    }

    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap #one,
    html[data-theme="dark"] main:has(.toolbox-sort) .price-wrap #two {
        background-color: var(--gb-input-value-bg);
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .owl-dots .owl-dot span,
    html[data-theme="dark"] main:has(.toolbox-sort) .owl-dots .owl-dot span,
    html[data-theme="dark"] main:has(.product-details-top) .owl-dots .owl-dot span {
        background-color: var(--gb-input-border);
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .owl-dots .owl-dot.active span,
    html[data-theme="dark"] main:has(.toolbox-sort) .owl-dots .owl-dot.active span,
    html[data-theme="dark"] main:has(.product-details-top) .owl-dots .owl-dot.active span {
        background-color: var(--gb-red-text);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .owl-dots .owl-dot:hover span,
    html[data-theme="dark"] main:has(.toolbox-sort) .owl-dots .owl-dot:hover span,
    html[data-theme="dark"] main:has(.product-details-top) .owl-dots .owl-dot:hover span {
        background-color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.cat-blocks-container) .owl-dots .owl-dot:focus-visible,
    html[data-theme="dark"] main:has(.toolbox-sort) .owl-dots .owl-dot:focus-visible,
    html[data-theme="dark"] main:has(.product-details-top) .owl-dots .owl-dot:focus-visible {
        outline: 2px solid var(--gb-heading);
        outline-offset: 2px;
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-wishlist::before {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.product-details-top) .product-details-action .btn-cart::before {
        color: #fff;
    }

    /* ==========================================================
       Phase 4 — P4/P5 blog listing and article content
       ========================================================== */
    html[data-theme="dark"] main:has(.blog-nav) .blog-nav .menu-cat > li:not(.active) > a:not(:hover):not(:focus-visible),
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-content .read-more {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.blog-nav) .blog-nav .menu-cat > li > a span {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-grid,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-grid .entry-body {
        background-color: var(--gb-surface);
    }

    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-grid .entry-media,
    html[data-theme="dark"] main:has(.single-entry) > .page-content > .container > .entry-media,
    html[data-theme="dark"] main:has(.single-entry) .related-posts .entry-media {
        background-color: var(--gb-surface-alt);
    }

    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-title a,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .entry-title,
    html[data-theme="dark"] main:has(.single-entry) .related-posts .entry-title a,
    html[data-theme="dark"] main:has(.single-entry) .sidebar .widget-title {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-cats a,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .entry-meta a,
    html[data-theme="dark"] main:has(.single-entry) .related-posts .entry-meta a,
    html[data-theme="dark"] main:has(.single-entry) .sidebar .widget-cats a,
    html[data-theme="dark"] main:has(.single-entry) .sidebar .posts-list a,
    html[data-theme="dark"] main:has(.single-entry) .sidebar .posts-list span {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-content p,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .editor-content,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .editor-content p,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .editor-content li {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(.single-entry) .single-entry .entry-body,
    html[data-theme="dark"] main:has(.single-entry) .related-posts .entry-body,
    html[data-theme="dark"] main:has(.single-entry) .sidebar .widget {
        background-color: var(--gb-surface);
    }

    html[data-theme="dark"] main:has(.single-entry) .pager-nav,
    html[data-theme="dark"] main:has(.single-entry) .related-posts {
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.single-entry) .related-posts .owl-dots .owl-dot span {
        background-color: var(--gb-input-border);
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(.single-entry) .related-posts .owl-dots .owl-dot.active span {
        background-color: var(--gb-red-text);
    }

    html[data-theme="dark"] main:has(.single-entry) .related-posts .owl-dots .owl-dot:hover span {
        background-color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(.single-entry) .related-posts .owl-dots .owl-dot:focus-visible {
        outline: 2px solid var(--gb-focus);
        outline-offset: 2px;
    }

    html[data-theme="dark"] main:has(.single-entry) .single-entry .editor-content a {
        color: var(--gb-info);
        text-decoration: underline;
        text-underline-offset: 0.12em;
    }

    html[data-theme="dark"] main:has(.blog-nav) .blog-nav .menu-cat > li > a:hover,
    html[data-theme="dark"] main:has(.blog-nav) .blog-nav .menu-cat > li > a:focus-visible,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-title a:hover,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-title a:focus-visible,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-cats a:hover,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-cats a:focus-visible,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-content .read-more:hover,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container .entry-content .read-more:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .entry-meta a:hover,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .entry-meta a:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .editor-content a:hover,
    html[data-theme="dark"] main:has(.single-entry) .single-entry .editor-content a:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .sidebar a:hover,
    html[data-theme="dark"] main:has(.single-entry) .sidebar a:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .related-posts a:hover,
    html[data-theme="dark"] main:has(.single-entry) .related-posts a:focus-visible {
        color: var(--gb-focus);
    }

    html[data-theme="dark"] main:has(.blog-nav) .blog-nav a:focus-visible,
    html[data-theme="dark"] main:has(.blog-nav) .entry-container a:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .single-entry a:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .related-posts a:focus-visible,
    html[data-theme="dark"] main:has(.single-entry) .sidebar a:focus-visible {
        outline: 2px solid var(--gb-focus);
        outline-offset: 2px;
    }

    html[data-theme="dark"] body:has(.blog-nav),
    html[data-theme="dark"] body:has(.single-entry) {
        transition: background-color 0s ease, color 0s ease;
    }

    /* ==========================================================
       Phase 4 — P6 About Us informational content only
       ========================================================== */
    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 {
        background-color: var(--gb-surface) !important;
    }

    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .container span[style*="color:#000000"],
    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .container span[style*="color:#4e5f70"] {
        color: var(--gb-text-body) !important;
    }

    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 a.btn-outline-primary-2[href="/blog"] {
        color: var(--gb-text) !important;
        border-color: var(--gb-text) !important;
    }

    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 a.btn-outline-primary-2[href="/blog"]:hover,
    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 a.btn-outline-primary-2[href="/blog"]:focus-visible,
    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 a.btn-outline-primary-2[href="/blog"]:active {
        color: #fff !important;
        background-color: var(--gb-red) !important;
        border-color: var(--gb-text) !important;
    }

    html[data-theme="dark"] main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 a.btn-outline-primary-2[href="/blog"]:focus-visible {
        outline: 2px solid #fff !important;
        outline-offset: 2px;
    }

    html[data-theme="dark"] body.page-wrapper:has(> main > .page-content > .bg-light-2 > .container a.btn[href="/blog"]) {
        transition: background-color 0s ease, color 0s ease, transform 0.4s ease;
    }

    main:has(> .page-content > .bg-light-2 > .container a.btn[href="/blog"])
        > .page-content > .bg-light-2 a.btn-outline-primary-2[href="/blog"] {
        transition: all 0.3s ease, color 0s ease, background-color 0s ease, border-color 0s ease;
    }

    /* ==========================================================
       Phase 4 - P7 Gallery landing controls only
       ========================================================== */
    html[data-theme="dark"] main > .page-content #bg:has(a.btn[href="/photos"]):has(a.btn[href="/videos"])
        a.btn:is([href="/photos"], [href="/videos"]) > span {
        color: var(--gb-text);
        -webkit-text-fill-color: currentColor;
    }

    html[data-theme="dark"] main > .page-content #bg:has(a.btn[href="/photos"]):has(a.btn[href="/videos"])
        a.btn:is([href="/photos"], [href="/videos"]):hover {
        background-image: linear-gradient(to right, var(--gb-heading), var(--gb-text) 50%, var(--gb-text-body) 50%);
    }

    html[data-theme="dark"] main > .page-content #bg:has(a.btn[href="/photos"]):has(a.btn[href="/videos"])
        a.btn:is([href="/photos"], [href="/videos"]):hover > span {
        -webkit-text-fill-color: transparent;
    }

    html[data-theme="dark"] main > .page-content #bg:has(a.btn[href="/photos"]):has(a.btn[href="/videos"])
        a.btn:is([href="/photos"], [href="/videos"]):focus-visible {
        position: relative;
    }

    html[data-theme="dark"] main > .page-content #bg:has(a.btn[href="/photos"]):has(a.btn[href="/videos"])
        a.btn:is([href="/photos"], [href="/videos"]):focus-visible::after {
        content: "";
        position: absolute;
        inset: 2px;
        border: 2px solid #fff;
        pointer-events: none;
    }

    html[data-theme="dark"] body.page-wrapper:has(> main > .page-content #bg a.btn[href="/photos"]):has(> main > .page-content #bg a.btn[href="/videos"]) {
        transition: background-color 0s ease, color 0s ease, transform 0.4s ease;
    }

    /* ==========================================================
       Phase 4 — P8 Photos/Videos canvas
       ========================================================== */
    html[data-theme="dark"] body.page-wrapper:has(> main > .content-wrapper > .section > .container > .container.gallery-container > .tz-gallery) {
        background-color: var(--gb-bg);
        color: var(--gb-text);
        transition: background-color 0s ease, color 0s ease;
    }

    /* ==========================================================
       Phase 4 - P9 policy content only; exclude FAQ card headers
       ========================================================== */
    html[data-theme="dark"] main:has(> .page-content > .container > #accordion-1 > .card.card-box.card-sm.bg-light > .collapse > .card-body):not(:has(.card-header))
        > .page-content > .container > #accordion-1 > .card.card-box.card-sm.bg-light {
        /* The vendor card background is important. */
        background-color: var(--gb-surface) !important;
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > #accordion-1 > .card.card-box.card-sm.bg-light > .collapse > .card-body):not(:has(.card-header))
        .card-body span[style*="color:#000000" i] {
        color: var(--gb-text-body) !important;
    }

    html[data-theme="dark"] main:has(> .page-content > .container > #accordion-1 > .card.card-box.card-sm.bg-light > .collapse > .card-body):not(:has(.card-header))
        .card-body span[style*="color:#e74c3c" i] {
        color: var(--gb-danger) !important;
    }

    /* Keep inherited CMS text and the canvas atomic on Dark entry. */
    html[data-theme="dark"] body.page-wrapper:has(> main > .page-content > .container > #accordion-1 > .card.card-box.card-sm.bg-light > .collapse > .card-body):not(:has(> main .card-header)) {
        transition: background-color 0s ease, color 0s ease, transform 0.4s ease;
    }

    /* ==========================================================
       Phase 4 - P10 FAQ accordion surfaces and controls only
       ========================================================== */
    main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header .card-title > a[data-toggle="collapse"] {
        transition: color 0s ease;
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light {
        background-color: var(--gb-surface) !important;
        border-color: var(--gb-border);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header .card-title > a[data-toggle="collapse"] {
        background-color: var(--gb-surface-alt);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light:has(> .collapse.show) > .card-header .card-title > a[data-toggle="collapse"] {
        background-color: var(--gb-elevated);
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light:not(:has(> .collapse.show)) > .card-header .card-title > a[data-toggle="collapse"]::before {
        color: var(--gb-text-muted);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light:has(> .collapse.show) > .card-header .card-title > a[data-toggle="collapse"]::before {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header .card-title > a[data-toggle="collapse"]:focus-visible {
        box-shadow: inset 0 0 0 2px var(--gb-focus);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light .card-body {
        background-color: transparent;
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main:has(> .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light > .card-header)
        > .page-content > .container > .accordion.accordion-rounded > .card.card-box.card-sm.bg-light .card-body span[style*="color:#000000" i] {
        color: var(--gb-text-body) !important;
    }

    /* ==========================================================
       Phase 4 - P11 Contact submit label and direction icon only
       ========================================================== */
    html[data-theme="dark"] form#ajax-contact .form-control:focus-visible {
        outline: 2px solid var(--gb-focus) !important;
        outline-offset: 2px;
    }

    html[data-theme="dark"] main:has(> .page-content > .container form#ajax-contact)
        form#ajax-contact > .col-md-12.pull-left > button#submit.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit {
        background-image: linear-gradient(var(--gb-bg), var(--gb-bg));
    }

    html[data-theme="dark"] main:has(> .page-content > .container form#ajax-contact)
        form#ajax-contact > .col-md-12.pull-left > button#submit.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit > span,
    html[data-theme="dark"] main:has(> .page-content > .container form#ajax-contact)
        form#ajax-contact > .col-md-12.pull-left > button#submit.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit > i {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(> .page-content > .container form#ajax-contact)
        form#ajax-contact > .col-md-12.pull-left > button#submit.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:is(:hover, :focus-visible, :active) > span,
    html[data-theme="dark"] main:has(> .page-content > .container form#ajax-contact)
        form#ajax-contact > .col-md-12.pull-left > button#submit.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:is(:hover, :focus-visible, :active) > i {
        color: var(--gb-heading);
    }

    /* ==========================================================
       Phase 4 — P12 Track Order
       ========================================================== */
    html[data-theme="dark"] main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit {
        background-image: linear-gradient(var(--gb-elevated), var(--gb-elevated));
    }

    html[data-theme="dark"] main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit > span,
    html[data-theme="dark"] main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit > i {
        color: var(--gb-heading);
    }

    html[data-theme="dark"] main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:focus-visible {
        position: relative;
    }

    html[data-theme="dark"] main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:focus-visible::after {
        content: "";
        position: absolute;
        inset: -4px;
        box-sizing: border-box;
        border: 2px solid var(--gb-focus);
        border-radius: inherit;
        pointer-events: none;
    }

    /* P12 owner-approved Light hover, focus-visible, and active correction. */
    html:not([data-theme="dark"]) main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:is(:hover, :focus-visible, :active) {
        background-image: linear-gradient(#bf8040, #bf8040);
    }

    html:not([data-theme="dark"]) main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:is(:hover, :focus-visible, :active) > span,
    html:not([data-theme="dark"]) main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:is(:hover, :focus-visible, :active) > i {
        color: #15171a;
    }

    html:not([data-theme="dark"]) main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:focus-visible {
        position: relative;
    }

    html:not([data-theme="dark"]) main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit:focus-visible::after {
        content: "";
        position: absolute;
        inset: -4px;
        box-sizing: border-box;
        border: 2px solid #bf8040;
        border-radius: inherit;
        pointer-events: none;
    }

}

/* Keep only vendor-transitioned P4/P5 link colours atomic across theme changes.
   Preserve the non-colour hover motion supplied by the vendor stylesheet. */
@media screen {
    main:has(.blog-nav) .blog-nav .menu-cat > li > a,
    main:has(.blog-nav) .entry-container .entry-title a,
    main:has(.single-entry) .related-posts .entry-title a,
    main:has(.single-entry) .sidebar .widget-cats a,
    main:has(.single-entry) .sidebar .posts-list a {
        transition: color 0s ease;
    }

    main:has(.blog-nav) .entry-container .entry-cats a,
    main:has(.single-entry) .single-entry .entry-meta a,
    main:has(.single-entry) .related-posts .entry-meta a {
        transition: color 0s ease, box-shadow 0.3s ease;
    }

    main:has(.blog-nav) .entry-container .entry-content .read-more {
        transition: color 0s ease, padding-right 0.3s ease, box-shadow 0.3s ease,
                    outline-width 0.3s ease, outline-offset 0.3s ease;
    }

    /* P11 owner-approved both-theme timing exception: make Contact submit color and
       background-color transitions instantaneous across Light and Dark to prevent
       vendor-transitioned hover-exit contrast dips while preserving motion. */
    main:has(> .page-content > .container form#ajax-contact)
        form#ajax-contact > .col-md-12.pull-left > button#submit.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit {
        transition: all .3s ease, color 0s ease, background-color 0s ease;
    }

    /* P12 owner-approved both-theme timing exception; Track Order submit only. */
    main:has(> .page-content > .cart > .container form#ajax-order)
        form#ajax-order > .col-md-12.pull-left > button.btn.btn-outline-primary-2.btn-minwidth-sm.btn-sumbit {
        transition: all 0.3s ease, color 0s ease, background-color 0s ease;
    }

    /* ==========================================================
       Phase 4 — Shared Breadcrumb Transition Contrast
       ========================================================== */
    main > nav.breadcrumb-nav > .container > ol.breadcrumb > .breadcrumb-item > a {
        transition: color 0s ease;
    }

    html[data-theme="dark"] main > nav.breadcrumb-nav:has(> .container > ol.breadcrumb) {
        background-color: var(--gb-bg);
    }

    /* ==========================================================
       Phase 4 — P13 Error Page
       ========================================================== */
    main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg {
        transition: all 0.3s ease, color 0s ease, background-color 0s ease, border-color 0s ease;
    }

    main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg > span,
    main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg > i::before {
        transition: color 0s ease;
    }

    html[data-theme="light"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:is(:hover, :focus-visible) > span,
    html[data-theme="light"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:is(:hover, :focus-visible) > i::before {
        color: #15171a;
    }

    html[data-theme="light"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:focus-visible {
        outline: 2px solid #15171a !important;
        outline-offset: 2px;
        transition: all 0.3s ease, color 0s ease, background-color 0s ease, border-color 0s ease, outline-color 0s ease, outline-width 0s ease, outline-offset 0s ease;
    }

    html[data-theme="dark"] main.main > .error-content.text-center {
        position: relative;
        isolation: isolate;
        background-color: var(--gb-bg);
    }

    html[data-theme="dark"] main.main > .error-content.text-center::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: var(--gb-bg);
        pointer-events: none;
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container {
        position: relative;
        z-index: 1;
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > .error-title {
        color: var(--gb-text);
        transition: color 0s ease;
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > p {
        color: var(--gb-text-body);
        transition: color 0s ease;
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg {
        background-color: var(--gb-elevated);
        border-color: var(--gb-border);
        transition: background-color 0s ease, border-color 0s ease;
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg > span,
    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg > i::before {
        color: var(--gb-text);
        transition: color 0s ease;
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:focus > span,
    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:focus > i::before {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:is(:hover, :active) > span,
    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:is(:hover, :active) > i::before {
        color: var(--gb-bg);
    }

    html[data-theme="dark"] main.main > .error-content.text-center > .container > a.btn.btn-outline-primary-2.btn-minwidth-lg:focus-visible {
        box-shadow: 0 0 0 2px var(--gb-bg), 0 0 0 4px var(--gb-focus);
    }

}

@media screen and (prefers-reduced-motion: reduce) {
    main:has(.toolbox-sort) #sortby {
        transition: border-color 0s ease, box-shadow 0s ease;
    }
}

/* Phase 5 — P14 login page surfaces and keyboard focus only. */
@media screen {
    html:not([data-theme="dark"]) main.main .login-page .form-box .form-tab .nav.nav-pills .nav-link:focus-visible,
    html:not([data-theme="dark"]) main.main .login-page .form-box .form-tab :is(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid #005fcc !important;
        outline-offset: 2px !important;
    }

    html[data-theme="dark"] main.main .login-page.bg-image {
        background-color: var(--gb-bg);
    }

    html[data-theme="dark"] main.main .login-page .form-box {
        background-color: var(--gb-surface);
        border: 1px solid var(--gb-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .form-tab label,
    html[data-theme="dark"] main.main .login-page .form-tab legend {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main.main .login-page .form-tab .nav.nav-pills {
        border-bottom-color: var(--gb-border);
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main.main .login-page .form-tab .nav.nav-pills .nav-link {
        color: var(--gb-text-body);
    }

    html[data-theme="dark"] main.main .login-page .form-tab .nav.nav-pills .nav-link.active {
        background-color: var(--gb-red-tint);
        border-bottom-color: var(--gb-red-text);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .form-tab .nav.nav-pills .nav-link:hover {
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main.main .login-page .form-tab a:not(.nav-link) {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .form-tab a:not(.nav-link):hover {
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main.main .login-page .form-control {
        background-color: var(--gb-input-bg);
        border-color: var(--gb-input-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .form-control::placeholder {
        color: var(--gb-placeholder);
        opacity: 1;
    }

    html[data-theme="dark"] main.main .login-page .btn-outline-primary-2 {
        background-color: var(--gb-surface-alt);
        border-color: var(--gb-text-muted);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-outline-primary-2 > span,
    html[data-theme="dark"] main.main .login-page .btn-outline-primary-2 > i::before {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-primary {
        background-color: var(--gb-btn-primary-bg);
        border-color: var(--gb-btn-primary-bg);
        color: var(--gb-btn-primary-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-primary > span,
    html[data-theme="dark"] main.main .login-page .btn-primary > i::before {
        color: var(--gb-btn-primary-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-primary:is(:hover, :active) {
        background-color: var(--gb-red-tint);
        border-color: var(--gb-red-text);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-primary:is(:hover, :active) > span,
    html[data-theme="dark"] main.main .login-page .btn-primary:is(:hover, :active) > i::before {
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main.main .login-page .bootstrap-select > .dropdown-toggle {
        background-color: var(--gb-input-bg);
        border-color: var(--gb-input-border);
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
        color: var(--gb-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-outline-primary-2:is(:hover, :active) {
        background-color: var(--gb-red-tint);
        border-color: var(--gb-red-text);
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main.main .login-page .btn-outline-primary-2:is(:hover, :active) > span,
    html[data-theme="dark"] main.main .login-page .btn-outline-primary-2:is(:hover, :active) > i::before {
        color: var(--gb-red-text);
    }

    html[data-theme="dark"] main.main .login-page .form-box .form-tab .nav.nav-pills .nav-link:focus-visible,
    html[data-theme="dark"] main.main .login-page .form-box .form-tab :is(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid var(--gb-focus) !important;
        outline-offset: 2px !important;
    }
}