/* 00-base.css */
/* Base: tokens, reset, typography, shared controls and the shared empty-picture tile.
   Colours and fonts are the theme settings: layout/theme.liquid prints them from the settings in an inline <style> that comes
   BEFORE this sheet, so the fallbacks here sit under :where(:root) (zero specificity) and never clobber a printed value.
   Their values mirror the setting defaults in config/settings_schema.json; change both together.
   Geometry (radius, section gap, type scale, shadow) is the kit's own and lives under :root. */
:where(:root) {
  --color-brand: #0d6e66; --color-brand-contrast: #ffffff; --color-accent: #d97706;
  --color-surface: #ffffff; --color-surface-muted: #eef5f4; --color-text: #12201f;
  --color-text-muted: #52666a; --color-border: #d3e3e1;
  --font-heading: Vazirmatn; --font-body: Vazirmatn;
}
:root {
  --container-shop: 1120px;
  --color-danger: #a4262c; --color-danger-soft: #fdf2f2; --color-ok: #1d6f42; --color-ok-soft: #f0f8f3;
  --color-white: #ffffff; --color-black: #000000;
  --color-foreground: var(--color-text); --color-background: var(--color-surface);
  --color-button: var(--color-brand); --color-button-text: var(--color-brand-contrast);
  --brand: var(--color-brand);
  /* The deep end of the brand gradient. Derived, so a shop that changes its brand colour gets a matching one. */
  --color-brand-deep: color-mix(in srgb, var(--color-brand) 74%, var(--color-text));
  /* Shape: one corner scale. Cards are the large radius, buttons and fields the small one. Rules read
     var(--radius-card) directly (never an alias on :root) so the rhythm presets on <body> still reach them. */
  --radius-card: 16px; --radius-button: 10px;
  /* Rhythm: the gap between sections breathes with the screen; --spacing-pad is the page's side gutter. */
  --spacing-section: clamp(40px, 6vw, 96px);
  --spacing-pad: clamp(16px, 4vw, 32px);
  /* One shadow: a close contact line plus a long soft fall, tinted with the text colour. */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--color-text) 16%, transparent);
  --font-title: var(--font-heading), Vazirmatn, "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
  /* Type scale (Vazirmatn 400 / 700 / 800): display for a hero, h1..h3 for headings, lead for a hero's line. */
  --text-display: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem);
  --text-h1: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
  --text-h2: clamp(1.3125rem, 1.15rem + 0.75vw, 1.75rem);
  --text-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-lead: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  --text-body: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --text-small: clamp(0.8125rem, 0.8rem + 0.08vw, 0.875rem);
  --leading-body: 1.9; --leading-heading: 1.5;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-body), Vazirmatn, "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
  font-size: var(--text-body); line-height: var(--leading-body); overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-title); line-height: var(--leading-heading); margin-block: 0 12px; text-wrap: balance; }
h1 { font-size: var(--text-h1); font-weight: 800; }
h2 { font-size: var(--text-h2); font-weight: 700; }
p { margin-block: 0 10px; text-wrap: pretty; }
input, select, textarea, button { font: inherit; font-size: 16px; color: inherit; }
input, select, textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-button); padding: .55em .8em;
  background: var(--color-surface); min-height: 44px; max-width: 100%;
}
.page-width { max-width: var(--container-shop); margin-inline: auto; padding-inline: var(--spacing-pad); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5em 1.4em;
  border: 0; border-radius: var(--radius-button); background: var(--color-button); color: var(--color-button-text);
  font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols-mobile, 2), minmax(0, 1fr)); }
@media (min-width: 750px) { .grid { grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr)); } }
.card { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); color: inherit; }
.card:hover { text-decoration: none; }
.card__body { display: block; padding: 12px; }
.price { font-weight: 700; }
.price s { color: inherit; opacity: .55; font-weight: 400; margin-inline-start: .5em; }
.muted { color: var(--color-text-muted); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The section gap. .pb-container's margin-block shorthand (10-pagebuilder) would override a plain .awix-section, hence the compound selector. */
.pb-container.awix-section { margin-block-start: var(--spacing-section); }
/* The first section of the page starts at the top: no gap above it, with or without an overlay header. */
main > .shopify-section:first-child > .awix-section { margin-block-start: 0; }

/* Section headings: no stray bottom margin (the section stack's gutter spaces them) and a short brand bar under the text.
   The widget's own alignment class places the bar. On a dark section the bar takes the ink colour. */
.pb-heading :is(h1, h2, h3) { margin-block: 0; }
.awix-section > .pb-heading > :is(h1, h2)::after {
  content: ""; display: block; inline-size: 40px; block-size: 3px; margin-block-start: 10px;
  border-radius: 3px; background: var(--color-brand);
}
.awix-section > .pb-heading.text-center > :is(h1, h2)::after { margin-inline: auto; }
.awix-section > .pb-heading.text-end > :is(h1, h2)::after { margin-inline-start: auto; }
.awix-section.bg-on-dark > .pb-heading > :is(h1, h2)::after { background: currentColor; opacity: .6; }

/* ---- the one empty-picture tile (snippet awix-placeholder) ----------------------------------------------------------
   A monogram on a brand-tinted tile with a quiet dot pattern. Every empty picture in the kit is this tile, so there is one
   design: a product card, a category disc, a testimonial avatar, the product gallery. The host class (pb-product-initial,
   pb-taxonomy-initial, pb-quote-face, awix-cat__initial, awix-gallery__empty) only gives it a size, a ratio and a radius.
   --ph-tint is set per tone (data-tone 0..2, from the text length) so a row of tiles is not one flat colour.
   The tile is a size container, so the monogram scales with it (cqi) from a 28px disc to a full gallery stage. */
.awix-ph {
  --ph-tint: var(--color-brand);
  position: relative; display: grid; place-items: center; overflow: hidden; container-type: inline-size; user-select: none;
  background:
    radial-gradient(color-mix(in srgb, var(--ph-tint) 20%, transparent) 1.1px, transparent 1.7px) 0 0 / 14px 14px,
    linear-gradient(150deg, color-mix(in srgb, var(--ph-tint) 17%, var(--color-surface)), color-mix(in srgb, var(--ph-tint) 5%, var(--color-surface)));
  color: color-mix(in srgb, var(--ph-tint) 80%, var(--color-text));
}
.awix-ph[data-tone="1"] { --ph-tint: var(--color-accent); }
.awix-ph[data-tone="2"] { --ph-tint: color-mix(in srgb, var(--color-brand) 55%, var(--color-accent)); }
.awix-ph__mark {
  font-family: var(--font-title); font-weight: 800; line-height: 1; text-transform: uppercase;
  font-size: 2rem; font-size: clamp(.75rem, 40cqi, 5rem);
}
.awix-ph--initials .awix-ph__mark { font-size: 1rem; font-size: clamp(.75rem, 34cqi, 2rem); }
/* 01-fonts.css */
/* Vazirmatn, the kit's default face, shipped in assets/ (SIL Open Font License, see vazirmatn-LICENSE.txt).
   swap: text shows at once in the next face of the stack, then switches to Vazirmatn when it loads. */
@font-face { font-family: "Vazirmatn"; src: url("vazirmatn-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("vazirmatn-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("vazirmatn-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
/* 02-rhythm.css */
/* Rhythm presets (the theme setting `rhythm`, printed as a class on <body> by layout/theme.liquid).
   A preset sets the section gap, the corner radii and the card shadow together. Variables set on <body> win over the
   :root ones the layout prints from the settings, whatever the selector, because <body>'s own declaration beats inheritance.
   `standard` sets nothing on purpose: today's values are the "شکل و فاصله" sliders and 00-base.css, and repeating them
   here would freeze those sliders. `airy` and `compact` replace the sliders (and the pill-button switch) for the radii and the gap. */
body.awix-rhythm-airy {
  --spacing-section: clamp(56px, 8vw, 120px);
  --radius-card: 18px;
  --radius-button: 12px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-text) 3%, transparent), 0 12px 32px color-mix(in srgb, var(--color-text) 5%, transparent);
}
body.awix-rhythm-compact {
  --spacing-section: clamp(24px, 4vw, 56px);
  --radius-card: 6px;
  --radius-button: 4px;
  --shadow-card: none;
}
/* 10-pagebuilder.css */
/* The page-builder's own sheet (AWX-514).
 *
 * # Why this file exists, and what it reverses
 *
 * chrome.css says of its own scan: "pagebuilder/ is deliberately absent: a
 * seller's page is drawn from their own theme and this sheet styles none of
 * its pb-* vocabulary." That sentence was true and its conclusion did not
 * hold. A theme is `theme.RootCSS`'s output — one `:root{--color-brand:…}`
 * block of custom properties — and a custom property nothing consumes paints
 * nothing. So every applied template rendered as an unstyled column: no
 * section background, no grid, no card, no padding. `grep -rn "pb-container"`
 * across this repository returned exactly one line, the one that writes it.
 *
 * The separation this file keeps is the one that was actually meant: the
 * chrome does not style pb-*, and pb-* does not style the chrome. What a
 * seller's theme decides is the VALUES — every colour, radius and measure
 * below is `var(--color-…)` and none is a literal — and what this sheet
 * decides is only that a section has a background at all.
 *
 * # Why plain rules and not utilities in the markup
 *
 * A widget's classes are chosen by tables in layout.go and config.go from a
 * config a shop admin wrote, and the rule those tables exist for is that no
 * class name is ever built by concatenating a database string. Utilities in
 * widgets.templ would not break that — but they would mean a page's layout is
 * decided in two files instead of one, and the span/gutter/ratio tables would
 * have to carry Tailwind spellings that the config's own vocabulary does not
 * have. The tables stay semantic; this sheet is where they mean something.
 *
 * It is imported by chrome.css so the binary still serves ONE stylesheet.
 *
 * # No physical directions
 *
 * TestStylesheet_HasNoPhysicalDirection covers the generated bytes, so every
 * rule here is logical: padding-inline, margin-block, inset-inline-start,
 * text-align: end. A shop page is RTL and the same sheet has to be correct if
 * one is ever not.
 */

@layer components {
  /* ---- container -------------------------------------------------------
     The tree is section.pb-container > div.pb-cell.col-N > widget, so the
     container is the grid and the cell is what carries a span. Twelve
     columns, the same twelve layout.go validates spans against.

     --awix-bg / --awix-pad-y / --awix-pad-x are set by the node's own style
     attribute, from the spacing and background traits, through the allow-list
     in tokens.go. A value that is not a hex colour or a length never reaches
     the document, so the fallbacks here are what an unconfigured — or a
     rejected — trait renders as. */
  .pb-container {
    display: grid;
    background: var(--awix-bg, transparent);
    /* background.imageId, already resolved to our own /media/<id> by
       tokens.go — never a URL the config wrote. Cover and centred: a section
       background is a photo behind content, not a pattern. */
    background-image: var(--awix-bg-image, none);
    background-size: cover;
    background-position: center;
    padding-block: var(--awix-pad-y, 0);
    padding-inline: var(--awix-pad-x, 0);
    /* spacing's margins, clamped at zero by tokens.go: a margin can only push
       a section away from its neighbours, never over them. */
    margin-block: var(--awix-margin-y, 0);
    border-radius: var(--awix-radius, 0);
    /* One pixel and transparent until the border trait says otherwise: a
       border that appears only when configured would move everything inside it
       by two pixels the moment somebody turns it on. */
    border: var(--awix-border-width, 1px) solid var(--awix-border-color, transparent);
  }

  /* A top-level block is a .pb-cell whose parent is not a .pb-container (Tree
     renders the root through children(), so the old .pb-container + .pb-container
     never matched — two containers are never direct siblings). Every top-level
     block after the first visible one gets --spacing-section above it, whether
     it is a section or a standalone widget. The first block gets none because it
     sits directly under the chrome's own py-section. :not(:empty) on both sides
     keeps a widget that rendered nothing (its cell is empty) from adding or
     doubling a gap. Cells inside a container are excluded because the container
     grid's gutter gap already spaces them. */
  :not(.pb-container) > .pb-cell:not(:empty) ~ .pb-cell:not(:empty) {
    margin-block-start: var(--spacing-section);
  }

  /* The two container modes, each with its own track list rather than one
     default and one override: a row divides the twelve columns layout.go
     validates spans against, and a stack is one column whatever the spans say
     (layout.go already returns col-12 for every child of a stack). */
  .pb-container.layout-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .pb-container.layout-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .pb-container.align-start { align-items: start; }
  .pb-container.align-center { align-items: center; }
  .pb-container.align-end { align-items: end; }
  .pb-container.align-stretch { align-items: stretch; }

  .gutter-0 { gap: 0; }
  .gutter-4 { gap: 4px; }
  .gutter-8 { gap: 8px; }
  .gutter-12 { gap: 12px; }
  .gutter-16 { gap: 16px; }
  .gutter-24 { gap: 24px; }
  .gutter-32 { gap: 32px; }
  .gutter-48 { gap: 48px; }
  .gutter-64 { gap: 64px; }

  /* Below the fold-out width every cell spans all twelve tracks (.pb-cell), so
     the column gap buys nothing: the cell is as wide as the container either
     way. It costs plenty though. Twelve tracks carry eleven column gaps, and a
     gutter of 32px or more makes those gaps wider than a phone, so the grid
     overflows and the cell is pushed out of the page's column. Only the row
     gap, the one that spaces stacked cells, survives. */
  @media (max-width: 47.999rem) {
    .pb-container.layout-row,
    .pb-container.layout-stack {
      column-gap: 0;
    }
  }

  /* The measure is <main>'s already, and saying it again here is what makes a
     container correct if it is ever rendered outside one — the preview route
     renders the same tree through a different shell. */
  /* layout.max_width_px narrows the measure (--awix-max-width); the
     horizontal margin insets the box from both sides without giving up the
     auto centring. */
  .pb-container.width-measure {
    inline-size: calc(100% - 2 * var(--awix-margin-x, 0px));
    max-inline-size: var(--awix-max-width, var(--container-shop));
    margin-inline: auto;
  }

  /* Edge to edge for real: the box reaches both sides of the viewport, while
     its padding keeps the children on the page's own measure — a band whose
     background bleeds, not a product grid stretched to 1440px. `50% - 50cqi`
     is measured from the centred column the container sits in. cqi, not vw:
     the shop shell is a query container (@container/shop, shell.templ) that
     spans the viewport WITHOUT its scrollbar, while 100vw includes a classic
     scrollbar and would scroll every page sideways ("390px with no
     horizontal scroll" is a C-8.2 clause). */
  /* --pb-bleed-pad is the inset that puts an edge-to-edge box's content
     back on the page's column: half of what the viewport has beyond the
     shop measure, plus <main>'s own pad. */
  .pb-container.width-full,
  .pb-hero.hero-width-full {
    --pb-bleed-pad: calc((100cqi - var(--container-shop)) / 2 + var(--spacing-pad));
  }
  .pb-container.width-full {
    margin-inline: calc(50% - 50cqi + var(--awix-margin-x, 0px));
    padding-inline: max(var(--spacing-pad), var(--awix-pad-x, 0px), var(--pb-bleed-pad));
  }

  /* background.overlay: a scrim between the photo and the text, so a heading
     over a busy picture stays readable. Dark writes white; light keeps the
     theme's text colour. Only emitted when an image renders (tokens.go). */
  .bg-overlay-dark {
    background-image:
      linear-gradient(color-mix(in srgb, var(--color-black) 55%, transparent), color-mix(in srgb, var(--color-black) 55%, transparent)),
      var(--awix-bg-image, none);
    color: var(--color-white);
  }
  .bg-overlay-light {
    background-image:
      linear-gradient(color-mix(in srgb, var(--color-white) 70%, transparent), color-mix(in srgb, var(--color-white) 70%, transparent)),
      var(--awix-bg-image, none);
  }
  /* A card keeps its own surface under a dark scrim, so it keeps the
     theme's text colour too — white on a white card is no card at all. */
  .bg-overlay-dark :is(.pb-product, .pb-blog-card, .pb-alert.alert-info, .pb-alert.alert-warning, .pb-band-item) {
    color: var(--color-text);
  }
  /* The white text itself is outside the layer — see the end of this file. */

  /* The canvas placeholder for a widget with nothing to draw yet
     (widgets.templ emptyWidget). Only a preview renders one, so the public
     page pays nothing for it beyond these bytes. */
  .pb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-block-size: 72px;
    padding: 12px;
    border: 2px dashed #94a3b8;
    border-radius: 12px;
    background: rgba(148, 163, 184, .08);
    color: #475569;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
  }
  .pb-empty span {
    font-size: 12px;
    opacity: .8;
  }

  /* A flat background colour picks its own ink (tokens.go isDarkColor): white
     on a dark section, and the theme's text again on a light section nested
     inside one. A custom property, so the NEAREST coloured section wins. */
  .bg-on-dark {
    --pb-ink: var(--color-white);
    color: var(--pb-ink);
  }
  .bg-on-dark .bg-on-light {
    --pb-ink: var(--color-text);
    color: var(--pb-ink);
  }
  /* A card keeps its own light surface on a dark section, so it takes the
     theme's text back: white words on an ivory trust or stats card vanish. */
  .bg-on-dark :is(.pb-product, .pb-blog-card, .pb-alert.alert-info, .pb-alert.alert-warning, .pb-band-item) {
    color: var(--color-text);
  }

  .pb-cell {
    /* min-inline-size: 0 or a grid child refuses to shrink below its content
       and a long product title widens the whole column. */
    min-inline-size: 0;
    grid-column: span 12;
    /* The box traits describe ONE box, and custom properties inherit: a
       section's shadow, border or background image would otherwise repaint
       on every section and widget inside it. `initial` on a custom property
       is the guaranteed-invalid value, so each var() below falls back again
       one level down. --awix-bg is here too: an inner section inheriting the
       outer one's colour repainted it as a solid block over the outer
       section's background image. Card, description and more-button tokens
       are read by a widget's own descendants and are deliberately not reset. */
    --awix-shadow-size: initial;
    --awix-shadow-color: initial;
    --awix-border-color: initial;
    --awix-border-width: initial;
    --awix-margin-x: initial;
    --awix-margin-y: initial;
    --awix-width: initial;
    --awix-height: initial;
    --awix-bg: initial;
    --awix-bg-image: initial;
    --awix-max-width: initial;
  }

  /* A section whose widget drew nothing keeps only its heading, and a heading
     over empty space is the thing that makes a new shop look broken.
     `empty_policy = hide` is right — a bordered box saying "no products" is
     worse — but the TITLE is a sibling node and does not know its widget
     vanished. Seen on 2026-09-08 in a browser: a shop with no products yet
     rendered «تازه به گلخانه رسید» over nothing, twice.
     
     Two conditions, and the first is what makes this safe: an EMPTY cell must
     exist, which happens only when a widget rendered nothing at all
     (children() always writes the cell). A container holding a deliberate
     lone heading has no empty cell and is untouched. */
  .pb-container:has(> .pb-cell:empty):not(:has(> .pb-cell > :not(.pb-heading))) {
    display: none;
  }

  /* One column below the fold-out width. A twelve-column grid at 390px is
     twelve unreadable slivers, so spans only apply once there is room for
     them — the same breakpoint the chrome's own two-column layouts use. */
  @media (min-width: 48rem) {
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
  }

  /* ---- device visibility ----------------------------------------------
     A node marked for one viewport is still in the document — one cached page
     serves both (05-rendering-and-caching) — so it is hidden, not omitted. */
  .only-desktop { display: none; }
  @media (min-width: 48rem) {
    .only-desktop { display: revert; }
    .only-mobile { display: none; }
  }

  /* ---- widgets ---------------------------------------------------------- */
  .pb-widget {
    min-inline-size: 0;
  }

  /* The shadow trait, on every node type that offers it (tokens.go defaults
     the size to 12px once the trait is on). Zero size is no shadow. */
  .pb-container,
  .pb-widget {
    box-shadow: 0 calc(var(--awix-shadow-size, 0px) / 3) var(--awix-shadow-size, 0px) var(--awix-shadow-color, #1018281f);
  }

  /* The class names are logical, and so is what they do — see
     textAlignClasses in layout.go for why the config's own keys are not. */
  .text-start { text-align: start; }
  .text-center { text-align: center; }
  .text-end { text-align: end; }
  .text-justify { text-align: justify; }

  /* The heading widget's own element carries the chrome's h1/h2 rules
     already; h3..h6 have none, and a template that uses one for a section
     label would otherwise render at body size. */
  .pb-heading h1,
  .pb-heading h2 {
    margin-block: 0;
  }
  .pb-heading h3 {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    margin-block: 0;
  }
  .pb-heading h4,
  .pb-heading h5,
  .pb-heading h6 {
    font-family: var(--font-title);
    font-size: var(--text-body);
    font-weight: 700;
    margin-block: 0;
  }

  .pb-text {
    color: var(--color-text);
    max-inline-size: 72ch;
    line-height: 1.9;
  }
  /* A centred paragraph has to be centred as a BLOCK too, or the measure
     above pins it to the start edge and the text-align has no visible
     effect. */
  .pb-text.text-center {
    margin-inline: auto;
  }
  .pb-text :last-child {
    margin-block-end: 0;
  }
  /* One column is the schema's default and says so, so that a text widget
     switched back from two columns is not relying on the absence of a rule. */
  .columns-1 { columns: 1; }
  .columns-2,
  .columns-3 {
    column-gap: 32px;
  }
  @media (min-width: 48rem) {
    .columns-2 { columns: 2; }
    .columns-3 { columns: 3; }
  }

  .pb-html :last-child {
    margin-block-end: 0;
  }

  /* ---- image ------------------------------------------------------------
     <figure> is the wrapper, so its default margin has to go — a stray 40px
     inline margin on a hero is the kind of thing that reads as "the template
     is broken" rather than "the template has a margin". */
  .pb-image {
    margin: 0;
    overflow: hidden;
    border: var(--awix-border-width, 0px) solid var(--awix-border-color, transparent);
    border-radius: var(--awix-radius, var(--radius-card));
  }
  /* The size trait (image and alert): an explicit box, never wider than its
     column — a 1200px image in a 390px phone column is a horizontal scroll. */
  .pb-image,
  .pb-alert {
    inline-size: var(--awix-width, auto);
    block-size: var(--awix-height, auto);
    max-inline-size: 100%;
  }
  .pb-image img,
  .pb-image a {
    display: block;
    inline-size: 100%;
  }
  .pb-image a {
    block-size: 100%;
  }
  .pb-image img {
    block-size: 100%;
  }
  .fit-cover img { object-fit: cover; }
  .fit-contain img { object-fit: contain; }
  /* auto keeps the file's own proportions, which is what stops a logo being
     stretched into a band; the other three are the schema's fixed ratios. */
  .ratio-auto img { aspect-ratio: auto; }
  .ratio-1x1 img { aspect-ratio: 1 / 1; }
  .ratio-4x3 img { aspect-ratio: 4 / 3; }
  .ratio-16x9 img { aspect-ratio: 16 / 9; }
  /* ratio-auto sets none: the image keeps its intrinsic proportions, which is
     what "auto" means and what stops a logo being stretched into a band. */
  /* fill (migration 000268): the picture takes its column's height — the
     lifestyle half of a picture-beside-products section. Stacked on a phone
     there is no neighbour to match, so it falls back to 4:3; from the tablet
     breakpoint the picture is taken out of flow so its own proportions never
     make the row taller than the products beside it. */
  .ratio-fill img { aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 48rem) {
    .pb-image.ratio-fill {
      position: relative;
      block-size: 100%;
      min-block-size: 16rem;
    }
    .ratio-fill img {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
    }
  }

  /* ---- alert ------------------------------------------------------------ */
  .pb-alert {
    display: flex;
    align-items: start;
    gap: 12px;
    border: var(--awix-border-width, 1px) solid var(--awix-border-color, var(--color-border));
    border-radius: var(--awix-radius, var(--radius-card));
    padding: 12px 16px;
  }
  /* info is the schema's default and gets its own rule rather than inheriting
     the element's: every variant is then one line to read, and the neutral
     one cannot be the accidental result of a missing branch. */
  .pb-alert.alert-info {
    background: var(--color-surface-muted);
  }
  .pb-alert p { margin: 0; }
  .pb-alert.alert-success {
    border-color: var(--awix-border-color, var(--color-ok));
    background: var(--color-ok-soft);
    color: var(--color-ok);
  }
  .pb-alert.alert-warning {
    border-color: var(--awix-border-color, var(--color-accent));
    background: var(--color-surface-muted);
  }
  .pb-alert.alert-danger {
    border-color: var(--awix-border-color, var(--color-danger));
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }
  .pb-alert-close {
    margin-inline-start: auto;
    background: transparent;
    color: inherit;
    border: 0;
    min-block-size: 40px;
    min-inline-size: 40px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
  }

  /* ---- spacer -----------------------------------------------------------
     A step scale, the same one spacerSteps holds. The mobile class comes
     second in source order so it wins at narrow widths without !important. */
  .pb-spacer { inline-size: 100%; }
  .h-0 { block-size: 0; }
  .h-8 { block-size: 8px; }
  .h-16 { block-size: 16px; }
  .h-24 { block-size: 24px; }
  .h-32 { block-size: 32px; }
  .h-48 { block-size: 48px; }
  .h-64 { block-size: 64px; }
  .h-96 { block-size: 96px; }
  .h-128 { block-size: 128px; }
  .h-200 { block-size: 200px; }
  .h-400 { block-size: 400px; }
  @media (max-width: 47.999rem) {
    .h-mobile-0 { block-size: 0; }
    .h-mobile-8 { block-size: 8px; }
    .h-mobile-16 { block-size: 16px; }
    .h-mobile-24 { block-size: 24px; }
    .h-mobile-32 { block-size: 32px; }
    .h-mobile-48 { block-size: 48px; }
    .h-mobile-64 { block-size: 64px; }
    .h-mobile-96 { block-size: 96px; }
    .h-mobile-128 { block-size: 128px; }
    .h-mobile-200 { block-size: 200px; }
    .h-mobile-400 { block-size: 400px; }
  }

  /* ---- product grid -----------------------------------------------------
     --awix-cols / --awix-cols-mobile carry the responsive_count trait the
     template declared. Both go through tokens.go's allow-list, so the value
     in the grid is a small integer or nothing at all. */
  .pb-product-grid,
  .pb-taxonomy-list {
    display: grid;
    grid-template-columns: repeat(var(--awix-cols-mobile, 2), minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 48rem) {
    .pb-product-grid,
    .pb-taxonomy-list {
      grid-template-columns: repeat(var(--awix-cols, 4), minmax(0, 1fr));
      gap: 16px;
    }
  }

  /* The two listing wrappers. Their grid is on the <ul> inside; what belongs
     on the wrapper is the space between a heading and its rows, which is the
     same for both so that two listings on one page are not two rhythms. */
  .pb-products,
  .pb-product-tabs {
    display: block;
  }

  .pb-product {
    display: flex;
    flex-direction: column;
    gap: 8px;
    block-size: 100%;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .pb-product { transition: none; }
  }
  .pb-product:hover,
  .pb-product:focus-within {
    border-color: var(--brand, var(--color-brand));
    box-shadow: 0 8px 24px #1018280f;
  }
  .pb-product-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    text-decoration: none;
  }
  .pb-product-link:hover,
  .pb-product-link:focus-visible {
    text-decoration: none;
  }
  .pb-product-link img,
  .pb-product-initial {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--radius-card) - 4px);
    background: var(--color-surface-muted);
  }
  /* The initial is the same fallback taxonomyCard already draws for a
     category with no picture: a product image route does not exist yet
     (D-97), and a letter tile is a card that looks finished rather than one
     that looks broken. */
  .pb-product-initial {
    display: grid;
    place-items: center;
    font-family: var(--font-title);
    font-size: 34px;
    font-weight: 800;
    color: var(--color-text-muted);
    user-select: none;
  }
  .pb-product-title {
    font-family: var(--font-title);
    font-size: var(--text-body);
    font-weight: 700;
    line-height: 1.7;
    margin: 0;
    /* Two lines and then an ellipsis: a card whose title is four lines long
       makes its neighbours' prices sit at four different heights. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pb-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    margin-block-start: auto;
  }
  .pb-product-price-final {
    font-weight: 800;
    font-size: var(--text-body);
  }
  .pb-product-price-list {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }
  /* Green is money and only money (docs/design/README.md §1.1), and a
     discount badge is money. */
  .pb-product-discount {
    color: var(--color-ok);
    background: var(--color-ok-soft);
    border-radius: 999px;
    padding-inline: 8px;
    padding-block: 2px;
    font-size: var(--text-small);
    font-weight: 700;
  }
  .pb-product-unavailable {
    align-self: start;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-radius: 999px;
    padding-inline: 8px;
    padding-block: 2px;
    font-size: var(--text-small);
  }
  .pb-product-cart {
    inline-size: 100%;
    min-block-size: 40px;
  }

  .pb-single-product {
    display: grid;
    gap: 16px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  /* ---- taxonomy ---------------------------------------------------------
     The strip layout is a horizontal scroller rather than a wrapped grid: a
     brand strip is a secondary row and a second grid of the same weight as
     the product grid above it competes with it. */
  /* A category grid keeps the shared grid above; a brand strip is a secondary
     row and gets chips instead, so that a second grid of equal weight does not
     compete with the products it sits under. */
  .pb-taxonomy.layout-grid .pb-taxonomy-list {
    grid-auto-rows: 1fr;
  }
  .kind-brand .pb-taxonomy-item {
    padding-block: 8px;
  }
  .kind-brand .pb-taxonomy-initial {
    inline-size: 28px;
    block-size: 28px;
    font-size: var(--text-small);
  }
  .kind-category .pb-taxonomy-name {
    font-size: var(--text-body);
  }
  .pb-taxonomy.layout-strip .pb-taxonomy-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pb-taxonomy-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text);
    text-decoration: none;
  }
  .pb-taxonomy-item:hover,
  .pb-taxonomy-item:focus-visible {
    border-color: var(--brand, var(--color-brand));
    text-decoration: none;
  }
  .pb-taxonomy-initial {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    flex: none;
    border-radius: 999px;
    background: var(--color-surface-muted);
    font-family: var(--font-title);
    font-weight: 800;
  }
  .pb-taxonomy-logo {
    inline-size: 36px;
    block-size: 36px;
    flex: none;
    object-fit: contain;
  }
  /* Logo alone: the tile centres it and gives it room, since it is the
     whole card now. A logo-less row still carries its name (taxonomyCard). */
  .display-logo .pb-taxonomy-item {
    justify-content: center;
    min-block-size: 72px;
  }
  .display-logo .pb-taxonomy-logo {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: 48px;
  }
  .pb-taxonomy-name {
    font-weight: 700;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pb-taxonomy-count {
    margin-inline-start: auto;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    white-space: nowrap;
  }

  /* ---- tabs ------------------------------------------------------------- */
  .pb-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 16px;
    border-block-end: 1px solid var(--color-border);
  }
  .pb-tab {
    background: transparent;
    color: var(--color-text-muted);
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    min-block-size: 44px;
    padding-inline: 12px;
    font-weight: 700;
  }
  /* The island moves `hidden` between panels; this is what makes that
     authoritative even if a later display rule lands on the panel. */
  .pb-tabpanel[hidden] {
    display: none;
  }
  .pb-tab[aria-selected="true"] {
    color: var(--brand, var(--color-brand));
    border-block-end-color: var(--brand, var(--color-brand));
  }

  /* ---- countdown -------------------------------------------------------- */
  .pb-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-block-end: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-card);
    background: var(--color-surface-muted);
    font-size: var(--text-small);
  }
  .pb-countdown-label {
    color: var(--color-text-muted);
  }
  .pb-countdown-remaining {
    font-weight: 800;
    color: var(--color-accent);
  }
  /* What replaces the timer once the deadline has passed. Muted, because an
     offer that has ended is information rather than an offer. */
  .pb-countdown-message {
    color: var(--color-text-muted);
  }

  /* ---- skeleton (owner preview only) ------------------------------------
     A section with no data draws grey blocks in its real layout, so the owner
     sees where the shop's products and categories will go. Only the panel's
     preview ever emits these classes. Nothing invented is drawn: no names, no
     prices, no pictures, no links.

     Three cues that none is colour alone: the label in text, a dashed frame
     (survives greyscale and high contrast), and no pointer affordance. No
     animation either: a pulsing block reads as "loading", and nothing is
     loading. Semantic tokens only, so both themes hold. */
  .pb-sample {
    padding: 12px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
  }
  .pb-sample-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    margin-block-end: 12px;
  }
  .pb-sample-badge {
    padding-inline: 10px;
    padding-block: 4px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-weight: 700;
    line-height: 1.8;
  }
  .pb-skeleton {
    display: block;
    background: var(--color-surface-muted);
    border-radius: calc(var(--radius-card) - 4px);
  }
  .pb-taxonomy-initial.pb-skeleton { border-radius: 999px; }
  .pb-skeleton-media {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
  }
  .pb-skeleton-line {
    block-size: 14px;
    inline-size: 100%;
  }
  .pb-skeleton-short { inline-size: 60%; }
  .pb-skeleton-price { inline-size: 40%; }
  .pb-skeleton-name { flex: 1; min-inline-size: 48px; }
  .pb-product-sample {
    border-style: dashed;
  }
  .pb-product-sample:hover,
  .pb-product-sample:focus-within {
    border-color: var(--color-border);
    box-shadow: none;
  }
  .pb-taxonomy-item.is-sample {
    border-style: dashed;
    cursor: default;
  }
  .pb-taxonomy-item.is-sample:hover {
    border-color: var(--color-border);
  }

  /* AWX-507 — the two blog widgets. Same card surface as .pb-product so a
     page mixing products and posts reads as one system; a 16:9 image because
     a post's picture is a cover, not a packshot. */
  .pb-blog-posts,
  .pb-blog-page {
    display: block;
  }
  .pb-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 48rem) {
    .pb-blog-grid {
      grid-template-columns: repeat(var(--awix-cols, 3), minmax(0, 1fr));
      gap: 16px;
    }
  }
  .pb-blog-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    block-size: 100%;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
  }
  .pb-blog-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    min-block-size: 40px;
  }
  .pb-blog-card img,
  .pb-blog-page img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(var(--radius-card) - 4px);
    background: var(--color-surface-muted);
  }
  .pb-blog-title,
  .pb-blog-page-title {
    font-family: var(--font-title);
    font-size: var(--text-body);
    font-weight: 700;
    line-height: 1.7;
    margin: 0;
  }
  .pb-blog-date,
  .pb-blog-summary {
    margin: 0;
    font-size: var(--text-small);
    color: var(--color-text-muted);
    unicode-bidi: isolate;
  }
  /* The description trait styles the summary line, not the date. */
  .pb-blog-summary {
    font-size: var(--awix-desc-size, var(--text-small));
    color: var(--awix-desc-color, var(--color-text-muted));
  }
  .pb-blog-page {
    max-inline-size: 72ch;
  }
  .pb-blog-page-content img {
    max-inline-size: 100%;
    block-size: auto;
  }
  .pb-blog-page > * + * {
    margin-block-start: 12px;
  }
  .pb-blog-page .pb-blog-link {
    display: inline-flex;
    align-items: center;
    color: var(--brand, var(--color-brand));
  }

  /* The org chart widget: nested lists, one card per position. A phone gets a
     single vertical list with a rule down the start edge of each level;
     layout "auto" spreads sibling positions into columns once there is room,
     "list" keeps the vertical list at every width. Logical properties only,
     so the same rules read correctly in RTL. */
  .pb-org {
    display: block;
  }
  .pb-org-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .pb-org-list .pb-org-list {
    margin-block-start: 8px;
    margin-inline-start: 12px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--color-border);
  }
  .pb-org-item {
    min-inline-size: 0;
  }
  .pb-org-summary {
    display: block;
    list-style: none;
    cursor: pointer;
  }
  .pb-org-summary::-webkit-details-marker {
    display: none;
  }
  .pb-org-summary:focus-visible {
    outline: 2px solid var(--brand, var(--color-brand));
    outline-offset: 2px;
    border-radius: var(--awix-radius, var(--radius-card));
  }
  .pb-org-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-block-size: 44px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
    overflow-wrap: anywhere;
  }
  /* The chevron of a position that has reports: a bordered square turned
     into an arrow, so it needs no glyph and no mirroring. */
  .pb-org-summary .pb-org-card::after {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    margin-inline-start: auto;
    margin-block-start: 6px;
    border-inline-end: 2px solid var(--color-text-muted);
    border-block-end: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }
  .pb-org-branch[open] > .pb-org-summary .pb-org-card::after {
    transform: rotate(-135deg);
  }
  .pb-org-photo {
    flex: none;
    inline-size: 56px;
    block-size: 56px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--color-surface-muted);
  }
  .pb-org-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 0;
  }
  .pb-org-title {
    font-family: var(--font-title);
    font-size: var(--text-body);
    font-weight: 700;
    line-height: 1.7;
  }
  .pb-org-holder {
    font-size: var(--text-body);
  }
  .pb-org-note {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }
  .pb-org-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--text-small);
  }
  .pb-org-link {
    color: var(--brand, var(--color-brand));
    unicode-bidi: isolate;
  }
  @media (min-width: 48rem) {
    .pb-org-spread .pb-org-list .pb-org-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
      align-items: start;
    }
  }

  /* Migration 000331 — widget:portfolio draws the blog card (the same surface,
     so posts and projects read as one system) under an optional heading, with
     the client and year on one wrapping line. */
  .pb-portfolio {
    display: block;
  }
  .pb-portfolio-title {
    font-family: var(--font-title);
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0 0 12px;
  }
  .pb-portfolio .pb-blog-date {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
  }

  /* widget:food_menu — the menu's own dish cards (view.FoodMenuItems, styled
     by chrome.css) under one heading per section, then the more_button look
     for the link to /menu. Tokens only. */
  .pb-food-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .pb-food-menu-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pb-food-menu-title {
    font-family: var(--font-title);
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0;
  }

  /* widget:booking — a compact entry: heading, one sentence and the shared
     more_button look for the call to action. Tokens only. */
  .pb-booking {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pb-booking-title {
    font-family: var(--font-title);
    font-size: var(--text-h2);
    font-weight: 700;
    margin: 0;
  }
  .pb-booking-text {
    margin: 0;
    color: var(--color-text-muted);
  }

  /* ---- more_button ------------------------------------------------------
     «مشاهده‌ی همه» under a listing (moreButton in widgets.templ). Every value
     is the trait's --awix-more-* token or the theme's own button look. */
  .pb-more {
    display: flex;
    justify-content: center;
    margin: 0;
    margin-block-start: 16px;
  }
  .pb-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding-block: var(--awix-more-pad-y, 10px);
    padding-inline: var(--awix-more-pad-x, 24px);
    background: var(--awix-more-bg, var(--brand, var(--color-brand)));
    color: var(--awix-more-fg, var(--color-brand-contrast));
    border: var(--awix-more-border-width, 0px) solid var(--awix-more-border-color, transparent);
    border-radius: var(--awix-more-radius, var(--radius-card));
    box-shadow: 0 calc(var(--awix-more-shadow-size, 0px) / 3) var(--awix-more-shadow-size, 0px) var(--awix-more-shadow-color, #1018281f);
    font-size: var(--awix-more-font-size, var(--text-body));
    font-weight: 700;
    text-decoration: none;
  }
  .pb-more-link:hover,
  .pb-more-link:focus-visible {
    text-decoration: none;
  }
  .pb-more-full .pb-more-link {
    inline-size: 100%;
  }

  /* ---- section variants (migration 000268) ------------------------------
     Three primitives carry every variant: a cover (a picture with words
     stacked on it in ONE grid cell, so neither needs absolute positioning to
     overlap), a tile grid, and a scroll-snap carousel. A hero, a slide, a
     bento tile and a banner are compositions of those. */
  .pb-hero,
  .hero-split,
  .hero-slider,
  .hero-bento,
  .pb-banners,
  .pb-band {
    display: block;
  }
  .pb-cover {
    position: relative;
    display: grid;
    overflow: hidden;
    block-size: 100%;
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-surface-muted);
    color: inherit;
    text-decoration: none;
  }
  .pb-cover > * { grid-area: 1 / 1; }
  .pb-cover-media {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  /* Positioned so it paints above a picture that is taken out of flow. */
  .pb-cover-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 10px;
    padding: clamp(20px, 5vw, 56px);
  }
  .pb-cover-body.text-center { align-items: center; }
  .pb-cover-body.text-end { align-items: end; }
  .pb-cover-body > * { max-inline-size: 40rem; }
  .pb-cover-caption {
    align-self: end;
    padding: 16px;
    color: var(--color-white);
    background-image: linear-gradient(to top, color-mix(in srgb, var(--color-black) 65%, transparent), transparent);
  }
  a.pb-cover:focus-visible { outline-offset: -2px; }
  .corners-square .pb-cover { border-radius: 0; }

  /* A cover of fixed height crops its picture to fill it. The height is the
     hero's height preset (migration 000298): standard is the one height this
     had before the presets, strip a short band — 4:1 on a wide screen and
     taller than that on a phone, where its words need the room — and tall
     nearly the whole first screen. min-, not a fixed block-size: words that
     outgrow the band grow it rather than spill out of it. */
  :is(.hero-fullbleed, .pb-hero-slides) .pb-cover { min-block-size: var(--pb-hero-h, clamp(18rem, 42vw, 34rem)); }
  .hero-h-strip { --pb-hero-h: clamp(12rem, 25vw, 22rem); }
  .hero-h-tall { --pb-hero-h: clamp(28rem, 62vw, calc(100svh - 8rem)); }
  :is(.hero-fullbleed, .pb-hero-slides, .tiles-bento) .pb-cover-media {
    position: absolute;
    inset: 0;
  }

  .pb-hero-words,
  .pb-hero-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pb-hero-intro { margin-block-end: 16px; }
  .pb-hero-title {
    margin: 0;
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.45;
  }
  .pb-cover-caption .pb-hero-title { font-size: var(--text-h2); line-height: 1.5; }
  .pb-hero-text {
    margin: 0;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
    line-height: 1.9;
  }
  .pb-cover-caption .pb-hero-text { font-size: var(--text-small); }
  .pb-hero-cta { margin: 0; margin-block-start: 6px; }

  /* split: picture first on a phone, beside the words from the tablet
     breakpoint on the side image_side names. */
  .pb-hero-split {
    display: grid;
    gap: 20px;
    align-items: center;
  }
  .pb-hero-figure,
  .img-start .pb-hero-figure { order: -1; margin: 0; }
  .pb-hero-figure img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--awix-radius, var(--radius-card));
  }
  .hero-h-strip .pb-hero-figure img { aspect-ratio: 2 / 1; }
  .hero-h-tall .pb-hero-figure img { aspect-ratio: 4 / 5; }
  @media (min-width: 48rem) {
    .pb-hero-split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px;
    }
    .img-end .pb-hero-figure { order: 1; }
    /* A portrait picture beside the words would out-tower them; it takes
       the narrower column. */
    .hero-h-tall .pb-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
    .hero-h-tall .img-start.pb-hero-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  }

  /* split's items: a list of links under its words, two to a row. */
  .pb-hero-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    margin-block-start: 8px;
    padding: 0;
  }
  .pb-hero-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "media title" "media text";
    align-items: center;
    column-gap: 10px;
    block-size: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
  }
  a.pb-hero-link:hover,
  a.pb-hero-link:focus-visible { border-color: var(--color-brand); }
  .pb-hero-link-media {
    grid-area: media;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 999px;
    object-fit: cover;
  }
  .pb-hero-link-title { grid-area: title; font-weight: 700; overflow-wrap: anywhere; }
  .pb-hero-link-text { grid-area: text; font-size: var(--text-small); color: var(--color-text-muted); overflow-wrap: anywhere; }

  /* width: full (migration 000298) — the hero leaves the page's column and
     reaches both edges of the viewport, the way .width-full above does and
     for the same reasons. Its words stay lined up with the page's column.
     Measured from the centred column its container draws, so it is exact
     for a hero that fills its container's width — the stack every template
     puts it in; a hero sharing a row with a sibling is not full-width
     material and is outside this rule's promise. */
  .pb-hero.hero-width-full {
    margin-inline: calc(50% - 50cqi);
  }
  .hero-width-full .pb-cover-body { padding-inline: max(clamp(20px, 5vw, 56px), var(--pb-bleed-pad)); }
  /* An edge-to-edge hero that opens the page meets the header: <main>'s top
     padding is taken back by the section that holds it. "Opens the page" is
     the tree's first cell with nothing but ld+json <script>s before it: the
     home renders its JSON-LD ahead of the tree, so :first-child never matched
     a live page. Not :first-of-type either: the shop's own home slider is a
     <section> above the tree, and a cover under it must not be pulled into it. */
  main > .pb-cell:not(:not(script) ~ .pb-cell) > .pb-container:has(> .pb-cell:first-of-type > .hero-width-full) {
    margin-block-start: calc(var(--spacing-section) * -1);
  }
  .hero-width-full.hero-split,
  .hero-width-full.hero-bento {
    padding-block: clamp(24px, 5vw, 56px);
    padding-inline: max(var(--spacing-pad), var(--pb-bleed-pad));
    background: var(--color-surface-muted);
  }

  /* ---- tiles: banner presets and the bento mosaic ---- */
  .pb-tiles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .pb-tiles > li { display: grid; min-inline-size: 0; }
  .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(9rem, 18vw, 15rem);
  }
  .hero-h-strip .tiles-bento { grid-auto-rows: clamp(7rem, 12vw, 10rem); }
  .hero-h-tall .tiles-bento { grid-auto-rows: clamp(11rem, 24vw, 20rem); }
  .tiles-bento > li:first-child,
  .bento-5 > li:first-child,
  .bento-4 > li:last-child { grid-column: span 2; }
  .bento-1 > li,
  .bento-2 > li { grid-column: 1 / -1; }
  @media (min-width: 48rem) {
    .pb-tiles { gap: 16px; }
    .tiles-1 { grid-template-columns: minmax(0, 1fr); }
    .tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tiles-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tiles-bento > li:first-child { grid-row: span 2; }
    .bento-1 > li,
    .bento-2 > li { grid-column: span 2; grid-row: span 2; }
    .bento-1 > li { grid-column: 1 / -1; }
    .bento-3 > li:not(:first-child) { grid-column: span 2; }
  }
  /* Column banners keep the file's own proportions; see bannerGridWidget. */
  /* The height cap only ever bites on a photo used as a banner — a real
     banner is wide artwork — and stops one tall picture filling a screen. */
  .banners-natural .pb-cover-media { block-size: auto; max-block-size: 32rem; }

  /* ---- carousel: one scrolling row, snapped ---- */
  .pb-carousel { position: relative; }
  .pb-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 12px) / var(--awix-cols-mobile, 2) - 12px);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-block: 4px;
  }
  .pb-carousel-track::-webkit-scrollbar { display: none; }
  .pb-carousel-track > li {
    display: grid;
    min-inline-size: 0;
    scroll-snap-align: start;
  }
  .pb-hero-slides {
    grid-auto-columns: 100%;
    gap: 0;
    padding-block: 0;
  }
  .pb-carousel-btn { display: none; }
  @media (min-width: 48rem) {
    .pb-product-row {
      grid-auto-columns: calc((100% - (var(--awix-cols, 4) - 1) * 16px) / var(--awix-cols, 4));
      gap: 16px;
    }
    .pb-carousel-btn {
      position: absolute;
      inset-block-start: 50%;
      display: grid;
      place-items: center;
      inline-size: 40px;
      block-size: 40px;
      padding: 0;
      translate: 0 -50%;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      background: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 2px 8px #1018281f;
      cursor: pointer;
    }
    .pb-carousel-btn svg { inline-size: 20px; block-size: 20px; }
    .pb-carousel-prev { inset-inline-start: 8px; }
    .pb-carousel-next { inset-inline-end: 8px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .pb-carousel-track { scroll-behavior: smooth; }
  }

  /* ---- icon bands: stats and trust badges ---- */
  .pb-band-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* An odd last item fills the phone's row instead of leaving a hole. */
  .pb-band-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  @media (min-width: 48rem) {
    .pb-band-list {
      grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
      gap: 16px;
    }
    .pb-band-item {
      flex-direction: row;
      align-items: center;
    }
    .pb-band-item:last-child:nth-child(odd) { grid-column: auto; }
  }
  /* Icon above the words in a phone's half-width column, beside them from
     the tablet breakpoint: two words beside a 44px icon in 170px wrap. */
  .pb-band-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
    min-inline-size: 0;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
  }
  .pb-band-icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
  }
  .pb-band-icon svg { inline-size: 24px; block-size: 24px; }
  .pb-band-words {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
  }
  .pb-band-value { font-weight: 700; }
  .pb-band-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }
  .band-stats .pb-band-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .band-stats .pb-band-words { align-items: center; }
  .band-stats .pb-band-value {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
    font-weight: 800;
    color: var(--color-brand);
  }

  /* ---- testimonials, FAQ and video (migration 000295) ---- */
  .pb-testimonials,
  .pb-faq,
  .pb-video {
    display: block;
  }
  .pb-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .pb-quote-grid > li { display: grid; }
  .pb-quote-row { grid-auto-columns: min(85%, 20rem); }
  @media (min-width: 48rem) {
    .pb-quote-row {
      grid-auto-columns: calc((100% - 2 * 16px) / 3);
      gap: 16px;
    }
  }
  .pb-quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
  }
  .pb-quote-stars {
    display: flex;
    gap: 2px;
    margin: 0;
  }
  .pb-quote-stars svg {
    inline-size: 18px;
    block-size: 18px;
    fill: var(--color-border);
  }
  .pb-quote-stars svg.on { fill: var(--color-accent); }
  .pb-quote-text {
    flex: 1;
    margin: 0;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  .pb-quote-who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-inline-size: 0;
  }
  .pb-quote-face {
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--color-surface-muted);
  }
  .pb-quote-names {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .pb-quote-names > span {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }

  .pb-faq-item {
    border-block-end: 1px solid var(--color-border);
  }
  .pb-faq-item > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    overflow-wrap: anywhere;
  }
  .pb-faq-item > summary::-webkit-details-marker { display: none; }
  .pb-faq-item > summary::after {
    content: "+";
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
    color: var(--color-brand);
    font-weight: 700;
  }
  .pb-faq-item[open] > summary::after { content: "−"; }
  .pb-faq-answer {
    margin: 0;
    padding-block-end: 16px;
    line-height: 1.9;
    color: var(--color-text-muted);
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .pb-video iframe {
    display: block;
    inline-size: 100%;
    border: 0;
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-black);
  }
  .video-landscape iframe { aspect-ratio: 16 / 9; }
  .video-portrait iframe {
    aspect-ratio: 9 / 16;
    max-inline-size: 22rem;
    margin-inline: auto;
  }

  /* ---- newsletter by mobile (migration 000296) ---- */
  .pb-newsletter {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
  }
  .pb-newsletter-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }
  .pb-newsletter-text {
    margin: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }
  .pb-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    inline-size: 100%;
    max-inline-size: 28rem;
  }
  .pb-newsletter-input {
    flex: 1 1 12rem;
    min-inline-size: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: start;
  }
  .pb-newsletter-button {
    flex: 1 0 auto;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  /* ---- lead form (migration 000334) ---- */
  .pb-leadform {
    display: grid;
    gap: 12px;
    inline-size: 100%;
    max-inline-size: 36rem;
    margin-inline: auto;
  }
  .pb-leadform-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }
  .pb-leadform-text {
    margin: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }
  .pb-leadform-form {
    display: grid;
    gap: 16px;
    position: relative;
  }
  .pb-leadform-field {
    display: grid;
    gap: 6px;
    min-inline-size: 0;
  }
  .pb-leadform-label {
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .pb-leadform-req {
    color: var(--color-danger);
    margin-inline-start: 4px;
  }
  .pb-leadform-input {
    inline-size: 100%;
    /* The base layer caps every input at 420px; the form is 36rem wide and its
       submit button fills it, so a capped field left the button 156px wider
       than the fields above it. */
    max-inline-size: none;
    min-inline-size: 0;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: start;
  }
  .pb-leadform-input[aria-invalid="true"] {
    border-color: var(--color-danger);
  }
  .pb-leadform-textarea {
    resize: vertical;
    min-block-size: 6rem;
  }
  .pb-leadform-file {
    cursor: pointer;
  }
  .pb-leadform-hint {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }
  .pb-leadform-error {
    margin: 0;
    color: var(--color-danger);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }
  .pb-leadform-alert {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-danger);
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-danger-soft);
    color: var(--color-danger);
    overflow-wrap: anywhere;
  }
  .pb-leadform-ok {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-ok);
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-ok-soft);
    color: var(--color-ok);
  }
  .pb-leadform-consent {
    display: grid;
    gap: 8px;
  }
  .pb-leadform-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    overflow-wrap: anywhere;
  }
  /* chrome.css gives every input inline-size: 100%, which as a flex item is a
     100% flex-basis: the box would take the whole row and squeeze the label
     to a column. A checkbox is as wide as its glyph. */
  .pb-leadform-check input {
    flex: none;
    inline-size: auto;
    margin-block-start: 4px;
  }
  /* The honeypot: out of sight and out of reach for a person, still in the
     form for a bot. Clipped to nothing rather than moved off screen, so it
     cannot widen the page in either direction. */
  .pb-leadform-hp {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
  }
  .pb-leadform-button {
    padding: 12px 20px;
    border: 0;
    border-radius: var(--awix-radius, var(--radius-card));
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  /* ---- newsletter module sign-up (migration 000330) ----
     Same form as above plus a consent line and a honeypot. The trap leaves
     the layout and the screen but not the DOM, so a script that fills every
     input still finds it; it has no display:none, which many bots skip. */
  .pb-newsletter-consent {
    display: flex;
    flex: 1 1 100%;
    align-items: flex-start;
    gap: 8px;
    text-align: start;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }
  .pb-newsletter-consent input {
    flex: none;
    inline-size: auto;
    margin-block-start: 0.25em;
  }
  .pb-newsletter-trap {
    position: absolute;
    inset-inline-start: -10000px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }
}

/* ---- the hero's width preset, outside the layer --------------------------
   Same reasoning as the card trait below: most template stylesheets round a
   slide's corners (.hero-slider .pb-cover), unlayered. A rounded corner at
   the edge of the viewport reads as a rendering fault, and width: full is
   the owner's choice for this one widget, so it wins over the shop-wide
   sheet. Without the class this matches nothing. */
.pb-hero.hero-width-full:is(.hero-fullbleed, .hero-slider) .pb-cover {
  border-radius: 0;
}

/* ---- the card trait, outside the layer -----------------------------------
   Every template ships a stylesheet (awix-api templates/<slug>/template.css,
   copied into each shop) that restyles .pb-product and .pb-taxonomy-item —
   unlayered, so it beats anything inside @layer components however specific.
   A card colour an owner picked for ONE widget is a narrower choice than the
   shop-wide sheet and has to win over it, so these rules sit outside the
   layer and apply only where the widget's own style attribute carries the
   token: without it they match nothing and the theme and template decide, as
   before. The attribute is written by tokens.go alone, from the allow-list, so
   the substring match is exact (and the var() fallbacks below never apply;
   they are there for TestStyleSheet_EveryCustomPropertyItUsesIsDefined). */
.pb-widget[style*="--awix-card-bg:"] :is(.pb-product, .pb-taxonomy-item, .pb-blog-card) {
  background: var(--awix-card-bg, var(--color-surface));
}
.pb-widget[style*="--awix-card-border-color:"] :is(.pb-product, .pb-taxonomy-item, .pb-blog-card) {
  border-color: var(--awix-card-border-color, var(--color-border));
}
.pb-widget[style*="--awix-card-border-width:"] :is(.pb-product, .pb-taxonomy-item, .pb-blog-card) {
  border-width: var(--awix-card-border-width, 1px);
  border-style: solid;
}
.pb-widget[style*="--awix-card-shadow-size:"] :is(.pb-product, .pb-taxonomy-item, .pb-blog-card) {
  box-shadow: 0 calc(var(--awix-card-shadow-size, 0px) / 3) var(--awix-card-shadow-size, 0px) var(--awix-card-shadow-color, #1018281f);
}
.pb-widget[style*="--awix-radius:"] :is(.pb-product, .pb-taxonomy-item, .pb-blog-card) {
  border-radius: var(--awix-radius, var(--radius-card));
}

/* ---- background.overlay's white text, outside the layer ------------------
   .pb-text names its own colour and every template sheet colours h1/h2 with
   the brand, unlayered — so the white the dark scrim promises has to be said
   to the heading and text widgets directly, and from outside the layer, or a
   brand-green heading lands on a darkened photo. Cards are not matched: they
   keep their own surface and the rule above. */
.bg-overlay-dark :is(.pb-heading, .pb-heading :is(h1, h2, h3, h4, h5, h6), .pb-text, .pb-text *),
:is(.bg-overlay-dark, .pb-cover-caption) :is(.pb-hero-title, .pb-hero-text) {
  color: var(--color-white);
}
/* The same, for a section whose flat colour is dark — in its --pb-ink, so a
   light section nested inside it takes the theme's text back. */
.bg-on-dark :is(.pb-heading, .pb-heading :is(h1, h2, h3, h4, h5, h6), .pb-text, .pb-text *, .pb-hero-title, .pb-hero-text) {
  color: var(--pb-ink);
}
/* 20-chrome.css */
/* Chrome: announcement bar, header, footer, mobile bottom bar, page title bar.
   Mobile first; the header turns from off-canvas to inline at 990px, the bottom bar hides at 750px.
   Colours only through variables; the header ones are printed by layout/theme.liquid. */
:root { --awix-bottom-nav-h: 58px; }
.awix-chrome svg { inline-size: 22px; block-size: 22px; flex: none; }
.awix-chrome ul, .awix-chrome ol { list-style: none; margin: 0; padding: 0; }

/* Announcement bar */
.awix-ann { background: var(--awix-ann-bg, var(--color-brand)); color: var(--awix-ann-fg, var(--color-brand-contrast)); font-size: var(--text-small); }
.awix-ann a { color: inherit; text-decoration: underline; }
.awix-ann__inner { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 40px; padding-block: 4px; }
.awix-ann__list { flex: 1; display: grid; text-align: center; }
.awix-ann__inner:has(.awix-ann__close) .awix-ann__list { padding-inline: 44px; }
.awix-ann__item { padding-block: 2px; line-height: 1.7; }
.awix-ann[data-rotating] .awix-ann__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.awix-ann[data-rotating] .awix-ann__item.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.awix-ann__close {
  position: absolute; inset-inline-end: var(--spacing-pad); inset-block-start: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin-inline-end: -12px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.awix-ann__close svg { inline-size: 18px; block-size: 18px; }
.no-js .awix-ann__close { display: none; }

/* Header: the section wrapper (.shopify-section) is what sticks, so the fixed off-canvas panel never
   sits inside a transformed box. */
.shopify-section:has(> .awix-header[data-sticky="true"]) { position: sticky; inset-block-start: 0; z-index: 50; transition: inset-block-start .28s ease; }
.shopify-section.awix-header-hidden:has(> .awix-header[data-sticky="true"]) { inset-block-start: calc(-1 * (var(--awix-header-h, 96px) + 2px)); }
html.awix-nav-lock { overflow: hidden; }
.awix-header {
  position: relative; z-index: 50; background: var(--color-header-bg); color: var(--color-header-text);
  font-family: var(--font-header), Vazirmatn, "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
}
.awix-header--bordered { border-block-end: 1px solid var(--color-border); }
/* Over the first section (the header setting): transparent, out of flow, white ink. Not sticky then (data-sticky="false"), so it scrolls away and never sits on text. */
.awix-header--over { position: absolute; inset-block-start: auto; inset-inline: 0; background: transparent; color: var(--color-white); border-block-end: 0; }
.awix-header a { color: inherit; }
.awix-header a:hover, .awix-header a:focus-visible { text-decoration: none; }
.awix-header__bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-block-size: 60px; }
.awix-header__icon {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; padding: 0;
  border: 0; border-radius: var(--radius-button); background: none; color: inherit; cursor: pointer;
}
.awix-header__icon:hover, .awix-header__icon:focus-visible { color: var(--color-header-hover); }
.awix-header__burger { grid-column: 1; grid-row: 1; margin-inline-start: -10px; }
.awix-header__logo { grid-column: 2; grid-row: 1; justify-self: center; display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 800; font-size: 18px; line-height: 1.4; }
.awix-header__logo img { inline-size: min(var(--awix-logo-w, 120px), 40vw); block-size: auto; max-block-size: 52px; object-fit: contain; }
/* No logo: the shop name is a wordmark, heavy face with a small brand diamond leading it. */
.awix-header__name, .awix-footer__name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-title); font-weight: 800; letter-spacing: 0; }
.awix-header__name { font-size: 20px; }
.awix-header__name::before, .awix-footer__name::before {
  content: ""; flex: none; inline-size: 9px; block-size: 9px; border-radius: 2px; background: var(--color-brand); rotate: 45deg;
}
.awix-header__tools { grid-column: 3; grid-row: 1; display: flex; align-items: center; margin-inline-end: -10px; }

.awix-header__search { grid-column: 1 / -1; grid-row: 2; display: none; align-items: center; padding-block-end: 12px; }
.awix-header.is-search-open .awix-header__search { display: flex; }
.awix-header__search input {
  flex: 1; min-inline-size: 0; padding-inline-end: 44px; border-color: color-mix(in srgb, var(--color-header-text) 22%, transparent);
  background: color-mix(in srgb, var(--color-header-text) 6%, transparent); color: inherit;
}
.awix-header__search input::placeholder { color: inherit; opacity: .6; }
.awix-header__search button { margin-inline-start: -44px; }

/* Off-canvas panel (mobile) */
.awix-header__backdrop {
  position: fixed; inset: 0; z-index: 1; background: color-mix(in srgb, var(--color-text) 50%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s .28s;
}
.awix-header.is-nav-open .awix-header__backdrop { opacity: 1; visibility: visible; transition: opacity .28s ease; }
.awix-header__panel {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 2; inline-size: min(86vw, 360px);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-header-bg); color: var(--color-header-text); box-shadow: var(--shadow-card);
  translate: 100% 0; visibility: hidden; transition: translate .28s ease, visibility 0s .28s;
}
:root[dir="ltr"] .awix-header__panel { translate: -100% 0; }
.awix-header.is-nav-open .awix-header__panel { translate: 0 0; visibility: visible; transition: translate .28s ease; }
.awix-header__panel-head { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; padding-inline: 20px 8px; border-block-end: 1px solid var(--color-border); }
.awix-header__panel-title { font-weight: 700; }
.awix-nav { padding-block: 4px 24px; }
.awix-nav__item { display: flex; flex-wrap: wrap; align-items: center; border-block-end: 1px solid var(--color-border); }
.awix-nav__link { flex: 1; display: flex; align-items: center; min-block-size: 48px; padding-inline: 20px; font-weight: 600; }
.awix-nav__link:hover, .awix-nav__link:focus-visible, .awix-nav__item.is-current > .awix-nav__link { color: var(--color-header-hover); }
.awix-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer;
}
.awix-nav__toggle svg { inline-size: 18px; block-size: 18px; transition: rotate .2s ease; }
.awix-nav__item.is-open > .awix-nav__toggle svg { rotate: 180deg; }
.awix-nav__sub { flex: 0 0 100%; display: none; padding-block-end: 8px; background: color-mix(in srgb, var(--color-header-text) 5%, transparent); }
.awix-nav__item.is-open > .awix-nav__sub { display: block; }
.awix-nav__sublink { display: flex; align-items: center; min-block-size: 44px; padding-inline: 36px 20px; }
.awix-nav__sublink:hover, .awix-nav__sublink:focus-visible { color: var(--color-header-hover); }

/* Without script the menu is plain content under the bar. */
@media (max-width: 989.98px) {
  .no-js .awix-header__panel { position: static; grid-column: 1 / -1; grid-row: 3; inline-size: auto; translate: none; visibility: visible; box-shadow: none; overflow: visible; }
  .no-js .awix-header__burger, .no-js .awix-header__search-toggle, .no-js .awix-header__panel-head, .no-js .awix-nav__toggle, .no-js .awix-header__backdrop { display: none; }
  .no-js .awix-header__search { display: flex; }
  .no-js .awix-nav__sub { display: block; }
}

@media (min-width: 990px) {
  .awix-header__bar { display: flex; gap: 24px; min-block-size: 76px; }
  .awix-header__burger, .awix-header__search-toggle, .awix-header__panel-head, .awix-header__backdrop { display: none; }
  .awix-header__logo img { inline-size: var(--awix-logo-w, 120px); }
  .awix-header__tools { margin-inline-end: -10px; }
  .awix-header__search { display: flex; flex: 0 1 260px; padding-block-end: 0; }
  .awix-header__panel {
    position: static; flex: 1 1 auto; align-self: stretch; display: flex; flex-direction: row; inline-size: auto; overflow: visible;
    background: none; box-shadow: none; translate: none; visibility: visible; transition: none;
  }
  .awix-nav { display: flex; padding: 0; }
  .awix-nav__list { display: flex; align-items: stretch; }
  .awix-nav__item { position: relative; flex-wrap: nowrap; border: 0; }
  .awix-nav__link { flex: none; min-block-size: 44px; padding-inline: 12px; font-weight: 500; }
  .awix-nav__toggle { inline-size: 24px; block-size: 44px; margin-inline-start: -10px; }
  .awix-nav__sub {
    position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 3; min-inline-size: 220px; padding: 8px;
    display: block; flex: none; visibility: hidden; opacity: 0; background: var(--color-header-bg);
    border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    transition: opacity .15s ease, visibility 0s .15s;
  }
  .awix-nav__item.is-open > .awix-nav__sub, .no-js .awix-nav__item:hover > .awix-nav__sub, .no-js .awix-nav__item:focus-within > .awix-nav__sub {
    visibility: visible; opacity: 1; transition-delay: 0s;
  }
  .awix-nav__sublink { padding-inline: 12px; border-radius: var(--radius-button); }
}

/* Footer */
.awix-footer { margin-block-start: var(--spacing-section); background: var(--color-surface-muted); color: var(--color-text); }
.awix-footer a { color: inherit; }
.awix-footer__cols { display: grid; grid-template-columns: 1fr; gap: 28px 24px; padding-block: 36px 20px; }
.awix-footer__heading { margin-block-end: 8px; font-size: 16px; font-weight: 700; }
.awix-footer__links a { display: flex; align-items: center; min-block-size: 44px; }
.awix-footer__text { color: var(--color-text-muted); line-height: 2; }
.awix-footer__text p:last-child { margin-block-end: 0; }
.awix-footer__contact li { display: flex; align-items: flex-start; gap: 10px; min-block-size: 44px; padding-block: 10px; line-height: 1.8; }
.awix-footer__contact svg { inline-size: 20px; block-size: 20px; margin-block-start: 3px; color: var(--color-text-muted); }
.awix-footer__contact a { display: inline-flex; align-items: center; }
.awix-footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.awix-footer__social a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-inline-size: 44px; min-block-size: 44px; padding-inline: 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius-button); background: var(--color-surface);
}
.awix-footer__social a:hover, .awix-footer__social a:focus-visible { border-color: var(--color-brand); text-decoration: none; }
.awix-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-block: 12px; border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-small);
}
.awix-footer__copy { margin: 0; }
.awix-footer__top { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; }
.awix-footer__top svg { inline-size: 18px; block-size: 18px; }
@media (min-width: 750px) {
  .awix-footer__cols { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block-start: 48px; }
  .awix-footer__links a { min-block-size: 32px; }
}

/* Mobile bottom bar */
.awix-bottom-nav {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; padding-block-end: env(safe-area-inset-bottom);
  background: var(--color-surface); border-block-start: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px color-mix(in srgb, var(--color-text) 8%, transparent);
}
.awix-bottom-nav__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.awix-bottom-nav__item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-block-size: var(--awix-bottom-nav-h); padding: 6px 2px; color: var(--color-text-muted); font-size: 12px; line-height: 1.4; text-align: center;
}
.awix-bottom-nav__item:hover { text-decoration: none; }
.awix-bottom-nav__item svg { inline-size: 24px; block-size: 24px; }
.awix-bottom-nav__item.is-current { color: var(--color-brand); font-weight: 700; }
.awix-bottom-nav__item.is-current::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 22%; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--color-brand); }
@media (min-width: 750px) { .awix-bottom-nav { display: none; } }
@media (max-width: 749.98px) { body:has(.awix-bottom-nav) { padding-block-end: calc(var(--awix-bottom-nav-h) + 1px + env(safe-area-inset-bottom)); } }

/* Page title bar */
.awix-pagetitle { padding-block: var(--awix-pt-pad, 32px); background: var(--awix-pt-bg, var(--color-surface-muted)); color: var(--awix-pt-fg, var(--color-text)); }
.awix-pagetitle--center { text-align: center; }
.awix-pagetitle--end { text-align: end; }
/* Page title with an image: full-bleed photo, dark veil, white ink, centred title. */
.awix-pagetitle--image { position: relative; isolation: isolate; display: grid; align-content: center; min-block-size: var(--awix-pt-min-h, 0px); overflow: hidden; color: var(--awix-pt-fg, var(--color-white)); }
.awix-pagetitle--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / var(--awix-pt-overlay, 40%)); }
.awix-pagetitle__media { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.awix-pagetitle--image .awix-pagetitle__inner { text-align: center; }
.awix-pagetitle--image .awix-pagetitle__crumbs ol { justify-content: center; }
.awix-pagetitle__title { margin: 0 0 8px; font-family: var(--font-title); font-size: var(--text-h1); font-weight: 800; line-height: 1.5; }
.awix-pagetitle__crumbs { font-size: var(--text-small); opacity: .85; }
.awix-pagetitle__crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.awix-pagetitle--center .awix-pagetitle__crumbs ol { justify-content: center; }
.awix-pagetitle--end .awix-pagetitle__crumbs ol { justify-content: flex-end; }
.awix-pagetitle__crumbs li + li::before { content: "\2039"; margin-inline-end: 8px; }
:root[dir="ltr"] .awix-pagetitle__crumbs li + li::before { content: "\203A"; }
.awix-pagetitle__crumbs a { position: relative; color: inherit; text-decoration: underline; }
.awix-pagetitle__crumbs a::after { content: ""; position: absolute; inset: -12px -4px; }

@media (prefers-reduced-motion: reduce) {
  .awix-ann[data-rotating] .awix-ann__item, .awix-ann[data-rotating] .awix-ann__item.is-active,
  .shopify-section:has(> .awix-header), .awix-header__backdrop, .awix-header__panel, .awix-nav__sub, .awix-nav__toggle svg { transition: none; }
}
/* 21-header-variants.css */
/* Header layout variants (the header section's `layout` setting). `classic` adds no class and is styled by 20-chrome.css alone.
   Mobile first, like 20-chrome.css: below 990px the nav is the off-canvas panel, from 990px it is inline.
   Colours only through variables; the header ones are printed by layout/theme.liquid. */

/* Over the first section the bar is transparent with white ink. The inline nav has no sheet behind it, so it takes that
   ink instead of the header text colour (20-chrome.css gives the panel its own colour, right for the off-canvas sheet only).
   The dropdown has its own background and keeps the header text colour. */
@media (min-width: 990px) {
  .awix-header--over .awix-header__panel { color: inherit; }
  .awix-header--over .awix-nav__sub { color: var(--color-header-text); }
}

/* Centered: logo in the middle of the first row, tools at the end, nav in a row of its own below.
   Below 990px the base bar is already burger / centred logo / tools, so only the wide screen changes. */
@media (min-width: 990px) {
  .awix-header--centered .awix-header__bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: minmax(76px, auto) auto;
    grid-template-areas: "search logo tools" "nav nav nav"; align-items: center; column-gap: 24px; min-block-size: 0;
  }
  .awix-header--centered .awix-header__logo { grid-area: logo; justify-self: center; }
  .awix-header--centered .awix-header__search { grid-area: search; justify-self: start; inline-size: min(100%, 280px); }
  .awix-header--centered .awix-header__tools { grid-area: tools; justify-self: end; }
  .awix-header--centered .awix-header__panel {
    grid-area: nav; justify-content: center; border-block-start: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  }
}

/* Split: logo at the start, the search field always open between the logo and the tools (the toggle button is not rendered).
   Below 990px the field sits in a row of its own under the bar; from 990px it fills the middle and the nav drops to a second row. */
.awix-header--split .awix-header__logo { justify-self: start; }
.awix-header--split .awix-header__search { display: flex; }
.awix-header--over.awix-header--split .awix-header__search input {
  border-color: color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 12%, transparent);
}
@media (min-width: 990px) {
  .awix-header--split .awix-header__bar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(76px, auto) auto;
    grid-template-areas: "logo search tools" "nav nav nav"; align-items: center; column-gap: 32px; min-block-size: 0;
  }
  .awix-header--split .awix-header__logo { grid-area: logo; justify-self: start; }
  .awix-header--split .awix-header__search { grid-area: search; justify-self: center; inline-size: 100%; max-inline-size: 560px; }
  .awix-header--split .awix-header__tools { grid-area: tools; justify-self: end; }
  .awix-header--split .awix-header__panel {
    grid-area: nav; border-block-start: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  }
  .awix-header--split .awix-nav { margin-inline-start: -12px; }
}
/* 22-footer-variants.css */
/* Footer layout variants (the footer section's `layout` setting). `columns` adds no class and is styled by 20-chrome.css alone.
   Mobile first. Colours only through variables. */

.awix-footer__brand { display: inline-flex; align-items: center; min-block-size: 44px; font-size: 18px; font-weight: 800; line-height: 1.4; }
.awix-footer__brand img { inline-size: min(120px, 40vw); block-size: auto; max-block-size: 48px; object-fit: contain; }

/* Minimal: logo or shop name, one line of links, copyright; one row from 750px, stacked and centred below it. */
.awix-footer--minimal .awix-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 24px; padding-block: 20px; }
.awix-footer--minimal .awix-footer__line { flex: 1 1 100%; min-inline-size: 0; }
.awix-footer--minimal .awix-footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; }
.awix-footer--minimal .awix-footer__links a { padding-inline: 10px; min-block-size: 44px; }
.awix-footer--minimal .awix-footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px;
  color: var(--color-text-muted); font-size: var(--text-small);
}
@media (min-width: 750px) {
  .awix-footer--minimal .awix-footer__row { justify-content: space-between; flex-wrap: nowrap; }
  .awix-footer--minimal .awix-footer__line { flex: 1 1 0; }
}

/* Centered: logo, text and social icons in one centred column, then the copyright bar. */
.awix-footer--centered .awix-footer__brand-wrap { display: flex; justify-content: center; padding-block-start: 36px; }
.awix-footer--centered .awix-footer__cols { grid-template-columns: minmax(0, 560px); justify-content: center; padding-block: 12px 24px; text-align: center; }
.awix-footer--centered .awix-footer__social { justify-content: center; }
.awix-footer--centered .awix-footer__base { justify-content: center; text-align: center; }
/* 30-hero.css */
/* Hero, banner grid, category tiles and the carousel chrome (dots, disabled arrows).
   The cover, tiles, bento, carousel and taxonomy rules themselves live in 10-pagebuilder.css; this file only adds
   what the theme sections need on top: the dots, the 58/42 banner row and the category tile look. */
@layer components {
  /* width: full breaks out of the page column by the width of the container query context. <main> is that
     context for any page that has such a hero; without one cqi would fall back to the viewport. */
  main:has(.hero-width-full) { container-type: inline-size; }

  /* ---- carousel dots (data-pb-carousel-dots, filled by awix-carousel.js) ---- */
  .pb-carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin-block-start: 4px;
  }
  .pb-carousel-dots[hidden] { display: none; }
  .pb-carousel-dots button {
    display: grid;
    place-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }
  .pb-carousel-dots button::before {
    content: "";
    inline-size: 10px;
    block-size: 10px;
    border-radius: 999px;
    background: currentColor;
    opacity: .45;
    transition: inline-size 160ms ease, opacity 160ms ease;
  }
  .pb-carousel-dots button[aria-current="true"]::before {
    inline-size: 24px;
    opacity: 1;
  }
  .pb-carousel-dots button:focus-visible { outline-offset: -6px; }
  @media (prefers-reduced-motion: reduce) {
    .pb-carousel-dots button::before { transition: none; }
  }

  /* On a hero the dots sit over the picture, in white with a soft edge so they read on light and dark pictures. */
  .pb-hero .pb-carousel-dots {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 4px;
    margin: 0;
    pointer-events: none;
  }
  .pb-hero .pb-carousel-dots button {
    pointer-events: auto;
    color: var(--color-white);
  }
  .pb-hero .pb-carousel-dots button::before {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-black) 35%, transparent);
  }
  /* A hero's words keep clear of the dots. */
  .pb-hero-slides .pb-cover-body { padding-block-end: 44px; }

  .pb-carousel-btn:disabled {
    opacity: .35;
    cursor: default;
  }

  /* ---- banner grid: two banners, 58% and 42% ---- */
  .tiles-two-wide { grid-template-columns: minmax(0, 1fr); }
  .tiles-two-wide .pb-cover-media {
    position: absolute;
    inset: 0;
  }
  .tiles-two-wide > li { min-block-size: clamp(11rem, 52vw, 16rem); }
  @media (min-width: 48rem) {
    .tiles-two-wide { grid-template-columns: 58fr 42fr; }
    .tiles-two-wide > li { min-block-size: clamp(13rem, 24vw, 22rem); }
  }

  /* ---- category tiles: a round picture over the name ---- */
  .awix-categories .pb-taxonomy-item {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 8px;
    text-align: center;
  }
  .awix-categories .pb-taxonomy-logo,
  .awix-categories .pb-taxonomy-initial {
    inline-size: clamp(56px, 12vw, 88px);
    block-size: clamp(56px, 12vw, 88px);
    border-radius: 999px;
    object-fit: cover;
  }
  .awix-categories .pb-taxonomy-name {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.6;
  }
  .awix-categories .display-logo .pb-taxonomy-logo {
    inline-size: clamp(56px, 12vw, 88px);
    block-size: clamp(56px, 12vw, 88px);
    max-inline-size: none;
  }

  /* mobile_carousel: a grid from the tablet breakpoint, one swipeable row on a phone. */
  @media (max-width: 47.999rem) {
    .cat-scroll .pb-taxonomy-list {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: calc((100% - (var(--awix-cols-mobile, 3) - 1) * 12px) / var(--awix-cols-mobile, 3));
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding-block: 4px;
    }
    .cat-scroll .pb-taxonomy-list::-webkit-scrollbar { display: none; }
    .cat-scroll .pb-taxonomy-list > li {
      min-inline-size: 0;
      scroll-snap-align: start;
    }
  }
  @media (max-width: 47.999rem) and (prefers-reduced-motion: no-preference) {
    .cat-scroll .pb-taxonomy-list { scroll-behavior: smooth; }
  }
}

/* ---- hero words: the display scale ------------------------------------------------------------------------------
   Outside the layer on purpose: the title is an h2 or h3, and the base sheet's unlayered h2 rule would beat the
   layered .pb-hero-title (size and margin) however specific that is. */
.pb-hero-title {
  margin: 0;
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.pb-cover-caption .pb-hero-title { font-size: var(--text-h2); line-height: 1.5; }
.pb-hero-text {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.9;
}
.pb-cover-caption .pb-hero-text { font-size: var(--text-small); }
.pb-hero-cta { margin: 0; margin-block-start: 6px; }

/* ---- typographic cover: a hero, slide, banner or tile that has words but no picture ---------------------------
   Never a grey box: a brand gradient (brand to its deep end) with a soft glow in one corner and a fine dot pattern, all from
   the theme colours. The words take the brand contrast colour. --pb-ink is set here because the unlayered ink rules of
   10-pagebuilder.css read it for dark sections, so the nearest surface decides. The text split uses the same surface. */
.pb-cover--text,
.pb-hero-split--text {
  --pb-ink: var(--color-brand-contrast);
  color: var(--pb-ink);
  background:
    radial-gradient(color-mix(in srgb, var(--color-brand-contrast) 13%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-brand-contrast) 15%, transparent), transparent 62%),
    linear-gradient(135deg, var(--color-brand), var(--color-brand-deep));
}
.pb-cover--text .pb-cover-body {
  color: inherit;
  background-image: none;
}
.pb-cover--text :is(.pb-hero-title, .pb-hero-text),
.pb-hero-split--text :is(.pb-hero-title, .pb-hero-text) { color: var(--pb-ink); }
/* The button is the inverse of the surface, or it would be brand on brand. */
.pb-cover--text .pb-more-link,
.pb-hero-split--text .pb-more-link {
  background: var(--color-brand-contrast);
  color: var(--color-brand);
}
.pb-cover--text .pb-more-link:hover,
.pb-hero-split--text .pb-more-link:hover {
  background: color-mix(in srgb, var(--color-brand-contrast) 88%, var(--color-brand));
}
/* The amber focus ring would sit at about 2:1 on the brand gradient; the contrast colour is clear on it. */
.pb-cover--text:focus-visible,
.pb-cover--text :focus-visible,
.pb-hero-split--text :focus-visible { outline-color: var(--color-brand-contrast); }
/* A banner or tile (level 3) carries a large faint monogram of its title on the opposite side from its words. */
.pb-cover--text[data-mark]::after {
  content: attr(data-mark);
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  margin: 4px 14px;
  font: 800 clamp(4.5rem, 12vw, 8rem) / 1 var(--font-title);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-brand-contrast) 14%, transparent);
  pointer-events: none;
}
/* Banner rows have no picture to give them a height. (The bento rows set their own.) */
.pb-tiles:not(.tiles-bento) .pb-cover--text { min-block-size: clamp(9rem, 22vw, 14rem); }

/* Split with no picture: the words fill the row on the same surface instead of leaving half of it empty. */
.pb-hero-split--text {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(24px, 5vw, 56px);
  border-radius: var(--awix-radius, var(--radius-card));
}
.pb-hero-split--text .pb-hero-words { max-inline-size: 44rem; }
.pb-hero-split--text .pb-hero-words.text-center { margin-inline: auto; }
.pb-hero-split--text .pb-hero-words.text-end { margin-inline-start: auto; }
.pb-hero-split--text .pb-hero-link { color: var(--color-text); }
/* 40-products.css */
/* Product cards, the product rail and the product tabs (snippets awix-product-card, awix-product-list,
   sections awix-products and awix-product-tabs). The .pb-product* vocabulary lives in 10-pagebuilder.css;
   what is here only adds to it. This sheet is unlayered, so it wins over the layered one. */

/* The sections sit on the page edge on a phone unless the owner asked for more room. */
.awix-products,
.awix-product-tabs {
  padding-inline: max(var(--awix-pad-x, 0px), var(--spacing-pad));
}
.awix-section-sub {
  margin: 0;
  color: var(--color-text-muted);
}
.bg-on-dark .awix-section-sub {
  color: inherit;
  opacity: .8;
}

/* ---- card ---------------------------------------------------------------- */
.awix-product-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--awix-radius, var(--radius-card)) - 4px);
  background: var(--color-surface-muted);
}
/* A card with no picture shows the shared monogram tile (snippet awix-placeholder) in the picture's ratio and radius. */
.pb-product-initial.awix-ph {
  border-radius: calc(var(--awix-radius, var(--radius-card)) - 4px);
}
.pb-product:hover,
.pb-product:focus-within {
  box-shadow: var(--shadow-card);
}
.pb-product-link .awix-product-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  transition: opacity .25s ease;
}
.pb-product-link .awix-product-media .awix-product-hover {
  opacity: 0;
}
@media (hover: hover) {
  .pb-product:hover .awix-product-hover,
  .pb-product:focus-within .awix-product-hover {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pb-product-link .awix-product-media img { transition: none; }
}
.awix-product-card.is-unavailable .awix-product-media img {
  opacity: .55;
  filter: grayscale(.6);
}
.awix-product-card.is-unavailable .awix-product-hover {
  display: none;
}
.awix-product-card .pb-product-link {
  min-block-size: 44px;
}

/* ---- listing: grid, carousel, or a grid that swipes on phones ------------ */
.awix-plist-empty {
  margin: 0;
  padding: 32px 16px;
  text-align: center;
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}
.awix-plist .pb-product-grid > li {
  display: grid;
  min-inline-size: 0;
}
@media (max-width: 47.999rem) {
  .awix-plist--m-carousel .pb-product-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc(100% / var(--awix-cols-mobile, 2) - 24px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px;
  }
  .awix-plist--m-carousel .pb-product-grid::-webkit-scrollbar {
    display: none;
  }
  .awix-plist--m-carousel .pb-product-grid > li {
    scroll-snap-align: start;
  }
}

/* ---- tabs ----------------------------------------------------------------- */
.awix-product-tabs .pb-tablist {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.awix-product-tabs .pb-tablist::-webkit-scrollbar {
  display: none;
}
.awix-product-tabs .pb-tab {
  flex: none;
  white-space: nowrap;
  cursor: pointer;
}
.awix-product-tabs .pb-tab:hover {
  color: var(--color-text);
}
.awix-product-tabs .pb-tab[aria-selected="true"]:hover {
  color: var(--brand, var(--color-brand));
}

/* The base sheet's unlayered `a` rule would otherwise beat the layered link rules of these two. */
.pb-product-link {
  color: inherit;
}
.pb-more-link {
  color: var(--awix-more-fg, var(--color-brand-contrast));
  border-radius: var(--awix-more-radius, var(--radius-button));
}
.pb-product-link:hover,
.pb-more-link:hover {
  text-decoration: none;
}
/* 41-card-variants.css */
/* Product card styles (snippet awix-product-card, parameter `style`). The default `image` card is the markup and look
   of 40-products.css and the .pb-product rules of 10-pagebuilder.css, so it needs nothing here. This sheet is unlayered
   and loads after 40-products.css, so it wins over both. */

/* ---- compact: small square image at the start, title and price beside it, no card border -------- */
.awix-card--compact {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* a dark section would otherwise force the theme's text colour onto a card that has no surface */
  color: inherit;
}
.awix-card--compact:hover,
.awix-card--compact:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.awix-card--compact .pb-product-link {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}
.awix-card--compact .awix-product-media,
.awix-card--compact .pb-product-initial {
  flex: none;
  inline-size: 72px;
  aspect-ratio: 1 / 1;
}
.awix-card--compact .awix-card-text {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-inline-size: 0;
}
.awix-card--compact .pb-product-title {
  font-size: var(--text-small);
  line-height: 1.7;
}
.awix-card--compact .pb-product-price {
  margin-block-start: 0;
  gap: 2px 8px;
}
.awix-card--compact .pb-product-price-final {
  font-size: var(--text-small);
}
.awix-card--compact .pb-product-unavailable {
  flex: none;
  align-self: center;
}
/* A 72px image plus a readable title does not fit half a phone: dense lists run one per row there. */
@media (max-width: 47.999rem) {
  .awix-grid:has(> li > .awix-card--compact),
  .awix-plist:not(.awix-plist--m-carousel) .pb-product-grid:has(> li > .awix-card--compact) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- overlay: the image fills the card, title and price sit on a gradient bar over its bottom edge -------- */
.awix-card--overlay {
  position: relative;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--color-white);
}
.awix-card--overlay .awix-product-media,
.awix-card--overlay .pb-product-initial {
  aspect-ratio: 4 / 5;
  border-radius: 0;
}
.awix-card--overlay .pb-product-link:focus-visible {
  /* the card clips its overflow, so the ring has to sit inside it */
  outline: 2px solid var(--color-accent);
  outline-offset: -4px;
}
.awix-card--overlay .awix-card-text {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: 4px;
  padding: 40px 12px 12px;
  color: var(--color-white);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-black) 78%, transparent), transparent);
}
.awix-card--overlay .pb-product-price {
  margin-block-start: 0;
}
.awix-card--overlay .pb-product-price-list {
  color: inherit;
  opacity: .75;
}
.awix-card--overlay .pb-product-unavailable {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  color: var(--color-text);
  background: var(--color-surface);
}
/* 42-collection-variants.css */
/* Collection page layouts (section main-collection, setting `layout`). `sidebar` is the base look in 60-product.css and
   needs nothing here. The markup is the same in all three, so the script that drives the filters keeps working. On a phone
   the filters stay in the bottom sheet of 60-product.css; every rule that moves the panel therefore sits behind
   min-width: 900px, the breakpoint the sidebar uses. Unlayered and loaded after 40-products.css and 41-card-variants.css. */

/* ---- top and masonry: the filters become a bar above a full-width grid ------------------------------ */
@media (min-width: 900px) {
  .awix-collection--top .awix-cols,
  .awix-collection--masonry .awix-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .awix-collection--top .awix-panel,
  .awix-collection--masonry .awix-panel {
    /* relative, not sticky: the open group body is positioned against the bar */
    position: relative;
    inset-block-start: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 12px;
  }
  .awix-collection--top .awix-panel-head,
  .awix-collection--masonry .awix-panel-head {
    flex: none;
    gap: 16px;
    margin: 0;
  }
  .awix-collection--top .awix-panel-head h2,
  .awix-collection--masonry .awix-panel-head h2 {
    font-size: 15px;
  }
  .awix-collection--top .awix-panel form,
  .awix-collection--masonry .awix-panel form {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
  }
  .awix-collection--top .awix-field,
  .awix-collection--masonry .awix-field {
    display: flex;
    flex: 1 1 200px;
    align-items: center;
    gap: 8px;
    max-inline-size: 300px;
    padding-block: 0;
    white-space: nowrap;
  }
  .awix-collection--top .awix-field input,
  .awix-collection--masonry .awix-field input {
    flex: 1;
    min-inline-size: 0;
  }

  /* each group is a pill; its body opens as a panel under the whole bar (groups start closed in these layouts) */
  .awix-collection--top .awix-group,
  .awix-collection--masonry .awix-group {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
  }
  .awix-collection--top .awix-group[open],
  .awix-collection--masonry .awix-group[open] {
    border-color: var(--color-brand);
  }
  .awix-collection--top .awix-group > summary,
  .awix-collection--masonry .awix-group > summary {
    padding-inline: 14px;
    white-space: nowrap;
  }
  .awix-collection--top .awix-group-body,
  .awix-collection--masonry .awix-group-body {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 6px);
    z-index: 30;
    max-block-size: 360px;
    overflow: auto;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-black) 14%, transparent);
  }
  .awix-collection--top .awix-opts,
  .awix-collection--masonry .awix-opts {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .awix-collection--top .awix-price,
  .awix-collection--masonry .awix-price {
    max-inline-size: 360px;
  }
  .awix-collection--top .awix-group-search,
  .awix-collection--masonry .awix-group-search {
    max-inline-size: 280px;
  }
}

/* ---- masonry: columns of cards with mixed heights and no holes ----------------------------------------- */
/* CSS columns pack the cards top to bottom, so the card heights must differ or the result is just a grid;
   the image ratio cycles through three shapes (a compact card keeps its square thumbnail). */
.awix-collection--masonry .awix-grid {
  display: block;
  column-count: var(--awix-cols-mobile, 2);
  column-gap: 12px;
}
.awix-collection--masonry .awix-grid > li {
  display: block;
  break-inside: avoid;
  margin-block-end: 12px;
}
.awix-collection--masonry .awix-grid .awix-product-card {
  block-size: auto;
}
.awix-collection--masonry .awix-grid > li:nth-child(3n + 1) > :not(.awix-card--compact) :is(.awix-product-media, .pb-product-initial) {
  aspect-ratio: 2 / 3;
}
.awix-collection--masonry .awix-grid > li:nth-child(3n + 3) > :not(.awix-card--compact) :is(.awix-product-media, .pb-product-initial) {
  aspect-ratio: 4 / 5;
}
@media (max-width: 47.999rem) {
  /* a compact card needs the whole row on a phone */
  .awix-collection--masonry .awix-grid:has(.awix-card--compact) {
    column-count: 1;
  }
}
@media (min-width: 48rem) {
  .awix-collection--masonry .awix-grid {
    column-count: var(--awix-cols, 3);
    column-gap: 16px;
  }
  .awix-collection--masonry .awix-grid > li {
    margin-block-end: 16px;
  }
}
/* 43-filters.css */
/* The collection filters: card panel, chips, option rows, segmented sort and the phone bottom sheet (section
   main-collection). 60-product.css holds the base rules and loads after this file, so every rule here carries the
   `.awix-collection` prefix to outrank it. 42-collection-variants.css sets the panel, head, field, group, summary,
   body, opts, price and search box of the top and masonry bars at the same weight and loads before this file, so a
   rule that touches those properties is limited to `.awix-collection--sidebar`, `.awix-collection--card` (which only
   exists with the sidebar) or to a phone (the bars only differ from the sidebar at 900px and up). Rules for the
   card style (setting filter_style) come last and win over the shared ones at equal weight. Colours come from the
   theme variables only. */

.awix-collection {
  --awix-f-accent: var(--color-button, var(--color-brand));
  --awix-f-on-accent: var(--color-button-text, var(--color-brand-contrast));
  --awix-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- group chevron: down when closed, up when open, the same in either text direction -------------------- */
.awix-collection .awix-group > summary::after {
  inline-size: 18px;
  block-size: 18px;
  border: 0;
  background-color: currentColor;
  -webkit-mask: var(--awix-chevron) center / contain no-repeat;
  mask: var(--awix-chevron) center / contain no-repeat;
  transform: none;
}
.awix-collection .awix-group[open] > summary::after {
  transform: rotate(180deg);
}

/* ---- tap targets: every control is at least 44px tall ---------------------------------------------------- */
.awix-collection .awix-chip,
.awix-collection .awix-opt,
.awix-collection .awix-link,
.awix-collection .awix-more > summary,
.awix-collection .awix-seg label,
.awix-collection .awix-group-search,
.awix-collection .awix-price input {
  min-block-size: 44px;
}
.awix-collection .awix-close {
  inline-size: 44px;
  block-size: 44px;
}
.awix-collection .awix-group-search,
.awix-collection .awix-price input,
.awix-collection .awix-field input {
  font-size: 16px;
}

/* ---- active chips ------------------------------------------------------------------------------------------ */
.awix-collection .awix-chip {
  padding-inline: 14px;
  background: var(--color-surface);
}
.awix-collection .awix-chip:hover {
  background: var(--color-surface-muted);
}
.awix-collection .awix-chip > span {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
}

/* ---- groups: the count of picked options sits in the header as a small pill -------------------------------- */
.awix-collection .awix-group-n {
  min-inline-size: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--awix-f-accent);
  color: var(--awix-f-on-accent);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

/* ---- option rows: the native box and dot are replaced, the whole row is the target ----------------------- */
.awix-collection .awix-opt:has(input:checked) {
  background: color-mix(in srgb, var(--awix-f-accent) 8%, transparent);
  font-weight: 600;
}
.awix-collection .awix-opt input {
  appearance: none;
  display: grid;
  place-content: center;
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer;
}
.awix-collection .awix-opt input[type="radio"] {
  border-radius: 999px;
}
.awix-collection .awix-opt input::before {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  background: var(--awix-f-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
}
.awix-collection .awix-opt input[type="radio"]::before {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  clip-path: none;
}
.awix-collection .awix-opt input:checked {
  border-color: var(--awix-f-accent);
  background: var(--awix-f-accent);
}
.awix-collection .awix-opt input:checked::before {
  transform: scale(1);
}
.awix-collection .awix-opt input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.awix-collection .awix-more > summary {
  color: var(--color-text-muted);
}

/* ---- sort: segmented control above the grid --------------------------------------------------------------- */
.awix-collection .awix-seg {
  padding: 2px;
  background: var(--color-surface);
}
.awix-collection .awix-seg label {
  padding-inline: 16px;
}
.awix-collection .awix-seg label:hover {
  background: var(--color-surface-muted);
}
.awix-collection .awix-seg label:has(input:checked) {
  background: var(--awix-f-accent);
  color: var(--awix-f-on-accent);
}

/* ---- motion, only when the visitor has not asked for less -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .awix-collection .awix-chip,
  .awix-collection .awix-opt,
  .awix-collection .awix-seg label,
  .awix-collection .awix-opt input {
    transition: background-color .15s ease, border-color .15s ease;
  }
  .awix-collection .awix-opt input::before {
    transition: transform .12s ease;
  }
}

/* ---- sidebar on a desktop: a sticky card that scrolls inside itself when its groups are tall -------------- */
@media (min-width: 900px) {
  .awix-collection--sidebar {
    --awix-f-top: 16px;
  }
  /* A sticky header covers the top of the page, so the card parks below it. The header's wrapper owns
     --awix-header-h, which the card cannot read, hence the fallback of the header's usual height. */
  body:has(.awix-header[data-sticky="true"]) .awix-collection--sidebar {
    --awix-f-top: calc(var(--awix-header-h, 96px) + 16px);
  }
  .awix-collection--sidebar .awix-panel {
    inset-block-start: var(--awix-f-top);
    max-block-size: calc(100dvh - var(--awix-f-top) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-black) 6%, transparent);
  }
}
.awix-collection--sidebar .awix-field {
  border-block-start: 1px solid var(--color-border);
}

/* ---- phone: the panel is a bottom sheet with a sticky head and a sticky «show N products» footer --------- */
@media (max-width: 899px) {
  .js .awix-collection .awix-panel {
    padding-block-start: 0;
    box-shadow: 0 -12px 32px color-mix(in srgb, var(--color-black) 18%, transparent);
  }
  .js .awix-collection .awix-panel-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    margin-inline: -16px;
    margin-block: 0 4px;
    padding: 20px 16px 8px;
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  /* the grab handle */
  .js .awix-collection .awix-panel-head::before {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 40px;
    block-size: 4px;
    border-radius: 999px;
    background: var(--color-border);
  }
  .js .awix-collection .awix-drawer-foot {
    gap: 12px;
    padding-block-end: max(12px, env(safe-area-inset-bottom));
  }
  .js .awix-collection .awix-drawer-foot .btn {
    flex: 1 1 auto;
  }
  .js .awix-collection .awix-drawer-foot .awix-link {
    flex: none;
    padding-inline: 8px;
  }
}

/* ---- card style (filter_style = card): selected row, chips for every group, swatches, fold, sheet ---------- */
.awix-collection .awix-swatch {
  order: 1;
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: 999px;
  background: var(--awix-sw, transparent);
}
.awix-collection .awix-fold {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: none;
  color: inherit;
  cursor: pointer;
}

.awix-collection--card .awix-panel {
  padding: 0;
}
.awix-collection--card .awix-panel-head {
  margin: 0;
  padding: 8px 16px;
  border-block-end: 1px solid var(--color-border);
}
.awix-collection--card .awix-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
.awix-collection--card .awix-panel-title svg,
.awix-collection--card .awix-fold svg {
  inline-size: 20px;
  block-size: 20px;
}
.awix-collection--card .awix-panel-body {
  padding-inline: 16px;
  padding-block: 0 16px;
}

/* the «selected (N)» row: removable chips and clear all */
.awix-collection--card .awix-selected {
  padding-block: 12px;
  border-block-end: 1px solid var(--color-border);
}
.awix-collection--card .awix-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.awix-collection--card .awix-selected-title {
  font-size: var(--text-small);
  font-weight: 700;
}
.awix-collection--card .awix-selected .awix-chips {
  margin: 4px 0 0;
}
.awix-collection--card .awix-chip {
  border-color: transparent;
  border-radius: var(--radius-button);
  background: var(--color-surface-muted);
}
.awix-collection--card .awix-field {
  padding-block: 12px;
  border-block-start: 0;
}

/* groups: bold title, count pill, chevron; the options are chips */
.awix-collection--card .awix-group > summary {
  min-block-size: 48px;
  font-weight: 700;
}
.awix-collection--card .awix-group-body {
  padding-block-end: 16px;
}
.awix-collection--card .awix-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.awix-collection--card .awix-opt {
  position: relative;
  gap: 6px;
  padding: 4px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}
.awix-collection--card .awix-opt:hover {
  background: var(--color-surface-muted);
}
.awix-collection--card .awix-opt:has(input:checked) {
  border-color: var(--awix-f-accent);
  background: color-mix(in srgb, var(--awix-f-accent) 10%, var(--color-surface));
  font-weight: 600;
}
.awix-collection--card .awix-opt:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.awix-collection--card .awix-opt.is-zero:not(:has(input:checked)) {
  opacity: .5;
}
.awix-collection--card .awix-opt input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.awix-collection--card .awix-opt-label {
  flex: 0 1 auto;
}
.awix-collection--card .awix-opt:has(input:checked) .awix-swatch {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--awix-f-accent);
}
.awix-collection--card .awix-more {
  margin-block-start: 8px;
}
.awix-collection--card .awix-more > summary {
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-text);
  text-decoration: none;
}
.awix-collection--card .awix-more > summary::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
}

/* sort: a row of chips with a visible label, then the result count */
.awix-collection--card .awix-sort-label {
  font-size: var(--text-small);
  font-weight: 700;
}
.awix-collection--card .awix-seg {
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.awix-collection--card .awix-seg label {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}
.awix-collection--card .awix-seg label:hover {
  background: var(--color-surface-muted);
}
.awix-collection--card .awix-seg label:has(input:checked) {
  border-color: var(--awix-f-accent);
  background: color-mix(in srgb, var(--awix-f-accent) 10%, var(--color-surface));
  color: var(--color-text);
  font-weight: 600;
}

/* desktop: the header chevron folds the card down to its header (needs the script, so no script, no button) */
@media (min-width: 900px) {
  .js .awix-collection--card .awix-fold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .awix-collection--card .awix-panel.is-folded .awix-panel-body {
    display: none;
  }
  .awix-collection--card .awix-panel.is-folded .awix-panel-head {
    border-block-end-color: transparent;
  }
  .awix-collection--card .awix-panel.is-folded .awix-fold svg {
    rotate: 180deg;
  }
}

/* phone: the sheet's head and footer bleed to the panel edges (the panel has no padding of its own here) */
@media (max-width: 899px) {
  .js .awix-collection--card .awix-panel-head {
    margin-inline: 0;
    padding: 20px 16px 8px;
  }
  .js .awix-collection--card .awix-panel-body {
    padding-block-end: 0;
  }
}
/* 44-engagement.css */
/* Wishlist and compare: the look of the markup the storefront scripts bind to (snippets awix-wishlist-toggle, awix-compare-toggle,
   awix-compare-bar, the card actions in awix-product-card, the buy-box row in main-product and the links in awix-header).
   The behaviour is in the markup (data-awix-*, aria-pressed); a theme may restyle these classes and never remove the markup. */

/* ---- one control, three styles (parameter `style`): icon, text, pill -------------------------------------------- */
.awix-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  margin: 0;
  padding-block: 0;
  padding-inline: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-small);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}
.awix-act:hover,
.awix-act:focus-visible {
  background: var(--color-surface-muted);
  text-decoration: none;
}
.awix-act[aria-pressed="true"] {
  border-color: var(--brand);
  color: var(--brand);
}
.awix-act svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}
.awix-act__icon {
  position: relative;
  display: inline-flex;
  flex: none;
}
.awix-act--icon {
  inline-size: 44px;
  padding-inline: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.awix-act--pill {
  border-radius: 999px;
}
.awix-act--text,
.awix-act--text:hover,
.awix-act--text:focus-visible {
  padding-inline: 4px;
  border-color: transparent;
  background: none;
  color: var(--brand);
  text-decoration: underline;
}

/* ---- wishlist: the heart fills while the button is pressed ------------------------------------------------------ */
.awix-wishlist {
  margin: 0;
}
.awix-wishlist [aria-pressed="true"] svg {
  fill: currentColor;
}
.awix-wishlist svg {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.awix-wishlist svg.pop {
  transform: scale(1.35);
}
/* The burst the wishlist script plays when a product is saved. */
[data-awix-heart-particle] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  margin: -3px;
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
  animation: awix-heart-burst .6s ease-out forwards;
}
@keyframes awix-heart-burst {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(var(--tx, 0), var(--ty, 0)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .awix-wishlist svg { transition: none; }
  [data-awix-heart-particle] { animation: none; }
}

/* ---- compare: the refusal message sits under the button, out of the flow ----------------------------------------- */
.awix-compare {
  position: relative;
  display: inline-flex;
}
.awix-compare .awix-act--icon[aria-pressed="true"] {
  background: var(--brand);
  color: var(--color-brand-contrast);
}
.awix-compare__message {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 3;
  inline-size: max-content;
  max-inline-size: min(240px, 44vw);
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.7;
  box-shadow: var(--shadow-card);
}
.awix-compare__message:empty {
  display: none;
}

/* ---- product card: both controls over the image corners, beside the card's link -------------------------------- */
.awix-product-card {
  position: relative;
}
.awix-card-actions {
  position: absolute;
  inset-block-start: 20px;
  inset-inline: 20px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  /* the strip between the two buttons stays part of the card's link */
  pointer-events: none;
}
.awix-card-actions > * {
  pointer-events: auto;
}
.awix-card-actions .awix-compare__message {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.awix-card--overlay .awix-card-actions {
  inset-block-start: 8px;
  inset-inline: 8px;
}
/* the compact card's image is a 72px thumbnail: the controls move to the end of its row instead of covering it */
.awix-card--compact .awix-card-actions {
  position: static;
  flex: none;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

/* ---- product page: wishlist and compare in one row under the buy box ------------------------------------------- */
.awix-pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: 16px;
}

/* ---- header links ---------------------------------------------------------------------------------------------- */
.awix-header__compare:not([hidden]) {
  display: inline-flex;
}
.awix-header__icon--count {
  position: relative;
}
.awix-header__count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 2px;
  min-inline-size: 18px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.awix-header__count:empty {
  display: none;
}

/* ---- the compare bar: fixed, shown by the compare script once two products are chosen -------------------------- */
.awix-compare-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(16px + env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  justify-content: center;
  padding-inline: var(--spacing-pad);
  /* the strip is full width; only the link takes clicks */
  pointer-events: none;
}
.awix-compare-bar[hidden] {
  display: none;
}
.awix-compare-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 20px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  pointer-events: auto;
}
.awix-compare-bar__link:hover,
.awix-compare-bar__link:focus-visible {
  color: var(--color-brand-contrast);
  text-decoration: none;
}
.awix-compare-bar__link svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}
/* on a phone it clears the fixed bottom navigation */
@media (max-width: 749.98px) {
  body:has(.awix-bottom-nav) .awix-compare-bar {
    inset-block-end: calc(var(--awix-bottom-nav-h) + 12px + env(safe-area-inset-bottom));
  }
}
/* 45-features.css */
/* The mandatory feature snippets that have no markup of their own elsewhere: awix-share, awix-stock-alert, awix-message-seller,
   awix-call-for-price, awix-sales-pause-banner, awix-recently-viewed, awix-chat-launcher. The buttons reuse .awix-act / .btn
   (css/44-engagement.css, css/00-base.css); only the layout around them is here. Colours come from the theme variables only. */

/* ---- share: label and three links in one wrapping row -------------------------------------------------------- */
.awix-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-block-start: 16px;
}
.awix-share__label {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
.awix-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- stock alert: the sentence for a guest, then the button ----------------------------------------------------- */
.awix-stock-alert {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-block-start: 12px;
}
.awix-stock-alert__form,
.awix-stock-alert__text {
  margin: 0;
}
.awix-stock-alert__text {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

/* ---- call for price: on a card it stands where the price would ------------------------------------------------- */
.awix-call-for-price--card {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: 700;
}
.awix-call-for-price__text {
  font-weight: 700;
}

/* ---- sales pause: a full-width bar above the header ---------------------------------------------------------- */
.awix-sales-pause {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding-block: 10px;
  padding-inline: var(--spacing-pad);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-small);
  text-align: center;
}
.awix-sales-pause__text {
  margin: 0;
}
.awix-sales-pause__call {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* ---- recently viewed: spacing only; the shell stays hidden until the island fills it ---------------------------- */
.awix-recently-viewed {
  margin-block: var(--spacing-section);
}
.awix-recently-viewed__title {
  margin: 0 0 16px;
  font-family: var(--font-title);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: var(--leading-heading);
}

/* ---- chat launcher: a corner pill, the icon alone on a phone ----------------------------------------------------- */
.awix-chat-launcher {
  position: fixed;
  inset-inline-end: var(--spacing-pad);
  inset-block-end: calc(16px + env(safe-area-inset-bottom));
  z-index: 34;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 14px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-weight: 700;
  box-shadow: var(--shadow-card);
}
.awix-chat-launcher:hover,
.awix-chat-launcher:focus-visible {
  color: var(--color-brand-contrast);
  text-decoration: none;
}
.awix-chat-launcher svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}
@media (max-width: 749.98px) {
  .awix-chat-launcher span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body:has(.awix-bottom-nav) .awix-chat-launcher {
    inset-block-end: calc(var(--awix-bottom-nav-h) + 12px + env(safe-area-inset-bottom));
  }
}
/* 46-related.css */
/* Related products under the product page: a plain grid of the shop's linked items, two columns on a phone and four on a wide screen. */
.awix-related { margin-block-start: var(--spacing-section); }
.awix-related__title { font-size: var(--text-h2); margin-block: 0 16px; }
.awix-related__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 750px) { .awix-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 50-content.css */
/* Content sections: rich text, image with text, testimonials, FAQ, video.
   Trust badges, stats, FAQ rows, quotes, video and newsletter are styled by the pb-* rules in
   10-pagebuilder.css; this file only adds what the sections set themselves. Logical properties only. */

/* ---- shared: a call-to-action under the words ---- */
.awix-content-actions {
  margin: 0;
  margin-block-start: 6px;
}

/* ---- rich text: a measure the merchant sets, placed by the alignment ---- */
.awix-rt-inner {
  inline-size: 100%;
  max-inline-size: var(--awix-rt-max, none);
}
.awix-rt-inner.text-center { margin-inline: auto; }
.awix-rt-inner.text-end { margin-inline-start: auto; }
.awix-rt-inner .pb-text { max-inline-size: none; }
.awix-rt-inner > * + * { margin-block-start: 12px; }

/* ---- image with text: the hero-split look, plus ratio and vertical alignment ---- */
.awix-iwt-v-start { align-items: start; }
.awix-iwt-v-end { align-items: end; }
.awix-iwt-r11 .pb-hero-figure img { aspect-ratio: 1 / 1; }
.awix-iwt-r43 .pb-hero-figure img { aspect-ratio: 4 / 3; }
.awix-iwt-r34 .pb-hero-figure img { aspect-ratio: 3 / 4; }
.awix-iwt-r169 .pb-hero-figure img { aspect-ratio: 16 / 9; }
/* A portrait picture on a phone would fill the screen; it takes a narrower column. */
.awix-iwt-r34 .pb-hero-figure { max-inline-size: 26rem; margin-inline: auto; }
@media (min-width: 48rem) {
  .awix-iwt-r34 .pb-hero-figure { max-inline-size: none; }
  .awix-iwt-r34 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .awix-iwt-r34.img-start { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
}
/* No picture: the words fill the row on a soft panel (the ink colour at 7%, so it also suits a dark section) instead of leaving half the row empty. */
.awix-iwt.awix-iwt--text {
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(24px, 5vw, 56px);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.awix-iwt--text .pb-hero-words { max-inline-size: 48rem; }
.awix-iwt--text .pb-hero-words.text-center { margin-inline: auto; }
.awix-iwt--text .pb-hero-words.text-end { margin-inline-start: auto; }

/* ---- testimonials: a grid that swipes sideways on a phone when the merchant asks ---- */
@media (max-width: 47.999rem) {
  .awix-quote-scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 20rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px;
  }
  .awix-quote-scroll::-webkit-scrollbar { display: none; }
  .awix-quote-scroll > li {
    min-inline-size: 0;
    scroll-snap-align: start;
  }
}

/* ---- FAQ: the answer is rich text here, not pre-line plain text ---- */
.awix-faq .pb-faq-answer { white-space: normal; }
.awix-faq .pb-faq-answer > :last-child { margin-block-end: 0; }
.awix-faq .pb-faq-item > summary { min-block-size: 44px; }
/* 60-product.css */
/* Product, collection, category list, text page and not-found page (main-product, main-collection,
   main-list-collections, main-page, main-404). Colours come from the theme variables only. */

/* ---- shared bits ---------------------------------------------------------- */
.awix-stars {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.awix-star { color: var(--color-border); }
.awix-star.is-on { color: var(--color-accent); }

.awix-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--text-small);
  text-decoration: underline;
  cursor: pointer;
}
.awix-field {
  display: grid;
  gap: 6px;
  padding-block: 10px;
  font-weight: 600;
  font-size: var(--text-small);
}
.awix-field input,
.awix-field textarea {
  inline-size: 100%;
  font-weight: 400;
}
.awix-field textarea { min-block-size: 110px; resize: vertical; }

.awix-prose { max-inline-size: 78ch; line-height: 2; }
.awix-prose > :first-child { margin-block-start: 0; }
.awix-prose h2, .awix-prose h3, .awix-prose h4 { margin-block: 1.6em .6em; }
.awix-prose ul, .awix-prose ol { padding-inline-start: 1.4em; margin-block: 0 1em; }
.awix-prose img { border-radius: var(--radius-card); margin-block: 1em; }
.awix-prose a { text-decoration: underline; text-underline-offset: 3px; }
.awix-prose blockquote {
  margin: 1.2em 0;
  padding: 8px 18px;
  border-inline-start: 3px solid var(--color-brand);
  background: var(--color-surface-muted);
  border-radius: var(--radius-card);
}
.awix-prose table { inline-size: 100%; border-collapse: collapse; margin-block: 1em; }
.awix-prose th, .awix-prose td { padding: 8px 12px; border: 1px solid var(--color-border); text-align: start; }
.awix-prose hr { border: 0; border-block-start: 1px solid var(--color-border); margin-block: 2em; }

/* ---- product page --------------------------------------------------------- */
.awix-pdp { padding-block: 24px 56px; }
.awix-pdp__top {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .awix-pdp__top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* gallery: a strip of thumbnails beside the picture on a desktop, a row below it on a phone */
.awix-gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}
@media (min-width: 750px) {
  .awix-gallery { grid-template-columns: minmax(0, 1fr) 84px; align-items: start; }
  .awix-gallery[data-thumbs="start"] { grid-template-columns: 84px minmax(0, 1fr); }
  .awix-gallery[data-thumbs="none"] { grid-template-columns: minmax(0, 1fr); }
  .awix-gallery[data-thumbs="start"] .awix-gallery__strip { order: -1; }
  .awix-gallery__strip { position: relative; align-self: stretch; }
  .awix-gallery .awix-thumbs {
    position: absolute;
    inset: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.awix-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}
.awix-gallery__open {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  cursor: zoom-in;
}
#awix-main {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform .18s ease;
}
.awix-gallery__stage.is-zoomed #awix-main { transform: scale(2); }
/* The picture-less stage is the shared monogram tile (snippet awix-placeholder); this only sizes it. */
.awix-gallery__empty {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.awix-gallery__empty .awix-ph__mark { font-size: 4rem; font-size: clamp(3rem, 28cqi, 9rem); }
.awix-thumbs {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}
.awix-thumbs li { flex: none; }
.awix-thumb {
  display: block;
  inline-size: 76px;
  block-size: 76px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: calc(var(--radius-card) - 4px);
  background: var(--color-surface-muted);
}
.awix-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.awix-thumb:hover { border-color: var(--color-border); }
.awix-thumb[aria-current="true"] { border-color: var(--color-brand); }

/* lightbox (a native dialog) */
.awix-lightbox {
  inline-size: 100vw;
  block-size: 100vh;
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
}
.awix-lightbox::backdrop {
  background: color-mix(in srgb, var(--color-black) 90%, transparent);
}
.awix-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.awix-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}
.awix-lightbox__btn,
.awix-lightbox__nav {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-white) 16%, transparent);
  color: inherit;
  cursor: pointer;
}
.awix-lightbox__btn:hover,
.awix-lightbox__nav:hover { background: color-mix(in srgb, var(--color-white) 28%, transparent); }
.awix-lightbox__btn svg,
.awix-lightbox__nav svg { inline-size: 22px; block-size: 22px; }
.awix-lightbox__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
}
.awix-lightbox__prev { inset-inline-start: 12px; }
.awix-lightbox__next { inset-inline-end: 12px; }
.awix-lightbox__stage {
  display: grid;
  place-items: center;
  min-block-size: 0;
  overflow: hidden;
  padding-inline: 72px;
}
@media (max-width: 599px) {
  .awix-lightbox__stage { padding-inline: 8px; }
  .awix-lightbox__nav { inset-block-start: auto; inset-block-end: 16px; translate: none; }
}
.awix-lightbox__stage img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform .18s ease;
}
.awix-lightbox__stage img.is-zoomed { transform: scale(2.4); cursor: zoom-out; touch-action: none; }
@media (prefers-reduced-motion: reduce) {
  #awix-main, .awix-lightbox__stage img { transition: none; }
}

/* info column */
.awix-pdp__vendor { margin: 0; color: var(--color-text-muted); font-size: var(--text-small); }
.awix-pdp__title { margin-block: 4px 8px; }
.awix-pdp__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  color: inherit;
  font-size: var(--text-small);
}
.awix-pdp .awix-price-lg { margin-block: 8px 12px; }
.awix-pdp .awix-price-lg .pb-product-price-final { font-size: clamp(22px, 3vw, 28px); }
.awix-pdp .awix-price-lg .pb-product-price-list { font-size: var(--text-body); }
.awix-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: var(--text-small);
  font-weight: 700;
}
.awix-stock::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: currentColor;
}
.awix-stock.is-in { color: var(--color-ok); }
.awix-stock.is-out { color: var(--color-text-muted); }
.awix-keyspecs {
  display: grid;
  gap: 6px;
  margin: 0 0 20px;
  padding: 12px 14px;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
  font-size: var(--text-small);
}
.awix-keyspecs li { display: flex; justify-content: space-between; gap: 12px; }
.awix-keyspecs span { color: var(--color-text-muted); }

/* buy form */
.awix-buy { display: grid; gap: 18px; }
.awix-option { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.awix-option legend { margin-block-end: 8px; padding: 0; font-weight: 700; }
.awix-option__values { display: flex; flex-wrap: wrap; gap: 8px; }
.awix-pill { position: relative; display: inline-flex; }
.awix-pill input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.awix-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}
.awix-pill input:checked + span {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  font-weight: 700;
}
.awix-pill input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.awix-buy__row { display: flex; flex-wrap: wrap; gap: 12px; }
.awix-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  overflow: hidden;
}
.awix-qty button {
  inline-size: 44px;
  min-block-size: 48px;
  border: 0;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}
.awix-qty button:hover { background: var(--color-surface-muted); }
.awix-qty input {
  inline-size: 56px;
  min-block-size: 48px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--color-border);
  border-radius: 0;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.awix-qty input::-webkit-inner-spin-button,
.awix-qty input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.awix-buy__submit { flex: 1 1 200px; min-block-size: 48px; font-weight: 700; }
.awix-buy__submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.awix-contact {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
}
.awix-contact p { margin: 0; }

/* description, specs and reviews: tabs on a desktop, an accordion on a phone */
.awix-tabs { margin-block-start: 48px; }
.awix-tabs__list { display: none; }
.awix-tabs__item { border-block-end: 1px solid var(--color-border); }
.awix-tabs__item:first-of-type { border-block-start: 1px solid var(--color-border); }
.awix-tabs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 52px;
  list-style: none;
  font-weight: 700;
  cursor: pointer;
}
.awix-tabs__head::-webkit-details-marker { display: none; }
.awix-tabs__head::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.awix-tabs__item[open] > .awix-tabs__head::after { transform: rotate(-135deg); }
.awix-tabs__panel { padding-block: 4px 24px; }
@media (min-width: 750px) {
  .js .awix-tabs__list {
    display: flex;
    gap: 8px;
    margin-block-end: 24px;
    border-block-end: 1px solid var(--color-border);
  }
  .js .awix-tabs__head { display: none; }
  .js .awix-tabs__item,
  .js .awix-tabs__item:first-of-type { border: 0; }
  .js .awix-tabs__panel { padding-block: 0 16px; }
}
.awix-tabs__tab {
  min-block-size: 48px;
  padding-inline: 16px;
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  cursor: pointer;
}
.awix-tabs__tab:hover { color: var(--color-text); }
.awix-tabs__tab[aria-selected="true"] {
  color: var(--color-brand);
  border-block-end-color: var(--color-brand);
}

.awix-specs { display: grid; gap: 12px; max-inline-size: 860px; }
.awix-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.awix-card-title {
  margin: 0;
  padding: 12px 16px;
  background: var(--color-surface-muted);
  font-size: var(--text-body);
}
.awix-specs table { inline-size: 100%; border-collapse: collapse; }
.awix-specs tr:nth-child(even) { background: var(--color-surface-muted); }
.awix-specs th, .awix-specs td { padding: 12px 16px; text-align: start; vertical-align: top; }
.awix-specs th { inline-size: 40%; font-weight: 600; color: var(--color-text-muted); }

.awix-reviews { max-inline-size: 860px; }
.awix-review-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block-end: 8px; }
.awix-review-sum strong { font-size: 28px; line-height: 1.2; }
.awix-review-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding-block: 16px;
  border-block-start: 1px solid var(--color-border);
}
.awix-avatar {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-weight: 700;
}
.awix-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.awix-verified {
  padding-inline: 8px;
  border: 1px solid var(--color-ok);
  border-radius: 999px;
  color: var(--color-ok);
  font-size: 12px;
  white-space: nowrap;
}
.awix-review-body { margin: 6px 0 0; }
.awix-review-reply {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
  font-size: var(--text-small);
}
.awix-review-form {
  display: grid;
  gap: 4px;
  max-inline-size: 520px;
  margin-block-start: 24px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.awix-review-form h3 { margin-block-end: 4px; }
.awix-review-form .btn { justify-self: start; margin-block-start: 8px; }
.awix-review-login { margin-block-start: 16px; }
.awix-rate { min-inline-size: 0; margin: 0; padding: 8px 0; border: 0; }
.awix-rate legend { padding: 0; margin-block-end: 4px; font-size: var(--text-small); font-weight: 600; }
.awix-rate__stars { display: inline-flex; flex-direction: row-reverse; }
.awix-rate__stars input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-block-size: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}
.awix-rate__stars label {
  min-inline-size: 44px;
  padding: 4px;
  color: var(--color-border);
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.awix-rate__stars input:checked ~ label,
.awix-rate__stars label:hover,
.awix-rate__stars label:hover ~ label { color: var(--color-accent); }
.awix-rate__stars input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- collection page ------------------------------------------------------- */
.awix-titlebar {
  padding-block: 20px;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}
.awix-titlebar h1 { margin: 0; }
.awix-titlebar__desc { margin-block-start: 8px; color: var(--color-text-muted); }
.awix-titlebar--flat { padding-inline: 0; background: none; border: 0; }
.awix-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-block-end: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
.awix-crumbs a { color: inherit; }

.awix-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-block: 24px 48px;
}
@media (min-width: 900px) {
  .awix-cols { grid-template-columns: 280px minmax(0, 1fr); }
}
.awix-cols-main { min-inline-size: 0; }
.awix-panel {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.awix-panel:focus { outline: none; }
@media (min-width: 900px) {
  .awix-panel { position: sticky; inset-block-start: 16px; }
}
.awix-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 8px; }
.awix-panel-head h2 { margin: 0; font-size: 18px; }
.awix-panel-actions { display: flex; align-items: center; gap: 8px; }
.awix-close {
  display: none;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.awix-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.awix-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 40px;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: inherit;
  font-size: var(--text-small);
  text-decoration: none;
}
.awix-chip:hover { border-color: currentColor; text-decoration: none; }
.awix-group { border-block-start: 1px solid var(--color-border); }
.awix-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  list-style: none;
  font-weight: 600;
  cursor: pointer;
}
.awix-group > summary::-webkit-details-marker { display: none; }
.awix-group-title { flex: 1; }
.awix-group-n { font-size: 12px; color: var(--color-text-muted); }
.awix-group > summary::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-inline-start: 4px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.awix-group[open] > summary::after { transform: rotate(-135deg); }
.awix-group-body { padding-block-end: 12px; }
.awix-opts { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.awix-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 40px;
  padding: 4px 6px;
  border-radius: calc(var(--radius-button) + 2px);
  cursor: pointer;
}
.awix-opt:hover { background: var(--color-surface-muted); }
.awix-opt input {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-brand);
}
.awix-opt-label { flex: 1; min-inline-size: 0; }
.awix-opt-count { flex: none; font-size: 12px; color: var(--color-text-muted); }
.awix-group-search { inline-size: 100%; margin-block-end: 8px; min-block-size: 40px; }
.awix-group-search[hidden] { display: none; }
.awix-more > summary {
  display: flex;
  align-items: center;
  min-block-size: 40px;
  list-style: none;
  font-size: var(--text-small);
  text-decoration: underline;
  cursor: pointer;
}
.awix-more > summary::-webkit-details-marker { display: none; }
.awix-more[open] > summary { display: none; }
.awix-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.awix-price label { display: grid; gap: 4px; font-size: var(--text-small); font-weight: 600; }
.awix-price input { inline-size: 100%; min-block-size: 40px; font-weight: 400; }
.awix-unit { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.awix-apply { inline-size: 100%; margin-block-start: 12px; }
.js .awix-apply {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.awix-drawer-foot { display: none; }
.awix-backdrop { display: none; }

.awix-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  inline-size: 100%;
  min-block-size: 44px;
  margin-block-end: 12px;
  padding-inline: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  font-weight: 600;
  cursor: pointer;
}
.awix-toggle svg { inline-size: 18px; block-size: 18px; }
.awix-badge {
  min-inline-size: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

.awix-sortbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.awix-count { font-size: var(--text-small); color: var(--color-text-muted); }
.awix-seg {
  display: inline-flex;
  gap: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}
.awix-seg::-webkit-scrollbar { display: none; }
.awix-seg label {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 14px;
  border-radius: 999px;
  font-size: var(--text-small);
  white-space: nowrap;
  cursor: pointer;
}
.awix-seg input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.awix-seg label:has(input:checked) { background: var(--color-brand); color: var(--color-brand-contrast); }
.awix-seg label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.awix-grid { margin-block-end: 8px; }
.awix-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 16px;
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
  text-align: center;
}
.awix-empty p { margin: 0; font-weight: 700; }
.awix-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-block: 32px 8px; }
.awix-pager__page,
.awix-pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: inherit;
  text-decoration: none;
}
.awix-pager a:hover { border-color: var(--color-brand); text-decoration: none; }
.awix-pager__page.is-current { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-brand-contrast); font-weight: 700; }
.awix-pager__gap { min-inline-size: 24px; text-align: center; color: var(--color-text-muted); }

@media (max-width: 899px) {
  .js .awix-toggle { display: flex; }
  .js .awix-close { display: inline-flex; align-items: center; justify-content: center; }
  .js .awix-panel {
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--awix-banner-h, 0px);
    inset-block-start: auto;
    z-index: 1000;
    max-block-size: calc(85dvh - var(--awix-banner-h, 0px));
    padding-block-end: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .js.awix-open .awix-panel { transform: none; visibility: visible; transition: transform .25s ease; }
  .js .awix-drawer-foot {
    position: sticky;
    inset-block-end: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-inline: -16px;
    padding: 12px 16px;
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .js .awix-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    inset-block-end: var(--awix-banner-h, 0px);
    z-index: 999;
    background: color-mix(in srgb, var(--color-black) 45%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .js.awix-open .awix-backdrop { opacity: 1; pointer-events: auto; }
  .js.awix-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .js .awix-panel, .js .awix-backdrop { transition: none; }
}

/* ---- category list -------------------------------------------------------- */
.awix-catlist { padding-block: 24px 56px; }
.awix-cat-grid > li { display: grid; }
.awix-cat {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease;
}
.awix-cat:hover, .awix-cat:focus-visible { border-color: var(--color-brand); text-decoration: none; }
.awix-cat img,
.awix-cat__initial {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 4px);
}
.awix-cat img { background: var(--color-surface-muted); }
.awix-cat__title { font-weight: 700; }
.awix-cat__count { font-size: var(--text-small); }

/* ---- text page and not-found page ------------------------------------------- */
.awix-page { padding-block: 32px 64px; }
.awix-page--narrow { max-inline-size: calc(780px + 2 * var(--spacing-pad)); }
.awix-page--normal { max-inline-size: calc(1000px + 2 * var(--spacing-pad)); }
.awix-page__head {
  margin-block-end: 24px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--color-border);
}
.awix-page__head h1 { margin: 0; }
.awix-404 { display: grid; justify-items: center; gap: 8px; padding-block: 72px 96px; text-align: center; }
.awix-404__code {
  margin: 0;
  color: var(--color-border);
  font: 800 clamp(72px, 16vw, 128px)/1 var(--font-title);
}
.awix-404 h1 { margin: 0; }
.awix-404__text { max-inline-size: 48ch; margin: 0; }
.awix-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 16px; }