@import url("/alda-assets/palette.css?v=a707ab62");
/* geist-switch 2026-10-17: font and weights mapped by scratchpad/switch-to-geist.py */
@import url("/alda-assets/site-nav.css?v=c90b9e62");
@import url("/alda-assets/site.css?v=d2fa3d0e");
/* Alda commerce surfaces - composed against the site's own theme.
   Cream var(--alda-paper) / ink var(--alda-ink) / brand red var(--alda-red), Geist from the main bundle. */

/* Every price comes from Shopify, always (the owner, 2026-11-04). A figure the page was built with stays hidden until
   commerce.js has drawn Shopify's and set html.alda-priced (applyLive); if Shopify never answers, the spots stay
   empty. visibility, not display, so the space is kept and nothing moves when the prices come in. The price markup
   (.pr, site_parts.price_html / aldaPrice.node) and its % off, the product page's own figures (pdp.js data-lab-*),
   the cart's total, the knife compare table, the homepage compare tool and product panels, the menus' prices. */
html:not(.alda-priced) :is(.pr, .pr-off, .pc-off, .pa-price, .ac-price, .ac-bb-price, [data-lab-price], [data-lab-mrp],
  [data-lab-was], [data-lab-off], .pl-dock-pr, .pm-price, .ac-sum, .v2-compare-price, .v2-compare-size,
  .product-panel .price, a.mn-sub .t, .sn-thumb-price) { visibility: hidden; }

:root {
  --ac-bg: var(--alda-paper);
  --ac-ink: var(--alda-ink);
  --ac-muted: var(--alda-muted);
  --ac-line: rgba(34, 34, 34, 0.16);
  --ac-line-soft: rgba(34, 34, 34, 0.08);
  --ac-red: var(--alda-red);
  --ac-panel: var(--alda-paper);
  --ac-gut: 2em;      /* the 12-column gutter every PDP section shares */
}

/* ---------- shared page chrome (PDP / PLP pages only) ---------- */
.ac-page { background: var(--ac-bg); color: var(--ac-ink); font-family: Geist, Arial, sans-serif; min-height: 100vh; }
.ac-page * { box-sizing: border-box; }
.ac-wrap { max-width: 1240px; margin: 0 auto; padding: 0 2em; }
.ac-header { display: flex; align-items: center; justify-content: space-between; padding: 1.6em 0 1.4em; }
.ac-header .ac-logo img { height: 2.2em; display: block; }
.ac-nav { display: flex; gap: 0.5em; align-items: center; }
.ac-navlink { font-size: 0.85em; text-transform: lowercase; color: var(--ac-ink); text-decoration: none; border: 1px solid var(--ac-line); border-radius: 100px; padding: 0.45em 1.1em; background: transparent; transition: background 0.2s, color 0.2s; }
.ac-navlink:hover { background: var(--ac-red); color: #fff; }
.ac-crumb { font-size: 0.8em; color: var(--ac-muted); text-transform: lowercase; letter-spacing: 0.02em; margin: 0.6em 0 2em; }
.ac-crumb a { color: inherit; text-decoration: none; }
.ac-crumb a:hover { color: var(--ac-red); }
.ac-footer { border-top: 1px solid var(--ac-line); margin-top: 5em; padding: 1.6em 0 2.4em; display: flex; gap: 2em; flex-wrap: wrap; font-size: 0.78em; color: var(--ac-muted); }
.ac-footer a { color: inherit; text-decoration: none; }

/* ---------- PDP ---------- */
.ac-eyebrow { font-size: 0.75em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-red); margin: 0 0 0.9em; }
.ac-title { font-size: 2.4em; line-height: 1.06; letter-spacing: -0.02em; font-weight: 550; margin: 0 0 0.45em; }
.ac-price { font-size: 1.5em; font-weight: 550; margin: 0.2em 0 0.1em; font-variant-numeric: tabular-nums; }
.ac-price-note, .ac-origin { font-size: 0.8em; color: var(--ac-muted); margin: 0.4em 0 0; }
.ac-varlabel { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ac-muted); margin: 2em 0 0.7em; }
.ac-pills { display: flex; flex-wrap: wrap; gap: 0.5em; }
/* label over price - two lines keep five sizes on one row where "24cm · ₹2,290" would wrap */
.ac-pill { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1em; line-height: 1.15; font-family: inherit; font-size: 0.85em; padding: 0.55em 1.05em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: var(--ac-ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.ac-pill .p { font-size: 0.8em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-pill.is-active .p { color: rgba(245, 246, 238, 0.72); }
.ac-pill:hover { border-color: var(--ac-ink); }
.ac-pill.is-active { background: var(--ac-ink); color: var(--ac-bg); border-color: var(--ac-ink); }
/* keyboard focus (focus: Option C, site.css): pills take a 1.5px ink inner edge; the black button keeps its red fill (the
   house rule) with a 2px cream line inside - never a red ring */
.ac-pill:focus-visible, .ac-navlink:focus-visible { outline: 0; border-color: var(--ac-ink); box-shadow: inset 0 0 0 0.5px var(--ac-ink), inset 0 0 0 2px var(--ac-bg); }
.ac-add:focus-visible { background: var(--ac-red); border-color: var(--ac-red); color: #fff; outline: 2px solid var(--ac-bg); outline-offset: -5px; }
.ac-badges { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 1.6em; }
.ac-badge { font-size: 0.72em; padding: 0.35em 0.8em; border-radius: 100px; background: rgba(34,34,34,0.06); color: var(--ac-ink); }
.ac-cooktop { font-size: 0.82em; color: var(--ac-muted); margin-top: 1em; }
.ac-add { display: inline-flex; align-items: center; gap: 0.7em; margin-top: 2em; font-family: inherit; font-size: 0.95em; background: var(--ac-ink); color: var(--ac-bg); border: 1px solid var(--ac-ink); border-radius: 100px; padding: 0.85em 1.8em; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ac-add:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.ac-add svg { height: 0.7em; width: auto; }
.ac-info { font-size: 0.9em; line-height: 1.55; color: var(--ac-muted); margin-top: 2em; max-width: 42em; }

/* ---------- long-form PDP ----------
   Retail PDP rhythm drawn in the house language: hairlines rather than shadows, 1px-gap grids,
   red only as accent. One seam - every two-column section is a 12-column grid split at 6/7, so
   the right column's left edge is a single line down the page. Full-width objects (the spec
   strip, the pillars, the film, the product rows) span all twelve. */
.ac-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ac-gut); row-gap: 2.4em; align-items: start; }
.ac-l { grid-column: 1 / 7; min-width: 0; }
.ac-r { grid-column: 7 / 13; min-width: 0; }

/* section labels - the PDP eyebrow, quietened so the page is not a column of red */
.ac-eyebrow.is-quiet { color: var(--ac-muted); }
.ac-story, .ac-specs, .ac-pillars, .ac-film, .ac-howto, .ac-faq { margin-top: 5em; }
.ac-story h2, .ac-pillars h2, .ac-howto h2, .ac-faq h2 { font-weight: 550; letter-spacing: -0.02em; margin: 0; }
.ac-story h2, .ac-howto h2, .ac-faq h2 { font-size: 1.7em; line-height: 1.15; }
.ac-pillars h2 { font-size: 1.4em; margin-bottom: 1.2em; }

/* hero - the shot stack scrolls, the rail stays */
.ac-pdp-rail { position: sticky; top: 2em; }
.ac-shots { display: grid; gap: 1.25em; }
.ac-render img { width: 100%; height: auto; display: block; }
/* photography sits in a 4:5 frame; a role still to be shot holds the same frame as a placeholder,
   so the layout the photographs will land in is the layout on screen today */
.ac-shot { aspect-ratio: 4 / 5; margin: 0; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); overflow: hidden; position: relative; }
.ac-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-shot.is-pending span, .ac-film-pending span { position: absolute; left: 1.1em; bottom: 0.9em; font-size: 0.78em; color: var(--ac-muted); letter-spacing: 0.02em; }

.ac-tagpill { display: inline-block; font-size: 0.72em; letter-spacing: 0.04em; padding: 0.4em 0.9em; border-radius: 100px; background: var(--ac-red); color: #fff; margin-bottom: 1.1em; }
.ac-lede { font-size: 0.95em; line-height: 1.6; color: var(--ac-muted); margin: 0 0 1.8em; max-width: 34em; }

/* buy panel - the one boxed surface on the page, so the decision sits apart from the reading */
.ac-buy { border: 1px solid var(--ac-line); background: var(--ac-panel); padding: 1.4em 1.4em 1.6em; }
.ac-buy .ac-varlabel { margin-top: 0; }
.ac-buy .ac-price { margin: 1.1em 0 0.1em; }
.ac-buy .ac-price-note { margin: 0 0 0.2em; }
.ac-buy-desc { font-size: 0.9em; line-height: 1.55; margin: 0 0 1.3em; }
/* two full-width actions, primary first: one shape, one size, the fill does the ranking.
   Flat, not glass - glass is for controls floating over content; on a flat panel it smudges. */
.ac-cta { display: grid; gap: 0.6em; margin-top: 1.4em; }
.ac-cta .ac-add, .ac-buynow { width: 100%; justify-content: center; margin: 0; padding: 0.95em 1.5em; font-size: 0.95em; }
.ac-buynow { display: inline-flex; align-items: center; font-family: inherit; background: transparent; color: var(--ac-ink); border: 1px solid var(--ac-line); border-radius: 100px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.ac-buynow:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.ac-buynow:focus-visible { outline: 0; border-color: var(--ac-ink); box-shadow: inset 0 0 0 0.5px var(--ac-ink); }

/* accordions - native <details>, so they work without script and stay keyboard-operable */
.ac-acc { margin-top: 2.2em; border-top: 1px solid var(--ac-line-soft); }
.ac-acc-item { border-bottom: 1px solid var(--ac-line-soft); }
.ac-acc-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.05em 0; font-size: 0.92em; }
.ac-acc-item summary::-webkit-details-marker { display: none; }
.ac-acc-item summary:hover { color: var(--ac-red); }
.ac-acc-item summary:focus-visible { outline: 0; }   /* the rows' tint and ink bar (site.css) */
.ac-chev { flex: none; width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-0.1em, -0.1em); transition: transform 0.2s; }
.ac-acc-item[open] .ac-chev { transform: rotate(-135deg); }
.ac-acc-body { padding: 0 0 1.3em; font-size: 0.88em; line-height: 1.6; color: var(--ac-muted); }
.ac-acc-body p { margin: 0 0 0.7em; }
.ac-acc-body p:last-child { margin-bottom: 0; }
.ac-speclist { list-style: none; margin: 0.4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.ac-speclist li { font-size: 0.92em; padding: 0.3em 0.75em; border: 1px solid var(--ac-line-soft); border-radius: 100px; }

/* cooktops - a line icon beside each word */
.ac-cook { display: inline-flex; align-items: center; gap: 0.35em; margin-right: 0.9em; white-space: nowrap; }
.ac-ico { width: 1em; height: 1em; flex: none; }
.ac-cooks { display: flex; flex-wrap: wrap; align-items: center; }

/* material story */
.ac-story .ac-sub { font-size: 0.9em; color: var(--ac-muted); margin: 0.6em 0 1.4em; }
.ac-prose { font-size: 0.92em; line-height: 1.65; color: var(--ac-muted); max-width: 36em; }
.ac-prose p { margin: 0 0 1em; }

/* spec strip - the product's own numbers, in the catalogue grid */
.ac-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--ac-line-soft); border: 1px solid var(--ac-line-soft); margin: 1.2em 0 0; }
.ac-spec-grid > div { background: var(--ac-bg); padding: 1.1em 1.2em 1.2em; min-width: 0; }
.ac-spec-grid dt { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ac-muted); margin: 0 0 0.5em; }
.ac-spec-grid dd { margin: 0; font-size: 0.98em; }
.ac-spec-grid dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ac-line); }
.ac-spec-grid dd a:hover { color: var(--ac-red); border-color: var(--ac-red); }

/* build pillars - the catalogue's 1px-gap grid, so it reads as one object */
.ac-pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--ac-line-soft); border: 1px solid var(--ac-line-soft); }
.ac-pillar { background: var(--ac-bg); padding: 1.6em 1.5em 1.5em; display: flex; flex-direction: column; }
.ac-pillar-n { display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; border-radius: 100px; background: var(--sw, #c8c9cb); color: var(--fg, var(--ac-ink)); font-size: 0.85em; letter-spacing: 0.02em; margin-bottom: 1.4em; font-variant-numeric: tabular-nums; }
.ac-pillar h3 { font-size: 1.02em; font-weight: 550; margin: 0 0 0.5em; }
.ac-pillar p { font-size: 0.86em; line-height: 1.6; color: var(--ac-muted); margin: 0 0 1.3em; }
.ac-tag { align-self: flex-start; margin-top: auto; font-size: 0.72em; padding: 0.35em 0.8em; border-radius: 100px; border: 1px solid var(--ac-line); color: var(--ac-ink); }

/* the range film - 16:9 on the grid, never full-bleed. It plays only on screen (commerce.js). */
.ac-film-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); overflow: hidden; margin-top: 1.2em; }
.ac-film-frame .ac-series-image { display:block;width:100%;height:100%;object-fit:contain; }
.ac-film-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-film-sound { position: absolute; right: 1em; bottom: 1em; font-family: inherit; font-size: 0.8em; background: var(--alda-ink); color: var(--alda-paper); border: none; border-radius: 100px; padding: 0.5em 1em; cursor: pointer; transition: background 0.2s; }
.ac-film-sound[aria-pressed="true"] { background: var(--ac-red); color: #fff; }
.ac-plp .ac-film { margin-top: 1.6em; }
.ac-plp .ac-film-frame { margin-top: 0; }

/* care steps */
.ac-steps { list-style: none; margin: 1.6em 0 0; padding: 0; }
.ac-steps li { display: flex; gap: 1.1em; padding: 1.2em 0; border-top: 1px solid var(--ac-line-soft); }
.ac-step-n { flex: none; width: 1.9em; height: 1.9em; border-radius: 100px; border: 1px solid var(--ac-line); display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: var(--ac-muted); }
.ac-steps h3 { font-size: 1em; font-weight: 550; margin: 0 0 0.35em; }
.ac-steps p { font-size: 0.88em; line-height: 1.6; color: var(--ac-muted); margin: 0; }

/* FAQs */
.ac-faq h2 span { color: var(--ac-red); }
.ac-faq-list { border-top: 1px solid var(--ac-line-soft); }

/* sticky buy bar - takes over once the buy panel scrolls off the top. Hidden state is also
   visibility:hidden, so its button cannot take keyboard focus from off screen. */
.ac-buybar { position: fixed; left: 50%; bottom: 1.4em; z-index: 100000; transform: translate(-50%, 160%); transform-origin: 0 50%; visibility: hidden; transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1), translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.3s; display: flex; align-items: center; gap: 1em; font-family: Geist, Arial, sans-serif; font-size: 14px; background: var(--alda-ink); color: var(--alda-paper); border-radius: 100px; padding: 0.5em 0.5em 0.5em 1.4em; max-width: calc(100vw - 2.8em); white-space: nowrap; }
.ac-buybar.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1), translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.ac-bb-name { font-weight: 550; }
.ac-bb-var, .ac-bb-price { color: rgba(245, 246, 238, 0.72); }
.ac-bb-price { font-variant-numeric: tabular-nums; }
.ac-bb-add { display: inline-flex; align-items: center; gap: 0.6em; font-family: inherit; font-size: 1em; background: var(--alda-paper); color: var(--alda-ink); border: none; border-radius: 100px; padding: 0.6em 1.1em; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ac-bb-add:hover { background: var(--ac-red); color: #fff; }
.ac-bb-add svg { height: 0.65em; width: auto; }
.ac-bb-add:focus-visible, .ac-film-sound:focus-visible { outline: 2px solid var(--ac-bg); outline-offset: -4px; }

@media (max-width: 900px) {
  .ac-l, .ac-r { grid-column: 1 / -1; }
  .ac-g { row-gap: 2em; }
  .ac-pdp-rail { position: static; }
  /* the shot stack becomes a snap strip */
  .ac-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75em; padding-bottom: 0.5em; }
  .ac-shots > * { flex: 0 0 82%; scroll-snap-align: start; }
  .ac-buybar { font-size: 13px; gap: 0.7em; padding-left: 1.1em; }
  .ac-bb-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-buybar, .ac-buybar.is-on { transition: none; }
}

/* related row */
.ac-related h2, .ac-plp h1, .ac-plp h2 { font-weight: 550; letter-spacing: -0.02em; }
.ac-related { margin-top: 5em; }
.ac-related h2 { font-size: 1.4em; margin-bottom: 1em; }
/* auto-fit, not auto-fill: a collection with three siblings stretches to fill the row instead of
   leaving a bare grid cell at the end. The PLP grid keeps auto-fill - there the column rhythm
   should stay put however many products a filter leaves behind. */
.ac-related .ac-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- PLP / cards ---------- */
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--ac-line-soft); border: 1px solid var(--ac-line-soft); }
.ac-card { background: var(--ac-bg); padding: 1.4em 1.4em 1.6em; text-decoration: none; color: var(--ac-ink); display: block; transition: background 0.2s; }
.ac-card:hover { background: var(--ac-panel); }
.ac-card img { width: 100%; height: auto; display: block; margin-bottom: 0.8em; }
.ac-card .n { font-size: 0.95em; line-height: 1.3; }
.ac-card .p { font-size: 0.85em; color: var(--ac-muted); margin-top: 0.25em; font-variant-numeric: tabular-nums; }
.ac-card .t { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ac-muted); margin-top: 0.7em; }
.ac-plp h1 { font-size: 2.6em; margin: 0 0 0.2em; }
.ac-plp .ac-sub { color: var(--ac-muted); font-size: 0.95em; margin: 0 0 2.2em; max-width: 40em; }
.ac-rows { border-top: 1px solid var(--ac-line-soft); margin-top: 2.5em; }
.ac-row { display: flex; justify-content: space-between; gap: 2em; padding: 0.9em 0.2em; border-bottom: 1px solid var(--ac-line-soft); font-size: 0.92em; }
.ac-row .p { color: var(--ac-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-row .pend { font-size: 0.72em; color: var(--ac-red); text-transform: uppercase; letter-spacing: 0.1em; align-self: center; white-space: nowrap; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1.5em 0 2.5em; }
.ac-chips a { font-size: 0.82em; text-decoration: none; color: var(--ac-ink); border: 1px solid var(--ac-line); border-radius: 100px; padding: 0.4em 1em; }
.ac-chips a.is-here { background: var(--ac-ink); color: var(--ac-bg); border-color: var(--ac-ink); }
.ac-chips a:hover:not(.is-here) { background: var(--ac-red); color: #fff; border-color: var(--ac-red); }

/* ---------- grid view = the category overview ----------
   The core's toggleView() never switches: all three module copies bind it to the view button
   and each flips its own isXPView, so they cancel (the untouched original behaves identically).
   Driven here by `body.ac-gridview` instead - it reveals the collections overview already built
   into `.main-wrapper`: large category cards, each opening /collections/<slug> where that
   category's products list. The canvas is hidden rather than reflowed. Core JS untouched. */
body.ac-gridview,
body.ac-gridview .page-wrapper { overflow: visible !important; height: auto !important; }
body.ac-gridview .page-wrapper { min-height: 100vh; }
body.ac-gridview .xp-wrapper { display: none !important; }
body.ac-gridview .main-wrapper {
  opacity: 1 !important;
  pointer-events: all !important;
  z-index: 1000 !important;
  position: relative !important;
}
/* The view button shows the current view and slides to the other on hover: `.buttonText` is a
   one-line window with `overflow: hidden`, the label in flow fills it, and the spare label waits
   just below at `position: absolute; top: 100%`. Swapping which of the two is in flow is what
   toggleView() would have done, so the button was stuck reading "experience view" in both views.
   Swap their roles instead of their DOM order - the core's hover tween animates the character
   elements, and this never touches them, so the hover preview keeps working in both directions.
   The two lines are not interchangeable: `.split-parent` also carries `overflow: hidden`, which is
   the mask the outgoing line slides up behind, and the clone had that class removed so the incoming
   line is unmasked. Swapping position alone therefore made the incoming label mask itself away - the
   characters slide to where its own box no longer is - and the button hovered to blank. So the mask
   moves with the role, and both lines are still clipped to one line by `.buttonText` regardless. */
body.ac-gridview .viewButton .buttonText .split-parent {
  position: absolute !important;
  top: 100% !important;
  overflow: visible !important;
}
body.ac-gridview .viewButton .buttonText .secondLine {
  position: relative !important;
  top: 0 !important;
  overflow: hidden !important;
}
/* canvas-only affordances have nothing to act on in the overview */
body.ac-gridview .instruction-zoom-wrapper,
body.ac-gridview .instructionWrapper,
body.ac-gridview .controls,
body.ac-gridview .filterElementWrapper { display: none !important; }
/* the whole card is the target, not just the small explore link */
body.ac-gridview .collection_item { cursor: pointer; }
/* the card outline the core meant to fade in on scroll (its ScrollTrigger never runs) */
body.ac-gridview .collection_item-card {
  border-color: var(--swatch--grey, #a1a19c) !important;
  position: relative;
  overflow: hidden;
}
/* horizontal product strip inside each category card */
body.ac-gridview .products-collection,
body.ac-gridview .products-collection_list { height: 100% !important; }
body.ac-gridview .products-collection { overflow: hidden; }
body.ac-gridview .products-collection_list {
  display: flex !important;
  width: auto !important;
  will-change: transform;
}
/* width comes from JS as a px value - a percentage here would resolve against the
   content-sized flex track and blow up */
.ac-slide {
  flex: 0 0 auto;
  width: var(--ac-slide-w, 320px);
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ac-slide img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.ac-slide:hover img { transform: scale(1.04); }
.ac-slide-cap {
  position: absolute;
  left: 1.4em;
  bottom: 1.2em;
  font-size: 0.72em;
  letter-spacing: 0.02em;
  color: var(--_theme---color--body-text, var(--alda-ink));
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.ac-slide:hover .ac-slide-cap { opacity: 0.62; }
/* drag position indicator, echoing the core's scrollbar/thumb */
.ac-sbar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.9em;
  width: 34%;
  height: 2px;
  background: rgba(34, 34, 34, 0.14);
  border-radius: 100px;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
body.ac-gridview .collection_item:hover .ac-sbar,
.ac-sbar.is-live { opacity: 1; }
.ac-sthumb {
  height: 100%;
  background: var(--ac-red);
  border-radius: 100px;
  transition: transform 0.35s cubic-bezier(0.3, 0.8, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ac-slide img, .ac-sthumb, .ac-slide-cap, .ac-sbar { transition: none; }
}

/* ---------- focus view: frosted right side ----------
   The focus view pushes the canvas to x=62.5% and leaves it sharp on the right. This panel
   frosts that region and carries the product's detail. backdrop-filter is used deliberately:
   filtering .xp-wrapper itself would also blur the focused hero, which is a canvas item. */
.ac-fpanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* flush with the canvas edge - JS overrides this with the measured value so no strip of
     unblurred canvas can show between the divider and the panel */
  left: 60%;
  /* Matches .xp-wrapper and .focusWrapper. The panel is inserted between them in the DOM, so
     paint order puts it above the canvas and below the focus UI - which keeps the close (x)
     on top. A higher z-index here would cover the x, since the x is trapped inside
     .focusWrapper's own stacking context and cannot rise above it. */
  z-index: 1000;
  /* a column whose child centres itself with auto margins: centred when the copy fits, scrollable
     from the top when a short window makes it overflow (align-items:center would clip the top) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  font-family: Geist, Arial, sans-serif;
  color: var(--ac-ink);
  background: rgba(245, 246, 238, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(0.9);
  backdrop-filter: blur(22px) saturate(0.9);
  border-left: 1px solid rgba(34, 34, 34, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s;
}
body.ac-focus .ac-fpanel { opacity: 1; visibility: visible; pointer-events: auto; }
/* The open focus wrapper spans the full viewport with pointer-events on, and it paints above
   the panel (later sibling, same z-index) - so its bare surface would swallow every click on
   the panel's CTAs. Its interactive elements are all children on the left of the divider, so
   let the surface pass clicks through and re-enable the children. */
body.ac-focus .focusWrapper.pointerAll { pointer-events: none !important; }
body.ac-focus .focusWrapper.pointerAll > * { pointer-events: auto; }
/* browsers without backdrop-filter still get an opaque, readable panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ac-fpanel { background: rgba(245, 246, 238, 0.97); }
}
.ac-fpanel::-webkit-scrollbar { display: none; }
.ac-fp-inner {
  /* clear the divider and its close control */
  padding: 3em 3.4em 3em 5.2em;
  margin: auto 0;
  max-width: 30em;
  transform: translateY(14px);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.ac-focus .ac-fp-inner { transform: translateY(0); }
.ac-fp-eyebrow {
  font-size: 0.72em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ac-red);
  margin: 0 0 0.9em;
}
.ac-fp-name {
  font-size: 2.1em;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 550;
  margin: 0 0 0.3em;
}
.ac-fp-price {
  font-size: 1.25em;
  margin: 0 0 1em;
  font-variant-numeric: tabular-nums;
}
.ac-fp-desc {
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--ac-muted);
  margin: 0 0 1.4em;
}
.ac-fp-badges { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1.2em; }
.ac-fp-badge {
  font-size: 0.7em;
  padding: 0.35em 0.85em;
  border-radius: 100px;
  background: rgba(34, 34, 34, 0.07);
}
.ac-fp-sizes {
  font-size: 0.82em;
  color: var(--ac-muted);
  margin: 0 0 1.8em;
  font-variant-numeric: tabular-nums;
}
/* on sale (commerce.js renderFocusPanel): the selling price, the struck MRP and the % off in red text on one line;
   the sizes line keeps its muted "from" figure */
.ac-fp-price .pr-off { margin-left: 0.15em; }
.ac-fp-sizes .pr-now { color: inherit; } .ac-fp-sizes .pr-was { font-size: 1em; }
.ac-fp-cta { display: flex; gap: 0.6em; flex-wrap: wrap; }
.ac-fp-btn {
  font-family: inherit;
  font-size: 0.9em;
  border-radius: 100px;
  padding: 0.8em 1.6em;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--ac-ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ac-fp-btn.is-primary { background: var(--ac-ink); color: var(--ac-bg); }
.ac-fp-btn.is-primary:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.ac-fp-btn.is-ghost { background: transparent; color: var(--ac-ink); }
.ac-fp-btn.is-ghost:hover { background: var(--ac-red); color: #fff; }
.ac-fp-btn:focus-visible { outline: 2px solid var(--ac-bg); outline-offset: -5px; }
.ac-fp-note { font-size: 0.78em; color: var(--ac-muted); margin: 1.2em 0 0; }
.ac-fp-more { display: none; }
/* the floating site header covers the top of the side panel, so the copy centres in what's left */
.ac-fpanel { padding-top: var(--sn-height, 104px); }
/* narrow windows: the core's hero runs under the panel instead of over its buttons */
body.ac-narrow.ac-focus .ac-fpanel { z-index: 200001; }
/* wherever commerce.js has moved the close (x) to the body, it sits above the hero and the panel */
body > .buttonCloseFocus { z-index: 200002 !important; }
/* a phone on its side: too short for the core's own buttons as well as the panel's - keep the panel's */
@media (max-height: 500px) {
  body.ac-focus .focusWrapper .focusCTAs { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  body.ac-focus .ac-fp-more { display: inline-flex; margin-top: 12px; font-size: 12px; color: var(--ac-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34, 34, 34, 0.3); }
  body.ac-focus .ac-fp-more[hidden] { display: none; }
}
@media (max-width: 1100px) {
  .ac-fp-inner { padding: 2em 2em 2em 3.4em; }
  .ac-fp-name { font-size: 1.6em; }
}
/* a narrow desktop window or a phone on its side: the same side panel, tighter, buttons stacked */
@media (max-width: 900px), (max-height: 560px) {
  .ac-fp-inner { padding: 1.4em 1.2em 1.4em 2.6em; }
  .ac-fp-name { font-size: 1.35em; }
  .ac-fp-price { margin-bottom: 0.7em; }
  .ac-fp-desc { font-size: 0.85em; margin-bottom: 1em; }
  .ac-fp-sizes { margin-bottom: 1.1em; }
  .ac-fp-cta { flex-direction: column; align-items: stretch; }
  .ac-fp-cta .ac-fp-btn { width: 100%; }
}

/* ---------- the stacked focus view (phones, tablets held upright) ----------
   The core stacks the collection full width here, so the detail is a sheet along the bottom and the
   photo is laid out in the band above it (html.ac-upright, the focus layout rules further down). */
body.ac-stack .ac-fpanel {
  /* above the core's wrapper (z 200000 when open), so the rest of the stacked collection slides
     under the sheet instead of over it; the close (x) sits clear of it under the header */
  z-index: 200001;
  top: auto;
  left: 0 !important;
  right: 0;
  bottom: 0;
  display: block;
  /* a set height, not a max: the photo's band above it has to be known before the core's flight (the copy
     scrolls inside when it runs long) */
  height: var(--ac-sheet);
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-left: 0;
  border-top: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 22px 22px 0 0;
  background: rgba(245, 246, 238, 0.95);
  box-shadow: 0 -16px 40px rgba(24, 24, 20, 0.1);
  transform: translateY(28px);
  transition: opacity 0.45s ease, visibility 0.45s, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.ac-stack.ac-focus .ac-fpanel { transform: none; }
body.ac-stack .ac-fpanel.ac-glass {
  -webkit-backdrop-filter: blur(20px) saturate(0.9) !important;
  backdrop-filter: blur(20px) saturate(0.9) !important;
  border-left: 0;
  box-shadow: 0 -16px 40px rgba(24, 24, 20, 0.1);
}
body.ac-stack .ac-fpanel.ac-glass::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); }
body.ac-stack .ac-fp-inner { max-width: none; margin: 0; padding: 10px 16px 16px; transform: none; }
/* the grabber says "sheet"; the copy scrolls inside it when it runs long */
body.ac-stack .ac-fp-inner::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: rgba(34, 34, 34, 0.16); }
body.ac-stack .ac-fp-eyebrow { font-size: 10px; margin-bottom: 6px; }
body.ac-stack .ac-fp-name { font-size: 22px; line-height: 1.15; margin: 0 0 2px; }
body.ac-stack .ac-fp-price { font-size: 16px; margin: 0 0 8px; }
body.ac-stack .ac-fp-desc { font-size: 13px; line-height: 1.45; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ac-stack .ac-fp-badges { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px; }
body.ac-stack .ac-fp-badges::-webkit-scrollbar { display: none; }
body.ac-stack .ac-fp-badge { flex: none; }
body.ac-stack .ac-fp-sizes { font-size: 12px; margin: 0 0 12px; }
body.ac-stack .ac-fp-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.ac-stack .ac-fp-cta .ac-fp-btn { width: 100%; }
/* a tile pictured with every size names the size its Add to cart adds ("add 370 ml to cart", commerce.js
   renderFocusPanel); a phone's half-width button ends the words at the size, on one line, and keeps " to cart" for
   screen readers */
@media (max-width: 479.98px) {
  body.ac-stack .ac-fp-tocart { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
body.ac-stack .ac-fp-note { font-size: 11px; margin: 10px 0 0; }
body.ac-stack .ac-fp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--ac-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34, 34, 34, 0.3); }
body.ac-stack .ac-fp-more[hidden] { display: none; }
/* ---------- the focus view's layout, in the core's own two modes ----------
   The core decides its layout in JS (isMobileOrTabletOrLand): a touch screen held upright stacks the
   collection full width; every other screen parks the canvas at 60% and leaves the right side to the
   panel. Its CSS gave the side layout only to landscape screens 768px and up, so a portrait desktop window
   or a phone on its side flew the photo to the stacked layout's full-width spot under the panel, and
   commerce.js used to shrink it into place afterwards (the user, 2026-10-13: "the product weirdly goes in
   a weird position before settling"). commerce.js markFocusMode puts the JS's answer on <html> before any
   click; these rules lay the carousel out for that mode, so the core's Flip measures the right target and
   the photo flies straight to where it belongs. The core pads the wrapper by max(20vh, 60px) in the side
   mode and not at all when stacked (setPaddingFocusWrapper); the photo is the carousel's first child. */
:root { --ac-sheet: min(42vh, 360px); }
/* side mode where the core's own landscape >= 768px rules do not reach (they stay as they are elsewhere):
   the photo is the largest square that fits left of the panel and below the header, centred on the screen's
   height - level with the panel's copy - and the column is a window that size, so the rest of the collection
   only shows as it scrolls through (a tall window would otherwise show three products under one description).
   The thumbnail rail and the size label have no room beside the photo here; the panel carries both. */
@media (orientation: portrait), (max-width: 767.98px) {
  html.ac-side {
    --ac-pad: max(20vh, 60px);
    --ac-hero: min(40vw, 60vw - 32px, 100vh - var(--sn-height, 96px) - 36px);
    --ac-hero-top: max(var(--sn-height, 96px) + 12px, (100vh - var(--ac-hero)) / 2);
  }
  html.ac-side .focusWrapper {
    width: 100%;
    height: 100vh;
    overflow: visible;
    justify-content: flex-start;
    clip-path: inset(var(--ac-hero-top) 0 calc(100vh - var(--ac-hero-top) - var(--ac-hero)) 0);
  }
  html.ac-side .focusCarousel { margin-left: 0; width: 60vw; margin-top: calc(var(--ac-hero-top) - var(--ac-pad)); transition: none; }
  html.ac-side .focusCarousel img { width: var(--ac-hero); max-width: none; max-height: none; }
  html.ac-side .focusWrapper .focusMarkeeWrapper, html.ac-side .focusWrapper .contextualInfo { visibility: hidden; }
}
/* side mode on the core's own landscape >= 768px layout: its photo is 40vw a fifth of the way down, which
   on a short or very wide window runs under the header or past the bottom edge - same layout, capped to fit */
@media (orientation: landscape) and (min-width: 768px) {
  html.ac-side { --ac-pad: max(20vh, 60px); --ac-hero-top: max(var(--ac-pad), var(--sn-height, 96px) + 12px); }
  html.ac-side .focusCarousel { margin-top: calc(var(--ac-hero-top) - var(--ac-pad)); }
  html.ac-side .focusCarousel img { width: min(40vw, 100vh - var(--ac-hero-top) - 24px); }
}
/* stacked mode: every photo keeps the full-width square the core spaces its slides by (it scrolls the
   carousel in steps of the window's width), and sits centred in the band between the header and the
   sheet - inset within its square when the band is shorter than the screen is wide */
html.ac-upright {
  --ac-band-top: var(--sn-height, 96px);
  --ac-band-bottom: calc(100vh - var(--ac-sheet) - 12px);
}
@supports (height: 100dvh) {
  html.ac-upright { --ac-band-bottom: calc(100dvh - var(--ac-sheet) - 12px); }
}
html.ac-upright .focusCarousel { margin-top: calc((var(--ac-band-top) + var(--ac-band-bottom)) / 2 - 50vw); }
html.ac-upright .focusCarousel img {
  box-sizing: border-box;
  width: 100vw;
  height: 100vw;
  max-width: none;
  max-height: none;
  padding: max(8px, (100vw - (var(--ac-band-bottom) - var(--ac-band-top))) / 2);
  object-fit: contain;
}
/* the core's "explore collection" (and its hidden "buy product") - not wanted; the panel carries the actions */
.focusWrapper .focusCTAs { display: none !important; }
/* the core's huge collection title on the left ("Kitchen Tools") - the user, 2026-10-04: "this is not required on
   the left side. remove it." The panel already names the piece and its collection. */
.focusWrapper .focusInfos { display: none !important; }
/* the core's size label and its own buttons sit where the sheet is - the sheet carries both */
body.ac-stack .focusWrapper .contextualInfo,
body.ac-stack .focusWrapper .focusCTAs { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* the close (x), in the header buttons' family: a 40px box, 8px corner, hairline on cream. On a phone
   commerce.js has moved it to the body, so it can sit above the carousel (below the header), just
   under the header. Beside the panel it keeps the core's desktop spot, centred on the seam half way down,
   at every size: the core pins it at 2em or to the panel's top corner below that, over the copy */
.buttonCloseFocus { width: 42px; height: 42px; border: 1px solid rgba(34, 34, 34, 0.18); border-radius: 8px; background: var(--alda-paper); transition: border-color 0.2s; }
.buttonCloseFocus::before, .buttonCloseFocus::after { background-color: var(--alda-ink); }
.buttonCloseFocus:hover { border-color: var(--alda-red); }
.buttonCloseFocus:hover::before, .buttonCloseFocus:hover::after { background-color: var(--alda-red); }
body.ac-stack .buttonCloseFocus { top: calc(var(--sn-height, 136px) + 8px) !important; right: 12px !important; left: auto !important; bottom: auto !important; z-index: 200002 !important; visibility: visible !important; }
body.ac-focus:not(.ac-stack) .buttonCloseFocus { top: calc(50vh - 21px) !important; left: calc(60vw - 21px) !important; right: auto !important; }
@media (prefers-reduced-motion: reduce) {
  .ac-fpanel, .ac-fp-inner { transition: none; }
  body.ac-stack .ac-fpanel, body.ac-stack.ac-focus .focusWrapper .focusCarousel { transition: none; }
}

/* ---------- controls in the canvas filter-bar idiom ----------
   Mirrors `.filter-category`: compact bordered box, label + "+" affordance, expands open. */
.ac-ctl {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #a1a19c;
  border-radius: 4px;
  background: var(--ac-bg);
  font-size: 0.82em;
  overflow: hidden;
  align-self: flex-start;
}
.ac-ctl > button {
  font-family: inherit;
  font-size: inherit;
  color: var(--ac-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5em 0.9em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}
.ac-ctl > button .plus { opacity: 0.55; }
.ac-ctl[open] > button .plus { transform: rotate(45deg); }
.ac-ctl > button .plus { display: inline-block; transition: transform 0.2s; }
.ac-ctl-menu { display: none; flex-direction: column; border-top: 1px solid var(--ac-line); }
.ac-ctl.is-open .ac-ctl-menu { display: flex; }
.ac-ctl.is-open > button .plus { transform: rotate(45deg); }
.ac-ctl-menu a, .ac-ctl-menu button {
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--ac-ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5em 0.9em;
  white-space: nowrap;
}
.ac-ctl-menu a:hover, .ac-ctl-menu button:hover { background: rgba(34, 34, 34, 0.07); }
.ac-ctl-menu a.is-here { color: var(--ac-red); }
.ac-ctlbar { display: flex; gap: 0.5em; flex-wrap: wrap; margin: 1.4em 0 2.2em; align-items: flex-start; }

/* ---------- cart pill + drawer (all pages incl. canvas) ---------- */
.ac-cartpill { position: fixed; top: 1.4em; right: 1.4em; z-index: 100000; /* .navbar is fixed at z 99999 */ font-family: Geist, Arial, sans-serif; font-size: 14px; background: var(--alda-ink); color: var(--alda-paper); border: none; border-radius: 100px; padding: 0.55em 1.2em; cursor: pointer; display: flex; gap: 0.55em; align-items: center; transition: background 0.2s; }
.ac-cartpill:hover { background: var(--alda-red); color: #fff; }
.ac-cartpill .ac-count { background: var(--alda-red); color: #fff; border-radius: 100px; min-width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82em; padding: 0 0.3em; }
.ac-cartpill.is-empty .ac-count { background: rgba(245,246,238,0.25); }
.ac-scrim { position: fixed; inset: 0; background: rgba(20,20,18,0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 100010; }
/* explicit font-size: every dimension in here is em-based, and the canvas page's root size is
   smaller than the PDP/PLP pages' - without this the same cart renders ~17% smaller on the canvas */
/* The shadow belongs to the open drawer only: parked at translateX(102%), its 40px blur still reached ~30px into
   every page as a grey band down the right edge. It comes on with the open (the drawer is off-screen then, so it
   slides in already cast) and goes only once the close has finished (the 0.3s delay), so the slide looks as it did. */
.ac-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--alda-paper); color: var(--alda-ink); z-index: 100020; transform: translateX(102%); transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1), box-shadow 0s linear 0.3s; display: flex; flex-direction: column; font-family: Geist, Arial, sans-serif; font-size: 16px; box-shadow: none; }
body.ac-open .ac-scrim { opacity: 1; pointer-events: auto; }
body.ac-open .ac-drawer { transform: translateX(0); box-shadow: -12px 0 40px rgba(0,0,0,0.12); transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1), box-shadow 0s; }
.ac-dhead { display: flex; align-items: center; justify-content: space-between; padding: 1.4em 1.5em; border-bottom: 1px solid rgba(34,34,34,0.14); }
.ac-dhead .t { font-size: 1.05em; text-transform: lowercase; }
.ac-close { background: none; border: 1px solid rgba(34,34,34,0.2); border-radius: 100px; width: 2.2em; height: 2.2em; cursor: pointer; font-size: 1em; color: var(--alda-ink); line-height: 1; }
.ac-close:hover { background: var(--alda-red); color: #fff; }
.ac-lines { flex: 1; overflow-y: auto; padding: 0.6em 1.5em; }
.ac-lineitem { display: grid; grid-template-columns: 64px 1fr auto; gap: 1em; align-items: center; padding: 0.9em 0; border-bottom: 1px solid rgba(34,34,34,0.08); }
/* Same photograph as the PDP hero, with its cleaned transparent studio ground (2026-10-20). */
.ac-lineitem img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: transparent; }
.ac-lineitem img.is-logo { object-fit: contain; border-radius: 0; background: none; }
.ac-lineitem .n { font-size: 0.85em; line-height: 1.3; }
.ac-lineitem .v { font-size: 0.75em; color: var(--alda-muted); margin-top: 0.15em; }
.ac-qty { display: flex; align-items: center; gap: 0.5em; margin-top: 0.5em; }
.ac-qty button { width: 1.6em; height: 1.6em; border-radius: 100px; border: 1px solid rgba(34,34,34,0.25); background: none; cursor: pointer; font-size: 0.8em; line-height: 1; color: var(--alda-ink); }
.ac-qty button:hover { background: var(--alda-red); color: #fff; }
.ac-qty .q { font-size: 0.85em; min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }
.ac-lineitem .lp { font-size: 0.9em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
/* a line on sale: its total at the selling price, the MRP total struck under it (commerce.js renderLines). The
   selling price takes the very spot a regular line's price does (the cell is one line tall, centred on the row) and
   the struck MRP hangs below it, out of the flow - stacked in the flow, the pair was centred and lifted the price ~9px */
.ac-lineitem .lp .pr.is-sale { display: block; position: relative; }
.ac-lineitem .lp .pr.is-sale .pr-was { position: absolute; top: 100%; right: 0; margin-top: 0.1em; line-height: 1.2; }
.ac-remove { font-size: 0.7em; color: var(--alda-muted); background: none; border: none; cursor: pointer; padding: 0; margin-top: 0.4em; text-decoration: underline; font-family: inherit; }
.ac-remove:hover { color: var(--alda-red); }
.ac-empty { padding: 3em 0; text-align: center; color: var(--alda-muted); font-size: 0.9em; }
.ac-dfoot { border-top: 1px solid rgba(34,34,34,0.14); padding: 1.3em 1.5em 1.6em; }
.ac-total { display: flex; justify-content: space-between; font-size: 1.05em; margin-bottom: 1em; font-variant-numeric: tabular-nums; }
.ac-checkout { width: 100%; font-family: inherit; font-size: 0.95em; background: var(--alda-ink); color: var(--alda-paper); border: none; border-radius: 100px; padding: 0.9em; cursor: pointer; transition: background 0.2s; }
.ac-checkout:hover { background: var(--alda-red); color: #fff; }
.ac-stubnote { font-size: 0.75em; color: var(--alda-muted); text-align: center; margin: 0.8em 0 0; display: none; }
.ac-stubnote.show { display: block; }

/* The canvas page loads the site's own bundle, which resets every <button> to `display: inline`,
   `padding: 0` and `text-align: start`. Anything here that centred its label by relying on the UA
   button defaults came out left-aligned there (and correct on the standalone PDP/PLP pages, which
   don't load that bundle) - so these controls centre their own labels explicitly. */
.ac-close, .ac-qty button, .ac-fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}
.ac-close, .ac-qty button { padding: 0; line-height: 1; }
.ac-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
}

/* ---------- liquid glass ----------
   A vanilla port of the material from rdev/liquid-glass-react (MIT). Three things make glass read
   as glass: the backdrop bends at the rim (refraction), the rim catches light (specular), and the
   surface tints what is behind it. Only the first needs the SVG displacement map `commerce.js`
   builds, and only Chromium honours an SVG filter inside `backdrop-filter` - so the blur, tint,
   rim and sheen all live here in plain CSS and every target still reads as lit glass without it. */
.ac-glass { isolation: isolate; }
/* the lit rim - z-index -1 keeps both layers under the element's own label, on top of its tint */
.ac-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset -1px -1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 8px rgba(255, 255, 255, 0.30);
}
/* specular hotspot, driven by --gx/--gy from the pointer */
.ac-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%),
    rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 45%, transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.ac-glass:hover::after, .ac-glass:focus-visible::after { opacity: 1; }

/* the focus panel: a thick slab, so it refracts only along the divider and keeps its heavy blur */
.ac-fpanel.ac-glass {
  background: rgba(245, 246, 238, 0.66);
  border-left-color: rgba(255, 255, 255, 0.5);
  box-shadow: -20px 0 46px rgba(24, 24, 20, 0.09);
}
.ac-fpanel.ac-glass::before {
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}
.ac-fpanel.ac-glass::after { display: none; }

/* glass buttons - the tint carries the hierarchy the solid fills used to */
.ac-fp-btn.ac-glass, .ac-add.ac-glass { position: relative; }
.ac-fp-btn.ac-glass, .ac-add.ac-glass, .ac-cartpill.ac-glass {
  border: 1px solid rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(7px) saturate(150%);
  backdrop-filter: blur(7px) saturate(150%);
  box-shadow: 0 6px 18px rgba(24, 24, 20, 0.16), 0 1px 3px rgba(24, 24, 20, 0.10);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s, box-shadow 0.3s, color 0.2s;
}
/* the tint has to stay dense enough to hold white text over a bright cream backdrop - below about
   0.8 the primary stops reading as the primary and the pair flattens into two ghost buttons */
.ac-fp-btn.ac-glass.is-primary, .ac-add.ac-glass, .ac-cartpill.ac-glass {
  background: rgba(26, 26, 23, 0.84); color: #f7f7f1;
}
.ac-fp-btn.ac-glass.is-primary:hover, .ac-add.ac-glass:hover, .ac-cartpill.ac-glass:hover {
  background: rgba(232, 0, 42, 0.82); border-color: rgba(255, 255, 255, 0.5); color: #fff;
  box-shadow: 0 10px 26px rgba(232, 0, 42, 0.22), 0 1px 3px rgba(24, 24, 20, 0.10);
}
.ac-fp-btn.ac-glass.is-ghost {
  background: rgba(255, 255, 255, 0.22); color: var(--ac-ink);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 18px rgba(24, 24, 20, 0.12), inset 0 0 0 1px rgba(34, 34, 34, 0.07);
}
.ac-fp-btn.ac-glass.is-ghost:hover { background: rgba(255, 255, 255, 0.38); color: var(--ac-ink); }
.ac-cartpill.ac-glass.is-empty .ac-count { background: rgba(255, 255, 255, 0.22); }

/* the core's canvas controls - view toggle, menu, filter, zoom, explore.
   No pseudo-elements here: .innerIcon draws its icon with child spans and their ::after, so the rim
   is an inset shadow and the specular is a background-image layer. The rim is top-lit only, because
   these chips are laid out as touching pairs (icon + label, with a -1px margin) and a left-edge
   highlight would draw a seam straight down the middle of each pill. */
.innerIcon, .innerButton, .button-zoom,
.menu-button_icon, .menu-button_text,
.button-inner, .buton-inner, .button-icon-2 {
  background-image: radial-gradient(circle at var(--gx, 50%) var(--gy, -10%),
    rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1) 45%, transparent 72%);
  -webkit-backdrop-filter: blur(7px) saturate(150%);
  backdrop-filter: blur(7px) saturate(150%);
  transition: background-color 0.25s, box-shadow 0.3s, color 0.2s;
}
.innerIcon, .innerButton {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(34, 34, 34, 0.05),
    0 6px 18px rgba(24, 24, 20, 0.13);
}
.viewButton:hover .innerIcon, .viewButton:hover .innerButton,
.filterCTA:hover .innerIcon, .filterCTA:hover .innerButton,
.innerIcon:hover, .innerButton:hover { background-color: rgba(255, 255, 255, 0.44); }
/* standalone circles, so they get the full rim rather than the top-lit one */
.button-zoom {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(34, 34, 34, 0.05),
    0 6px 18px rgba(24, 24, 20, 0.13);
}
.button-zoom:hover { background-color: rgba(255, 255, 255, 0.44); }
/* experience view: the product tiles' explore buttons are black at rest and turn red on hover, like every button */
.explore-button:hover .buton-inner, .explore-button:hover .button-icon-2 { background-color: var(--alda-red) !important; }
.menu-button_icon, .menu-button_text,
.button-inner, .buton-inner, .button-icon-2 {
  background-color: rgba(26, 26, 23, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(24, 24, 20, 0.18);
}

@media (max-width: 860px) {
  .ac-pdp { grid-template-columns: 1fr; gap: 2em; }
  .ac-title { font-size: 1.8em; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-drawer, body.ac-open .ac-drawer, .ac-scrim, .ac-pill, .ac-add { transition: none; }
  .ac-glass::after { transition: none; }
  .ac-fp-btn.ac-glass, .ac-add.ac-glass, .ac-cartpill.ac-glass { transition: background 0.25s, color 0.2s; }
}

/* ---------- category and sub-category pages ----------
   /prep, /cook, /store-serve list every shelf; /cook/tri-ply-ss is one shelf with the PLP
   controls. A product line with nothing on it yet is a coming-soon card in the same grid. */
.ac-subsec { margin-top: 3.2em; }
.ac-subhead { font-size: 1.45em; font-weight: 550; letter-spacing: -0.02em; margin: 0 0 0.3em; }
.ac-subhead a { color: inherit; text-decoration: none; }
.ac-subhead a:hover { color: var(--ac-red); }
.ac-coming { margin-top: 1px; }
.ac-card.is-coming { display: flex; flex-direction: column; justify-content: flex-end; min-height: 14em; border: 1px dashed var(--ac-line); color: var(--ac-muted); }
.ac-card.is-coming .n { color: var(--ac-ink); }

/* ---------- temporary: the review strip in every footer ----------
   links between the homepage and listing variations while they are being chosen - delete this
   block, proto_strip() in build_home.py and the marker at the end of commerce.js when one is picked */
.ac-shots .ac-product-photo { aspect-ratio:auto; margin:0; overflow:hidden; }
.ac-shots .ac-product-photo img { display:block;width:100%;height:auto;object-fit:contain; }

/* ---------- the add-to-cart stream (cart-fly.js; the product pages since 2026-10-10, from PDP C) ----------
   The product's photographs fan out and pour into the header's cart: above the header (z 300005), below the
   drawer. The add buttons' labels roll to "Added" while they fly. */
.ac-fly { position: fixed; inset: 0; z-index: 300007; pointer-events: none; }
.ac-fly img { position: absolute; margin: 0; object-fit: cover; border-radius: 14px; background: var(--alda-paper);
  box-shadow: 0 22px 48px -12px rgba(34, 34, 34, 0.28), 0 0 0 1px rgba(34, 34, 34, 0.05); will-change: transform, opacity;
  backface-visibility: hidden; }
.ac-roll { position: relative; display: inline-grid; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.ac-roll > span { grid-area: 1 / 1; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s; }
.ac-roll > span + span { transform: translateY(110%); opacity: 0; }
.is-added .ac-roll > span:first-child { transform: translateY(-110%); opacity: 0; }
.is-added .ac-roll > span + span { transform: none; opacity: 1; }
.sn-header .ac-cartpill .sn-glyph { transform-origin: 50% 70%; }
@media (prefers-reduced-motion: reduce) { .ac-roll > span { transition: none; } }

/* ---------- the quick-add size chooser (home.js) on sale ----------
   A size on sale shows its selling price and the struck MRP (window.aldaPrice.node). The chips turn red on hover
   (a choice control), so there both figures take the chip's own light ink; keyboard focus leaves the chip pale with an
   ink edge (focus: Option C), so the figures stay as they are. */
.hm-size .p .pr-now, .hm-size-row .p .pr-now { color: var(--ac-ink); }
.hm-sizes:not(.is-list) .hm-size:hover .pr-now { color: #fff; }
.hm-sizes:not(.is-list) .hm-size:hover .pr-was { color: inherit; }
.hm-sizes.is-list .hm-size .p, .hm-size-row .p { text-align: right; }

/* Approved shared product paper, 2026-10-20. Transparent photography retains its real shadows. */
:root{--alda-product-paper:var(--alda-paper)}
.ac-shot,.ac-card,.ac-card-art,.pa-photo,.pa-thumb,.ac-drawer,.ac-drawer .ac-head,.ac-drawer .ac-lines,.ac-drawer .ac-foot,.ac-lineitem img{background-color:var(--alda-product-paper)}

/* Product surfaces across PDP, listing, recommendation and homepage cards. */
.ac-page .pc,.ac-page .pc-art,.ac-page .ac-card,.ac-page .ac-card img,.ac-page .hm-pcard,.ac-page .hm-pcard .art,.ac-page .v2-card-art,.ac-page .v2-hl-art,.ac-page .pl-pairs li,.ac-page .pl-pairs img,.ac-page .pa-photo,.ac-page .pa-thumb,.ac-page .ac-shot{background-color:var(--alda-paper)}

/* Sold out (commerce.js window.aldaStock, 2026-11-03): where a size's price was, 'Out of stock' in the muted ink; a
   sold-out size on the product page can still be chosen (its photographs show), its Add to cart says why it is off;
   a quick add whose every size is out fades back, and a cart line of one is flagged */
.pr.is-out, .p.is-out { color: var(--ac-muted, #6f7069); }
.pa-size.is-out .l { color: var(--ac-muted, #6f7069); }
.ac-add.is-out .pa-add-price { display: none; }
.pl-pair-add.is-out, [data-add].is-out { opacity: .4; cursor: not-allowed; }
.ac-lineitem .ac-out { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ac-muted, #6f7069); }

/* Notify me (commerce.js initPDP, 2026-11-03): on a product coming soon in every size, the buy panel's one button
   opens the store's sign-up page; the disabled 'Coming soon' button gives way to it */
.pa-cta:has(.pa-notify) .pa-soon, html.sl body.pdp .pa-cta:has(.pa-notify) > .pa-soon { display: none; }
.pdp .pa-notify { display: flex; align-items: center; justify-content: space-between; text-decoration: none; }
.pa-notify .pa-notify-go { font-size: 1.05em; line-height: 1; }
/* a size sold out in both warehouses (2026-11-04): Add to cart says 'Out of stock', and Buy now gives way to 'Notify me
   when it's back' - hidden again while the chosen size is in stock */
.pdp .pa-notify[hidden], .pa-cta.is-sold-out .pa-buy, html.sl body.pdp .pa-cta.is-sold-out .pa-buy { display: none; }