/* ============================================================================
   MC Product Page Polish  —  presentational only, conservative & reversible.
   Scope: the product marketing content (Flatsome UX-Builder blocks) inside
          .product-short-description  and  .woocommerce-Tabs-panel--description
   Rule of thumb:
     • !important ONLY on the genuinely safe set (font unification, responsive
       media, empty-gap removal, overflow caps) — never on color/size, so
       intentionally designed hero sections (light-on-dark) stay intact.
     • Everything typographic is a DEFAULT that yields to inline design.
   ========================================================================== */

/* 1) Font unification — removes stray Poppins/Inter (unloaded anyway) so all
      content renders in the site's Hebrew stack. Glyph-only → contrast-safe. */
.single-product .product-short-description,
.single-product .product-short-description *,
.single-product .woocommerce-Tabs-panel--description,
.single-product .woocommerce-Tabs-panel--description *{
  font-family:'Noto Sans Hebrew','Heebo','Assistant',-apple-system,'Segoe UI',Arial,sans-serif !important;
}

/* 2) Responsive media — kills mobile overflow from fixed-width images (700/960/1200px) */
.single-product .product-short-description img,
.single-product .woocommerce-Tabs-panel--description img{
  max-width:100% !important;
  height:auto !important;
}

/* 3) Overflow safety — cap any inline fixed-width block, break long words */
.single-product .product-short-description [style*="width"],
.single-product .woocommerce-Tabs-panel--description [style*="width"]{
  max-width:100% !important;
}
.single-product .product-short-description,
.single-product .woocommerce-Tabs-panel--description{
  overflow-wrap:break-word;
  word-wrap:break-word;
}

/* 4) Remove empty-paragraph gaps that create uneven vertical rhythm */
.single-product .product-short-description p:empty,
.single-product .woocommerce-Tabs-panel--description p:empty{
  display:none !important;
}

/* 5) Typographic rhythm — DEFAULTS ONLY (no !important). Plain content gets a
      clean, consistent scale; inline-designed headings keep their look. */
.single-product .product-short-description h2,
.single-product .woocommerce-Tabs-panel--description h2{
  font-size:clamp(1.35rem, 1rem + 1.5vw, 1.9rem);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.01em;
  color:#0a1f44;
  margin:2em 0 .6em;
}
.single-product .product-short-description h3,
.single-product .woocommerce-Tabs-panel--description h3{
  font-size:clamp(1.15rem, 1rem + .8vw, 1.45rem);
  font-weight:700;
  line-height:1.35;
  color:#0a1f44;
  margin:1.7em 0 .5em;
}
.single-product .product-short-description h4,
.single-product .woocommerce-Tabs-panel--description h4{
  font-size:1.1rem;
  font-weight:700;
  line-height:1.4;
  color:#0a1f44;
  margin:1.4em 0 .5em;
}
.single-product .product-short-description p,
.single-product .woocommerce-Tabs-panel--description p{
  font-size:1.02rem;
  line-height:1.8;
  margin:0 0 1em;
}

/* 6) Lists — consistent RTL spacing */
.single-product .product-short-description ul,
.single-product .product-short-description ol,
.single-product .woocommerce-Tabs-panel--description ul,
.single-product .woocommerce-Tabs-panel--description ol{
  margin:0 0 1.1em;
  padding-inline-start:1.35em;
  line-height:1.8;
}
.single-product .product-short-description li,
.single-product .woocommerce-Tabs-panel--description li{
  margin:.28em 0;
}

/* 7) Tables — clean, professional, responsive. Borders/padding are defaults;
      any inline cell backgrounds stay. */
.single-product .product-short-description table,
.single-product .woocommerce-Tabs-panel--description table{
  width:100% !important;
  max-width:100% !important;
  border-collapse:collapse;
  margin:1.3em 0;
  font-size:.98rem;
  background:#fff;
  border:1px solid #e7ebef;
  border-radius:10px;
  overflow:hidden;
}
.single-product .product-short-description table td,
.single-product .product-short-description table th,
.single-product .woocommerce-Tabs-panel--description table td,
.single-product .woocommerce-Tabs-panel--description table th{
  border:1px solid #eceff3;
  padding:11px 15px;
  text-align:right;
  vertical-align:middle;
  line-height:1.55;
}
.single-product .product-short-description table th,
.single-product .woocommerce-Tabs-panel--description table th{
  background:#f7f9fb;
  font-weight:700;
  color:#0a1f44;
}
.single-product .product-short-description table tr:nth-child(even) td,
.single-product .woocommerce-Tabs-panel--description table tr:nth-child(even) td{
  background:#fafbfc;
}

/* 8) The WooCommerce "Additional information" attribute table — tidy it too */
.single-product .woocommerce-product-attributes{
  border:1px solid #e7ebef;
  border-radius:10px;
  overflow:hidden;
}
.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td{
  padding:11px 15px;
  text-align:right;
}

/* 9) Description tab panel — give the long content breathing room on wide screens */
.single-product .woocommerce-Tabs-panel--description{
  padding-top:.5em;
}

/* 10) Tabs strip — consistent, professional tab headers */
.single-product .tabbed-content .nav-tabs > li > a,
.single-product ul.tabs.wc-tabs > li > a{
  font-weight:700;
  letter-spacing:.01em;
}

/* 11) Reduce oversized top/bottom gaps that some UX-builder rows leave behind
       between stacked sections (defaults only — designed spacing wins). */
.single-product .product-short-description .row,
.single-product .woocommerce-Tabs-panel--description .row{
  margin-bottom:0;
}

/* ============================================================================
   12) Product summary trust strip  (משלוח / תשלומים / אחריות / ERN הוראת קבע)
   ---------------------------------------------------------------------------
   The Flatsome icon-box row that sits between the short description and the
   add-to-cart button used to render as four ~130px-tall stacked boxes with
   103px icons — ~540px of vertical space that pushed the buy button far below
   the fold. Re-laid out as a compact 2x2 card grid with small icon chips,
   plus a light staggered fade-in and a soft hover lift.
   Presentational only — no markup or content is changed.
   ========================================================================== */

.single-product .product-info > .row.align-equal{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin:16px 0 18px !important;
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Column shells: strip Flatsome's flex/gutter sizing, the grid owns layout */
.single-product .product-info > .row.align-equal > .col{
  flex:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* The card itself */
.single-product .product-info > .row.align-equal > .col > .col-inner{
  height:100%;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,#fdfeff 0%,#f5f8fb 100%);
  border:1px solid #e7edf4;
  border-radius:12px;
  padding:10px 12px;
  text-align:right !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .single-product .product-info > .row.align-equal > .col > .col-inner:hover{
    transform:translateY(-2px);
    border-color:#cddeed;
    box-shadow:0 8px 18px rgba(10,31,68,.07);
  }
}

/* Icon + text on one line */
.single-product .product-info > .row.align-equal .icon-box{
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center;
  gap:10px;
  width:100%;
  padding:0 !important;
  margin:0 !important;
  text-align:right !important;
}

/* Icon chip — replaces the 103px inline width */
.single-product .product-info > .row.align-equal .icon-box .icon-box-img{
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  max-width:38px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:10px;
  background:rgba(92,144,185,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease, background-color .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .single-product .product-info > .row.align-equal > .col > .col-inner:hover .icon-box-img{
    transform:scale(1.06);
    background:rgba(92,144,185,.16);
  }
}
.single-product .product-info > .row.align-equal .icon-box .icon-box-img > .icon,
.single-product .product-info > .row.align-equal .icon-box .icon-box-img .icon-inner{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  margin:0 !important;
}
.single-product .product-info > .row.align-equal .icon-box .icon-box-img svg{
  width:22px !important;
  height:22px !important;
  padding:0 !important;
  margin:0 !important;
}
.single-product .product-info > .row.align-equal .icon-box .icon-box-img img{
  width:auto !important;
  height:26px !important;
  max-width:30px !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:contain;
}

/* Text block */
.single-product .product-info > .row.align-equal .icon-box .icon-box-text{
  flex:1 1 auto;
  min-width:0;
  padding:0 !important;
  margin:0 !important;
  text-align:right !important;
}
.single-product .product-info > .row.align-equal .icon-box .icon-box-text .text{
  text-align:right !important;
}
.single-product .product-info > .row.align-equal .icon-box .icon-box-text h3{
  font-size:.86rem !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
  color:#0f2542 !important;
  margin:0 0 2px !important;
  text-align:right !important;
}
.single-product .product-info > .row.align-equal .icon-box .icon-box-text p{
  font-size:.745rem !important;
  line-height:1.4 !important;
  color:#63707f !important;
  margin:0 !important;
  text-align:right !important;
}

/* Entrance: replace Flatsome's 1.3s 15px blur with a short staggered rise.
   The .col keeps its data-animate attribute but is forced visible, so the
   strip can never end up stuck at opacity:0 if the theme JS doesn't fire. */
.single-product .product-info > .row.align-equal > .col[data-animate]{
  opacity:1 !important;
  filter:none !important;
  transition:none !important;
  will-change:auto !important;
}
@keyframes mcTrustIn{
  from{opacity:0; transform:translateY(9px);}
  to  {opacity:1; transform:none;}
}
.single-product .product-info > .row.align-equal > .col > .col-inner{
  animation:mcTrustIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.single-product .product-info > .row.align-equal > .col:nth-child(1) > .col-inner{animation-delay:.05s}
.single-product .product-info > .row.align-equal > .col:nth-child(2) > .col-inner{animation-delay:.12s}
.single-product .product-info > .row.align-equal > .col:nth-child(3) > .col-inner{animation-delay:.19s}
.single-product .product-info > .row.align-equal > .col:nth-child(4) > .col-inner{animation-delay:.26s}

/* Phones — same 2x2, slightly tighter */
@media (max-width:549px){
  .single-product .product-info > .row.align-equal{
    gap:7px;
    margin:14px 0 16px !important;
  }
  .single-product .product-info > .row.align-equal > .col > .col-inner{
    padding:8px 9px;
    border-radius:11px;
  }
  .single-product .product-info > .row.align-equal .icon-box{gap:8px;}
  .single-product .product-info > .row.align-equal .icon-box .icon-box-img{
    flex:0 0 32px !important;width:32px !important;height:32px !important;max-width:32px !important;
    border-radius:9px;
  }
  .single-product .product-info > .row.align-equal .icon-box .icon-box-img svg{width:19px !important;height:19px !important;}
  .single-product .product-info > .row.align-equal .icon-box .icon-box-img img{height:22px !important;max-width:26px !important;}
  .single-product .product-info > .row.align-equal .icon-box .icon-box-text h3{font-size:.775rem !important;line-height:1.25 !important;}
  .single-product .product-info > .row.align-equal .icon-box .icon-box-text p{font-size:.69rem !important;line-height:1.32 !important;}
}

@media (prefers-reduced-motion: reduce){
  .single-product .product-info > .row.align-equal > .col > .col-inner{
    animation:none !important;
    transition:none !important;
  }
  .single-product .product-info > .row.align-equal > .col > .col-inner:hover{transform:none;}
}