/* pf_base — re-skin of the pfport front-end modules to the store tokens.
   The modules keep their own (inline) CSS and all behaviour; this file only overrides colour, radius and
   type so every widget reads as part of the skin. Selectors are prefixed with html[class*="pf-skin"]
   (one attribute = one class level) so they beat the modules' own rules whatever the load order. */

/* ---- shared variables the pfport modules already read (pf_ui_tweaks) ---- */
html:root {
  --pf-step-bg: var(--pf-field);
  --pf-step-bg-hover: var(--pf-line);
  --pf-step-fg: var(--pf-ink-strong);
  --pf-step-bd: var(--pf-line);
  --pf-step-radius: var(--pf-radius-sm);
  --pf-add-bg: var(--pf-cta);
  --pf-add-bg-hover: var(--pf-cta-hover);
  --pf-add-fg: var(--pf-cta-ink);
}

/* ---- tax toggle (pf_tax_toggle) ---- */
html[class*="pf-skin"] .pf-tt-trigger { background: var(--pf-primary); color: var(--pf-primary-ink); box-shadow: none; font-family: var(--pf-font-body); }
html[class*="pf-skin"] .pf-tt-trigger:hover, html[class*="pf-skin"] .pf-tt-host.pf-tt-open .pf-tt-trigger { background: var(--pf-primary-dark); }
html[class*="pf-skin"] .pf-tt-drop { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); box-shadow: var(--pf-shadow); }
html[class*="pf-skin"] .pf-tt-drop:before { border-color: var(--pf-line); }
html[class*="pf-skin"] .pf-tt-drop .pf-tt-label { color: var(--pf-faint); }
html[class*="pf-skin"] .pf-tt-drop .pf-tt-btn { border-color: var(--pf-line); color: var(--pf-ink-strong); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pf-tt-drop .pf-tt-btn:hover { background: var(--pf-panel); }
html[class*="pf-skin"] .pf-tt-drop .pf-tt-btn.pf-tt-active, html[class*="pf-skin"] .pf-tt-drop .pf-tt-btn.pf-tt-active:hover { background: var(--pf-primary); border-color: var(--pf-primary); color: var(--pf-primary-ink); }

/* ---- colour pills on listing cards (pf_colour_pills) ---- */
html[class*="pf-skin"] .pf-colour-pills .pf-cp { border-color: var(--pf-line); border-radius: 4px; }
html[class*="pf-skin"] .pf-colour-pills .pf-cp:hover { border-color: var(--pf-muted); }
html[class*="pf-skin"] .pf-colour-pills .pf-cp.pf-sel { border-color: var(--pf-select-line); box-shadow: 0 0 0 1px var(--pf-select-line); }
html[class*="pf-skin"] .pf-colour-pills .pf-cp.pf-sel::after { background: var(--pf-select-line); }

/* ---- quote basket (pf_quote_basket): header tile, product-page button, popup ---- */
html[class*="pf-skin"] #pf-qb-tile { background: var(--pf-primary); color: var(--pf-primary-ink) !important; border-radius: var(--pf-radius-sm); min-height: 44px; font-family: var(--pf-font-body); }
html[class*="pf-skin"] #pf-qb-tile:hover { background: var(--pf-primary-dark); }
html[class*="pf-skin"] #pf-qb-tile .pf-qb-count { background: var(--pf-accent); color: var(--pf-accent-ink); }
html[class*="pf-skin"] #button-quote { background: #fff !important; color: var(--pf-cta) !important; box-shadow: inset 0 0 0 2px var(--pf-cta); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] #button-quote:hover { background: var(--pf-cta) !important; color: var(--pf-cta-ink) !important; }
html[class*="pf-skin"] #pf-qb-note { color: var(--pf-muted); }
html[class*="pf-skin"] #pf-qb-note a, html[class*="pf-skin"] #pf-qb-note-toggle { color: var(--pf-primary); }
html[class*="pf-skin"] #pf-qb-modal .pf-qbm-box { border-radius: var(--pf-radius); }
html[class*="pf-skin"] .pf-qbp-head { background: var(--pf-primary); color: var(--pf-primary-ink); border-bottom: 0; }
html[class*="pf-skin"] .pf-qbp-head h3 { color: inherit; font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); }
html[class*="pf-skin"] .pf-qbp-table td { border-color: var(--pf-line-soft); }
html[class*="pf-skin"] .pf-qbp-img img { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pf-qbp-name a { color: var(--pf-ink-strong); }
html[class*="pf-skin"] .pf-qbp-rm a, html[class*="pf-skin"] .pf-qbp-empty i { color: var(--pf-sale); }
html[class*="pf-skin"] .pf-qbp-note { background: var(--pf-panel); border-left-color: var(--pf-primary); color: var(--pf-ink); }
html[class*="pf-skin"] .pf-qbp-note a { color: var(--pf-primary); }
html[class*="pf-skin"] .pf-qbp-ask { background: var(--pf-warn-bg); border-color: transparent; border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pf-qbp-ask p { color: var(--pf-warn); }
html[class*="pf-skin"] .pf-qbp-foot { background: var(--pf-panel); border-top-color: var(--pf-line); }
html[class*="pf-skin"] .pf-qbp .btn-getquote { background: var(--pf-cta) !important; border-color: var(--pf-cta) !important; color: var(--pf-cta-ink) !important; border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pf-qbp .btn-getquote:hover { background: var(--pf-cta-hover) !important; }
html[class*="pf-skin"] .pf-qbp .btn-default { border-color: var(--pf-line) !important; color: var(--pf-ink-strong) !important; border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .notification.pf-quote-notif .notification-title { color: var(--pf-primary); }

/* ---- pf_ui_tweaks option cards (text tiles + image tiles) ---- */
html[class*="pf-skin"] .push-option > [id^="input-option"]:not(:has(img)) .option-wrapper:not(#_):not(#_) { border-color: var(--pf-line) !important; border-radius: var(--pf-radius-sm) !important; }
html[class*="pf-skin"] .push-option > [id^="input-option"]:not(:has(img)) .option-value:not(#_):not(#_) { color: var(--pf-ink-strong); }
html[class*="pf-skin"] .push-option > [id^="input-option"]:not(:has(img)) label:hover .option-wrapper:not(#_):not(#_) { border-color: var(--pf-muted) !important; }
html[class*="pf-skin"] .push-option > [id^="input-option"]:not(:has(img)) input:checked + .option-wrapper:not(#_):not(#_) { border-color: var(--pf-select-line) !important; background: var(--pf-select-bg) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-select-line) 15%, transparent) !important; }
html[class*="pf-skin"] .push-option > [id^="input-option"]:not(:has(img)) input:focus-visible + .option-wrapper:not(#_):not(#_) { outline-color: var(--pf-select-line); }
html[class*="pf-skin"] .product-option-checkbox > [id^="input-option"]:has(.push-option-image img) label:not(#_):not(#_) { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .product-option-checkbox > [id^="input-option"]:has(.push-option-image img) label:hover:not(#_):not(#_) { border-color: var(--pf-muted); }
html[class*="pf-skin"] .product-option-checkbox > [id^="input-option"]:has(.push-option-image img) label:has(input:checked):not(#_):not(#_) { border-color: var(--pf-select-line); background: var(--pf-select-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-select-line) 15%, transparent); }
html[class*="pf-skin"] .product-option-checkbox > [id^="input-option"]:has(.push-option-image img) .option-value:not(#_):not(#_) { color: var(--pf-ink-strong); }
html[class*="pf-skin"] .pf-savequote-btn:not(#_):not(#_):not(#_) { border-color: var(--pf-line) !important; color: var(--pf-cta) !important; border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pf-savequote-btn:not(#_):not(#_):not(#_):hover { background: var(--pf-panel) !important; border-color: var(--pf-cta) !important; }
html[class*="pf-skin"] #content .btn-update:not(#_) { background: var(--pf-cta) !important; border-color: var(--pf-cta) !important; color: var(--pf-cta-ink) !important; }
html[class*="pf-skin"] .cart-panels .panel:last-child .panel-heading { border-bottom-color: var(--pf-line) !important; }
html[class*="pf-skin"] .product-thumb .cart-group .stepper button:not(#_):not(#_):not(#_):not(#_) { color: var(--pf-step-fg) !important; background: var(--pf-step-bg) !important; }
html[class*="pf-skin"] .product-thumb .cart-group .stepper button:not(#_):not(#_):not(#_):not(#_)::before { color: var(--pf-step-fg) !important; }

/* ---- quick-link tiles (pf_tiles: home / account / workwear / signs) ---- */
html[class*="pf-skin"] .pf-tl-kick { color: var(--pf-primary); }
html[class*="pf-skin"] .pf-tl-kick span { background: var(--pf-primary); }
html[class*="pf-skin"] .pf-tl-h { color: var(--pf-ink-strong); font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); }
html[class*="pf-skin"] .pf-tl, html[class*="pf-skin"] .pf-ts-t { background: var(--pf-surface); border-color: var(--pf-line); border-radius: var(--pf-radius); color: var(--pf-ink-strong) !important; }
html[class*="pf-skin"] .pf-tl:hover, html[class*="pf-skin"] .pf-ts-t:hover { border-color: var(--pf-primary); box-shadow: var(--pf-shadow); }
html[class*="pf-skin"] .pf-tl-i, html[class*="pf-skin"] .pf-tl em, html[class*="pf-skin"] .pf-ts-t svg { color: var(--pf-primary); }
html[class*="pf-skin"] .pf-tl small { color: var(--pf-muted); }
html[class*="pf-skin"] .pf-ts-h b, html[class*="pf-skin"] .pf-ts-top b { color: var(--pf-ink-strong); font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); font-size: 17px; }
html[class*="pf-skin"] .pf-ts-h a, html[class*="pf-skin"] .pf-ts-top a { color: var(--pf-primary) !important; }
html[class*="pf-skin"] .pf-tl-bar { border-radius: 2px; overflow: hidden; }
html[class*="pf-skin"] .pf-tl-bar i:nth-child(1) { background: var(--pf-primary); }
html[class*="pf-skin"] .pf-tl-bar i:nth-child(2) { background: var(--pf-accent); }
html[class*="pf-skin"] .pf-tl-bar i:nth-child(3) { background: var(--pf-cta); }
html[class*="pf-skin"] .pf-tl-bar i:nth-child(4) { background: var(--pf-ink-strong); }
html[class*="pf-skin"] .pf-tl-wrap[data-where=home] { margin: 0 0 28px; }

/* ---- POS / QR scanner button (pos_scanner) ---- */
html[class*="pf-skin"] #qr-scanner-button, html[class*="pf-skin"] #qr-scanner-info { background: var(--pf-primary); color: var(--pf-primary-ink); }

/* ---- in-stock alert popup (ocdevwizard in_stock_alert) ---- */
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] { font-family: var(--pf-font-body); border-radius: var(--pf-radius); overflow: hidden; max-width: 400px; }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-header { background: var(--pf-primary); color: var(--pf-primary-ink); border-bottom: 0; font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); font-size: 20px; }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-header .modal-close { color: inherit; }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-center { color: var(--pf-ink); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-center .field-heading { font-weight: 600; color: var(--pf-ink-strong); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-center input[type=text],
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-center input[type=email],
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-center input[type=tel] { font-family: var(--pf-font-body); font-size: 14px; border-color: var(--pf-line); border-radius: var(--pf-radius-sm); min-height: 40px; }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-center input:focus { border-color: var(--pf-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-primary) 15%, transparent); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-footer { background: var(--pf-panel); border-top-color: var(--pf-line); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-footer button { font-family: var(--pf-font-body); font-size: 14px; font-weight: 700; height: 40px; border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-footer .save-form { background: var(--pf-cta); color: var(--pf-cta-ink); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-footer .save-form:hover { background: var(--pf-cta-hover); box-shadow: none; }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-footer .close-modal { background: #fff; color: var(--pf-ink-strong); box-shadow: inset 0 0 0 1px var(--pf-line); }
html[class*="pf-skin"] div[id^="ocdw_in_stock_alert-block"] .inner-footer .close-modal:hover { background: var(--pf-field); box-shadow: inset 0 0 0 1px var(--pf-line); }
html[class*="pf-skin"] .ocdw_in_stock_alert-call-static-button, html[class*="pf-skin"] .btn-cart:has(.fa-bell) { background: var(--pf-accent) !important; border-color: var(--pf-accent) !important; color: var(--pf-accent-ink) !important; }

/* ---- option description modal (pf_option_description) ---- */
html[class*="pf-skin"] .pf-optdesc-box { border-radius: var(--pf-radius); font-family: var(--pf-font-body); }
html[class*="pf-skin"] .pf-optdesc-title { font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); font-size: 20px; color: var(--pf-ink-strong); }

/* ---- live chat (pf_chat) ---- */
html[class*="pf-skin"] #pfc-launch { background: var(--pf-primary); box-shadow: var(--pf-shadow); }
html[class*="pf-skin"] #pfc-launch .pfc-dot { background: var(--pf-sale); }
html[class*="pf-skin"] #pfc-panel { border-radius: var(--pf-radius); font-family: var(--pf-font-body); }
html[class*="pf-skin"] .pfc-hd, html[class*="pf-skin"] .pfc-send, html[class*="pf-skin"] .pfc-btn, html[class*="pf-skin"] .pfc-v .pfc-b, html[class*="pf-skin"] .pfc-mail .pfc-row button { background: var(--pf-primary); color: var(--pf-primary-ink); }
html[class*="pf-skin"] .pfc-lnk { color: var(--pf-primary); }
html[class*="pf-skin"] .pfc-in:focus, html[class*="pf-skin"] .pfc-f input:focus, html[class*="pf-skin"] .pfc-f textarea:focus { border-color: var(--pf-primary); }

/* ---- warehouse stock table (pf_warehouses_front) ---- */
html[class*="pf-skin"] #warehouses_stock { border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm); overflow: hidden; font-size: 13px; }
html[class*="pf-skin"] #warehouses_stock td { border-color: var(--pf-line-soft); padding: 6px 10px; }
html[class*="pf-skin"] #warehouses_stock tr.centered td { background: var(--pf-panel); color: var(--pf-muted); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
html[class*="pf-skin"] #warehouses_stock .in-stock span { color: var(--pf-ok); font-weight: 700; }
html[class*="pf-skin"] #warehouses_stock .out-of-stock span { color: var(--pf-sale); font-weight: 700; }

/* ---- reviews (cireviewpro) ---- */
html[class*="pf-skin"] .cireview-wrap .fa-stack .fa-star, html[class*="pf-skin"] #tab-review .fa-stack .fa-star { color: var(--pf-star, #f2b705); }   /* review list stars were black (no colour set, FA6) */
/* cireview stacks an FA4 outline (.fa-star-o, \f006) over every filled star; FA6 has no \f006 so it drew a second star at another size. Drop the overlay on filled stars; lone outlines become a grey FA6 regular star. */
html[class*="pf-skin"] .cireview-wrap .fa-stack .fa-star + .fa-star-o, html[class*="pf-skin"] #tab-review .fa-stack .fa-star + .fa-star-o { display: none; }
html[class*="pf-skin"] .cireview-wrap .fa-stack .fa-star-o, html[class*="pf-skin"] #tab-review .fa-stack .fa-star-o { color: #cfd4da; font-weight: 400; }
html[class*="pf-skin"] .cireview-wrap .fa-stack .fa-star-o::before, html[class*="pf-skin"] #tab-review .fa-stack .fa-star-o::before { content: "\f005"; }
html[class*="pf-skin"] .cireview-wrap .cireviews .fa-stack i { font-size: 18px; line-height: 2em; }
html[class*="pf-skin"] .cireview-wrap .cireviews .average.final-avrge .fa-stack i { font-size: 24px; line-height: 3em; }
html[class*="pf-skin"] #cireview-graph .progress .progress-bar, html[class*="pf-skin"] #cireview-graph .cireview-stars .fa-star { background-color: var(--pf-star, #f2b705); color: var(--pf-star, #f2b705); }
html[class*="pf-skin"] .ciname_fl { background: var(--pf-primary); }

/* ---- OC4 #alert notifications (show_notification shim + core) ---- */
html[class*="pf-skin"] #alert { position: fixed; top: 16px; right: 16px; z-index: 100001; width: min(380px, calc(100vw - 32px)); }
html[class*="pf-skin"] #alert .alert { border-radius: var(--pf-radius-sm); box-shadow: var(--pf-shadow); border: 0; font-size: 14px; }
html[class*="pf-skin"] #alert .alert-success { background: var(--pf-ok-bg); color: var(--pf-ok); }
html[class*="pf-skin"] #alert .alert-warning, html[class*="pf-skin"] #alert .alert-danger { background: var(--pf-warn-bg); color: var(--pf-warn); }

/* toast card for cart feedback (show_notification shim + core #alert prepends) */
html[class*="pf-skin"] #alert { top: 84px; right: 16px; left: auto; bottom: auto; width: min(400px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
html[class*="pf-skin"] #alert .alert { position: relative; margin: 0; padding: 14px 44px 14px 16px; display: flex; gap: 12px; align-items: flex-start; background: #fff; color: var(--pf-ink); border-left: 5px solid var(--pf-ok); box-shadow: 0 12px 30px rgba(0,0,0,.18); font-size: 14px; line-height: 1.4; animation: pfToastIn .25s ease; }
html[class*="pf-skin"] #alert .alert-warning, html[class*="pf-skin"] #alert .alert-danger { background: #fff; color: var(--pf-ink); border-left-color: var(--pf-warn); }
html[class*="pf-skin"] #alert .alert > i:first-child, html[class*="pf-skin"] #alert .pf-toast-icon { font-size: 20px; color: var(--pf-ok); flex: 0 0 auto; margin-top: 1px; }
html[class*="pf-skin"] #alert .alert-warning > i:first-child, html[class*="pf-skin"] #alert .alert-danger > i:first-child { color: var(--pf-warn); }
html[class*="pf-skin"] #alert .alert a { color: var(--pf-primary); font-weight: 600; }
html[class*="pf-skin"] #alert .pf-toast-actions { display: flex; gap: 8px; margin-top: 10px; }
html[class*="pf-skin"] #alert .pf-toast-actions .btn { font-size: 13px; padding: 6px 12px; }
html[class*="pf-skin"] #alert .pf-toast-actions .btn-light { border: 1px solid var(--pf-line); background: #fff; color: var(--pf-ink-strong); }
html[class*="pf-skin"] #alert .pf-toast-actions .pf-btn-cta, html[class*="pf-skin"] #alert .pf-toast-actions .btn-primary { background: var(--pf-cta); border-color: var(--pf-cta); color: var(--pf-cta-ink, #fff) !important; }   /* the generic #alert a colour made Checkout unreadable */
html[class*="pf-skin"] #alert .alert.fade:not(.show) { opacity: 1; }
html[class*="pf-skin"] #alert .btn-close { position: absolute; top: 12px; right: 12px; padding: 4px; }
@keyframes pfToastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) {
  html[class*="pf-skin"] #alert { top: 60px; bottom: auto; left: 12px; right: 12px; width: auto; }   /* PF 2026-10-11 (Dave): under the sticky category bar, not at the foot */
  @keyframes pfToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}

/* ---- popup cart (pf_popup_cart) re-skin ---- */
html[class*="pf-skin"] .pfpc-modal { border-radius: var(--pf-radius); font-family: var(--pf-font-body); color: var(--pf-ink); box-shadow: var(--pf-shadow), 0 12px 40px rgba(0,0,0,.25); }
html[class*="pf-skin"] .pfpc-head { background: var(--pf-primary); color: var(--pf-primary-ink); border-bottom: 0; border-radius: var(--pf-radius) var(--pf-radius) 0 0; align-items: center; }
html[class*="pf-skin"] .pfpc-head h3 { color: inherit; font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); font-size: 22px; }
html[class*="pf-skin"] .pfpc-count { color: inherit; opacity: .85; }
html[class*="pf-skin"] .pfpc-close { color: inherit; opacity: .9; }
html[class*="pf-skin"] .pfpc-close:hover { color: inherit; opacity: 1; }
html[class*="pf-skin"] .pfpc-item { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pfpc-item-main img { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pfpc-name { color: var(--pf-ink-strong); font-weight: 600; font-size: 15px; }
html[class*="pf-skin"] .pfpc-name:hover { color: var(--pf-primary); }
html[class*="pf-skin"] .pfpc-remove { color: var(--pf-muted); }
html[class*="pf-skin"] .pfpc-remove:hover { color: var(--pf-sale); }
html[class*="pf-skin"] .pfpc-item-row2 { border-top-color: var(--pf-line-soft); }
html[class*="pf-skin"] .pfpc-cell span { color: var(--pf-faint); }
html[class*="pf-skin"] .pfpc-stepper button { background: var(--pf-field); color: var(--pf-ink-strong); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pfpc-stepper button:hover { background: var(--pf-line); }
html[class*="pf-skin"] .pfpc-stepper input { border: 1px solid var(--pf-line); border-radius: var(--pf-radius-sm); margin: 0 4px; }
html[class*="pf-skin"] .pfpc-acc, html[class*="pf-skin"] .pfpc-totals, html[class*="pf-skin"] .pfpc-ab { border-top-color: var(--pf-line); }
html[class*="pf-skin"] .pfpc-acc-head { color: var(--pf-ink-strong); font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); }
html[class*="pf-skin"] .pfpc-input, html[class*="pf-skin"] .pfpc-select { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); font-family: inherit; }
html[class*="pf-skin"] .pfpc-btn { background: var(--pf-cta); color: var(--pf-cta-ink); border-radius: var(--pf-radius-sm); font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-size: 15px; }
html[class*="pf-skin"] .pfpc-btn:hover { background: var(--pf-cta-hover); }
html[class*="pf-skin"] .pfpc-btn-grey, html[class*="pf-skin"] .pfpc-continue { background: #fff; color: var(--pf-ink-strong) !important; box-shadow: inset 0 0 0 2px var(--pf-line); }
html[class*="pf-skin"] .pfpc-btn-grey:hover, html[class*="pf-skin"] .pfpc-continue:hover { background: var(--pf-panel); box-shadow: inset 0 0 0 2px var(--pf-muted); }
html[class*="pf-skin"] .pfpc-total-row .t { color: var(--pf-muted); font-weight: 600; }
html[class*="pf-skin"] .pfpc-total-row:last-child .t, html[class*="pf-skin"] .pfpc-total-row:last-child .v { color: var(--pf-ink-strong); font-size: 18px; }
html[class*="pf-skin"] .pfpc-ab-title { font-family: var(--pf-font-head); text-transform: var(--pf-head-transform); letter-spacing: var(--pf-head-tracking); font-weight: var(--pf-head-weight); color: var(--pf-ink-strong); }
html[class*="pf-skin"] .pfpc-ab-card { border-color: var(--pf-line); border-radius: var(--pf-radius-sm); color: var(--pf-ink); }
html[class*="pf-skin"] .pfpc-ab-card:hover { border-color: var(--pf-primary); box-shadow: var(--pf-shadow); }
html[class*="pf-skin"] .pfpc-ab-add { background: var(--pf-cta); color: var(--pf-cta-ink); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pfpc-ab-add:hover { background: var(--pf-cta-hover); }
html[class*="pf-skin"] .pfpc-ab-step button { background: var(--pf-field); color: var(--pf-ink-strong); border: 1px solid var(--pf-line); }
html[class*="pf-skin"] .pfpc-toast { border-radius: var(--pf-radius-sm); font-family: var(--pf-font-body); border-left: 5px solid var(--pf-ok); }
html[class*="pf-skin"] .pfpc-toast-tick { background: var(--pf-ok); }
html[class*="pf-skin"] .pfpc-toast-view { background: var(--pf-cta); color: var(--pf-cta-ink); border-radius: var(--pf-radius-sm); }
html[class*="pf-skin"] .pfpc-msg.pfpc-ok { color: var(--pf-ok); } html[class*="pf-skin"] .pfpc-msg.pfpc-err { color: var(--pf-sale); }
@media (max-width: 767.98px) { html[class*="pf-skin"] .pfpc-toast { top: auto; bottom: 14px; left: 12px; right: 12px; max-width: none; } }

/* the $ tax toggle (z-index 100000) showed through the Quick Search overlay (99999) - sit it behind while the overlay is open */
body.quick-search-open #pf-tax-toggle, body.quick-search-open .pf-tt-host { z-index: 1 !important; }

/* home rhythm: every block (hero, quick tiles, sections) 24px apart (Dave 2026-10-11) */
html[class*="pf-skin"] .pf-tl-wrap[data-where=home] { margin: 24px 0; }
html[class*="pf-skin"] .pf-tl-wrap[data-where=home] .pf-tl-row:last-child { margin-bottom: 0; }
@media (max-width: 767.98px) { html[class*="pf-skin"] .pf-tl-wrap[data-where=home] { margin: 16px 0; } }

/* Lightning admin bulb (zero.php): the hover hint sticks on touch devices and covers Add to cart - hide it there, shrink the bulb on phones (Dave 2026-10-11) */
@media (hover: none), (max-width: 767.98px) {
  #lightning_bulb .lightning_hint { display: none !important; }
  .lightning_panel.lightning_folded { padding-left: 4px; opacity: .6; }
}
/* Lightning panel only when it needs attention: hidden unless pf-theme.js finds a slow generation time or ?li_panel=1 (Dave 2026-10-13). Theme-level rather than OCMOD: zero.php is obfuscated and its names change each release. */
html[class*="pf-skin"] .lightning_panel:not(.pf-lp-show) { display: none !important; }