/* * Copyright © 1996 - 2026 Gousse & Gousse Inc. or its Affiliates., All Rights Reserved. * author: Al D. Gousse * site: www.goussecorp.com * email: info@goussecorp.com * twitter: @goussecorp **/ /* Shared page-specific stylesheet for shop_list.html and shop_detail.html (Foundation for Sites migration, planning/frontend-framework.md). Covers only what Foundation's grid/card/button/menu utility classes can't do on their own — the shop-list-only bits (category toggle, breadcrumb/back- link resets, search/sort form resets) plus small page-level polish (heading treatment) — layered on top of brand.css, which now owns every shared storefront component (product cards, product-detail layout, category sidebar, and — as of this pass — the product image gallery too). Brand colors match the Foundation palette override in foundation-input.scss (#7a1620 primary / #c9a227 secondary) so these two pages look consistent with the rest of the migrated storefront. 2026-07 redesign note: `.product-card-noimg`/`-name`/`-price`/`-oos`/ `-link` used to be defined here too ("ported from the pre-Foundation rules in brand.css" per the original version of this comment) with fixed-height/no-clamp values that — since this file loads *after* brand.css in every template's — silently won the cascade and fought brand.css's redesigned card treatment (most seriously, `.product-card-name { display: block }` here overrode the `display: -webkit-box` brand.css's 2-line clamp depends on, breaking it outright). Removed here now that brand.css owns the single, current version of all five. 2026-07-21 consistency pass: the product-gallery/-thumb/-scroll/-zoom rules that used to live here too are gone for the exact same reason — brand.css had already been redesigned to own the same selectors with richer values (border-radius, box-shadow, and — importantly — `var(--crest-gold-border)` instead of the plain `--crest-gold` hex this file was hardcoding), but because this file loads after brand.css, this file's older plain-gold/no-radius versions were still silently winning the cascade and undoing that a11y-contrast fix on the gallery's scroll buttons and thumbnail borders. Same bug class as the `.product-card-name` one above; fixed the same way (delete the stale duplicate, let brand.css own it single-source). */ /* * Copyright © 1996 - 2026 Gousse & Gousse Inc. or its Affiliates., All Rights Reserved. * author: Al D. Gousse * site: www.goussecorp.com * email: info@goussecorp.com * twitter: @goussecorp **/ /* Category sidebar on the shop list page (shop_list.html): collapsed behind a plain JS-toggled button on small screens so products aren't pushed far below the fold by a long category list, but always fully visible on medium+ screens (Foundation's 640px breakpoint) where it sits beside the product grid rather than above it. Plain class toggle rather than native
- Chromium's UA styling for closed
content couldn't be reliably overridden with an author stylesheet. */ .shop-category-toggle { display: none; } @media (max-width: 39.9375em) { /* Typography/border brought in line with the rest of the redesign's small-uppercase-letter-spaced control convention (.brand-dept-trigger, .shop-category-aside h2) — this toggle used to be a plain bold label with a generic `#ccc` border-bottom, an off-palette gray that didn't belong anywhere else on either page and (being a "just text," not a component brand.css already themes) never got swept into the gold palette when everything around it was. */ .shop-category-toggle { display: block; width: 100%; cursor: pointer; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; padding: 0.6rem 0; background: none; border: none; border-bottom: 1px solid var(--crest-gold-border); text-align: left; color: var(--crest-ink, #2a1a12); } .shop-category-toggle:focus { outline: 2px solid var(--crest-red-dark); outline-offset: 2px; } .shop-category-body { display: none; } .shop-category-body.is-open { display: block; } /* `.shop-category-aside`'s `position: sticky` (brand.css) is a desktop nicety -- keeps the category card in view while a shopper scrolls a tall product grid next to it. On a phone the aside sits collapsed above the grid rather than beside it, so "sticky" would just pin a toggle bar mid-scroll for no benefit; turned off below the same breakpoint the collapse behavior already uses. */ .shop-category-aside { position: static; padding: 0.75rem 1rem; } } /* Medium+ (Foundation's own breakpoint, matching the max-width above): the sidebar used to be a fixed Foundation `medium-3` column (25% of the row) regardless of content, leaving a lot of dead space next to short names like "Shoes" while every longer one (e.g. "Sporting Goods & Outdoors") still had to fit inside that same fixed slice. `fit-content` -- together with `white-space: nowrap` on the department links (brand.css) and the `3ch` card padding (brand.css) -- sizes the sidebar to exactly what its longest name needs and no more. The product grid (the `
` immediately after it in shop_list.html) picks up the width the sidebar gives back. Selectors need the `.grid-x >` prefix -- Foundation's own grid classes are `.grid-x>.medium-3{width:25%}`/`.grid-x>.medium-9{...}` (two classes, 0,2,0 specificity), which otherwise wins over a plain `.shop-category- aside`/`main` selector (0,1,0 / 0,1,1) regardless of load order, since specificity is compared before source order. Confirmed live: without this prefix the sidebar stayed pinned at its old fixed width. */ @media (min-width: 40em) { .grid-x > .shop-category-aside { flex: 0 0 auto; width: fit-content; min-width: 10rem; /* Flush with the true left edge -- `.brand-page .grid-container` is deliberately full-bleed (max-width:100%, see brand.css), so `margin-left: 0` here lands exactly at the viewport edge. (A prior pass tried shifting 24px past Foundation's normal 15px gutter via `margin-left: -9px`, which overshot past the edge entirely -- confirmed live, `getBoundingClientRect().x` was -9, not 0. Zero is the actual flush position.) */ margin-left: 0; } /* `flex-basis: 0` (not `auto`), matching Foundation's own `.cell.auto {flex:1 1 0}` convention -- with `auto` here, this element's hypo- thetical flex-basis resolved to its own huge intrinsic content width (the product grid), which was wider than the row had left next to the sidebar and forced a wrap onto a new line below it entirely, instead of sharing the row. `flex-basis: 0` makes flex-grow alone decide the final width from available space, ignoring content size. */ .grid-x > .shop-category-aside + main { flex: 1 1 0%; width: auto; max-width: none; } } /* style.css's generic `nav, p:has(> a) { background, border, padding }` rule (written to turn a "

...

" byline into a toolbar pill) also matches the breadcrumb