/* ============================================================
   CMHill — PRS storefront bridge
   Scope: colours + container alignment on the PRS-rendered pages
   (catalogue index, category listing, product detail, cart).

   SPECIFICITY NOTE. prs.css does not style with plain single-class
   selectors; it ships ~159 deliberately elevated ones written to
   survive opinionated host themes, e.g.
       body .prs-category-detail                    (0,1,1)
       .prs-container.prs-category-detail           (0,2,0)
       .prs-container.prs-category-detail .prs-products (0,3,0)
   A bare `.prs-thing {}` silently loses to all of them. Hence the
   convention below:
       page wrappers   ->  body .prs-container.prs-WRAPPER  (0,2,1)
       everything else ->  body .prs-container .prs-THING   (0,2,1)
   and the one (0,3,1) compound noted at the point of use.
   No !important is needed anywhere in this file.

   Everything references the THEME's tokens, so a TT4 style-variation
   change re-skins the storefront along with the rest of the site.
   ============================================================ */

:root {
    /* The plugin themes its own modals and selected states through this token
       (`background: var(--prs-primary, #0073aa) !important` behind id
       selectors). One declaration re-skins the modal CTA, the selected date and
       the active time slots -- no specificity fight.
       INK, not the terracotta accent: the site's own buttons are ink (#111 on
       #f9f9f9), and terracotta sits too close to the magenta ground to hold an
       edge against it. Ink is what the rest of the site already uses. */
    --prs-primary: var(--wp--preset--color--contrast, #111111);

    --cm-surface: var(--wp--preset--color--base-2, #ffffff);
    --cm-ink: var(--wp--preset--color--contrast, #111111);
    --cm-muted: var(--wp--preset--color--contrast-2, #636363);
    --cm-hairline: rgba(17, 17, 17, 0.10);
    --cm-sheet: var(--wp--preset--color--base, #f9f9f9);
    --cm-card: var(--wp--preset--color--base-2, #ffffff);
    --cm-radius: 10px;
    --cm-radius-sm: 6px;
    --cm-gutter: var(--wp--preset--spacing--50, 2rem);
    --cm-wide: 1280px;
}

/* ============================================================
   1. One container
   ============================================================ */

/* The plugin ships NO base .prs-container rule -- only a Bootstrap-style
   responsive max-width ladder -- and each wrapper then hardcodes its own
   padding. Measured on this site before the fix, against a theme chrome of
   1280px (208 -> 1488):
       categories        1440px   (128 -> 1568)
       category detail   1695px full-bleed, header 1540, grid 1440
       product detail    1240px   (228 -> 1468)
       cart              1344px   (176 -> 1520)
   Five widths, none of them the theme's. Everything below re-parents to the
   theme's wide width so the storefront lines up with the header and footer.

   The calc() matters: the gutter is padding INSIDE the wrapper, so the outer
   box has to be wider than the content width by both gutters, or the content
   lands one gutter inboard of the chrome. */
body .prs-container,
body .prs-container.prs-categories,
body .prs-container.prs-category-detail,
body .prs-container.prs-product-detail,
body .prs-container.prs-cart-container,
body .prs-container.prs-packages,
body .prs-container.prs-package-detail,
body .prs-container.prs-search-results {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--cm-wide) + var(--cm-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--cm-gutter);
}

/* SURFACES — TWO PAGE GROUPS.

   The storefront splits into two treatments, listed explicitly rather than as
   a growing chain of :not() exclusions:

     BROWSE  (categories, category listing, packages, search)
             content sits straight on the magenta, white type, no panels.
     DETAIL  (product detail, cart)
             content sits on a light sheet with white cards and ink type.

   Why the split is the right call and not an inconsistency: browse pages are
   images and short labels, which carry fine on a saturated ground. Detail and
   cart are dense — prices, quantities, options, totals, form fields — and that
   is body copy, where white on magenta measures 3.51:1 and fails AA. On the
   sheet the same text runs at 18.88:1.

   Adding a storefront page later means adding its template class to one of the
   two lists below; nothing else needs touching. */

/* ---------- BROWSE: transparent, white type ---------- */

body.page-template-prs-categories .prs-container,
body.page-template-prs-category-detail .prs-container,
body.page-template-prs-packages .prs-container,
body.page-template-prs-package-detail .prs-container,
body.page-template-prs-search-results .prs-container {
    width: min(var(--cm-wide), 100% - var(--cm-gutter) * 2);
    max-width: none;
    margin: 2rem auto 3.5rem;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    color: #ffffff;
}

body.page-template-prs-categories .prs-container .prs-category,
body.page-template-prs-category-detail .prs-container .prs-product,
body.page-template-prs-packages .prs-container .prs-package {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

body.page-template-prs-categories .prs-container .prs-category:hover,
body.page-template-prs-category-detail .prs-container .prs-product:hover {
    transform: none;
    box-shadow: none;
}

/* Square corners, no shadow on the artwork. */
body.page-template-prs-categories .prs-container .prs-category__image,
body.page-template-prs-categories .prs-container .prs-category__image img,
body.page-template-prs-category-detail .prs-container .prs-product__image,
body.page-template-prs-category-detail .prs-container .prs-product__image img {
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

body.page-template-prs-categories .prs-container .prs-category__image img,
body.page-template-prs-category-detail .prs-container .prs-product__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Type on the magenta. Weight carries the small sizes, since colour cannot:
   dropping to a grey would fall under 3:1 on this ground. */
body.page-template-prs-categories .prs-container,
body.page-template-prs-category-detail .prs-container,
body.page-template-prs-categories .prs-container .prs-category__name,
body.page-template-prs-category-detail .prs-container .prs-product__title,
body.page-template-prs-category-detail .prs-container .prs-product__price,
body.page-template-prs-category-detail .prs-container .prs-category-title,
body.page-template-prs-category-detail .prs-container .prs-category-description,
body.page-template-prs-categories .prs-container h1,
body.page-template-prs-categories .prs-container h2,
body.page-template-prs-category-detail .prs-container h1,
body.page-template-prs-category-detail .prs-container h2 {
    color: #ffffff;
}

body.page-template-prs-categories .prs-container .prs-category__name,
body.page-template-prs-category-detail .prs-container .prs-product__title {
    display: block;
    padding: 0.75rem 0 0;
    font-weight: 600;
    line-height: 1.35;
}

body.page-template-prs-category-detail .prs-container .prs-product__meta {
    padding: 0.75rem 0 0;
}

body.page-template-prs-category-detail .prs-container .prs-product__price {
    font-weight: 700;
}

body.page-template-prs-categories .prs-container .prs-empty,
body.page-template-prs-category-detail .prs-container .prs-empty {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* ---------- DETAIL: light sheet, ink type ---------- */

body.page-template-prs-product-detail .prs-container,
body.page-template-prs-cart .prs-container {
    width: min(var(--cm-wide), 100% - var(--cm-gutter) * 2);
    max-width: none;
    margin: 2rem auto 3.5rem;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background-color: var(--cm-sheet);
    border-radius: var(--cm-radius);
    box-shadow: 0 1px 3px rgba(17, 17, 17, 0.07);
    color: var(--cm-ink);
}

/* Cards on the sheet get their own white surface: magenta -> sheet -> card. */
body.page-template-prs-cart .prs-container .prs-cart-item,
body.page-template-prs-cart .prs-container .prs-cart-summary,
body.page-template-prs-product-detail .prs-container .prs-product-detail__info {
    background-color: var(--cm-card);
    border: 1px solid var(--cm-hairline);
    border-radius: var(--cm-radius-sm);
}

body.page-template-prs-product-detail .prs-container,
body.page-template-prs-cart .prs-container h1,
body.page-template-prs-cart .prs-container h2,
body.page-template-prs-cart .prs-container .prs-cart-title,
body.page-template-prs-cart .prs-container .prs-cart-item-link,
body.page-template-prs-product-detail .prs-container .prs-product-detail__title,
body.page-template-prs-product-detail .prs-container .prs-product-detail__price {
    color: var(--cm-ink);
}

/* Centred at max-width 1500px with its own margins, which is why the header
   sat 130px wider than the grid below it. */
body .prs-container .prs-category-header {
    max-width: none;
    margin: 0 0 2.5rem;
    padding: 0;
    text-align: left;
}

/* Carries max-width:1400px, its own padding, and a 60px + hairline separator,
   applied at (0,3,0) -- the strongest selector in prs.css that this file has
   to clear, hence the compound form. */
body .prs-container .prs-products,
body .prs-container.prs-category-detail .prs-products {
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: none;
}

/* Shortcode embeds are the mirror case: inside ordinary theme content the
   theme's own container already supplies width and gutter, so re-applying the
   wrapper box would inset the grid by one gutter. */
body:not([class*="page-template-prs-"]) .prs-container {
    max-width: none;
    padding-inline: 0;
}

/* ============================================================
   2. Colour
   ============================================================ */

/* Primary actions. Stock plugin blue (#0073aa) against this site's warm
   palette was the most visible clash. */
body .prs-container .prs-btn,
body .prs-container .prs-btn-primary,
body .prs-container .prs-btn-success,
body .prs-container .prs-add-to-cart,
body .prs-container .prs-check-availability,
body .prs-container button.prs-add-to-cart,
body .prs-container button.prs-check-availability,
body .prs-cart-summary .checkout-btn {
    background-color: var(--cm-ink);
    color: var(--wp--preset--color--base, #f9f9f9);
    border: 1px solid transparent;
    border-radius: var(--cm-radius-sm);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

body .prs-container .prs-btn:hover,
body .prs-container .prs-add-to-cart:hover,
body .prs-container .prs-check-availability:hover,
body .prs-cart-summary .checkout-btn:hover {
    background-color: var(--wp--preset--color--accent-3, #d8613c);
    color: #ffffff;
}

/* Secondary / quiet actions. */
body .prs-container .prs-btn-secondary,
body .prs-container .request-quote-btn {
    background-color: var(--cm-card);
    color: var(--cm-ink);
    border: 1px solid rgba(17, 17, 17, 0.24);
    border-radius: var(--cm-radius-sm);
}

body .prs-container .prs-btn-secondary:hover,
body .prs-container .request-quote-btn:hover {
    background-color: var(--cm-surface);
    border-color: var(--cm-ink);
}

/* The back link is navigation, not a call to action. The compound form is
   needed because the element also carries .prs-btn, styled above. */
body .prs-container .prs-btn.prs-btn-back {
    background: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-weight: 500;
    color: var(--cm-muted);
}

body .prs-container .prs-btn.prs-btn-back:hover {
    background: none;
    color: var(--cm-ink);
}

/* Text and surfaces follow the theme rather than the plugin's greys. */
body .prs-container,
body .prs-container .prs-category__name,
body .prs-container .prs-product__title,
body .prs-container .prs-cart-item-link {
    color: var(--cm-ink);
}

body .prs-container .prs-product__price,
body .prs-container .prs-product-detail__price,
body .prs-container .prs-item-total,
body .prs-container .prs-summary-total {
    color: var(--cm-ink);
    font-variant-numeric: tabular-nums;
}

body .prs-container .prs-empty,
body .prs-container .prs-cart-summary,
body .prs-container .prs-product-detail__info {
    background-color: var(--cm-card);
    border: 1px solid var(--cm-hairline);
    border-radius: var(--cm-radius-sm);
    color: var(--cm-muted);
}

body .prs-container .prs-sort-bar__select,
body .prs-container .prs-form-group input,
body .prs-container .prs-form-group select,
body .prs-container .prs-input {
    font-family: inherit;
    color: var(--cm-ink);
    background-color: var(--cm-surface);
    border: 1px solid var(--cm-hairline);
    border-radius: var(--cm-radius-sm);
}

body .prs-container .prs-form-group input:focus,
body .prs-container .prs-form-group select:focus,
body .prs-container .prs-input:focus {
    outline: 2px solid var(--wp--preset--color--accent-3, #d8613c);
    outline-offset: 1px;
    border-color: transparent;
}

/* Availability states, tinted from the theme's own accents. */
body .prs-container .prs-available-note {
    background-color: var(--wp--preset--color--accent-4, #b1c5a4);
    color: var(--cm-ink);
}

body .prs-container .prs-limited-note,
body .prs-container .prs-unavailable-note {
    background-color: var(--wp--preset--color--accent-2, #c2a990);
    color: var(--cm-ink);
}

/* ============================================================
   3. Closed gallery modal must not widen the page
   ============================================================ */

/* It is position:fixed with width:100vw, but while closed it still lives
   inside .prs-product-detail, where any ancestor transform makes "fixed"
   resolve against that ancestor instead of the viewport. The plugin's own JS
   moves the node to <body> on OPEN for exactly this reason -- too late for the
   closed state. Clipping it while closed costs nothing: .is-open restores the
   size before the opacity transition runs. */
body .prs-gallery-modal:not(.is-open) {
    width: 0;
    height: 0;
    overflow: hidden;
}


/* ============================================================
   4. Focus ring on keyboard only
   ============================================================ */

/* Clicking a card or button was leaving a persistent outline, because the
   plugin styles :focus rather than :focus-visible. Mouse and touch no longer
   draw a ring; keyboard navigation still does, so this does not cost
   accessibility. */
body .prs-container a:focus:not(:focus-visible),
body .prs-container button:focus:not(:focus-visible),
body .prs-container select:focus:not(:focus-visible),
body .prs-container input:focus:not(:focus-visible),
body .prs-container .prs-category:focus:not(:focus-visible),
body .prs-container .prs-product:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

body .prs-container a:focus-visible,
body .prs-container button:focus-visible,
body .prs-container select:focus-visible,
body .prs-container input:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}