/* =========================================
   BLOCK LIBRARY

   Layout for the blocks the on-page editor inserts (see app/blocks.py). It
   sets structure and spacing and nothing else: font, text colour and
   background come from the site, so a block borrows the look of whatever
   page it lands on. Every tone is derived from `currentColor`.

   A site can restyle any of it by overriding these properties:
     --ab-accent      buttons, links, badges
     --ab-accent-ink  text on the accent
     --ab-radius      corners
     --ab-width       content width
   ========================================= */

:root {
  --ab-accent: #2563eb;
  --ab-accent-ink: #fff;
  --ab-radius: 12px;
  --ab-width: 1120px;
  --ab-line: color-mix(in srgb, currentColor 14%, transparent);
  --ab-soft: color-mix(in srgb, currentColor 5%, transparent);
  --ab-muted: color-mix(in srgb, currentColor 62%, transparent);
}

.ab {
  box-sizing: border-box; width: 100%; max-width: var(--ab-width);
  margin-inline: auto; padding: clamp(24px, 4vw, 48px) 20px;
}
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab .ab { padding: 0; margin-block: 16px; }   /* nested in a column or box */
.ab img { max-width: 100%; height: auto; display: block; }
/* Blocks placed alone, without the padded `.ab` band (see compose in blocks.py). */
[data-arconte-block], [data-arconte-block] *, [data-arconte-block] *::before, [data-arconte-block] *::after { box-sizing: border-box; }
[data-arconte-block] img { max-width: 100%; height: auto; }
hr.ab-b-divider { margin-block: 16px; }

/* ---- type ---- */
.ab-title { margin: 0 0 .5em; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; }
.ab-display { margin: 0 0 .4em; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
.ab-eyebrow { margin: 0 0 .4em; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ab-muted); }
.ab-lead { font-size: 1.15em; }
.ab-muted { color: var(--ab-muted); }
.ab-center { text-align: center; }
.ab-pre { white-space: pre-line; }
.ab-prose > :first-child { margin-top: 0; }
.ab-prose > :last-child { margin-bottom: 0; }
.ab-prose a, .ab-more { color: var(--ab-accent); }
.ab-more { font-weight: 600; text-decoration: none; }
.ab-intro > * { max-width: 70ch; }

/* ---- buttons ---- */
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .75em 1.35em; border: 1px solid var(--ab-accent); border-radius: 999px;
  background: var(--ab-accent); color: var(--ab-accent-ink);
  font: inherit; font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.ab-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ab-btn-ghost { background: transparent; color: inherit; border-color: var(--ab-line); }
.ab-btn-block { width: 100%; }
.ab-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ---- basics ---- */
.ab-figure { margin: 0; }
.ab-figure img { width: 100%; border-radius: var(--ab-radius); }
.ab-figure figcaption { margin-top: 8px; font-size: .9em; color: var(--ab-muted); }
.ab-quote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ab-accent); font-size: 1.15em; }
.ab-quote p { margin: 0 0 .4em; }
.ab-quote cite { font-style: normal; color: var(--ab-muted); font-size: .85em; }
.ab-hr { border: 0; border-top: 1px solid var(--ab-line); margin: 0; }
.ab-b-divider { padding-block: 16px; }
.ab-spacer { height: clamp(32px, 6vw, 80px); }
.ab-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ab-radius); overflow: hidden; background: var(--ab-soft); }
.ab-embed-map { aspect-ratio: 16 / 7; }
.ab-gmap { position: relative; aspect-ratio: 16 / 9; min-height: 280px; border-radius: var(--ab-radius); overflow: hidden; background: var(--ab-soft); }
.ab-gmap-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; opacity: .7; }
.ab-gmap-info { color: #222; max-width: 240px; } .ab-gmap-info p { margin: 4px 0 0; }
.ab-gmap-locate { margin: 0 10px 10px 0; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 2px; background: #fff; color: #666; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; }
.ab-gmap-locate:hover { color: #1a73e8; }
.ab-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- layout ---- */
.ab-cols { display: grid; gap: clamp(20px, 3vw, 40px); }
/* --ab-cols carries widths set by dragging a column's edge in the editor. */
.ab-cols-1 { grid-template-columns: var(--ab-cols, minmax(0, 1fr)); }
.ab-cols-2 { grid-template-columns: var(--ab-cols, repeat(2, minmax(0, 1fr))); }
.ab-cols-3 { grid-template-columns: var(--ab-cols, repeat(3, minmax(0, 1fr))); }
.ab-cols-4 { grid-template-columns: var(--ab-cols, repeat(4, minmax(0, 1fr))); }
.ab-col { min-width: 0; }
.ab-box { padding: clamp(20px, 3vw, 36px); border-radius: var(--ab-radius); background: var(--ab-soft); border: 1px solid var(--ab-line); }
.ab-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ab-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ab-radius); }
.ab-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; min-height: min(70vh, 640px); }
.ab-cta { text-align: center; padding: clamp(28px, 5vw, 56px); border-radius: calc(var(--ab-radius) * 1.5); background: var(--ab-soft); border: 1px solid var(--ab-line); }
.ab-cta .ab-actions { justify-content: center; }
.ab-cta .ab-form { max-width: 460px; margin-inline: auto; }

/* ---- lists and cards ---- */
.ab-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ab-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ab-card { padding: 22px; border-radius: var(--ab-radius); border: 1px solid var(--ab-line); background: var(--ab-soft); }
.ab-card h3 { margin: 0 0 .35em; font-size: 1.1rem; }
.ab-card p { margin: 0 0 .5em; }
.ab-card > :last-child { margin-bottom: 0; }
.ab-icon { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--ab-accent) 14%, transparent); font-size: 1.1em; }
.ab-list { margin: 0; padding-left: 1.3em; display: grid; gap: .45em; }
.ab-steps { counter-reset: ab; list-style: none; padding: 0; }
.ab-steps li { counter-increment: ab; display: flex; gap: 12px; align-items: baseline; }
.ab-steps li::before { content: counter(ab); flex: none; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ab-accent); color: var(--ab-accent-ink); font-weight: 700; font-size: .85em; }
.ab-checks { list-style: none; padding: 0; }
.ab-checks li::before { content: "✓"; color: var(--ab-accent); font-weight: 700; margin-right: .6em; }
.ab-faq { display: grid; gap: 10px; }
.ab-faq details { border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: 0 18px; background: var(--ab-soft); }
.ab-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::after { content: "+"; font-size: 1.3em; line-height: 1; color: var(--ab-muted); transition: transform .2s ease; }
.ab-faq details[open] summary::after { transform: rotate(45deg); }
.ab-faq details > div { padding-bottom: 16px; }
.ab-person { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.ab-person small { display: block; color: var(--ab-muted); }
.ab-avatar { width: 48px !important; height: 48px; border-radius: 50%; object-fit: cover; }
.ab-portrait { width: 112px !important; height: 112px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; }
.ab-plan { display: flex; flex-direction: column; }
.ab-plan .ab-prose { flex: 1; margin-bottom: 16px; }
.ab-plan ul { padding-left: 1.1em; }
.ab-price { margin: .2em 0 .8em; }
.ab-price span { font-size: 2rem; font-weight: 700; }
.ab-stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ab-stats > * { display: grid; gap: 4px; }
.ab-stat { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--ab-accent); }
.ab-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--ab-line); display: grid; gap: 24px; }
.ab-timeline li { position: relative; }
.ab-timeline li::before { content: ""; position: absolute; left: -29px; top: .35em; width: 12px; height: 12px; border-radius: 50%; background: var(--ab-accent); }
.ab-timeline time { font-size: .85em; color: var(--ab-muted); }
.ab-timeline h3 { margin: .15em 0 .25em; font-size: 1.1rem; }
.ab-timeline p { margin: 0; }

/* ---- media ---- */
/* carousel: a sideways strip without JS; one slide at a time with it */
.ab-carousel { position: relative; }
.ab-slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; border-radius: var(--ab-radius); }
.ab-slide { position: relative; scroll-snap-align: start; margin: 0; }
.ab-slide img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.ab-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 24px 40px; color: #fff;
  text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.ab-slide-caption h3 { margin: 0 0 4px; color: inherit; }
.ab-slide-caption p { margin: 0; }
.ab-carousel-on .ab-slides { grid-auto-flow: row; grid-template-areas: "slide"; overflow: hidden; }
.ab-carousel-on .ab-slide { grid-area: slide; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.ab-carousel-on .ab-slide.ab-on { opacity: 1; visibility: visible; }
.ab-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0;
  border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font: 28px/1 system-ui, sans-serif; cursor: pointer; }
.ab-arrow:hover { background: rgba(0, 0, 0, .55); }
.ab-arrow-prev { left: 12px; } .ab-arrow-next { right: 12px; }
.ab-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.ab-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .5); cursor: pointer; }
.ab-dots button[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) { .ab-carousel-on .ab-slide { transition: none; } }
.ab-gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ab-gallery figure { margin: 0; }
.ab-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--ab-radius) * .7); cursor: zoom-in; }
.ab-gallery figcaption { margin-top: 6px; font-size: .85em; color: var(--ab-muted); }
.ab-projects { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ab-project { display: block; color: inherit; text-decoration: none; }
.ab-project img { transition: transform .35s ease; }
.ab-project:hover img { transform: scale(1.02); }
.ab-project-info { display: grid; gap: 4px; padding-top: 12px; }
.ab-project-info .ab-eyebrow { margin: 0; }
.ab-project-info span { color: var(--ab-muted); }
.ab-project-item[hidden], .ab-product[hidden] { display: none; }
.ab-logos { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; justify-content: center; }
.ab-logos img { height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: .2s; }
.ab-logos img:hover { filter: none; opacity: 1; }

/* ---- filters ---- */
.ab-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ab-filters:empty { display: none; }
.ab-chip { padding: .45em 1em; border-radius: 999px; border: 1px solid var(--ab-line); background: transparent; color: inherit; font: inherit; font-size: .9em; cursor: pointer; }
.ab-chip[aria-pressed="true"] { background: var(--ab-accent); border-color: var(--ab-accent); color: var(--ab-accent-ink); }

/* ---- forms ---- */
.ab-form { display: grid; gap: 14px; }
.ab-field { display: grid; gap: 6px; font-size: .92em; font-weight: 600; }
.ab-field input, .ab-field textarea, .ab-field select, .ab-qty, .ab-options select, .ab-cart-form input, .ab-cart-form select, .ab-cart-form textarea {
  width: 100%; padding: .7em .85em; border: 1px solid var(--ab-line); border-radius: 10px;
  background: color-mix(in srgb, currentColor 3%, transparent); color: inherit; font: inherit; font-weight: 400;
}
.ab-field input:focus, .ab-field textarea:focus { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
.ab-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ab-form-ok { padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, #16a34a 14%, transparent); }
.ab-form-err { padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, #dc2626 14%, transparent); }
.ab-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ab-info li { display: flex; gap: 14px; align-items: flex-start; }
.ab-info li .ab-icon { margin: 0; flex: none; }
.ab-info small { display: block; }
.ab-social { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-social a { padding: .5em 1.1em; border-radius: 999px; border: 1px solid var(--ab-line); color: inherit; text-decoration: none; }
.ab-social a:hover { border-color: var(--ab-accent); color: var(--ab-accent); }

/* ---- blog ---- */
.ab-post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ab-post .ab-cover { border-radius: 0; aspect-ratio: 16 / 9; }
.ab-post-body { padding: 18px 20px 20px; display: grid; gap: 6px; }
.ab-post h3 a { color: inherit; text-decoration: none; }
.ab-article { max-width: 72ch; margin-inline: auto; }
.ab-article-cover { margin: 20px 0 28px; aspect-ratio: 16 / 9; }
.ab-back { padding-bottom: 0; }
.ab-b-spacer, .ab-b-divider { padding-block: 0; }
.ab-back a { color: var(--ab-muted); text-decoration: none; }

/* ---- shop ---- */
.ab-products { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ab-product { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ab-product .ab-cover { border-radius: 0; aspect-ratio: 1; }
.ab-product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ab-product-body h3 { margin: 0; font-size: 1.05rem; }
.ab-product-body h3 a { color: inherit; text-decoration: none; }
.ab-product-body .ab-btn { margin-top: auto; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ab-tags li { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-muted); }
.ab-prices { display: flex; gap: 10px; align-items: baseline; margin: 4px 0 10px; font-weight: 700; }
.ab-prices-lg { font-size: 1.5rem; }
.ab-price-offer { color: var(--ab-accent); }
.ab-prices:has(.ab-price-offer:not([hidden])) .ab-price-regular { text-decoration: line-through; font-weight: 400; color: var(--ab-muted); font-size: .85em; order: 2; }
.ab-product-detail { align-items: start; }
.ab-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ab-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; width: 64px; height: 64px; }
.ab-thumbs button[aria-pressed="true"] { border-color: var(--ab-accent); }
.ab-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ab-options { display: grid; gap: 12px; margin: 16px 0; }
.ab-options label { display: grid; gap: 6px; font-weight: 600; font-size: .9em; }
.ab-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-option-values .ab-chip:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.ab-buy { display: flex; gap: 10px; margin: 16px 0 24px; }
.ab-qty { width: 84px !important; flex: none; }
.ab-availability { margin-top: 18px; font-size: .9em; }
.ab-availability ul { margin: 6px 0 0; padding-left: 1.1em; }
.ab-category .ab-cover { aspect-ratio: 16 / 10; margin-bottom: 12px; }
.ab-cart-inline { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); }
.ab-cart-inline p { margin: 0; }

/* cart: fixed, so it keeps its own colours instead of the section's */
.ab-cart-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147481000;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px;
  background: var(--ab-accent); color: var(--ab-accent-ink); font: 600 15px/1 system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .3); cursor: pointer;
}
.ab-cart-fab svg { width: 18px; height: 18px; }
.ab-cart-fab[hidden] { display: none; }
.ab-cart-count { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: var(--ab-accent-ink); color: var(--ab-accent); font-size: 12px; text-align: center; }
.ab-drawer-bg { position: fixed; inset: 0; z-index: 2147481001; background: rgba(15, 23, 42, .45); }
.ab-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147481002; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: #fff; color: #111827;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: -10px 0 40px rgba(15, 23, 42, .25);
}
.ab-drawer *, .ab-drawer *::before, .ab-drawer *::after { box-sizing: border-box; }
.ab-drawer .ab-x { position: absolute; top: 8px; right: 10px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .9); font-size: 22px; line-height: 1; cursor: pointer; color: inherit; }
.ab-drawer .ab-x:hover { background: #f3f4f6; }
/* While the page is being edited the shop's buttons stay out of the editor's way. */
body.cms-on .ab-shop-dock { display: none; }
.ab-drawer-body { flex: 1; overflow: auto; padding: 48px 20px 16px; display: grid; gap: 14px; align-content: start; }
.ab-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.ab-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #f3f4f6; }
.ab-line small { color: #6b7280; display: block; }
.ab-stepper { display: inline-flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 999px; }
.ab-stepper button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 16px; color: inherit; }
.ab-stepper span { min-width: 22px; text-align: center; font-size: 14px; }
.ab-totals { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.ab-totals div { display: flex; justify-content: space-between; }
.ab-totals .ab-total { font-weight: 700; font-size: 17px; }
.ab-drawer .ab-btn { --ab-accent-ink: #fff; }
.ab-cart-form { display: grid; gap: 10px; }
.ab-cart-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.ab-cart-form input, .ab-cart-form select, .ab-cart-form textarea { border-color: #d1d5db; background: #fff; }
.ab-radio { display: flex; gap: 8px; }
.ab-radio label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #d1d5db; border-radius: 10px; font-weight: 500; cursor: pointer; }
.ab-radio input { width: auto; }
.ab-coupon { display: flex; gap: 8px; }
.ab-coupon input { flex: 1; }
.ab-note { font-size: 13px; color: #6b7280; }
.ab-error { color: #b91c1c; font-size: 14px; }
.ab-success { text-align: center; padding: 24px 0; display: grid; gap: 10px; }
.ab-success strong { font-size: 22px; }
.ab-radio { flex-wrap: wrap; }
.ab-radio label span { display: grid; }
.ab-radio label small { font-weight: 400; color: #6b7280; font-size: 12px; }
.ab-rates, .ab-pay { display: grid; gap: 6px; }
.ab-pay:empty { display: none; }
.ab-label { font-size: 13px; font-weight: 600; }
.ab-check input { width: auto; }
.ab-instructions { padding: 12px; border-radius: 10px; background: #f3f4f6; font-size: 14px; white-space: pre-line; text-align: left; }
.ab-link { border: 0; background: none; padding: 0; color: #2563eb; text-decoration: underline; cursor: pointer; font: inherit; }
.ab-back { justify-self: start; font-size: 14px; text-decoration: none; }
.ab-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-tabs .ab-chip { border-color: #d1d5db; }
.ab-drawer .ab-chip[aria-pressed="true"] { background: #111827; border-color: #111827; color: #fff; }
.ab-account-pane { display: grid; gap: 10px; }
.ab-order { padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px; display: grid; gap: 4px; }
.ab-order p { margin: 0; }
.ab-order-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ab-order .ab-pre { white-space: pre-line; font-size: 14px; }
.ab-order-links { font-size: 14px; }
.ab-order-links a { color: #2563eb; }
.ab-downloads { margin: 4px 0; padding-left: 1.1em; font-size: 14px; }
.ab-downloads a { color: #2563eb; font-weight: 600; }
.ab-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f3f4f6; color: #374151; }
.ab-pill-pagado, .ab-pill-entregado { background: #dcfce7; color: #166534; }
.ab-pill-enviado, .ab-pill-preparando { background: #dbeafe; color: #1e40af; }
.ab-pill-cancelado { background: #fee2e2; color: #991b1b; }
.ab-pill-pendiente { background: #fef3c7; color: #92400e; }
.ab-address { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.ab-toast-shop { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); z-index: 2147481003; padding: 10px 18px; border-radius: 10px; background: #111827; color: #fff; font: 14px system-ui, sans-serif; box-shadow: 0 8px 24px rgba(15, 23, 42, .3); }

/* shop: search, sort and spec filters over the catalogue (shop.js) */
.ab-filters > * { flex-basis: 100%; }
.ab-shop-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ab-shop-tools .ab-search { flex: 1 1 220px; }
.ab-shop-tools input, .ab-shop-tools select, .ab-filter-panel input[type=number] {
  padding: .6em .8em; border: 1px solid var(--ab-line); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: .95em;
}
.ab-shop-tools select { flex: 0 1 220px; }
.ab-shop-tools option { color: #111827; }
.ab-result-count { font-size: .85em; opacity: .7; margin-left: auto; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips[hidden], .ab-filter-panel[hidden] { display: none; }
.ab-chips-sub .ab-chip { font-size: .85em; }
.ab-chip-back { border-style: dashed; }
.ab-filter-panel { padding: 16px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-soft); display: grid; gap: 12px; justify-items: start; }
.ab-filter-grid { width: 100%; display: grid; gap: 14px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.ab-filter { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 4px; align-content: start; }
.ab-filter legend { font-weight: 600; font-size: .9em; margin-bottom: 4px; padding: 0; }
.ab-check { display: flex; align-items: center; gap: 6px; font-size: .9em; cursor: pointer; }
.ab-check small { opacity: .6; }
.ab-range { display: flex; gap: 6px; }
.ab-range input { width: 100%; min-width: 0; }
.ab-empty { grid-column: 1 / -1; text-align: center; padding: 24px; }
.ab-rating { margin: 0; display: flex; align-items: center; gap: 2px; font-size: .9em; }
.ab-stars { color: #f59e0b; letter-spacing: 1px; }
.ab-tags .ab-kind { opacity: 1; font-weight: 600; }
.ab-prices small { font-size: .75em; opacity: .75; font-weight: 400; }

/* shop: product page extras */
.ab-specs { margin-top: 22px; }
.ab-specs h2, .ab-reviews h2 { font-size: 1.15rem; margin: 0 0 10px; }
.ab-specs table { width: 100%; border-collapse: collapse; font-size: .92em; }
.ab-specs th, .ab-specs td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--ab-line); vertical-align: top; }
.ab-specs th { width: 42%; font-weight: 500; opacity: .75; }
.ab-pack { margin-top: 16px; }
.ab-pack ul { margin: 6px 0 0; padding-left: 1.1em; }
.ab-reviews { margin-top: 40px; display: grid; gap: 14px; max-width: 760px; }
.ab-review { padding: 14px 16px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); display: grid; gap: 4px; }
.ab-review p { margin: 0; }
.ab-verified { color: #15803d; }
.ab-review-form { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-soft); }
.ab-review-form label { display: grid; gap: 4px; font-size: .9em; font-weight: 600; }
.ab-review-form input, .ab-review-form textarea { padding: .65em .8em; border: 1px solid var(--ab-line); border-radius: 10px; background: transparent; color: inherit; font: inherit; }
.ab-review-form .ab-btn { justify-self: start; }
.ab-star-input { display: flex; gap: 2px; }
.ab-star-input button { border: 0; background: none; padding: 0 2px; font-size: 26px; line-height: 1; color: #f59e0b; cursor: pointer; }
.ab-success-inline { padding: 14px; border-radius: 10px; background: #ecfdf5; color: #065f46; }

.ab-specline { display: none; margin: 0; font-size: .82em; opacity: .75; }
.ab-category-link { cursor: pointer; transition: border-color .15s, transform .15s; }
.ab-category-link:hover, .ab-category-link:focus-visible { border-color: var(--ab-accent); transform: translateY(-2px); }
.ab-category[hidden] { display: none; }

/* shop template «vitrina»: a boutique -- tall photos, no boxes, centered
   serif names, the buy button shown on hover (always on touch screens). */
[data-ab-shop="vitrina"] .ab-products { gap: 40px 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
[data-ab-shop="vitrina"] .ab-product { background: none; border: 0; border-radius: 0; padding: 0; text-align: center; }
[data-ab-shop="vitrina"] .ab-product-media { display: block; overflow: hidden; border-radius: 2px; }
[data-ab-shop="vitrina"] .ab-product .ab-cover { aspect-ratio: 4 / 5; transition: transform .6s ease; }
[data-ab-shop="vitrina"] .ab-product:hover .ab-cover { transform: scale(1.04); }
[data-ab-shop="vitrina"] .ab-product-body { padding: 16px 4px 0; align-items: center; gap: 6px; }
[data-ab-shop="vitrina"] .ab-product-body h3,
[data-ab-shop="vitrina"] .ab-product-detail h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .01em; }
[data-ab-shop="vitrina"] .ab-product-body h3 { font-size: 1.2rem; }
[data-ab-shop="vitrina"] .ab-product-body > .ab-muted { display: none; }
[data-ab-shop="vitrina"] .ab-tags { justify-content: center; font-size: .68em; letter-spacing: .16em; text-transform: uppercase; }
[data-ab-shop="vitrina"] .ab-prices { justify-content: center; font-size: .95em; }
[data-ab-shop="vitrina"] .ab-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; padding: 1.1em 1.6em; }
[data-ab-shop="vitrina"] .ab-product-body .ab-btn { background: transparent; color: inherit; border: 1px solid currentColor; opacity: 0; transition: opacity .25s; margin-top: 8px; }
[data-ab-shop="vitrina"] .ab-product:hover .ab-btn, [data-ab-shop="vitrina"] .ab-product:focus-within .ab-btn { opacity: 1; }
@media (hover: none) { [data-ab-shop="vitrina"] .ab-product-body .ab-btn { opacity: 1; } }
[data-ab-shop="vitrina"] .ab-chips { justify-content: center; gap: 4px 18px; }
[data-ab-shop="vitrina"] .ab-chip { border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: .3em .1em; letter-spacing: .08em; text-transform: uppercase; font-size: .78em; }
[data-ab-shop="vitrina"] .ab-chip[aria-pressed="true"] { background: none; color: inherit; border-color: currentColor; }
[data-ab-shop="vitrina"] .ab-shop-tools input, [data-ab-shop="vitrina"] .ab-shop-tools select { border-width: 0 0 1px; border-radius: 0; }
[data-ab-shop="vitrina"] .ab-filter-panel { border-radius: 0; background: none; }
[data-ab-shop="vitrina"] .ab-product-detail .ab-cover { border-radius: 2px; aspect-ratio: 4 / 5; }
[data-ab-shop="vitrina"] .ab-cart-fab { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
[data-ab-shop="vitrina"] .ab-account-fab { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }

/* shop template «catalogo»: a store with many products -- filters fixed in
   a sidebar, dense cards with the key specs, photos contained on white. */
@media (min-width: 861px) {
  [data-ab-shop="catalogo"] .ab-b-products { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
  [data-ab-shop="catalogo"] .ab-filters { position: sticky; top: 16px; display: grid; gap: 16px; margin: 0; max-height: calc(100vh - 32px); overflow: auto; padding-right: 4px; }
  [data-ab-shop="catalogo"] .ab-shop-tools { flex-direction: column; align-items: stretch; }
  [data-ab-shop="catalogo"] .ab-shop-tools > * { flex: none; }
  [data-ab-shop="catalogo"] .ab-result-count { margin: 0; }
  [data-ab-shop="catalogo"] .ab-filter-toggle { display: none; }
  [data-ab-shop="catalogo"] .ab-filter-panel[hidden] { display: grid; }
  [data-ab-shop="catalogo"] .ab-filter-panel { padding: 0; border: 0; background: none; }
  [data-ab-shop="catalogo"] .ab-filter-grid { grid-template-columns: minmax(0, 1fr); }
  [data-ab-shop="catalogo"] .ab-filter { padding-top: 12px; box-shadow: inset 0 1px 0 var(--ab-line); }
  [data-ab-shop="catalogo"] .ab-chips { flex-direction: column; align-items: flex-start; gap: 2px; }
  [data-ab-shop="catalogo"] .ab-chips .ab-chip { border: 0; padding: .3em .2em; text-align: left; }
  [data-ab-shop="catalogo"] .ab-chips .ab-chip[aria-pressed="true"] { background: none; color: var(--ab-accent); font-weight: 700; }
  [data-ab-shop="catalogo"] .ab-chips-sub { padding-left: 12px; border-left: 2px solid var(--ab-line); }
}
[data-ab-shop="catalogo"] .ab-products { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
[data-ab-shop="catalogo"] .ab-product { border-radius: 10px; }
[data-ab-shop="catalogo"] .ab-product .ab-cover { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: 10px; }
[data-ab-shop="catalogo"] .ab-product-body { padding: 12px 14px 14px; gap: 4px; }
[data-ab-shop="catalogo"] .ab-product-body h3 { font-size: .95rem; line-height: 1.3; }
[data-ab-shop="catalogo"] .ab-product-body > .ab-muted { display: none; }
[data-ab-shop="catalogo"] .ab-specline { display: block; }
[data-ab-shop="catalogo"] .ab-tags { font-size: .7em; }
[data-ab-shop="catalogo"] .ab-prices { font-size: 1.15em; font-weight: 700; margin: 4px 0 6px; }
[data-ab-shop="catalogo"] .ab-product-body .ab-btn { padding: .6em 1em; font-size: .88em; border-radius: 8px; }
[data-ab-shop="catalogo"] .ab-product-detail .ab-cover { object-fit: contain; background: #fff; }

/* shop: the dock with the account and cart buttons */
.ab-shop-dock { position: fixed; right: 20px; bottom: 20px; z-index: 2147481000; display: flex; gap: 10px; align-items: center; }
.ab-shop-dock .ab-cart-fab { position: static; }
.ab-account-fab {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px;
  background: #fff; color: #111827; font: 600 15px/1 system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .3); cursor: pointer;
}
.ab-account-fab svg { width: 18px; height: 18px; }
.ab-account-fab[hidden] { display: none; }

@media (max-width: 760px) {
  .ab-cols-2, .ab-cols-3, .ab-cols-4, .ab-split, .ab-hero { grid-template-columns: minmax(0, 1fr); }
  .ab-hero { min-height: 0; }
}

/* ---- navigation: the site's menu, the current page marked by blocks.js ---- */
.ab-b-nav { padding-block: 12px; }
.ab-nav-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.ab-nav-list a {
  display: inline-block; padding: .5em .9em; border-radius: 999px;
  color: inherit; text-decoration: none; transition: background .15s;
}
.ab-nav-list a:hover { background: var(--ab-soft); }
.ab-nav-list a.ab-current, .ab-nav-list a[aria-current="page"] {
  background: var(--ab-accent); color: var(--ab-accent-ink); font-weight: 600;
}