/* Aurora Volleyball Club — woocommerce.css
   Themed overrides for WooCommerce's default shop/product/cart/checkout
   markup so they inherit this theme's dark background and
   --cyan/--magenta/--purple/--grad accents instead of WooCommerce's
   unstyled defaults. Reuses the existing CSS variables and .btn-primary /
   .page-hero conventions already defined in main.css and page.css — no new
   color values or design system is introduced here.

   Loaded conditionally by inc/pro-shop.php on shop/product/cart/checkout/
   my-account pages and on the Pro Shop landing page template.
*/

/* ── Cart / Checkout themed heading + wrapper (see
      woocommerce/cart/cart.php and woocommerce/checkout/form-checkout.php) ── */
.aurora-cart-wrap,
.aurora-checkout-wrap {
    color: var(--text);
}
.aurora-woocommerce-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

/* ── Widen the shop/category archive AND single-product content column ──
   woocommerce/global/wrapper-start.php reuses the theme's general
   `.page-content-wrap` (page.css: max-width: 820px), which is sized for
   narrow article-style reading pages, not a 4-across product grid or a
   side-by-side gallery+summary layout — at 820px:
     - a fixed 4-column grid of readable (220px+) cards has almost no
       room to breathe on the shop archive.
     - on a single product page, the Amazon-style two-column layout
       further down this file (500px image + 340px+ summary + 2.5rem
       gap = ~880px minimum) literally doesn't fit inside 820px, so
       flexbox wraps it to a single stacked column with the image
       centered and huge empty margins on both sides — this is the
       "not using a bunch of usable space" / "picture on the left,
       colors/sizes/name on the right again" bug Evan flagged
       (2026-09-27).
   Widen it on the shop archive, product category/tag archives, AND
   single-product pages, so cart/checkout/my-account (unaffected by
   either issue above) keep their intentional narrower reading width.
   NOTE: the Shop page here is a plain WP Page (created via WooCommerce's
   "Create default WooCommerce pages" tool) assigned as the shop page in
   WooCommerce settings, not a true product post-type archive — so
   WordPress's own `post-type-archive-product` body class is NOT present.
   Target WooCommerce's own conditional body classes instead (confirmed
   live via document.body.className: woocommerce-shop / woocommerce-page
   for the shop page and taxonomy archives, single-product for product
   pages — see WC_Query::generate_page_id / add_body_class in WooCommerce
   core). */
/* NOTE (2026-09-28): confirmed via `curl | grep body class` that /pro-shop/
   -- the actual live Pro Shop page Evan uses -- carries body class
   `page-template-page-pro-shop`, NOT `woocommerce-shop`. It's a custom page
   template (Template Name: Pro Shop) embedding the [products] shortcode,
   not WooCommerce's own designated "Shop" page from WooCommerce Settings ->
   Products -> Shop page. The .woocommerce-shop selector below silently
   never matched this page at all, so the width increase had zero visible
   effect despite deploying correctly -- caught when Evan reported no
   change after a hard refresh. Target the real template class directly;
   keep .woocommerce-shop too in case Settings ever points elsewhere. */
.woocommerce-shop .page-content-wrap,
.page-template-page-pro-shop .page-content-wrap,
.tax-product_cat .page-content-wrap,
.tax-product_tag .page-content-wrap,
.single-product .page-content-wrap {
    max-width: 2064px !important;
}

/* ── Shop filter buttons (Pro Shop page) ──
   Evan's instruction (2026-09-27, verbatim): "I want buttons at the top
   where parents can sort by Tshirts, hoodies, etc. Also a way for them to
   sort by kids or adults." Visually matches the existing .fs-filter-btn
   pattern from the Full Schedule page (main.css) for consistency, but
   kept as its own namespaced class here since it's shop-specific and
   this stylesheet only loads on WooCommerce-context pages. Filtering
   logic itself lives in page-pro-shop.php's own inline <script>, same
   pattern as page-full-schedule.php's filter buttons. */
.shop-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-bottom: 1.5rem;
}
.shop-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.shop-filter-btn {
    background: var(--dark2);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    padding: 7px 16px;
    border-radius: 4px;
    font-family: 'Barlow', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
}
.shop-filter-btn.active,
.shop-filter-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(45,226,230,0.06);
}

.aurora-shop-no-results {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 2rem 0;
}

/* ── Shop loop / product grid (rendered by the [products] shortcode and by
      WooCommerce's own archive templates) ──
   Fixed to a consistent 4-per-row layout (Evan's preference — auto-fill's
   variable column count looked inconsistent/"tacky" as the row count
   changed with viewport width). Falls back to fewer columns only when the
   viewport is too narrow for a readable 220px-min card. */
.aurora-shop-loop-wrap ul.products,
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.7rem;
    list-style: none;
    margin: 2rem 0 !important;
    padding: 0 !important;
}

/* WooCommerce core also applies an old float-layout "clearfix" hack to
   `ul.products` (`.clearfix::before, .clearfix::after { content: "";
   display: table; }`), harmless/invisible under float layout since a
   zero-content `display:table` box collapses to nothing. But inside our
   `display: grid` container, browsers still generate a real (implicit)
   grid item for that pseudo-element, which silently occupies grid cell
   #1 — pushing every real product over by one slot (blank first cell,
   and one lonely orphaned card wraps to its own row at the end). Kill
   the pseudo-elements outright; they serve no purpose once the layout
   is grid instead of float. */
.aurora-shop-loop-wrap ul.products::before,
.aurora-shop-loop-wrap ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 980px) {
    .aurora-shop-loop-wrap ul.products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .aurora-shop-loop-wrap ul.products,
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

.aurora-shop-loop-wrap ul.products li.product,
.woocommerce ul.products li.product {
    background: var(--dark2);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;

    /* WooCommerce core (woocommerce-general.css) still ships legacy
       float-grid CSS keyed off the `.columns-N` class the classic shop
       template prints on `<ul class="products columns-4">` — e.g.
       `.woocommerce ul.products.columns-4 li.product { float: left;
       width: 22.05%; ... }`. CSS Grid items are stretched to fill their
       grid cell by default, but an explicit `width` on a grid item
       overrides that stretch, so every product card was collapsing to a
       tiny fraction of its real column width (cards rendered ~7px wide,
       titles wrapped one word per line, huge empty gaps). Since our
       container is `display: grid` (not the float layout these rules
       assume), explicitly neutralize them here rather than patching
       WooCommerce core. */
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    clear: none !important;
}
.aurora-shop-loop-wrap ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
    border-color: rgba(45,226,230,0.3);
    transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    color: var(--text);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--cyan);
    font-weight: 600;
}

/* ── Buttons (Add to Cart / Place Order / Proceed to Checkout etc.) ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .checkout-button,
.woocommerce #place_order {
    background: var(--grad) !important;
    color: var(--dark) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 28px !important;
    font-family: 'Barlow', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Single product page ── */
.woocommerce div.product {
    color: var(--text);
}

/* Amazon-style two-column layout: gallery fixed-ish on the left,
   title/price/options/Add-to-Cart summary on the right. WooCommerce's
   default markup is `div.images` + `div.summary.entry-summary` as two
   sibling floated divs inside `div.product` — float layout is what was
   producing the huge empty stretch to the right of the image seen in
   Evan's screenshot once the surrounding page-content-wrap was widened
   (the summary column floats but doesn't fill/align against the image
   column). Switch to an explicit flex layout instead. */
.woocommerce div.product.single-product,
.single-product div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
}
.woocommerce div.product div.images {
    flex: 0 1 500px;
    max-width: 500px;
}

/* Evan (bug report, this session): "the images are different sizes so
   the scaling is off we need to lock the image container and have the
   pictures scale to it" -- WooCommerce's main gallery image size
   ("woocommerce_single") is configured with crop DISABLED (width
   locked at 600px, height left to each photo's own aspect ratio), so
   swapping between a lifestyle photo (1024x1536, portrait) and a
   Printify mockup (1454x2048, a slightly different portrait ratio)
   changed the rendered height every time -- the whole gallery box
   visibly resized on every hover/click/color-swap instead of staying
   put. WooCommerce core's only image rule is
   `.woocommerce img { height:auto; max-width:100% }`, which is exactly
   what let each photo's own aspect ratio drive the box size.
   Locking the main slot to a fixed aspect-ratio box and having the
   <img> fill it via object-fit:contain (never cover/crop -- nothing
   in any photo gets cut off, just letterboxed consistently) makes
   every photo, regardless of its real pixel dimensions, occupy
   exactly the same visual footprint. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    position: relative;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    background: var(--dark2, #14141c);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:first-child img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    border-radius: 6px;
    overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2):hover {
    opacity: 0.85;
    box-shadow: 0 0 0 2px var(--accent, #2de2e6);
}
.woocommerce div.product div.summary.entry-summary {
    flex: 1 1 340px;
    min-width: 300px;
    float: none !important;
    width: auto !important;
}

/* WooCommerce prints the Description/Additional information/Reviews tabs
   block (`.woocommerce-tabs.wc-tabs-wrapper`) as a THIRD direct child of
   `div.product`, sitting right after `.images` and `.summary.entry-summary`.
   Since div.product is now `display:flex`, that tabs block became a flex
   ITEM too -- and with no explicit width/basis, flexbox let it shrink and
   squeeze into whatever leftover space was left on row 1 (next to the
   price/dropdowns) instead of dropping to its own full-width row below the
   gallery/summary. That produced an unpredictable, near-zero-width tabs
   panel -- which is what made the whole tab bar appear to "disappear"
   when a tab was clicked (it was rendering inside a collapsed sliver of
   space, not actually vanishing). Forcing a 100% flex-basis makes it
   always wrap onto its own full-width row, matching normal WooCommerce
   layout. */
.woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper {
    flex: 1 1 100%;
    width: 100%;
    order: 3;
}

.woocommerce div.product h1.product_title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    color: var(--text);
    margin: 0 0 0.75rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    display: block;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text-muted);
    margin: 1.25rem 0;
    line-height: 1.6;
}

/* SKU / category meta line — de-emphasize vs. WooCommerce's default
   plain black text so it reads as secondary detail, not a headline. */
.woocommerce div.product .product_meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-family: 'Barlow', sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.woocommerce div.product .product_meta a {
    color: var(--cyan);
    text-decoration: none;
}
.woocommerce div.product .product_meta a:hover {
    text-decoration: underline;
}

@media (max-width: 860px) {
    .woocommerce div.product.single-product,
    .single-product div.product {
        display: block;
    }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary.entry-summary {
        max-width: 100%;
        flex: none;
    }
}

/* ── Variation selectors (Colors / Sizes dropdowns) ──
   WooCommerce's default classic variation markup is a bare, unstyled
   <table class="variations"> of <select> elements — this is the
   "horrible looking and cheap" dropdown table Evan flagged. Restyle it
   to look like a proper e-commerce product option picker (Amazon-style):
   clear stacked label + full-width custom-chevron select with the
   theme's dark surface color, a visible border that lights up cyan on
   focus/hover, and generous padding — instead of the browser's default
   flat white/gray dropdown. */
.woocommerce div.product table.variations {
    width: 100%;
    border: none;
    margin: 0 0 1.5rem;
}
.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr {
    display: block;
    width: 100%;
}
.woocommerce div.product table.variations tr + tr {
    margin-top: 1rem;
}
.woocommerce div.product table.variations th.label,
.woocommerce div.product table.variations td.value {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    border: none;
}
.woocommerce div.product table.variations th.label {
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.woocommerce div.product table.variations th.label label {
    display: block;
}

.woocommerce div.product table.variations td.value select,
.woocommerce div.product .variations select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 340px;
    background-color: var(--dark3);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%232de2e6' d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    padding: 12px 40px 12px 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce div.product table.variations td.value select:hover,
.woocommerce div.product .variations select:hover {
    border-color: rgba(45,226,230,0.5);
}
.woocommerce div.product table.variations td.value select:focus,
.woocommerce div.product .variations select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(45,226,230,0.18);
}
.woocommerce div.product table.variations td.value select option {
    background: var(--dark3);
    color: var(--text);
}

.woocommerce div.product .reset_variations {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: underline;
}
.woocommerce div.product .reset_variations:hover {
    color: var(--cyan);
}

/* Variation price + stock/availability line shown once both dropdowns
   are picked (WooCommerce injects this via JS into
   .woocommerce-variation) — keep it visually consistent with the
   surrounding page instead of WooCommerce's unstyled default. */
.woocommerce div.product .woocommerce-variation-price {
    margin: 0.75rem 0;
}
.woocommerce div.product .woocommerce-variation-price .price {
    color: var(--cyan);
    font-weight: 700;
    font-size: 1.35rem;
}
.woocommerce div.product .woocommerce-variation-availability {
    margin: 0.4rem 0 0.75rem;
}
.woocommerce div.product .woocommerce-variation-availability .stock {
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
}
.woocommerce div.product .woocommerce-variation-availability .stock.in-stock {
    color: #3ddc84;
}
.woocommerce div.product .woocommerce-variation-availability .stock.out-of-stock {
    color: var(--magenta);
}

/* Quantity input next to Add to Cart — match the select's dark styling
   instead of the browser-default white number spinner. */
.woocommerce div.product .quantity .qty {
    background: var(--dark3);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: var(--text);
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    padding: 12px 10px;
    text-align: center;
    width: 64px;
}
.woocommerce div.product .quantity .qty:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(45,226,230,0.18);
}
.woocommerce div.product form.cart .button {
    vertical-align: top;
}

/* ── Cart & Checkout tables ── */
.woocommerce table.shop_table,
.woocommerce-checkout table.shop_table {
    background: var(--dark2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0.9rem 1rem;
}
.woocommerce table.shop_table tr:last-child td {
    border-bottom: none;
}

/* The ACH "Payment processing fee" line added by inc/pro-shop.php renders
   inside this same table with class="fee" — style it as a clearly visible,
   distinct row rather than blending into the subtotal/total rows. */
.woocommerce table.shop_table tr.fee th,
.woocommerce table.shop_table tr.fee td {
    color: var(--magenta);
    font-weight: 600;
}

.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td {
    color: var(--cyan);
    font-weight: 700;
    font-size: 1.05em;
}

/* ── Checkout form fields ── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
    background: var(--dark3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: var(--text);
    padding: 10px 12px;
}
.woocommerce form .form-row label {
    color: var(--text-muted);
}

/* ── Checkout BLOCK form fields ──
   Bug fix (2026-09-27, Evan report: "Cant see the text in the forms.
   It's white on white in checkout."): this store's Checkout page is
   built from the WooCommerce Checkout BLOCK (wp-block-woocommerce-
   checkout), confirmed live — NOT the classic
   woocommerce/checkout/form-checkout.php template, so none of the
   `.woocommerce form .form-row` rules above (which only exist for the
   classic template) ever applied here. The block's own default styling
   renders a white input background, and this theme's global `body {
   color: var(--text) }` (a light, near-white color meant for the dark
   background everywhere else on the site) was the only color rule
   reaching that white input — making every typed character, floating
   label, and placeholder essentially invisible white-on-white.
   Restyled to the same dark input treatment already used by the classic
   cart/checkout fields above, so both templates look consistent. Class
   names are WooCommerce Blocks' own documented/stable component classes
   (@woocommerce/blocks — TextInput, Textarea, Select/Combobox,
   AdditionalFields), not guessed selectors. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea textarea,
.wc-block-components-combobox input,
.wc-block-components-select select,
.wc-block-checkout__additional-fields input[type="text"],
.wc-block-checkout__additional-fields textarea {
    background: var(--dark3) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 4px !important;
    color: var(--text) !important;
}

/* Country/Region + State selects — confirmed live via DevTools
   (2026-09-27) to use a DIFFERENT WooCommerce Blocks naming convention
   than the text-input classes above: "wc-blocks-components-select"
   (plural "blocks"), not "wc-block-components-select" (singular) — two
   distinct, both-real class prefixes used by different parts of
   @woocommerce/blocks. The singular-prefix rule earlier in this file
   correctly styles plain <select> elements that use it, but this
   select's actual rendered classes are the plural-prefixed ones, so it
   was still rendering with a plain white background. */
.wc-blocks-components-select__select {
    background: var(--dark3) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 4px !important;
    color: var(--text) !important;
}
.wc-blocks-components-select__select option {
    background: var(--dark3) !important;
    color: var(--text) !important;
}
.wc-blocks-components-select__label {
    color: var(--text-muted) !important;
}

/* The block's floating label sits visually on top of/inside the input
   border and defaults to a color meant for a white input — override to
   the same muted color the classic template's .form-row label uses, in
   both its resting (placeholder-like) and floated-up (already-filled)
   states. */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label {
    color: var(--text-muted) !important;
}

/* Dropdown option lists (Country/Region, State) render in a popover that
   inherits the same light-on-transparent problem. */
.wc-block-components-combobox__listbox,
.wc-block-components-select select option {
    background: var(--dark3) !important;
    color: var(--text) !important;
}

/* Checkbox / radio labels ("Add a note to your order", shipping/payment
   method choices) use plain text color, not the same component as above. */
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__option-layout,
.wc-block-checkout__terms {
    color: var(--text) !important;
}

/* ── Notices (added to cart, errors, info) ── */
.woocommerce-message,
.woocommerce-info {
    background: var(--dark2) !important;
    border-top-color: var(--cyan) !important;
    color: var(--text) !important;
}
.woocommerce-error {
    background: var(--dark2) !important;
    border-top-color: var(--magenta) !important;
    color: var(--text) !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--cyan) !important; }
.woocommerce-error::before { color: var(--magenta) !important; }

/* ── Block-based notices ("X has been removed from your cart because it
      can no longer be purchased", and any other Cart/Checkout Block
      notice) ──
   Bug fix (2026-09-27, Evan report + screenshot: icon rendering on top
   of/overlapping the first letter of the message). Root cause: this is a
   DIFFERENT, newer WooCommerce Blocks notice component
   (.wc-block-components-notice-banner, introduced in WooCommerce Blocks
   10.0 — see WooCommerce's own changelog, "themes that use customised
   notices will NOT have their styles respected... the new notices use
   new CSS class names") from the classic .woocommerce-error/-message
   notices styled above, which only apply to the classic
   shortcode-based cart/checkout. Its default markup is an <svg> icon
   immediately followed by a sibling `.wc-block-components-notice-
   banner__content` text div, meant to be laid out side-by-side with a
   gap via WooCommerce's own default CSS — but this theme's global reset
   in main.css (`*, *::before, *::after { margin: 0; padding: 0; }`)
   strips the spacing/positioning that layout depends on, collapsing the
   icon directly onto the text. Restyled as an explicit flex row with a
   gap, same pattern as .aurora-shipping-notice above. */
.wc-block-components-notice-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    background: var(--dark2) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 0 0 1rem !important;
    color: var(--text) !important;
}
.wc-block-components-notice-banner.is-error {
    border-left: 4px solid var(--magenta) !important;
}
.wc-block-components-notice-banner.is-success {
    border-left: 4px solid var(--cyan) !important;
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner:not(.is-error):not(.is-success) {
    border-left: 4px solid var(--purple) !important;
}
.wc-block-components-notice-banner svg {
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: 1px !important;
}
.wc-block-components-notice-banner.is-error svg { color: var(--magenta) !important; fill: var(--magenta) !important; }
.wc-block-components-notice-banner.is-success svg { color: var(--cyan) !important; fill: var(--cyan) !important; }
.wc-block-components-notice-banner__content {
    color: var(--text) !important;
    line-height: 1.65 !important;
}
.wc-block-components-notice-banner .wc-block-components-button {
    color: var(--text-muted) !important;
}

/* ── My Account page (order history) ── */
.woocommerce-MyAccount-content,
.woocommerce-account .woocommerce {
    color: var(--text);
}

/* ── Shipping/pickup notice (Pro Shop, Cart, Checkout) ──
   Evan's instruction (2026-09-27, verbatim): "please make a very obvious
   note somewhere that all orders will be shipped to the Directors and
   then orders will be delivered from Club Directors to a requested
   address or handed out during practices if ordered during the season.
   This allow for our parents to get free shipping." — styled as a clearly
   distinct, high-contrast callout (gradient left border + icon) rather
   than blending in with ordinary body copy, per "very obvious". Rendered
   via aurora_shipping_notice() in inc/pro-shop.php on the Pro Shop
   landing page, Cart, and Checkout. */
.aurora-shipping-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--dark2);
    border: 1px solid rgba(45,226,230,0.3);
    border-left: 4px solid;
    border-image: var(--grad) 1;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 1.75rem;
}
.aurora-shipping-notice-icon {
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 2px;
}
.aurora-shipping-notice-text {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
}
.aurora-shipping-notice-text strong {
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 4px;
}