/*
 * Storefront redesign (source: zippo-redesign/index.html + style.css): home, shop listing, product detail.
 * Everything is scoped under .zr-page so it cannot leak into the Electro/Bootstrap theme,
 * and uses explicit values because Tailwind preflight + theme CSS are loaded on the same page.
 */
.zr-page {
  /* Palette lives in theme.css (--zp-*); these are the home page's aliases. */
  --zr-accent: var(--zp-primary, #a63235);
  --zr-accent-dark: var(--zp-primary-dark, #852729);
  --zr-accent-soft: var(--zp-primary-soft, #f9e9e8);
  --zr-ink: var(--zp-ink-strong, #080808);
  --zr-gray: var(--zp-text, #414141);
  --zr-line: var(--zp-line, #e9e6e3);
  --zr-line-strong: var(--zp-line-strong, #d6d3d0);
  --zr-paper: var(--zp-paper, #eeebe5);
  --zr-bg: var(--zp-surface, #f8f8f7);
  background: var(--zr-bg);
  color: var(--zr-ink);
  font-family: 'Cabin', 'Cabin Fallback', sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.zr-page *,
.zr-page *::before,
.zr-page *::after { box-sizing: border-box; }
.zr-page :is(h1, h2, h3, p) { margin: 0; font-family: inherit; }
.zr-page p { color: var(--zr-gray); }
.zr-page a { color: inherit; text-decoration: none; }
.zr-page :is(button, input) { font: inherit; }
.zr-page button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zr-page :is(a, button, input):focus-visible { outline: 3px solid var(--zr-accent); outline-offset: 5px; }
.zr-page img { display: block; max-width: 100%; }
.zr-page h2 { font-size: 32px; line-height: 1.35; letter-spacing: -.8px; font-weight: 600; color: var(--zr-ink); }
.zr-page h3 { font-size: 17px; line-height: 1.5; color: var(--zr-ink); }

.zr-page .content-area,
.zr-page .site-main { margin: 0; padding: 0; float: none; }
/* Electro gives every <section> a bottom margin; the redesign handles its own spacing. */
.zr-page :is(.zr-hero, .zr-section, .zr-products-section, .zr-newsletter, #doi-tac, .zr-shop-hero, .zr-filter-card, .zr-pdp-hero, .zr-blog-hero, .zr-dash-hero, .zr-commerce-hero, .zr-dealer-hero, .zr-dealer-benefits, .zr-dealer-process, .zr-dealer-register, .zr-dealer-faq, .zr-dealer-cta) { margin-bottom: 0; }

.zr-wrap { max-width: 1240px; width: calc(100% - 80px); margin-left: auto; margin-right: auto; }
.zr-section { padding: 38px 0; }

.zr-eyebrow { display: block; font-size: 13px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 18px; color: #777; }
.zr-eyebrow--accent { color: var(--zr-accent); }

.zr-btn {
  display: inline-flex; align-items: center; gap: 24px;
  background: var(--zr-accent); color: #fff !important;
  border-radius: 50px; padding: 13px 24px;
  font-size: 16px; font-weight: 600; line-height: 1.4;
  transition: background .15s;
}
.zr-btn:hover { background: var(--zr-accent-dark); }
.zr-link { font-size: 15px; font-weight: 600; background: none; padding: 0; }
.zr-link:hover { color: var(--zr-accent) !important; }

.zr-section-head {
  display: flex; justify-content: space-between; align-items: center; gap: 25px;
  margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #d6d3d0;
}
.zr-section-head .zr-eyebrow { color: var(--zr-accent); margin-bottom: 6px; letter-spacing: 1.1px; }
.zr-page .zr-section-head h2 { font-size: 30px; }

/* ---------- Hero ---------- */
.zr-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--zr-paper); }
.zr-hero::before {
  content: ''; position: absolute; z-index: -1; width: 340px; height: 340px;
  border: 38px solid #cbd0d2; border-radius: 50%; top: -260px; left: 34%;
}
.zr-hero::after {
  content: ''; position: absolute; z-index: -1; width: 260px; height: 260px;
  border: 22px double #ddc8be; border-radius: 50%; bottom: -205px; left: -90px;
}
.zr-page .zr-hero .hero-track { display: flex; transition: transform .45s ease; will-change: transform; }
.zr-hero__slide { min-width: 100%; width: 100%; flex-shrink: 0; display: grid; grid-template-columns: 1.08fr 1fr; min-height: 510px; }
.zr-hero__copy { align-self: center; padding: 55px 50px 55px max(40px, calc((100vw - 1240px) / 2)); }
.zr-page .zr-hero__title {
  font-size: clamp(38px, 3.6vw, 55px); line-height: 1.25; font-weight: 600;
  letter-spacing: -1.6px; margin-bottom: 23px; color: var(--zr-ink);
}
.zr-page .zr-hero__desc { font-size: 17px; line-height: 1.9; color: #333; max-width: 510px; }
.zr-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 26px; }
.zr-hero__photo {
  position: relative; overflow: hidden; background: #ddd8d0;
  margin: 32px 35px 32px 0; max-width: 600px; border-radius: 48% 48% 5px 5px;
}
/* CMS hero banners are wide with the products on the left, so anchor the crop there. */
.zr-page .zr-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; filter: saturate(.8); }
.zr-hero__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.zr-page .zr-hero__dots .hero-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); transition: width .2s, background .2s; }
.zr-page .zr-hero__dots .hero-dot.is-active { width: 24px; border-radius: 4px; background: var(--zr-accent); }

/* ---------- Benefits (USP) ---------- */
.zr-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 28px 0; }
.zr-benefits__item { display: flex; align-items: center; gap: 13px; padding: 20px 15px; background: #fff; border-radius: 4px; }
.zr-benefits__num {
  display: grid; place-items: center; flex-shrink: 0; min-width: 33px; height: 33px;
  border-radius: 50%; background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 14px; font-weight: 700;
}
.zr-benefits__title { display: block; font-size: 15px; font-weight: 700; color: #111; line-height: 1.4; }
.zr-benefits__sub { display: block; font-size: 14px; color: #444; margin-top: 4px; line-height: 1.6; }

/* ---------- Categories ---------- */
.zr-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px; background: #fff; }
.zr-category { display: block; overflow: hidden; background: #fff; }
.zr-page .zr-category img { width: 100%; aspect-ratio: 178 / 184; object-fit: cover; border-radius: 3px; transition: filter .2s; }
.zr-category:hover img { filter: brightness(1.12); }
.zr-category__body { position: relative; padding: 16px 40px 9px 6px; }
.zr-page .zr-category__body h3 { font-size: 19px; font-weight: 500; }
.zr-category__price { font-size: 15px; color: var(--zr-accent); }
.zr-category__arrow {
  position: absolute; right: 4px; top: 19px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: #262626; color: #fff; font-size: 14px; font-weight: 400;
}

/* ---------- Products ---------- */
.zr-products-box { background: #fff; padding: 26px 22px; margin-top: 20px; margin-bottom: 22px; scroll-margin-top: 90px; }
.zr-search label { display: block; font-size: 14px; color: #333; margin-bottom: 7px; }
.zr-page .zr-search input {
  min-width: 280px; padding: 10px 15px; font-size: 15px; background: #fff;
  border: 1px solid #ddd; border-radius: 30px; color: var(--zr-ink);
}
/* 4 columns so a page of 8 fills two rows. */
.zr-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.zr-product { display: flex; flex-direction: column; background: #fff; }
.zr-product__image {
  position: relative; height: 230px; display: flex; align-items: center; justify-content: center;
  background: #f5f5f5; border-radius: 2px;
}
.zr-page .zr-product__image img { height: 185px; width: auto; max-width: 80%; object-fit: contain; mix-blend-mode: multiply; }
.zr-product__tag { position: absolute; top: 12px; left: 13px; font-size: 9px; letter-spacing: .8px; color: #777; text-transform: uppercase; }
.zr-page .zr-product__sku { font-size: 14px; color: #444; letter-spacing: .7px; padding: 15px 4px 0; }
.zr-page .zr-product__name { font-size: 20px; font-weight: 500; line-height: 1.5; min-height: 65px; margin-top: 7px; padding: 0 4px; }
.zr-product__name a:hover { color: var(--zr-accent); }
.zr-product__footer { margin-top: auto; }
.zr-product__price { padding: 12px 4px 0; font-size: 20px; font-weight: 600; color: var(--zr-accent); }
.zr-product__price del { font-size: 14px; font-weight: 400; color: #888; margin-left: 6px; }
.zr-product__price ins { text-decoration: none; }
.zr-product__price a { color: var(--zr-accent) !important; font-size: 15px !important; }
.zr-product__stock { padding: 12px 4px 0; font-size: 14px; color: #888; }
.zr-product__cta {
  display: block; width: 100%; margin: 16px 0 8px; padding: 10px 12px; text-align: center;
  background: var(--zr-accent); color: #fff !important; border-radius: 40px; font-size: 16px; font-weight: 500;
  transition: background .15s;
}
.zr-product__cta:hover { background: var(--zr-accent-dark); }
.zr-product__cta.disabled { opacity: .6; pointer-events: none; }
.zr-product__detail { display: flex; justify-content: space-between; align-items: center; padding: 10px 5px; font-size: 15px; font-weight: 600; }
.zr-product__detail span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #222; color: #fff; font-weight: 400; }
.zr-product__detail:hover { color: var(--zr-accent); }
.zr-no-results { padding: 24px 4px 4px; }

/*
 * Product block layouts (CMS productSectionBlock.displayMode) — ProductGrid.tsx + product-grid.js.
 * grid is the default .zr-products above; list and carousel reuse the same ProductTile markup.
 */
.zr-products-tools { display: flex; align-items: flex-end; gap: 16px; }
.zr-carousel-nav { display: flex; gap: 8px; }
.zr-carousel-nav[hidden] { display: none; }
.zr-page .zr-carousel-nav__btn {
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0; padding: 0 !important; border-radius: 50% !important;
  /* !important: Electro's "button:not(...)" rule (see pagination). */
  background-color: #fff !important; border: 1px solid var(--zr-line-strong) !important; color: var(--zr-ink) !important;
  font-size: 24px; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s, opacity .15s;
}
.zr-page .zr-carousel-nav__btn span { margin-top: -3px; }
.zr-page .zr-carousel-nav__btn:hover:not(:disabled) { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
.zr-page .zr-carousel-nav__btn:disabled { opacity: .35; cursor: default; }

/* Carousel: one row, 4 cards per view, native swipe + scroll-snap */
.zr-products.zr-products--carousel {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 2px; /* keeps the focus ring of the last row visible */
}
.zr-products--carousel::-webkit-scrollbar { display: none; }
.zr-products--carousel > .zr-product { scroll-snap-align: start; }
.zr-products--carousel:focus-visible { outline: 3px solid var(--zr-accent); outline-offset: 4px; }

/* List: one product per row — image | SKU + name | price + actions */
.zr-products.zr-products--list { grid-template-columns: 1fr; gap: 0; }
.zr-products--list > .zr-product {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 260px; grid-template-rows: auto 1fr;
  grid-template-areas: "img sku foot" "img name foot"; column-gap: 28px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--zr-line);
}
.zr-products--list > .zr-product:first-child { padding-top: 4px; }
.zr-products--list > .zr-product:last-of-type { border-bottom: 0; }
.zr-products--list .zr-product__image { grid-area: img; height: 130px; }
.zr-page .zr-products--list .zr-product__image img { height: 104px; }
.zr-products--list .zr-product__tag { display: none; } /* too small a thumbnail for the corner label */
.zr-page .zr-products--list .zr-product__sku { grid-area: sku; padding: 6px 0 0; }
.zr-page .zr-products--list .zr-product__name { grid-area: name; min-height: 0; margin-top: 4px; padding: 0; font-size: 20px; }
.zr-products--list .zr-product__footer { grid-area: foot; align-self: center; margin: 0; }
.zr-products--list .zr-product__price,
.zr-products--list .zr-product__stock { padding: 0; }
.zr-products--list .zr-product__cta { margin: 12px 0 4px; }
.zr-products--list .zr-product__detail { padding: 8px 2px 0; }

@media (max-width: 1050px) {
  .zr-products.zr-products--carousel { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
  .zr-products--list > .zr-product { grid-template-columns: 120px minmax(0, 1fr) 220px; column-gap: 20px; }
  .zr-products--list .zr-product__image { height: 116px; }
  .zr-page .zr-products--list .zr-product__image img { height: 96px; }
}
@media (max-width: 760px) {
  .zr-products-tools { width: 100%; }
  .zr-products-tools .zr-search { flex: 1; min-width: 0; }
  .zr-products.zr-products--carousel { grid-auto-columns: 72%; gap: 12px; } /* the next card peeks in */
  .zr-products--list > .zr-product {
    grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto;
    grid-template-areas: "img sku" "img name" "foot foot"; column-gap: 14px; padding: 16px 0;
  }
  .zr-products--list .zr-product__image { height: 96px; }
  .zr-page .zr-products--list .zr-product__image img { height: 76px; }
  .zr-page .zr-products--list .zr-product__name { font-size: 16px; }
  .zr-products--list .zr-product__footer { margin-top: 12px; }
}
@media (max-width: 480px) {
  .zr-carousel-nav { display: none; } /* swipe instead */
}

.zr-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; }
.zr-page .zr-pagination__btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-grid; place-items: center;
  background: #fff; color: var(--zr-ink); border: 1px solid var(--zr-line-strong, #d6d3d0); border-radius: 40px;
  font-size: 15px; font-weight: 600; line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.zr-page .zr-pagination__btn:hover:not(:disabled) { border-color: var(--zr-accent); color: var(--zr-accent); }
.zr-page .zr-pagination__btn.is-active { background: var(--zr-accent); border-color: var(--zr-accent); color: #fff; cursor: default; }

/*
 * Electro styles every bare <button> via "button:not(...)" with 11 :not() clauses (grey #efecec,
 * black on hover/focus). No class selector can out-rank that, so the redesign's own buttons
 * restate background / border-color / color with !important.
 */
.zr-page .zr-pagination__btn { background-color: #fff !important; border-color: var(--zr-line-strong, #d6d3d0) !important; color: var(--zr-ink) !important; }
.zr-page .zr-pagination__btn:hover:not(:disabled),
.zr-page .zr-pagination__btn:focus-visible { background-color: #fff !important; border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
.zr-page .zr-pagination__btn.is-active,
.zr-page .zr-pagination__btn.is-active:hover,
.zr-page .zr-pagination__btn.is-active:focus { background-color: var(--zr-accent) !important; border-color: var(--zr-accent) !important; color: #fff !important; }
.zr-page .zr-email-field button,
.zr-page .zr-email-field button:focus { background-color: var(--zr-accent) !important; border-color: var(--zr-accent) !important; color: #fff !important; }
.zr-page .zr-email-field button:hover { background-color: var(--zr-accent-dark) !important; border-color: var(--zr-accent-dark) !important; }
.zr-page .zr-hero__dots .hero-dot { background-color: rgba(0, 0, 0, .2) !important; border-color: transparent !important; }
.zr-page .zr-hero__dots .hero-dot.is-active { background-color: var(--zr-accent) !important; }
.zr-page .zr-pagination__btn:disabled:not(.is-active),
.zr-page .zr-pagination__btn.is-disabled { opacity: .35; cursor: default; }
.zr-pagination__gap { min-width: 20px; text-align: center; color: #999; }

/* ---------- Solutions (Why us) ---------- */
.zr-solutions { display: grid; grid-template-columns: 1fr 2.3fr; gap: 45px; padding-top: 48px; padding-bottom: 48px; }
.zr-page .zr-solutions__intro h2 { font-size: 34px; font-weight: 500; }
.zr-solutions__line { width: 42px; height: 3px; margin-top: 24px; background: var(--zr-accent); }
.zr-solutions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.zr-solutions__grid article { background: #fff; padding: 21px; border-radius: 3px; }
.zr-solutions__num { font-size: 14px; color: var(--zr-accent); }
.zr-page .zr-solutions__grid h3 { font-size: 18px; font-weight: 600; margin: 10px 0; }
.zr-page .zr-solutions__grid p { font-size: 16px; line-height: 1.85; }

/* ---------- Partner (Promotion) ---------- */
.zr-partner-wrap { position: relative; overflow: hidden; }
.zr-page .promo-carousel__track { display: flex; align-items: stretch; transition: transform .4s ease; will-change: transform; }
.zr-partner { min-width: 100%; width: 100%; flex-shrink: 0; display: grid; grid-template-columns: 44% 56%; background: #eee7df; color: var(--zr-ink); }
.zr-partner__photo { position: relative; overflow: hidden; min-height: 320px; background: #ddd3c8; }
.zr-page .zr-partner__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.zr-partner__copy { padding: 36px; }
.zr-page .zr-partner__copy h2 { font-size: 36px; font-weight: 500; }
.zr-page .zr-partner__desc { font-size: 16px; color: #38332f; margin-top: 20px; }
.zr-partner__benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  border-top: 1px solid #d5c9bf; margin-top: 22px; padding-top: 22px; margin-bottom: 24px;
}
.zr-page .zr-partner__benefits h3 { font-size: 16px; font-weight: 600; color: #151515; margin-bottom: 10px; }
.zr-page .zr-partner__benefits p { font-size: 15px; line-height: 1.8; color: #45403b; }
.zr-page .zr-partner-wrap .promo-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 14px; }

/* ---------- Steps (How it works) ---------- */
.zr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.zr-steps article { background: #fff; padding: 22px; }
.zr-steps__num { font-size: 27px; font-weight: 400; color: var(--zr-accent); line-height: 1.4; }
.zr-page .zr-steps h3 { font-size: 18px; font-weight: 600; margin: 13px 0 10px; }
.zr-page .zr-steps p { font-size: 16px; }
.zr-page .zr-steps .zr-link { display: inline-block; margin-top: 20px; color: var(--zr-accent); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Newsletter ---------- */
.zr-newsletter { background: #f1efeb; padding: 58px 0; }
.zr-newsletter__inner { display: flex; flex-direction: column; align-items: center; gap: 25px; text-align: center; }
.zr-newsletter .zr-eyebrow { margin-bottom: 12px; }
.zr-page .zr-newsletter h2 { font-size: 35px; font-weight: 500; }
.zr-page .zr-newsletter__desc { font-size: 16px; color: #3b3b3b; margin-top: 12px; }
.zr-newsletter form { width: 100%; max-width: 590px; }
.zr-newsletter label { display: block; text-align: left; font-size: 15px; color: #333; margin-bottom: 10px; }
.zr-email-field { display: flex; padding: 4px; background: #fff; border: 1px solid #ddd; border-radius: 40px; overflow: hidden; }
.zr-page .zr-email-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 10px 18px; font-size: 16px; color: var(--zr-ink); }
.zr-page .zr-email-field button { background: var(--zr-accent); color: #fff; border-radius: 40px; padding: 12px 27px; font-size: 15px; white-space: nowrap; }
.zr-page .zr-email-field button:hover { background: var(--zr-accent-dark); }
.zr-page .zr-email-field button:disabled { opacity: .7; cursor: wait; }
.zr-newsletter small { display: block; font-size: 13px; color: #555; margin-top: 12px; line-height: 1.8; }

[hidden].zr-product, .zr-no-results[hidden], .zr-pagination[hidden] { display: none !important; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) {
  .zr-hero__copy { padding-left: max(40px, calc((100vw - 1240px) / 2)); }
  .zr-hero__photo { margin-right: max(40px, calc((100vw - 1240px) / 2)); }
}
@media (max-width: 1100px) {
  .zr-benefits { grid-template-columns: 1fr 1fr; }
  /* Keep 4 columns (8 = two full rows); tighten card text so it fits. */
  .zr-page .zr-product__name { font-size: 17px; }
  .zr-product__cta { font-size: 14px; }
  .zr-partner__benefits { grid-template-columns: 1fr; }
}
@media (max-width: 1050px) {
  .zr-wrap { width: calc(100% - 48px); }
  .zr-hero__copy { padding: 40px 26px; }
  .zr-page .zr-hero__title { font-size: 36px; }
  .zr-hero__photo { margin: 26px 24px 26px 0; }
  .zr-solutions { grid-template-columns: 1fr 1.7fr; gap: 25px; }
  .zr-partner__copy { padding: 28px; }
  .zr-partner__benefits { gap: 12px; }
  .zr-page .zr-partner__copy h2 { font-size: 27px; }
}
@media (max-width: 900px) {
  .zr-products { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
}
@media (max-width: 760px) {
  .zr-wrap { width: calc(100% - 32px); }
  .zr-section { padding: 28px 0; }
  .zr-eyebrow { font-size: 12px; }
  .zr-btn { font-size: 15px; }
  .zr-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .zr-page .zr-section-head h2 { font-size: 27px; }

  .zr-hero__slide { grid-template-columns: 1fr; min-height: 0; }
  .zr-hero__copy { padding: 38px 24px 28px; }
  .zr-page .zr-hero__title { font-size: 38px; letter-spacing: -1px; }
  .zr-page .zr-hero__desc { font-size: 16px; }
  .zr-hero__actions { gap: 17px; }
  .zr-hero__actions .zr-link { font-size: 14px; }
  .zr-hero__photo { height: 275px; margin: 0 24px 40px; border-radius: 45% 45% 4px 4px; }
  .zr-hero::before { left: 60%; top: -275px; }

  .zr-benefits { padding: 20px 0; gap: 10px; }
  .zr-benefits__item { padding: 15px 10px; gap: 8px; align-items: flex-start; }
  .zr-benefits__num { min-width: 26px; height: 26px; font-size: 11px; }
  .zr-benefits__title { font-size: 14px; }
  .zr-benefits__sub { font-size: 13px; }

  .zr-categories { grid-template-columns: 1fr 1fr; gap: 16px 10px; padding: 10px; }
  .zr-category__body { padding: 14px 24px 9px 0; }
  .zr-page .zr-category__body h3 { font-size: 17px; }
  .zr-category__price { font-size: 13px; }
  .zr-category__arrow { width: 21px; height: 21px; right: 0; top: 17px; font-size: 12px; }

  .zr-products-box { padding: 20px 16px; margin-top: 10px; margin-bottom: 10px; }
  .zr-search { width: 100%; }
  .zr-page .zr-search input { width: 100%; min-width: 0; }
  .zr-products { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .zr-product__image { height: 200px; }
  .zr-page .zr-product__image img { height: 160px; }
  .zr-page .zr-product__name { font-size: 17px; min-height: 0; }
  .zr-product__cta { font-size: 14px; }

  .zr-solutions { grid-template-columns: 1fr; gap: 23px; }
  .zr-page .zr-solutions__intro h2 { font-size: 30px; }
  .zr-solutions__grid { grid-template-columns: 1fr; gap: 12px; }
  .zr-solutions__grid article { padding: 16px; }

  .zr-partner { grid-template-columns: 1fr; }
  .zr-partner__photo { height: 250px; min-height: 0; }
  .zr-partner__copy { padding: 28px 22px; }
  .zr-page .zr-partner__copy h2 { font-size: 31px; }
  .zr-partner__benefits { gap: 18px; }

  .zr-steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .zr-steps article { padding: 18px 15px; }
  .zr-page .zr-steps h3 { font-size: 17px; }
  .zr-page .zr-steps p { font-size: 15px; }

  .zr-newsletter { padding: 40px 0; }
  .zr-page .zr-newsletter h2 { font-size: 30px; }
  .zr-page .zr-email-field input { padding: 10px 12px; font-size: 15px; }
  .zr-page .zr-email-field button { padding: 11px 19px; font-size: 14px; }
}
@media (max-width: 480px) {
  .zr-products { grid-template-columns: 1fr; gap: 25px; }
  .zr-product__image { height: 245px; }
  .zr-page .zr-product__image img { height: 205px; }
}

/* =====================================================================
 * Shop listing (/shop, /{category}) — TemplateListProduct.tsx
 * ===================================================================== */
.zr-shop-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--zr-paper); padding: 22px 0 30px; }
.zr-shop-hero::before {
  content: ''; position: absolute; z-index: -1; width: 300px; height: 300px;
  border: 34px solid #cbd0d2; border-radius: 50%; top: -210px; right: 8%;
}
.zr-page :is(.zr-shop-hero, .zr-pdp-hero, .zr-blog-hero, .zr-dealer__crumbs, .zr-auth__crumbs) .woocommerce-breadcrumb { margin: 0 0 22px; padding: 0; background: none; font-size: 14px; color: #777; }
.zr-page :is(.zr-shop-hero, .zr-pdp-hero, .zr-blog-hero, .zr-dealer__crumbs, .zr-auth__crumbs) .woocommerce-breadcrumb a:hover { color: var(--zr-accent); }
.zr-page :is(.zr-shop-hero, .zr-pdp-hero, .zr-blog-hero, .zr-dealer__crumbs, .zr-auth__crumbs) .woocommerce-breadcrumb .delimiter { margin: 0 8px; color: #aaa; }
/* Electro pills every crumb link after a delimiter and forces a visible scrollbar on mobile. */
.zr-page :is(.zr-shop-hero, .zr-pdp-hero, .zr-blog-hero, .zr-dealer__crumbs, .zr-auth__crumbs) .woocommerce-breadcrumb span.delimiter + a { padding: 0; border-radius: 0; background: none; }
.zr-page :is(.zr-shop-hero, .zr-pdp-hero, .zr-blog-hero, .zr-dealer__crumbs, .zr-auth__crumbs) .woocommerce-breadcrumb { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.zr-page :is(.zr-shop-hero, .zr-pdp-hero, .zr-blog-hero, .zr-dealer__crumbs, .zr-auth__crumbs) .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
.zr-shop-hero .zr-eyebrow { margin-bottom: 10px; }
.zr-page .zr-shop-hero__title { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.2; font-weight: 600; letter-spacing: -1.2px; color: var(--zr-ink); margin: 0 0 8px; }
.zr-page .zr-shop-hero__meta { font-size: 16px; color: #5e5c59; }
.zr-shop-hero__meta strong { color: var(--zr-ink); }
.zr-page .zr-shop-hero__meta .zr-link { color: var(--zr-accent); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

.zr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.zr-page .zr-chip {
  padding: 8px 18px; border-radius: 40px; background: #fff; border: 1px solid var(--zr-line);
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--zr-ink); white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.zr-page .zr-chip:hover { border-color: var(--zr-accent); color: var(--zr-accent); }
.zr-page .zr-chip.is-active { background: var(--zr-accent); border-color: var(--zr-accent); color: #fff; }

/* "Xem thêm": chips past CHIP_LIMIT stay hidden until the row is expanded (SHOP_CHIPS_SCRIPT). */
.zr-chips:not(.is-expanded) .zr-chip--extra { display: none; }
.zr-chips.is-animating { overflow: hidden; transition: height .38s cubic-bezier(.4, 0, .2, 1); }
.zr-chips.is-revealing .zr-chip--extra {
  animation: zr-chip-in .32s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 18ms);
}
.zr-chips.is-hiding .zr-chip--extra { animation: zr-chip-out .2s ease both; }
@keyframes zr-chip-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes zr-chip-out { to { opacity: 0; transform: translateY(4px) scale(.97); } }

.zr-page .zr-chip--toggle {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4;
  /* !important: Electro's "button:not(...)" rule (see pagination). */
  background-color: transparent !important; border: 1px dashed var(--zr-line-strong) !important; color: var(--zr-accent) !important;
}
.zr-page .zr-chip--toggle:hover,
.zr-page .zr-chip--toggle:focus-visible { background-color: #fff !important; border-color: var(--zr-accent) !important; border-style: solid !important; }
.zr-chip__chevron {
  width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .3s ease;
}
.zr-chip--toggle[aria-expanded="true"] .zr-chip__chevron { transform: translateY(2px) rotate(-135deg); }

.zr-shop__layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 30px; align-items: start; padding: 30px 0 56px; }

/* Filters */
.zr-shop__filters { display: flex; flex-direction: column; gap: 12px; }
.zr-shop__filters-head { display: flex; justify-content: space-between; align-items: center; }
.zr-page .zr-shop__filters-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; margin: 0; }
.zr-shop__filters-close { display: none !important; }
.zr-filter-card { background: #fff; border-radius: 4px; padding: 16px 18px; }
.zr-page .zr-filter-card__title {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0;
  font-size: 16px; font-weight: 600; color: var(--zr-ink); cursor: pointer; user-select: none;
}
.zr-page .zr-filter-card__title[aria-expanded="true"] { margin-bottom: 10px; }
.zr-filter-card__title .filter-group-icon { font-size: 13px; color: #999; transition: transform .2s; }
.zr-page .zr-filter-list { list-style: none; margin: 0; padding: 0; }
.zr-page .zr-filter-option { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 15px; line-height: 1.4; color: #333; }
.zr-page .zr-filter-option:hover { color: var(--zr-accent); }
.zr-filter-option__box {
  position: relative; flex-shrink: 0; width: 16px; height: 16px;
  border: 1.5px solid #bbb; border-radius: 3px; background: #fff; transition: border-color .15s, background .15s;
}
.zr-filter-option:hover .zr-filter-option__box { border-color: var(--zr-accent); }
.zr-filter-option.is-active .zr-filter-option__box { background: var(--zr-accent); border-color: var(--zr-accent); }
.zr-filter-option.is-active .zr-filter-option__box::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.zr-page .zr-filter-option.is-active { color: var(--zr-ink); font-weight: 600; }
.zr-filter-option__label { flex: 1; min-width: 0; }
.zr-filter-option__count { font-size: 13px; color: #999; }
.zr-page .zr-filter-more {
  padding: 8px 0 0; font-size: 14px; font-weight: 600;
  background-color: transparent !important; border-color: transparent !important; color: var(--zr-accent) !important;
}
.zr-active-filters__head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
.zr-page .zr-active-filters__head .zr-link { font-size: 14px; color: var(--zr-accent); }
.zr-active-filters__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.zr-page .zr-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 40px;
  background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 13px; font-weight: 500; line-height: 1.5;
}
.zr-page .zr-tag:hover { background: var(--zr-accent); color: #fff; }

/* Toolbar */
.zr-shop__toolbar { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 4px; padding: 10px 16px; margin-bottom: 18px; }
.zr-page .zr-shop__count { flex: 1; min-width: 0; font-size: 15px; color: #555; }
.zr-shop__count strong { color: var(--zr-ink); }
.zr-shop__sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.zr-shop__sort label { font-size: 14px; color: #777; margin: 0; white-space: nowrap; }
.zr-page .zr-select {
  appearance: none; -webkit-appearance: none; min-width: 190px; height: auto;
  padding: 9px 40px 9px 16px; border: 1px solid #ddd; border-radius: 30px; box-shadow: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
  font: inherit; font-size: 15px; color: var(--zr-ink); cursor: pointer;
}
.zr-page .zr-select:focus { outline: none; border-color: var(--zr-accent); box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15); }

/* Plain buttons. Electro's "button:not(...)" rule can only be beaten with !important (see pagination). */
.zr-page .zr-pill-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 40px;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  background-color: #fff !important; border: 1px solid var(--zr-line-strong) !important; color: var(--zr-ink) !important;
}
.zr-page .zr-pill-btn:hover, .zr-page .zr-pill-btn:focus-visible { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
.zr-pill-btn__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 20px; background: var(--zr-accent); color: #fff; font-size: 12px;
}
.zr-page .zr-icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  font-size: 22px; line-height: 1;
  background-color: #fff !important; border: 1px solid var(--zr-line) !important; color: var(--zr-ink) !important;
}
.zr-page .zr-icon-btn:hover { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
.zr-shop__filters-open { display: none !important; }

/* Grid: tiles sit on the page background here, so they get their own card padding. */
.zr-products.zr-products--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zr-products--shop .zr-product { padding: 12px 12px 4px; border-radius: 4px; }
.zr-shop__main .zr-pagination { margin-top: 32px; }

.zr-shop__empty { background: #fff; border-radius: 4px; padding: 56px 24px; text-align: center; }
.zr-page .zr-shop__empty h2 { font-size: 24px; }
.zr-page .zr-shop__empty p { margin: 10px 0 24px; }

.zr-filters-backdrop { position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, .45); }
.zr-filters-backdrop[hidden] { display: none !important; }
html.zr-no-scroll { overflow: hidden; }

@media (max-width: 1050px) {
  .zr-shop__layout { grid-template-columns: 1fr; padding-top: 20px; }
  .zr-shop__filters {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 10002; width: min(340px, 88vw);
    padding: 18px 16px 32px; overflow-y: auto; overscroll-behavior: contain; background: var(--zr-bg);
    transform: translateX(-100%); visibility: hidden;
    /* Closing: stay visible until the slide-out finishes, then hide. */
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .zr-shop__filters.is-open {
    transform: none; visibility: visible; box-shadow: 0 0 24px rgba(0, 0, 0, .25);
    /* Opening: visible immediately, so shop.js can move focus into the drawer. */
    transition: transform .25s ease, visibility 0s;
  }
  /* Theme rules give buttons/links "transition: all", which would fade the inherited visibility in
     over ~0.2s and make focus() on the close button fail. Transition only visual properties here. */
  .zr-shop__filters * { transition-property: color, background-color, border-color, box-shadow, opacity, transform; }
  .zr-shop__filters-close { display: grid !important; }
  .zr-shop__filters-open { display: inline-flex !important; }
}
@media (max-width: 760px) {
  .zr-shop-hero { padding: 18px 0 24px; }
  .zr-page .zr-shop-hero .woocommerce-breadcrumb { margin-bottom: 16px; font-size: 13px; }
  .zr-page .zr-shop-hero__title { font-size: 30px; letter-spacing: -.8px; }
  .zr-page .zr-shop-hero__meta { font-size: 15px; }
  /* Chips scroll sideways instead of wrapping into many rows. */
  .zr-chips { flex-wrap: nowrap; overflow-x: auto; margin: 18px -16px 0; padding: 0 16px 4px; scrollbar-width: none; }
  .zr-chips::-webkit-scrollbar { display: none; }
  .zr-page .zr-chip { padding: 7px 15px; font-size: 14px; }
  /* The row already scrolls sideways here, so show every chip and drop "Xem thêm". */
  .zr-chips:not(.is-expanded) .zr-chip--extra { display: inline-flex; }
  .zr-page .zr-chip--toggle { display: none; }

  .zr-shop__toolbar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  /* Count drops to its own line under the filter + sort controls. */
  .zr-page .zr-shop__count { order: 3; flex: 0 0 100%; font-size: 14px; }
  .zr-shop__sort { margin-left: auto; }
  .zr-shop__sort label { display: none; }
  .zr-page .zr-select { min-width: 0; font-size: 14px; padding: 8px 36px 8px 14px; }
  .zr-page .zr-pill-btn { font-size: 14px; padding: 8px 15px; }

  .zr-products.zr-products--shop { grid-template-columns: 1fr 1fr; gap: 12px; }
  .zr-products--shop .zr-product { padding: 8px 8px 2px; }
}
@media (max-width: 480px) {
  /* Stay at two columns on phones (the home grid drops to one). */
  .zr-products.zr-products--shop { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zr-products--shop .zr-product__image { height: 170px; }
  .zr-page .zr-products--shop .zr-product__image img { height: 135px; }
  .zr-page .zr-products--shop .zr-product__sku { font-size: 12px; padding-top: 10px; }
  .zr-page .zr-products--shop .zr-product__name { font-size: 15px; line-height: 1.4; }
  .zr-page .zr-products--shop .zr-product__cta { font-size: 12px; padding: 8px 6px; margin-top: 12px; }
  .zr-page .zr-products--shop .zr-product__detail { font-size: 13px; }
}

/* =====================================================================
 * Product detail (/product/{slug}) — TemplateDetailProducts.tsx, ProductGallery.tsx
 * ===================================================================== */
.zr-pdp-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--zr-paper); padding: 22px 0 48px; }
.zr-pdp-hero::before {
  content: ''; position: absolute; z-index: -1; width: 360px; height: 360px;
  border: 38px solid #cbd0d2; border-radius: 50%; top: -270px; left: 38%;
}
.zr-pdp-hero::after {
  content: ''; position: absolute; z-index: -1; width: 260px; height: 260px;
  border: 22px double #ddc8be; border-radius: 50%; bottom: -200px; right: -80px;
}
/*
 * Two equal cards with matching edges: the grid stretches both to the taller one; the gallery's
 * stage flexes to fill its card, and the summary pins its trust list to the bottom.
 */
.zr-pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }

/* Gallery */
.zr-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; background: #fff; border-radius: 6px; }
.zr-gallery__stage {
  position: relative; overflow: hidden; display: grid; place-items: center;
  flex: 1 1 auto; min-height: 420px; background: #f5f5f5; border-radius: 4px;
}
/* Absolutely positioned so the photo never sets the stage height; the summary card does. */
.zr-page .zr-gallery__main {
  position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply;
  transition: opacity .18s ease, transform .25s ease;
}
.zr-gallery__main.is-swapping { opacity: 0; }
.zr-gallery__stage.is-zoomed { cursor: zoom-in; }
.zr-gallery__stage.is-zoomed .zr-gallery__main { transform: scale(1.8); }
.zr-gallery__empty { color: #999; font-size: 15px; }
.zr-page .zr-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; line-height: 1; opacity: 0; transition: opacity .2s, border-color .15s, color .15s;
  /* !important: Electro's "button:not(...)" rule (see pagination). */
  background-color: rgba(255, 255, 255, .92) !important; border: 1px solid var(--zr-line) !important; color: var(--zr-ink) !important;
}
.zr-gallery__nav--prev { left: 14px; }
.zr-gallery__nav--next { right: 14px; }
.zr-gallery__stage:hover .zr-gallery__nav,
.zr-gallery__stage:focus-within .zr-gallery__nav { opacity: 1; }
.zr-page .zr-gallery__nav:hover { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
@media (hover: none) { .zr-page .zr-gallery__nav { opacity: 1; } }
.zr-gallery__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px; border-radius: 30px; background: rgba(255, 255, 255, .92);
  font-size: 12px; letter-spacing: .5px; color: #555;
}
/* Exactly 6 equal square thumbs across the card; extras scroll (swipe / arrows) without a visible bar. */
.zr-gallery__thumbs {
  --zr-thumbs: 6;
  display: grid; grid-auto-flow: column; gap: 10px;
  grid-auto-columns: calc((100% - (var(--zr-thumbs) - 1) * 10px) / var(--zr-thumbs));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.zr-gallery__thumbs::-webkit-scrollbar { display: none; }
.zr-page .zr-gallery__thumb {
  aspect-ratio: 1 / 1; padding: 6px; border-radius: 4px; cursor: pointer; scroll-snap-align: start;
  background-color: #f5f5f5 !important; border: 1px solid transparent !important; color: inherit !important;
  transition: border-color .15s, box-shadow .15s;
}
.zr-page .zr-gallery__thumb:hover { border-color: var(--zr-line-strong) !important; }
.zr-page .zr-gallery__thumb.is-active { border-color: var(--zr-accent) !important; box-shadow: inset 0 0 0 1px var(--zr-accent); }
.zr-page .zr-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Summary */
/* Same 24px top/bottom inset as the gallery card so first and last lines align across both cards. */
.zr-pdp__summary { display: flex; flex-direction: column; background: #fff; border-radius: 6px; padding: 24px 32px; }
.zr-pdp__summary > .zr-pdp__trust { margin-top: auto; }
.zr-pdp__summary > :is(.zr-pdp__buy, .zr-pdp__dealer) { margin-bottom: 24px; }
.zr-page .zr-pdp__cats { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #999; }
.zr-page .zr-pdp__cats a { color: var(--zr-accent); }
.zr-page .zr-pdp__cats a:hover { text-decoration: underline; }
.zr-page .zr-pdp__title { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.2; font-weight: 600; letter-spacing: -1px; color: var(--zr-ink); margin: 8px 0 14px; }
.zr-pdp__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--zr-line);
  font-size: 15px; color: #555;
}
.zr-pdp__meta strong { color: var(--zr-ink); }
.zr-stock { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 40px; font-size: 13px; font-weight: 600; }
.zr-stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.zr-stock--in-stock { background: #e8f3ec; color: #22703f; }
.zr-stock--pre-order { background: var(--zr-accent-soft); color: var(--zr-accent); }
.zr-stock--out-of-stock { background: #f0f0f0; color: #666; }

.zr-pdp__price { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--zr-accent); }
.zr-pdp__price ins { text-decoration: none; }
.zr-pdp__price del { margin-left: 10px; font-size: 18px; font-weight: 400; color: #999; }
.zr-page .zr-pdp__price a { font-size: 18px !important; color: var(--zr-accent) !important; }
.zr-page .zr-pdp__note { margin-top: 6px; font-size: 14px; color: #2f7d4f; }

.zr-pdp__contact { margin-top: 18px; padding: 18px 20px; border-radius: 6px; background: var(--zr-paper); }
.zr-page .zr-pdp__contact p { margin-bottom: 14px; font-size: 15px; }

.zr-pdp__dealer { padding: 24px; border-radius: 6px; background: #eee7df; }
.zr-pdp__dealer .zr-eyebrow { margin-bottom: 8px; }
.zr-page .zr-pdp__dealer h2 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.zr-page .zr-pdp__dealer p { font-size: 15px; color: #4a443e; }
.zr-pdp__dealer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.zr-page .zr-pdp__dealer-actions .zr-link { text-decoration: underline; text-underline-offset: 4px; }

.zr-pdp__trust { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--zr-line); }
.zr-pdp__trust li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #444; }
.zr-pdp__trust b {
  display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 11px;
}
.zr-page .zr-pdp__trust a { color: var(--zr-accent); font-weight: 600; }

/* Tier pricing table (PricingTierTable.tsx) restyled for the redesign */
.zr-pdp .pricing-tier-table { margin-top: 20px; border: 1px solid var(--zr-line); border-radius: 6px; }
.zr-pdp .pricing-tier-table__header { background: var(--zr-ink); }
.zr-pdp .pricing-tier-table__table thead th { background: #f7f6f4; }
.zr-pdp .pricing-tier-table__table tbody tr[data-tier-row]:hover td { background: var(--zp-primary-tint, #fdf6f5); }
.zr-pdp .pricing-tier-table__table tbody tr[data-tier-row].is-active td { background: var(--zr-accent-soft); color: var(--zr-ink); }
.zr-pdp .pricing-tier-table__unit-price,
.zr-pdp .pricing-tier-table__total-price { color: var(--zr-accent); }
.zr-qty { display: inline-flex; align-items: stretch; overflow: hidden; background: #fff; border: 1px solid #d8d4cf; border-radius: 40px; }
.zr-page .zr-qty__btn {
  width: 40px; height: 42px; padding: 0; font-size: 20px; line-height: 1; cursor: pointer;
  background-color: transparent !important; border: 0 !important; color: var(--zr-ink) !important;
}
.zr-page .zr-qty__btn:hover { background-color: var(--zr-paper) !important; color: var(--zr-accent) !important; }
.zr-page .zr-qty input {
  width: 64px; padding: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent;
  text-align: center; font-size: 16px; font-weight: 600; color: var(--zr-ink); -moz-appearance: textfield;
}
.zr-page .zr-qty input::-webkit-outer-spin-button,
.zr-page .zr-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zr-page .zr-qty input:focus { outline: none; }
.zr-qty:focus-within { border-color: var(--zr-accent); box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15); }
.zr-page .pricing-tier-table__submit-btn { margin-top: 16px; padding: 14px 24px; border-radius: 40px; font-size: 16px; font-weight: 600; }
.zr-page .pricing-tier-table__submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Description + specs */
.zr-pdp-details__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.zr-prose { background: #fff; border-radius: 6px; padding: 28px 32px; font-size: 16px; line-height: 1.8; color: var(--zr-gray); overflow-wrap: anywhere; }
.zr-page .zr-prose :is(p, ul, ol, table) { margin: 0 0 14px; }
.zr-page .zr-prose :is(ul, ol) { padding-left: 22px; }
.zr-page .zr-prose ul { list-style: disc; }
.zr-page .zr-prose ol { list-style: decimal; }
.zr-page .zr-prose li { margin-bottom: 6px; }
.zr-page .zr-prose :is(h2, h3, h4) { margin: 22px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; color: var(--zr-ink); }
.zr-page .zr-prose strong { color: var(--zr-ink); }
.zr-page .zr-prose a { color: var(--zr-accent); text-decoration: underline; }
.zr-page .zr-prose img { max-width: 100%; height: auto; }
.zr-page .zr-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zr-page .zr-prose :is(td, th) { padding: 8px 10px; border: 1px solid var(--zr-line); text-align: left; }
.zr-page .zr-prose > :last-child { margin-bottom: 0; }
.zr-specs { background: #fff; border-radius: 6px; padding: 22px 24px; }
.zr-page .zr-specs h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.zr-page .zr-specs dl { margin: 0; }
.zr-page .zr-specs dt { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #999; }
.zr-page .zr-specs dd { margin: 2px 0 0; font-size: 15px; color: var(--zr-ink); }
.zr-page .zr-specs a { color: var(--zr-accent); }

/* Related products: tiles on the page background get their own card padding (like the shop). */
.zr-products.zr-products--related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.zr-products--related .zr-product { padding: 12px 12px 4px; border-radius: 4px; }

@media (max-width: 1100px) {
  .zr-pdp__grid { gap: 20px; }
  .zr-pdp__summary { padding: 26px 24px; }
}
@media (max-width: 900px) {
  .zr-pdp__grid { grid-template-columns: 1fr; }
  .zr-gallery { width: 100%; max-width: 560px; margin: 0 auto; }
  /* Stacked: nothing to match heights with, so the stage is a plain square. */
  .zr-gallery__stage { flex: none; min-height: 0; aspect-ratio: 1 / 1; }
  .zr-pdp-details__grid { grid-template-columns: 1fr; }
  .zr-products.zr-products--related { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  .zr-pdp-hero { padding: 18px 0 28px; }
  .zr-page .zr-pdp-hero .woocommerce-breadcrumb { margin-bottom: 16px; font-size: 13px; }
  .zr-pdp__summary { padding: 22px 18px; }
  .zr-page .zr-pdp__title { font-size: 27px; letter-spacing: -.6px; }
  .zr-pdp__price { font-size: 28px; }
  .zr-gallery { padding: 12px; gap: 10px; }
  .zr-gallery__thumbs { --zr-thumbs: 5; gap: 8px; grid-auto-columns: calc((100% - 4 * 8px) / 5); }
  .zr-prose { padding: 20px 18px; font-size: 15px; }
  .zr-products--related .zr-product { padding: 8px 8px 2px; }
}
@media (max-width: 480px) {
  .zr-products.zr-products--related { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zr-products--related .zr-product__image { height: 170px; }
  .zr-page .zr-products--related .zr-product__image img { height: 135px; }
  .zr-page .zr-products--related .zr-product__sku { font-size: 12px; padding-top: 10px; }
  .zr-page .zr-products--related .zr-product__name { font-size: 15px; line-height: 1.4; }
  .zr-page .zr-products--related .zr-product__cta { font-size: 12px; padding: 8px 6px; margin-top: 12px; }
  .zr-page .zr-products--related .zr-product__detail { font-size: 13px; }
}

/* =====================================================================
 * Blog list (/blog) + article (/blog/{slug}) — TemplateBlogList.tsx, TemplateBlogDetail.tsx, PostCard.tsx
 * ===================================================================== */
.zr-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.zr-blog-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--zr-paper); padding: 22px 0 36px; }
.zr-blog-hero::before {
  content: ''; position: absolute; z-index: -1; width: 300px; height: 300px;
  border: 34px solid #cbd0d2; border-radius: 50%; top: -210px; right: 8%;
}
.zr-blog-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.zr-blog-hero .zr-eyebrow { margin-bottom: 10px; }
.zr-page .zr-blog-hero__title { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.2; font-weight: 600; letter-spacing: -1.2px; color: var(--zr-ink); margin: 0 0 8px; }
.zr-page .zr-blog-hero__desc { max-width: 560px; font-size: 16px; color: #5e5c59; }
.zr-page .zr-blog-hero__desc .zr-link { color: var(--zr-accent); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }

.zr-search-form { display: flex; flex-shrink: 0; width: min(420px, 100%); padding: 4px; background: #fff; border: 1px solid #ddd; border-radius: 40px; }
.zr-search-form:focus-within { border-color: var(--zr-accent); box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15); }
.zr-page .zr-search-form input { flex: 1; min-width: 0; padding: 10px 18px; border: 0; background: none; box-shadow: none; font-size: 15px; color: var(--zr-ink); outline: none; }
.zr-page .zr-search-form button {
  padding: 10px 22px; border-radius: 40px; font-size: 15px; font-weight: 600; white-space: nowrap;
  /* !important: Electro's "button:not(...)" rule (see pagination). */
  background-color: var(--zr-accent) !important; border-color: var(--zr-accent) !important; color: #fff !important;
}
.zr-page .zr-search-form button:hover { background-color: var(--zr-accent-dark) !important; border-color: var(--zr-accent-dark) !important; }

.zr-blog__list .zr-pagination { margin-top: 36px; }

/* Post cards */
.zr-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.zr-post { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 6px; transition: transform .2s ease, box-shadow .2s ease; }
.zr-post:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .07); }
.zr-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--zr-paper); }
.zr-page .zr-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.zr-post:hover .zr-post__media img { transform: scale(1.04); }
.zr-post__placeholder { display: grid; place-items: center; height: 100%; font-size: 22px; font-weight: 600; letter-spacing: 2px; color: #c5bfb6; }
.zr-post__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.zr-page .zr-post__meta { font-size: 13px; color: #888; }
.zr-post__cat { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--zr-accent); }
.zr-page .zr-post__title {
  margin: 8px 0 10px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.3px; color: var(--zr-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.zr-page .zr-post__title a:hover { color: var(--zr-accent); }
.zr-page .zr-post__excerpt {
  margin-bottom: 16px; font-size: 15px; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.zr-page .zr-post__more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--zr-ink); }
.zr-page .zr-post__more:hover { color: var(--zr-accent); }

.zr-post--featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-bottom: 24px; }
.zr-post--featured .zr-post__media { aspect-ratio: auto; min-height: 380px; }
.zr-post--featured .zr-post__body { justify-content: center; padding: 40px 44px; }
.zr-page .zr-post--featured .zr-post__title { font-size: 30px; line-height: 1.25; letter-spacing: -.8px; }
.zr-page .zr-post--featured .zr-post__excerpt { font-size: 16px; -webkit-line-clamp: 4; }
.zr-page .zr-post--featured .zr-post__more { margin-top: 8px; }

/* Article */
.zr-article__head { max-width: 860px; margin: 0 auto; text-align: center; }
.zr-page .zr-article__title { margin: 6px 0 14px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.2; font-weight: 600; letter-spacing: -1.2px; color: var(--zr-ink); }
.zr-page .zr-article__meta { font-size: 15px; color: #6b665f; }
/* With a cover image, the paper band extends and the image overlaps it. */
.zr-blog-hero--article:has(+ .zr-article.has-cover) { padding-bottom: 130px; }
.zr-article.has-cover .zr-article__cover { margin-top: -100px; position: relative; }
.zr-article__cover { max-width: 1040px; }
.zr-page .zr-article__cover img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 6px; background: #ddd8d0; }
.zr-article__wrap { max-width: 800px; padding: 32px 0 8px; }
.zr-prose--article { padding: 40px 48px; font-size: 17px; line-height: 1.85; }
.zr-page .zr-prose--article h2 { font-size: 26px; margin: 34px 0 12px; }
.zr-page .zr-prose--article h3 { font-size: 21px; margin: 28px 0 10px; }
.zr-page .zr-prose--article > :first-child { margin-top: 0; }
.zr-page .zr-prose--article blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--zr-accent); font-style: italic; color: var(--zr-ink); }
.zr-page .zr-prose--article .highlight { font-size: 1.125rem; font-weight: 600; }
.zr-page .zr-prose--article a:hover { color: var(--zr-accent-dark); }
/* Markup produced by the Lexical renderer in TemplateBlogDetail.tsx */
.zr-page .zr-prose--article .dynamic-post-table-wrap { width: 100%; margin: 20px 0; overflow-x: auto; }
.zr-page .zr-prose--article .dynamic-post-table { width: 100%; border-collapse: collapse; }
.zr-page .zr-prose--article .dynamic-post-table :is(th, td) { padding: 10px 12px; border: 1px solid var(--zr-line); vertical-align: top; }
.zr-page .zr-prose--article .dynamic-post-table th { background: #f7f6f4; color: var(--zr-ink); }
.zr-page .zr-prose--article .dynamic-post-media { margin: 24px 0; text-align: center; }
.zr-page .zr-prose--article .dynamic-post-media img { display: inline-block; max-width: 100%; height: auto; border-radius: 4px; }
/* After the element rules above so an opening image/table doesn't add space inside the card. */
.zr-page .zr-prose--article > :first-child { margin-top: 0; }
.zr-page .zr-prose--article > :last-child { margin-bottom: 0; }
.zr-article__footer { display: flex; justify-content: space-between; margin-top: 20px; }
.zr-page .zr-article__footer .zr-link:hover { color: var(--zr-accent); }

@media (max-width: 1050px) {
  .zr-blog-hero__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .zr-search-form { width: 100%; }
  .zr-posts { grid-template-columns: 1fr 1fr; gap: 18px; }
  .zr-post--featured { grid-template-columns: 1fr; }
  .zr-post--featured .zr-post__media { aspect-ratio: 16 / 9; min-height: 0; }
  .zr-post--featured .zr-post__body { padding: 26px 28px 28px; }
}
@media (max-width: 760px) {
  .zr-blog-hero { padding: 18px 0 26px; }
  .zr-page .zr-blog-hero .woocommerce-breadcrumb { margin-bottom: 16px; font-size: 13px; }
  .zr-page .zr-blog-hero__title { font-size: 30px; letter-spacing: -.8px; }
  .zr-page .zr-blog-hero__desc { font-size: 15px; }
  .zr-posts { grid-template-columns: 1fr; gap: 16px; }
  .zr-post__body,
  .zr-post--featured .zr-post__body { padding: 18px 18px 20px; }
  .zr-page .zr-post--featured .zr-post__title { font-size: 24px; }
  .zr-page .zr-article__title { font-size: 28px; letter-spacing: -.6px; }
  .zr-blog-hero--article:has(+ .zr-article.has-cover) { padding-bottom: 70px; }
  .zr-article.has-cover .zr-article__cover { margin-top: -50px; }
  .zr-page .zr-article__cover img { aspect-ratio: 16 / 10; }
  .zr-article__wrap { padding-top: 20px; }
  .zr-prose--article { padding: 24px 20px; font-size: 16px; line-height: 1.8; }
  .zr-page .zr-prose--article h2 { font-size: 22px; }
  .zr-page .zr-prose--article h3 { font-size: 19px; }
}

/* =====================================================================
 * Partner dashboard (/dashboard/*) — DashboardShell.tsx + components/dashboard/*
 * Skins the existing Dokan markup (custom.css) without changing the hooks custom.js uses.
 * Status / tier colours set inline by the sections are kept on purpose.
 * ===================================================================== */
.zr-dash-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--zr-paper); padding: 22px 0 30px; }
.zr-dash-hero::before {
  content: ''; position: absolute; z-index: -1; width: 300px; height: 300px;
  border: 34px solid #cbd0d2; border-radius: 50%; top: -210px; right: 10%;
}
.zr-page .zr-dash-hero .woocommerce-breadcrumb { margin: 0 0 20px; padding: 0; background: none; font-size: 14px; color: #777; overflow-x: auto; scrollbar-width: none; }
.zr-page .zr-dash-hero .woocommerce-breadcrumb span.delimiter + a { padding: 0; border-radius: 0; background: none; }
.zr-page .zr-dash-hero .woocommerce-breadcrumb .delimiter { margin: 0 8px; color: #aaa; }
.zr-page .zr-dash-hero .woocommerce-breadcrumb a:hover { color: var(--zr-accent); }
.zr-dash-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zr-dash-hero__id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.zr-dash-hero__avatar {
  display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: var(--zr-accent); color: #fff; font-size: 26px; font-weight: 600;
}
.zr-dash-hero .zr-eyebrow { margin-bottom: 4px; }
.zr-page .zr-dash-hero__title { margin: 0 0 6px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; font-weight: 600; letter-spacing: -.8px; color: var(--zr-ink); }
.zr-page .zr-dash-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14.5px; color: #5e5c59; }
.zr-dash-hero__tier {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 40px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--tier, #a63235) 35%, transparent);
  color: var(--tier, #a63235); font-weight: 600; font-size: 13px;
}
.zr-dash-hero__tier::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.zr-dash-hero__actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.zr-page .zr-dash-hero__actions .zr-link:hover { color: var(--zr-accent); }

.zr-dash__body { padding: 28px 0 56px; }
.zr-dash .dokan-dashboard .dokan-dashboard-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

/* Sidebar: white card menu (was a dark panel) */
.zr-dash .dokan-dashboard .dokan-dash-sidebar {
  position: sticky; top: 20px; min-width: 0; width: auto; padding: 12px; min-height: 0;
  background: #fff; border-radius: 6px;
}
.zr-dash #dokan-navigation .menu-group-title { margin: 14px 0 4px; padding: 0 10px; }
.zr-dash #dokan-navigation .menu-group-title:first-child { margin-top: 4px; }
.zr-dash #dokan-navigation .menu-group-title span {
  padding: 4px 0; border-radius: 0; background: none; color: #999;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px;
}
.zr-dash #dokan-navigation .menu-group-title span::after { right: 0; color: #bbb; }
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li,
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover,
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active { background: transparent; }
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a {
  position: relative; gap: 12px; padding: 11px 14px; margin: 2px 0; border-radius: 4px;
  color: var(--zr-ink); font-size: 15px; font-weight: 500;
}
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a i { width: 18px; text-align: center; color: #9a948c; }
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a:hover { background: var(--zr-bg); color: var(--zr-accent); }
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a { background: var(--zr-accent-soft); color: var(--zr-accent); font-weight: 600; }
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a i { color: var(--zr-accent); }
.zr-dash .dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--zr-accent); }
.zr-dash .sidebar-logout-fixed { margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--zr-line); }
.zr-page.zr-dash .sidebar-logout-btn { padding: 10px 14px; border-radius: 4px; color: #777 !important; font-size: 14.5px; }
.zr-page.zr-dash .sidebar-logout-btn:hover { background: var(--zr-bg); color: var(--zr-accent) !important; }
.zr-dash #dokan-navigation #mobile-menu-icon { display: none; }

/* Content: each tab is one white panel */
.zr-dash .dokan-dashboard .dokan-dashboard-content { padding: 0 !important; margin: 0; min-width: 0; }
.zr-dash .dokan-dashboard-content > [data-dashboard-section] { padding: 28px 32px 32px; background: #fff; border-radius: 6px; }
.zr-dash .dokan-dashboard-content > [data-dashboard-section]:empty { display: none; }
.zr-dash .dokan-dashboard-content .dokan-dashboard-content { margin-top: 0 !important; }
.zr-dash .dashboard-content-area, .zr-dash .dashboard-widget, .zr-dash .widget-content { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* Headings */
.zr-page.zr-dash :is(.dashboard-widget > .widget-title, .entry-title, .kyc-page-header h1, .kyc-page-header h2, .addr-header h2, .addr-header h3) {
  margin: 0 0 20px; padding: 0; border: 0; text-align: left;
  font-family: inherit; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; color: var(--zr-ink);
}
.zr-page.zr-dash .debt-section-block > .widget-title,
.zr-page.zr-dash .edit-account-wrap h2,
.zr-page.zr-dash .edit-account-wrap h3 {
  margin: 0 0 14px; padding: 0; border: 0; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: var(--zr-ink);
}
.zr-dash .debt-section-block { margin-top: 32px; }
.zr-page.zr-dash .widget-title::after, .zr-page.zr-dash .entry-title::after { display: none; }

/* Stat tiles */
.zr-dash .aff-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.zr-dash .aff-stat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; margin: 0;
  background: var(--zr-bg); border: 1px solid var(--zr-line); border-radius: 6px; box-shadow: none;
}
.zr-dash .aff-stat-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 16px; }
.zr-dash .aff-stat-body { min-width: 0; }
.zr-page.zr-dash .aff-stat-title { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #888; }
.zr-page.zr-dash .aff-stat-value { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--zr-ink); overflow-wrap: break-word; }
.zr-page.zr-dash .aff-stat-desc { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #777; }

.zr-dash .aff-chart-card { margin-top: 18px !important; border: 1px solid var(--zr-line); border-radius: 6px; background: #fff; box-shadow: none; overflow: hidden; }
.zr-page.zr-dash .aff-chart-header { padding: 16px 20px; border-bottom: 1px solid var(--zr-line); background: none; font-size: 15px; font-weight: 600; color: var(--zr-ink); }
.zr-dash .aff-chart-header i { color: var(--zr-accent); margin-right: 6px; }
.zr-dash .aff-chart-body { padding: 16px 20px 20px; }

.zr-dash .debt-summary-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; background: none; border: 0; }
.zr-dash .debt-summary-item { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 40px; background: var(--zr-bg); border: 1px solid var(--zr-line); font-size: 14px; }
.zr-page.zr-dash .debt-summary-label { color: #666; }
.zr-page.zr-dash .debt-summary-val { font-weight: 700; color: var(--zr-ink); }

/* Tables: light header, readable rows, scroll instead of clipping */
.zr-dash :is(.table-responsive, .wholesale-debt-open-table-wrap, .wholesale-debt-table-wrap, #dashboard-orders-table-wrap) { overflow-x: auto; border: 1px solid var(--zr-line); border-radius: 6px; }
.zr-dash .dokan-dashboard-content table { width: 100%; margin: 0; border-collapse: collapse; border: 0; background: #fff; font-size: 14.5px; }
.zr-dash .dokan-dashboard-content table thead th {
  padding: 12px 14px; background: #f7f6f4; border: 0; border-bottom: 1px solid var(--zr-line);
  font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #777; white-space: nowrap;
}
.zr-dash .dokan-dashboard-content table tbody td { padding: 14px; border: 0; border-bottom: 1px solid var(--zr-line); color: var(--zr-ink); vertical-align: middle; }
.zr-dash .dokan-dashboard-content table tbody tr:last-child td { border-bottom: 0; }
.zr-dash .dokan-dashboard-content table tbody tr:hover td { background: #fbfaf8; }
.zr-dash .dokan-dashboard-content table tbody tr.debt-row--overdue td { background: var(--zp-primary-tint, #fdf6f5); }

/* Badges: consistent pill shape, keep their status colours */
.zr-page.zr-dash :is(.debt-badge, .kyc-status-chip, .addr-card__badge, .dashboard-address-default-badge) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 40px;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}

/* Orders: status filter as chips, filter row aligned */
.zr-dash .order-statuses-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.zr-dash .order-statuses-filter li { margin: 0; padding: 0; }
.zr-dash .order-statuses-filter li::after, .zr-dash .order-statuses-filter li::before { display: none !important; content: none !important; }
.zr-page.zr-dash .order-statuses-filter li a {
  display: inline-block; padding: 7px 16px; border-radius: 40px; background: #fff; border: 1px solid var(--zr-line);
  font-size: 14px; font-weight: 500; color: var(--zr-ink); text-decoration: none;
}
.zr-page.zr-dash .order-statuses-filter li a:hover { border-color: var(--zr-accent); color: var(--zr-accent); }
.zr-page.zr-dash .order-statuses-filter li.active a { background: var(--zr-accent); border-color: var(--zr-accent); color: #fff; }
.zr-dash .dokan-order-filter-serach { margin-bottom: 18px; }
.zr-dash .dokan-filter-search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Forms */
.zr-dash :is(input.input-text, input.dokan-form-control, select.dokan-form-control, .dokan-dashboard-content select, .dokan-dashboard-content textarea, .dokan-dashboard-content input[type="text"], .dokan-dashboard-content input[type="email"], .dokan-dashboard-content input[type="tel"], .dokan-dashboard-content input[type="date"], .dokan-dashboard-content input[type="password"]) {
  border: 1px solid #ddd; background-color: #fff; color: var(--zr-ink); box-shadow: none;
}
.zr-dash :is(input, select, textarea):focus { outline: none; border-color: var(--zr-accent) !important; box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15) !important; }
.zr-dash :is(input, select, textarea)[readonly], .zr-dash :is(input, select, textarea):disabled { background-color: #f4f3f1 !important; color: #777; }
.zr-page.zr-dash .form-row label, .zr-page.zr-dash .dokan-form-group label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--zr-ink); }
.zr-page.zr-dash .dokan-dashboard-content .form-row { margin: 0 0 16px; }
.zr-dash .dokan-dashboard-content :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="date"], input[type="search"], input[type="number"], input[type="url"], select) {
  min-height: 46px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; line-height: 1.4;
}
/* "Đổi mật khẩu" is a fieldset legend (AccountSection.tsx), styled like the sub-headings */
.zr-dash .dokan-dashboard-content fieldset { margin: 36px 0 0; padding: 32px 0 0; border: 0; border-top: 1px solid var(--zr-line); }
.zr-page.zr-dash .dokan-dashboard-content legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; border: 0; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: var(--zr-ink); }
.zr-page.zr-dash .dokan-dashboard-content legend::after { display: none; }
.zr-page.zr-dash .dokan-dashboard-content legend + * { clear: both; }

/* Buttons */
.zr-page.zr-dash .dokan-btn { border-radius: 40px; font-weight: 600; }
.zr-page.zr-dash .dokan-btn:not(.dokan-btn-theme) { background-color: #fff !important; border: 1px solid var(--zr-line-strong) !important; color: var(--zr-ink) !important; }
.zr-page.zr-dash .dokan-btn:not(.dokan-btn-theme):hover { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
.zr-page.zr-dash .dokan-btn-theme { background-color: var(--zr-accent) !important; border-color: var(--zr-accent) !important; color: #fff !important; }
.zr-page.zr-dash .dokan-btn-theme:hover { background-color: var(--zr-accent-dark) !important; border-color: var(--zr-accent-dark) !important; }

/* Sub-cards inside a panel: quiet border instead of heavy shadows */
.zr-dash :is(.kyc-section, .addr-card, .dashboard-address-card) { border: 1px solid var(--zr-line) !important; border-radius: 6px !important; box-shadow: none !important; background: #fff; }
.zr-dash .at-card { border-radius: 6px !important; box-shadow: none !important; }
.zr-dash .at-wrap { margin-bottom: 28px; }

/* In-page pagination (tables) */
.zr-dash .dash-pagination { margin-top: 14px; }

@media (max-width: 1050px) {
  .zr-dash .dokan-dashboard .dokan-dashboard-wrap { grid-template-columns: 1fr; gap: 16px; }
  .zr-dash .dokan-dashboard .dokan-dash-sidebar { position: static; padding: 8px; }
  /* custom.js shows/hides the menu below 992px via this toggle */
  .zr-dash #dokan-navigation #mobile-menu-icon {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--zr-ink); background: none; border: 0; border-radius: 4px;
  }
  .zr-dash #dokan-navigation #mobile-menu-icon::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
  .zr-dash #dokan-navigation #mobile-menu-icon[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
}
@media (max-width: 760px) {
  .zr-dash-hero { padding: 18px 0 24px; }
  .zr-dash-hero__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .zr-dash-hero__avatar { width: 52px; height: 52px; font-size: 22px; }
  .zr-page .zr-dash-hero__title { font-size: 24px; }
  .zr-dash__body { padding: 16px 0 40px; }
  .zr-dash .dokan-dashboard-content > [data-dashboard-section] { padding: 20px 16px 24px; }
  .zr-page.zr-dash :is(.dashboard-widget > .widget-title, .entry-title, .kyc-page-header h1, .kyc-page-header h2, .addr-header h2, .addr-header h3) { font-size: 21px; }
  .zr-page.zr-dash .aff-stat-value { font-size: 19px; }
}

/* =====================================================================
 * Cart / checkout / order received — TemplateCart.tsx, TemplateCheckout.tsx, TemplateOrderReceived.tsx
 * Markup inside the forms keeps the classes product-add-to-cart.js, voucher-picker.js and checkout.js use.
 * ===================================================================== */
.zr-commerce-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--zr-paper); padding: 22px 0 30px; }
.zr-commerce-hero::before {
  content: ''; position: absolute; z-index: -1; width: 300px; height: 300px;
  border: 34px solid #cbd0d2; border-radius: 50%; top: -210px; right: 10%;
}
.zr-page .zr-commerce-hero .woocommerce-breadcrumb { margin: 0 0 20px; padding: 0; background: none; font-size: 14px; color: #777; overflow-x: auto; scrollbar-width: none; }
.zr-page .zr-commerce-hero .woocommerce-breadcrumb span.delimiter + a { padding: 0; border-radius: 0; background: none; }
.zr-page .zr-commerce-hero .woocommerce-breadcrumb .delimiter { margin: 0 8px; color: #aaa; }
.zr-page .zr-commerce-hero .woocommerce-breadcrumb a:hover { color: var(--zr-accent); }
.zr-commerce-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.zr-commerce-hero__text { display: flex; align-items: center; gap: 16px; min-width: 0; }
.zr-commerce-hero__status { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; color: #fff; }
.zr-commerce-hero__status--success { background: #2f7d4f; }
.zr-commerce-hero__status--error { background: var(--zr-accent); }
.zr-page .zr-commerce-hero__title { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 600; letter-spacing: -1px; color: var(--zr-ink); }
.zr-page .zr-commerce-hero__sub { margin-top: 6px; font-size: 15.5px; color: #5e5c59; }
.zr-commerce-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; }
.zr-page .zr-commerce-hero__actions .order-received-action-cancel { background-color: #fff !important; border: 1px solid var(--zr-line-strong) !important; color: var(--zr-ink) !important; border-radius: 40px; padding: 8px 16px; font-weight: 600; }
.zr-page .zr-commerce-hero__actions .order-received-action-cancel:hover { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }

/* Step indicator: Giỏ hàng → Thanh toán → Hoàn tất */
.zr-steps-bar { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.zr-steps-bar__item { display: flex; align-items: center; margin: 0; font-size: 14px; font-weight: 600; color: #9a948c; white-space: nowrap; }
.zr-steps-bar__item + .zr-steps-bar__item::before { content: ''; width: 36px; height: 2px; margin: 0 10px; background: var(--zr-line-strong); border-radius: 2px; }
.zr-steps-bar__item.is-done + .zr-steps-bar__item::before { background: var(--zr-accent); }
.zr-steps-bar__item > :is(a, span) { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.zr-steps-bar__dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; background: #fff; border: 1.5px solid var(--zr-line-strong); color: #9a948c; }
.zr-steps-bar__item.is-current { color: var(--zr-ink); }
.zr-steps-bar__item.is-current .zr-steps-bar__dot { background: var(--zr-accent); border-color: var(--zr-accent); color: #fff; }
.zr-steps-bar__item.is-done { color: var(--zr-ink); }
.zr-steps-bar__item.is-done .zr-steps-bar__dot { background: var(--zr-accent-soft); border-color: var(--zr-accent-soft); color: var(--zr-accent); }
.zr-page .zr-steps-bar__item a:hover { color: var(--zr-accent); }

.zr-commerce__body { padding: 28px 0 56px; }

/* Empty / not-found state */
.zr-commerce-empty { max-width: 640px; margin: 0 auto; padding: 56px 32px; text-align: center; background: #fff; border-radius: 6px; }
.zr-commerce-empty__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 26px; }
.zr-page .zr-commerce-empty h2 { font-size: 24px; }
.zr-page .zr-commerce-empty p { margin: 10px 0 24px; }
.zr-commerce-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }

/* Shared: totals and cards */
.zr-commerce .shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
.zr-page.zr-commerce .shop_table :is(th, td) { padding: 12px 0; border: 0; border-bottom: 1px solid var(--zr-line); background: none; font-size: 15px; color: var(--zr-ink); vertical-align: middle; }
.zr-page.zr-commerce .shop_table tr.order-total :is(th, td) { border-bottom: 0; padding-top: 16px; font-size: 17px; font-weight: 700; }
.zr-page.zr-commerce .shop_table tr.order-total td .amount { font-size: 22px; color: var(--zr-accent); }
.zr-page.zr-commerce .shop_table ul.woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; }

/* Cart */
.zr-cart__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.zr-cart__items { min-width: 0; padding: 8px 24px 20px; background: #fff; border-radius: 6px; }
.zr-page.zr-commerce .zr-cart__items .shop_table thead th {
  padding: 14px 8px; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #888;
}
.zr-page.zr-commerce .zr-cart__items .shop_table tbody td { padding: 18px 8px; }
.zr-cart__items .product-thumbnail { width: 96px; }
.zr-page .zr-cart__items .product-thumbnail img { width: 80px; height: 80px; object-fit: contain; padding: 6px; background: #f5f5f5; border-radius: 4px; border: 0; mix-blend-mode: multiply; }
.zr-page.zr-commerce .zr-cart__items .product-name a { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--zr-ink); }
.zr-page.zr-commerce .zr-cart__items .product-name a:hover { color: var(--zr-accent); }
.zr-cart__moq { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #888; }
.zr-page.zr-commerce .zr-cart__items .product-price { color: #666; }
.zr-page.zr-commerce .zr-cart__items .product-subtotal { font-weight: 700; }
.zr-cart__items .product-quantity .quantity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.zr-page .zr-cart__items .zr-qty input.qty { width: 52px; min-height: 40px; padding: 0; text-align: center; }
.zr-cart__items .product-quantity { width: 150px; }
.zr-page .zr-cart__items .zr-qty .zr-qty__btn { height: 40px; width: 36px; }
.zr-page.zr-commerce .zr-cart__items [data-moq-warning] { font-size: 12.5px; color: var(--zr-accent) !important; }
.zr-page.zr-commerce .zr-cart__items .product-remove a.remove {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; color: #999 !important; font-size: 20px; line-height: 1; text-decoration: none;
}
.zr-page.zr-commerce .zr-cart__items .product-remove a.remove:hover { background: var(--zr-accent-soft); color: var(--zr-accent) !important; }
.zr-page .zr-cart__continue { display: inline-block; margin-top: 16px; }
.zr-page .zr-cart__continue:hover { color: var(--zr-accent); }

.zr-cart__summary { position: sticky; top: 20px; padding: 24px; background: #fff; border-radius: 6px; }
.zr-page .zr-cart__summary-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.zr-page.zr-commerce .zr-totals th { font-weight: 500; color: #555; }
.zr-page.zr-commerce .zr-totals td { text-align: right; }
.zr-cart__voucher { margin: 18px 0; }
.zr-cart__actions { display: grid; gap: 10px; }
.zr-page.zr-commerce .zr-cart__actions .checkout-button {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 15px 20px; border-radius: 40px;
  font-size: 16px; font-weight: 600; text-decoration: none; background-color: var(--zr-accent) !important; border: 0 !important; color: #fff !important;
}
.zr-page.zr-commerce .zr-cart__actions .checkout-button:hover { background-color: var(--zr-accent-dark) !important; }
.zr-page.zr-commerce .zr-cart__actions .checkout-button::after { display: none; } /* theme adds a second arrow icon */
.zr-page.zr-commerce .zr-cart__actions .checkout-button.disabled { opacity: .45; pointer-events: none; }
.zr-page.zr-commerce .zr-cart__actions .updatecart-button {
  width: 100%; padding: 12px 20px; border-radius: 40px; font-size: 15px; font-weight: 600;
  background-color: #fff !important; border: 1px solid var(--zr-line-strong) !important; color: var(--zr-ink) !important;
}
.zr-page.zr-commerce .zr-cart__actions .updatecart-button:hover:not(:disabled) { border-color: var(--zr-accent) !important; color: var(--zr-accent) !important; }
.zr-page.zr-commerce .zr-cart__actions .updatecart-button:disabled { opacity: .5; cursor: default; }
.zr-page .zr-cart__note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: #888; }

/* Checkout */
.zr-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
/* Electro turns form.checkout into a flex row with %-width columns; take it back. */
.zr-page.zr-commerce form.checkout.zr-checkout__grid { display: grid; margin: 0; }
.zr-page.zr-commerce form.checkout.zr-checkout__grid :is(#customer_details, .order-review-wrapper, #order_review) { width: 100%; max-width: none; flex: none; float: none; margin-left: 0; margin-right: 0; }
.zr-checkout__main { min-width: 0; padding: 28px 32px 32px; background: #fff; border-radius: 6px; }
.zr-checkout__aside { position: sticky; top: 20px; min-width: 0; }
.zr-commerce .col2-set, .zr-commerce .col2-set > .col-1, .zr-commerce .col2-set > .col-2 { display: block; width: 100%; max-width: none; float: none; margin: 0; padding: 0; }
.zr-commerce .col2-set > .col-2 { margin-top: 12px; }
.zr-page.zr-commerce .woocommerce-billing-fields > h3,
.zr-page.zr-commerce #order_review_heading_v2 {
  margin: 0 0 18px; padding: 0; border: 0; font-family: inherit; font-size: 20px; font-weight: 600; letter-spacing: -.3px; color: var(--zr-ink);
}
.zr-page.zr-commerce :is(.woocommerce-billing-fields > h3, #order_review_heading_v2, #ship-to-different-address)::after { display: none; }
.zr-commerce .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.zr-commerce .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
.zr-page.zr-commerce .form-row { width: auto; float: none; margin: 0 0 16px; padding: 0; }
.zr-page.zr-commerce .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--zr-ink); }
.zr-page.zr-commerce .form-row label .optional { font-weight: 400; color: #888; }
.zr-commerce .form-row :is(input.input-text, textarea) { width: 100%; border: 1px solid #ddd; background: #fff; color: var(--zr-ink); box-shadow: none; font-size: 15px; }
.zr-commerce .form-row input.input-text { min-height: 46px; }
.zr-commerce :is(input, textarea, select):focus { outline: none; border-color: var(--zr-accent) !important; box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15) !important; }
.zr-page.zr-commerce #ship-to-different-address { margin: 4px 0 16px; padding: 14px 16px; border: 1px dashed var(--zr-line-strong); border-radius: 6px; font-size: 15px; font-weight: 600; }
.zr-page.zr-commerce #ship-to-different-address:empty { display: none; }
.zr-page.zr-commerce #ship-to-different-address label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }

.zr-page.zr-commerce .order-review-wrapper { padding: 24px; background: #fff; border-radius: 6px; }
/*
 * style.css lays this table out as a block with flex rows (label left, value right) and stacks the
 * shipping row. Use that one model for every row, with the divider on the row so it runs full width.
 */
.zr-page.zr-commerce .woocommerce-checkout-review-order-table :is(thead, tbody, tfoot) { display: block; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; /* not baseline: price spans sit 8px off */
  padding: 12px 0; border-bottom: 1px solid var(--zr-line);
}
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr :is(th, td) { display: block; flex: 0 0 auto; max-width: none; padding: 0; border: 0; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr > :first-child { flex: 1 1 auto; min-width: 0; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr > :last-child { white-space: nowrap; text-align: right; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr :is(th, td)::before { display: none; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table thead tr { padding-top: 0; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr.order-total { padding: 16px 0 0; border-bottom: 0; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tr.order-total :is(th, td) { padding: 0; } /* the shared .shop_table total rule pads cells too */
.zr-commerce #order_review { margin: 0; padding: 0; background: none; border: 0; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table thead th { padding-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #888; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table th:last-child,
.zr-page.zr-commerce .woocommerce-checkout-review-order-table td:last-child { text-align: right; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tbody .product-name { font-size: 14.5px; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tbody .product-quantity { color: #888; font-weight: 600; }
.zr-page.zr-commerce .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: #555; }

/* One rhythm below the table: 20px between blocks (total, payment methods, terms, button), 16px inside a card. */
.zr-page.zr-commerce #payment { display: grid; gap: 20px; margin-top: 20px; padding: 0; background: none; border: 0; border-radius: 0; }
.zr-page.zr-commerce #payment ul.payment_methods { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; list-style: none; }
.zr-page.zr-commerce #payment ul.payment_methods li.wc_payment_method { position: relative; margin: 0; padding: 16px !important; /* style.css: 1.387em !important */ border: 1px solid var(--zr-line); border-radius: 6px; background: #fff; transition: border-color .15s, background .15s; }
.zr-page.zr-commerce #payment ul.payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--zr-accent); background: var(--zp-primary-tint, #fdf6f5); }
.zr-page.zr-commerce #payment li.wc_payment_method > label { display: inline; margin: 0 0 0 6px; font-size: 15px; font-weight: 600; color: var(--zr-ink); cursor: pointer; }
.zr-commerce #payment input[type="radio"] { accent-color: var(--zr-accent); }
.zr-page.zr-commerce #payment .payment_box { margin: 8px 0 0; padding: 0; border: 0; background: none; font-size: 14px; color: #555; }
.zr-page.zr-commerce #payment .payment_box::before { display: none; }
.zr-page.zr-commerce #payment .payment_box p { margin: 0; }
.zr-page.zr-commerce #payment .place-order { display: grid; gap: 20px; margin: 0; padding: 0; }
.zr-page.zr-commerce #payment .place-order label { display: flex; margin: 0; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.zr-page.zr-commerce #payment .place-order .form-row { display: flex; align-items: flex-start; gap: 2px; margin: 0; }
.zr-page.zr-commerce #payment .place-order label input { flex: none; margin: 3px 0 0; accent-color: var(--zr-accent); }
.zr-page.zr-commerce #payment .place-order label a { color: var(--zr-accent); text-decoration: underline; }
.zr-page.zr-commerce #place_order {
  width: 100%; margin: 0; padding: 15px 20px; border-radius: 40px; font-size: 16px; font-weight: 600;
  background-color: var(--zr-accent) !important; border: 0 !important; color: #fff !important;
}
.zr-page.zr-commerce #place_order:hover:not(:disabled) { background-color: var(--zr-accent-dark) !important; }
.zr-page.zr-commerce #place_order:disabled { opacity: .45; cursor: not-allowed; }
.zr-page.zr-commerce .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 18px; padding: 14px 18px; border: 0; border-radius: 6px; background: #fff; }

/* Order received */
.zr-page.zr-commerce.order-received-page { padding-top: 0; margin-top: 0; }
.zr-received > .woocommerce-order { display: grid; gap: 20px; }
.zr-received__notice { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 6px; background: #fff; border-left: 3px solid var(--zr-accent); }
.zr-received__notice i { margin-top: 3px; color: var(--zr-accent); font-size: 18px; }
.zr-page .zr-received__notice p { font-size: 15px; color: var(--zr-ink); }
.zr-page.zr-commerce .order-summary-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin: 0; background: #fff; border: 0; border-radius: 6px; }
.zr-page.zr-commerce .order-summary-card__item { padding: 18px 20px; border-color: var(--zr-line); }
.zr-page.zr-commerce .order-section { margin: 0; }
.zr-page.zr-commerce .order-section__title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.zr-page.zr-commerce .order-section__title-icon { color: var(--zr-accent); }
.zr-page.zr-commerce .order-section__body { overflow: hidden; background: #fff; border: 0; border-radius: 6px; }
.zr-page.zr-commerce .order-table thead th { padding: 14px 20px; background: #f7f6f4; border-bottom: 1px solid var(--zr-line); font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #888; }
.zr-page.zr-commerce .order-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--zr-line); font-size: 15px; }
.zr-page.zr-commerce .order-table__product-link { font-weight: 600; color: var(--zr-ink); }
.zr-page.zr-commerce .order-table__product-link:hover { color: var(--zr-accent); }
.zr-page.zr-commerce .order-totals { padding: 16px 20px 20px; background: none; }
.zr-page.zr-commerce .order-totals__row--grand { font-size: 17px; font-weight: 700; }
.zr-page.zr-commerce .order-totals__row--grand .amount { color: var(--zr-accent); font-size: 20px; }
.zr-page.zr-commerce .order-address-card { padding: 20px 22px; background: #fff; border: 0; border-radius: 6px; }
.zr-page.zr-commerce .order-address-card__title { font-size: 16px; font-weight: 600; }
.zr-page.zr-commerce .order-address-card__title-icon { color: var(--zr-accent); }
.zr-received__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.zr-page .zr-received__actions .zr-link:hover { color: var(--zr-accent); }

@media (max-width: 1100px) {
  .zr-cart__grid, .zr-checkout__grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  .zr-cart__grid, .zr-checkout__grid { grid-template-columns: 1fr; }
  .zr-cart__summary, .zr-checkout__aside { position: static; }
  .zr-commerce-hero__row { flex-direction: column; align-items: flex-start; }
  .zr-commerce-hero__side { align-items: flex-start; }
  .zr-page.zr-commerce .order-summary-card { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .zr-commerce-hero { padding: 18px 0 24px; }
  .zr-page .zr-commerce-hero__title { font-size: 26px; letter-spacing: -.6px; }
  .zr-commerce-hero__status { width: 46px; height: 46px; font-size: 18px; }
  .zr-steps-bar__item { font-size: 13px; }
  .zr-steps-bar__item + .zr-steps-bar__item::before { width: 18px; margin: 0 6px; }
  .zr-commerce__body { padding: 16px 0 40px; }
  .zr-cart__items { padding: 4px 14px 16px; }
  .zr-cart__summary, .zr-commerce .order-review-wrapper { padding: 20px 16px; }
  .zr-checkout__main { padding: 20px 16px 24px; }
  .zr-commerce .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  /* Cart rows stack (shop_table_responsive): image + name on top, the rest as label/value lines */
  .zr-cart__items .shop_table thead { display: none; }
  .zr-cart__items .shop_table tbody tr.cart_item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--zr-line); }
  .zr-page.zr-commerce .zr-cart__items .shop_table tbody tr.cart_item td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border: 0; text-align: left; }
  .zr-page.zr-commerce .zr-cart__items .shop_table tbody tr.cart_item td::before { display: none; }
  .zr-cart__items tr.cart_item .product-thumbnail { grid-row: 1 / span 4; width: auto; }
  /* Theme mobile tables crop thumbnails (64px, cover) and prefix values with ": " */
  .zr-page.zr-commerce .zr-cart__items tr.cart_item td.product-thumbnail img { width: 72px !important; height: 72px !important; object-fit: contain !important; }
  .zr-page.zr-commerce .zr-totals td::before { display: none !important; }
  .zr-page.zr-commerce .zr-totals td { text-align: right; }
  .zr-cart__items tr.cart_item .product-name { grid-column: 2; display: block !important; }
  .zr-cart__items tr.cart_item .product-remove { grid-column: 3; grid-row: 1; }
  .zr-cart__items tr.cart_item :is(.product-price, .product-quantity, .product-subtotal) { grid-column: 2 / -1; }
  .zr-cart__items tr.cart_item :is(.product-price, .product-quantity, .product-subtotal)::before { content: attr(data-title) !important; display: block !important; font-size: 13px; font-weight: 500; color: #888; }
  .zr-page.zr-commerce .order-summary-card { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .zr-page * { transition: none !important; }
  .zr-page .zr-chips .zr-chip--extra { animation: none !important; }
}

/*
 * Voucher picker (cart). The trigger sits in the cart summary; voucher-picker.js moves #voucherModal under
 * <body>, outside .zr-page, so everything here is keyed on the ids and uses the global --zp-* tokens.
 * custom.css still holds the older modal skeleton (fixed positioning, backdrop); this restyles on top of it.
 */
#voucher-picker .vp-trigger {
  position: relative; display: flex !important; align-items: center; gap: 14px; width: 100%; margin: 0;
  padding: 14px 16px !important; background: #fff !important; border: 1px dashed var(--zp-line-strong) !important; border-radius: 6px !important;
  box-shadow: none !important; color: var(--zp-ink-strong) !important; font: inherit; line-height: 1.4; text-align: left; text-transform: none;
  transition: border-color .15s, background-color .15s;
}
#voucher-picker .vp-trigger:hover,
#voucher-picker .vp-trigger:focus-visible { border-color: var(--zp-primary) !important; background: var(--zp-primary-tint) !important; }
#voucher-picker .vp-trigger.is-applied { border-style: solid !important; border-color: var(--zp-primary) !important; background: var(--zp-primary-tint) !important; }
.vp-trigger__icon {
  position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 6px; background: var(--zp-primary-soft); color: var(--zp-primary); font-size: 17px;
}
.vp-trigger.is-applied .vp-trigger__icon { background: var(--zp-primary); color: #fff; }
#voucher-trigger-badge.voucher-trigger-badge { top: -7px !important; right: -7px !important; background-color: var(--zp-ink-strong) !important; }
#voucher-trigger-badge.d-none { display: none !important; } /* custom.css forces display:flex !important on the badge */
.vp-trigger__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.vp-trigger__title { font-size: 15px; font-weight: 600; color: var(--zp-ink-strong); }
.vp-trigger__sub { font-size: 13px; color: var(--zp-muted); }
.vp-trigger__chev { flex: none; font-size: 13px; color: #999; transition: transform .15s; }
.vp-trigger:hover .vp-trigger__chev { transform: translateX(2px); color: var(--zp-primary); }
.vp-save { font-weight: 600; color: #1f7a4d; }

/* Dialog */
#voucherModal { font-family: 'Cabin', 'Cabin Fallback', sans-serif; color: var(--zp-ink-strong); font-size: 15px; line-height: 1.5; }
#voucherModal :is(p, h5) { margin: 0; font-family: inherit; }
#voucherModal.modal .modal-dialog {
  max-width: 520px; margin: 24px auto; transform: translateY(16px);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
#voucherModal.modal.show .modal-dialog { transform: none; }
#voucherModal .modal-content { max-height: min(760px, calc(100vh - 48px)); border: 0; border-radius: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
#voucherModal .modal-header { align-items: flex-start; gap: 16px; padding: 24px 24px 18px; background: #fff; color: inherit; border-bottom: 1px solid var(--zp-line); }
.vp-head { min-width: 0; }
.vp-head__eyebrow { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--zp-primary); }
#voucherModal .modal-title { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.4px; color: var(--zp-ink-strong); }
#voucherModal .vp-head__sub { margin-top: 6px; font-size: 13.5px; color: var(--zp-muted); }
#voucherModal .voucher-modal-close {
  width: 36px !important; height: 36px !important; min-width: 36px !important; margin: -6px -8px 0 0 !important;
  color: var(--zp-ink) !important; opacity: 1; font-size: 18px !important;
}
#voucherModal .voucher-modal-close:hover,
#voucherModal .voucher-modal-close:focus-visible { background-color: var(--zp-surface-warm) !important; }
#voucherModal .voucher-modal-close:focus-visible { outline: 2px solid var(--zp-primary) !important; outline-offset: 2px; }
#voucherModal .modal-body { padding: 20px 24px 24px; background: var(--zp-surface); }

/* List */
#voucherModal .vp-list { display: grid; gap: 10px; }
#voucherModal .vp-section {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #888;
}
#voucherModal .vp-section:first-child { margin-top: 0; }
#voucherModal .vp-section__count { padding: 1px 7px; border-radius: 999px; background: var(--zp-surface-warm); font-size: 11px; letter-spacing: 0; color: #666; }

/* Ticket: stub | body | checkbox, with two notches on the perforation */
#voucherModal .vp-ticket {
  --vp-stub: 64px;
  position: relative; display: grid; grid-template-columns: var(--vp-stub) minmax(0, 1fr) auto; align-items: stretch;
  overflow: hidden; margin: 0; padding: 0; background: #fff; border: 1px solid var(--zp-line); border-radius: 8px;
  box-shadow: none; transform: none; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
#voucherModal .vp-ticket::before,
#voucherModal .vp-ticket::after {
  content: ''; position: absolute; left: calc(var(--vp-stub) - 7px); width: 14px; height: 14px;
  border: 1px solid; border-color: inherit; border-radius: 50%; background: var(--zp-surface);
}
#voucherModal .vp-ticket::before { top: -8px; }
#voucherModal .vp-ticket::after { bottom: -8px; }
#voucherModal .vp-ticket:hover:not(.disabled):not(.is-locked):not(.vp-skel) { border-color: var(--zp-primary); transform: none; box-shadow: none; background: #fff; }
#voucherModal .vp-ticket.selected { border-color: var(--zp-primary); background: #fff; box-shadow: 0 0 0 1px var(--zp-primary); }
.vp-ticket__stub {
  display: flex; align-items: center; justify-content: center; min-height: 100%;
  background: var(--zp-primary-soft); border-right: 1px dashed var(--zp-line-strong); color: var(--zp-primary); font-size: 20px;
  transition: background-color .15s, color .15s;
}
#voucherModal .vp-ticket.selected .vp-ticket__stub { background: var(--zp-primary); border-right-color: transparent; color: #fff; }
.vp-ticket__body { min-width: 0; padding: 14px 16px; }
#voucherModal .vp-ticket__title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--zp-ink-strong); overflow-wrap: anywhere; }
#voucherModal .vp-ticket__meta { margin-top: 2px; font-size: 13px; color: var(--zp-muted); }
.vp-ticket__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.vp-ticket__save { font-size: 13.5px; font-weight: 600; color: #1f7a4d; }
.vp-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; }
.vp-tag--stack { background: #e7f3ec; color: #1f7a4d; }
.vp-tag--single { background: #f8eedb; color: #85530a; }
#voucherModal .vp-ticket__hint { margin-top: 6px; font-size: 12.5px; color: #777; }
#voucherModal input.vp-ticket__check { align-self: center; width: 20px; height: 20px; margin: 0 16px 0 0; accent-color: var(--zp-primary); cursor: pointer; }
#voucherModal .vp-ticket.disabled { opacity: .55; background: #fff; }
#voucherModal .vp-list.is-applying .vp-ticket.disabled:not(.is-locked) { opacity: .8; cursor: progress; }
#voucherModal .vp-ticket.is-locked { background: #fbfaf8; cursor: default; }
#voucherModal .vp-ticket.is-locked .vp-ticket__stub { background: var(--zp-surface-warm); color: #a3a09b; }
#voucherModal .vp-ticket.is-locked .vp-ticket__title { color: #555; }
#voucherModal .vp-ticket__lock { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: #85530a; }
#voucherModal .vp-ticket__lock i { flex: none; font-size: 11px; }

/* Loading placeholders */
#voucherModal .vp-skel { cursor: default; }
#voucherModal .vp-skel .vp-ticket__stub { background: #f6f5f3; }
.vp-skel__icon { width: 24px; height: 24px; border-radius: 6px; }
.vp-skel__line { height: 14px; margin: 4px 0 10px; border-radius: 4px; }
.vp-skel__line--sub { height: 11px; margin-bottom: 4px; }
.vp-skel__line.w-40 { width: 40%; }
.vp-skel__line.w-50 { width: 50%; }
.vp-skel__line.w-60 { width: 60%; }
.vp-skel__line.w-75 { width: 75%; }

/* Empty / error / show more */
.vp-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; text-align: center; background: #fff; border: 1px dashed var(--zp-line-strong); border-radius: 8px; }
.vp-empty__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--zp-primary-soft); color: var(--zp-primary); font-size: 18px; }
#voucherModal .vp-empty p { font-size: 14px; color: var(--zp-muted); }
.vp-empty--error .vp-empty__icon { background: #fdecec; color: #b42318; }
.vp-more-wrap { text-align: center; }
#voucherModal .vp-more {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px !important;
  background: none !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important;
  color: var(--zp-primary) !important; font: inherit; font-size: 13.5px; font-weight: 600; text-transform: none;
}
#voucherModal .vp-more:hover { text-decoration: underline; text-underline-offset: 4px; }
#voucherModal .vp-more i { font-size: 11px; }
#voucherModal .vp-alert { margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: #fdecec; color: #9b1c1c; font-size: 13.5px; white-space: pre-line; }

/* Breakdown */
#voucherModal .vp-breakdown { margin-top: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--zp-line); border-radius: 8px; }
#voucherModal .vp-breakdown__title { margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #888; }
.vp-breakdown__line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 13.5px; color: var(--zp-text); }
.vp-breakdown__line > :last-child,
.vp-breakdown__total > :last-child { flex: none; white-space: nowrap; }
.vp-breakdown__total { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--zp-line); font-size: 15px; font-weight: 600; }
#voucher-total-discount { color: #1f7a4d; }

/* Footer */
#voucherModal .modal-footer { justify-content: space-between; gap: 16px; padding: 16px 24px; background: #fff; border-top: 1px solid var(--zp-line); }
#voucherModal .vp-foot__summary { min-width: 0; font-size: 14px; color: var(--zp-muted); }
#voucherModal .vp-done {
  flex: none; min-width: 140px; margin: 0; padding: 12px 28px !important; border: 0 !important; border-radius: 40px !important;
  background-color: var(--zp-primary) !important; box-shadow: none !important; color: #fff !important;
  font: inherit; font-size: 15px; font-weight: 600; text-transform: none; transition: background-color .15s;
}
#voucherModal .vp-done:hover { background-color: var(--zp-primary-dark) !important; }
#voucherModal .vp-done:focus-visible { outline: 3px solid rgba(var(--zp-primary-rgb), .35); outline-offset: 2px; }

/* Phones: bottom sheet */
@media (max-width: 575.98px) {
  #voucherModal.modal.show { align-items: flex-end; }
  #voucherModal.modal .modal-dialog { max-width: none; margin: 0; transform: translateY(40px); }
  #voucherModal.modal.show .modal-dialog { transform: none; }
  #voucherModal .modal-content { max-height: 88vh; border-radius: 16px 16px 0 0; }
  #voucherModal .modal-header { padding: 20px 16px 14px; }
  #voucherModal .modal-title { font-size: 20px; }
  #voucherModal .modal-body { padding: 16px; }
  #voucherModal .vp-ticket { --vp-stub: 52px; }
  .vp-ticket__stub { font-size: 17px; }
  .vp-ticket__body { padding: 12px 14px; }
  #voucherModal input.vp-ticket__check { margin-right: 14px; }
  #voucherModal .modal-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  #voucherModal .vp-done { min-width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  #voucherModal.modal .modal-dialog, #voucherModal .vp-ticket, .vp-trigger__chev { transition: none; }
}

/* =====================================================================
 * Contact / become a dealer (/lien-he) — TemplateContact.tsx, public/assets/js/dealer-form.js.
 * Sections are components/redesign/dealer/*; design from zippo-redesign/dai-ly.html.
 * ===================================================================== */
.zr-page.zr-dealer { background: #fff; }
.zr-page .zr-dealer__crumbs .woocommerce-breadcrumb { margin: 0; padding: 18px 0; color: #555; }

.zr-dealer-hero { position: relative; isolation: isolate; overflow: hidden; background: #231e1b; color: #fff; }
.zr-dealer-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(23, 19, 17, .72), transparent); }
.zr-dealer-hero::before {
  content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; right: 6%; top: -150px;
  border: 46px solid rgba(255, 255, 255, .06); border-radius: 50%;
}
.zr-dealer-hero__inner { padding: 62px 0 65px; }
.zr-page .zr-dealer-hero .zr-eyebrow { margin-bottom: 20px; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: #f0d0cc; }
.zr-page .zr-dealer-hero__title { max-width: 750px; margin: 0 0 22px; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.2; font-weight: 600; letter-spacing: -1px; color: #fff; }
.zr-page .zr-dealer-hero__desc { max-width: 690px; font-size: 18px; line-height: 1.7; color: #f5f2ef; }
.zr-dealer-hero .zr-btn { margin-top: 28px; }

.zr-page .zr-dealer-heading { display: block; max-width: 760px; margin: 0 auto 32px; padding: 0; border: 0; text-align: center; } /* Electro: section header {display:flex; border-bottom} */
.zr-page .zr-dealer-heading .zr-eyebrow { margin-bottom: 12px; }
.zr-page .zr-dealer-heading h2 { font-size: 34px; line-height: 1.35; letter-spacing: -1px; }
.zr-page .zr-dealer-heading > p { margin-top: 15px; font-size: 17px; line-height: 1.7; color: #4c4c4c; }

.zr-dealer-benefits { padding: 58px 0 42px; }
.zr-dealer-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zr-dealer-benefit { padding: 28px; background: #f5f3f0; border-top: 3px solid var(--zr-accent); border-radius: 4px; }
.zr-dealer-benefit__label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #8b3335; }
.zr-page .zr-dealer-benefit h3 { margin: 13px 0; font-size: 21px; font-weight: 600; line-height: 1.4; }
.zr-page .zr-dealer-benefit p { font-size: 16px; line-height: 1.8; color: #434343; }

.zr-dealer-process { padding: 20px 0 54px; }
.zr-page .zr-dealer-process > h2 { margin-bottom: 26px; font-size: 28px; text-align: center; }
.zr-dealer-process ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.zr-dealer-process li { margin: 0; padding-top: 16px; border-top: 1px solid #d9d5d1; }
.zr-dealer-process b { font-size: 24px; font-weight: 500; color: var(--zr-accent); }
.zr-page .zr-dealer-process h3 { margin: 10px 0; font-size: 18px; font-weight: 600; }
.zr-page .zr-dealer-process p { font-size: 16px; }

/* Registration */
.zr-dealer-register { padding: 60px 24px; background: #f7f7f6; scroll-margin-top: 20px; }
.zr-dealer-card { max-width: 760px; margin: 0 auto; padding: 36px; background: #fff; border: 1px solid #e7e5e1; border-radius: 8px; }
.zr-dealer-form fieldset { min-width: 0; margin: 0 0 30px; padding: 0; border: 0; }
.zr-page .zr-dealer-form legend {
  float: none; width: 100%; margin: 0 0 22px; padding: 0 0 15px; border-bottom: 1px solid #eee;
  font-family: inherit; font-size: 21px; font-weight: 600; line-height: 1.4; color: var(--zr-ink);
}
.zr-dealer-form legend span { margin-right: 12px; font-size: 13px; color: var(--zr-accent); }
.zr-dealer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 22px; }
.zr-dealer-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.zr-dealer-field.is-full { grid-column: 1 / -1; }
.zr-page .zr-dealer-field label { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; color: #171717; }
.zr-dealer-field abbr { color: var(--zr-accent); text-decoration: none; cursor: help; }
.zr-dealer-field__opt { font-weight: 400; color: #888; }
.zr-page.zr-dealer .zr-dealer-field :is(input, select, textarea) {
  width: 100%; min-width: 0; max-width: none; height: auto; min-height: 50px; margin: 0; padding: 13px 14px;
  background-color: #fff; border: 1px solid #d9d9d9; border-radius: 6px; box-shadow: none;
  color: #111; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
.zr-page.zr-dealer .zr-dealer-field select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.zr-page.zr-dealer .zr-dealer-field textarea { min-height: 120px; resize: vertical; }
.zr-page.zr-dealer .zr-dealer-field :is(input, textarea)::placeholder { color: #777; font-size: 15px; }
.zr-page.zr-dealer .zr-dealer-field :is(input, select, textarea):focus { outline: none; border-color: var(--zr-accent); box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15); }
.zr-page.zr-dealer .zr-dealer-field :is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.zr-dealer-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.zr-page .zr-dealer-form__note { padding: 15px 17px; background: #f6f2ee; border-radius: 4px; font-size: 14px; line-height: 1.75; color: #514740; }
.zr-dealer-form__captcha { margin-top: 20px; }
.zr-page .zr-dealer-form__error { margin-top: 16px; padding: 12px 14px; background: #fdecec; border-radius: 6px; font-size: 14.5px; color: #9b1c1c; }
.zr-page .zr-dealer-form__error[hidden] { display: none; }
.zr-page .zr-dealer-form__submit {
  justify-content: space-between; width: 100%; margin-top: 24px; padding: 15px 24px !important;
  /* !important: Electro's "button:not(...)" rule (see pagination). */
  background-color: var(--zr-accent) !important; border: 0 !important; border-radius: 50px !important; color: #fff !important;
}
.zr-page .zr-dealer-form__submit:hover:not(:disabled) { background-color: var(--zr-accent-dark) !important; }
.zr-page .zr-dealer-form__submit:disabled { opacity: .6; cursor: progress; }
.zr-page .zr-dealer-form__alt { margin-top: 20px; font-size: 15px; text-align: center; }
.zr-page .zr-dealer-form__alt a { color: var(--zr-accent); text-decoration: underline; text-underline-offset: 3px; }
.zr-page .zr-dealer-form__alt--support { margin-top: 10px; }
.zr-page .zr-dealer-form__alt--support a { color: #111; font-weight: 600; text-decoration: none; }

.zr-dealer-success { padding: 12px 8px; text-align: center; outline: none; }
.zr-dealer-success[hidden] { display: none; }
.zr-dealer-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 50%; background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 24px; }
.zr-page .zr-dealer-success h3 { margin-bottom: 10px; font-size: 24px; font-weight: 600; }
.zr-page .zr-dealer-success p { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.zr-dealer-success__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 24px; }

/* FAQ */
.zr-dealer-faq.zr-wrap { max-width: 850px; padding: 65px 0; }
.zr-dealer-faq details { margin: 12px 0; padding: 0 22px; background: #f5f5f4; border: 1px solid #eee; border-radius: 5px; }
.zr-dealer-faq summary { position: relative; padding: 18px 30px 18px 0; font-size: 17px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; }
.zr-dealer-faq summary::-webkit-details-marker { display: none; }
.zr-dealer-faq summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 24px; font-weight: 400; line-height: 1.2; color: #666; }
.zr-dealer-faq details[open] summary::after { content: '−'; }
.zr-dealer-faq summary:focus-visible { outline: 3px solid var(--zr-accent); outline-offset: 2px; }
.zr-page .zr-dealer-faq details p { padding: 0 0 21px; font-size: 16px; line-height: 1.9; color: #444; }

/* Closing CTA + contact details */
.zr-dealer-cta { padding: 35px 0; background: #eee8e1; }
.zr-dealer-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.zr-page .zr-dealer-cta h2 { font-size: 28px; }
.zr-page .zr-dealer-cta p { margin-top: 10px; font-size: 16px; }
.zr-dealer-contact { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.zr-dealer-contact li { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14.5px; color: var(--zr-ink); }
.zr-dealer-contact i { flex: none; font-size: 13px; color: var(--zr-accent); }
.zr-page .zr-dealer-contact a:hover { color: var(--zr-accent); }
.zr-dealer-cta .zr-btn { flex: none; }

@media (max-width: 1050px) {
  .zr-dealer-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 760px) {
  .zr-page .zr-dealer__crumbs .woocommerce-breadcrumb { padding: 14px 0; font-size: 13px; }
  .zr-dealer-hero__inner { padding: 40px 0; }
  .zr-page .zr-dealer-hero__title { font-size: 34px; }
  .zr-page .zr-dealer-hero__title br { display: none; }
  .zr-page .zr-dealer-hero__desc { font-size: 16px; }
  .zr-page .zr-dealer-heading h2 { font-size: 28px; letter-spacing: -.7px; }
  .zr-page .zr-dealer-heading > p { font-size: 16px; }
  .zr-dealer-benefits { padding: 38px 0 25px; }
  .zr-dealer-benefits__grid { grid-template-columns: 1fr; gap: 14px; }
  .zr-dealer-benefit { padding: 23px; }
  .zr-dealer-process { padding: 20px 0 35px; }
  .zr-dealer-process ol { gap: 25px 18px; }
  .zr-page .zr-dealer-process h3 { font-size: 17px; }
  .zr-page .zr-dealer-process p { font-size: 15px; }
  .zr-dealer-register { padding: 38px 16px; }
  .zr-dealer-card { padding: 24px 18px; }
  .zr-dealer-fields { grid-template-columns: 1fr; }
  .zr-page .zr-dealer-form legend { font-size: 20px; }
  .zr-dealer-faq.zr-wrap { padding: 40px 0; }
  .zr-dealer-faq details { padding: 0 16px; }
  .zr-dealer-faq summary { font-size: 16px; }
  .zr-dealer-cta__inner { flex-direction: column; align-items: flex-start; }
  .zr-page .zr-dealer-cta h2 { font-size: 26px; }
  .zr-dealer-contact { flex-direction: column; }
}

/* =====================================================================
 * Sign in / register / lost + reset password — AuthShell.tsx, TemplateSignIn/SignUp/LostPassword.tsx.
 * Behaviour stays in my-account.js / lost-password.js / password-toggle.js (their hooks are kept in the markup).
 * ===================================================================== */
.zr-page.zr-auth { background: var(--zr-paper); }
.zr-page .zr-auth__crumbs .woocommerce-breadcrumb { margin: 0; padding: 18px 0; color: #555; }
.zr-auth [hidden] { display: none !important; }
.zr-page.zr-auth #customer_login { padding: 0; border: 0; box-shadow: none; background: none; } /* Electro pads it as its own card */

.zr-auth__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); grid-template-areas: "aside card";
  max-width: 1080px; margin: 6px auto 0; padding-bottom: 64px;
}
.zr-auth__card { grid-area: card; padding: 46px 52px 40px; background: #fff; border-radius: 0 10px 10px 0; box-shadow: 0 20px 50px rgba(0, 0, 0, .06); }

/* Side panel */
.zr-auth__aside {
  grid-area: aside; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: 46px 44px 40px; background: #161616; border-radius: 10px 0 0 10px; color: #fff;
}
.zr-auth__aside::before {
  content: ''; position: absolute; z-index: -1; width: 360px; height: 360px; right: -140px; bottom: -150px;
  border: 44px solid rgba(166, 50, 53, .35); border-radius: 50%;
}
.zr-page .zr-auth__aside .zr-eyebrow { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; color: #f0d0cc; }
.zr-page .zr-auth__aside-title { max-width: 380px; margin-bottom: 30px; font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.6px; color: #fff; }
.zr-auth__benefits { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.zr-auth__benefits li { display: flex; align-items: flex-start; gap: 14px; margin: 0; }
.zr-auth__benefit-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zr-accent); color: #fff; font-size: 15px; }
.zr-auth__benefits strong { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 600; color: #fff; }
.zr-auth__benefits span:not(.zr-auth__benefit-icon) { display: block; font-size: 14px; line-height: 1.6; color: #b9b9b9; }
.zr-auth__aside-foot { margin-top: auto; padding-top: 34px; }
.zr-page .zr-auth__aside-link { font-size: 15px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.zr-page .zr-auth__aside-link:hover { color: #f0d0cc; }
.zr-page .zr-auth__aside-foot p { margin-top: 10px; font-size: 14px; color: #b9b9b9; }
.zr-page .zr-auth__aside-foot p a { font-weight: 600; color: #fff; }

/* Card content */
.zr-auth__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--zr-accent-soft); color: var(--zr-accent); font-size: 20px; }
.zr-page .zr-auth__title { margin: 0 0 8px; font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.7px; color: var(--zr-ink); }
.zr-page .zr-auth__lead { margin-bottom: 26px; font-size: 15.5px; line-height: 1.65; color: #5e5c59; }
.zr-page .zr-auth__info { margin-bottom: 20px; padding: 12px 14px; background: var(--zr-accent-soft); border-left: 3px solid var(--zr-accent); border-radius: 4px; font-size: 14.5px; color: var(--zr-ink); }
.zr-page .zr-auth__info a { font-weight: 600; color: var(--zr-accent); }

.zr-auth__form { margin: 0; }
.zr-page .zr-auth__field { margin: 0 0 18px; padding: 0; }
.zr-page .zr-auth__field label { display: block; margin: 0 0 7px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--zr-ink); }
.zr-auth__field abbr { color: var(--zr-accent); text-decoration: none; cursor: help; }
.zr-auth__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.zr-page .zr-auth__label-row label { margin: 0; }
.zr-page .zr-auth__small-link { font-size: 13.5px; font-weight: 600; color: var(--zr-accent); }
.zr-page .zr-auth__small-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.zr-page.zr-auth .zr-auth__field input:not([type="hidden"]) {
  display: block; width: 100%; max-width: none; height: 50px; margin: 0; padding: 0 16px;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 6px; box-shadow: none;
  color: #111; font: inherit; font-size: 16px; line-height: 1.5; transition: border-color .15s, box-shadow .15s;
}
.zr-page.zr-auth .zr-auth__field .password-input input { padding-right: 50px; }
.zr-page.zr-auth .zr-auth__field input::placeholder { color: #999; font-size: 15px; }
.zr-page.zr-auth .zr-auth__field input:focus { outline: none; border-color: var(--zr-accent); box-shadow: 0 0 0 3px rgba(var(--zp-primary-rgb, 166, 50, 53), .15); }
.zr-page.zr-auth .zr-auth__field input:disabled { background: #f6f6f5; color: #888; cursor: not-allowed; }
.zr-page.zr-auth .zr-auth__field input.app-input--invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }
.zr-page.zr-auth .zr-auth__form button.show-password-input { right: 14px; width: 26px; height: 26px; display: grid; place-items: center; }
.zr-page .zr-auth__hint { display: block; margin-top: 6px; font-size: 12.5px; color: #888; }
.zr-page.zr-auth #reg-password-strength { margin: -8px 0 16px; font-size: 13px; font-weight: 600; }
.zr-auth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.zr-page .zr-auth__privacy { margin: 2px 0 18px; font-size: 13px; line-height: 1.6; color: #777; }
.zr-page .zr-auth__privacy a { color: var(--zr-accent); text-decoration: underline; text-underline-offset: 2px; }
.zr-auth__captcha { margin: 2px 0 18px; }

.zr-page.zr-auth .zr-auth__submit {
  display: block; width: 100%; height: 52px; margin: 4px 0 0; padding: 0 20px !important;
  /* !important: Electro's "button:not(...)" rule (see pagination). */
  background-color: var(--zr-accent) !important; border: 0 !important; border-radius: 50px !important; color: #fff !important;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color .15s, opacity .15s;
}
.zr-page.zr-auth .zr-auth__submit:hover:not(:disabled) { background-color: var(--zr-accent-dark) !important; }
.zr-page.zr-auth .zr-auth__submit:disabled { opacity: .5; cursor: not-allowed; }

.zr-auth__switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--zr-line); font-size: 14.5px; color: #555; }
.zr-page .zr-auth__secondary { display: inline-flex; align-items: center; padding: 9px 20px; border: 1px solid var(--zr-accent); border-radius: 40px; font-size: 14.5px; font-weight: 600; color: var(--zr-accent); transition: background-color .15s; }
.zr-page .zr-auth__secondary:hover { background: var(--zp-primary-tint, #fdf6f5); }
.zr-page .zr-auth__back { display: inline-flex; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--zr-ink); }
.zr-page .zr-auth__back:hover { color: var(--zr-accent); }

/* Notices written by my-account.js / lost-password.js into .woocommerce-notices-wrapper */
.zr-page.zr-auth .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message) {
  margin: 0 0 20px !important; padding: 12px 14px !important; border: 0; border-radius: 6px; list-style: none; font-size: 14.5px; line-height: 1.55; box-shadow: none; /* Electro pulls notices out with negative margins */
}
.zr-page.zr-auth .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message)::before { display: none; }
.zr-page.zr-auth .woocommerce-notices-wrapper :is(.woocommerce-error, .woocommerce-message) li { margin: 0; padding: 0; }
.zr-page.zr-auth .woocommerce-notices-wrapper .woocommerce-error { background: #fdecec; color: #9b1c1c; }
.zr-page.zr-auth .woocommerce-notices-wrapper .woocommerce-message { background: #e7f3ec; color: #1f6b43; }

/* OTP modal close button (the modal is commented out in TemplateSignUp.tsx; moved from an inline <style>) */
#vendor-otp-close-btn {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0 !important; border: none !important; border-radius: 6px;
  background: transparent !important; box-shadow: none !important; color: #5f6c80 !important; font-size: 22px; line-height: 32px; cursor: pointer;
}
#vendor-otp-close-btn:is(:hover, :focus, :active) { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: #2d3a50 !important; }

@media (max-width: 960px) {
  .zr-auth__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "aside"; max-width: 600px; }
  .zr-auth__card { border-radius: 10px 10px 0 0; }
  .zr-auth__aside { padding: 32px 28px; border-radius: 0 0 10px 10px; }
  .zr-page .zr-auth__aside-title { font-size: 22px; margin-bottom: 22px; }
  .zr-auth__aside-foot { padding-top: 26px; }
}
@media (max-width: 760px) {
  .zr-page .zr-auth__crumbs .woocommerce-breadcrumb { padding: 14px 0; font-size: 13px; }
  .zr-auth__layout { padding-bottom: 36px; }
  .zr-auth__card { padding: 30px 20px 26px; }
  .zr-auth__aside { padding: 28px 20px; }
  .zr-page .zr-auth__title { font-size: 26px; }
  .zr-page .zr-auth__lead { font-size: 15px; margin-bottom: 22px; }
  .zr-auth__grid { grid-template-columns: 1fr; }
}