/* The Auvyx theme for EzyPlatform. Every component on its pages is Auvyx UI (the ax- build in /auvyx/assets/theme.css, in the style and the
   tokens chosen in Auvyx Builder > Design); this sheet only lays out the page around them: the frame, the header and footer, a few type
   helpers, the cart lines and the summary. It has no colour, font or radius of its own: it reads Auvyx UI's tokens (--background,
   --foreground, --muted-foreground, --border, --card, --primary, --radius), so a change of style or tokens restyles the whole site. */

/* ── the platform's classes the theme keeps for its scripts ─────────────────────────────────────────────────────────────────────────── */
/* ecommerce, ezylogin and ezyweb hide and show parts with Bootstrap's d-none; on the theme's pages it means the same, and outranks any
   component's display (an ax-cluster or ax-card that is hidden stays hidden). */
.auvyx-page .d-none { display: none !important; }
.auvyx-page .d-block[data-auvyx-show-with] { display: block !important; }
/* a cart stepper the shop "hides" at one or at the stock limit stays in place, disabled (auvyx-shop.js), so the stepper keeps its shape */
.auvyx-page [data-auvyx-hidden-disables].d-none { display: inline-flex !important; }

/* ── the frame ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
body.ezy-default-theme { margin: 0; }
body:has(> .auvyx-site), body:has(> * > .auvyx-site) { margin: 0; background: var(--wp--preset--color--auvyx-base, #fff); }
.auvyx-site {
  display: flex; flex-direction: column; min-block-size: 100svh;
  background: var(--background); color: var(--foreground);
  font-family: var(--font-sans, var(--wp--preset--font-family--auvyx-body, system-ui, sans-serif));
  -webkit-font-smoothing: antialiased;
}
.auvyx-main { flex: 1 0 auto; }
.auvyx-section { padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.auvyx-wide > .auvyx-section:first-child { padding-block-start: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.auvyx-skip:focus { position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 60; inline-size: auto; block-size: auto;
  clip: auto; margin: 0; padding: .5rem .75rem; overflow: visible; white-space: normal; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); }
.auvyx-plugin-content { max-inline-size: 72rem; margin-inline: auto; padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) 1rem; }

/* ── icons (the sprite in auvyx-shop/parts :: icons, Lucide) ───────────────────────────────────────────────────────────────────────── */
.auvyx-icon { inline-size: 1rem; block-size: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auvyx-spin { inline-size: 1.5rem; block-size: 1.5rem; animation: auvyx-spin .8s linear infinite; }
@keyframes auvyx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auvyx-spin { animation-duration: 2.4s; } }
[dir="rtl"] .auvyx-icon[data-rtl-flip] { transform: scaleX(-1); }

/* ── type ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-display { font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.auvyx-h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.auvyx-h2 { font-size: 1.375rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
.auvyx-h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.auvyx-lead { font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); max-inline-size: 60ch; text-wrap: pretty; }
.auvyx-eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.auvyx-muted { color: var(--muted-foreground); }
.auvyx-small { font-size: .875rem; line-height: 1.45; }
.auvyx-tabular { font-variant-numeric: tabular-nums; }
.auvyx-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 3px; }
.auvyx-link:hover { text-decoration-color: currentColor; }
.auvyx-error { color: var(--destructive, #dc2626); font-size: .8125rem; }
.auvyx-block { inline-size: 100%; }
.auvyx-site .ax-field > select { inline-size: 100%; }
.ax-card > header > h1[data-title] { font-size: 1.375rem; letter-spacing: -.015em; }

/* ── header: the blocks' store header (shop-header, shop-nav, shop-header-search, shop-header-actions, shop-count; rules in the block
   section below) with what a real site adds: its logo picture, a language choice and the phone menu (an ax-sheet) ───────────────── */
.shop-header { z-index: 40; }
.block-logo { white-space: nowrap; font-weight: 600; letter-spacing: -.015em; }
.block-logo img { block-size: 2rem; inline-size: auto; }
.shop-nav { flex-wrap: nowrap; overflow: hidden; }
.shop-header-lang { inline-size: auto; }
/* the menu button is for a phone only (the nav shows on a wider screen); Auvyx UI's .ax-btn sets a display of its own, so this weighs more */
.shop-header .shop-header-menu.ax-btn { display: none; }
.auvyx-justify-start, .ax-btn.auvyx-justify-start { justify-content: flex-start; }
/* the phone menu: room for the search field's focus ring (the sheet's body scrolls, so it would clip it), a gap under the field */
#auvyxMenuSheet > section { padding-block: 0.25rem 1rem; }
#auvyxMenuSheet > section > form { margin-block-end: 0.5rem; }
.auvyx-indent { padding-inline-start: 1.75rem; }
@media (width < 48rem) { .shop-header-lang { display: none; } .shop-header .shop-header-menu.ax-btn { display: inline-flex; } }

/* the notice line across the top (`auvyx_topbar_text`), scrolling slowly; still for a visitor who asks for less motion */
.shop-topbar { overflow: hidden; background: var(--foreground); color: var(--background); font-size: 0.8125rem; font-weight: 500; }
.shop-topbar-track { display: flex; inline-size: max-content; animation: shop-topbar 60s linear infinite; }
.shop-topbar-track > span { padding-block: 0.5rem; padding-inline-end: 3rem; white-space: pre; }
.shop-topbar:hover .shop-topbar-track { animation-play-state: paused; }
@keyframes shop-topbar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .shop-topbar-track { animation: none; } .shop-topbar-track > span + span { display: none; } }
/* the nav: the shop's categories in a panel under "Shop", then the links */
.shop-nav { align-items: center; overflow: visible; }
.shop-nav-drop { position: relative; }
.shop-nav-drop > summary { display: inline-flex; align-items: center; gap: 0.25rem; list-style: none; cursor: pointer; color: var(--foreground); font-size: 0.875rem; }
.shop-nav-drop > summary::-webkit-details-marker { display: none; }
.shop-nav-drop > summary .auvyx-icon { inline-size: 0.875rem; block-size: 0.875rem; transition: transform .15s ease; }
.shop-nav-drop[open] > summary .auvyx-icon { transform: rotate(180deg); }
.shop-nav-panel { position: absolute; inset-block-start: calc(100% + 0.75rem); inset-inline-start: -1rem; z-index: 50; display: grid; gap: 0.75rem; min-inline-size: 22rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover, var(--background)); color: var(--popover-foreground, var(--foreground));
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / .25); }
.shop-nav-panel-title { margin: 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.shop-nav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem 1rem; }
.shop-nav-panel ul a { display: block; padding-block: 0.375rem; color: var(--foreground); font-size: 0.875rem; }
.shop-nav-panel ul a:hover { color: var(--primary); }
.shop-nav-panel > .ax-btn { justify-self: start; padding-inline: 0; }
/* the actions: icon and word, all one height (the design's style sizes them); the count beside the cart's word */
.shop-header-actions { margin-inline-start: auto; }
.shop-header-link.ax-btn { gap: 0.375rem; }
.shop-header-link > .shop-count { position: static; inset: auto; margin-inline-start: 0.125rem; }
.shop-header-link > .shop-count:empty, .shop-header-link > .shop-count[data-count="0"] { display: none; }
@media (width < 64rem) { .shop-header-wide { display: none; } }
@media (width < 48rem) { .shop-header-link > span:not(.shop-count) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ── footer ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-footer { margin-block-start: clamp(2rem, 1rem + 4vw, 5rem); padding-block: 3rem 2rem; border-block-start: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 45%, var(--background)); }
.auvyx-footer .auvyx-link { text-decoration: none; color: var(--muted-foreground); font-size: .9375rem; }
.auvyx-footer .auvyx-link:hover { color: var(--foreground); }
.auvyx-footer hr { border-color: var(--border); }
/* the shop's footer: its promises, the brand and the columns, the bottom line */
.shop-footer { padding-block: 0 2rem; }
.shop-footer-perks { list-style: none; margin: 0; padding: 2.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem;
  border-block-end: 1px solid var(--border); }
.shop-footer-perks > li { display: flex; align-items: flex-start; gap: 0.875rem; }
.shop-footer-perks strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.shop-footer-perks small, .shop-footer-perks .auvyx-link { display: block; margin-block-start: 0.125rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.shop-footer-perk-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--background); }
.shop-footer-perk-icon .auvyx-icon { inline-size: 1.125rem; block-size: 1.125rem; }
.shop-footer-cols { display: grid; grid-template-columns: minmax(16rem, 1.4fr) repeat(auto-fit, minmax(10rem, 1fr)); gap: 2.5rem; padding-block: 2.5rem; }
.shop-footer-brand { display: grid; gap: 0.75rem; align-content: start; }
.shop-footer-brand > p { margin: 0; max-inline-size: 22rem; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.6; }
.shop-footer-brand > .ax-btn { justify-self: start; }
.shop-footer-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
.shop-footer-name img { width: auto; height: 28px; flex: none; }
.shop-footer-title { margin: 0 0 0.875rem; font-size: 0.875rem; font-weight: 600; }
.shop-footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.shop-footer-cols ul a { color: var(--muted-foreground); text-decoration: none; font-size: 0.9375rem; }
.shop-footer-cols ul a:hover { color: var(--foreground); }
.shop-footer-cols p { margin: 0 0 0.5rem; color: var(--muted-foreground); font-size: 0.9375rem; }
.shop-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.8125rem; }
.shop-footer-top { display: inline-flex; align-items: center; gap: 0.375rem; color: inherit; text-decoration: none; }
.shop-footer-top:hover { color: var(--foreground); }
.shop-footer-top .auvyx-icon { inline-size: 0.875rem; block-size: 0.875rem; }
@media (width < 48rem) { .shop-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-footer-brand { grid-column: 1 / -1; } }
/* the empty cart's popular products */
.shop-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* ── home (no page called `home` yet) ───────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-hero { padding-block: clamp(4rem, 2rem + 8vw, 9rem); }

/* ── empty and error states ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-empty { padding-block: clamp(2rem, 1rem + 5vw, 5rem); }
.auvyx-empty h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.ax-empty > header > .auvyx-error-code { font-size: clamp(3.5rem, 2rem + 6vw, 6rem); line-height: 1; font-weight: 700; letter-spacing: -.05em; color: var(--muted-foreground); opacity: .5; }
.auvyx-error-page form { inline-size: min(22rem, 100%); margin-inline: auto; }
.auvyx-narrow { max-inline-size: 30rem; margin-inline: auto; }

/* ── sign in, register, reset ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-auth { display: grid; justify-items: center; padding-block: clamp(1rem, .5rem + 3vw, 3rem); }
.auvyx-auth__card { inline-size: min(26rem, 100%); }
.auvyx-auth__switch { justify-content: center; gap: .25rem; flex-wrap: wrap; font-size: .875rem; }
.auvyx-auth .ax-field-separator span { text-transform: lowercase; }
.auvyx-auth img { inline-size: 18px; block-size: 18px; }

/* ── ecommerce: the Auvyx UI blocks' own styles are in auvyx-shop-blocks.css (generated by tools/blocks_css.py from @auvyx/ui's blocks,
   for the ax- build), loaded before this sheet; what follows is the theme's. */

/* the theme's additions to the blocks: what the platform's data needs */
.shop-qty > output { display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.shop-qty > .ax-btn[disabled] { opacity: .4; }
/* a shop that does not let the cart change a line's quantity: the amount reads as text ("× 2"), not as a control */
.shop-qty:not(:has(.ax-btn)) { border-color: transparent; }
.shop-qty:not(:has(.ax-btn)) > output { inline-size: auto; padding-inline: 0; color: var(--muted-foreground); }
.shop-qty:not(:has(.ax-btn)) > output::before { content: "× "; }
.shop-thumb-empty { display: inline-grid; place-items: center; color: var(--muted-foreground); }
.shop-cols > * { min-inline-size: 0; }
@media (width < 56rem) { .shop-sticky { position: static; } }
.shop-form-grid > .ax-field > select { inline-size: 100%; }
.shop-choices { display: grid; gap: 0.75rem; }
.shop-choices .ax-field[data-orientation="horizontal"] { align-items: center; }
.shop-choices h3 { font-size: 0.875rem; font-weight: 500; }
.shop-choices p { font-size: 0.8125rem; color: var(--muted-foreground); }
.shop-order-list [data-order-status][hidden] { display: none; }
/* the block's order head is a row (its figures, then its actions), not the card header's title grid */
.ax-card > header.shop-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.ax-card > header.shop-order-head > .shop-kv { flex: 1 1 24rem; }
.shop-help { display: grid; gap: 0.5rem; }
.auvyx-qr:empty { display: none; }
.auvyx-qr { display: grid; place-items: center; }
.auvyx-end { text-align: end; }
@media (max-width: 640px) { .auvyx-hide-sm { display: none; } }

/* ── the product page: product-01 of the blocks (gallery carousel, details, reviews-01, product-card-01); the theme's additions ──── */
.shop-pdp-nav.ax-btn { border-radius: 999px; }
.shop-pdp-main.shop-thumb-empty { display: grid; place-items: center; aspect-ratio: 1; background: var(--muted); color: var(--muted-foreground); }
.shop-swatches { flex-wrap: wrap; }
.shop-swatch-dot { inline-size: 0.875rem; block-size: 0.875rem; border-radius: 999px; border: 1px solid var(--border); margin-inline-end: 0.375rem; }
.shop-pdp-info .ax-accordion summary { font-size: 0.875rem; }
a.shop-eyebrow, .shop-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; }
a.shop-eyebrow:hover { color: var(--foreground); }
.shop-excerpt { margin: 0; }
.shop-specs { display: grid; margin: 0; font-size: 0.875rem; }
.shop-specs > div { display: grid; grid-template-columns: minmax(7rem, 35%) 1fr; gap: 1rem; padding-block: 0.625rem; border-block-end: 1px solid var(--border); }
.shop-specs > div:last-child { border-block-end: 0; }
.shop-specs dt { color: var(--muted-foreground); }
.shop-specs dd { margin: 0; }
/* the buy row is bottom-nav-03's bar (shop-buy-bar) only on a phone: in the flow beside the details on a wider screen */
.shop-pdp-buy.shop-buy-bar > .shop-qty { display: inline-flex; flex: none; align-self: stretch; align-items: stretch; }
.shop-pdp-buy.shop-buy-bar > .shop-qty > input, .shop-pdp-buy.shop-buy-bar > .shop-qty > .ax-btn { block-size: auto; }
.shop-pdp-buy.shop-buy-bar > .shop-add-btn { flex: 1; }
.shop-pdp-buy.shop-buy-bar > .shop-wish { flex: none; }
.shop-buy-now.ax-btn { inline-size: 100%; }
/* Buy now stands out from Add to cart (the primary colour): filled in the text colour, the strongest contrast on the page in light
   and dark alike (owner, 2026-11-08: the outline looked like a secondary action). */
.shop-buy-now.shop-buy-now.ax-btn[data-variant] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.shop-buy-now.shop-buy-now.ax-btn[data-variant]:hover:not(:disabled) { background: color-mix(in oklab, var(--foreground) 82%, var(--background)); color: var(--background); }
.shop-buy-now.shop-buy-now.ax-btn[data-variant]:disabled { opacity: .5; }
@media (width >= 48rem) {
  .shop-pdp-buy.shop-buy-bar { position: static; display: flex; align-items: stretch; gap: 0.75rem; max-inline-size: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
}
@media (width < 48rem) {
  .shop-pdp-buy.shop-buy-bar { max-inline-size: none; gap: 0.5rem; box-shadow: 0 -8px 24px -16px rgb(0 0 0 / 0.25); }
  .shop-pdp { padding-block-end: 1rem; }
  body:has(.shop-pdp-buy) .auvyx-main { padding-block-end: 5rem; }
}
.shop-review-dialog > div { max-inline-size: min(34rem, calc(100vw - 2rem)); }
.shop-quick-icon.ax-btn { background: var(--background); }
a[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ── the quick view button on every product card ────────────────────────────────────────────────────────────────────────────────────── */
.shop-quick-host { position: relative; }
.shop-quick.ax-btn { position: absolute; inset-inline: 0.75rem; inset-block-end: 0.75rem; z-index: 2; gap: 0.375rem; box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.35); background: color-mix(in oklab, var(--background) 92%, transparent); backdrop-filter: blur(8px); color: var(--foreground); opacity: 0; translate: 0 0.5rem; transition: opacity .2s, translate .2s; }
.shop-quick-host:hover .shop-quick, .shop-quick:focus-visible { opacity: 1; translate: 0 0; }
@media (hover: none) {
  .shop-quick.ax-btn { inset-inline: auto 0.5rem; inset-block: auto 0.5rem; inline-size: 2.25rem; block-size: 2.25rem; padding: 0; border-radius: 999px; opacity: 1; translate: none; }
  .shop-quick > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ── the quick view dialog ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.shop-quickview > div { max-inline-size: min(60rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
.shop-quickview > div > button { inset-block-start: 0.75rem; inset-inline-end: 0.75rem; z-index: 3; inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--background) 85%, transparent); color: inherit; cursor: pointer; }
.shop-qv { display: grid; max-block-size: calc(100dvh - 2rem); overflow-y: auto; }
@media (width >= 48rem) { .shop-qv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; } .shop-qv-info { overflow-y: auto; max-block-size: calc(100dvh - 2rem); } }
.shop-qv-media { position: relative; background: var(--muted); }
.shop-qv-img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (width < 48rem) { .shop-qv-img { aspect-ratio: 1; } }
.shop-qv-media .shop-thumbs { position: absolute; inset-inline: 0.75rem; inset-block-end: 0.75rem; margin: 0; }
.shop-qv-media .shop-card-badge { inset-block-start: 0.75rem; }
.shop-qv-info { padding: 1.5rem; align-content: start; }
@media (width >= 48rem) { .shop-qv-info { padding: 2.5rem 2rem 2rem; } }
.shop-qv-info .shop-h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.shop-qv-info .ax-badge { justify-self: start; }
.shop-qv-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* the quantity takes the height of the button beside it, whatever the design's style makes it (a fixed 2.5rem stood taller than a
   style's smaller buttons) */
.shop-qv-buy { display: flex; align-items: stretch; gap: 0.75rem; }
.shop-qv .shop-qv-buy > .ax-btn { flex: 1; gap: 0.5rem; block-size: auto; min-block-size: 2.5rem; }
.shop-qv-buy .shop-qty { align-items: stretch; }
.shop-qv-buy .shop-qty > input { block-size: auto; }
.shop-qv-buy .shop-qty > .ax-btn { block-size: auto; inline-size: 2.5rem; }
/* a link-styled button reads as text: flush with the lines above it (a style's link padding indented it) */
.shop-qv-info .ax-btn.shop-qv-more { align-self: flex-start; justify-self: start; padding-inline: 0; min-block-size: 0; block-size: auto; gap: 0.375rem; }
.shop-skeleton-line { display: block; block-size: 1rem; inline-size: 70%; }
.shop-qv-info .shop-skeleton-line:first-child { block-size: 1.75rem; }

/* ── the mini cart (cart-03's sheet) ────────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-page .ax-sheet.shop-minicart[data-side] { inline-size: min(26rem, 92vw); }
.shop-minicart.ax-sheet { background: var(--background); color: var(--foreground); box-shadow: -20px 0 50px -20px rgb(0 0 0 / 0.3); }
.ax-sheet.shop-minicart > .shop-minicart-head { flex-direction: row; }
.shop-minicart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 1rem; border-block-end: 1px solid var(--border); }
.shop-minicart-head h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.shop-minicart-head .shop-note { margin-block-start: 0.125rem; }
.ax-sheet.shop-minicart > .shop-sheet-lines { padding: 0.5rem 1.25rem 1rem; }
.shop-minicart .shop-lines[data-size="sm"] > li:first-child { padding-block-start: 0.875rem; }
.shop-minicart .shop-mini-foot { padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); background: var(--background); }
.shop-minicart .shop-mini-foot .shop-row strong { font-size: 1.0625rem; }
.shop-minicart .shop-mini-actions .ax-btn { block-size: 2.75rem; gap: 0.5rem; }
.shop-minicart[aria-busy] .shop-sheet-lines { opacity: 0.6; pointer-events: none; transition: opacity .2s; }
.shop-minicart .shop-line-name .shop-link { font-weight: 500; }
.shop-minicart .shop-qty > output { inline-size: 1.75rem; block-size: 1.75rem; }
.shop-mini-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 0 1.5rem; text-align: center; }
.shop-mini-empty-icon { display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: 0.5rem; border-radius: 999px; background: var(--muted); }
.shop-mini-empty-icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.shop-mini-empty h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.shop-mini-empty .shop-note { justify-content: center; margin-block-end: 0.75rem; }
.shop-mini-suggest { display: grid; gap: 0.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.shop-mini-suggest .shop-lines > li { align-items: center; }
.shop-mini-suggest .shop-price strong { font-size: 0.8125rem; }

/* the header cart link of a Builder header (icon and label): the count a pill after the label, not over the icon */
.auvyx-ezy-cart > .shop-count { position: static; inset: auto; min-inline-size: 1.25rem; block-size: 1.25rem; padding-inline: 0.375rem; margin-inline-start: 0.125rem; }
/* as a button it keeps the button's own metrics: no gap or touch minimum of the Builder cart link's */
.auvyx-page .auvyx-ezy-cart.ax-btn { gap: calc(var(--spacing, 0.25rem) * 1); min-height: 0; min-width: 0; }
.auvyx-ezy-cart.ax-btn > .shop-count { min-inline-size: 1.125rem; block-size: 1.125rem; padding-inline: 0.3125rem; font-size: 0.6875rem; }
/* on a small phone a filled cart's label and count no longer fit beside the logo and the account link, and the header
   widened the page past the screen (the mini cart opened 4px off its right edge at 320px): the icon and the count say it,
   the label stays for screen readers */
@media (width < 23rem) {
  .auvyx-ezy-cart.ax-btn:has(> .shop-count[data-count]:not([data-count="0"])) > span:not([class]) {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* the toaster above the bottom bars */
.ax-toaster#auvyxToaster { z-index: 60; }
.ax-toaster#auvyxToaster[popover] { inset: auto auto 0 50%; margin: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
.ax-toaster#auvyxToaster[popover]:not(:popover-open) { display: none; }
@media (width < 48rem) { .ax-toaster#auvyxToaster[popover] { inset: 0 auto auto 50%; flex-direction: column; } }
.ax-toaster .ax-toast-content { border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover, var(--background)); color: var(--popover-foreground, var(--foreground)); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3); }
.ax-toaster .ax-toast[data-kind="ok"] .ax-toast-content > svg { color: #16a34a; }
.ax-toaster .ax-toast[data-kind="error"] .ax-toast-content > svg { color: var(--destructive); }

/* a long page (the account) and a short one (the orders) keep their frame at the same place: the scroll bar's room is always kept */
html { scrollbar-gutter: stable; }

/* the account pages share the blocks' sidebar (shop-account, shop-account-nav, shop-profile) */
/* phones (owner, 2026-11-09: the account page was wider than the screen): the account's column may be narrower than its tabs,
   which scroll inside it, and than its tables; a grid track otherwise grows to its widest content */
.shop-account { grid-template-columns: minmax(0, 1fr); }
@media (width >= 48rem) { .shop-account { grid-template-columns: 14rem minmax(0, 1fr); } }
.shop-account > *, .shop-account-nav { min-inline-size: 0; }
@media (width < 48rem) { .shop-account-nav ul { scrollbar-width: none; overscroll-behavior-x: contain; } .shop-account-nav ul::-webkit-scrollbar { display: none; } }
/* a table that is wider than its card scrolls inside it (the account's recent orders: four columns on a phone) */
.shop-table-wrap { overflow-x: auto; max-inline-size: 100%; }
.shop-table-wrap > table { min-inline-size: 100%; }
.shop-table-wrap td, .shop-table-wrap th { white-space: nowrap; }
/* an order's progress: each step's name wraps under its dot rather than running into the next */
.shop-tracker > li { min-inline-size: 0; }
.shop-tracker > li > span:last-child { overflow-wrap: anywhere; line-height: 1.3; }
@media (width < 30rem) { .shop-tracker { font-size: 0.75rem; } }
/* the narrowest phones: a card's action wraps its words, a cart line's remove button keeps only its icon */
@media (width < 24rem) { .ax-card-action .ax-btn { white-space: normal; text-align: center; } .shop-remove > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.shop-account-nav .ax-avatar { inline-size: 2.25rem; block-size: 2.25rem; }
/* the page you are on reads as chosen (bold, filled); a link under the pointer only darkens: with the neutral preset --accent and --muted
   are one grey, so a hovered link looked chosen too (two "current" items on /orders) */
.shop-account-nav a[aria-current] { font-weight: 600; }
.shop-account-nav a:not([aria-current]):hover, .shop-account-nav button:hover { background: none; color: var(--foreground); }
.auvyx-skeleton-line { display: inline-block; inline-size: 8rem; block-size: 1rem; vertical-align: middle; }

/* ── posts ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.auvyx-post-item h2 { font-size: 1.0625rem; font-weight: 600; }
.auvyx-post-item h2 a::after { content: ""; position: absolute; inset: 0; }
.auvyx-post-item { position: relative; }
.auvyx-post-item p a { position: relative; z-index: 1; }
.auvyx-page-title { margin-block-end: 1.5rem; }
.auvyx-post-head + .auvyx-studio-page, .auvyx-post-head { padding-block-end: 0; }

/* ── a plugin's own part inside a theme page (ecommerce's delivery tracking): its Bootstrap-era markup, kept readable ───────────────── */
.auvyx-plugin-part table { inline-size: 100%; font-size: .875rem; }
.auvyx-plugin-part th, .auvyx-plugin-part td { padding: .5rem; border-block-end: 1px solid var(--border); text-align: start; }

/* ── the loading screen: a small dialog, never a wide card ──────────────────────────────────────────────────────────────────────────── */
.auvyx-busy > div { inline-size: auto; min-inline-size: 10rem; }

/* the account activated (account/activation): a check mark over the title */
.auvyx-activated > header { text-align: center; justify-items: center; }
.auvyx-activated__mark { display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: 0.5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); }
.auvyx-activated__mark svg { inline-size: 1.75rem; block-size: 1.75rem; }

/* ── the catalogue (/shop, a category): filter-01, filter-03, category-03 ─────────────────────────────────────────────────────────── */
.shop-catalog .shop-cards[aria-busy="true"] { opacity: 0.55; transition: opacity .2s; }
.shop-filter-open.ax-btn { display: none; }
@media (width < 56rem) { .shop-filter-open.ax-btn { display: inline-flex; } }
.shop-filter-sheet.ax-sheet { max-block-size: 85dvh; }
.shop-filter-sheet .shop-filters-panel { display: grid; }
.shop-sheet-close.ax-btn { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; }
.shop-check-list label input[type="radio"] { flex: none; }
/* a phone page must never be wider than the screen: it widened every fixed sheet with it (the filter sheet's close button
   and footer, the mini cart's right edge went off screen once a filter was on). The results grid's one column was `auto`
   below 56rem, so it grew to the toolbar's content; it is bounded like the desktop's, and the toolbar (which never wraps,
   shop-blocks) lets its active-filter chips shrink and scroll sideways */
@media (width < 56rem) { .shop-results { grid-template-columns: minmax(0, 1fr); } }
.shop-toolbar > .shop-chip-row { flex: 1 1 0; min-inline-size: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.shop-toolbar > .shop-chip-row::-webkit-scrollbar { display: none; }
.shop-toolbar > .shop-chip-row[hidden] { display: none; }
.shop-toolbar > .shop-chip-row > * { flex: none; }
.shop-toolbar > .ax-btn, .shop-toolbar > .shop-filter-end { flex: none; }
/* on a phone the filter button and the sort leave the chips no room: the chips take their own line under them */
@media (width < 56rem) { .shop-toolbar { flex-wrap: wrap; } .shop-toolbar > .shop-chip-row { order: 3; flex-basis: 100%; } }
/* wishlist and order tracking */
.shop-lookup { display: grid; gap: 1.5rem; max-inline-size: 40rem; margin-inline: auto; padding-block: 1rem 3rem; }
.shop-card .shop-card-body .ax-cluster > .ax-btn { flex: none; }
/* a sale badge stays readable on a dark photo: solid, not the tinted destructive badge */
.shop-card-badge.ax-badge[data-variant="destructive"] { background: var(--destructive); color: #fff; }
.shop-filter-sheet .shop-filter-head h2 { display: none; }
.shop-filter-sheet .shop-filter-head { justify-content: flex-end; }
/* two product cards a row on a phone (the blocks fit one 14rem card there) */
@media (width < 36rem) { .shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.75rem; } .shop-card-quick.ax-btn > span { font-size: 0.75rem; } }
/* a card's text stays inside its column: on a 320px phone a sale price and its struck-out price did not fit on one line
   and pushed the card body (an `auto` grid column) 3px past the screen */
.shop-card-body { grid-template-columns: minmax(0, 1fr); }
.shop-card .shop-price { flex-wrap: wrap; row-gap: 0; }

/* the product's one photo: the gallery without the carousel (theme 0.1.7) */
.auvyx-page .shop-pdp-single > ol { list-style: none; margin: 0; padding: 0; }

/* the order list's lines (orders/list.html): picture, name and button on one middle line (the small lines elsewhere stay top-aligned) */
.shop-order-items.shop-lines[data-size="sm"] > li { align-items: center; }
.shop-order-items .shop-order-thumb { display: block; flex: none; line-height: 0; }
.shop-order-items .shop-line-name { margin: 0; }
.shop-order-items .shop-line-meta { margin: 0; }

/* ---- EzySupport's pages in Auvyx UI (js/auvyx-support.js turns the plugin's own sheets off and gives its markup Auvyx UI's
   components; this lays the pages out with the design system's tokens). The plugin's scripts show and hide with these classes. ---- */
.auvyx-support .contact-us-hidden, .auvyx-support .faqs-hidden, .auvyx-support .recruitment-hidden, .socials-share-modal-hidden { display: none !important; }
.auvyx-support :is(.contact-us, .faqs) { max-inline-size: 44rem; margin-inline: auto; }
.auvyx-support .recruitments { max-inline-size: 72rem; margin-inline: auto; }
.auvyx-support :is(.contact-us-title, .faqs-title, .recruitments-title) { display: flex; align-items: center; gap: .625rem; margin: 0; color: var(--foreground);
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.auvyx-support .contact-us-title > svg { inline-size: .8em; block-size: .8em; flex: none; }
.auvyx-support .contact-us-subtitle { margin: .75rem 0 2rem; color: var(--muted-foreground); line-height: 1.65; }
.auvyx-support .contact-us-form { display: grid; gap: 1.25rem; }
.auvyx-support .contact-us-form .ax-field > .contact-us-form-label:first-child { order: 1; }
.auvyx-support .contact-us-form .ax-field > :is(input, textarea, select) { order: 2; inline-size: 100%; }
.auvyx-support .contact-us-form-error-label { order: 3; display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 500; color: var(--destructive); }
.auvyx-support .contact-us-icon { inline-size: 1em; block-size: 1em; flex: none; }
.auvyx-support .auvyx-support-actions { display: flex; }
.auvyx-support .contact-us-submit-button { min-inline-size: 10rem; gap: .5rem; }
.auvyx-support #contactUsSuccessFully { margin: 0 0 1.5rem; font-size: .9375rem; font-weight: 500; }
.auvyx-support .contact-us-address { margin-block: 1.5rem 0; color: var(--muted-foreground); }
.auvyx-support .faqs-title-container { margin-block-end: 1.5rem; }
.auvyx-support .faqs-separator { display: none; }
.auvyx-support .faq-list { padding-inline: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl, .75rem); background: var(--card, var(--background)); }
.auvyx-support .faq-item-question { font-weight: 500; }
.auvyx-support .faq-item-icon { inline-size: 1rem; block-size: 1rem; color: var(--muted-foreground); }
.auvyx-support .faq-item-answer { padding-block-end: 1rem; color: var(--muted-foreground); line-height: 1.65; overflow-wrap: break-word; }
.auvyx-support .faq-item-answer :is(img, video, iframe) { max-inline-size: 100%; }
.auvyx-support .faq-item-answer img { block-size: auto; }
.auvyx-support .faqs-load-mores-button-container, .auvyx-support .recruitment-load-mores-button { display: flex; justify-content: center; margin-block-start: 2rem; }
.auvyx-support :is(.faq-list, .recruitment-list-container)[data-empty] { display: block; padding: 3rem 1.25rem; border: 1px dashed var(--border); border-radius: var(--radius-xl, .75rem);
  text-align: center; color: var(--muted-foreground); background: transparent; }
.auvyx-support :is(.faq-list, .recruitment-list-container)[data-empty]::before { content: attr(data-empty); }
.auvyx-support .recruitments-title-container { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-block-end: 2rem; }
.auvyx-support .recruitment-list-container { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.auvyx-support .recruitment-item-wrapper { display: flex; }
.auvyx-support .recruitment-item { display: flex; flex-direction: column; gap: .75rem; inline-size: 100%; padding: 1.5rem; color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.auvyx-support .recruitment-item:hover { border-color: var(--ring, var(--border)); box-shadow: 0 10px 28px -14px rgb(0 0 0 / .22); }
.auvyx-support .recruitment-item:focus-visible { outline: 2px solid var(--ring, currentColor); outline-offset: 2px; }
.auvyx-support .recruitment-item-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.auvyx-support .recruitment-item-content { margin: 0; color: var(--muted-foreground); font-size: .9375rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.auvyx-support .recruitment-item-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: auto; }
.auvyx-support .recruitment-item-footer-left { display: flex; flex-wrap: wrap; gap: .375rem 1rem; color: var(--muted-foreground); font-size: .875rem; }
.auvyx-support .recruitment-item-meta { display: inline-flex; align-items: center; gap: .375rem; min-inline-size: 0; }
.auvyx-support .recruitment-item-meta-icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.auvyx-site .socials-share-modal { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / .5); }
.auvyx-site .socials-share-modal-content { inline-size: min(28rem, 100%); padding: 1.5rem; display: grid; gap: 1rem; }
.auvyx-site .socials-share-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; }
.auvyx-site .socials-share-close-icon { cursor: pointer; color: var(--muted-foreground); }
.auvyx-site .socials-share-icon-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.auvyx-site .socials-share-icon-list img { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 999px; }
.auvyx-site .socials-share-url { display: flex; gap: .5rem; align-items: center; }
.auvyx-site .socials-share-link { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }

/* ---- EzyMarketing's advertisements: where the theme lets them show (the plugin's script fills them and shows them when ads are on) ---- */
.auvyx-ads:not([data-ezymarketing-visible="true"]) { display: none; }
.auvyx-ads { max-inline-size: 72rem; margin: 1rem auto; padding-inline: 1rem; text-align: center; }
.auvyx-ads img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-lg, .5rem); }
@media (min-width: 992px) { .auvyx-ads--mobile { display: none !important; } }
@media (max-width: 991.98px) { .auvyx-ads--top, .auvyx-ads--bottom { margin-block: .75rem; } }