/*
 * VGD Inc -- child theme of Hummingbird.
 *
 * Loaded by FrontController::setMedia() as 'theme-custom' at priority 1000, i.e. AFTER the
 * parent's /themes/hummingbird/assets/css/theme.css (priority 50).
 *
 * Hummingbird declares its cascade layers up front (themes/hummingbird/src/scss/theme.scss):
 *
 *   @layer vendors, bs-base, bs-components, bs-custom-components,
 *          ps-base, ps-components, ps-pages, ps-modules, utilities;
 *
 * Every parent rule lives inside one of those layers. Unlayered CSS beats layered CSS
 * regardless of specificity, so plain declarations in this file already win.
 * Do not reach for !important, and do not escalate selectors -- if a rule here is not
 * applying, it is a selector or load-order problem, not a specificity one.
 *
 * Module-specific CSS does NOT belong here -- put it in
 * themes/vgdinc/modules/<module>/ instead.
 */

/* ==================================================================== *
 * 1. Brand primary: #0b69f6 -> #002569
 * --------------------------------------------------------------------
 * Hummingbird compiles $blue: #0b69f6 (src/scss/bootstrap/overrides/
 * variables/_variables.scss:15) into both :root custom properties AND
 * hard-coded hex inside component rules. The SCSS cannot be rebuilt on
 * this install (hummingbird ships no package.json), so every compiled
 * occurrence is restated here.
 *
 * Derived shades use Bootstrap's own tint/shade percentages, verified by
 * reproducing Hummingbird's existing values from #0b69f6:
 *
 *   tint 80% -> #ccd3e1   bg-subtle          shade 15% -> #001f59  btn hover
 *   tint 60% -> #99a8c3   border-subtle      shade 20% -> #001e54  link hover
 *   tint 50% -> #8092b4   focus border       shade 25% -> #001c4f  btn active
 *   tint 15% -> 38,70,128 btn focus ring
 * ==================================================================== */

:root,
[data-bs-theme="light"] {
  --bs-blue: #002569;
  --bs-primary: #002569;
  --bs-primary-rgb: 0, 37, 105;
  --bs-primary-text-emphasis: #002569;
  --bs-primary-bg-subtle: #ccd3e1;
  --bs-primary-border-subtle: #99a8c3;
  --bs-link-color: #002569;
  --bs-link-color-rgb: 0, 37, 105;
  --bs-link-hover-color: #001e54;
  --bs-link-hover-color-rgb: 0, 30, 84;
  --bs-focus-ring-color: rgba(0, 37, 105, 0.25);
}

[data-bs-theme="dark"] {
  --bs-primary-text-emphasis: #667ca5;
  --bs-primary-bg-subtle: #000715;
  --bs-primary-border-subtle: #00163f;
  --bs-link-color: #667ca5;
  --bs-link-color-rgb: 102, 124, 165;
  --bs-link-hover-color: #8596b7;
  --bs-link-hover-color-rgb: 133, 150, 183;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: #002569;
  --bs-btn-border-color: #002569;
  --bs-btn-hover-bg: #001f59;
  --bs-btn-hover-border-color: #001e54;
  --bs-btn-focus-shadow-rgb: 38, 70, 128;
  --bs-btn-active-bg: #001e54;
  --bs-btn-active-border-color: #001c4f;
  --bs-btn-disabled-bg: #002569;
  --bs-btn-disabled-border-color: #002569;
}

.btn-outline-primary {
  --bs-btn-color: #002569;
  --bs-btn-border-color: #002569;
  --bs-btn-hover-bg: #002569;
  --bs-btn-hover-border-color: #002569;
  --bs-btn-focus-shadow-rgb: 0, 37, 105;
  --bs-btn-active-bg: #002569;
  --bs-btn-active-border-color: #002569;
  --bs-btn-disabled-color: #002569;
  --bs-btn-disabled-border-color: #002569;
}

/* Components carrying the colour as a literal rather than via --bs-primary */
.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: #002569;
}

.list-group {
  --bs-list-group-active-bg: #002569;
  --bs-list-group-active-border-color: #002569;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #002569;
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: #002569;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #002569;
  border-color: #002569;
}

.form-range::-webkit-slider-thumb {
  background-color: #002569;
}

.form-range::-moz-range-thumb {
  background-color: #002569;
}

/* Focus rings -- compiled as literal rgba(11,105,246,.25), not via the variable */
.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(0, 37, 105, 0.25);
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 37, 105, 0.25);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #8092b4;
  box-shadow: 0 0 0 0.25rem rgba(0, 37, 105, 0.25);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(0, 37, 105, 0.25);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(0, 37, 105, 0.25);
}

.nav-link:focus-visible,
.search-filters__form-check--color .color:focus-visible,
.stars-selector:has(.stars-selector__input:focus-visible) {
  box-shadow: 0 0 0 0.25rem rgba(0, 37, 105, 0.25);
}

/* ==================================================================== *
 * 2. Mega-menu: match subcategory block titles to the left column
 * --------------------------------------------------------------------
 * Hummingbird sets the right-hand group titles to 1.25rem/600 while the
 * left-hand category list inherits the 1rem body size, so the titles
 * read as much larger than the menu they belong to. Drop them to 1rem
 * and let weight alone carry the hierarchy.
 * ==================================================================== */

.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group--child .menu-item__group-main-item,
.ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group--nochild .menu-item__group-main-item {
  font-size: 1rem;
  font-weight: 600;
}

/* ==================================================================== *
 * 3. Sale flags in red (listing miniatures + product page)
 * --------------------------------------------------------------------
 * Hummingbird paints every flag with the primary colour, so the brand
 * change above turned the sale badges navy. Only the sale-related flags
 * go red -- `new`, `pack`, `online-only` and `out_of_stock` stay primary.
 *
 * These rules re-point Bootstrap variables ON the badge rather than
 * restating properties, because the filled-flag rule is
 *
 *   .product-flags .badge:not(.discount), .text-bg-primary {
 *     background-color: RGBA(var(--bs-primary-rgb), ...) !important;
 *     color: #fff !important; }
 *
 * and it sits in @layer bs-base. Layered !important outranks unlayered
 * !important (layer order inverts for important declarations), so it
 * cannot be beaten from this file directly -- but its *value* still
 * resolves from --bs-primary-rgb on the element. Change the variable and
 * Hummingbird's own rule paints it red.
 *
 * #cc3846 is shade-20% of the theme's --bs-danger (#ff4657), which is too
 * light for white badge text (3.35:1). #cc3846 gives 4.97:1 -- WCAG AA.
 * ==================================================================== */

:root {
  --vgd-sale: #cc3846;
  --vgd-sale-rgb: 204, 56, 70;
}

/* Filled "On sale!" badge -- background reads the rgb var, border the hex var */
.product-flags .badge.on-sale {
  --bs-primary: var(--vgd-sale);
  --bs-primary-rgb: var(--vgd-sale-rgb);
}

/* Outlined discount badge, e.g. "-$40.00" / "-20%" */
.product-flags .badge.discount {
  --bs-primary: var(--vgd-sale);
}

/* Out of stock in grey. It reports a neutral status rather than a
   promotion, so it should not compete with the navy "New" / "Pack" flags
   or the red sale ones. Same variable-repointing trick, for the same
   reason: .text-bg-primary is an !important rule inside @layer bs-base
   and cannot be beaten by an unlayered !important. --bs-secondary
   (#6c757d) carries white text at 4.68:1, clear of the 4.5:1 AA floor
   that the 0.75rem badge text needs. */
.product-flags .badge.out_of_stock {
  --bs-primary: var(--bs-secondary);
  --bs-primary-rgb: var(--bs-secondary-rgb);
}

/* Product page savings line: "(Save $40.00)" / "(Save 20%)".
   .text-primary-emphasis reads var(--bs-primary-text-emphasis). */
.page-product .product__discount-amount,
.page-product .product__discount-percentage {
  --bs-primary-text-emphasis: var(--vgd-sale);
}

/* ==================================================================== *
 * 4. Home slider: stop cropping the banners on mobile
 * --------------------------------------------------------------------
 * Hummingbird forces a fixed height below lg and covers the box:
 *
 *   @media (max-width: 991.98px) { .ps-imageslider__figure { height: 320px }
 *     .ps-imageslider__figure img { height: 100%; object-fit: cover } }
 *   @media (max-width: 767.98px) { .ps-imageslider__figure { height: 240px } }
 *
 * The banners are 1110x340 (3.26:1). Covering a 375x240 box scales them to
 * 783px wide inside a 375px container, so ~52% of the artwork is cropped --
 * and the text is baked into the image (all slides have empty title and
 * description), so the wording is what gets cut off.
 *
 * Releasing the height lets the full banner show at its natural ratio:
 * ~115px tall at 375px, ~235px at 768px. Nothing is cropped and nothing is
 * letterboxed. All four slides share the same dimensions, so the carousel
 * height stays stable between slides.
 * ==================================================================== */

@media (max-width: 991.98px) {
  .ps-imageslider__figure {
    height: auto;
  }

  .ps-imageslider__figure img {
    height: auto;
    object-fit: contain;
  }
}

/* ==================================================================== *
 * 5. Catalogue design pass
 * --------------------------------------------------------------------
 * Card borders, a filled "See details", a sticky product image, and some
 * structure for the category page's main column.
 * ==================================================================== */

/* -- Product cards -------------------------------------------------- *
 * Hummingbird gives the card only a radius and a hover shadow, so cards
 * dissolve into the page background. A hairline border defines them;
 * overflow:hidden keeps the image corners inside that radius, and the
 * image scale-on-hover clipped.
 * ------------------------------------------------------------------- */

.product-miniature__inner {
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
}

.product-miniature__bottom {
  padding: 1rem;
}

/* Quick View is gone from the markup, not hidden here: the child theme
   ships an empty catalog/_partials/miniatures/product-quickview.tpl.
   See that file for why the miniature template itself must not be
   overridden -- doing so breaks askforaquotepro's "Add to quote". */

@media (hover: hover) {
  .product-miniature__inner:hover,
  .product-miniature__inner:has(*:focus-visible) {
    border-color: var(--bs-primary);
  }
}

/* "See details" filled brand blue instead of outlined. The markup keeps
   .btn-outline-primary, so this repoints that component's variables
   rather than restating properties. */
.product-miniature__details {
  --bs-btn-color: #fff;
  --bs-btn-bg: #002569;
  --bs-btn-border-color: #002569;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #001f59;
  --bs-btn-hover-border-color: #001e54;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #001e54;
  --bs-btn-active-border-color: #001c4f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #002569;
  --bs-btn-disabled-border-color: #002569;
}

/* -- Product page: sticky image column ------------------------------ *
 * templates/catalog/product.tpl (child override) folds the parent's
 * .product__bottom row into .product__right, so the left column now holds
 * only the image and can stick for the full length of the page.
 *
 * align-items:start is required, not cosmetic -- a grid item defaults to
 * stretch, filling the row, and an element as tall as its container has
 * nothing to scroll within, so sticky would never engage.
 *
 * --scroll-padding-top is set by Hummingbird's own JS to the sticky header
 * height (src/js/helpers/scrollPadding.ts). The fallback covers first paint
 * and the case where that script has not run.
 * ------------------------------------------------------------------- */

.page-product .product__secondary {
  margin-block-start: 2rem;
}

@media (min-width: 992px) {
  .page-product .product__container {
    align-items: start;
  }

  .page-product .product__left {
    position: sticky;
    top: var(--scroll-padding-top, 6rem);
  }
}

/* -- Category page: structure for the main column ------------------- *
 * Title, description and cover currently float loose above the grid with
 * nothing tying them together. Grouping them into a bordered panel, and
 * giving the count/sort strip the same treatment, matches the product
 * cards and splits the column into three readable bands:
 * header / toolbar / grid.
 * ------------------------------------------------------------------- */

.page-category .category__header {
  padding: 1.5rem;
  margin-block-end: 1.5rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.page-category .category__header .page-title-section {
  margin-block-end: 0.75rem;
}

.page-category .category__header .category__cover {
  margin-block-end: 0;
}

.page-category .products__selection {
  padding: 0.75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* ==================================================================== *
 * 6. Listing sidebar: same panel treatment as the main column
 * --------------------------------------------------------------------
 * Both sidebar modules already share a `left-block` class -- the
 * category tree (ps_categorytree.tpl) and the desktop faceted search
 * wrapper (ps_facetedsearch.tpl) -- and Hummingbird gives that class only
 * a bottom rule (components/_columns-block.scss):
 *
 *   .left-block, .right-block { padding-bottom: 1rem; margin-bottom: 2rem;
 *                               border-bottom: 1px solid var(--bs-border-color) }
 *
 * so the column reads as one undivided run of links split by a hairline.
 * Promoting that shared class to a panel gives the sidebar the same card
 * treatment as the products and the category header, with no template
 * changes at all -- the hook already exists.
 *
 * Scoped to #left-column rather than .page-category on purpose: every
 * layout-left-column page (category, new-products, prices-drop,
 * best-sales, manufacturer, supplier, contact) shares this sidebar, and
 * one styled listing page next to unstyled siblings would read as a bug.
 *
 * Padding does not compound with the accordions inside: both
 * --bs-accordion-btn-padding-x and --bs-accordion-body-padding-x are 0 in
 * this theme, so the links sit flush against the panel's inner edge.
 *
 * 1.25rem rather than the 1.5rem used on the category header -- the
 * column is only ~270px wide at col-lg-3, so the wider inset would eat
 * into already-narrow filter labels.
 * ==================================================================== */

#left-column .left-block {
  padding: 1.25rem;
  margin-block-end: 1.25rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* The mobile faceted-search offcanvas is a sibling of the desktop
   wrapper but carries no `left-block` class, so it is untouched by the
   rule above -- panel styling must not leak into the drawer. */

/* Drop the filter panel entirely on listings that have no facets.
 * Hummingbird's facets.tpl emits nothing but whitespace when
 * $displayedFacets is empty, while ps_facetedsearch.tpl guards on
 * !empty($listing.rendered_facets) -- and a string of whitespace is not
 * empty -- so #search_filters_wrapper renders anyway. Unstyled that was
 * invisible; as a bordered panel it became an empty box.
 * #search-filters is only emitted inside the populated branch, which
 * makes it the reliable "has facets" test. Scoped to the desktop
 * wrapper by id so the offcanvas is left alone.
 *
 * This one has to go inside @layer utilities and carry !important --
 * the only rule in this file that does. The wrapper ships Bootstrap's
 * `d-none d-md-block`, and `.d-md-block { display: block !important }`
 * lives in @layer utilities, where a layered !important outranks any
 * unlayered one. Re-opening that same layer puts this rule on equal
 * footing, and three ids then beat one class on plain specificity.
 * Re-pointing a variable, the usual escape hatch here, is no help:
 * `display` is not driven by one. */

@layer utilities {
  #left-column #search_filters_wrapper:not(:has(#search-filters)) {
    display: none !important;
  }
}

/* ==================================================================== *
 * 7. Homepage sections, product accordions, product image rail
 * ==================================================================== */

/* -- 7a. Homepage: section link pinned top-right --------------------- *
 * Client-supplied rule, applied as given. .module-products__buttons is
 * taken out of flow and pinned to the top-right of the section, which the
 * position:relative on .module-products establishes as the containing
 * block.
 *
 * Kept at >=768px so mobile keeps Hummingbird's stacked, centred button --
 * "All featured products >" beside a heading is too tight on a phone.
 * ------------------------------------------------------------------- */

@media (min-width: 768px) {
  #index .module-products {
    position: relative;
  }

  #index .module-products__buttons {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
  }
}

/* -- 7b. Product page: each accordion in its own box ----------------- *
 * Hummingbird runs these as one flush accordion, so Description, Product
 * Details, Data sheet and Download read as a single undivided stack.
 * A descendant selector is used rather than a child one because
 * product-details.tpl wraps its two items in .js-product-details, so they
 * sit a level deeper than the rest -- that wrapper gets the same flex gap
 * so its two boxes do not collapse together.
 * ------------------------------------------------------------------- */

.page-product .product__accordion,
.page-product .product__accordion .js-product-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-product .product__accordion .accordion-item {
  padding-inline: 1.25rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* --bs-accordion-body-padding-y is 0 in this theme, so an open panel
   would otherwise sit flush against the bottom of its new box. */
.page-product .product__accordion .accordion-body {
  padding-block-end: 1.25rem;
}

/* -- 7c. Room around the blocks below the accordion ------------------ *
 * .blockreassurance--product ships margin-block-end but no top margin, so
 * the Return Policy block butted straight up against the last accordion.
 * .product__footer-sections is the wrapper added in the child product.tpl
 * around the displayFooterProduct hook (comments, related, viewed).
 * ------------------------------------------------------------------- */

.page-product .product__secondary .blockreassurance {
  margin-block-start: 2rem;
}

/* Reviews now sit last in the right column, below the reassurance block. */
.page-product .product__comments {
  margin-block-start: 2rem;
}

.page-product .product__footer-sections {
  margin-block-start: 3rem;
}

/* -- 7d. Product images: thumbnails as a scrolling left rail --------- *
 * The child product-cover-thumbnails.tpl already drops the strip entirely
 * for single-image products, so this only ever applies where there are 2+.
 *
 * The rail is absolutely positioned rather than made a flex sibling on
 * purpose. As a flex item its natural height is the sum of every thumbnail,
 * which would set the flex line height and stretch the cover to match --
 * the strip would grow instead of scrolling. Pinned with inset-block:0 it
 * takes exactly the cover's height, so overflow-y actually has something
 * to scroll against.
 *
 * The :has() guard keeps the gutter off products that render the
 * .product__no-image fallback, which has no thumbnails.
 * ------------------------------------------------------------------- */

@media (min-width: 992px) {
  .page-product .product__images:has(.product__thumbnails) {
    position: relative;
    padding-inline-start: 5.25rem;
  }

  .page-product .product__images .product__thumbnails {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4.25rem;
    margin-block-start: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .page-product .product__images .product__thumbnails-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* ============================================================
 * 8. Cart and checkout -- boxed columns
 *
 * The same panel treatment as the listing sidebar (6) and the product
 * accordions (7b), applied to both columns of the two checkout pages:
 *
 *   #cart      .vgd-panel  |  .vgd-panel
 *   #checkout  .step       |  .checkout__summary-accordion-item
 *
 * Body ids are safe selectors here: layout-both-columns.tpl renders
 * <body id="{$page.page_name}"> and every other layout extends it.
 *
 * The headings sit INSIDE the panels on purpose. With them above, the
 * two columns started their boxes on different lines: an h1 and an h2
 * are not the same height on the cart, and on checkout the right column
 * has no heading at all from lg up, so its box began a whole title
 * higher than the step box. Enclosing the heading makes both boxes start
 * at the top of the grid row by construction, which holds at every
 * breakpoint without matching font metrics by hand.
 *
 * On the cart the left panel also swallows the "Continue shopping"
 * button and the displayShoppingCartFooter hook, mirroring the right
 * panel, which already ends with "Proceed to checkout".
 * ============================================================ */

#cart .vgd-panel,
#checkout .checkout-grid__content .step {
  padding: 1.25rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* Both pages draw a rule under the title purely to separate it from the
 * content below, which is redundant once the title is in a panel. On the
 * cart that rule is the opening <hr> inside .cart__overview; the closing
 * one stays put, where it separates the products from the "Continue
 * shopping" button sharing the panel with them. */

#cart .cart__overview > hr:first-child,
#checkout .checkout-grid__content .step__title hr {
  display: none;
}

/* Air between the summary panel and the reassurance block below it.
   Checkout only: nothing follows the cart's panel any more, since the
   Return Policy block was dropped there and the quote button moved
   inside the panel. */
#checkout .checkout__summary-accordion {
  margin-block-end: 1.5rem;
}

/* -- Cart: "Transform to Quote" ------------------------------------- *
 * askforaquotepro shares the displayReassurance hook with
 * blockreassurance, so the child cart.tpl narrows that hook to
 * mod='askforaquotepro'. That drops the Return Policy block from the
 * cart and puts the quote button inside the summary panel, directly
 * under "Proceed to checkout" -- the two things a full cart can do next,
 * together.
 *
 * The module wraps its link in .card > .card-body, which inside the
 * panel would draw a second surface, so that chrome is flattened. The
 * link keeps .btn-secondary in the markup; repointing the component
 * variables turns it into the outlined counterpart of the primary
 * checkout button above it, at the same btn-lg size and full width.
 * ------------------------------------------------------------------- */

#cart .quote-card {
  margin-block: 0.5rem 0;
  background: none;
  border: 0;
}

#cart .quote-card .card-body {
  padding: 0;
}

#cart .quote-card .text-sm-left {
  display: grid;
}

#cart .quote-card .btn {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #002569;
  --bs-btn-hover-border-color: #002569;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #001e54;
  --bs-btn-active-border-color: #001c4f;
}

/* The order summary is a real accordion, so it gets the panel on the
 * .accordion-item and keeps its own header. The bottom padding goes on
 * .accordion-collapse rather than on the item so it collapses away with
 * the panel on mobile instead of hanging under the closed button.
 *
 * The border is a plain unlayered declaration and still beats
 * _checkout.scss's `border-block-end: 0` -- that rule sits in @layer
 * ps-pages, and unlayered normal declarations outrank every layer. */

#checkout .checkout__summary-accordion-item {
  padding-inline: 1.25rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

#checkout .checkout__summary-accordion .accordion-collapse {
  padding-block-end: 1.25rem;
}

/* From lg up _checkout.scss hides that header and forces the panel open,
 * which left the summary with no heading and no top padding. Put "Order
 * summary" back as a plain heading: the toggle is dead weight once the
 * panel can no longer close, so the chevron and the pointer target go
 * with it, and the not-collapsed link colour is reset to body text so it
 * reads as a heading rather than as a control. */

@media (min-width: 992px) {
  #checkout .checkout__summary-accordion-item {
    padding-block-start: 1.25rem;
  }

  #checkout .checkout__summary-accordion-header {
    display: block;
  }

  #checkout .checkout__summary-accordion-header .accordion-button {
    padding-block: 0 1rem;
    color: inherit;
    pointer-events: none;
    background-color: transparent;
    box-shadow: none;
  }

  #checkout .checkout__summary-accordion-header .accordion-button::after {
    display: none;
  }
}

/* ============================================================
 * 9. pchclientregister -- the "Registration" button
 *
 * The button on the checkout Personal Information step came out red even
 * though PCHCLIENTREG_BUTTON_COLOR was set to a brand colour. The module
 * emits its configured value as `:root { --pchreg-btn-color: ... }` from
 * hookDisplayHeader, but views/css/register.css then redeclares the same
 * custom property on .pchreg-button-wrap and .pchreg-container with a
 * hardcoded #d32f2f. A custom property resolves from the nearest
 * ancestor that declares it, and both of those are ancestors of the
 * button -- so the module's fallback always shadowed the module's own
 * setting, whatever the Back Office said.
 *
 * Re-declaring it here fixes that (custom.css is registered as
 * theme-custom at priority 1000, the module's sheet at 200, so this
 * sheet is emitted last and wins on order at equal specificity), and
 * pointing it at --bs-primary makes the button track the brand colour
 * from section 1 instead of repeating the hex. The stored module setting
 * was moved to #002569 as well so the two agree -- it still held the old
 * #0b69f6 from before the rebrand.
 *
 * The rest of the button follows the theme's buttons: the module ships a
 * 999px pill with a drop shadow and a translateY hover lift, which
 * nothing else on the site does.
 * ============================================================ */

.pchreg-button-wrap,
.pchreg-container {
  --pchreg-btn-color: var(--bs-primary);
}

.pchreg-button,
.pchreg-actions button {
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  border-radius: var(--bs-border-radius);
  box-shadow: none;
  transition: background-color 0.15s ease-in-out;
}

.pchreg-button:hover,
.pchreg-actions button:hover {
  background: #001f59; /* shade 15% of the brand primary, as .btn-primary */
  box-shadow: none;
  filter: none;
  transform: none;
}

.pchreg-button-arrow {
  /* The module injects a literal "&rarr;" text node. Suppressing it with
   * font-size: 0 and drawing the icon in ::before gets the theme glyph in
   * without touching the module's JS. order: 1 puts it after the label,
   * where every other button on the site carries it. */
  order: 1;
  font-size: 0;
}

.pchreg-button-arrow::before {
  content: "\e5c8"; /* arrow_forward -- as on "Continue to Payment" */
  font-family: "Material Icons", sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "liga";
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}