/* ASA storefront — minimal, fast, no framework. Replace with brand styles. */
:root {
    --brand: #1d5c3a;
    --brand-dark: #14422a;
    --text: #222;
    --muted: #6b7280;
    --border: #e5e7eb;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
/* Browse pages opt into the full window (#07): 1100px showed three cards per row on a
   1536px screen where Vickerman shows five or six. Reading pages (PDP, checkout,
   policies) keep the narrower measure - long text lines are a cost, not a win. */
main.wide { max-width: 1400px; }
main.wide .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
a { color: var(--brand); }

.site-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border);
}
.site-header .logo { font-size: 1.3rem; font-weight: 700; text-decoration: none; color: var(--brand-dark); }
.site-header nav a { margin-left: 1.25rem; text-decoration: none; }
.site-footer { border-top: 1px solid var(--border); padding: 1.5rem; color: var(--muted); text-align: center; margin-top: 3rem; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.product-card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; text-decoration: none; color: var(--text); }
.product-card:hover { border-color: var(--brand); }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.product-card h2 { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
.price { font-weight: 700; color: var(--brand-dark); }
.badge.oos { color: #b91c1c; font-size: 0.85rem; }

.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 720px) { .product-page { grid-template-columns: 1fr; } }
.product-images img { width: 100%; border-radius: 8px; }

fieldset.axis { border: none; padding: 0; margin: 1rem 0; }
fieldset.axis legend { font-weight: 600; margin-bottom: 0.4rem; }
.axis-option { display: inline-block; margin: 0 0.4rem 0.4rem 0; }
.axis-option input { position: absolute; opacity: 0; }
.axis-option span {
    display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer; user-select: none;
}
.axis-option input:checked + span { border-color: var(--brand); background: #ecf7f0; font-weight: 600; }
/* #61: a muted-but-readable token instead of opacity — .35 opacity failed WCAG contrast,
   which matters most on exactly the text explaining why an option can't be picked. The
   dashed border and strike carry the state for color-blind shoppers. */
.axis-option.unavailable span {
    color: var(--muted); border-style: dashed;
    text-decoration: line-through; cursor: not-allowed; background: #fafafa;
}

#add-btn, .checkout-btn {
    background: var(--brand); color: #fff; border: none; border-radius: 6px;
    padding: 0.75rem 2rem; font-size: 1rem; cursor: pointer; margin-top: 0.75rem;
}
#add-btn:disabled { background: var(--muted); cursor: not-allowed; }
.sku, .note { color: var(--muted); font-size: 0.9rem; }
/* Field requirement stated BEFORE submit — a rule a shopper only meets by failing is a
   rule we never told them, and browsers read minlength/passwordrules for generation. */
.field-hint { display: block; color: var(--muted); font-size: .85rem; margin-top: .3rem; max-width: 34rem; }

.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.cart-table th, .cart-table td { text-align: left; padding: 0.6rem; border-bottom: 1px solid var(--border); }
.cart-table tfoot td { font-weight: 700; }
.link-btn { background: none; border: none; color: var(--brand); cursor: pointer; text-decoration: underline; padding: 0; }
.checkout-form label { display: block; margin-bottom: 0.75rem; }
.checkout-form input { display: block; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px; width: 280px; margin-top: 0.25rem; }

/* hero + home category tiles */
.hero { padding: 2rem 0 1rem; }
.hero h1 { margin: 0 0 .25rem; }
.hero p { color: var(--muted); margin: 0; }
.category-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; margin-top: 1rem; }
.category-tile { display: flex; align-items: center; justify-content: center; min-height: 90px; text-align: center;
    border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--brand-dark); font-weight: 600; padding: 1rem; overflow: hidden; }
.category-tile:hover { border-color: var(--brand); background: #ecf7f0; }
/* image tiles: photo on top, label bar below */
.category-tile.has-img { flex-direction: column; align-items: stretch; padding: 0; min-height: 0; }
.category-tile.has-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.category-tile.has-img .tile-label { padding: .6rem 1rem; }
.category-tile.has-img:hover { background: #ecf7f0; }

/* group switcher (Show Options / Switch Color / swatches) */
.switcher { margin: 1rem 0; }
.switcher-label { font-weight: 600; margin-right: .5rem; }
.switcher ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .5rem 0 0; }
.switcher li a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid var(--border);
    border-radius: 6px; text-decoration: none; color: var(--text); font-size: .9rem; }
.switcher li.current a { border-color: var(--brand); background: #ecf7f0; font-weight: 600; }
.switcher li a img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }

/* category layout: facet sidebar + results */
.category-hero { width: 100%; max-height: 280px; object-fit: cover; border-radius: 8px; }
.category-intro { color: var(--text); margin: .5rem 0 1.5rem; max-width: 70ch; }
.category-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .category-layout { grid-template-columns: 1fr; } }
.facets .result-count { font-weight: 700; }
.facets > a { display: block; margin-bottom: 1rem; text-decoration: none; color: var(--brand); }
.facets .facet-on { font-weight: 700; }
.facet h3 { font-size: .95rem; margin: 1rem 0 .4rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.facet ul { list-style: none; padding: 0; margin: 0; }
.facet li a { display: flex; justify-content: space-between; padding: .2rem 0; text-decoration: none; color: var(--text); font-size: .9rem; }
.facet li.selected a { color: var(--brand); font-weight: 600; }
.facet .count { color: var(--muted); }
.results-toolbar { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.results-toolbar a { text-decoration: none; color: var(--brand); }
.results-toolbar .sort-on { font-weight: 700; text-decoration: underline; }
.empty { color: var(--muted); }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.pager a { text-decoration: none; color: var(--brand); }
.price s { color: var(--muted); font-weight: 400; margin-left: .4rem; }

/* ---- dropdown nav ---- */
.main-nav { display: flex; align-items: center; gap: 0.25rem; }
.main-nav .nav-item { position: relative; }
.main-nav .nav-item > a, .main-nav .nav-cart { display: inline-block; padding: 0.5rem 0.9rem; text-decoration: none; color: var(--text); border-radius: 6px; }
.main-nav .nav-item > a:hover { background: #ecf7f0; color: var(--brand-dark); }
.main-nav .nav-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff;
    border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 0.4rem; display: none; z-index: 50;
}
.main-nav .nav-item:hover .nav-dropdown, .main-nav .nav-item:focus-within .nav-dropdown { display: block; }
.main-nav .nav-dropdown a { display: block; padding: 0.45rem 0.7rem; text-decoration: none; color: var(--text); border-radius: 5px; font-size: 0.92rem; }
.main-nav .nav-dropdown a:hover { background: #ecf7f0; color: var(--brand-dark); }
/* Mega panel (#02): one column per second-level category, third level beneath it. */
.main-nav .nav-dropdown.mega {
    display: none; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .25rem 1.25rem; min-width: min(720px, 92vw); padding: .9rem 1rem;
}
.main-nav .nav-item:hover .nav-dropdown.mega, .main-nav .nav-item:focus-within .nav-dropdown.mega { display: grid; }
.main-nav .mega-head { font-weight: 700; color: var(--brand-dark); }
.main-nav .mega-col a { font-size: .88rem; }
.main-nav .mega-all { color: var(--brand); font-size: .82rem; }
.main-nav .nav-cart { font-weight: 600; }

/* ---- breadcrumb ---- */
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumb a { color: var(--brand); text-decoration: none; }
.breadcrumb .sep { color: var(--border); }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ---- home market blocks ---- */
.market-block { margin: 1.5rem 0; }
.market-block h2 { margin: 0 0 0.5rem; }
.market-block h2 a { text-decoration: none; color: var(--brand-dark); }

/* ---- subcategory drill-down tiles ---- */
.subcategory-tiles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.subcategory-tile {
    display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--border);
    border-radius: 20px; text-decoration: none; color: var(--brand-dark); font-size: 0.9rem; background: #fff;
}
.subcategory-tile:hover { border-color: var(--brand); background: #ecf7f0; }
/* image variant: small card with thumbnail above the label */
.subcategory-tile.has-img {
    display: flex; flex-direction: column; align-items: stretch; width: 150px; padding: 0;
    border-radius: 8px; overflow: hidden; font-weight: 600;
}
.subcategory-tile.has-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.subcategory-tile.has-img .tile-label { padding: .45rem .7rem; text-align: center; }

/* ---- facet collapse / show-all ---- */
.facet-extra { display: none; }
/* Expanded state lives on the .facet wrapper, not a sibling combinator: the toggle
   button renders AFTER the <ul>, and "~" only matches following siblings. */
.facet.expanded .facet-extra { display: block; }
.facet-more { display: inline-block; margin-top: .35rem; color: var(--brand); cursor: pointer; font-size: .85rem; user-select: none; }
.facet-more:hover { text-decoration: underline; }
.facet-more .when-expanded { display: none; }
.facet.expanded .facet-more .when-collapsed { display: none; }
.facet.expanded .facet-more .when-expanded { display: inline; }

/* ---- product image gallery ---- */
#main-image { width: 100%; border-radius: 8px; }
.thumb-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.product-images .thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.product-images .thumb:hover { border-color: var(--brand); }

/* ---- popup switcher (Show Options / Switch Color) ---- */
.switcher-row { margin: 1rem 0; }
.switcher-btn { display: inline-block; padding: 0.6rem 1.2rem; background: var(--brand); color: #fff; border-radius: 6px; cursor: pointer; font-weight: 600; }
.switcher-btn:hover { background: var(--brand-dark); }
.modal-overlay { display: none; }
.modal-overlay.open { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; z-index: 100; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); cursor: pointer; }
.modal { position: relative; background: #fff; border-radius: 10px; max-width: 780px; width: 92%; max-height: 82vh; overflow: auto; padding: 1.25rem 1.5rem; z-index: 1; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.modal h3 { margin: 0 0 1rem; }
.modal-close { position: absolute; top: 0.5rem; right: 0.9rem; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.switcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.switcher-choice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); font-size: 0.85rem; }
.switcher-choice:hover { border-color: var(--brand); }
.switcher-choice img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.switcher-choice.current { border-color: var(--brand); background: #ecf7f0; font-weight: 600; }

/* ---- stock indicator ---- */
.stock { font-size: 0.9rem; font-weight: 600; color: var(--brand-dark); }
.stock.low { color: #b45309; }
.stock.oos { color: #b91c1c; }

/* text-only switcher (non-color): tighter chips, no images */
.switcher-grid.text-only { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.switcher-grid.text-only .switcher-choice { padding: 0.6rem 0.5rem; }

/* ---- branding ---- */
.logo-img { max-height: 44px; width: auto; display: block; }
.home-banner { background-size: cover; background-position: center; border-radius: 10px; min-height: 280px; display: flex; align-items: center; padding: 2rem; margin-bottom: 1rem; }
.home-banner-text { background: rgba(255,255,255,0.85); padding: 1rem 1.5rem; border-radius: 8px; max-width: 520px; }
.home-banner-text h1 { margin: 0 0 0.25rem; }
.home-banner-text p { margin: 0; color: var(--text); }

/* ---- editorial comparison tables (category intro HTML) ---- */
.category-intro table.compare { border-collapse: collapse; margin: 1rem 0; width: 100%; max-width: 560px; }
.category-intro table.compare th, .category-intro table.compare td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; font-size: 0.92rem; }
.category-intro table.compare thead th { background: #ecf7f0; }

/* ---- admin tile preview ---- */
.preview-tile { max-width: 200px; }
.admin-table .thumb-cell { width: 64px; }
.admin-table .thumb-cell img { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; }
.admin-table .thumb-cell .no-img { color: var(--muted); }

/* ---- inspiration / curated collections ---- */
.inspiration-title, .collection-title { text-align: center; }
.inspiration-lede { text-align: center; margin-top: -.25rem; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem 2.5rem; margin: 1.5rem 0; }
.collection-card { display: flex; flex-direction: column; }
.collection-card h2, .collection-card h3 { text-align: center; font-weight: 600; margin: 0 0 .6rem; }
.collection-photo { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; border: 1px solid var(--border); background: #f3f4f6; }
.collection-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-photo.no-img { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.shop-design-btn { align-self: center; margin-top: .9rem; background: var(--brand); color: #fff; padding: .55rem 1.6rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.shop-design-btn:hover { background: var(--brand-dark); }
.collection-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 1rem; }
@media (max-width: 820px) { .collection-layout { grid-template-columns: 1fr; } }
.collection-hero, .collection-gallery-img { width: 100%; border-radius: 8px; display: block; margin-bottom: 1rem; }
.collection-intro { color: var(--text); max-width: 60ch; }
.shop-look-title, .related-title { text-align: center; font-weight: 600; }
.related-title { margin-top: 2.5rem; }
.look-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.look-grid .product-card h3 { font-size: .9rem; margin: .4rem 0 .25rem; }
.related-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---- customer auth ---- */
.auth-card { max-width: 420px; margin: 2rem auto; }
.auth-form label { display: block; margin-bottom: .8rem; font-weight: 600; font-size: .9rem; }
.auth-form input[type=email], .auth-form input[type=password], .auth-form input:not([type]) {
    display: block; width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid var(--border); border-radius: 6px; font-weight: 400; }
.auth-form .chk { font-weight: 400; }
.auth-form button { background: var(--brand); color: #fff; border: none; border-radius: 6px; padding: .6rem 1.6rem; cursor: pointer; font-size: 1rem; }
ul.err { color: #b91c1c; }
.nav-account { padding: .5rem .9rem; text-decoration: none; color: var(--text); border-radius: 6px; }
.nav-account:hover { background: #ecf7f0; color: var(--brand-dark); }
.account-links { line-height: 1.9; }

/* ---- customer account portal ---- */
.account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.account-card { display: block; padding: 1.25rem; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); }
.account-card:hover { border-color: var(--brand); }
.account-card h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.signout-row { margin-top: 1.5rem; }
.btn-primary { display: inline-block; background: var(--brand); color: #fff; padding: .5rem 1.2rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.btn-primary:hover { background: var(--brand-dark); }
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }
.address-card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.address-tags { margin-bottom: .5rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.tag { background: #ecf7f0; color: var(--brand-dark); border-radius: 12px; padding: .1rem .6rem; font-size: .75rem; font-weight: 600; }
.tag.default { background: var(--brand); color: #fff; }
.address-actions { display: flex; gap: .75rem; align-items: center; margin-top: .5rem; }
.address-form .field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.address-form select { display: block; width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid var(--border); border-radius: 6px; }
.acct-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.acct-table th, .acct-table td { text-align: left; padding: .55rem; border-bottom: 1px solid var(--border); font-size: .92rem; }
.acct-table tfoot td { border-bottom: none; }
.acct-table .r { text-align: right; color: var(--muted); }
.card-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.saved-card { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; }
.card-face { font-weight: 600; }
.tracking-box { border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; background: #f8fbf9; }
.tracking-box h2 { font-size: 1rem; margin: 0 0 .4rem; }
.addr-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---- order progress timeline (customer) ---- */
.order-progress { list-style: none; display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 1rem 0 1.5rem; }
.order-progress li { flex: 1 1 120px; position: relative; padding: 0 .5rem; text-align: center; }
.order-progress .dot { display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto .4rem; background: var(--border); border: 2px solid var(--border); }
.order-progress li.done .dot { background: #16a34a; border-color: #16a34a; }
.order-progress li::before { content: ""; position: absolute; top: 7px; left: 0; width: 50%; height: 2px; background: var(--border); z-index: -1; }
.order-progress li::after { content: ""; position: absolute; top: 7px; right: 0; width: 50%; height: 2px; background: var(--border); z-index: -1; }
.order-progress li:first-child::before, .order-progress li:last-child::after { display: none; }
.order-progress li.done::before, .order-progress li.done::after { background: #16a34a; }
.order-progress .step-label { display: block; font-size: .85rem; font-weight: 600; }
.order-progress .step-when { display: block; font-size: .72rem; color: var(--muted); }
.order-progress li.pending .step-label { color: var(--muted); font-weight: 400; }

/* ---- cart + checkout ---- */
.qty-form { display: flex; gap: .4rem; align-items: center; }
.qty-input { width: 56px; padding: .3rem; border: 1px solid var(--border); border-radius: 5px; }
.checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; margin-top: 1rem; }
@media (max-width: 820px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-main label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .9rem; }
.checkout-main select, .checkout-main textarea { display: block; width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid var(--border); border-radius: 6px; font-weight: 400; }
.checkout-main .chk { font-weight: 400; }
.checkout-summary { border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; background: #f8fbf9; }
.checkout-summary h2 { margin-top: 0; font-size: 1.1rem; }

/* ---- collaborator profile + byline ---- */
.collection-byline { text-align: center; color: var(--muted); margin-top: -.5rem; }
.collection-byline a { color: var(--brand); text-decoration: none; }
.collab-hero { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; }
.collab-head { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.collab-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); }
.collab-tagline { color: var(--muted); margin: .25rem 0 .75rem; }
.follow-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.follow-btn { padding: .4rem 1rem; border-radius: 6px; text-decoration: none; color: #fff; font-size: .85rem; font-weight: 600; background: var(--brand); }
.follow-btn.ig { background: #c13584; } .follow-btn.fb { background: #1877f2; } .follow-btn.tt { background: #111; }
.follow-btn.yt { background: #ff0000; } .follow-btn.web { background: var(--brand-dark); }
.collab-bio { max-width: 70ch; margin: 1.25rem 0; }
.collab-section { margin-top: 2rem; }
.collab-ig-embed { margin-top: 1rem; }

/* ---- header search + autocomplete ---- */
.site-search { position: relative; flex: 1 1 220px; max-width: 320px; margin: 0 1rem; }
.site-search input { width: 100%; padding: .45rem .8rem; border: 1px solid var(--border); border-radius: 20px; font-size: .9rem; }
.search-suggest { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 60; margin-top: .25rem; overflow: hidden; }
.search-suggest a { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; text-decoration: none; color: var(--text); font-size: .9rem; }
.search-suggest img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.search-suggest .sg-text small { display: block; color: var(--muted); font-size: .78rem; }
.search-suggest .suggest-all { border-top: 1px solid var(--border); font-weight: 600; color: var(--brand); }
.search-suggest a:hover, .search-suggest a.active { background: #ecf7f0; color: var(--brand-dark); }
/* .active mirrors :hover for keyboard arrow navigation (aria-activedescendant). */

/* ---- about + footer links + stock warning ---- */
.about-page { max-width: 70ch; }
.about-page h2 { margin-top: 1.5rem; }
.about-contact { margin-top: 1.5rem; color: var(--muted); }
.footer-social { display: flex; gap: .9rem; justify-content: center; margin: .4rem 0 0; }
.footer-social-label { color: var(--muted); }
.footer-links { margin: 0 0 .35rem; }
.footer-links a { color: var(--brand); text-decoration: none; }
.stock-warn { background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: .6rem .9rem; }
.promo-row { display: flex; gap: .5rem; margin: .75rem 0 .25rem; }
.promo-row input { flex: 1; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 6px; }

/* Cart delivery-time estimator */
.transit-estimate { margin: 1.25rem 0; padding: 1rem 1.25rem; border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa; max-width: 520px; }
.transit-estimate label { display: block; margin-bottom: .5rem; }
.transit-row { display: flex; gap: .5rem; align-items: center; }
.transit-estimate #ttResult:empty { display: none; }
.transit-estimate #ttResult { margin-top: .6rem; }

/* Shop-by-color quick links */
.color-links { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.75rem 0 1rem; }
.color-links-label { font-weight:600; }
.color-chip { display:inline-block; padding:.35rem .8rem; border:1px solid #d9d9d9; border-radius:999px; text-decoration:none; color:#222; background:#fff; font-size:.92rem; }
.color-chip:hover { border-color:#888; }
.color-chip.active { background:#1f6feb; border-color:#1f6feb; color:#fff; }

/* Checkout address cards */
.addr-card { background:#fff; border:1px solid #e6e6e6; border-radius:10px; padding:1rem 1.25rem; margin-bottom:1rem; }
.addr-card h2 { margin:0 0 .75rem; font-size:1.1rem; }

/* Braintree Drop-in panel in the checkout summary column. The Drop-in styles its own
   iframes; this only frames it to match the address cards beside it. */
.pay-box { margin:1rem 0; }
.pay-box h2 { margin:0 0 .5rem; font-size:1.1rem; }
.pay-box #bt-dropin { min-height:6rem; }
.checkout-grid .fld { display:block; margin-bottom:.7rem; font-size:.9rem; font-weight:600; color:#333; }
.checkout-grid .fld .opt { font-weight:400; color:var(--muted); }   /* 4.83:1 - #888 was 3.5:1, failed WCAG 1.4.3 */
.checkout-grid .fld input, .checkout-grid .fld select, .checkout-grid .fld textarea {
    display:block; width:100%; margin-top:.25rem; padding:.55rem .65rem; border:1px solid #ccc; border-radius:7px;
    font-size:1rem; font-weight:400; box-sizing:border-box; background:#fff;
}
.checkout-grid .fld input:focus, .checkout-grid .fld select:focus, .checkout-grid .fld textarea:focus {
    outline:none; border-color:#1f6feb; box-shadow:0 0 0 3px rgba(31,111,235,.15);
}
.checkout-grid .fld-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.checkout-grid .fld-row-csz { grid-template-columns:2fr 1fr 1fr; }
.checkout-grid label.chk { display:flex; align-items:center; gap:.5rem; margin:.25rem 0 1rem; font-weight:600; }
.checkout-grid label.chk input { width:auto; }
@media (max-width:600px){ .checkout-grid .fld-row, .checkout-grid .fld-row-csz { grid-template-columns:1fr; } }

/* Admin dashboard health tiles */
.admin-stats { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.5rem; }
.stat-tile { flex: 1 1 150px; min-width: 150px; border: 1px solid var(--border); border-radius: 8px;
    padding: 0.8rem 1rem; background: #fff; text-decoration: none; color: inherit; display: block; }
a.stat-tile:hover { border-color: var(--brand); }
.stat-tile .stat-num { font-size: 1.6rem; font-weight: 700; color: var(--brand-dark); line-height: 1.1; }
.stat-tile .stat-label { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.stat-tile.bad { border-color: #dc2626; background: #fef2f2; }
.stat-tile.bad .stat-num { color: #dc2626; }
.stat-tile.warn { border-color: #d97706; background: #fffbeb; }
.stat-tile.warn .stat-num { color: #b45309; }

/* Orphaned-page tag + delete button (admin Pages list) */
.orphan-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; padding: 0 0.35rem; margin-left: 0.35rem; vertical-align: middle; }
.btn-danger { border-color: #dc2626 !important; color: #dc2626 !important; }
.btn-danger:hover { background: #fef2f2; }

/* ---- accessibility utilities ----
   .sr-only: text for screen readers only. The clip-rect + 1px box is the
   standard pattern; display:none / visibility:hidden would hide it from
   assistive tech too, which defeats the purpose. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip link: off-screen until focused, so only keyboard users ever see it.
   First focusable element on the page (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--brand); color: #fff; padding: 0.6rem 1rem;
    border-radius: 0 0 6px 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }   /* focus target only; the heading is the visual cue */

/* One visible focus indicator across the site (WCAG 2.4.7). :focus-visible is
   deliberate — it does NOT fire on mouse clicks, so the site looks unchanged to
   mouse users and only keyboard users get the ring. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--brand-dark); outline-offset: 2px; border-radius: 3px;
}
/* The variant radios are hidden with opacity:0, so the ring has to be drawn on
   the styled <span> that stands in for them. Without this the primary purchase
   control shows nothing at all when focused. */
.axis-option input:focus-visible + span { outline: 3px solid var(--brand-dark); outline-offset: 2px; }

/* <button> inherits neither font-family nor font-size, and brings its own border,
   background and padding. Each control below was a <label> or <img> before it needed
   keyboard support, so it needs the UA chrome stripped to stay pixel-identical.
   These rules sit AFTER the originals, so they must only neutralise what the original
   rule did NOT set — anything listed here overrides the styling above. */
.switcher-btn, .modal-close, .facet-more, .thumb-btn {
    font-family: inherit; border: none; cursor: pointer;
}
/* These three carried no background or padding as <label>s. .switcher-btn is excluded
   on purpose: it defines its own green background and 0.6rem/1.2rem padding above. */
.modal-close, .facet-more, .thumb-btn { background: none; padding: 0; }
/* .switcher-btn took its size from the surrounding text; .modal-close (1.6rem) and
   .facet-more (0.85rem) set their own font-size above and must keep it. */
.switcher-btn { font-size: inherit; }
/* Thumbnail wrapper: line-height:0 stops the inline-image gap from widening the
   0.5rem flex gap in .thumb-row. */
.thumb-btn { display: block; line-height: 0; }

/* Message shown when a cart link built by customer service is opened. */
.cart-flash {
    background: #f0f7f4;
    border-left: 4px solid #0f6e56;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
    border-radius: 4px;
}

/* Checkout: explanatory line under an input (PO / reference number).
   Uses --muted, which is the contrast-checked value the .opt rule already relies on. */
.checkout-grid .fld .fld-hint {
    display: block;
    font-weight: 400;
    font-size: .85rem;
    color: var(--muted);
    margin-top: .25rem;
}

/* ---- Product card: saving, entry price, option count (audit #22, #23) ----
   The card markup lives in Pages/Shared/_ProductCard.cshtml. */
.pc-media { position: relative; }
.pc-save {
    position: absolute; top: .5rem; left: .5rem;
    background: var(--brand-dark, #14422a); color: #fff;
    font-size: .74rem; font-weight: 700; letter-spacing: .01em;
    padding: .2rem .45rem; border-radius: 4px;
}
/* PDP variant of the save badge: same colors as .pc-save but flows inline with the
   price instead of overlaying media (audit N2). */
.pdp-save {
    display: inline-block; vertical-align: middle;
    background: var(--brand-dark, #14422a); color: #fff;
    font-size: .78rem; font-weight: 700; letter-spacing: .01em;
    padding: .2rem .5rem; border-radius: 4px; margin-left: .35rem;
}
/* "from" and the was-price are supporting detail: the price itself must stay dominant,
   so these step down in weight and size rather than competing with it. */
.product-card .pc-from { font-weight: 400; font-size: .8rem; color: var(--muted); }
.product-card .pc-now { font-weight: 700; }
.product-card .pc-was { font-weight: 400; font-size: .85rem; color: var(--muted); margin-left: .35rem; }
.product-card .pc-options { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); font-weight: 400; }
.product-card .pc-sku { margin: .15rem 0 0; font-size: .74rem; color: var(--muted); font-weight: 400; }
/* Sale gets the one warm accent in the nav — it's the only link promising money. */
.main-nav .nav-sale { color: #a32c22; font-weight: 700; }

/* ---- PDP tabs + spec table (audit #38, #33) ---- */
.pdp-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); margin-top: 1.5rem; }
.pdp-tabs [role="tab"] {
    border: none; background: none; padding: .6rem 1rem; font-size: 1rem; cursor: pointer;
    border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--text);
}
.pdp-tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--brand); font-weight: 600; }
.pdp-panel { padding-top: 1rem; }
/* When the tab bar is live, each panel's own heading duplicates the tab label —
   sr-only rather than removed, so screen-reader panel navigation keeps its landmark. */
#pdp-tabs:not([hidden]) ~ .pdp-panel .pdp-panel-h {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.spec-table { border-collapse: collapse; width: 100%; max-width: 34rem; font-size: .95rem; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table th { text-align: left; font-weight: 600; color: var(--muted); width: 42%; padding: .45rem .75rem .45rem 0; vertical-align: top; }
.spec-table td { padding: .45rem 0; }

/* ---- Notify me (three-way stock treatment) ---- */
.notify-wrap { margin: .75rem 0 0; padding: .8rem 1rem; background: #f8faf8; border: 1px solid var(--border); border-radius: 8px; max-width: 26rem; }
.notify-wrap p { margin: 0 0 .5rem; }
.notify-form { display: flex; gap: .5rem; }
.notify-form input[type="email"] { flex: 1; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; min-width: 0; }
.notify-form button { background: var(--brand); color: #fff; border: none; border-radius: 6px; padding: .55rem 1rem; cursor: pointer; white-space: nowrap; }

/* ---- Reviews (audit #35) ---- */
.stars { color: #b7791f; letter-spacing: .08em; }
.review-agg { display: flex; align-items: center; gap: .5rem; }
.review-agg-top { margin: -0.4rem 0 .6rem; font-size: .92rem; }
.review-agg-top a { color: var(--brand); }
.review-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.review { border-top: 1px solid var(--border); padding: .9rem 0; }
.review-head { margin: 0 0 .25rem; display: flex; gap: .6rem; align-items: baseline; }
.review-body { margin: 0 0 .3rem; max-width: 60ch; }
.review-meta { margin: 0; font-size: .82rem; color: var(--muted); }
.review-form { max-width: 34rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.review-form label { display: block; margin: .7rem 0; }
.review-form input[type="text"], .review-form textarea { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.review-rating { border: none; padding: 0; margin: 0 0 .4rem; }
.review-rating legend { font-weight: 600; }
.review-rating label { display: inline-flex; gap: .3rem; margin: 0 .9rem .3rem 0; }

/* ---- PDP cross-sell rows (audit #36) ---- */
.pdp-row { margin-top: 2.5rem; }
.pdp-row h2 { font-size: 1.2rem; }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.recent-card { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--text); font-size: .88rem; }
.recent-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.recent-card .recent-price { color: var(--muted); }
.recent-card:hover .recent-name { color: var(--brand-dark); text-decoration: underline; }

/* ---- Axis-option image tiles (audit #31) ---- */
.axis-option.has-thumb span { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 4.5rem; }
.axis-thumb { width: 56px; height: 56px; object-fit: contain; display: block; }

/* The collection grid styled its product name as h3; the shared card uses h2. */
.look-grid .product-card h2 { font-size: .9rem; margin: .4rem 0 .25rem; }

/* ---- Applied-filter chips (audit #13, #14) ----
   Markup: Pages/Shared/_FilterChips.cshtml */
.chip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.chip-bar-label { font-size: .82rem; color: var(--muted); margin-right: .1rem; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--brand-light, #eef5f1); color: var(--brand-dark, #14422a);
    border: 1px solid var(--border); border-radius: 999px;
    padding: .22rem .6rem; font-size: .84rem; text-decoration: none; line-height: 1.4;
}
.chip:hover { border-color: var(--brand); }
.chip:focus-visible { outline: 2px solid var(--brand-dark, #14422a); outline-offset: 2px; }
/* Not var(--muted): #6b7280 on the chip's tinted #eef5f1 background is 4.40:1 — just
   under WCAG's 4.5. This shade clears it (~5.1:1) and still reads as secondary. Caught
   by the axe scan the moment the query chip put a group label on a tinted chip; every
   shopper-applied filter chip had the same latent failure. */
.chip-group { color: #5f6975; font-size: .78rem; }
.chip-label { font-weight: 600; }
/* The site applied this one, not the shopper — muted so it reads as context rather than
   as something they chose, but still plainly removable. */
.chip-default { background: transparent; }
.chip-default .chip-label { font-weight: 400; }
.chip-tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.chip-x { font-size: 1rem; line-height: 1; opacity: .65; }
.chip:hover .chip-x { opacity: 1; }
.chip-clear { font-size: .82rem; margin-left: .3rem; }

/* ================= Mobile navigation and filter drawer (audit #01, #59) =================
   Everything here is additive and lives inside a media query or on an element that is
   display:none above the breakpoint. The desktop layout is deliberately untouched — the
   site is in production and the desktop experience is the one that currently works. */

/* Triggers: hidden on desktop, so the drawer JS can never fire there. */
.nav-burger, .filter-bar { display: none; }

.cart-count {
    display: inline-block; min-width: 1.25rem; padding: 0 .3rem; margin-left: .25rem;
    background: var(--brand-dark, #14422a); color: #fff; border-radius: 999px;
    font-size: .72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}

body.drawer-locked { overflow: hidden; }

.nav-backdrop, .facet-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40;
}

@media (max-width: 860px) {
    .nav-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.75rem; height: 2.75rem;          /* 44px: the minimum comfortable touch target */
        background: none; border: 1px solid var(--border); border-radius: 8px;
        cursor: pointer; padding: 0; flex: 0 0 auto;
    }
    .nav-burger:focus-visible { outline: 2px solid var(--brand-dark, #14422a); outline-offset: 2px; }
    .burger-bars, .burger-bars::before, .burger-bars::after {
        display: block; width: 1.25rem; height: 2px; background: var(--text, #1a1a1a); border-radius: 2px;
    }
    .burger-bars { position: relative; }
    .burger-bars::before, .burger-bars::after { content: ""; position: absolute; left: 0; }
    .burger-bars::before { top: -6px; }
    .burger-bars::after  { top: 6px; }

    .site-header { flex-wrap: wrap; gap: .5rem; }
    .site-header .site-search { order: 3; flex: 1 0 100%; }

    /* The nav becomes a panel rather than a row. Off-canvas by default so it takes no
       vertical space — before this it stacked into the header on every phone page. */
    .main-nav {
        position: fixed; top: 0; left: 0; bottom: 0; width: min(20rem, 84vw);
        z-index: 50; background: #fff; box-shadow: 2px 0 24px rgba(0,0,0,.18);
        display: block; overflow-y: auto; padding: 1rem .75rem 2rem;
        transform: translateX(-100%); transition: transform .18s ease-out;
    }
    .main-nav.drawer-open { transform: translateX(0); }
    @media (prefers-reduced-motion: reduce) { .main-nav { transition: none; } }

    .main-nav .nav-item { display: block; }
    .main-nav .nav-item > a, .main-nav .nav-cart, .main-nav .nav-account {
        display: block; margin-left: 0; padding: .7rem .6rem; border-radius: 6px;
    }
    /* Dropdowns are :hover-driven, which a touch device cannot do. In the drawer they are
       always open and indented instead — otherwise the third level is unreachable on a phone. */
    .main-nav .nav-dropdown {
        display: block; position: static; box-shadow: none; border: 0;
        padding: 0 0 .35rem .9rem; min-width: 0;
    }
    /* The mega panel flattens back to the plain indented list in the drawer — columns
       have no room on a phone, and the always-open list already shows every level. */
    .main-nav .nav-dropdown.mega,
    .main-nav .nav-item:hover .nav-dropdown.mega,
    .main-nav .nav-item:focus-within .nav-dropdown.mega { display: block; min-width: 0; }
    .main-nav .nav-dropdown a { padding: .5rem .6rem; font-size: .9rem; color: var(--muted); }
    .main-nav .mega-col { padding-bottom: .3rem; }
}

@media (min-width: 861px) {
    /* Belt and braces: if the drawer class were ever left on, desktop ignores it. */
    .main-nav.drawer-open { position: static; transform: none; box-shadow: none; }
    .nav-backdrop { display: none; }
}

/* ---- Category / search filter drawer (#59) ----
   Below 720px the facet sidebar used to stack above the grid, so a shopper scrolled past
   every facet before reaching product one. */
@media (max-width: 720px) {
    .filter-bar {
        display: flex; gap: .5rem; align-items: center;
        position: sticky; top: 0; z-index: 30;
        background: var(--bg, #fff); padding: .5rem 0; margin-bottom: .5rem;
        border-bottom: 1px solid var(--border);
    }
    .filter-bar button, .filter-bar .filter-sort {
        flex: 1 1 auto; min-height: 2.75rem; border: 1px solid var(--border);
        border-radius: 8px; background: #fff; font-size: .92rem; cursor: pointer;
    }
    .filter-bar .filter-count { font-weight: 700; }

    .facets {
        position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 90vw);
        z-index: 50; background: #fff; box-shadow: -2px 0 24px rgba(0,0,0,.18);
        overflow-y: auto; padding: 1rem 1rem 5rem;
        transform: translateX(100%); transition: transform .18s ease-out;
    }
    .facets.drawer-open { transform: translateX(0); }
    @media (prefers-reduced-motion: reduce) { .facets { transition: none; } }

    .facet-done {
        position: sticky; bottom: 0; display: block; width: 100%; min-height: 2.75rem;
        margin-top: 1rem; border: 0; border-radius: 8px;
        background: var(--brand-dark, #14422a); color: #fff; font-size: 1rem; cursor: pointer;
    }
}

@media (min-width: 721px) {
    .facet-done { display: none; }
    .facet-backdrop { display: none; }
}

/* ---- Value bar (audit #08) ----
   Slim, above the header, on every page. Deliberately quiet: it is a fact a shopper needs
   once, not a banner competing with the product. */
.value-bar {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem;
    background: var(--brand-dark, #14422a); color: #fff;
    font-size: .82rem; padding: .4rem 1rem; text-align: center;
}
.value-bar a { color: #fff; text-decoration: underline; }
.value-sep { opacity: .5; }
@media (max-width: 560px) {
    /* Phone: keep the shipping claim and the phone number, drop the origin — three items
       wrap to three lines and push the header off the screen. */
    .value-bar .value-item:nth-of-type(2), .value-bar .value-sep:first-of-type { display: none; }
}

.pdp-shipping { margin: .25rem 0 .75rem; font-size: .9rem; color: var(--brand-dark, #14422a); font-weight: 600; }

/* ---- Branded status pages (audit #52) ---- */
.error-page { max-width: 40rem; margin: 2rem auto 4rem; text-align: center; }
.error-lede { color: var(--muted); margin-bottom: 1.5rem; }
.error-search { margin: 0 0 2rem; }
.error-search label { display: block; font-weight: 600; margin-bottom: .4rem; }
.error-search-row { display: flex; gap: .5rem; }
.error-search-row input { flex: 1 1 auto; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px; }
.error-search-row button { padding: .6rem 1.1rem; border-radius: 8px; }
.error-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.error-cat {
    padding: .5rem .9rem; border: 1px solid var(--border); border-radius: 999px;
    text-decoration: none; color: var(--text); font-size: .92rem;
}
.error-cat:hover { border-color: var(--brand); background: #f2f8f5; }
.error-help { color: var(--muted); font-size: .92rem; }

/* ---- Card images: fit, don't crop (audit #26) ----
   object-fit: cover was cropping the top and bottom off a 12-foot tree and the ends off a
   9-foot garland — the two shapes that define this catalog. Contain on a white tile shows
   the whole product; the tile keeps the grid aligned. */
.product-card img { object-fit: contain; background: #fff; }

/* ---- Collapsible facet groups (audit #15) ---- */
details.facet > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
}
details.facet > summary::-webkit-details-marker { display: none; }
details.facet > summary h3 { margin: 0; }
details.facet > summary::after {
    content: "+"; font-size: 1.1rem; line-height: 1; color: var(--muted); margin-left: .5rem;
}
details.facet[open] > summary::after { content: "\2212"; }   /* minus */
details.facet > summary:focus-visible { outline: 2px solid var(--brand-dark, #14422a); outline-offset: 2px; }

/* ---- Numbered pagination (audit #18) ---- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1.5rem 0; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pager-page, .pager-step {
    display: inline-block; min-width: 2.25rem; padding: .4rem .6rem; text-align: center;
    border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text);
    font-size: .9rem;
}
.pager-page:hover, .pager-step:hover { border-color: var(--brand); }
.pager-page.current { background: var(--brand-dark, #14422a); color: #fff; border-color: var(--brand-dark, #14422a); font-weight: 700; }
.pager-gap { padding: 0 .2rem; color: var(--muted); }
.pager-size { margin-left: auto; font-size: .85rem; color: var(--muted); display: flex; gap: .35rem; align-items: center; }
.pager-size a, .pager-size-on { padding: .2rem .45rem; border-radius: 5px; }
.pager-size-on { background: var(--brand-dark, #14422a); color: #fff; font-weight: 700; }
@media (max-width: 560px) {
    .pager-size { margin-left: 0; width: 100%; }
}

/* ---- PDP buy row: quantity beside the button (audit #37) ---- */
.buy-row { display: flex; align-items: flex-end; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.qty-field { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; gap: .2rem; }
.qty-field input {
    width: 4.5rem; padding: .55rem .5rem; border: 1px solid var(--border); border-radius: 6px;
    font-size: 1rem; font-weight: 400;
}
.qty-field input:disabled { background: #f5f5f5; color: var(--muted); }
.buy-row #add-btn { flex: 1 1 12rem; }
.pdp-shipsby { font-weight: 400; color: var(--muted); font-size: .85rem; }
/* Series-video caption: quiet, but it has to be there — see Product.cshtml. */
.video-note { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }

/* ---- Inline "Also available as" switcher (audit #32) ----
   Was a modal. The .switcher-grid / .switcher-choice rules below replace the modal-scoped
   ones; the old .modal-* rules are left alone since the consent banner still uses them. */
.switcher-inline { margin: 0 0 1rem; }
.switcher-heading { font-size: .95rem; margin: 0 0 .5rem; font-weight: 600; }
.switcher-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.switcher-choice {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    width: 5.5rem; padding: .4rem; text-decoration: none; color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; font-size: .78rem; text-align: center;
}
.switcher-choice img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 4px; }
.switcher-choice:hover { border-color: var(--brand); }
.switcher-choice:focus-visible { outline: 2px solid var(--brand-dark, #14422a); outline-offset: 2px; }
.switcher-choice.current { border-color: var(--brand-dark, #14422a); border-width: 2px; font-weight: 700; }