/**
 * Always-loaded brand baseline for every page (landing + shop/product/cart/checkout).
 * Separate from landing.css (landing-template-only) so store pages don't inherit
 * layout rules meant for the 430px landing column. Store body content keeps
 * Storefront's native responsive width; only the shared header/footer chrome
 * (rendered by template-parts/site-header-content.php + site-footer-content.php)
 * is capped to 430px/centered — that capping is inline on those partials, not here.
 */

:root {
  --bp-primary: #1a6fd4;
  --bp-primary-hover: #155cb3;
  --bp-navy: #14314e;
  --bp-text: #1c3550;
  --bp-page-bg: #f2f6fa;
  /* Opt every page out of Chrome-for-Android's auto-dark-theme repaint. Without
     this, some Android/Chrome builds (seen on OnePlus Nord 4) invert small
     dark-stroke SVG icons like the feature-carousel arrows toward white while
     leaving their white circular backgrounds alone, making the icon vanish. */
  color-scheme: light;
}

body,
button,
input,
select,
textarea {
  font-family: 'Noto Sans Hebrew', sans-serif;
}

/* Several headings inside the FAQ/Contact block (Story h2 — landing only —
   the FAQ h2 doesn't need this but the Contact h2 does) have no color of
   their own in the markup; they're meant to inherit white from their dark
   section background. Storefront's global "h1,h2,h3,h4,h5,h6{color:#131315}"
   sets color directly on the tag, which beats inheritance and turns them
   dark-on-dark. `inherit` restores the intended cascade; headings that
   already carry an explicit inline color are unaffected either way since
   inline always wins. Scoped to `.bp-page` (landing root) and
   `.bp-faq-contact` (the shared store-page footer) so it doesn't touch
   WooCommerce's own page/product headings. */
.bp-page h1, .bp-page h2, .bp-page h3, .bp-page h4, .bp-page h5, .bp-page h6,
.bp-faq-contact h1, .bp-faq-contact h2, .bp-faq-contact h3 { color: inherit; }

input::placeholder, textarea::placeholder { color: #8ea3b8; }

/* Primary nav (shared header, every page): mobile gets the hamburger button,
   which toggles the #bp-mobile-menu slide-down panel (handler in app.js);
   desktop swaps both out for the inline .desktop-nav links. Site-wide (not
   landing.css) because the shared header renders on store pages too.
   The width rules below (moved here from landing.css) were previously
   landing-template-only, which left the header/FAQ/contact chrome stuck at
   their mobile 430px column on every other page (shop/product/cart/checkout/
   contact) even though the desktop nav itself already swapped in correctly.
   These partials are shared verbatim across templates (see each partial's own
   header comment), so a single site-wide rule set keeps them all in sync
   instead of duplicating per-template CSS. */
@media (min-width: 900px) {
  #bp-menu-btn { display: none !important; }
  #bp-mobile-menu { display: none !important; }
  .desktop-nav { display: flex !important; }

  /* Self-styled full-page templates (landing, contact, shop) all share the
     `.bp-page` root wrapper — widen it everywhere, not just on landing. */
  .bp-page { max-width: 1080px !important; box-shadow: 0 0 60px rgba(20,49,78,0.08); }

  /* Header inner content (site-header-content.php): widen to match `.bp-page`
     on the self-styled templates, and to match Storefront's full-width
     #masthead strip on shop/product/cart/checkout. */
  .bp-header-inner { max-width: 1080px !important; }

  /* Footer plain copyright bar (site-footer-content.php): widen its centered
     content row. On the checkout page this is the whole footer; nested inside
     the Contact card elsewhere, its actual width is already governed by the
     ancestor caps below, so this only takes effect where nothing narrower
     already constrains it. */
  .bp-footer-inner { max-width: 760px !important; }

  /* Same band's own navy background: on checkout it's rendered standalone as
     the entire #colophon footer (unconstrained, full viewport width), so
     without a cap it goes edge-to-edge instead of matching every other
     page's inset/framed footer (`.bp-page` / `.bp-faq-contact` above, both
     1080px centered on the #f2f6fa page background). Nested inside the
     Contact card elsewhere, this is a no-op — that ancestor is already
     narrower than 1080px. */
  .bp-footer-band { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; }

  /* Shared FAQ + Contact block (site-footer-faq-contact.php / the standalone
     Contact page): widen the Contact card's own 430px wrapper to match
     `.bp-page`, then cap the FAQ accordion and Contact form to a readable
     width inside it — same treatment the landing page gives its own #faq/
     #contact sections. */
  .bp-faq-contact { max-width: 1080px !important; }

  /* #faq's own section background (the white-to-light-blue gradient), same
     full-bleed problem as `.bp-footer-band` above: on shop/product/cart it's
     rendered standalone as a direct child of #colophon (unconstrained), so
     without a cap the gradient spans the full viewport instead of matching
     the home page's framed `.bp-page`-contained #faq. No-op on the landing
     page, where #faq is already inside the 1080px `.bp-page`. */
  #faq { max-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; }
  #faq > div { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; width: 100%; }
  #contact { padding: 48px 24px 28px !important; }
  #contact > * { max-width: 560px; width: 100%; margin-left: auto !important; margin-right: auto !important; }

  /* Spacing floor: every h1 and real action button gets at least 1rem of
     clearance above it. `.bp-cta` is added to the custom pill/button-styled
     <a> and <button> CTAs across the partials/landing.html; combined with the
     standard WooCommerce button classes chrome.css already re-skins above.
     Deliberately NOT applied to bare `button`/`.button-shaped` UI controls —
     carousel arrows (position: absolute), the feature/tier dot pagination,
     and the hamburger are icon controls, not CTAs, and margin here would
     visibly displace them. The landing page's 3 tier-card buy buttons keep
     their own `margin-top: auto` (pins them to the card's bottom edge) rather
     than getting `.bp-cta` — forcing 1rem would break that positioning, and
     `auto` already resolves to well over 1rem in those fixed-height cards.
     Storefront's sticky add-to-cart bar is excluded too (position: fixed). */
  h1 { margin-top: 1rem !important; }
  .bp-cta,
  .woocommerce .button:not(.storefront-sticky-add-to-cart__content-button),
  .woocommerce a.button:not(.storefront-sticky-add-to-cart__content-button),
  .woocommerce button.button,
  .single_add_to_cart_button,
  .wc-block-components-button,
  .wp-block-woocommerce-cart .wp-element-button,
  .wp-block-woocommerce-checkout .wp-element-button {
    margin-top: 1rem !important;
  }
}
[data-hover-darken]:hover { background: #155cb3 !important; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item[open] .faq-arrow { transform: rotate(180deg); }

/* Header chrome — full-width white strip behind the centered 430px inner column. */
#masthead.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e3ebf3;
  padding: 0;
}

/* Footer chrome: light page background, same as "outside the 430px column"
   on the landing page — NOT navy. Navy only ever comes from the Contact
   section's own inline background within its own 430px box (and, on
   checkout, from the plain copyright bar's own full-bleed navy wrapper in
   site-footer-content.php). A navy #colophon here would show as a navy
   strip beside/around the FAQ section's light background on any viewport
   wider than 430px, making FAQ look boxed inside Contact instead of its own
   section. Also kill Storefront's default site-width padding — its
   `.site-footer` carries `padding: 1.618em 0 3.706325903em` (see style.css),
   which would otherwise show as a colored band above/below our content;
   each inner section (FAQ, Contact, the plain copyright bar) supplies its
   own padding already. */
#colophon.site-footer {
  background: var(--bp-page-bg);
  padding: 0;
}
#colophon.site-footer .col-full {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Buttons — classic templates (product page "add to cart", classic widgets)
   and WooCommerce Blocks (cart/checkout) both funnel through .button /
   .wp-element-button in Storefront + Blocks markup. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button,
.wc-block-components-button,
.wp-block-woocommerce-cart .wp-element-button,
.wp-block-woocommerce-checkout .wp-element-button {
  background-color: var(--bp-primary) !important;
  border-color: var(--bp-primary) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.wp-block-woocommerce-cart .wp-element-button:hover,
.wp-block-woocommerce-checkout .wp-element-button:hover {
  background-color: var(--bp-primary-hover) !important;
  border-color: var(--bp-primary-hover) !important;
}

/* Outline-style secondary buttons (e.g. "continue shopping"). */
.woocommerce .button.wc-backward,
.wc-block-components-button.is-style-outline {
  background-color: #ffffff !important;
  color: var(--bp-primary) !important;
  border: 2px solid var(--bp-primary) !important;
}

/* Form fields — classic checkout/billing fields and Blocks text inputs. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox input {
  border-radius: 10px !important;
  border-color: #dbe6f1 !important;
}
.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--bp-primary) !important;
  outline-color: var(--bp-primary) !important;
}

/* Links inside store content default to the brand primary, not Storefront's purple. */
.woocommerce a:not(.button),
.wc-block-cart a:not(.wp-element-button),
.wc-block-checkout a:not(.wp-element-button) {
  color: var(--bp-primary);
}

/* Price accents to match the landing page's navy price color. */
.woocommerce .price,
.wc-block-components-product-price {
  color: var(--bp-navy);
}

/* Checkout order summary ("סיכום הזמנה") — WooCommerce Blocks renders this
   sidebar block twice in the DOM and shows whichever copy fits the
   breakpoint: on desktop, the normal sidebar copy next to the form; on
   mobile, a second copy that's pinned near the Place Order button, PLUS a
   collapsed "Order summary ▾ (total)" teaser copy above the form that opens
   in place when tapped. An earlier pass here force-opened that top teaser's
   content so its product photo/totals wouldn't hide behind a tap — but that
   meant the full breakdown showed twice on one screen (teaser opened at the
   top, second copy again at the bottom). Fix: hide the top teaser entirely
   on mobile; bp_render_checkout_order_preview() in functions.php puts a
   compact product preview card in its place instead, and the single full
   breakdown near the Place Order button (untouched, not the teaser copy) is
   still the one place totals are shown. */
@media only screen and (max-width: 700px) {
  .wp-block-woocommerce-checkout-order-summary-block:not(.checkout-order-summary-block-fill-wrapper) {
    display: none !important;
  }
}

/* Compact "your order" preview (bp_render_checkout_order_preview() in
   functions.php) — one row per cart line: photo, product name, price. Sits
   where the hidden teaser above used to be, mobile-only; desktop already
   shows the full sidebar summary beside the form so it needs no preview. */
@media only screen and (max-width: 700px) {
  .bp-checkout-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e3ebf3;
    border-radius: 14px;
  }
  .bp-checkout-preview__item {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .bp-checkout-preview__item + .bp-checkout-preview__item {
    padding-top: 12px;
    border-top: 1px solid #e3ebf3;
  }
  .bp-checkout-preview__img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 10px;
    background: var(--bp-page-bg);
    object-fit: contain;
  }
  .bp-checkout-preview__info {
    min-width: 0;
    flex: 1 1 auto;
  }
  .bp-checkout-preview__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bp-navy);
    line-height: 1.35;
  }
  .bp-checkout-preview__price {
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
    color: var(--bp-primary);
  }
}
@media only screen and (min-width: 701px) {
  .bp-checkout-preview {
    display: none;
  }
}

/* Product-page breadcrumb trail (דף הבית / חנות / product name) — replaces
   Storefront's own English breadcrumb markup with Hebrew, styled as plain
   text (not a pill) so it reads as wayfinding, not a button, with its own
   vertical margin so it doesn't crowd the header above or the product title
   below. */
.bp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 21px 0 25px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.bp-breadcrumb a {
  color: var(--bp-primary);
  text-decoration: none;
}
.bp-breadcrumb a:hover {
  color: var(--bp-primary-hover);
  text-decoration: underline;
}
.bp-breadcrumb-sep {
  color: #9fb3c8;
}
.bp-breadcrumb-current {
  color: #6b7f94;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide the gallery's magnifying-glass "enlarge" trigger — the product photo
   is decorative, not a detail shot anyone needs to zoom into. Keep the
   zoom/lightbox/slider theme supports themselves enabled (see the note in
   functions.php): with them on, WooCommerce still attaches its
   click-preventDefault handler to the image, which is what stops the image's
   wrapping <a> from navigating to the raw attachment file on click/tap; drop
   that support instead of just hiding the button and the image becomes
   clickable again with nothing blocking the click. */
.woocommerce-product-gallery__trigger {
  display: none !important;
}

/* Product page: smaller, uncropped, centered gallery image on mobile, and the
   whole summary (title/price/description/button) centered under it —
   Storefront's native side-by-side layout doesn't suit a single-SKU buy-now
   page. `!important` throughout this block because Storefront's own product
   CSS carries matching or higher specificity. Desktop is untouched. */
@media (max-width: 782px) {
  .single-product div.images,
  .single-product div.summary {
    float: none !important;
    width: 100% !important;
  }
  .single-product div.images {
    max-width: 220px !important;
    margin: 0 auto 16px !important;
  }
  .single-product div.summary {
    max-width: 320px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .single-product div.summary > * {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .single-product form.cart {
    justify-content: center !important;
  }
}
/* Gallery thumbnail strip: each thumbnail stays a uniform square box
   (the underlying gallery_thumbnail file is already a hard-cropped square,
   so this is mostly a no-op safeguard rather than the fix below). */
.single-product .flex-control-thumbs img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Gallery main image: fixed-ratio box (768:1376, our two most common
   product photos' native size) so the visible photo area stays the same
   size no matter which image is showing, instead of WooCommerce's gallery
   library (FlexSlider) animating its wrapper's height to match whichever
   slide's own auto height happens to be active — most visible on the
   premium product, whose third gallery image (228x550, tall and narrow) is
   a very different shape from the other two (768x1376), making the whole
   page jump on every swipe/click. Fixing each slide's own height (via
   aspect-ratio, so it still scales with viewport width) makes every slide
   report the same height, so FlexSlider's height-sync settles on one
   constant value instead of animating between different ones; object-fit:
   contain then letterboxes/pillarboxes photos that don't match the ratio
   exactly, rather than stretching or cropping them. */
.single-product .woocommerce-product-gallery__image {
  aspect-ratio: 768 / 1376 !important;
}
.single-product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* No quantity stepper next to the buy button — buy-now is always qty 1. */
.single-product form.cart .quantity {
  display: none !important;
}

/* Bigger, full-width buy button — this is the one action on the page. */
.single-product .single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  border-radius: 14px !important;
}

/* Related products: 4:3 box, uncropped thumbnails. functions.php swaps the
   related-products loop to the 'full' image size (instead of WooCommerce's
   default hard-cropped 'woocommerce_thumbnail' square) so there's a complete,
   uncropped file for object-fit: contain to letterbox here. */
.related.products img,
.upsells.products img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
}

/* Cart line items ("עגלת קניות") and checkout order summary ("סיכום הזמנה")
   product thumbnails. WooCommerce Blocks renders these into a fixed pixel
   box (width/height attributes on the <img>, same for every line item)
   regardless of the source image's own aspect ratio — functions.php's
   'woocommerce_get_image_size_thumbnail' filter now keeps that source file
   uncropped, so without this the browser would stretch/distort a non-square
   photo to fill the square box. object-fit: contain letterboxes it instead,
   keeping every product's thumbnail the same box size while showing the
   whole image uncropped. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  object-fit: contain !important;
}

/* Empty-cart page's "New in shop" grid (woocommerce/product-new, cart page,
   ID 9): WooCommerce's own block CSS just flexes the product row with no
   justify-content, so it packs flush to the RTL start edge instead of
   centering. Harmless on a full row (nothing to center into); only visible
   when the row is short of a full set of columns, e.g. today's 3 sample
   products in a 4-column grid. */
.wp-block-woocommerce-product-new .wc-block-grid__products {
  justify-content: center;
}