/* Tiz Flowers — minimal glue CSS for pages without a real-Woodmart-markup
   equivalent yet (delivery landing, static content pages, mock payment,
   thank-you). Loaded AFTER all real theme CSS; keep this tiny. */
.tiz-wrap{max-width:1222px;margin:0 auto;padding:30px 15px}
.area-hero{background:linear-gradient(135deg,#fbeaf1,#fff);padding:40px 24px;text-align:center;margin:16px 0}
.area-hero h1{color:#A82459;font-weight:600;font-size:32px;margin:0 0 10px}
.area-hero p{color:#333;max-width:720px;margin:0 auto 16px;line-height:1.8}
.area-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.area-info{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}
.ai-box{background:#fff;border:1px solid #ececec;border-radius:5px;padding:16px;text-align:center}
.ai-box b{display:block;color:#242424;margin-bottom:4px}
.ai-box span{color:#777;font-size:14px}
.area-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.area-pill{background:#A82459;color:#fff;border-radius:5px;padding:8px 16px;font-size:14px;font-weight:500}
.area-pill:hover{background:#C83C74;color:#fff}
.content-page{max-width:820px;margin:20px auto 40px}
.content-page h1{color:#A82459;font-weight:600}
.cp-body{color:#333;line-height:1.9}
.cp-body p{margin:0 0 14px}
.thankyou{text-align:center;padding:60px 16px;max-width:560px;margin:0 auto}
.thankyou .ty-check{width:70px;height:70px;border-radius:50%;background:#79A81A;color:#fff;font-size:40px;line-height:70px;margin:0 auto 16px}
.flash-err{background:#fdecef;border:1px solid #f0b3c4;color:#A82459;padding:10px 14px;border-radius:5px;margin:12px 0}
.flash-ok{background:#e6f4ea;border:1px solid #b6dcc0;color:#1e7e34;padding:10px 14px;border-radius:5px;margin:12px 0}
.btn-primary{background:#79A81A;color:#fff;border:0;border-radius:5px;padding:12px 30px;font-weight:600;cursor:pointer;display:inline-block;text-decoration:none}
.btn-primary:hover{background:#77BC00;color:#fff}
.btn-ghost{background:#fff;color:#A82459;border:2px solid #A82459;border-radius:5px;padding:10px 24px;font-weight:600;display:inline-block;text-decoration:none}
.btn-ghost:hover{background:#A82459;color:#fff}

/* ===== product page columns: desktop 40/4/56, mobile stacked (matches the real site) ===== */
@media (min-width: 1025px) {
  .tiz-col-gallery { width: 40%; }
  .tiz-col-spacer  { width: 4%; }
  .tiz-col-summary { width: 56%; }
}
@media (max-width: 1024px) {
  .tiz-col-gallery, .tiz-col-summary { width: 100%; }
  .tiz-col-spacer { display: none; }
}

/* ===== the live site's own inline <style> rules, mirrored verbatim ===== */
@font-face {
  font-family: "WooCommerce";
  font-weight: normal;
  font-style: normal;
  src: url("../real/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"),
       url("../real/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"),
       url("../real/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}
.woocommerce form .form-row .required { visibility: visible; }
.woocommerce-product-gallery { opacity: 1 !important; }
.coupon { display: none; }
.woocommerce-form-coupon-toggle { display: none; }

/* ===== cart: centre the "עדכן עגלה" action (requested; the live site right-aligns it) ===== */
.cart-table-section .cart-actions { justify-content: center; }
.cart-table-section .cart-actions > p { margin: 0; }
.cart-table-section .cart-actions > p.tiz-cart-hidden-fields { display: none; }
@media (max-width: 768.98px) {
  .cart-table-section .cart-actions { align-items: center; }
}

/* ===== home hero flush to the header at every width =====
   The original leaves a 50px gap on tablet (768-1278px): there the mobile hero
   container drops its negative top margin, so `.main-page-wrapper`'s 40px padding
   plus the container's own 10px show through. Deliberate deviation from the
   original — the banner is meant to sit flush. */
@media (min-width: 768px) and (max-width: 1278.98px) {
  .elementor-77445 .elementor-element.elementor-element-50e2004 { --margin-top: -50px; }
}

/* Desktop hero container, laptop widths. The wrapper contributes 40px padding and
   Elementor changes the container's own values at two different breakpoints:
   padding-top jumps to 50px at 1367px, but --margin-top only jumps to -90px at
   1440px. Left alone that leaves the banner 10px under the header below 1367 and
   50px below it in between. Net both ranges to zero, keeping the original padding
   so nothing further down the page shifts. */
@media (min-width: 1025px) and (max-width: 1366.98px) {   /* padding-top: 0  */
  .elementor-77445 .elementor-element.elementor-element-7abb1d6c { --margin-top: -40px; }
}
@media (min-width: 1367px) and (max-width: 1439.98px) {   /* padding-top: 50px */
  .elementor-77445 .elementor-element.elementor-element-7abb1d6c { --margin-top: -90px; }
}

/* ===== home category tiles: 4 per row on desktop, 2 on mobile (requested) =====
   The original gives each tile a fixed pixel width from post-77445.css (277px,
   170px on small screens) and lets them flow, which lands 5+3 at 1440px and 6+2
   wider. Override the widths and lay the wrap out as a grid instead. */
.elementor-77445 .elementor-element-487875c3 > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.elementor-77445 .elementor-element-487875c3 > .elementor-widget-wrap > .elementor-element {
  width: auto !important;
  max-width: none !important;
  --container-widget-width: 100% !important;
  margin: 0 !important;
}
.elementor-77445 .elementor-element-487875c3 > .elementor-widget-wrap > .elementor-element > .elementor-widget-container {
  margin: 0 !important;
}
.elementor-77445 .elementor-element-487875c3 .promo-banner img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 767.98px) {
  .elementor-77445 .elementor-element-487875c3 > .elementor-widget-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Home page product grid on phones: the grid sat flush against both screen
   edges because the section is wd-section-stretch, so the 15px page padding
   above it is cancelled. 5px inside the grid gives the cards air on both
   sides without changing the two-per-row layout. */
@media (max-width: 767.98px) {
  .elementor-77445 .elementor-element-e1be926 .products.wd-products {
    padding-inline: 5px;
  }
}

/* The "we are closed" page and banner.
   Literal colours on purpose: the storefront loads the mirrored Woodmart CSS,
   not app.css, so --magenta and friends are undefined here and a var() would
   fall back to transparent (white text on white). */
.tz-closed { max-width: 620px; margin: 0 auto; padding: 60px 20px 80px; text-align: center; }
.tz-closed-logo { max-width: 220px; height: auto; margin: 0 auto 26px; display: block; }
.tz-closed h1 { color: #A82459; font-size: 30px; margin: 0 0 14px; }
.tz-closed-msg { font-size: 17px; line-height: 1.8; color: #333; margin: 0 0 24px; }
.tz-closed-hours { color: #777; line-height: 1.9; margin: 0 0 26px; }
.tz-closed-contact { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tz-closed-contact a { direction: ltr; }

.tz-closed-bar {
  background: #A82459; color: #fff;
  padding: 11px 16px; text-align: center; font-size: 14.5px; line-height: 1.5;
}
.tz-closed-bar b { font-weight: 700; }

/* Floating WhatsApp button. Only rendered when a number is set in the settings,
   so the untouched site keeps the mirrored layout exactly. */
.tz-wa-float {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.tz-wa-float:hover { transform: scale(1.07); color: #fff; }
.tz-wa-float svg { width: 30px; height: 30px; display: block; }
@media (max-width: 767.98px) {
  .tz-wa-float { width: 48px; height: 48px; inset-inline-start: 12px; bottom: 12px; }
  .tz-wa-float svg { width: 27px; height: 27px; }
}

/* The product terms block behind "האותיות הקטנות".
   The live site opens it in a Woodmart popup; here it expands in place, so it
   is collapsed until asked for and no popup library is needed. */
.elementor-element-5f85c61 .elementor-widget-container { display: none; }
.elementor-element-5f85c61 .elementor-widget-container.is-open { display: block; }
.tiz-popup-open { cursor: pointer; }

/* The add-on strip is a carousel on the live site, driven by JS we do not run.
   The cards are given the same 170px width and the row scrolls, so the section
   ends up the same height as the original instead of three grid rows. */
.wd-products-tabs .tiz-upsell {
  /* !important: Woodmart's own .wd-carousel-container / .products rules are more
     specific and would put the cards back into a stacking grid */
  display: flex !important; flex-wrap: nowrap !important; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  /* the strip advances on its own, so the scrollbars are just noise */
  scrollbar-width: none; -ms-overflow-style: none;
}
.wd-products-tabs .tiz-upsell::-webkit-scrollbar { width: 0; height: 0; display: none; }
.wd-products-tabs .tiz-upsell > * {
  flex: 0 0 170px !important; width: 170px !important; max-width: 170px !important;
  scroll-snap-align: start;
}
.tiz-upsell .wd-product { padding-inline: 5px; }

/* Woodmart fades tab panels in with its own JS, which the static site does not
   load, so the panel stayed at opacity 0 and the add-on strip looked empty. */
.wd-products-tabs .wd-tab-content.wd-active { opacity: 1; }
/* The icon/text pair inside each reassurance block. Elementor's own inner
   sections have no gap between columns — the text column butts straight up
   against the icon column — so a gap here pushed the green/pink bars 14px out
   of line with the live site. */
.elementor-element-86115b3 .elementor-row-inner {
  display: flex; align-items: center; gap: 0;
}
.elementor-element-86115b3 .elementor-row-inner > .elementor-column { flex: 0 0 auto; }
.elementor-element-86115b3 .elementor-element-e2838b5,
.elementor-element-86115b3 .elementor-element-d41639a { flex: 1 1 auto; min-width: 0; }
/* the 10px inset Elementor gives a populated column, which the flex wrapper
   would otherwise drop */
.elementor-element-86115b3 .elementor-row-inner > .elementor-column
  > .elementor-widget-wrap.elementor-element-populated { padding: 10px; }

@media (max-width: 767px) {
  /* both icons are 45px on the live phone layout; the desktop rules leave them
     at 56px and 70px, which pushed the bars around */
  .elementor-element-86115b3 .elementor-element-e36da05 img,
  .elementor-element-86115b3 .elementor-element-dbd3250 img { width: 45px; height: auto; }
}

/* The X on a mini-cart line is a 20px glyph. Its hit area is grown with a
   pseudo-element so a thumb can land on it, without changing how it looks. */
.widget_shopping_cart_content .tiz-mini-remove { position: relative; }
.widget_shopping_cart_content .tiz-mini-remove::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.widget_shopping_cart_content .tiz-mini-remove.loading { opacity: .45; pointer-events: none; }