/* Agentzee platform pages (shop, product, checkout, account, contact, about, FAQ, policies).
   Every rule is scoped to .az-main (or an .az-* class) so the template's own CSS keeps the header and footer, and
   the template's bare element rules (h2, button, section…) cannot leak in. Colours and fonts come from the
   template's --az-* tokens, so each template's pages look like that template. */

:root {
  --az-on-primary: #fff;            /* set by az-pages.js from the primary colour's contrast */
  --az-header-h: 0px;               /* set by az-pages.js when the template header is fixed */
  --az-radius: 12px;
  --az-line: color-mix(in srgb, var(--az-text, #111) 12%, transparent);
  --az-soft: color-mix(in srgb, var(--az-primary, #111) 6%, var(--az-bg, #fff));
  --az-good: #1f7a46;
  --az-bad: #b42318;
}

.az-main {
  display: block;
  padding-top: var(--az-header-h);
  padding-bottom: 64px;
  background: var(--az-bg, #fff);
  color: var(--az-text, #111);
  font-family: var(--az-font-body, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  min-height: 60vh;
}
.az-main *, .az-main *::before, .az-main *::after { box-sizing: border-box; }
/* resets with the specificity of .az-main alone (:where adds none): they beat the template's bare element rules
   (section { padding: 100px 0 }) while every .az-* rule below still wins over them */
.az-main :where(section, article, aside, form, nav, div) { margin: 0; }
.az-main :where(section, article) { padding: 0; width: auto; min-height: 0; background: none; border: 0; }
.az-main img { max-width: 100%; height: auto; display: block; }
.az-main a { color: inherit; }
.az-main p { margin: 0 0 1em; }
.az-main [hidden] { display: none !important; }
.az-carried-header { position: relative; z-index: 50; }
.az-carried-header > header { position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 24px !important; }
body:not(.az-subpage) [data-az-subpage-only] { display: none !important; }
.az-main h1, .az-main h2, .az-main h3, .az-main h4 {
  font-family: var(--az-font-heading, inherit); color: var(--az-text, #111); margin: 0; letter-spacing: normal;
  text-transform: none; line-height: 1.2; font-weight: 600; text-align: left; background: none;
}
.az-main h1::before, .az-main h1::after, .az-main h2::before, .az-main h2::after { content: none; display: none; }
.az-main button, .az-main input, .az-main select, .az-main textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.az-main ul, .az-main ol { margin: 0; padding: 0; }

/* ---------- layout ---------- */
.az-wrap { width: 100%; max-width: 1240px; margin-left: auto !important; margin-right: auto !important; padding-left: 20px; padding-right: 20px; }
.az-narrow-wrap { max-width: 860px; }
.az-row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.az-row-center { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.az-center { text-align: center; }
.az-small { font-size: 14px; }

/* ---------- page head ---------- */
.az-main .az-page-head { padding: 40px 0 28px; background: var(--az-soft); border-bottom: 1px solid var(--az-line); margin-bottom: 32px !important; }
.az-main .az-page-head-sm { padding: 28px 0 20px; }
.az-main .az-page-head-hero { padding: 64px 0 40px; }
.az-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--az-muted, #666); margin-bottom: 10px !important; }
.az-crumbs a { color: var(--az-muted, #666); text-decoration: none; }
.az-crumbs a:hover { color: var(--az-primary); text-decoration: underline; }
.az-main .az-title { font-size: clamp(28px, 4vw, 42px); }
.az-main .az-title-sm { font-size: clamp(24px, 3vw, 30px); }
.az-main .az-title-xl { font-size: clamp(32px, 5vw, 56px); }
.az-main .az-h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 16px; }
.az-main .az-h3 { font-size: 19px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.az-lead { color: var(--az-muted, #555); font-size: 17px; margin: 10px 0 0 !important; max-width: 680px; }
.az-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--az-primary); margin: 0 0 8px !important; }
.az-note { font-size: 13px; color: var(--az-muted, #666); margin: 6px 0 0 !important; }
.az-note svg { vertical-align: -2px; }
.az-error { color: var(--az-bad); background: color-mix(in srgb, var(--az-bad) 8%, transparent); padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.az-good { color: var(--az-good); }

/* ---------- buttons, inputs ---------- */
.az-main .az-btn, .az-sticky-buy .az-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: var(--az-radius); border: 1.5px solid transparent; font-weight: 600; font-size: 15px; line-height: 1;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .1s; white-space: nowrap;
  box-shadow: none; width: auto; margin: 0;
}
.az-main .az-btn:active { transform: translateY(1px); }
.az-main .az-btn[disabled], .az-main .az-btn.is-busy { opacity: .6; cursor: not-allowed; }
.az-main .az-btn-primary, .az-sticky-buy .az-btn-primary { background: var(--az-primary); color: var(--az-on-primary); border-color: var(--az-primary); }
.az-main .az-btn-primary:hover { background: color-mix(in srgb, var(--az-primary) 85%, #000); }
.az-main .az-btn-outline { background: transparent; color: var(--az-text); border-color: color-mix(in srgb, var(--az-text) 30%, transparent); }
.az-main .az-btn-outline:hover { border-color: var(--az-primary); color: var(--az-primary); }
.az-main .az-block { width: 100%; }
.az-main .az-lg { min-height: 52px; font-size: 16px; }
.az-main .az-grow { flex: 1; }
.az-main .az-link { background: none; border: 0; padding: 0; color: var(--az-primary); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.az-main .az-link[disabled] { color: var(--az-muted); cursor: default; text-decoration: none; }
.az-main .az-icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--az-radius); border: 1.5px solid var(--az-line); background: var(--az-surface, #fff); cursor: pointer; padding: 0; flex: none; }
.az-main .az-icon-btn:hover { border-color: var(--az-primary); color: var(--az-primary); }
.az-main .az-wish.is-active { color: #e0245e; border-color: #e0245e; }
.az-main .az-wish.is-active path { fill: currentColor; }
.az-main .az-input {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--az-line); border-radius: calc(var(--az-radius) - 4px);
  background: var(--az-surface, #fff); color: var(--az-text); font-size: 15px; outline: none; box-shadow: none; margin: 0; appearance: none;
}
.az-main select.az-input { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.az-main textarea.az-input { min-height: 96px; resize: vertical; }
.az-main .az-input:focus { border-color: var(--az-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--az-primary) 18%, transparent); }
.az-main .az-input:user-invalid { border-color: var(--az-bad); }
.az-main .az-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.az-main .az-field em { font-weight: 400; font-style: normal; color: var(--az-muted); }
.az-main .az-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.az-main .az-span-2 { grid-column: 1 / -1; }
.az-main .az-check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; padding: 4px 0; }
.az-main .az-check input { width: 18px; height: 18px; accent-color: var(--az-primary); margin: 0; flex: none; }
.az-main .az-card { background: var(--az-surface, #fff); border: 1px solid var(--az-line); border-radius: calc(var(--az-radius) + 4px); padding: 24px; }
.az-main .az-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.az-main .az-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--az-primary); color: var(--az-on-primary); font-size: 12px; }
.az-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--az-line); border-top-color: var(--az-primary); border-radius: 50%; animation: az-spin .8s linear infinite; vertical-align: -4px; margin-right: 10px; }
@keyframes az-spin { to { transform: rotate(360deg); } }
.az-main .az-state { text-align: center; padding: 56px 20px; color: var(--az-muted); }
.az-main .az-state .az-h2, .az-main .az-state .az-title { text-align: center; color: var(--az-text); }
.az-main .az-state p { margin: 8px auto 20px !important; max-width: 460px; }

/* ---------- product cards ---------- */
.az-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 22px; }
.az-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.az-pcard { position: relative; display: flex; flex-direction: column; background: var(--az-surface, #fff); border: 1px solid var(--az-line); border-radius: calc(var(--az-radius) + 2px); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.az-pcard:hover { box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--az-text) 45%, transparent); transform: translateY(-2px); }
.az-pcard-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--az-soft); overflow: hidden; }
.az-pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .5s; }
.az-pcard-media img + img { position: absolute; inset: 0; opacity: 0; }
.az-pcard:hover .az-pcard-media img + img { opacity: 1; }
.az-pcard:hover .az-pcard-media img:only-child { transform: scale(1.04); }
.az-tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--az-primary); color: var(--az-on-primary); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.az-tag.az-tag-sale { background: var(--az-bad); color: #fff; }
.az-pcard .az-pcard-wish { position: absolute; top: 10px; right: 10px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--az-surface, #fff) 92%, transparent); cursor: pointer; color: var(--az-text); box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 0; }
.az-pcard .az-pcard-wish.is-active { color: #e0245e; }
.az-pcard .az-pcard-wish.is-active path { fill: currentColor; }
.az-pcard-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.az-pcard-meta { font-size: 12px; color: var(--az-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 !important; }
.az-main .az-pcard-title { font-family: var(--az-font-heading, inherit); font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0; }
.az-pcard-title a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.az-pcard-title a:hover { color: var(--az-primary); }
.az-stars { color: #f5a524; font-size: 13px; letter-spacing: 1px; }
.az-stars small { color: var(--az-muted); letter-spacing: 0; margin-left: 4px; }
.az-price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.az-price-line strong { font-size: 17px; }
.az-price-line s { color: var(--az-muted); font-size: 14px; }
.az-price-line .az-off { color: var(--az-good); font-size: 13px; font-weight: 700; }
.az-pcard .az-btn { min-height: 42px; font-size: 14px; margin-top: 10px; width: 100%; }
.az-oos { color: var(--az-bad); font-size: 13px; font-weight: 600; }

/* ---------- listing ---------- */
.az-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px !important; scrollbar-width: thin; }
.az-chip { flex: none; border: 1.5px solid var(--az-line); background: var(--az-surface, #fff); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.az-chip:hover { border-color: var(--az-primary); color: var(--az-primary); }
.az-chip.is-active { background: var(--az-primary); color: var(--az-on-primary); border-color: var(--az-primary); }
.az-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px !important; flex-wrap: wrap; }
.az-count { margin: 0 !important; color: var(--az-muted); font-size: 14px; flex: 1; }
.az-sort { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--az-muted); }
.az-sort select { min-height: 42px; border: 1.5px solid var(--az-line); border-radius: 10px; padding: 0 12px; background: var(--az-surface, #fff); color: var(--az-text); }
.az-listing-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.az-filters { position: sticky; top: calc(var(--az-header-h) + 16px); display: flex; flex-direction: column; gap: 4px; }
.az-filters-head { display: none; }
.az-filter-group { padding: 14px 0; border-bottom: 1px solid var(--az-line); }
.az-filter-label, .az-filter-group > summary { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.az-filter-group > summary { list-style: none; display: flex; justify-content: space-between; }
.az-filter-group > summary::after { content: '+'; color: var(--az-muted); }
.az-filter-group[open] > summary::after { content: '–'; }
.az-price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.az-filters-foot { display: flex; gap: 10px; padding-top: 16px; }
.az-only-mobile { display: none !important; }
.az-filters-toggle { display: none !important; }
.az-filters-backdrop { display: none; }
.az-empty { text-align: center; padding: 48px 16px; color: var(--az-muted); }
.az-more { text-align: center; margin-top: 32px !important; }

/* ---------- product page ---------- */
.az-main .az-pdp { padding-top: 24px; }
.az-pdp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px !important; }
.az-gallery { position: sticky; top: calc(var(--az-header-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.az-gallery-main { position: relative; aspect-ratio: 1 / 1; border-radius: calc(var(--az-radius) + 4px); overflow: hidden; background: var(--az-soft); }
.az-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.az-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--az-surface, #fff) 90%, transparent); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); color: var(--az-text); padding: 0; }
.az-prev { left: 12px; } .az-next { right: 12px; }
.az-thumbs { display: flex; gap: 10px; overflow-x: auto; }
.az-thumb { flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--az-soft); }
.az-thumb.is-active { border-color: var(--az-primary); }
.az-thumb img { width: 100%; height: 100%; object-fit: cover; }
.az-pdp-info { display: flex; flex-direction: column; gap: 12px; }
.az-main .az-pdp-title { font-size: clamp(26px, 3vw, 36px); }
.az-rating { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-size: 14px; color: var(--az-muted); }
.az-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.az-price { font-size: 28px; font-weight: 700; }
.az-compare { color: var(--az-muted); font-size: 18px; }
.az-off { color: var(--az-good); font-weight: 700; }
.az-short { color: var(--az-muted); margin: 0 !important; }
.az-options { display: flex; flex-direction: column; gap: 16px; }
.az-option-name { font-size: 14px; font-weight: 700; margin-bottom: 8px !important; }
.az-option-name span { font-weight: 400; color: var(--az-muted); }
.az-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.az-main .az-pill { min-width: 48px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--az-line); background: var(--az-surface, #fff); cursor: pointer; font-weight: 600; font-size: 14px; }
.az-main .az-pill:hover { border-color: var(--az-primary); }
.az-main .az-pill.is-active { border-color: var(--az-primary); background: color-mix(in srgb, var(--az-primary) 10%, var(--az-surface, #fff)); color: var(--az-primary); }
.az-main .az-pill.is-unavailable { opacity: .45; text-decoration: line-through; }
.az-stock { font-size: 14px; font-weight: 600; margin: 0 !important; }
.az-stock.is-in { color: var(--az-good); }
.az-stock.is-low { color: #b45309; }
.az-stock.is-out { color: var(--az-bad); }
.az-buy { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.az-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--az-line); border-radius: var(--az-radius); overflow: hidden; height: 46px; background: var(--az-surface, #fff); }
.az-main .az-qty button { width: 40px; height: 100%; border: 0; background: none; font-size: 20px; cursor: pointer; padding: 0; }
.az-main .az-qty input { width: 44px; height: 100%; border: 0; text-align: center; font-weight: 700; background: none; -moz-appearance: textfield; padding: 0; }
.az-qty input::-webkit-outer-spin-button, .az-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.az-assure { list-style: none; display: grid; gap: 10px; padding: 16px !important; background: var(--az-soft); border-radius: var(--az-radius); font-size: 14px; }
.az-assure li { display: flex; gap: 10px; align-items: center; }
.az-assure svg { flex: none; color: var(--az-primary); }
.az-accordion details { border-bottom: 1px solid var(--az-line); }
.az-accordion summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 700; display: flex; justify-content: space-between; }
.az-accordion summary::-webkit-details-marker, .az-faq-item summary::-webkit-details-marker { display: none; }
.az-accordion summary::after { content: '+'; font-size: 20px; color: var(--az-muted); line-height: 1; }
.az-accordion details[open] summary::after { content: '–'; }
.az-accordion details > div, .az-accordion details > table { padding-bottom: 16px; }
.az-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.az-specs th, .az-specs td { text-align: left; padding: 9px 0; border-bottom: 1px dashed var(--az-line); vertical-align: top; }
.az-specs th { color: var(--az-muted); font-weight: 500; width: 42%; padding-right: 12px; }
.az-related { margin-top: 64px !important; }
.az-sticky-buy { display: none; }

/* ---------- prose (policies, about) ---------- */
.az-prose { font-size: 16px; line-height: 1.75; }
.az-prose-lg { font-size: 18px; }
.az-main .az-prose h2 { font-size: 21px; margin: 32px 0 10px; }
.az-prose ul, .az-prose ol { padding-left: 22px !important; margin: 0 0 1em; }
.az-main .az-prose ol { list-style: decimal outside !important; }
.az-main .az-prose ul { list-style: disc outside !important; }
.az-main .az-prose li { display: list-item !important; list-style: inherit !important; margin-bottom: 6px; padding-left: 4px; }
.az-main .az-prose li::before { content: none !important; }
.az-prose a { color: var(--az-primary); text-underline-offset: 3px; }
.az-policy { padding-bottom: 16px; }
.az-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px !important; }
.az-highlights > div { background: var(--az-soft); border-radius: var(--az-radius); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.az-highlights strong { font-size: 17px; color: var(--az-primary); }
.az-highlights span { font-size: 13px; color: var(--az-muted); }

/* ---------- about, FAQ, contact ---------- */
.az-about { margin-bottom: 48px !important; }
.az-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 56px !important; }
.az-value { background: var(--az-surface, #fff); border: 1px solid var(--az-line); border-radius: calc(var(--az-radius) + 4px); padding: 28px; }
.az-value-n { display: block; font-family: var(--az-font-heading, inherit); font-size: 32px; color: var(--az-primary); margin-bottom: 8px; }
.az-value p { margin: 0 !important; color: var(--az-muted); }
.az-main .az-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--az-soft); border-radius: calc(var(--az-radius) + 8px); padding: 36px 32px !important; }
.az-cta-band p { margin: 0 !important; color: var(--az-muted); }
.az-faq { display: flex; flex-direction: column; gap: 12px; }
.az-faq-item { background: var(--az-surface, #fff); border: 1px solid var(--az-line); border-radius: var(--az-radius); padding: 0 20px; }
.az-faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; }
.az-faq-item summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--az-primary); flex: none; }
.az-faq-item[open] summary::after { content: '–'; }
.az-faq-item p { margin: 0 0 18px !important; color: var(--az-muted); }
.az-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.az-contact-info { display: flex; flex-direction: column; gap: 12px; }
.az-contact-item { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--az-radius); background: var(--az-surface, #fff); border: 1px solid var(--az-line); text-decoration: none; }
a.az-contact-item:hover { border-color: var(--az-primary); }
.az-ci-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--az-soft); color: var(--az-primary); flex: none; }
.az-contact-item small { display: block; font-size: 12px; color: var(--az-muted); text-transform: uppercase; letter-spacing: .06em; }
.az-contact-item strong { font-weight: 600; word-break: break-word; }

/* ---------- checkout ---------- */
.az-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.az-checkout-main { display: flex; flex-direction: column; gap: 20px; }
.az-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--az-primary); color: var(--az-on-primary); font-size: 14px; font-family: var(--az-font-body, inherit); }
.az-summary { position: sticky; top: calc(var(--az-header-h) + 16px); }
.az-lines { list-style: none; display: flex; flex-direction: column; gap: 14px; max-height: 420px; overflow: auto; margin-bottom: 18px !important; padding-right: 4px !important; }
.az-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.az-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--az-soft); }
.az-line-title { font-weight: 600; font-size: 14px; line-height: 1.35; text-decoration: none; }
.az-line-sub { font-size: 12px; color: var(--az-muted); }
.az-line .az-qty { height: 32px; margin-top: 6px; border-radius: 8px; }
.az-main .az-line .az-qty button { width: 28px; font-size: 16px; }
.az-main .az-line .az-qty input { width: 30px; font-size: 13px; }
.az-line-end { text-align: right; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.az-main .az-line-remove { background: none; border: 0; color: var(--az-muted); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
.az-totals { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--az-line); margin: 0 0 16px !important; }
.az-totals div { display: flex; justify-content: space-between; font-size: 15px; }
.az-totals dt, .az-totals dd { margin: 0; }
.az-totals dt { color: var(--az-muted); }
.az-totals .az-grand { font-size: 19px; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--az-line); }
.az-totals .az-grand dt { color: var(--az-text); }
.az-pay-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px !important; }
.az-pay { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--az-line); border-radius: var(--az-radius); padding: 14px 16px; cursor: pointer; }
.az-pay:has(input:checked) { border-color: var(--az-primary); background: color-mix(in srgb, var(--az-primary) 5%, var(--az-surface, #fff)); }
.az-pay input { accent-color: var(--az-primary); width: 18px; height: 18px; margin: 0; flex: none; }
.az-pay span { display: flex; flex-direction: column; }
.az-pay small { color: var(--az-muted); font-size: 13px; }
.az-saved-addresses { display: grid; gap: 10px; margin-bottom: 16px !important; }
.az-confirm-icon { width: 72px; height: 72px; margin: 0 auto 16px !important; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--az-good) 14%, transparent); color: var(--az-good); }

/* ---------- auth, account, wishlist ---------- */
.az-main .az-auth { padding-top: 48px; display: grid; place-items: center; }
.az-auth-card { width: 100%; max-width: 440px; padding: 36px 32px; }
.az-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px !important; }
.az-main .az-otp { font-size: 24px; letter-spacing: .4em; text-align: center; font-weight: 700; }
.az-divider { display: flex; align-items: center; gap: 12px; color: var(--az-muted); font-size: 13px; margin: 22px 0 !important; }
.az-divider::before, .az-divider::after { content: ''; flex: 1; height: 1px; background: var(--az-line); }
.az-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--az-line); margin-bottom: 24px !important; overflow-x: auto; }
.az-main .az-tabs button { background: none; border: 0; border-bottom: 2.5px solid transparent; padding: 12px 16px; font-weight: 600; cursor: pointer; color: var(--az-muted); white-space: nowrap; margin-bottom: -1px; }
.az-main .az-tabs button.is-active { color: var(--az-primary); border-bottom-color: var(--az-primary); }
.az-orders { display: flex; flex-direction: column; gap: 14px; }
.az-order { border: 1px solid var(--az-line); border-radius: var(--az-radius); background: var(--az-surface, #fff); padding: 18px 20px; }
.az-order-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px !important; }
.az-order-head small { color: var(--az-muted); display: block; }
.az-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--az-soft); color: var(--az-primary); text-transform: capitalize; }
.az-order-items { font-size: 14px; color: var(--az-muted); }
.az-narrow { max-width: 560px; }
.az-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.az-address { border: 1px solid var(--az-line); border-radius: var(--az-radius); padding: 16px; background: var(--az-surface, #fff); font-size: 14px; }
.az-pick-address { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--az-line); border-radius: var(--az-radius); padding: 12px 14px; cursor: pointer; font-size: 14px; }
.az-pick-address:has(input:checked) { border-color: var(--az-primary); }
.az-pick-address input { accent-color: var(--az-primary); margin-top: 3px; }

/* ---------- toast (used when the template has no toast UI) ---------- */
.az-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 10000; background: var(--az-text, #111); color: var(--az-bg, #fff); padding: 12px 20px; border-radius: 10px; font: 600 14px/1.4 var(--az-font-body, system-ui); box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: opacity .25s, transform .25s; pointer-events: none; max-width: calc(100vw - 32px); }
.az-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .az-listing-body { grid-template-columns: minmax(0, 1fr); }
  .az-filters-toggle { display: inline-flex !important; }
  .az-only-mobile { display: inline-flex !important; }
  .az-filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 9990; width: min(340px, 88vw); background: var(--az-surface, #fff); padding: 20px; overflow-y: auto; transform: translateX(-105%); transition: transform .25s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .az-filters.is-open { transform: none; }
  .az-filters-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; }
  .az-filters-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 9989; background: rgba(0,0,0,.4); }
  .az-filters-foot { position: sticky; bottom: -20px; background: var(--az-surface, #fff); padding: 14px 0 20px; margin-top: auto !important; }
  .az-filters-foot .az-btn { flex: 1; }
  .az-pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .az-gallery { position: static; }
  .az-checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .az-summary { position: static; order: -1; }
  .az-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .az-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .az-main { font-size: 15px; padding-bottom: 88px; }
  .az-wrap { padding-left: 16px; padding-right: 16px; }
  .az-main .az-page-head { padding: 24px 0 18px; margin-bottom: 20px !important; }
  .az-main .az-page-head-hero { padding: 36px 0 24px; }
  .az-grid, .az-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .az-pcard-body { padding: 10px 12px 12px; }
  .az-main .az-pcard-title { font-size: 14px; }
  .az-price-line strong { font-size: 15px; }
  .az-pcard .az-pcard-wish { width: 34px; height: 34px; top: 8px; right: 8px; }
  .az-tag { top: 8px; left: 8px; font-size: 10px; padding: 4px 7px; }
  .az-toolbar { gap: 10px; }
  .az-count { order: 3; flex-basis: 100%; }
  .az-sort span { display: none; }
  .az-main .az-fields { grid-template-columns: minmax(0, 1fr); }
  .az-main .az-card { padding: 18px 16px; }
  .az-main .az-auth { padding-top: 16px; }
  .az-auth-card { padding: 28px 20px; }
  .az-highlights, .az-values { grid-template-columns: minmax(0, 1fr); }
  .az-main .az-cta-band { padding: 24px 20px !important; }
  .az-thumb { width: 64px; height: 64px; }
  .az-sticky-buy:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--az-surface, #fff); border-top: 1px solid var(--az-line); box-shadow: 0 -8px 24px rgba(0,0,0,.08); font-family: var(--az-font-body, system-ui); color: var(--az-text); }
  .az-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
  .az-sticky-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .az-line { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .az-line img { width: 56px; height: 56px; }
}
@media (max-width: 380px) {
  .az-grid, .az-grid-4 { gap: 14px 10px; }
  .az-main .az-btn { padding: 0 16px; }
}