/* Archetypes — the structure a design gives the shop (includes/class-archetypes.php).

   One class per piece on <body>: ef-arch-header-<kind>, ef-arch-shop-<kind>, ef-arch-product-<kind>,
   ef-arch-footer-<kind>, plus ef-arch-<archetype>. Every rule here is keyed off one of those, reads
   tokens only (never a literal colour), and works in both colour schemes for free. `inline`, `sidebar`,
   `standard` and `columns` are the shop as it always was and have no rules: the absence of a rule is
   the classic archetype. */

/* ---- header: stacked — the logo centred on its own row, the menu under it ---- */
body.ef-arch-header-stacked .ef-header-inner { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
body.ef-arch-header-stacked .ef-logo { flex: 0 0 100%; justify-content: center; }
body.ef-arch-header-stacked .ef-logo-text { max-width: 70vw; }
body.ef-arch-header-stacked .ef-nav { order: 2; flex: 1 1 auto; justify-content: center; }
body.ef-arch-header-stacked .ef-header-actions { order: 3; }
@media (min-width: 961px) {
	body.ef-arch-header-stacked .ef-header-inner { padding-top: calc(var(--ef-header-pad, 12px) + 8px); }
	body.ef-arch-header-stacked .ef-nav-list a { letter-spacing: 0.04em; }
}

/* ---- header: minimal — a burger at every width, the menu a drawer ---- */
@media (min-width: 961px) {
	body.ef-arch-header-minimal .ef-header-inner { flex-wrap: wrap; }
	body.ef-arch-header-minimal .ef-menu-toggle { display: grid; gap: 5px; width: 42px; height: 42px; place-content: center; border: 0; background: transparent; cursor: pointer; order: -1; }
	body.ef-arch-header-minimal .ef-menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ef-text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
	body.ef-arch-header-minimal .ef-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.ef-arch-header-minimal .ef-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	body.ef-arch-header-minimal .ef-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	body.ef-arch-header-minimal.ef-header-dark .ef-menu-toggle span { background: var(--ef-inverse-text); }
	body.ef-arch-header-minimal .ef-logo { flex: 1 1 auto; }
	body.ef-arch-header-minimal .ef-nav { display: none; flex-basis: 100%; padding: 8px 0 16px; border-top: 1px solid var(--ef-hairline); }
	body.ef-arch-header-minimal .ef-nav.is-open { display: block; }
	body.ef-arch-header-minimal .ef-nav-list { flex-direction: column; gap: 0; max-width: 360px; }
	body.ef-arch-header-minimal .ef-nav-list a { padding: 12px 8px; }
	body.ef-arch-header-minimal .ef-nav-list .sub-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 16px; transform: none; }
}

/* ---- header: search — the field is the middle of the header, the menu a category strip below ---- */
body.ef-arch-header-search .ef-header-inner { flex-wrap: wrap; }
body.ef-arch-header-search .ef-header-actions { flex: 1 1 auto; justify-content: flex-end; }
body.ef-arch-header-search .ef-search { flex: 1 1 320px; max-width: 640px; }
body.ef-arch-header-search .ef-search input, body.ef-arch-header-search .ef-search input:focus { width: 100%; }
@media (min-width: 961px) {
	body.ef-arch-header-search .ef-nav { order: 10; flex: 0 0 100%; justify-content: flex-start; border-top: 1px solid var(--ef-hairline); padding-top: 4px; margin-top: 2px; }
	body.ef-arch-header-search .ef-nav-list { justify-content: flex-start; }
	body.ef-arch-header-search .ef-nav-list a { font-size: 0.9em; }
}

/* ---- the utility line (stacked and utility headers): phone, email, hours from Store information ---- */
.ef-header-utility { font-size: 0.8rem; background: var(--ef-surface); color: var(--ef-muted); border-bottom: 1px solid var(--ef-hairline); }
.ef-header-utility .ef-container { display: flex; gap: 6px 22px; flex-wrap: wrap; justify-content: flex-end; padding: 6px 0; }
.ef-header-utility a, .ef-header-utility > .ef-container > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ef-header-utility svg { color: var(--ef-primary); }
body.ef-arch-header-stacked .ef-header-utility .ef-container { justify-content: center; }
@media (max-width: 720px) { .ef-header-utility { display: none; } }

/* The grid's column count. The shop's own `ul.products.ef-shop-grid` carries the owner's count as an
   inline `--ef-cols` (class-storefront-mode.php), which no stylesheet variable can outrank — so an
   archetype that means a different grid says so as `grid-template-columns` itself, at a specificity above
   the base rule's, with its own steps down for narrower windows. An archetype is a different shop; the
   per-row setting still governs the classic one. */

/* ---- shop: gallery — two tall photographs a row, no filters, room between them ---- */
body.ef-arch-shop-gallery.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
@media (max-width: 720px) { body.ef-arch-shop-gallery.ef-storefront ul.products.ef-shop-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---- shop: airy — three a row, wide gutters ---- */
body.ef-arch-shop-airy.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
@media (max-width: 1024px) { body.ef-arch-shop-airy.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.ef-arch-shop-airy.ef-storefront ul.products.ef-shop-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- shop: topbar — the filters as a bar above a dense grid ---- */
body.ef-arch-shop-topbar.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 16px; }
@media (max-width: 1200px) { body.ef-arch-shop-topbar.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) { body.ef-arch-shop-topbar.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { body.ef-arch-shop-topbar.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ef-shop--topbar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ef-shop--topbar .ef-shop-top { display: grid; gap: 12px; }
.ef-shop--topbar .ef-shop-title { margin: 0; }
.ef-shop--topbar .ef-shop-intro { max-width: 70ch; }
.ef-shop--topbar .ef-filter { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; padding: 14px 18px; }
.ef-shop--topbar .ef-filter > * { margin: 0; }
.ef-shop--topbar .ef-filter .ef-filter-head { flex: 0 0 100%; }
/* Each group's list runs along the bar rather than down it: a bar of columns is a sidebar lying down. */
.ef-shop--topbar .ef-filter ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; }
.ef-shop--topbar .ef-filter ul li { margin: 0; }
@media (max-width: 720px) { .ef-shop--topbar .ef-filter { display: block; } }

/* ---- shop: list — the filter panel beside one product a row (the card kind `row` lays the card out) ---- */
body.ef-arch-shop-list.ef-storefront ul.products.ef-shop-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* ---- shop: mosaic — three columns, every sixth photograph double-size, no filters. The rows are a fixed
   height so a spanned cell is exactly two rows and a gap, and the photo fills whatever cell it was given. ---- */
body.ef-arch-shop-mosaic.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 24vw, 340px); grid-auto-flow: dense; gap: 12px; }
body.ef-arch-shop-mosaic.ef-storefront ul.products.ef-shop-grid > li:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 720px) { body.ef-arch-shop-mosaic.ef-storefront ul.products.ef-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 44vw, 300px); } }
body.ef-arch-shop-mosaic.ef-storefront ul.products.ef-shop-grid .ef-card { height: 100%; }
body.ef-arch-shop-mosaic.ef-storefront ul.products.ef-shop-grid .ef-card .ef-card-media { aspect-ratio: auto; height: 100%; flex: 1 1 auto; min-height: 0; width: 100%; }

/* ---- product: sticky — a wider gallery, the buy box stays put while the page scrolls ---- */
@media (min-width: 901px) {
	body.ef-arch-product-sticky.ef-storefront div.product { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
	body.ef-arch-product-sticky.ef-storefront div.product .entry-summary { position: sticky; top: calc(var(--ef-header-h, 76px) + 20px); }
}

/* ---- product: stacked — the gallery full width, the details under it ---- */
body.ef-arch-product-stacked.ef-storefront div.product { grid-template-columns: minmax(0, 1fr); }
/* Every piece in the one column. woocommerce.css puts each child of the product in column 2 (the summary beside the
   gallery); left there, the summary made an implicit second column that took the width, and the tabs — the review
   form with them — were squeezed into what was left: a 54px review box on Studio (the owner, 2026-09-29). */
body.ef-arch-product-stacked.ef-storefront div.product > * { grid-column: 1; grid-row: auto; }
body.ef-arch-product-stacked.ef-storefront div.product .entry-summary { max-width: 720px; width: 100%; margin-inline: auto; }

/* ---- product: dense — the summary boxed as a buy panel ---- */
body.ef-arch-product-dense.ef-storefront div.product .entry-summary { background: var(--ef-surface); border: 1px solid var(--ef-hairline); border-radius: var(--ef-radius, 16px); padding: 24px; }

/* ---- footer: minimal — one line ---- */
.ef-footer--minimal { padding-top: 28px; }
.ef-footer--minimal .ef-footer-bottom { border-top: 0; padding-top: 0; align-items: center; }
.ef-footer--minimal .ef-footer-brandline { margin: 0; font-family: var(--ef-font-heading); font-weight: 700; color: var(--ef-text); }

/* ---- footer: compact — three columns, no newsletter band ---- */
body.ef-arch-footer-compact .ef-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 720px) { body.ef-arch-footer-compact .ef-footer-grid { grid-template-columns: 1fr; } }

/* ---- footer: contact — the brand column is the store's own card ---- */
body.ef-arch-footer-contact .ef-footer-brand { background: var(--ef-background); border: 1px solid var(--ef-hairline); border-radius: var(--ef-radius, 16px); padding: 22px; }
body.ef-arch-footer-contact .ef-footer-contact { font-size: 0.95rem; color: var(--ef-text); }

/* ---- card: the product card each archetype draws — the fifth piece. One markup (helpers.php), six layouts. ---- */

/* minimal — no plate: the photograph, a light name and the price; the buttons arrive on hover or focus, and are
   always there on a touch screen, where there is no hover to arrive on. The keyboard order is untouched: the
   buttons are faded, not removed, and focus-within brings them back before the focus ring is drawn. */
body.ef-arch-card-minimal .ef-card, body.ef-arch-card-minimal.ef-card-border .ef-card, body.ef-arch-card-minimal.ef-card-surface .ef-card { background: transparent; border: 0; padding: 0; border-radius: 0; }
body.ef-arch-card-minimal .ef-card .ef-card-media { border-radius: 0; }
body.ef-arch-card-minimal .ef-card-title { font-weight: 400; }
body.ef-arch-card-minimal .ef-card-actions { opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; }
body.ef-arch-card-minimal .ef-card:hover .ef-card-actions, body.ef-arch-card-minimal .ef-card:focus-within .ef-card-actions { opacity: 1; transform: none; }
@media (hover: none) { body.ef-arch-card-minimal .ef-card-actions { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.ef-arch-card-minimal .ef-card-actions { transition: none; transform: none; } }

/* compact — the market's card: a tight body, a big price in the primary ink, small buttons */
body.ef-arch-card-compact .ef-card-body, body.ef-arch-card-compact.ef-card-border .ef-card .ef-card-body { padding: 8px 2px 2px; gap: 3px; }
body.ef-arch-card-compact .ef-card-title { font-size: calc(0.92rem * var(--ef-card-title, 1)); min-height: 2.4em; font-weight: 500; }
body.ef-arch-card-compact .ef-card .ef-price { font-size: calc(1.2rem * var(--ef-card-price, 1)); color: var(--ef-primary-ink, var(--ef-text)); }
body.ef-arch-card-compact .ef-card-actions .ef-btn { padding: 8px 6px; font-size: 0.78rem; }

/* overlay — the studio's card: the words stand on the photograph's foot over a scrim, so the grid reads as
   photographs first. The photo is forced tall so there is room under the words; the inks are the inverse
   set, which is what sits on a dark scrim in either scheme. */
body.ef-arch-card-overlay .ef-card { position: relative; }
body.ef-arch-card-overlay .ef-card .ef-card-media { width: 100%; aspect-ratio: 4 / 5; }
body.ef-arch-card-overlay .ef-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; gap: 4px; color: var(--ef-inverse-text, #fff); background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); border-radius: 0 0 var(--ef-radius, 16px) var(--ef-radius, 16px); }
body.ef-arch-card-overlay.ef-card-border .ef-card-body { left: var(--ef-card-pad, 10px); right: var(--ef-card-pad, 10px); bottom: var(--ef-card-pad, 10px); }
body.ef-arch-card-overlay .ef-card-title { min-height: 0; color: inherit; }
body.ef-arch-card-overlay .ef-card-desc, body.ef-arch-card-overlay .ef-card-stock, body.ef-arch-card-overlay .ef-card-rating, body.ef-arch-card-overlay .ef-card-rating .ef-review-count { color: inherit; opacity: 0.85; }
body.ef-arch-card-overlay .ef-card .ef-price { color: inherit; }
body.ef-arch-card-overlay .ef-card-actions .ef-btn-view { color: inherit; border-color: currentColor; }
body.ef-arch-card-overlay .ef-card-actions .ef-btn-view:hover { background: var(--ef-inverse-text, #fff); color: var(--ef-text, #222); }

/* poster — the pantry's card: a tall photograph, the price pinned to its corner as a tag, the name centred
   under it in small capitals */
body.ef-arch-card-poster .ef-card { position: relative; }
body.ef-arch-card-poster .ef-card .ef-card-media { aspect-ratio: 3 / 4; }
body.ef-arch-card-poster .ef-card .ef-price { position: absolute; top: 12px; right: 12px; margin: 0; padding: 6px 10px; background: var(--ef-background, #fff); color: var(--ef-text, #222); border-radius: 999px; font-size: 0.9rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
body.ef-arch-card-poster.ef-card-border .ef-card .ef-price { top: calc(12px + var(--ef-card-pad, 10px)); right: calc(12px + var(--ef-card-pad, 10px)); }
/* The wishlist heart owns the photo's top-right corner (storefront.css), so a poster card that has one hangs its
   price pill just under it rather than beneath it. */
body.ef-arch-card-poster .ef-card:has(.ef-wish) .ef-price { top: 50px; }
body.ef-arch-card-poster.ef-card-border .ef-card:has(.ef-wish) .ef-price { top: calc(50px + var(--ef-card-pad, 10px)); }
body.ef-arch-card-poster .ef-card-body { align-items: center; text-align: center; }
body.ef-arch-card-poster .ef-card-title { font-size: calc(0.85rem * var(--ef-card-title, 1)); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; min-height: 2.2em; }
body.ef-arch-card-poster .ef-card-actions { width: 100%; }

/* caption — the journal's card: a caption line under the photograph — the name in the heading face, the
   price beside it — and the buttons as plain text links. The body is a two-column grid and the pieces are
   ordered into it; the markup order, which is what a keyboard walks, is not touched. */
body.ef-arch-card-caption .ef-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 4px; }
body.ef-arch-card-caption .ef-card-rating, body.ef-arch-card-caption .ef-card-desc, body.ef-arch-card-caption .ef-card-stock, body.ef-arch-card-caption .ef-card-actions { grid-column: 1 / -1; }
body.ef-arch-card-caption .ef-card-rating { order: 0; }
body.ef-arch-card-caption .ef-card-title { order: 1; grid-column: 1; font-family: var(--ef-font-heading, inherit); font-weight: 500; font-size: calc(1.05rem * var(--ef-card-title, 1)); min-height: 0; }
body.ef-arch-card-caption .ef-card .ef-price { order: 2; grid-column: 2; font-weight: 500; }
body.ef-arch-card-caption .ef-card-desc { order: 3; margin: 0; }
body.ef-arch-card-caption .ef-card-stock { order: 4; }
body.ef-arch-card-caption .ef-card-actions { order: 5; display: flex; gap: 16px; padding-top: 2px; margin-top: auto; }
body.ef-arch-card-caption .ef-card-actions .ef-btn { background: transparent; border-color: transparent; color: var(--ef-text, #222); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
body.ef-arch-card-caption .ef-card-actions .ef-btn:hover { background: transparent; border-color: transparent; color: var(--ef-primary-ink, var(--ef-primary)); }
body.ef-arch-card-caption .ef-card-actions .ef-btn-add.is-disabled { background: transparent; border-color: transparent; text-decoration: none; }

/* row — the catalogue's card: the photograph beside the words, one product a row, the buttons at their own
   width. Under 600px it stacks back into a column. The row is the *list's* card — in the product list
   (the shop, a category, a search), where one product a row is the point; a home-page grid of four
   columns keeps the standard card, which is what a row would be in a column that narrow. On the archive a
   body-class rule was not enough: the list item computed `display: flex` with these grid columns already
   applied (measured in the browser, not assumed), so the grid is said at the list item's own weight. */
body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card { display: grid; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); gap: 20px; align-items: start; }
body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card .ef-card-media { aspect-ratio: 4 / 3; width: 100%; }
body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card .ef-card-body { padding: 6px 12px 6px 0; gap: 8px; }
body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card .ef-card-title { min-height: 0; font-size: calc(1.15rem * var(--ef-card-title, 1)); }
body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card .ef-card-actions { grid-template-columns: max-content max-content; margin-top: 4px; }
@media (max-width: 600px) {
	body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card { grid-template-columns: minmax(0, 1fr); }
	body.ef-arch-card-row.ef-storefront ul.products li.product.ef-card .ef-card-body { padding: 8px 0 0; }
}

/* tile — the showcase's card: a small plate with the name and the price on the photograph's foot; the
   buttons unfold from the plate on hover or focus (and are always out where there is no hover). The plate
   is the card's own ground so it reads in either scheme; the photo fills the whole card. */
body.ef-arch-card-tile .ef-card { position: relative; }
body.ef-arch-card-tile .ef-card-body { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 12px; gap: 2px; flex: 0 0 auto; background: var(--ef-background, #fff); color: var(--ef-text, #222); border-radius: calc(var(--ef-radius, 16px) / 2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); }
body.ef-arch-card-tile.ef-card-border .ef-card-body { left: calc(12px + var(--ef-card-pad, 10px)); bottom: calc(12px + var(--ef-card-pad, 10px)); padding: 10px 12px; }
body.ef-arch-card-tile .ef-card-title { min-height: 0; font-size: calc(0.95rem * var(--ef-card-title, 1)); -webkit-line-clamp: 2; }
body.ef-arch-card-tile .ef-card-desc { display: none; }
body.ef-arch-card-tile .ef-card-actions { max-height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0; transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease; }
body.ef-arch-card-tile .ef-card:hover .ef-card-actions, body.ef-arch-card-tile .ef-card:focus-within .ef-card-actions { max-height: 80px; opacity: 1; padding-top: 8px; }
@media (hover: none) { body.ef-arch-card-tile .ef-card-actions { max-height: 80px; opacity: 1; padding-top: 8px; } }
@media (prefers-reduced-motion: reduce) { body.ef-arch-card-tile .ef-card-actions { transition: none; } }
/* A round card (the capsule look, on the card or its photo) is cut to an oval, and the plate's corner place
   falls outside it: the owner saw Cursive's prices lose their first figures. On a round card the plate sits
   centred and lifted, where the oval is still wide enough to hold it (at 14% up an oval is ~70% wide). */
body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-card-body { left: 50%; right: auto; bottom: 14%; transform: translateX(-50%); max-width: 62%; width: max-content; align-items: center; text-align: center; }
/* The plate stays small enough for a phone's two-up circles (~170px): one line of name, the prices side by
   side, and the badge and the heart moved in from the corners the circle cuts away. */
body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-card-title { display: block; min-height: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-price { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: baseline; column-gap: 6px; }
body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-badge { top: 16%; left: 16%; }
body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-wish { top: 16%; right: 16%; }
@media (max-width: 600px) {
	body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-card-body { bottom: 16%; max-width: 64%; padding: 6px 10px; }
	body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-card-title { font-size: calc(0.82rem * var(--ef-card-title, 1)); }
	body.ef-arch-card-tile:is(.ef-v-card-capsule, .ef-v-card-media-capsule) .ef-card .ef-price { font-size: 0.85em; }
}

/* Round cards in every other layout. The capsule look cuts a card (or its photo) to a pill, whose round ends
   take the corners away — the badge and the heart at the top, the price's start and the Add/View buttons at the
   foot. Everything in a corner is moved in by a share of the card's *width* (a margin's percentage is of the
   width, which is what a round end's radius is: half of it). Row cards are pills lying down: their ends are
   left and right, so only the heart needs moving. Tested in e2e/storefront.spec.js, layout by layout. */
body:is(.ef-v-card-capsule, .ef-v-card-media-capsule):not(.ef-arch-card-tile) .ef-card .ef-badge { top: 0; left: 0; margin: 18% 0 0 18%; }
body.ef-v-card-capsule:not(.ef-arch-card-tile):not(.ef-arch-card-row) .ef-card .ef-wish { top: 0; right: 0; margin: 18% 18% 0 0; }
body.ef-v-card-capsule.ef-v-card-capsule.ef-v-card-capsule:not(.ef-arch-card-tile):not(.ef-arch-card-row):not(.ef-arch-card-overlay) .ef-card.ef-card { padding-bottom: 16%; }
body.ef-v-card-capsule:not(.ef-arch-card-tile):not(.ef-arch-card-row) .ef-card .ef-card-actions { max-width: 72%; margin-inline: auto; justify-content: center; }
body.ef-v-card-capsule:not(.ef-arch-card-tile):not(.ef-arch-card-row) .ef-card .ef-price { justify-content: center; text-align: center; width: fit-content; max-width: 100%; margin-inline: auto; padding-inline: 14px; }
body.ef-v-card-capsule.ef-arch-card-overlay .ef-card .ef-card-body { padding-inline: 14%; padding-bottom: 16%; text-align: center; }
body.ef-v-card-capsule.ef-arch-card-row .ef-card .ef-wish { top: 0; right: 0; margin: 36px 36px 0 0; }
body.ef-v-card-capsule.ef-arch-card-row .ef-card .ef-card-body { padding-inline-end: 56px; }
/* A poster's price chip sits on the photo's top corner, where the heart now is: on a round card it goes back
   into the card's text, centred under the name. */
body.ef-arch-card-poster.ef-v-card-capsule .ef-card.ef-card .ef-price.ef-price { position: static; margin: 4px auto 0; box-shadow: none; }
/* A caption card sets the price at the name's right end, in the corner a round card cuts: under the name there. */
body.ef-arch-card-caption.ef-v-card-capsule .ef-card .ef-card-title, body.ef-arch-card-caption.ef-v-card-capsule .ef-card .ef-price { grid-column: 1 / -1; text-align: center; }
body.ef-arch-card-caption.ef-v-card-capsule .ef-card .ef-card-actions { justify-content: center; }
/* On a phone a row card stands up (see the row rules above), so it takes the upright round card's rules. */
@media (max-width: 600px) {
	body.ef-v-card-capsule.ef-v-card-capsule.ef-v-card-capsule.ef-arch-card-row .ef-card.ef-card { padding-bottom: 16%; }
	body.ef-v-card-capsule.ef-arch-card-row .ef-card .ef-wish { margin: 18% 18% 0 0; }
	body.ef-v-card-capsule.ef-arch-card-row .ef-card .ef-card-body { padding-inline-end: 0; }
	body.ef-v-card-capsule.ef-arch-card-row .ef-card .ef-card-actions { max-width: 72%; margin-inline: auto; justify-content: center; }
	body.ef-v-card-capsule.ef-arch-card-row .ef-card .ef-price { justify-content: center; text-align: center; }
}

/* ---- shop: rail — the categories alone, as a sticky rail beside the grid. The panel's own plate and its
   look are set aside: a rail is a list, not a form. ---- */
body.ef-arch-shop-rail .ef-shop--rail { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
body.ef-arch-shop-rail.ef-storefront .ef-shop-side .ef-filter.ef-filter--cats { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
body.ef-arch-shop-rail .ef-shop-side { position: sticky; top: calc(var(--ef-header-h, 76px) + 16px); }
body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-title { margin: 0 0 6px; padding: 0 10px; }
body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-cats li { margin: 0; }
body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-cats li a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--ef-radius, 12px); color: var(--ef-text); text-decoration: none; }
body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-cats li a:hover { background: var(--ef-surface); }
body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-cats li.is-current a { background: var(--ef-surface); font-weight: 700; box-shadow: inset 3px 0 0 var(--ef-primary); }
body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-count { color: var(--ef-muted); font-size: 0.85em; }
@media (max-width: 960px) { body.ef-arch-shop-rail .ef-shop--rail { grid-template-columns: minmax(0, 1fr); gap: 16px; } body.ef-arch-shop-rail .ef-shop--rail .ef-shop-side { order: 0; } body.ef-arch-shop-rail .ef-shop-side { position: static; } body.ef-arch-shop-rail.ef-storefront .ef-filter--cats .ef-filter-cats { display: flex; flex-wrap: wrap; gap: 6px; } }

/* ---- header: mega — a row of category tiles under the header ---- */
.ef-mega { background: var(--ef-background); border-top: 1px solid var(--ef-hairline); border-bottom: 1px solid var(--ef-hairline); }
.ef-mega-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 10px var(--ef-gutter, 16px); overflow-x: auto; scrollbar-width: thin; }
.ef-mega-list li { margin: 0; flex: 0 0 auto; }
.ef-mega a { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--ef-hairline); border-radius: var(--ef-radius, 12px); color: var(--ef-text); text-decoration: none; white-space: nowrap; background: var(--ef-background); }
.ef-mega a:hover { border-color: var(--ef-primary); background: var(--ef-surface); }
.ef-mega img { width: 40px; height: 40px; object-fit: cover; border-radius: calc(var(--ef-radius, 12px) * 0.6); }
.ef-mega-name { font-weight: 600; }
.ef-mega-count { color: var(--ef-muted); font-size: 0.8rem; }
@media (max-width: 720px) { .ef-mega { display: none; } }

/* ---- product: bar — the buy bar at the foot of the window while the real form is out of view ---- */
.ef-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ef-background); border-top: 1px solid var(--ef-hairline); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08); padding: 10px 0; }
.ef-buybar[hidden] { display: none; }
.ef-buybar-inner { display: flex; align-items: center; gap: 16px; }
.ef-buybar-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ef-buybar-price { font-weight: 700; white-space: nowrap; }
.ef-buybar-price del { color: var(--ef-muted); font-weight: 400; margin-right: 6px; }
.ef-buybar-price ins { text-decoration: none; }
body.ef-arch-product-bar.single-product .ef-footer-wrap { padding-bottom: 64px; }
@media (max-width: 560px) { .ef-buybar-name { display: none; } .ef-buybar-inner { justify-content: space-between; } }

/* ---- card: stepper — a −/+ quantity beside Add ---- */
/* The stepper takes a row of its own above the two buttons: beside them it left Add a sliver at four a
   row on a 1280px window (the smoke walk measured 23px), and a button a finger cannot hit is no button. */
body.ef-arch-card-stepper .ef-card-actions.has-qty { grid-template-columns: 1fr 1fr; align-items: stretch; row-gap: 6px; }
body.ef-arch-card-stepper .ef-card-actions.has-qty .ef-card-qty { grid-column: 1 / -1; justify-self: start; }
.ef-card-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ef-hairline-strong, var(--ef-hairline)); border-radius: var(--ef-btn-radius, 999px); overflow: hidden; }
.ef-card-qty .ef-qty-btn { border: 0; background: var(--ef-surface); color: var(--ef-text); width: 30px; cursor: pointer; font-size: 1rem; line-height: 1; }
.ef-card-qty .ef-qty-btn:hover { background: var(--ef-primary); color: var(--ef-on-primary, var(--ef-text)); }
.ef-card-qty .ef-qty-input { width: 36px; border: 0; text-align: center; font: inherit; font-size: 0.9rem; padding: 0; background: var(--ef-background); color: var(--ef-text); -moz-appearance: textfield; }
.ef-card-qty .ef-qty-input::-webkit-outer-spin-button, .ef-card-qty .ef-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }