/* xSwitch custom styles for ACF-builder sections (Onsus base + our blocks). */

/* All buttons: sharp 4px corners (overrides the template's 8px tf-btn radius;
   supersedes the earlier 45px pills on the category hero). */
.tf-btn {
  border-radius: 4px;
}

/* Hero image slider (ACF builder block) — full-bleed slides, circular arrows at
   the edges, dots at the bottom (bug.co.il-style). */
.tf-hero-slider {
  width: 100%;
}
.tf-sw-hero {
  position: relative;
}
.tf-sw-hero .swiper-slide {
  aspect-ratio: 96 / 25; /* 1920 -> 500, scales with width (1440->375, 1280->333) */
}
.tf-sw-hero .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tf-sw-hero .swiper-button-prev,
.tf-sw-hero .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  margin: 0;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(64, 72, 87, 0.15);
}
.tf-sw-hero .nav-prev-hero {
  inset-inline-start: 24px;
  inset-inline-end: auto;
}
.tf-sw-hero .nav-next-hero {
  inset-inline-end: 24px;
  inset-inline-start: auto;
}
@media (max-width: 735.98px) {
  /* square crop kicks in exactly where the 1:1 mobile image is served */
  .tf-sw-hero .swiper-slide {
    aspect-ratio: 1 / 1; /* taller crop for phones */
  }
  .tf-sw-hero .swiper-button-prev,
  .tf-sw-hero .swiper-button-next {
    width: 36px;
    height: 36px;
  }
}

/* Welcome banner (about.html parallax): show the mobile image below the tablet
   breakpoint — the parallax effect only runs on desktop, so ≤991px just needs
   its own image. --bg-m carries the mobile URL (falls back to desktop). */
@media (max-width: 991px) {
  .parallaxie[style*="--bg-m"] {
    background-image: var(--bg-m) !important;
  }
}
/* About page: the template's 50px top gap above the welcome block is too much
   after the breadcrumb — tighten to 25px on every screen. */
.page-template-template-about section.tf-sp-2:first-of-type {
  padding-top: 25px;
}

/* Product page: the SKU line (added above the title — not in the base template)
   gets a little breathing room so it reads as its own line, not crowding the
   name. */
.product-info-sku {
  margin-bottom: 6px;
}
/* Larger category + SKU meta on the product page so they don't get lost under
   the big title (the reviews line stays its own size — it's nested, not a
   direct .caption child here). */
.infor-heading > p.caption {
  font-size: 15px;
}
/* Product gallery disclaimer — small muted note centered under the images. */
.product-media-note {
  margin-top: 14px;
  text-align: center;
}
/* Don't surface the exact stock COUNT in the buy box — WC shows "50 במלאי"
   only for stock-managed variants, which reads inconsistently (others show
   nothing) — but the OUT-OF-STOCK message is exactly the feedback a buyer
   needs when the quantity/add-to-cart controls are otherwise silently
   absent, so it stays visible, styled as a clear status card. */
.woocommerce-variation-availability,
.tf-product-info-choose-option .stock.in-stock {
  display: none;
}
.tf-product-info-choose-option .stock.out-of-stock,
.tf-product-info-choose-option .stock.available-on-backorder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 50, 50, 0.35);
  border-radius: 8px;
  background-color: rgba(220, 50, 50, 0.05);
  color: #b32d2e;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  margin: 0 0 10px;
}
.tf-product-info-choose-option .stock.out-of-stock::before,
.tf-product-info-choose-option .stock.available-on-backorder::before {
  font-family: "icomoon" !important;
  content: "\e91d"; /* icon-close's real codepoint — reused here for "unavailable" */
  font-size: 13px;
  flex: none;
}
/* The variation price is mirrored into the headline price (single-product.js),
   so hide Woo's duplicate price inside the single_variation block. */
.woocommerce-variation-price {
  display: none;
}

/* Brand logo strip: the 100px-tall logos dominate the screen on phones —
   scale them down so more fit and they read as a strip, not banners. */
@media (max-width: 767px) {
  .tf-brand .brand-item img {
    height: 55px;
    width: auto;
  }
}

/* Top announcement bar (ACF builder block) — the template's own topbar idiom
   (tf-topbar: quiet strip, hairline rule, small gray text where only the key
   figure is semibold primary) instead of the earlier solid-blue band. The
   emphasis span in the view uses template utilities (text-primary fw-semibold),
   so the deal amount is the single loud thing on the strip. */
.tf-announcement {
  background-color: var(--gray-6);
  border-bottom: 1px solid var(--gray-5);
  padding: 9px 16px;
}
.tf-announcement-inner {
  display: block;
  text-align: center;
  color: var(--gray-2);
  font-weight: 400;
  margin: 0;
}
a.tf-announcement-inner:hover {
  color: var(--secondary);
}
a.tf-announcement-inner:hover .text-primary {
  text-decoration: underline;
}

/* Brand palette — replace the template's red accent with the XSWITCH logo
   colors: blue as the primary accent, green for deals/savings. The template is
   token-driven (var(--primary)), so overriding the tokens re-skins the site. */
:root {
  --primary: #0173ED;
  --primary-2: #0150A5;
  --brand-green: #36CF08;
  /* styles.css/our rules reference var(--main) but the template never defines
     it — on inherited `color` it silently fell back, on `background` it
     resolves to transparent. Pin it to the template's body text color. */
  --main: #333e48;
  --error: #D80027; /* the template's own red (its original --primary-2), repurposed for errors */
}
/* Green = savings: sale/discount badges and the free-shipping progress. */
.box-sale-wrap,
.popup-shopping-cart .progress-bar,
.tf-cart-sold .progress-bar {
  background-color: var(--brand-green);
}

/* Header height — the template pads the inner header 30px top/bottom, which (with
   a tall logo) makes the bar feel oversized. Trim it for a more compact header. */
.tf-header .inner-header {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Logo size — driven by the ACF "logo width" settings (separate desktop +
   mobile values), set as CSS vars on the .logo-site wrapper. Falls back to the
   template defaults (185px / 130px below 1200px) when a value is left empty. */
.tf-header .logo-site {
  max-width: var(--logo-w, 185px);
}
@media (max-width: 1199px) {
  .tf-header .logo-site {
    max-width: var(--logo-w-mb, 130px);
  }
}

/* Mobile menu: nudge the logo up a touch. */
#mobileMenu .logo-site {
  top: 10px;
}

/* Shop-by-category — clean white grid (DVS-style) built on the template's own
   vertical .wg-cls-2 card. We enlarge the product photo and contain it on a
   circular tint, draw a uniform hairline grid (box-shadow stays 1px at any
   breakpoint, unlike per-side borders), and add a brand "lens-ring" hover that
   nods to the security/camera world. Template tokens only — no invented values. */
/* Static grid (no slider) — all 8 categories visible at once, 4 columns x 2
   rows at every breakpoint (Bug-style). The per-cell hairline box-shadow forms
   the grid lines, so no gap is needed. */
.xs-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.xs-cats .wg-cls-2 {
  padding: 30px 16px;
  gap: 16px;
  box-shadow: 0 0 0 1px var(--gray-5);
}
.xs-cats .wg-cls-2 .image {
  max-width: 108px;
  aspect-ratio: 1 / 1;
}
.xs-cats .wg-cls-2 .tf-overlay {
  border-radius: 50%;
  background-color: var(--gray-6);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.xs-cats .wg-cls-2 .image > img {
  position: relative;
  z-index: 1;
  width: 72%;
  height: 72%;
  margin: 14%;
  object-fit: contain;
}
.xs-cats .wg-cls-2 .link {
  color: var(--text-3);
  transition: color 0.3s ease;
}
/* lens-ring hover signature */
.xs-cats .wg-cls-2.hover-img:hover .tf-overlay {
  background-color: var(--white);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.xs-cats .wg-cls-2.hover-img:hover .link {
  color: var(--primary);
}
/* Phones: keep all 8 in 4 columns x 2 rows (no slider) by shrinking the card,
   image, and label so four cells fit comfortably across a narrow screen. */
@media (max-width: 767px) {
  .xs-cats .wg-cls-2 {
    padding: 16px 6px;
    gap: 8px;
  }
  .xs-cats .wg-cls-2 .image {
    max-width: 60px;
  }
  .xs-cats .wg-cls-2 .link {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* Shop / category archive — the template's .flat-content has no bottom padding
   (in the demo more sections follow before the footer); reuse the template's own
   tf-sp-1 rhythm (50px) so our grid isn't flush to the footer. RTL: flip the
   drill-in / breadcrumb chevrons (icon-arrow-right points the wrong way in RTL). */
.flat-content {
  padding-bottom: 50px;
}
[dir="rtl"] .breakcrumbs .icon-arrow-right,
[dir="rtl"] .facet-categories ul a .icon-arrow-right {
  display: inline-block;
  transform: scaleX(-1);
}
/* Sort dropdown: Bootstrap's .dropdown-menu defaults to text-align:left, so the
   RTL options inherit the wrong side — align them to the right. */
[dir="rtl"] .tf-dropdown-sort .dropdown-menu,
[dir="rtl"] .tf-dropdown-sort .select-item {
  text-align: right;
}

/* Category header (ACF per-category) — light band, two columns: title + copy +
   CTA on the reading-start side, a brand-blue promo card on the other. The card
   locks the two logo colors together (blue field, green CTA) as the one brand
   moment. Responsive image via <picture>; stacks on mobile. Brand tokens only. */
.tf-category-hero {
  background-color: var(--gray-6);
  padding: 24px 0 64px;
  margin-bottom: 40px;
}
.cat-hero-breadcrumb {
  margin-bottom: 14px;
}
.cat-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.cat-hero-grid.is-single {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.cat-hero-title {
  font-size: 40px;
  line-height: 1.15;
  color: var(--text-5);
  margin-bottom: 18px;
}
.cat-hero-text {
  color: var(--text-2);
}
.cat-hero-text p {
  margin-bottom: 14px;
}
/* "Read more" toggle — desktop shows the full text, so the button is hidden. */
.cat-hero-more {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--primary);
  font-weight: 600;
}
.cat-hero-more i {
  transition: transform 0.3s ease;
}
.cat-hero-more.is-open i {
  transform: rotate(180deg);
}
.cat-hero-cta {
  display: inline-flex;
  width: auto;
  margin-top: 8px;
}

.cat-hero-promo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 260px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--primary);
  text-decoration: none;
}
.cat-promo-body {
  position: relative;
  z-index: 2;
  padding: 32px 36px;
  max-width: 58%;
}
.cat-promo-title {
  color: var(--white);
  font-size: 24px;
  margin-bottom: 12px;
}
.cat-promo-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.cat-promo-btn {
  display: inline-flex;
  width: auto;
  background-color: var(--brand-green);
}
.cat-promo-btn span {
  color: var(--text-5);
}
/* On-brand hovers — the template's .tf-btn:hover turns the button dark gray,
   which kills contrast (esp. the green button's dark text). Keep them branded. */
.cat-hero-cta:hover {
  background-color: var(--primary-2);
}
.cat-promo-btn:hover {
  background-color: var(--brand-green);
  filter: brightness(0.9);
}
.cat-promo-btn:hover span {
  color: var(--text-5);
}
.cat-promo-img {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 46%;
}
.cat-promo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .cat-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cat-hero-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .tf-category-hero {
    padding: 12px 0 32px;
  }
  /* "Read more" collapses the whole hero on mobile: the description is clamped
     and the CTA + promo card are hidden until the button expands them. */
  .cat-hero-text {
    position: relative;
    max-height: 8.4em;
    overflow: hidden;
    transition: max-height 0.45s ease;
  }
  .tf-category-hero.is-expanded .cat-hero-text {
    max-height: 200em;
  }
  .cat-hero-text::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2.6em;
    background: linear-gradient(to top, var(--gray-6), transparent);
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .tf-category-hero.is-expanded .cat-hero-text::after {
    opacity: 0;
  }
  .cat-hero-more {
    display: flex;
    width: fit-content;
    margin-bottom: 8px;
  }
  .tf-category-hero:not(.is-expanded) .cat-hero-cta,
  .tf-category-hero:not(.is-expanded) .cat-hero-promo {
    display: none;
  }
  .cat-hero-promo {
    flex-direction: column;
    align-items: stretch;
  }
  .cat-promo-body {
    max-width: 100%;
  }
  .cat-promo-img {
    position: static;
    width: 100%;
    height: auto;
    order: -1;
  }
  .cat-promo-img img {
    height: auto;
    object-fit: contain;
  }
}

/* Product page: our WooCommerce products carry leaner copy than the template's
   demo (no variant swatches), so .tf-product-info-content doesn't fill its half
   on its own. Let it grow to fill the column — this matches the template's own
   filled layout and stops the info-list from overflowing the column in RTL. */
.tf-product-info-content {
  flex: 1;
  min-width: 0;
}
/* Bootstrap columns are flex items without min-width:0, so the info-list's
   content forces the column past its 50% basis and overflows the row (a left-
   edge body scroll in RTL). Let the columns honour their basis so the list
   shrinks to fit its half. */
.tf-main-product .row > [class*="col-"] {
  min-width: 0;
}
.tf-main-product .tf-product-info-wrap {
  max-width: 100%;
}
.tf-main-product .tf-product-info-list {
  width: 100%;
  min-width: 0;
}
/* The template caps the gallery at 652px inside its half; on wide screens
   the column outgrows the cap and a dead band opens between the image and
   the product info. Let the gallery fill its column (flush with the
   breadcrumb edge, minimal gap to the info); images stay proportional
   inside the fixed-height box below. */
.tf-main-product .thumbs-slider {
  margin-inline-end: auto;
}
@media (min-width: 768px) {
  .tf-main-product .thumbs-slider {
    max-width: 100%;
  }
}
/* Give the template's gallery box a definite height (its own max-height value):
   WooCommerce images vary in size, so the 100%-height chain the template relies
   on never resolves. The img scales to FIT inside the box at its natural aspect,
   centered — never squashed with height:100%/object-fit and never cropped:
   Drift maps the img element linearly onto the data-zoom file, so the element
   must be an undistorted view of the whole image or the hover-zoom shows the
   wrong regions. */
.tf-product-media-main .item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
/* The fixed box only matters where Drift's hover zoom runs (>=1200px) and the
   two-column layout needs a uniform media height. Below that, let the box hug
   the image so mobile doesn't get big empty bands above/below the photo.
   560px (not the template's 687px) — tall product shots dominated the page. */
.tf-product-media-main .item {
  max-height: 560px;
}
@media (min-width: 1200px) {
  .tf-product-media-main .item {
    height: 560px;
  }
}
/* Drift sizes the hover-zoom image larger than its pane and relies on
   `max-width: none`, but WooCommerce's `.woocommerce img { max-width: 100% }`
   overrides it and clamps the zoom image to the pane width — which kills the
   horizontal pan (only vertical works). Restore Drift's own rule with enough
   specificity to win. */
.tf-zoom-main .drift-zoom-pane img {
  max-width: none;
  max-height: none;
  /* Drift offsets this img with translate() from its static position and never
     sets left/top. In RTL the static position starts at the pane's RIGHT edge,
     so every horizontal offset lands mirrored. Pin the LTR origin. */
  left: 0;
  top: 0;
}
/* Variable products: the WooCommerce variations form lives inside the buy box
   as one element, so restore the box's 18px stacking rhythm inside it, flip the
   template's select arrow for RTL, and style the states Woo's variation JS
   toggles (selected-variation price, reset link, disabled buy-now). */
.tf-product-info-choose-option form.cart,
.tf-product-info-choose-option form.cart .variations {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tf-select-color::after {
  right: auto;
  inset-inline-end: 10px;
}
.tf-select-color .select-color {
  width: 100%;
  padding-inline-end: 30px;
}
.tf-select-color {
  width: 100%;
}
form.cart .reset_variations {
  color: var(--gray-2);
  width: max-content;
}
/* Woo toggles the reset link with visibility, which keeps its box (and the
   flex gap around it) in the layout — collapse it entirely when hidden. */
form.cart .reset_variations[style*='hidden'] {
  display: none;
}

/* Badges container: a product can show its own badge plus one inherited from
   the category/shop (see \App\product_badges). The container takes over the
   template's corner anchoring; the badges stack inside it. z-index keeps them
   above the gallery swiper on the product page. */
.xs-badges {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.xs-badges .box-sale-wrap {
  position: static;
}
/* Image badge (ACF badge_image): an uploaded sticker — possibly an animated
   GIF — replaces the template's text circle, KSP-style rounded square. The
   wrap loses the circle chrome; the image defines the look. */
.box-sale-wrap.xs-badge-img {
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}
.box-sale-wrap.xs-badge-img img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.tf-product-media-wrap .box-sale-wrap.xs-badge-img img {
  width: 60px;
  height: 60px;
}

/* Sidebar filters, KSP-density: the template spends 48px between groups and
   16px under titles — halve it, make groups collapsible (chevron on the title,
   spec groups start collapsed, groups with an active filter auto-open), show
   per-value result counts, and add a dual-handle price slider bound to the
   template's min/max inputs. */
.canvas-body .widget-facet:not(:last-child) {
  margin-bottom: 14px;
  padding-bottom: 14px;
}
.widget-facet .facet-title {
  margin-bottom: 10px;
}
.widget-facet .box-fieldset-item {
  gap: 7px;
}
.facet-collapsible .facet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.facet-collapsible .facet-title::after {
  content: "\e918";
  font-family: "icomoon";
  font-size: 10px;
  color: var(--gray-2);
  transition: transform 0.2s;
  transform: rotate(180deg);
}
.widget-facet.is-collapsed .facet-title::after {
  transform: none;
}
.widget-facet.is-collapsed .facet-title {
  margin-bottom: 0;
}
.widget-facet.is-collapsed .box-fieldset-item {
  display: none;
}
.fieldset-item .facet-count {
  margin-inline-start: auto;
  color: var(--gray-2);
  font-size: 12px;
  line-height: 1;
}
/* KSP's density comes from tight line-height (~1.2), not smaller type — its
   sidebar is 16px like ours. Tighten the option rows to match. */
.widget-facet .fieldset-item label {
  line-height: 1.25;
}
/* Brand filter strip (KSP-style): scrollable row of brand cards above the
   products; a card toggles the same brand facet as the sidebar. Same chip
   vocabulary as the variant pills: gray-4 border, radius 8, primary active. */
.xs-brand-strip-wrap {
  position: relative;
  margin-bottom: 14px;
}
.xs-brand-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  min-width: 0;
}
.xs-brand-strip::-webkit-scrollbar {
  height: 3px;
}
.xs-brand-strip::-webkit-scrollbar-thumb {
  background-color: var(--gray-3);
  border-radius: 5px;
}
/* One arrow floating at each edge, only shown when the row actually
   overflows (is-overflowing set in shop-filter.js) and hidden per-side at
   whichever end has nothing further to scroll to - a floating control with
   nothing to do reads as clutter, unlike a grouped pair where a disabled
   grey state still makes sense. The white-to-transparent backing lets it
   sit over any card content behind it without a hard edge of its own. */
.xs-brand-nav {
  display: none;
  position: absolute;
  top: 0;
  bottom: 6px;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gray);
  z-index: 2;
}
.xs-brand-strip-wrap.is-overflowing .xs-brand-nav:not(.swiper-button-disabled) {
  display: flex;
}
.xs-brand-nav:hover {
  color: var(--primary);
}
.xs-brand-nav-prev {
  right: 0;
  background: linear-gradient(to right, var(--white) 45%, transparent);
}
.xs-brand-nav-next {
  left: 0;
  background: linear-gradient(to left, var(--white) 45%, transparent);
}
.xs-brand-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 56px;
  padding: 8px 16px;
  border: 1px solid var(--gray-4);
  border-radius: 4px;
  background: var(--white);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s, background-color 0.15s;
}
/* KSP hierarchy: the logo is the hero, the name is a light secondary label */
.xs-brand-item .xs-brand-name {
  font-weight: 400;
  color: var(--gray-2);
}
.xs-brand-item img {
  height: 38px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}
/* no logo yet: keep the name centered rather than pushed to one side */
.xs-brand-item:not(:has(img)) {
  justify-content: center;
}
.xs-brand-item:hover {
  border-color: var(--primary);
}
.xs-brand-item[aria-pressed='true'] {
  border-color: var(--primary);
  background: rgba(1, 115, 237, 0.06);
}
.xs-brand-item[aria-pressed='true'] .xs-brand-name {
  color: var(--primary);
}

/* Archive rhythm: the template spends 50px under the breadcrumbs and 51px
   under the toolbar — too airy at any size. Tighten globally, a notch more
   on phones so the first products show without scrolling. */
.tf-sp-1 {
  padding-bottom: 24px;
}
.tf-shop-control {
  margin-bottom: 20px;
  padding-bottom: 16px;
}
@media (max-width: 767px) {
  .tf-sp-1 {
    padding-bottom: 16px;
  }
  .tf-shop-control {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
}

/* Card description snippet: grid cards stay clean like the template; the list
   layout has the horizontal room, so show a 3-line clamped excerpt there. */
.card-product .card-desc {
  display: none;
}
.flat-grid-product.layout-tablist-1 .card-product .card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--gray-2);
  /* a step below the 14px product name, so the snippet reads as secondary */
  font-size: 13px;
  line-height: 18px;
}
.flat-grid-product.layout-tablist-1 .card-product .card-product-info {
  gap: 8px;
}
/* List view: show the full product name — the template clamps it to 2 lines,
   but the row layout has the vertical room, so never cut it off. */
.flat-grid-product.layout-tablist-1 .card-product .name-product {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* List card polish: (1) the meta stack (category / SKU / name) ran together at
   0px — give the three lines a little breathing room (all layouts). */
.card-product .card-product-info .box-title > .d-flex.flex-column {
  gap: 4px;
}
/* (2) On the mobile list rows the full-width CTA floated with an ambiguous gap
   above it — a hairline turns that space into a deliberate footer divider so
   the button reads as the card's action. Desktop rows keep the compact
   260px button as-is (a divider there would be a stray short line). */
@media (max-width: 767px) {
  .flat-grid-product.layout-tablist-1 .card-product .card-product-btn {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-5);
  }
}
@media (max-width: 767px) {
  .flat-grid-product.layout-tablist-1 .card-product .card-desc {
    -webkit-line-clamp: 2;
  }
}

/* Shop layout switch: grid mode shows two products per row on phones (the
   template drops to one below 576px); the list mode uses the template's
   style-row cards; on narrow screens keep them horizontal with a compact
   fixed image column (the template's 274px image is wider than a phone allows). */
@media (max-width: 575px) {
  .flat-grid-product.layout-tabgrid-1 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
}
.flat-grid-product.layout-tablist-1 .card-product.style-row {
  align-items: flex-start;
}
.flat-grid-product.layout-tablist-1 .card-product.style-row .card-product-wrapper {
  align-self: flex-start;
}
/* The add-to-cart block lives in the shared card component but belongs only
   to the shop's LIST layout — hide it everywhere else (homepage rails,
   carousels, grid mode). The template's higher-specificity layout-tablist
   rule re-shows it in list view. */
.card-product .card-product-btn {
  display: none;
}
/* Self-hosted web fonts: the template @imports Inter/Poppins from Google
   Fonts and Helvetica Neue from cdnfonts.com. Those render-blocking external
   imports stall the whole page on mobile networks and fail entirely under
   DNS ad-blockers ("site stuck on some phones"). The files now ship from
   this server (latin ranges only — Hebrew stays on the Heebo graft above);
   the @import lines were removed from styles.css. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueRoman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeueBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Hebrew glyph coverage: the template's fonts (Inter, MADE Outer, UTM
   Banque) contain no Hebrew. Desktop browsers substitute a system sans
   silently, but Android obeys the stack's 'serif' fallback and renders
   Hebrew in Noto Serif Hebrew. Graft self-hosted Heebo (variable, Hebrew
   subset) onto those family names for the Hebrew ranges only -- Latin keeps
   the original faces, and no selector overrides are needed. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/heebo-hebrew-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'MADE Outer';
  src: url('../fonts/heebo-hebrew-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'UTM Banque';
  src: url('../fonts/heebo-hebrew-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

/* Back-to-top: the template pins it right — in RTL that's the text START, so
   it sat on the footer titles. Anchor it to the inline-END corner instead
   (left in RTL), below the accordion rows. */
#goTop {
  right: auto;
  inset-inline-start: auto;
  inset-inline-end: 20px;
  bottom: 24px;
}

/* Footer: the template wraps the one-line copyright in a 100px slab — bring
   it down to a compact strip with a hairline above. */
.ft-bottom {
  padding: 18px 0;
  border-top: 1px solid var(--gray-5);
}
/* Mobile footer accordion, RTL-first: the template pins the +/− with
   physical `right` offsets and left-flowing padding, so in RTL the icon
   lands on the text. Rebuild as full-width tap rows: title at the inline
   start, a muted +/− at the inline END, hairline separators between rows. */
@media (max-width: 767px) {
  .tf-footer .ft-body-inner {
    padding: 28px 0;
  }
  .ft-link-wrap {
    gap: 0;
  }
  .footer-col-block {
    border-bottom: 1px solid var(--gray-5);
  }
  .footer-heading-mobile {
    padding: 14px 0;
    padding-inline-end: 28px;
    margin-bottom: 0;
  }
  .footer-heading-mobile::after {
    right: auto;
    inset-inline-end: 4px;
    background-color: var(--gray-2);
  }
  .footer-heading-mobile::before {
    right: auto;
    inset-inline-end: 9.5px;
    transform: translateY(-50%);
    background-color: var(--gray-2);
  }
  .footer-col-block .tf-collapse-content .ft-menu-list {
    padding-bottom: 14px;
    display: grid;
    gap: 10px;
  }
}

/* ---- Checkout: WooCommerce-native markup skinned to the template ---- */
/* Woo 9's form CSS out-specifies the template's own input rules
   (.woocommerce form .form-row input.input-text > form input[type=text]),
   leaving 33px dark-bordered fields. Restore the template's input frame
   (values from styles.css: 1px gray-4, radius 10, 12/14 padding, 14/20 type)
   at matching specificity. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--gray-4);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--black);
  background-color: var(--white);
  box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--primary);
  outline: 0;
}

/* Fields: Woo renders p.form-row (label + input.def). Lay them out like the
   template's form.def fieldsets; first/last pairs share a row. */
.woocommerce-checkout .xs-checkout-fields .form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
}
.woocommerce-checkout .xs-checkout-fields .form-row label {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 6px;
}
.woocommerce-checkout .xs-checkout-fields fieldset,
.woocommerce-checkout .xs-checkout-fields .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .xs-checkout-fields .woocommerce-additional-fields__field-wrapper,
.woocommerce-checkout .xs-checkout-fields .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
}
.woocommerce-checkout .xs-checkout-fields .form-row {
  flex: 1 1 100%;
}
@media (min-width: 768px) {
  /* two fields per row, like the template's .cols pairs; the order-notes
     textarea keeps the full row */
  .woocommerce-checkout .xs-checkout-fields .form-row {
    flex: 1 1 calc(50% - 10px);
  }
  .woocommerce-checkout .xs-checkout-fields #order_comments_field {
    flex-basis: 100%;
  }
}
/* country/state selects (selectWoo) — match the template input frame */
.woocommerce-checkout .xs-checkout-fields select,
.woocommerce-checkout .xs-checkout-fields .select2-selection--single {
  height: 46px;
  border: 1px solid var(--gray-4);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--white);
}
.woocommerce-checkout .xs-checkout-fields .select2-selection__rendered {
  line-height: 24px;
  padding: 0;
}
.woocommerce-checkout .xs-checkout-fields .select2-selection__arrow {
  height: 44px;
}
.woocommerce-checkout .xs-checkout-fields textarea.def {
  min-height: 96px;
}
/* order notes hide until the "add a note?" checkbox (rendered in
   app/shop.php, revealed by checkout.js) is ticked; the checkbox already
   names the field, so its own label stays screen-reader-only */
.woocommerce-checkout .xs-checkout-fields #order_comments_field {
  display: none;
}
.woocommerce-checkout .xs-checkout-fields #order_comments_field label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Woo's field-group h3s ("Billing details", ship-to-different toggle) — scale
   them to the template's section-title size; the toggle h3 stays functional.
   Compact margins keep the template's field rhythm (Woo's defaults leave
   floors of dead space between the checkbox, notes, and payment). */
.woocommerce-checkout .xs-checkout-fields h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px; /* the template's h3 line-height (44px) survives the
                        font-size override and pads each checkbox row */
  margin: 6px 0 10px;
}
.woocommerce-checkout .xs-checkout-fields .woocommerce-billing-fields h3 {
  display: none; /* the wrap already carries the פרטי משלוח title */
}
.woocommerce-checkout .xs-checkout-fields .woocommerce-additional-fields {
  margin-top: 4px;
}
.woocommerce-checkout .xs-checkout-fields h3 label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}
.woocommerce-checkout .xs-checkout-fields h3 input[type='checkbox'] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

/* Payment methods: Woo's ul.wc_payment_methods styled as the template's
   payment accordion — each method is a bordered card, the description body
   uses the template's payment-body treatment (padding + soft shadow). The
   #payment id is required to out-specify Woo's own payment_box styling. */
.woocommerce-checkout-payment ul.payment-box,
.woocommerce-checkout #payment ul.payment-box {
  display: grid;
  gap: 12px;
  margin: 0 0 8px;
  /* Woo insets the ul by 1em (#payment ul.payment_methods, loaded after this
     sheet — hence the heavier selector), pushing the cards off the field grid */
  padding: 0;
}
.woocommerce-checkout-payment .wc_payment_method {
  border: 1px solid var(--gray-5);
  border-radius: 8px;
  padding: 12px 14px; /* the input frame's padding — rows match the 46px fields */
  list-style: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  /* Woo renders the radio as a SIBLING of the label — lay the row out here */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.woocommerce-checkout-payment .wc_payment_method .payment_box {
  flex-basis: 100%;
}
.woocommerce-checkout-payment .wc_payment_method:hover {
  border-color: var(--gray-4);
}
/* the chosen method must look chosen (template: payment-choose-card active) */
.woocommerce-checkout-payment .wc_payment_method:has(input.input-radio:checked) {
  border-color: var(--primary);
  background-color: rgba(1, 115, 237, 0.03);
}
.woocommerce-checkout-payment .wc_payment_method > label {
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1;
  line-height: 22px; /* inherits 30px otherwise — the input rows sit at 14/20 */
}
.woocommerce-checkout-payment .wc_payment_method input.input-radio {
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
}
.woocommerce-checkout #payment div.payment_box,
#payment div.payment_box {
  position: relative;
  margin: 10px 0 0;
  padding: 14px 16px;
  background-color: var(--gray-6);
  border-radius: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
  color: var(--text-2);
}
.woocommerce-checkout #payment div.payment_box::before,
#payment div.payment_box::before {
  display: none; /* Woo's speech-bubble arrow */
}
.woocommerce-checkout-payment .place-order,
.woocommerce-checkout #payment div.form-row.place-order {
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
  padding: 0; /* Woo pads the row 15px (id-scoped rule — hence the twin selector) */
}
/* the ul carries a Woo divider the template doesn't have */
.woocommerce-checkout #payment ul.payment-box {
  border-bottom: 0;
}
/* template caption idiom: the quiet note sits UNDER the control it annotates
   (like the contact form's "order info will be sent..." caption) */
.woocommerce-checkout-payment .place-order button#place_order {
  order: 1;
}
.woocommerce-checkout-payment .place-order .woocommerce-terms-and-conditions-wrapper {
  order: 2;
}
.woocommerce-checkout-payment .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-2);
}
.woocommerce-checkout-payment .woocommerce-privacy-policy-text a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Woo 9.x paints #payment gray and the submit purple (block-button vars) —
   restore the template surface + brand button. */
#payment.woocommerce-checkout-payment {
  background: transparent;
}
.woocommerce-checkout-payment button#place_order {
  background-color: var(--primary);
  color: var(--white);
  border: 0;
  /* Woo's button.alt geometry (line-height 1, 700, radius 3) wins over the
     class-level .tf-btn — restate the template's tf-btn frame at id level */
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  padding: 10px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woocommerce-checkout-payment button#place_order:hover {
  background-color: var(--brand-green);
}

/* Israeli phone inside the RTL address block: the digit groups bidi-reverse
   ("050 000 0000" displays as "0000 000 050") — isolate the line as LTR,
   keeping it on the right edge with the rest of the address */
.billing-info .woocommerce-customer-details--phone {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Woo's blockUI spinner (gray disc) flashes over the summary/payment on every
   checkout/cart AJAX refresh — the template has no such artifact; the
   overlay's white dim remains as the refresh feedback. Body-class selectors
   out-rank Woo's .woocommerce-scoped rule, which loads after this sheet. */
body.woocommerce-checkout .blockUI.blockOverlay::before,
body.woocommerce-cart .blockUI.blockOverlay::before,
.woocommerce .blockUI.blockOverlay::before {
  display: none;
}

/* Mobile checkout order: the template's .tf-checkout-wrap is a wrapping flex
   row with the sidebar last in DOM, so under lg the Order Summary lands BELOW
   the Place-order button — the buyer would submit without seeing the totals.
   Dissolve the form column (display: contents) so its blocks join the flex
   flow, then slot the summary between the shipping fields and payment:
   contact → fields → summary → payment. Desktop keeps template order. */
@media (max-width: 991.98px) {
  .tf-checkout-wrap .page-checkout {
    display: contents;
  }
  .tf-checkout-wrap .page-checkout > .wrap {
    width: 100%;
  }
  .tf-checkout-wrap .flat-sidebar-checkout {
    order: 1;
    /* the template's sticky card floats over the sections while scrolling
       once it's mid-flow — inline it as a regular section on small screens */
    position: static;
  }
  .tf-checkout-wrap .page-checkout > .wrap:last-of-type {
    order: 2;
  }
}

/* Order summary: the review is a Woo table (shipping rows are <tr>) skinned
   as the template's FLAT list — Woo's shop_table borders/backgrounds are
   stripped; rows separate with hairlines only, exactly like checkout.html.
   With many items the list scrolls internally (capped at ~3.5 rows — the
   cut row signals more), so the coupon and totals never leave the screen. */
.woocommerce table.shop_table.xs-review-table,
.xs-review-table {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  border-collapse: collapse;
  margin: 0;
}
/* Israel-only store: WooCommerce still renders the country row as a
   single-option select (country_to_state--single) — nothing to choose, so
   the row is hidden; the field still posts IL. !important because Woo's
   country/locale JS re-shows address rows with an inline display:block */
.woocommerce-checkout #billing_country_field,
.woocommerce-checkout #shipping_country_field {
  display: none !important;
}

/* Woo's desktop table CSS (.woocommerce table.shop_table td) out-specifies a
   bare .xs-review-table reset above 768px and repaints per-cell borders as
   broken line segments — match its specificity so cells stay borderless */
.woocommerce table.shop_table.xs-review-table td,
.woocommerce table.shop_table.xs-review-table th,
.xs-review-table td,
.xs-review-table th,
.xs-review-table tr {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.xs-review-table tbody tr + tr {
  border-top: 1px solid var(--gray-5);
}
.xs-review-table tbody {
  display: block;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
.xs-review-table tbody::-webkit-scrollbar {
  width: 3px;
}
.xs-review-table tbody::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 999px;
}
.xs-review-table tbody tr,
.xs-review-table tbody td {
  display: block;
  width: 100%;
}
.xs-review-table tfoot {
  display: block;
  width: 100%;
}
.xs-review-table tfoot tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xs-review-table .item-product .img-product {
  max-width: 64px;
}
.xs-review-table .item-product .content-box {
  gap: 4px;
}
.xs-review-table tbody td {
  padding: 8px 0;
}
.xs-review-table td,
.xs-review-table th {
  padding: 10px 0;
  text-align: start;
  font-weight: inherit;
}
.xs-review-table tfoot td {
  text-align: end;
}
.xs-review-table tfoot tr {
  border-top: 1px solid var(--gray-5);
}
.xs-review-table .item-product .img-product img {
  width: 100%;
  height: auto;
}
.xs-review-table #shipping_method {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
}
/* generic li styling paints a stray hairline above the shipping method name */
.xs-review-table #shipping_method li {
  border: 0;
}
.xs-review-table #shipping_method input {
  accent-color: var(--primary);
  margin-inline-end: 6px;
}
.xs-checkout-coupon {
  margin-top: 16px;
}

/* Order-received notice: physical padding-left pushes the text AWAY from the
   icon in RTL — use logical padding so icon and text stay adjacent. */
.tf-order-detail .order-notice p {
  padding-left: 0;
  padding-inline-start: 20px;
}
/* failed-order variant: red icon field instead of primary */
.tf-order-detail .xs-order-failed .icon {
  background-color: var(--error);
}

/* WooCommerce notices — miniature of the template's own order-notice
   component (thank-you page): a colored semantic square with a white glyph
   on a white card. Fit-content so the card hugs its message instead of
   spanning the container; the square alone carries the state (no colored
   edges, no Woo glyph overlay). */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  background-color: var(--white);
  border: 1px solid var(--gray-5);
  border-radius: 8px;
  box-shadow: 5px 6px 30px 0px rgba(0, 0, 0, 0.06);
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-3);
}
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  content: '';
  position: static; /* Woo absolutely-positions its glyph */
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background-color: var(--primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}
.woocommerce-message::before {
  background-color: var(--brand-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.4 10.9 3.5 8l-1.1 1.1 4 4 7.2-7.2-1.1-1.1z'/%3E%3C/svg%3E");
}
.woocommerce-error::before {
  background-color: var(--error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M7 2.5h2V10H7zM7 11.5h2v2H7z'/%3E%3C/svg%3E");
}
.woocommerce-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M7 2.5h2v2H7zM7 6h2v7.5H7z'/%3E%3C/svg%3E");
}
/* multiple errors share one icon; each error sits on its own row beside it */
ul.woocommerce-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
ul.woocommerce-error::before {
  grid-column: 1;
  grid-row: 1;
}
ul.woocommerce-error li {
  grid-column: 2;
}
/* Product-page notices float as bottom-corner toasts (toast.js moves them
   out of the top-of-content spot Woo prints them in): same notice card,
   slide-in, room for the close ✕. */
.xs-toast-stack {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 1090;
  display: grid;
  gap: 10px;
  max-width: min(460px, calc(100vw - 32px));
}
.xs-toast-stack .woocommerce-message,
.xs-toast-stack .woocommerce-error,
.xs-toast-stack .woocommerce-info {
  margin: 0;
  position: relative;
  padding-inline-end: 38px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: xs-toast-in 0.25s ease-out;
}
.xs-toast-close {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
}
.xs-toast-hide {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes xs-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xs-toast-stack .woocommerce-message,
  .xs-toast-stack .woocommerce-error,
  .xs-toast-stack .woocommerce-info {
    animation: none;
    transition: none;
  }
}

/* Contact page without a configured map embed: the template docks the form
   over the map's bottom edge (wg-map .bottom is absolute) — with no iframe
   the section collapses to nothing. Keep the card styling, drop the docking. */
.wg-map.xs-no-map {
  padding-bottom: 0;
}
.wg-map.xs-no-map .bottom {
  position: static;
  align-items: start;
  flex-wrap: wrap;
  left: auto;
  pointer-events: auto;
}

/* Plain pages (privacy/terms/…) pour WP-editor content into the template's
   entry-privary text layout (privacy.html) — the editor emits bare tags, so
   map them onto the template's .wrap h4 / .title-sidebar-2.text-main-2 look */
.entry-privary h1,
.entry-privary h2,
.entry-privary h3,
.entry-privary h4 {
  font-weight: 600;
}
.entry-privary p,
.entry-privary li {
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-2);
}
.entry-privary ul,
.entry-privary ol {
  display: grid;
  gap: 10px;
  padding-inline-start: 18px;
}
.entry-privary a {
  color: var(--secondary);
  font-weight: 600;
}

/* Fly-to-cart ghost (fly-to-cart.js): a card-like copy of the product image
   that shrinks into the header cart icon; the count badge bumps on arrival. */
.xs-fly-img {
  position: fixed;
  z-index: 1100;
  border-radius: 8px;
  object-fit: contain;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.5, -0.1, 0.7, 0.5), opacity 0.7s ease-in;
}
.xs-cart-bump {
  animation: xs-cart-bump 0.4s ease;
}
@keyframes xs-cart-bump {
  30% {
    transform: scale(1.35);
  }
}

/* the action link Woo appends (e.g. "מעבר לסל הקניות") becomes a button.
   The .woocommerce-scoped variants out-specify Woo's own gray button rule. */
.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  margin-inline-start: 6px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 4px;
  padding: 8px 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.woocommerce .woocommerce-error .button:hover,
.woocommerce .woocommerce-message .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background-color: var(--brand-green);
  color: var(--white);
}

/* Multi-attribute variation meta arrives newline-separated (flat format) —
   keep one attribute per line. */
.variant-box .body-text-3,
.xs-review-table .content-box p.body-md-2 {
  white-space: pre-line;
}

/* A11y: the template strips focus outlines from all buttons — restore a
   visible focus ring for keyboard users (buttons, template CTAs, and the
   role=button qty steppers). */
button:focus-visible,
.tf-btn:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Cart bottom totals: when a coupon is applied, show the applied state
   (subtotal, coupon + remove link, total) as a compact end-aligned stack. */
.xs-cart-totals {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: end;
}
.xs-cart-totals .xs-cart-coupon .woocommerce-remove-coupon {
  color: var(--error);
  margin-inline-start: 6px;
}

/* Cart navigation pairs (drawer + cart page): the secondary action wears
   brand green (hover blue); the primary blue keeps the sitewide green hover. */
.popup-shopping-cart .box-btn .tf-btn.btn-gray,
.s-shoping-cart .box-btn .tf-btn.btn-gray {
  background-color: var(--brand-green);
}
.popup-shopping-cart .box-btn .tf-btn.btn-gray:hover,
.s-shoping-cart .box-btn .tf-btn.btn-gray:hover {
  background-color: var(--primary);
}
.popup-shopping-cart .box-btn .tf-btn:not(.btn-gray):hover,
.s-shoping-cart .box-btn .tf-btn:not(.btn-gray):hover {
  background-color: var(--brand-green);
}

/* Checkout progress bar: the template anchors the fill with a physical
   left:0 — in RTL progress starts at the confirmation end. Anchor right. */
[dir="rtl"] .checkout-status .checkout-bar::after {
  left: auto;
  right: 0;
}

/* Woo appends a "view cart" anchor next to add-to-cart buttons after an AJAX
   add — the button itself shows that state instead (shop-filter.js).
   !important: Woo's own stylesheet re-shows this class. */
.card-product .added_to_cart,
.product-box-btn .added_to_cart {
  display: none !important;
}
/* List-card CTA: solid primary, but lighter type than tf-btn's 15px/600
   slab; fills brand green on hover. */
.flat-grid-product.layout-tablist-1 .card-product-btn .tf-btn {
  background-color: var(--primary);
  color: var(--white);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
}
.flat-grid-product.layout-tablist-1 .card-product-btn .tf-btn:hover {
  background-color: var(--brand-green);
  color: var(--white);
}
/* Product-page buy box: the primary (blue) buttons share the same green
   hover as the list-card CTA; the gray quick-buy keeps its own hover. */
.tf-product-info-choose-option .tf-btn:not(.btn-gray):hover {
  background-color: var(--brand-green);
}
/* Desktop list rows are wide — cap the CTA so it doesn't span the column. */
@media (min-width: 768px) {
  .flat-grid-product.layout-tablist-1 .card-product-btn {
    max-width: 260px;
  }
}
@media (max-width: 767px) {
  .flat-grid-product.layout-tablist-1 .card-product.style-row {
    flex-direction: row;
    gap: 12px;
  }
  .flat-grid-product.layout-tablist-1 .card-product.style-row .card-product-wrapper {
    flex: 0 0 132px;
    max-width: 132px;
  }
  /* badges scale with the small 132px thumbnail */
  .flat-grid-product.layout-tablist-1 .card-product .xs-badges {
    top: 4px;
    left: 4px;
    gap: 4px;
  }
  .flat-grid-product.layout-tablist-1 .card-product .xs-badges .xs-badge-img img {
    width: 30px;
    height: 30px;
  }
  .flat-grid-product.layout-tablist-1 .card-product .xs-badges .box-sale-wrap:not(.xs-badge-img) {
    width: 34px;
    height: 34px;
  }
  .flat-grid-product.layout-tablist-1 .card-product .xs-badges .box-sale-wrap:not(.xs-badge-img) p {
    font-size: 9px;
  }
}

/* Category rows drop from 15px to 9px padding to match the sidebar density. */
.facet-categories ul a {
  padding: 9px 0;
}
/* Hierarchical category tree: active category highlighted, parents expand to
   their children (auto-open on the active branch, toggle for the rest). */
.facet-cat-tree,
.facet-subcat {
  list-style: none;
  margin: 0;
  padding: 0;
}
.facet-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.facet-cat-row > a {
  flex: 1;
  min-width: 0;
  color: var(--main);
}
.facet-cat-item.is-active > .facet-cat-row > a {
  color: var(--primary);
  font-weight: 600;
}
.facet-cat-chevron {
  color: var(--gray-4);
  font-size: 12px;
  flex: none;
}
.facet-cat-toggle {
  flex: none;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  margin: 0;
  cursor: pointer;
  color: var(--main);
  line-height: 1;
}
.facet-cat-item.is-active > .facet-cat-row .facet-cat-toggle {
  color: var(--primary);
}
/* Collapsed: point to the reading-start side like the rest of the list (the
   glyph points right, flipped for RTL). Open: a down chevron (symmetric, so
   the flip is irrelevant). */
.facet-cat-chevron,
.facet-cat-toggle .icon-arrow-right {
  display: inline-block;
  font-size: 13px;
  transition: transform 0.2s ease;
}
[dir="rtl"] .facet-cat-chevron,
[dir="rtl"] .facet-cat-toggle .icon-arrow-right {
  transform: scaleX(-1);
}
.facet-cat-item.is-open > .facet-cat-row .facet-cat-toggle .icon-arrow-right {
  transform: rotate(90deg);
}
.facet-subcat {
  display: none;
  padding-inline-start: 14px;
  margin-inline-start: 5px;
  border-inline-start: 1px solid var(--gray-5);
}
.facet-cat-item.is-open > .facet-subcat {
  display: block;
}
.facet-subcat .facet-cat-row > a {
  font-size: 13px;
  color: var(--text-2);
}
.facet-subcat .facet-cat-item.is-active > .facet-cat-row > a {
  color: var(--primary);
}
/* The whole sidebar scrolls internally (KSP-style): on desktop it sticks to
   the viewport and gets its own slim scrollbar instead of stretching the page.
   Below 1200px the sidebar is the filter offcanvas, which scrolls on its own. */
@media (min-width: 1200px) {
  .sidebar-filter .canvas-wrapper {
    position: sticky;
    top: 15px;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    padding-inline-end: 8px;
  }
  .sidebar-filter .canvas-wrapper::-webkit-scrollbar {
    width: 3px;
  }
  .sidebar-filter .canvas-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--gray-3);
    border-radius: 5px;
  }
}
.form-filter-price {
  flex-wrap: wrap;
}
.xs-price-slider {
  position: relative;
  height: 18px;
  margin: 10px 2px;
  width: 100%;
  flex: 0 0 100%;
  order: -1; /* slider above the inputs, like KSP */
}
.xs-price-slider .xs-range-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  width: 100%;
  background: var(--gray-4);
  border-radius: 3px;
}
.xs-price-slider .xs-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
}
.xs-price-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  pointer-events: none;
}
.xs-price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--primary);
  cursor: grab;
}
.xs-price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--primary);
  cursor: grab;
}

/* Variant pickers (KSP-style): attribute choices render as pill groups in the
   product-info column — they scale to many attributes/long labels where the
   buy box's narrow selects don't. The Woo selects stay in the form as the
   machinery (hidden below); pills sync to them via single-product.js. Pills
   use the template's chip vocabulary: gray-4 border, radius 8, primary active. */
.tf-product-info-choose-option .variations .product-color {
  display: none;
}
.infor-variants {
  display: grid;
  gap: 14px;
}
.pdv-group {
  display: grid;
  gap: 8px;
}
.pdv-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdv-btn {
  border: 1px solid var(--gray-4);
  border-radius: 4px;
  background: var(--white);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.pdv-btn:hover {
  border-color: var(--primary);
}
.pdv-btn.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(1, 115, 237, 0.06);
  font-weight: 600;
}
.pdv-btn.unavailable {
  opacity: 0.4;
  pointer-events: none;
}
/* "Choose an option" callout: replaces the native alert() Woo fires when
   add-to-cart is clicked without a variation. A small card in the buy box,
   brand tokens only; the variant pills get a one-shot blue pulse so the eye
   lands on where to act. */
.xs-callout {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: rgba(1, 115, 237, 0.06);
  color: var(--primary);
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 10px;
}
.xs-callout.is-visible {
  display: flex;
  animation: xs-callout-in 0.25s ease-out;
}
.xs-callout i {
  font-size: 16px;
}
@keyframes xs-callout-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xs-callout.is-visible {
    animation: none;
  }
}
.single_variation .woocommerce-variation-price .price {
  color: var(--primary);
  font-weight: 600;
}
.single_variation:empty {
  display: none;
}
.product-box-btn .js-pd-buy-now.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* "Usually bought together", Walmart-style: an open tile strip — only the
   CURRENT product is outlined (primary), the rest are plain tiles with the
   checkbox row underneath — over a summary bar (hairline, total + one pill
   action). The strip never wraps: extra items scroll horizontally, so a
   12-item bundle becomes a swipeable slider. */
.tab-usually {
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-4) transparent;
  /* the template centers this row — with overflow, a centered flex strip
     clips its START side beyond the reachable scroll range (items "stuck"
     off the right edge in RTL). Start-align and center via the auto-margin
     pair below, which collapses safely when the strip overflows. */
  justify-content: flex-start;
}
.tab-usually > :first-child {
  margin-inline-start: auto;
}
.tab-usually > :last-child {
  margin-inline-end: auto;
}
.tab-usually > .icon {
  align-self: center;
  flex: none;
}
.tab-usually .card-usually {
  flex: none;
  width: 200px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  /* the primary outline marks every SELECTED item; deselecting drops it */
  border: 1px solid var(--primary);
  transition: border-color 0.2s ease;
}
.tab-usually .card-usually.is-off {
  border-color: transparent;
}
.tab-usually .card-usually.is-off:hover {
  border-color: var(--gray-4);
}
.tab-usually .card-usually .image {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-usually .card-usually .image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.tab-usually .card-usually.is-off .image,
.tab-usually .card-usually.is-off .box-name {
  opacity: 0.45;
}
.tab-usually .checkbox-item-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  /* names wrap to different line counts — pin the check to the tile bottom
     so the whole strip's checkboxes sit on one line */
  margin-top: auto;
}
/* summary bar: the strip's one loud row — total + a single action */
.ubt-bar {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.ubt-bar .ubt-total-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
@media (max-width: 767px) {
  .tab-usually {
    gap: 10px;
  }
  .tab-usually .card-usually {
    width: 150px;
  }
  .tab-usually .card-usually .image {
    height: 110px;
  }
  .tab-usually > .icon .icon-plus {
    font-size: 16px;
  }
  .ubt-bar .tf-btn {
    width: 100%;
  }
}

/* Topbar pages menu: WP renders a plain ul inside the template's tf-topbar
   strip — lay it out as the topbar's inline body-small links. The strip
   stays THIN (the template inflates it to 12px padding on desktop). */
.tf-topbar {
  padding: 5px 0;
}
.tf-topbar .topbar-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  list-style: none;
  margin: 0;
  padding: 2px 0; /* thin strip — the template's own 5px does the rest */
}
.tf-topbar .topbar-menu a {
  font-size: 13px;
  line-height: 20px;
  color: var(--gray-2) !important; /* WP current-item classes + template link
                                      colors paint some links blue */
}
.tf-topbar .topbar-menu a:hover {
  color: var(--secondary) !important;
}
/* the category nav row: 8 Hebrew names squeeze and wrap mid-name */
.main-nav-menu .nav-list a,
.nav-category-wrap .title {
  white-space: nowrap;
}

/* "כל הקטגוריות" dropdown — RTL: the template anchors it left:0 (LTR), so at
   285px it overshoots rightward instead of sitting under the trigger. Anchor to
   the reading-start (right) edge so its right edge lines up with the trigger. */
[dir="rtl"] .category-menu {
  right: 0;
  left: auto;
}
/* Fully expanded (all levels open by default) can get very tall, so cap the
   panel and let it scroll internally — a firm ceiling keeps it compact on tall
   monitors, while staying within the viewport on short ones. */
.category-menu {
  max-height: min(620px, calc(100vh - 170px));
  overflow-y: auto;
}
/* Slim brand-blue scrollbar, matching the site's regular (body) scrollbar.
   Webkit-only on purpose: adding the standard scrollbar-width/-color makes
   Chrome ignore these ::-webkit rules and fall back to a fat ~11px system bar. */
.category-menu::-webkit-scrollbar {
  width: 3px;
}
.category-menu::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 5px;
}
/* Inline sub-category accordion inside that dropdown (the Onsus category menu
   ships as a flat list). Mirrors the shop sidebar's facet accordion: a chevron
   toggle per parent, children expand inline below. */
.category-menu .cat-menu-row {
  display: flex;
  align-items: center;
}
.category-menu .cat-menu-row > a {
  flex: 1;
  min-width: 0;
}
.category-menu .cat-menu-toggle {
  flex: none;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  margin: 0;
  cursor: pointer;
  color: var(--main);
  line-height: 1;
}
.category-menu .cat-menu-toggle .icon-arrow-right {
  display: inline-block;
  font-size: 13px;
  transition: transform 0.2s ease;
}
[dir="rtl"] .category-menu .cat-menu-toggle .icon-arrow-right {
  transform: scaleX(-1);
}
.category-menu .menu-item.is-open > .cat-menu-row .cat-menu-toggle .icon-arrow-right {
  transform: rotate(90deg);
}
.category-menu .cat-submenu {
  display: none;
  list-style: none;
  /* indent per level — compounds through nesting so grandchildren sit deeper */
  padding-inline-start: 18px;
  padding-inline-end: 0;
  margin: 0 0 6px;
}
.category-menu .menu-item.is-open > .cat-submenu {
  display: block;
}
.category-menu .cat-submenu a {
  font-size: 13px;
  color: var(--text-2);
}

/* Mobile cart — built to the user's reference file
   (~/Documents/"Cart Page - Standalone.html"): gray backdrop, flat white
   blocks (radius 0, soft shadow), item card = 84px thumb + name with a
   small quiet ✕, "ליחידה" price, hairline, then qty pill vs. the labeled
   line total; summary card rows; stacked actions with the total in the
   CTA. Brand colors come from our tokens instead of the mock's. */
@media (max-width: 767px) {
  .s-shoping-cart .container > .woocommerce-cart-form,
  .s-shoping-cart .container > .box-btn {
    display: flex;
    flex-direction: column;
  }
  .tf-table-page-cart {
    width: 100%;
    display: block;
  }
  .tf-table-page-cart thead {
    display: none;
  }
  .tf-table-page-cart tbody {
    display: grid;
    gap: 12px;
  }
  .tf-table-page-cart tr.tf-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'product product'
      'rule rule'
      'qty total';
    row-gap: 10px;
    padding: 14px;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  }
  /* the hairline between info and controls, as its own grid row */
  .tf-table-page-cart tr.tf-cart-item::after {
    content: '';
    grid-area: rule;
    height: 1px;
    background: var(--gray-5);
  }
  .tf-table-page-cart td,
  .tf-table-page-cart tr > *,
  .tf-table-page-cart tr > *:first-child,
  .tf-table-page-cart tr > *:last-child {
    width: auto;
    padding: 0;
    border: 0;
  }
  /* small quiet ✕ pinned to the card's top end, beside the name */
  .tf-table-page-cart .remove-cart {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    line-height: 1;
  }
  .s-shoping-cart .tf-table-page-cart .remove-cart a.remove {
    font-size: 12px;
    /* !important: Woo core's .woocommerce a.remove is red !important */
    color: var(--gray-2) !important;
  }
  .tf-table-page-cart .tf-cart-item_product {
    grid-area: product;
    padding-inline-end: 32px; /* clears the ✕ */
  }
  .tf-table-page-cart .img-box {
    max-width: 84px;
    height: 84px;
    background: var(--gray-6);
    border: 1px solid var(--gray-5);
  }
  .tf-table-page-cart .cart-title {
    font-size: 16px;
    font-weight: 700;
  }
  .tf-table-page-cart .tf-cart-item_price {
    display: none; /* the unit price renders under the name (xs-unit-price) */
  }
  .tf-table-page-cart .xs-unit-price {
    margin: 4px 0 0;
  }
  /* qty pill: gray track, white square buttons, bold count */
  .tf-table-page-cart .tf-cart-item_quantity {
    grid-area: qty;
  }
  .tf-table-page-cart .tf-cart-item_quantity .wg-quantity {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--gray-6);
    padding: 4px;
    width: fit-content;
    border: 0;
  }
  .tf-table-page-cart .wg-quantity .btn-quantity {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    border: 0;
    border-radius: 4px; /* the site's button radius */
  }
  .tf-table-page-cart .wg-quantity .quantity-product {
    width: 36px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    border: 0;
    background: transparent;
    color: var(--gray);
  }
  /* line total: small label over a heavy number, at the row's far end */
  .tf-table-page-cart .tf-cart-item_total {
    grid-area: total;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
  }
  .tf-table-page-cart .tf-cart-item_total::before {
    content: attr(data-cart-title);
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-2);
  }
  .tf-table-page-cart .tf-cart-item_total .price-text {
    font-size: 18px;
    font-weight: 800;
  }
  /* coupon: white block, borderless input, dark button */
  .cart-bottom .ip-discount-code {
    background: var(--white);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 6px;
    gap: 6px;
  }
  .cart-bottom .ip-discount-code input {
    border: 0;
    background: transparent;
    border-radius: 0 !important; /* the template forces 8px !important */
  }
  /* the template pill-rounds the attached button (and rtl.css re-flips it,
     loading after this sheet — hence the heavier selector): inside the flat
     block every button wears the site's uniform 4px */
  .s-shoping-cart .cart-bottom .ip-discount-code .tf-btn {
    border-radius: 4px;
  }
  /* summary card: quiet rows, hairline, heavy total */
  .cart-bottom .xs-cart-totals {
    width: 100%;
    background: var(--white);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 16px;
    display: grid;
    gap: 10px;
    justify-items: stretch; /* the desktop stack end-aligns and shrinks rows */
  }
  .xs-totals-line {
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: var(--gray-2);
  }
  .xs-free-ship {
    color: var(--brand-green);
    font-weight: 600;
  }
  .xs-cart-totals .xs-totals-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px solid var(--gray-5);
  }
  .xs-cart-totals .xs-totals-total > span:first-child {
    font-size: 16px;
    font-weight: 700;
  }
  .xs-cart-totals .xs-totals-total .woocommerce-Price-amount {
    font-size: 22px;
    font-weight: 800;
  }
  /* actions: heavy full-width CTA with the total, quiet outlined continue */
  .xs-cart-actions {
    flex-direction: column;
    gap: 10px;
  }
  .xs-cart-actions .tf-btn {
    width: 100%;
  }
  .xs-cart-actions .tf-btn:not(.btn-gray) {
    order: -1;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(1, 115, 237, 0.28);
  }
  /* out-specify the cart button-pair rule (green btn-gray) above */
  .s-shoping-cart .xs-cart-actions .tf-btn.btn-gray,
  .s-shoping-cart .xs-cart-actions .tf-btn.btn-gray:hover {
    background-color: var(--white);
    border: 1.5px solid var(--gray-4);
    padding: 14px;
    font-weight: 700;
  }
  .s-shoping-cart .xs-cart-actions .tf-btn.btn-gray .text-white {
    /* !important: bootstrap's .text-white is color:#fff!important */
    color: var(--brand-green) !important;
  }
  .xs-secure-note {
    margin-top: 12px;
  }
}

/* The product "about" bullets: the template marks up this block as ul > li > p
   and draws the 4px dot on the p (`.product-about-list p::before`). The WP
   editor emits <li> without an inner <p>, so no rule matches and lists render
   bare. Draw the template's dot on the li instead (logical properties for RTL)
   and suppress the p dot inside li so the template's own structure keeps a
   single marker. */
.tf-product-info-content .product-about-list li {
  padding-inline-start: 16px;
  position: relative;
}
.tf-product-info-content .product-about-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--gray-2);
}
.tf-product-info-content .product-about-list li p::before {
  content: none;
}
.tf-product-info-content .product-about-list li p {
  padding-left: 0;
}
.tf-product-info-content .product-about-list ul {
  display: grid;
  gap: 10px;
}

/* PhotoSwipe's UI (counter "1/5", arrow order, toolbar layout) assumes LTR;
   inheriting the page's dir="rtl" scrambles it. Render the lightbox LTR like
   the template. */
.pswp {
  direction: ltr;
}
/* WP core's classic-theme-styles.css sets img { max-width: 100% }, which
   collapses PhotoSwipe's absolutely-positioned slide image (its zoom-wrap
   parent is shrink-to-fit, so 100% resolves to 0). The static template has no
   such global rule; restore PhotoSwipe's expectation. */
.pswp img {
  max-width: none;
}
/* When the info content + buy-box sit side by side (>=1400px), the template's
   width:100% on the buy-box breaks the flex sizing; give it its natural width so
   the content fills the rest of the column instead of overflowing it. */
@media (min-width: 1400px) {
  .tf-product-info-list .tf-product-info-choose-option {
    width: auto;
  }
}

/* Promo banner (ACF image background + overlay text) */
.banner-promo {
  min-height: 280px;
  background-size: cover;
  background-position: center;
  background-color: #0b1020;
  display: flex;
}
.banner-promo-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 56px;
  max-width: 60%;
  background: linear-gradient(270deg, transparent, rgba(11, 16, 32, 0.78));
}
@media (max-width: 767px) {
  .banner-promo-inner { max-width: 100%; padding: 28px; }
}

/* Pagination: the template's wg-pagination is bare text — styles.css only
   sizes 40px cells and colors the active number blue, which reads unfinished
   next to the store's boxed option/quantity components (rejected in review).
   Reuse the site's option-box language: hairline 4px tiles, current page as
   a solid primary tile. Markup is ours (pagination.blade.php): .dots marks
   the ellipsis cell, li.active carries the current page. */
.wg-pagination {
  gap: 8px;
  border-top: 0;
  padding-top: 0;
}
.wg-pagination li {
  border: 1px solid var(--gray-5);
  border-radius: 4px;
  background: var(--white);
  transition: border-color 0.2s ease;
}
.wg-pagination li.dots {
  border: 0;
  background: transparent;
}
.wg-pagination li:not(.dots, .active):hover {
  border-color: var(--main);
}
.wg-pagination li.active {
  background: var(--primary);
  border-color: var(--primary);
}
.wg-pagination li.active > * {
  color: var(--white);
}
.wg-pagination li > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-pagination li > a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Blog article body: the template styles CLASSED elements (p.text,
   .entry_image.has-sub) but WordPress the_content() emits bare tags, and the
   template's global reset strips list bullets and blockquote styling. Restore
   them inside .main-content only, using the template's own vocabulary
   (.main-content is a 20px grid, .caption is 12/22, radius stays 4px). */
.s-blog-detail .main-content ul,
.s-blog-detail .main-content ol {
  display: grid;
  gap: 8px;
  padding-inline-start: 22px;
}
.s-blog-detail .main-content ul li {
  list-style: disc;
}
.s-blog-detail .main-content ol li {
  list-style: decimal;
}
.s-blog-detail .main-content blockquote {
  border-inline-start: 3px solid var(--primary);
  padding: 12px 20px;
  background: var(--gray-6);
  border-radius: 4px;
}
.s-blog-detail .main-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.s-blog-detail .main-content figure {
  margin: 0;
  display: grid;
  gap: 8px;
  text-align: center;
}
.s-blog-detail .main-content figcaption {
  font-size: 12px;
  line-height: 22px;
  color: var(--text-2);
}
/* The template's parallax hero asset is a wide banner; WP featured images are
   arbitrary aspect (often square product shots), which would overflow the
   template's fixed 410px .parallax-image box. Crop to the box like a banner —
   scoped to blog posts so future template pages using .parallax-image keep
   their own sizing. */
.single-post .parallax-image {
  height: 520px;
  max-height: 520px;
  overflow: hidden;
}
.single-post .parallax-image img {
  width: 100%;
  height: 520px;
  max-height: 520px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .single-post .parallax-image,
  .single-post .parallax-image img {
    height: auto;
    max-height: none;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

/* Header live search: the template ships no suggestion panel — built from its
   own dropdown vocabulary (.select-options: white, 8px radius, the same
   0 4px 8px 5% shadow) under the pill search bar. */
.form-search-product {
  position: relative;
}
.xs-live-search {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  z-index: 999;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--gray-5);
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
  max-height: 420px;
  overflow-y: auto;
}
.xs-live-search.is-open {
  display: block;
}
.xs-ls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 4px;
}
.xs-ls-item:hover,
.xs-ls-item.is-active {
  background: var(--gray-6);
}
.xs-ls-item img {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--gray-5);
  border-radius: 4px;
  background: var(--white);
}
.xs-ls-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xs-ls-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--main);
  white-space: nowrap;
}
.xs-ls-price del {
  color: var(--text-2);
  font-weight: 400;
  margin-inline-end: 6px;
}
.xs-ls-empty {
  padding: 10px;
  color: var(--text-2);
  margin: 0;
}
.xs-ls-all {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  border-top: 1px solid var(--gray-5);
  margin-top: 4px;
}

/* Chat assistant (assistant.js) — the owner-supplied "3c minimal" design
   (AI Assistant Design/AI Assistant.dc.html), mapped to brand tokens:
   its blues/greens become --primary/--brand-green. Gradient shell, white
   sheet, avatar bubbles, suggestion chips, compact product rows. */
.xs-chat-launcher {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: 1040;
  width: 64px;
  height: 64px;
}
.xs-chat-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--brand-green));
  animation: xs-chat-ring 2.2s ease-out infinite;
}
.xs-chat-fab {
  position: relative;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 20%, var(--brand-green) 120%);
  color: var(--white);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(1, 115, 237, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.xs-chat-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 34px rgba(1, 115, 237, 0.55);
}
.xs-chat-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 22px;
  height: 22px;
  background: var(--error);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  border-radius: 999px;
  border: 2px solid var(--white);
  pointer-events: none;
}
.xs-chat-launcher.is-seen .xs-chat-badge {
  display: none;
}
.xs-chat-panel {
  display: none;
  position: fixed;
  bottom: 96px;
  inset-inline-start: 20px;
  z-index: 1040;
  width: 388px;
  max-width: calc(100vw - 24px);
  height: min(680px, 86vh);
  /* #2e8fd6 = the owner design's third gradient stop (between the two brand tokens) */
  background: linear-gradient(160deg, var(--primary) 0%, #2e8fd6 55%, var(--brand-green) 140%);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(19, 34, 63, 0.35);
  flex-direction: column;
  overflow: hidden;
}
.xs-chat-panel.is-open {
  display: flex;
  animation: xs-chat-panel-in 0.28s ease;
}
.xs-chat-head {
  padding: 20px 22px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
}
.xs-chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--primary);
  flex: none;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(10, 22, 46, 0.15);
}
.xs-chat-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
.xs-chat-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.xs-chat-title {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.2px;
}
.xs-chat-subtitle {
  font-size: 13px;
  opacity: 0.85;
}
.xs-chat-close {
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex: none;
  transition: background 0.2s ease;
}
.xs-chat-close:hover {
  background: rgba(255, 255, 255, 0.35);
}
.xs-chat-sheet {
  flex: 1;
  min-height: 0;
  background: var(--white);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.xs-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xs-chat-msg {
  animation: xs-chat-msg-in 0.25s ease;
}
.xs-chat-msg.is-bot {
  display: flex;
  gap: 9px;
  align-items: flex-end;
}
.xs-chat-msg-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--brand-green));
  color: var(--white);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xs-chat-msg-text {
  max-width: 84%;
  background: var(--gray-6);
  border-radius: 16px 16px 16px 4px;
  padding: 11px 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--main);
  white-space: pre-line;
  word-break: break-word;
}
.xs-chat-msg.is-user {
  align-self: flex-end;
  max-width: 78%;
  background: linear-gradient(120deg, var(--primary), #2e8fd6);
  color: var(--white);
  border-radius: 16px 16px 4px 16px;
  padding: 11px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(1, 115, 237, 0.25);
  white-space: pre-line;
  word-break: break-word;
}
.xs-chat-products {
  display: flex;
  flex-direction: column;
  /* overflow:hidden makes min-height:auto resolve to 0, so as a flex child
     of the scrolling body this container absorbs ALL the shrink in long
     conversations and collapses to its border. Never shrink it. */
  flex: none;
  margin-inline-start: 35px;
  border: 1px solid var(--gray-5);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(19, 34, 63, 0.05);
}
.xs-chat-product {
  background: var(--white);
  padding: 13px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--gray-6);
  transition: background 0.2s ease;
}
.xs-chat-product:last-child {
  border-bottom: 0;
}
.xs-chat-product:hover {
  background: var(--gray-6);
}
.xs-chat-product-img {
  width: 48px;
  height: 48px;
  flex: none;
  object-fit: contain;
  border: 1px solid var(--gray-6);
  border-radius: 10px;
  background: var(--white);
}
.xs-chat-product-text {
  flex: 1;
  min-width: 0;
}
.xs-chat-product-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xs-chat-product-meta {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 2px;
}
.xs-chat-product-price,
.xs-chat-product-price .woocommerce-Price-amount {
  color: var(--primary);
  font-weight: 700;
}
/* on-sale: get_price_html() emits <del>original</del> <ins>sale</ins> — mute
   the struck-through original so the sale price reads as the live one */
.xs-chat-product-price del,
.xs-chat-product-price del .woocommerce-Price-amount {
  color: var(--text-2);
  font-weight: 400;
}
.xs-chat-product-price ins {
  text-decoration: none;
  margin-inline-start: 5px;
}
.xs-chat-chevron {
  flex: none;
  color: var(--gray-4);
  font-size: 18px;
  line-height: 1;
}
.xs-chat-add {
  flex: none;
  border: 0;
  background: var(--brand-green);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.xs-chat-add:hover {
  opacity: 0.85;
}
.xs-chat-add:disabled {
  opacity: 0.5;
  cursor: default;
}
.xs-chat-add.is-added {
  background: var(--main);
}
.xs-chat-choose {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}
.xs-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: 35px;
}
.xs-chat-chip {
  border: 1.5px solid rgba(1, 115, 237, 0.4);
  background: var(--white);
  color: var(--primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.xs-chat-chip:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.xs-chat-typing .xs-chat-msg-text {
  display: flex;
  gap: 5px;
  padding: 14px 16px;
}
.xs-chat-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-4);
  animation: xs-chat-dot 1s infinite;
}
.xs-chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.xs-chat-typing i:nth-child(3) { animation-delay: 0.3s; }
.xs-chat-form {
  border-top: 1px solid var(--gray-6);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
}
.xs-chat-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--main);
}
.xs-chat-form input:focus {
  outline: none;
}
.xs-chat-form button {
  border: 0;
  background: linear-gradient(120deg, var(--primary), var(--brand-green));
  color: var(--white);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(1, 115, 237, 0.3);
  transition: transform 0.2s ease;
}
.xs-chat-form button:hover {
  transform: scale(1.08);
}
.xs-chat-form button span {
  display: inline-block;
  transform: scaleX(-1);
}
.xs-chat-form.is-pending button {
  opacity: 0.5;
  pointer-events: none;
}
@keyframes xs-chat-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes xs-chat-panel-in {
  0% { opacity: 0; transform: translateY(16px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xs-chat-msg-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes xs-chat-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .xs-chat-ring,
  .xs-chat-typing i {
    animation: none;
  }
  .xs-chat-panel.is-open,
  .xs-chat-msg {
    animation: none;
  }
}
/* The launcher and the open panel are mutually exclusive — hide the FAB while
   the chat is open (it otherwise overlaps the panel, worst on mobile). */
.xs-chat-launcher.is-open {
  display: none;
}
@media (max-width: 767.98px) {
  /* Smaller launcher on phones — 64px crowds the screen. */
  .xs-chat-launcher { bottom: 16px; inset-inline-start: 12px; width: 50px; height: 50px; }
  .xs-chat-fab { width: 50px; height: 50px; font-size: 20px; }
  /* Full-screen chat on phones (the boxed panel overflowed the viewport and
     clipped the header). dvh keeps it correct under the mobile browser bar. */
  .xs-chat-panel {
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    border-radius: 0;
  }
  .xs-chat-panel.is-open {
    height: 100dvh;
  }
}

/* Login/register popups: the template pins the close button to the physical
   right (top: right: 15px), which on the RTL site overlaps the right-aligned
   title. Move it to the reading-end side (physical left). */
.modal-log .modal-content .icon-close {
  right: auto;
  left: 15px;
}

/* Auth popups: hidden honeypot + inline form message. */
.form-log .xs-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-log .form-msg {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--gray-6);
  color: var(--main);
}
.form-log .form-msg.is-error {
  background: rgba(216, 0, 39, 0.08);
  color: var(--error);
}

/* Account orders: map WooCommerce order statuses to the template's status
   colours (text-delivered green / text-on-the-way red), plus a neutral for
   cancelled/failed. */
.account-orders-table .order-status-completed {
  color: #008a00;
}
.account-orders-table .order-status-processing,
.account-orders-table .order-status-on-hold,
.account-orders-table .order-status-pending {
  color: var(--primary);
}
.account-orders-table .order-status-cancelled,
.account-orders-table .order-status-failed,
.account-orders-table .order-status-refunded {
  color: #ff4848;
}

/* Edit-address form: WooCommerce generates the fields as floated .form-row
   blocks (first/last half-width floats, the rest full-width) which lay out
   unevenly. Re-flow them into the account form's clean 2-column grid — the
   .input-text styling is already shared with the edit-account form, so this
   only fixes layout: first/last side-by-side, everything else full-width,
   labels above, inputs filling the cell. */
.wd-form-address .form-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
  align-items: start;
}
.wd-form-address .form-content .form-row {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.wd-form-address .form-content .form-row-wide {
  grid-column: 1 / -1;
}
.wd-form-address .form-content .form-row > label {
  display: block;
  margin-bottom: 8px;
}
.wd-form-address .form-content .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}
.wd-form-address .form-content .form-row input.input-text,
.wd-form-address .form-content .form-row textarea,
.wd-form-address .form-content .form-row select {
  width: 100%;
}
.wd-form-address .form-content .form-row input.input-text:focus,
.wd-form-address .form-content .form-row textarea:focus,
.wd-form-address .form-content .form-row select:focus {
  border-color: var(--primary);
}
@media (max-width: 575.98px) {
  .wd-form-address .form-content {
    grid-template-columns: 1fr;
  }
}

/* Account content column: WooCommerce's layout CSS floats
   .woocommerce-MyAccount-content to a fixed % width, which fights our own
   Bootstrap col-lg-9/col-lg-3 account layout and leaves a big empty gap
   between the content and the sidebar. Let it fill the column (fixes every
   account page: dashboard, orders, addresses, edit, view-order). */
.woocommerce .col-lg-9 > .woocommerce-MyAccount-content {
  width: 100%;
  float: none;
  margin: 0;
}
.woocommerce .account-orders-table,
.woocommerce .tf-order_history-table {
  width: 100%;
}

/* View-order: a back link to the orders list (RTL — the arrow points to the
   reading-start side and nudges on hover). */
.account-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--main);
}
.account-back-link:hover {
  color: var(--primary);
}
.account-back-link .icon-arrow-right {
  font-size: 13px;
  transition: transform 0.2s ease;
}
[dir="rtl"] .account-back-link .icon-arrow-right {
  transform: scaleX(-1);
}
[dir="rtl"] .account-back-link:hover .icon-arrow-right {
  transform: scaleX(-1) translateX(-3px);
}

/* Account forms: breathing room before the submit button (it sat flush against
   the last field). */
.form-account-details .box-btn,
.wd-form-address .box-btn {
  margin-top: 24px;
}
/* Edit-account: even vertical rhythm between fields. */
.form-account-details .form-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* View-order: the template's .tf-order-detail is a 30px-gap grid tuned for the
   airy confirmation page; tighten it for the account panel. The back link and
   overview rows rely on the grid gap, not extra margins. */
.account-view-order.tf-order-detail {
  gap: 22px;
}
.account-view-order .account-back-link {
  margin-bottom: 0;
}
.account-view-order .order-overview-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-view-order .order-overview-list li {
  margin-bottom: 6px;
  line-height: 1.7;
}

/* Orders table: <th> defaults to centered and something upstream forces the
   table to LTR, so `start` resolved to left. Pin RTL + right-align every cell
   so headers and content read consistently right-to-left. */
.account-orders-table {
  direction: rtl;
}
.account-orders-table th,
.account-orders-table td,
.tf-order_history-table .account-orders-table tr > :first-child {
  text-align: right;
}

/* Edit-account: separate the "personal details" and "change password" blocks. */
.form-account-details .wrap + .wrap {
  margin-top: 34px;
}

/* Product upgrades (ערכות שדרוג) — option rows in the buy box. The template
   styles its selectable rows only inside the shop sidebar scope
   (.widget-facet .fieldset-item, styles.css:7539); the buy box needs the same
   flex row unscoped, with the price hugging the row end (the .facet-count
   auto-margin idiom, custom.css above). */
.xs-upg-option {
  gap: 10px;
  cursor: pointer;
}
.xs-upg-option .xs-upg-price {
  margin-inline-start: auto;
  color: var(--gray-2);
}
.xs-upgrades .box-fieldset-item {
  display: grid;
  gap: 8px;
}
/* Option thumbnail: the template has no compact image-in-a-selectable-row
   pattern (its only image option row is the full 200px bought-together tile,
   far too large for the info column). Small contained thumb, same 4px radius
   and gray-5 hairline as the variant pills / card imagery. */
.xs-upg-option .xs-upg-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--gray-5);
  background-color: var(--white);
  flex: none;
}

/* Infinite-scroll sentinel (shop grid): a zero-area div is an unreliable
   IntersectionObserver target in some engines — give it a hairline body. */
.xs-scroll-sentinel {
  height: 1px;
}

/* Infinite-scroll feedback: ghost cards pulse in the next grid row while a
   page fetches, so the grid end never reads as "that's everything". The
   template ships no skeleton/placeholder pattern — minimal blocks on the
   brand grays, card-matching radii. */
.xs-skel {
  display: grid;
  gap: 10px;
  align-content: start;
}
.xs-skel-img {
  aspect-ratio: 1;
  border-radius: 8px;
  background-color: var(--gray-5);
}
.xs-skel-line {
  height: 14px;
  border-radius: 4px;
  background-color: var(--gray-5);
}
.xs-skel-line.short {
  width: 60%;
}
.xs-skel-img,
.xs-skel-line {
  animation: xs-skel-pulse 1.2s ease-in-out infinite;
}
@keyframes xs-skel-pulse {
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .xs-skel-img,
  .xs-skel-line {
    animation: none;
  }
}

/* List mode (phones default): applyLayout stamps .style-row on real cards
   only, so the ghosts need their own row shape — small thumb beside the
   lines, like the product rows they stand in for. */
.layout-tablist-1 .xs-skel {
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
}
.layout-tablist-1 .xs-skel .xs-skel-img {
  grid-row: 1 / 3;
  width: 100px;
}
/* Loading status under the ghost rows: a thin ring with a brand-primary arc
   (the template ships no spinner) over a short line of copy. */
.xs-skel-note {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 0 6px;
  text-align: center;
}
.xs-loader {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gray-5);
  border-top-color: var(--primary);
  animation: xs-loader-spin 0.9s linear infinite;
}
@keyframes xs-loader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .xs-loader {
    animation: none;
  }
}

/* Filter/sort feedback (KSP-style): while the grid refetches, the current
   products stay visible but dim under a scrim, and a ring spinner holds the
   viewport center; the fresh grid swaps in when ready. shop-filter.js keeps
   .is-loading on #shopGrid for the whole fetch. The spinner is centered with
   calc (not translate) so the rotate animation owns transform. */
#shopGrid {
  position: relative;
}
#shopGrid.is-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000; /* over the sticky header/sidebar — the WHOLE page dims */
  background: rgba(0, 0, 0, 0.4);
}
#shopGrid.is-loading::after {
  content: "";
  position: fixed;
  top: calc(50% - 34px);
  left: calc(50% - 34px);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  /* white plate + shadow so the ring reads over anything beneath */
  background-color: var(--white);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  border: 4px solid var(--gray-5);
  border-top-color: var(--primary);
  z-index: 2001;
  animation: xs-loader-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #shopGrid.is-loading::after {
    animation: none;
  }
}

/* Product overview rows: the template caps the label column at 72px
   (styles.css:5726) — sized for its short English demo labels. Hebrew spec
   labels ("טכנולוגיית צבע לילה", "דירוג עמידות") wrapped to two lines;
   widen the column so every label sits on one line. */
.tf-product-info-content .product-fearture-list li p {
  width: 140px;
  flex: none;
}

/* Product promo card (under the buy box) — built from the supplied
   Purchase Panel Redesign, option 4d: accent bar + bold heading, a 2×2 grid
   of stat tiles (big primary value over a small caption), WhatsApp footer
   row. Same card class as the buy box so the widths always match; the
   design's palette mapped onto the brand tokens. */
.xs-promo-card {
  margin-top: 20px;
  gap: 14px;
}
.xs-promo-card .xs-promo-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.xs-promo-card .xs-promo-bar {
  width: 4px;
  height: 19px;
  border-radius: 2px;
  background-color: var(--primary);
  flex: none;
}
.xs-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.xs-promo-tile {
  background-color: rgba(16, 36, 64, 0.04);
  border-radius: 6px;
  padding: 12px 13px;
}
/* type comes from the site classes (price-text / caption) on the markup */
.xs-promo-small {
  margin-top: 2px;
}
.xs-promo-card .xs-wa-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px -20px -20px;
  padding: 13px 20px;
  border-top: 1px solid var(--gray-5);
  color: var(--brand-green);
}
.xs-promo-card .xs-wa-link:hover {
  background-color: rgba(54, 207, 8, 0.07);
}
.xs-promo-card .xs-wa-link i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--brand-green);
  color: var(--white);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Product page: on md+ the breadcrumb lives inside the info column, directly
   above the category line — exact alignment with the content instead of a
   full-width strip with the template's 50px of air under it (.tf-sp-1). The
   section keeps a modest top offset of its own. */
.xs-pdp-main {
  padding-top: 20px;
}
.xs-pdp-crumbs {
  margin-bottom: 6px;
}

/* Product row balance: the contained photo leaves dead whitespace on its
   inner side, so the info block looked stranded far from the image. Narrow
   the media column and widen the info side — the text moves toward the
   photo, into the middle of the page. Desktop only. */
@media (min-width: 1200px) {
  .xs-pdp-main .row > .col-md-6:nth-child(1) {
    width: 44%;
  }
  .xs-pdp-main .row > .col-md-6:nth-child(2) {
    width: 56%;
  }
}

/* Buy box quantity — per the supplied purchase-panel redesign: the כמות
   label sits inline beside ONE joined segmented control [+ | 1 | −] with
   hairline dividers, replacing the template's floating circles. Scoped to
   the buy box; cart page/drawer keep their own steppers. */
.tf-product-info-choose-option .product-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tf-product-info-choose-option .product-quantity .title {
  margin-bottom: 0;
}
.tf-product-info-choose-option .wg-quantity {
  gap: 0;
  border: 1px solid var(--gray-4);
  border-radius: 8px;
}
.tf-product-info-choose-option .wg-quantity .btn-quantity {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: none;
}
.tf-product-info-choose-option .wg-quantity .quantity-product {
  width: 44px;
  height: 38px;
  border-radius: 0;
  border-inline: 1px solid var(--gray-5);
  color: inherit;
}

/* Buy column width: the template caps the buy box at ~260px and lets the
   info column swallow the rest — rebalance: a roomier 330px buy column
   (box + promo card fill it), the info column narrows by the same amount.
   Desktop only; the media column's own sticky wrapper is untouched. */
@media (min-width: 1200px) {
  .tf-product-info-list .sticky-top {
    flex: none;
    width: 330px;
  }
  .tf-product-info-list .tf-product-info-choose-option {
    max-width: 100%;
  }
}

/* Category-nav item icons (menu-item ACF image): sit inline before the
   label, sized to the nav text; the row keeps its baseline alignment. */
.main-nav-menu .nav-list .menu-item a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.xs-nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: none;
}

/* In-article product frame ([xs_product]): the template has no pattern for a
   product embedded in prose — a quiet frame around the shop's own card, with
   breathing room from the text. The inner card reuses the shop list/grid
   classes wholesale. */
.xs-post-product {
  border: 1px solid var(--gray-5);
  border-radius: 8px;
  padding: 16px;
  margin: 24px 0;
}

/* Blog grid (posts index + category/tag archives): the section shipped with
   no tf-sp spacing class, so when the sidebar is the tallest column its tags
   block ran straight into the footer. Bottom padding only - the breadcrumb
   strip above already provides the top gap. */
.xs-blog-grid {
  padding-bottom: 50px;
}

/* Contact Form 7 inside the template's own form styling (form.def, as on the
   contact page): the fields, labels and button take the template's rules
   untouched. CF7's validation and response markup isn't in the template, so
   it gets the template's colours and radius here. */
.xs-cf7 .wpcf7-not-valid {
  border-color: #dc3232;
}
.xs-cf7 .wpcf7-not-valid-tip {
  font-size: 12px;
  margin-top: 2px;
}
.xs-cf7 .wpcf7-response-output {
  margin: 0;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 14px;
}
/* The template styles the contact card only inside .wg-map (the contact
   page's map wrapper, which also reserves 167px at the bottom for the
   floating info box). The shared lead box (blog footer, home builder
   section) reuses that card outside the wrapper, so the card chrome is
   repeated here with the template's own values. */
.xs-lead-box {
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1019607843);
  background-color: var(--white);
}
.xs-cf7 .wpcf7-spinner {
  margin-inline-start: 10px;
}
/* CF7 renders its submit as <input type="submit">, and the template's
   form input[type=submit] reset (transparent, no padding) outranks the tf-btn
   classes the shortcode puts on it. Re-assert only what that reset strips,
   with the template button's own values, so it renders as the tf-btn the
   contact page shows. */
.xs-cf7 input.wpcf7-submit {
  background-color: var(--primary);
  color: var(--white);
  padding: 10px 16px;
  border: 0;
  cursor: pointer;
}
.xs-cf7 input.wpcf7-submit:hover {
  background-color: var(--gray);
}

/* Home lead band (approved design C, under the FAQ): the template has no
   solid-colour CTA band, only image banners, so the band's own colours live
   here on the brand tokens. Layout is template utilities (radius-8,
   bg-primary, Bootstrap row/cols); this only sets what the band needs to
   read on blue (after the generic .xs-cf7 submit rule it overrides): white copy, white fields, a dark button, and the spacing
   from the design. */
.xs-lead-band {
  padding: 34px 40px;
  margin-top: 40px;
}
.xs-lead-band .body-text-3 {
  color: #d6e7fb;
  margin-top: 6px;
}
.xs-lead-band .wpcf7-form-control-wrap {
  display: block;
}
.xs-lead-band input[type="text"],
.xs-lead-band input[type="tel"] {
  border-color: var(--white);
  height: 48px;
}
.xs-lead-band input.wpcf7-submit {
  background-color: var(--gray);
  height: 48px;
}
.xs-lead-band input.wpcf7-submit:hover {
  background-color: var(--brand-green);
}
.xs-lead-band .xs-consent,
.xs-lead-band .xs-consent a {
  color: var(--white);
}
.xs-lead-band .xs-consent {
  margin-top: 14px;
  font-size: 13px;
}
.xs-lead-band .xs-consent input[type="checkbox"] {
  accent-color: var(--white); /* the shared blue accent vanishes on the blue band */
}
.xs-lead-band .wpcf7-not-valid-tip {
  color: var(--white);
}
.xs-lead-band .xs-form-done h6,
.xs-lead-band .xs-form-done p {
  color: var(--white);
}
@media (max-width: 767px) {
  .xs-lead-band {
    padding: 24px 20px;
  }
}

/* Blog cards: featured images arrive in whatever shape a post carries
   (square mobile-first crops, wide 2:1 banners), which made card heights
   differ wildly; the grid equalizes rows to the tallest card, and the
   difference smeared through the shorter cards as giant gaps. Two-part
   normalization: every card image renders in the SAME 3:2 box (cover-crop),
   and the card's internal tracks pack at the start so any residual height
   sits quietly at the bottom. */
.xs-blog-grid .news-item .entry_image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
}
.xs-blog-grid .news-item .entry_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xs-blog-grid .news-item,
.xs-blog-grid .news-item .content,
.xs-blog-grid .news-item .entry_infor_news {
  align-content: start;
}
/* THE root cause: the listing is a flex row of [posts grid | sidebar], and
   flexbox stretches the grid column to the TALL sidebar's height - CSS grid
   then distributes that imposed height into its row tracks (630px rows for
   400px cards). Stop the stretch at the source. */
.xs-blog-grid .d-flex {
  align-items: flex-start;
}

/* Sidebar recent-posts thumbs: the template fixes width (112px) but not
   height, so mixed featured-image shapes (squares, wide banners) render at
   wildly different sizes. Pin the template's own demo-asset ratio (224x148
   = 3:2) and cover-crop, matching the blog-card normalization. */
.blog-sidebar .sb-recent li .image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  display: block;
}
.blog-sidebar .sb-recent li .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lead-form feedback states, replacing CF7's stock UI in the site's own
   language. CF7 drives everything by toggling form classes (submitting /
   sent / failed / invalid), so all three states are CSS-only:
   - sending: the submit dims and carries the site's ring loader (the
     template button is an <input>, so the ring lives on the wrapper);
   - success: fields collapse and a check-disc panel appears (real markup
     in the partial, revealed via :has); CF7's own strip stays rendered but
     visually hidden so screen readers still get the announcement;
   - error/validation: the response strip restyled as a soft red notice. */
.xs-cf7 .wpcf7-spinner {
  display: none;
}
.xs-cf7 .box-btn-submit {
  position: relative;
}
.xs-cf7 form.submitting .wpcf7-submit {
  opacity: 0.65;
  pointer-events: none;
}
.xs-cf7 form.submitting .box-btn-submit::after {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: xs-loader-spin 0.8s linear infinite;
}
.xs-cf7 form.sent fieldset,
.xs-cf7 form.sent .box-btn-submit {
  display: none;
}
.xs-cf7 form.sent .wpcf7-response-output {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.xs-cf7:has(form.sent) .xs-form-done {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 0 10px;
}
.xs-form-done {
  display: none;
}
.xs-form-done-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(54, 207, 8, 0.12);
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
.xs-cf7 form.failed .wpcf7-response-output,
.xs-cf7 form.aborted .wpcf7-response-output,
.xs-cf7 form.spam .wpcf7-response-output,
.xs-cf7 form.invalid .wpcf7-response-output {
  border: 1px solid rgba(220, 50, 50, 0.35);
  background-color: rgba(220, 50, 50, 0.05);
  color: #b32d2e;
  margin-top: 4px;
}
/* The same summary inside the home lead band: red on brand blue is
   unreadable, so the band's version is white on translucent white. */
.xs-lead-band form.failed .wpcf7-response-output,
.xs-lead-band form.aborted .wpcf7-response-output,
.xs-lead-band form.spam .wpcf7-response-output,
.xs-lead-band form.invalid .wpcf7-response-output {
  border-color: rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

/* Contact page CF7 form: the previous hand-built markup sized the message
   textarea inline (height 170); the shared .xs-cf7 states + the template's
   own form-contact styles cover everything else. */
.contact-wrap .form-contact textarea {
  height: 170px;
}

/* Consent checkbox (both CF7 forms): CF7's acceptance markup styled onto
   the site language - primary accent checkbox, caption-size label, links
   underlined. */
.xs-cf7 .xs-consent .wpcf7-list-item {
  margin: 0;
}
.xs-cf7 .xs-consent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.xs-cf7 .xs-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin-top: 2px;
  flex: none;
}
.xs-cf7 .xs-consent a {
  text-decoration: underline;
}

/* Product-card photos: the template cover-crops into its square image box,
   amputating non-square product shots (tools, long devices). Contain shows
   the whole product; the white backdrop matches the catalog's white-bg
   photos so the letterboxed area is invisible. Scoped to the photo anchor -
   badges and other card imagery keep their sizing. */
.card-product .product-img {
  background-color: var(--white);
}
.card-product .product-img img {
  object-fit: contain;
}

/* Brand marquee logos: the template sizes nothing here (its demo logos were
   pre-scaled files), so a full-resolution brand logo renders at native size
   and swallows the strip. Bound every logo to one visual box; contain keeps
   each mark's own proportions inside it. */
.tf-brand .brand-item img {
  max-height: 44px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* THE actual page-overflow bug: the template's own .content-area rule
   (styles.css) sets width:100% with no min-width override. A flex item's
   min-width defaults to its content's natural (unshrunk) size, which
   silently blocks flex-shrink once that content is wide enough - forcing
   the WHOLE product-view row wider than the viewport and clipping content
   at the page edges (not scrolling - body has overflow-x:hidden). This is
   latent in the template itself; it only needed enough content (e.g. many
   brand-strip cards) to cross the threshold. Letting it shrink below its
   content's size is the correct, permanent fix - not specific to brands,
   protects against any future wide content inside this column. */
.tf-product-view-content .content-area {
  min-width: 0;
}

/* Admin-only "bad image" flag button on the shop grid card (missing-images.php's
   companion feature). The button itself reuses the template's own box-icon/
   list-product-btn markup and hover-reveal untouched. The template has no
   concept of a flagged state though, so a persistent marker is needed - it's
   the only way to spot a flagged card without hovering every tile. */
.xs-flag-img-badge {
  display: none;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 5;
  background: #b32d2e;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.is-flagged-bad-image .xs-flag-img-badge {
  display: block;
}
.is-flagged-bad-image .card-product-wrapper {
  outline: 2px solid #b32d2e;
  outline-offset: 2px;
  border-radius: 8px;
}
.card-product .xs-flag-img-btn[aria-pressed='true'] {
  background-color: #b32d2e;
  color: #fff;
}

/* WooCommerce integration: Tranzila's pay page.
   The gateway prints its own <style> that makes .w2t-tranzila-form-page a bare
   flex row (hidden form + a fixed 370px iframe) with no alignment, so inside the
   page container it hugged the inline start and left the rest of the row empty.
   The template has no component to borrow for a hosted payment frame, so centre
   the row and let the iframe shrink on narrow screens. Both axes are needed:
   the gateway turns the row into a column under 1000px, where the iframe keeps
   its 370px width attribute and would otherwise hug the inline start. */
.w2t-tranzila-form-page {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.w2t-tranzila-form-page #tranzila_iframe {
  max-width: 100%;
}

/* WooCommerce integration: the Tranzila row's own fields at checkout.
   The gateway prints a bare label + native select for the installment count
   and relies on Woo's default form-row styling, which this template does not
   carry, so it rendered as an unframed full-width control. Reuse the same
   frame the checkout's country/state selects get above, and lay the save-card
   row out as a checkbox beside its text. */
.payment_box.payment_method_tranzila {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payments-select-wrap {
  display: flex;
  flex-direction: column;
}
.payments-select-wrap label {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 6px;
}
.payments-select-wrap select {
  height: 46px;
  border: 1px solid var(--gray-4);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--white);
  width: 100%;
}
.xs-save-card {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.xs-save-card .checkbox-item-wrap {
  flex: none;
}
.xs-save-card label.body-text-3 {
  cursor: pointer;
  margin: 0;
}