/* YouHoo product page 2026 · single product template 24281 ("מוצר"). Design only. Scope: body.single-product .elementor-24281 */
.single-product .elementor-24281{
--yp-night:#0B1D63; --yp-ink:#1E0B4B; --yp-mut:#5B4E80; --yp-purple:#3F0592;
--yp-tq:#03DAC4; --yp-lav:#F6F4FD; --yp-lav2:#F2EFFA; --yp-line:#E2DDF2;
--yp-err:#B4123F; --yp-ease:cubic-bezier(.16,1,.3,1);
--yp-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
--yp-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
--yp-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F0592' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--yp-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
font-family:Rubik,system-ui,sans-serif;
}
/* 1. Hero: the homepage background as static CSS layers */
.single-product .elementor-24281 .elementor-element.elementor-element-b13f5c4{
position:relative; isolation:isolate; overflow:hidden;
background:linear-gradient(160deg,#0B1D63 0%,#0A1650 45%,#120A45 100%) !important;
padding:40px 0 72px !important; margin:0 !important;
}
.single-product .elementor-24281 .elementor-element-b13f5c4::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(circle 400px at calc(100% - 240px) 80px, rgba(45,107,228,.95) 0%, rgba(45,107,228,0) 72%),
radial-gradient(circle 330px at 140px 200px, rgba(122,43,230,.8) 0%, rgba(122,43,230,0) 72%),
radial-gradient(circle 200px at calc(70% - 190px) 420px, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 72%),
radial-gradient(circle 320px at calc(18% + 280px) calc(100% + 40px), rgba(3,218,196,.5) 0%, rgba(3,218,196,0) 72%),
radial-gradient(circle 360px at calc(100% - 80px) 78%, rgba(122,43,230,.45) 0%, rgba(122,43,230,0) 72%);
}
.single-product .elementor-24281 .elementor-element-b13f5c4::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.3px);
background-size:26px 26px; background-position:13px 13px;
-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 38%,#000 25%,transparent 80%);
mask-image:radial-gradient(ellipse 70% 55% at 50% 38%,#000 25%,transparent 80%);
}
.single-product .elementor-24281 .elementor-element-b13f5c4 > .elementor-container{position:relative; z-index:1}
.single-product .elementor-24281 .elementor-element-b13f5c4 > .elementor-background-overlay{display:none !important}
/* Hero copy */
.single-product .elementor-24281 .elementor-element.elementor-element-3dca810 .elementor-heading-title{
font:700 clamp(34px,3.4vw,52px)/1.15 Rubik,system-ui,sans-serif !important; color:#fff !important;
letter-spacing:-.01em; text-align:start !important; margin:0 !important;
}
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 > .elementor-widget-container{margin:16px 0 0 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12,
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 *{
color:rgba(255,255,255,.86) !important; font-size:18px !important; line-height:1.75 !important;
font-weight:400 !important; text-align:start !important; font-family:Rubik,system-ui,sans-serif !important;
}
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 a{color:#7FF3E6 !important; text-decoration:underline !important; text-underline-offset:3px}
/* Notice under the copy (desktop 02964ec; tablet/phone c988210 sits in the card) */
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec > .elementor-widget-container{
position:relative; margin:24px 0 0 !important; padding:16px 20px !important; padding-inline-start:52px !important;
border:1px solid rgba(255,255,255,.16) !important; border-radius:16px !important;
background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec > .elementor-widget-container::before{
content:""; position:absolute; top:18px; inset-inline-start:18px; width:20px; height:20px; background:#FFC857;
-webkit-mask:var(--yp-warn) center/contain no-repeat; mask:var(--yp-warn) center/contain no-repeat;
}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec .elementor-widget-container *{
color:rgba(255,255,255,.88) !important; font-size:14.5px !important; font-weight:500 !important;
line-height:1.65 !important; text-align:start !important; font-family:Rubik,system-ui,sans-serif !important;
}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec p{margin:0 0 8px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec p:last-child{margin:0 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec a{color:#7FF3E6 !important; text-decoration:underline !important}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec a[style*="color"],
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec span[style*="color"]{color:#FF9DBA !important}
.single-product .elementor-24281 .elementor-element.elementor-element-02964ec .elementor-widget-container:empty{display:none}
/* 2. Breadcrumbs: chips, inside the hero */
.single-product .elementor-24281 .elementor-element.elementor-element-4f0f779 > .elementor-widget-container{margin:0 !important; padding:0 !important}
.single-product .elementor-24281 nav.woocommerce-breadcrumb{
display:flex !important; flex-wrap:wrap; align-items:center; gap:8px 6px; margin:0 !important; padding:0 !important;
font:500 14px/1.4 Rubik,system-ui,sans-serif !important; color:var(--yp-ink) !important;
}
.single-product .elementor-24281 nav.woocommerce-breadcrumb a{
display:inline-flex; align-items:center; min-height:30px; padding:4px 12px; border-radius:999px;
background:var(--yp-lav2); color:var(--yp-purple) !important; font-weight:500 !important; text-decoration:none !important;
transition:background .2s,color .2s;
}
.single-product .elementor-24281 nav.woocommerce-breadcrumb a:hover{background:var(--yp-tq); color:var(--yp-night) !important}
.single-product .elementor-24281 nav.woocommerce-breadcrumb a:focus-visible{outline:3px solid var(--yp-tq); outline-offset:2px}
.single-product .elementor-24281 .yp-bc-sep{display:inline-block; width:14px; height:14px; flex:none; background:currentColor; opacity:.55;
-webkit-mask:var(--yp-chev) center/contain no-repeat; mask:var(--yp-chev) center/contain no-repeat}
[dir="ltr"] .single-product .elementor-24281 .yp-bc-sep{transform:scaleX(-1)}
.single-product .elementor-24281 .yp-bc-cur{font-weight:600; padding:0 4px}
.single-product .elementor-24281 .elementor-element-1be9267:not(:has(.elementor-element-4f0f779)) .elementor-widget-wrap{padding:0 !important}
.single-product .elementor-24281 .elementor-element-1be9267:not(:has(.elementor-element-4f0f779)){margin:0 !important; padding:0 !important}
.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element-4f0f779{margin:0 0 28px !important; padding:0 10px !important}
.single-product .elementor-24281 .elementor-element-b13f5c4 nav.woocommerce-breadcrumb{color:#fff !important}
.single-product .elementor-24281 .elementor-element-b13f5c4 nav.woocommerce-breadcrumb a{
background:rgba(255,255,255,.09); color:rgba(255,255,255,.86) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.single-product .elementor-24281 .elementor-element-b13f5c4 nav.woocommerce-breadcrumb a:hover{background:var(--yp-tq); color:var(--yp-night) !important; box-shadow:none}
/* 3. The purchase card = the whole left column (32c83d2) */
.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-widget-wrap{
width:min(100%,500px); margin:0 auto !important; padding:0 0 24px !important; align-content:flex-start;
background:#fff; border-radius:28px; color:var(--yp-ink);
box-shadow:0 0 0 1px rgba(63,5,146,.08),0 40px 80px -36px rgba(2,6,40,.85);
}
.single-product .elementor-24281 .elementor-element-32c83d2 > .elementor-widget-wrap > .elementor-element{margin:0 !important; width:100%}
.single-product .elementor-24281 .elementor-element.elementor-element-75befd7 > .elementor-widget-container{margin:0 !important; padding:0 !important}
.single-product .elementor-24281 .s-prod{
display:flex !important; flex-direction:column; align-items:center; gap:14px; height:auto !important; min-height:0 !important;
margin:0 !important; padding:30px 24px 0 !important; background:none !important; border-radius:28px 28px 0 0; width:auto !important;
}
.single-product .elementor-24281 .s-prod .single-product-icon{
width:84px !important; height:84px !important; margin:0 !important; border-radius:50%; object-fit:contain; background:#fff;
box-shadow:0 14px 30px -14px rgba(11,29,99,.55);
}
.single-product .elementor-24281 .s-prod .product-short-desc{
margin:0 !important; padding:0 !important; font:700 21px/1.35 Rubik,system-ui,sans-serif !important; color:var(--yp-ink) !important; text-align:center;
}
.single-product .elementor-24281 .white-box{
display:flex !important; flex-direction:column; gap:14px; margin:20px 20px 0 !important; padding:18px !important;
border:0 !important; border-radius:18px; background:var(--yp-lav) !important; box-shadow:none !important; height:auto !important; width:auto !important;
}
.single-product .elementor-24281 .white-box .input-wrap{display:flex !important; align-items:center; justify-content:space-between; gap:12px; margin:0 !important; width:100% !important; flex-direction:row !important}
.single-product .elementor-24281 .white-box .input-label{font:500 15px Rubik,sans-serif !important; color:var(--yp-mut) !important; margin:0 !important; display:block !important}
.single-product .elementor-24281 .white-box .quantity{display:flex !important; align-items:center; gap:6px; margin:0 !important; float:none !important}
.single-product .elementor-24281 .white-box .quantity .qty{
width:112px !important; height:44px !important; margin:0 !important; padding:0 8px !important; border-radius:12px !important;
border:1px solid var(--yp-line) !important; background:#fff !important; text-align:center !important; box-shadow:none !important;
font:600 18px Rubik,sans-serif !important; color:var(--yp-ink) !important; -moz-appearance:textfield;
}
.single-product .elementor-24281 .white-box .quantity .qty::-webkit-inner-spin-button,
.single-product .elementor-24281 .white-box .quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.single-product .elementor-24281 .white-box .quantity .qty:focus{outline:0; border-color:var(--yp-tq) !important; box-shadow:0 0 0 4px rgba(3,218,196,.22) !important}
.single-product .elementor-24281 .white-box .quantity input.minus,
.single-product .elementor-24281 .white-box .quantity input.plus{
width:44px !important; height:44px !important; min-width:0 !important; margin:0 !important; padding:0 !important; border-radius:12px !important;
border:1px solid var(--yp-line) !important; background:#fff !important; color:var(--yp-purple) !important;
font:500 22px/1 Rubik,sans-serif !important; cursor:pointer; box-shadow:none !important; transition:background .2s,color .2s,border-color .2s;
}
.single-product .elementor-24281 .white-box .quantity input.minus:hover,
.single-product .elementor-24281 .white-box .quantity input.plus:hover{background:var(--yp-tq) !important; border-color:var(--yp-tq) !important; color:var(--yp-night) !important}
.single-product .elementor-24281 .white-box .quantity input.minus:active,
.single-product .elementor-24281 .white-box .quantity input.plus:active{transform:scale(.94)}
.single-product .elementor-24281 .white-box .quantity input:focus-visible{outline:3px solid var(--yp-tq) !important; outline-offset:2px}
.single-product .elementor-24281 .white-box .quantity input:disabled{opacity:.45; cursor:not-allowed}
.single-product .elementor-24281 .white-box .range-amount,
.single .elementor-24281 .white-box .range-amount{
display:block !important; width:100% !important; height:24px; margin:0 !important; padding:0 !important;
background:transparent !important; -webkit-appearance:none; appearance:none; cursor:pointer; border:0 !important; accent-color:var(--yp-tq);
}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]::-webkit-slider-runnable-track{
height:6px; border:0 !important; border-radius:6px;
background:linear-gradient(90deg,var(--yp-tq) 0,var(--yp-tq) var(--p,0%),#D6CCEF var(--p,0%),#D6CCEF 100%) !important;
}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]::-moz-range-track{height:6px; border-radius:6px; background:#D6CCEF}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]::-moz-range-progress{height:6px; border-radius:6px; background:var(--yp-tq)}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%; background:#fff;
border:3px solid var(--yp-tq); box-shadow:0 4px 12px -2px rgba(11,29,99,.45); transition:transform .2s var(--yp-ease);
}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--yp-tq)}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15)}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]:focus{outline:0}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(3,218,196,.35)}
.single-product .elementor-24281 .white-box input.range-amount[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(3,218,196,.35)}
.single-product .elementor-24281 .white-box > .woocommerce-Price-amount{
display:block; margin:0 !important; text-align:center; direction:ltr; unicode-bidi:isolate;
font:700 28px/1.1 Rubik,sans-serif !important; color:var(--yp-night) !important;
}
.single-product .elementor-24281 .white-box > .woocommerce-Price-amount *{font:inherit !important; color:inherit !important}
/* 4. Form inside the card: add-ons, variations, CTA */
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) > .elementor-widget-container{margin:0 !important; padding:20px 20px 0 !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart{
display:flex !important; flex-direction:column; gap:0; margin:0 !important; padding:0 !important; background:none !important; width:100% !important;
}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart > *{width:100% !important; margin-inline:0 !important; float:none !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart :is(.wc-pao-addons-container,.variations,.single_variation_wrap){order:1}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button{order:3}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) .single_variation_wrap{display:flex; flex-direction:column}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) .single_variation_wrap > .single_variation{order:0}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) .single_variation_wrap > .wc-pao-addons-container{order:1}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) .single_variation_wrap > .woocommerce-variation-add-to-cart{order:2}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) .woocommerce-variation-add-to-cart{display:flex !important; flex-direction:column; width:100%; margin:0 !important}
.single-product .elementor-24281 .wc-pao-addons-container{margin:0 !important}
.single-product .elementor-24281 .wc-pao-addon-container{margin:0 0 16px !important; padding:0 !important}
.single-product .elementor-24281 .wc-pao-addon-container .clear{display:none}
.single-product .elementor-24281 label.wc-pao-addon-name,
.single-product .elementor-24281 .wc-pao-addon-name{
display:block !important; margin:0 0 6px !important; font:600 15px/1.45 Rubik,sans-serif !important; color:var(--yp-ink) !important; text-align:start !important;
}
.single-product .elementor-24281 .wc-pao-addon-name em.required{color:var(--yp-err) !important; font-style:normal; text-decoration:none; border:0}
.single-product .elementor-24281 .wc-pao-addon-description,
.single-product .elementor-24281 .wc-pao-addon-description p{margin:0 0 8px !important; font:400 13.5px/1.55 Rubik,sans-serif !important; color:var(--yp-mut) !important}
.single-product .elementor-24281 .wc-pao-addon-wrap{margin:0 !important; padding:0 !important}
.single-product .elementor-24281 .wc-pao-addon-container textarea.wc-pao-addon-field,
.single-product .elementor-24281 .wc-pao-addon-container input.wc-pao-addon-field:not([type=checkbox]):not([type=radio]),
.single-product .elementor-24281 .wc-pao-addon-container select.wc-pao-addon-field{
display:block; width:100% !important; min-height:52px; height:auto !important; margin:0 !important; padding:13px 14px !important;
border:1.5px solid var(--yp-line) !important; border-radius:12px !important; background:#fff !important; box-shadow:none !important;
font:400 16px/1.5 Rubik,sans-serif !important; color:var(--yp-ink) !important; resize:vertical; transition:border-color .2s,box-shadow .2s;
}
.single-product .elementor-24281 .wc-pao-addon-container textarea.wc-pao-addon-field{min-height:76px; max-height:260px}
.single-product .elementor-24281 .wc-pao-addon-container .wc-pao-addon-field:hover{border-color:#C9BFE6 !important}
.single-product .elementor-24281 .wc-pao-addon-container .wc-pao-addon-field:focus{outline:0 !important; border-color:var(--yp-tq) !important; box-shadow:0 0 0 4px rgba(3,218,196,.2) !important}
.single-product .elementor-24281 .wc-pao-addon-checkbox-group-required,
.single-product .elementor-24281 .wc-pao-addon-container .form-row label:has(input[type=checkbox]){
display:flex; align-items:flex-start; gap:10px; margin:0 !important; font:400 14px/1.55 Rubik,sans-serif !important; color:var(--yp-ink) !important; cursor:pointer;
}
.single-product .elementor-24281 .wc-pao-addon-container .form-row label:has(input[type=checkbox]){
width:100% !important; text-align:start !important; flex-direction:row !important; padding:12px 14px; border-radius:12px; background:var(--yp-lav); box-shadow:inset 0 0 0 1px var(--yp-line);
}
.single-product .elementor-24281 .wc-pao-addon-container .form-row label:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--yp-tq); background:#EFFCFA}
.single-product .elementor-24281 .wc-pao-addon-container input[type=checkbox]{
flex:0 0 20px !important; width:20px !important; height:20px !important; min-width:20px !important; max-width:20px !important; margin:1px 0 0 !important; padding:0 !important; accent-color:var(--yp-tq); cursor:pointer;
}
.single-product .elementor-24281 .wc-pao-addon-container input[type=checkbox]:focus-visible{outline:3px solid var(--yp-night) !important; outline-offset:2px !important}
.single-product .elementor-24281 .wc-pao-addon-container .form-row label:has(input[type=checkbox]:focus-visible){box-shadow:inset 0 0 0 2px var(--yp-night)}
.single-product .elementor-24281 .wc-pao-addon-container .wc-pao-addon-field:user-invalid{border-color:var(--yp-err) !important; box-shadow:0 0 0 4px rgba(180,18,63,.14) !important}
.single-product .elementor-24281 .wc-pao-addon-container .form-row label:has(input[type=checkbox]:user-invalid){box-shadow:inset 0 0 0 1.5px var(--yp-err); background:#FFF2F5}
.single-product .elementor-24281 .wc-pao-addon-field[aria-invalid="true"],
.single-product .elementor-24281 .wc-pao-addon-field.wc-pao-addon-field-invalid,
.single-product .elementor-24281 .wc-pao-addon-container.wc-pao-addon-has-error .wc-pao-addon-field{border-color:var(--yp-err) !important; box-shadow:0 0 0 4px rgba(180,18,63,.12) !important}
.single-product .elementor-24281 .wc-pao-validation-notice,
.single-product .elementor-24281 .wc-pao-addon-container .error,
.single-product .elementor-24281 .wc-pao-addon-container [class*="validation"]{
margin:6px 0 0 !important; font:500 13.5px/1.45 Rubik,sans-serif !important; color:var(--yp-err) !important;
}
.single-product .elementor-24281 #required_addons_validation_message:empty,
.single-product .elementor-24281 .wc-pao-addons-container > .validation_message:empty{display:none !important}
.single-product .elementor-24281 #required_addons_validation_message:not(:empty){
display:block; margin:0 0 14px !important; padding:12px 14px !important; border:1px solid #F5C2D0 !important; border-radius:12px;
background:#FFF2F5 !important; color:var(--yp-err) !important; font:500 14px/1.5 Rubik,sans-serif !important; text-align:start;
}
.single-product .elementor-24281 #required_addons_validation_message::before{display:none !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations{margin:0 0 6px !important; border:0 !important; background:none !important; width:100%}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations tr{display:block !important; margin:0 0 14px !important; padding:0 !important; border:0 !important; background:none !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations td.value{margin:0 !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations :is(th,td){display:block !important; padding:0 !important; border:0 !important; background:none !important; text-align:start !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations :is(th,td).label,
.single-product.woocommerce div.product .elementor-24281 form.cart .variations td.label,
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations th.label label{
margin:0 0 6px !important; padding:0 !important; font:600 15px/1.45 Rubik,sans-serif !important; color:var(--yp-ink) !important; text-align:start !important;
}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations select{
width:100% !important; min-width:0 !important; height:52px; margin:0 !important; padding:0 16px !important; padding-inline-end:44px !important;
border:1.5px solid var(--yp-line) !important; border-radius:12px !important; background:#fff var(--yp-down) no-repeat left 14px center/18px !important;
-webkit-appearance:none; appearance:none; box-shadow:none !important; cursor:pointer;
font:500 16px Rubik,sans-serif !important; color:var(--yp-ink) !important;
}
[dir="ltr"] .single-product .elementor-24281 table.variations select{background-position:right 14px center !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations select:hover{border-color:#C9BFE6 !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) table.variations select:focus{outline:0; border-color:var(--yp-tq) !important; box-shadow:0 0 0 4px rgba(3,218,196,.2) !important}
.single-product .elementor-24281 .woocommerce-variation.single_variation:not(:empty){margin:0 0 14px; padding:14px 16px; border-radius:16px; background:var(--yp-lav); text-align:center}
.single-product .elementor-24281 .woocommerce-variation-price .price{display:block; margin:0 !important; font:700 26px/1.15 Rubik,sans-serif !important; color:var(--yp-night) !important; direction:ltr; unicode-bidi:isolate}
.single-product .elementor-24281 .woocommerce-variation-price .price *{font:inherit !important; color:inherit !important}
.single-product .elementor-24281 .woocommerce-variation-availability p,
.single-product .elementor-24281 .woocommerce-variation-description p{margin:6px 0 0 !important; font:500 14px Rubik,sans-serif !important; color:var(--yp-mut) !important}
.single-product .elementor-24281 .woocommerce-variation-availability .out-of-stock{color:var(--yp-err) !important}
.single-product .elementor-24281 .elementor-element.elementor-element-71c8a48 form.cart .single_add_to_cart_button,
.single-product .elementor-24281 .elementor-element.elementor-element-230dfa5 form.cart .single_add_to_cart_button{
display:inline-flex !important; align-items:center; justify-content:center; gap:10px; width:100% !important; height:56px; min-height:56px;
margin:6px 0 0 !important; padding:0 22px !important; border:0 !important; border-radius:14px !important;
background:var(--yp-tq) !important; color:var(--yp-night) !important; box-shadow:0 14px 28px -16px rgba(3,170,160,.9) !important;
font:600 18px/1 Rubik,sans-serif !important; letter-spacing:0; text-transform:none; cursor:pointer;
transition:background .25s,color .25s,transform .25s var(--yp-ease),box-shadow .25s; opacity:1;
}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button::before{
content:""; width:22px; height:22px; flex:none; background:currentColor; transition:transform .25s var(--yp-ease);
-webkit-mask:var(--yp-cart) center/contain no-repeat; mask:var(--yp-cart) center/contain no-repeat;
}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button:hover{
background:var(--yp-night) !important; color:#fff !important; transform:translateY(-1px)}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button:hover::before{transform:translateX(-3px)}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button:active{transform:translateY(0) scale(.98)}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button:focus-visible{outline:3px solid var(--yp-night) !important; outline-offset:3px}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button:is(.disabled,:disabled,.wc-variation-selection-needed,.wc-variation-is-unavailable){
background:#BDEFEA !important; color:rgba(11,29,99,.6) !important; box-shadow:none !important; cursor:not-allowed; transform:none; opacity:1 !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button.loading{opacity:.85; pointer-events:none}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button.loading::before{
-webkit-mask:none; mask:none; background:none; border:2.5px solid currentColor; border-inline-end-color:transparent; border-radius:50%;
width:18px; height:18px; animation:ypSpin .8s linear infinite}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button.loading::after{display:none !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button.added::after{display:none !important}
@keyframes ypSpin{to{transform:rotate(360deg)}}
.single-product .elementor-24281 .notify_box .notify_content{border-radius:16px !important; background:#FFF8E6 !important; border:1px solid #F3D27A !important; color:#5A4300 !important; font:400 14px/1.6 Rubik,sans-serif !important}
.single-product .elementor-24281 .notify_box .notify_message_close{color:#5A4300 !important}
.single-product .elementor-24281 .elementor-element-20f3e57 .elementor-element-71c8a48{margin-top:24px !important; background:#fff; border-radius:24px; padding-bottom:20px}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container{
position:relative; margin:18px 20px 0 !important; padding:14px 16px !important; padding-inline-start:44px !important;
border:1px solid #F3D27A !important; border-radius:14px !important; background:#FFF8E6 !important;
}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container::before{
content:""; position:absolute; top:16px; inset-inline-start:16px; width:18px; height:18px; background:#B07A00;
-webkit-mask:var(--yp-warn) center/contain no-repeat; mask:var(--yp-warn) center/contain no-repeat;
}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 .elementor-widget-container *{
color:#5A4300 !important; font-size:14px !important; font-weight:500 !important; line-height:1.6 !important; text-align:start !important; font-family:Rubik,system-ui,sans-serif !important}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 p{margin:0 0 6px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 p:last-child{margin:0 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 a{color:#3F0592 !important; text-decoration:underline !important}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 .elementor-widget-container:empty{display:none}
/* 6. FAQ: homepage accordion */
.single-product .elementor-24281 .elementor-element.elementor-element-fe18cfa{padding:80px 0 56px !important; background:#fff}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp){display:flex; flex-direction:column; gap:12px; max-width:900px; margin:0 auto 48px !important; overflow:visible !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel{
margin:0 !important; border:0 !important; border-radius:20px !important; background:#fff !important; overflow:hidden !important;
box-shadow:0 0 0 1px rgba(63,5,146,.1) !important; transition:box-shadow .35s var(--yp-ease);
}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel:hover{box-shadow:0 0 0 1px rgba(63,5,146,.22),0 18px 36px -28px rgba(30,20,90,.45) !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel:has(.wpsm_panel-collapse.in){box-shadow:0 0 0 2px var(--yp-tq),0 24px 44px -30px rgba(30,20,90,.4) !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-heading{padding:0 !important; border:0 !important; background:none !important; border-radius:0 !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-title{margin:0 !important; font-size:inherit !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-title a{
display:flex !important; align-items:center; gap:14px; padding:20px 24px !important; text-decoration:none !important; cursor:pointer;
color:var(--yp-ink) !important; background:none !important; outline:0;
}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel:has(.wpsm_panel-title a:focus-visible){outline:3px solid var(--yp-night); outline-offset:3px}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .ac_title_class{
flex:1; padding:0 !important; font:600 18px/1.45 Rubik,system-ui,sans-serif !important; color:var(--yp-ink) !important; text-align:start;
}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .ac_open_cl_icon{
order:2; flex:none; float:none !important; display:block !important; position:relative; width:34px !important; height:34px !important;
padding:0 !important; border-radius:11px; color:var(--yp-purple) !important; font-size:0 !important; line-height:0 !important;
background:
linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
linear-gradient(currentColor,currentColor) center/2px 13px no-repeat,
var(--yp-lav2) !important;
transition:background-color .3s,color .3s;
}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .ac_open_cl_icon::before{content:none !important; display:none !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel:has(.wpsm_panel-collapse.in) .ac_open_cl_icon{
color:var(--yp-night) !important;
background:
linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
var(--yp-tq) !important;
}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-collapse{border:0 !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-body{
padding:0 24px 22px !important; border:0 !important; background:none !important;
font:400 17px/1.75 Rubik,system-ui,sans-serif !important; color:#4A3F73 !important; text-align:start;
}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-body a{color:var(--yp-purple) !important; text-decoration:underline !important; text-underline-offset:3px}
/* 7. Related products: the homepage product card */
.single-product .elementor-24281 .elementor-element.elementor-element-18a6455 .elementor-heading-title{
font:700 clamp(28px,3vw,40px)/1.2 Rubik,system-ui,sans-serif !important; color:var(--yp-ink) !important; letter-spacing:-.01em; margin:0 0 28px !important;
}
.single-product .elementor-24281 .elementor-element-adb8fab ul.products{display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:20px !important; margin:0 !important; padding:0 !important; list-style:none}
.single-product .elementor-24281 .elementor-element-adb8fab ul.products::before,
.single-product .elementor-24281 .elementor-element-adb8fab ul.products::after{content:none !important; display:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab li.product{
position:relative; width:auto !important; float:none !important; margin:0 !important; padding:0 0 18px !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; flex-wrap:nowrap !important;
background:#fff !important; border:0 !important; border-radius:24px !important; box-shadow:0 0 0 1px rgba(63,5,146,.08),0 24px 50px -32px rgba(11,29,99,.45); text-align:center; overflow:visible;
transition:transform .45s var(--yp-ease),box-shadow .45s var(--yp-ease);
}
.single-product .elementor-24281 .elementor-element-adb8fab li.product:hover{transform:translateY(-6px); box-shadow:0 0 0 1px rgba(63,5,146,.12),0 34px 60px -28px rgba(11,29,99,.6)}
.single-product .elementor-24281 .elementor-element-adb8fab .flex-center{order:1; display:flex !important; justify-content:center; padding:26px 0 0 !important; margin:0 !important; position:static !important}
.single-product .elementor-24281 .elementor-element-adb8fab .product-icon{width:68px !important; height:68px !important; border-radius:50%; object-fit:contain; box-shadow:0 10px 24px -12px rgba(11,29,99,.5); background:#fff}
.single-product .elementor-24281 .elementor-element-adb8fab a.woocommerce-LoopProduct-link{order:2; display:block !important; padding:14px 18px 0 !important; text-decoration:none !important; background:none !important; min-height:0 !important; height:auto !important}
.single-product .elementor-24281 .elementor-element-adb8fab a.woocommerce-LoopProduct-link > img,
.single-product .elementor-24281 .elementor-element-adb8fab a.woocommerce-LoopProduct-link > .price{display:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab .woocommerce-loop-product__title{margin:0 !important; padding:0 !important; font:700 19px/1.3 Rubik,sans-serif !important; color:var(--yp-ink) !important; min-height:2.6em; display:flex; align-items:center; justify-content:center}
.single-product .elementor-24281 .elementor-element-adb8fab .background-additional-product-img{position:absolute !important; top:16px; right:16px; left:auto !important; width:34px !important; height:22px !important; border-radius:5px; background-size:cover !important; background-position:center !important; box-shadow:0 0 0 1px rgba(0,0,0,.08); margin:0 !important; opacity:1}
.single-product .elementor-24281 .elementor-element-adb8fab .border-grey{order:3; display:flex !important; flex-direction:column; gap:12px; height:auto !important; min-height:0 !important; margin:16px 16px 0 !important; padding:16px !important; border:0 !important; border-radius:18px; background:var(--yp-lav) !important; box-shadow:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab .input-wrap{display:flex !important; align-items:center; justify-content:space-between; gap:10px; margin:0 !important; width:100% !important; flex-direction:row !important}
.single-product .elementor-24281 .elementor-element-adb8fab .product-vip-img{display:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab .input-label{font:500 14px Rubik,sans-serif !important; color:var(--yp-mut) !important; margin:0 !important; display:block !important}
.single-product .elementor-24281 .elementor-element-adb8fab .quantity{display:flex !important; margin:0 !important}
.single-product .elementor-24281 .elementor-element-adb8fab .quantity :is(.minus,.plus){display:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab .qty{width:110px !important; height:42px !important; border-radius:12px !important; border:1px solid var(--yp-line) !important; background:#fff !important; text-align:center !important; font:600 17px Rubik,sans-serif !important; color:var(--yp-ink) !important; padding:0 8px !important; -moz-appearance:textfield}
.single-product .elementor-24281 .elementor-element-adb8fab .qty::-webkit-inner-spin-button{-webkit-appearance:none}
.single-product .elementor-24281 .elementor-element-adb8fab .qty:focus{outline:0; border-color:var(--yp-tq) !important; box-shadow:0 0 0 4px rgba(3,218,196,.2)}
.single-product .elementor-24281 .elementor-element-adb8fab input.range-amount[type="range"]{display:block !important; width:100% !important; height:22px; margin:0 !important; background:transparent !important; -webkit-appearance:none; appearance:none; cursor:pointer; border:0 !important}
.single-product .elementor-24281 .elementor-element-adb8fab input.range-amount[type="range"]::-webkit-slider-runnable-track{height:6px; border:0 !important; border-radius:6px; background:linear-gradient(90deg,var(--yp-tq) 0,var(--yp-tq) var(--p,0%),#D6CCEF var(--p,0%),#D6CCEF 100%) !important}
.single-product .elementor-24281 .elementor-element-adb8fab input.range-amount[type="range"]::-moz-range-track{height:6px; border-radius:6px; background:#D6CCEF}
.single-product .elementor-24281 .elementor-element-adb8fab input.range-amount[type="range"]::-moz-range-progress{height:6px; border-radius:6px; background:var(--yp-tq)}
.single-product .elementor-24281 .elementor-element-adb8fab input.range-amount[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:#fff; border:3px solid var(--yp-tq); box-shadow:0 4px 10px -2px rgba(11,29,99,.4)}
.single-product .elementor-24281 .elementor-element-adb8fab input.range-amount[type="range"]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--yp-tq)}
.single-product .elementor-24281 .elementor-element-adb8fab .border-grey .price{margin:0 !important; font:700 19px Rubik,sans-serif !important; color:var(--yp-night) !important; direction:ltr}
.single-product .elementor-24281 .elementor-element-adb8fab .border-grey .price *{color:inherit !important; font:inherit !important}
.single-product .elementor-24281 .elementor-element-adb8fab .quick_view{order:4; display:flex !important; align-items:center; justify-content:center; width:auto !important; height:46px; margin:12px 16px 0 !important; padding:0 16px !important; border:0 !important; border-radius:12px !important; background:var(--yp-tq) !important; color:var(--yp-night) !important; font:600 16px/1 Rubik,sans-serif !important; text-decoration:none !important; cursor:pointer; transition:background .3s,color .3s; float:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab .quick_view:hover{background:var(--yp-night) !important; color:#fff !important}
.single-product .elementor-24281 .elementor-element-adb8fab .product-buttons-group{order:5; display:block !important; margin:8px 16px 0 !important; padding:0 !important; width:auto !important}
.single-product .elementor-24281 .elementor-element-adb8fab .product-buttons-group .button{display:flex !important; align-items:center; justify-content:center; width:auto !important; height:46px; margin:0 !important; padding:0 16px !important; border-radius:12px !important; background:transparent !important; color:var(--yp-purple) !important; border:1px solid rgba(63,5,146,.22) !important; font:600 16px/1 Rubik,sans-serif !important; text-decoration:none !important; float:none !important; transition:background .3s}
.single-product .elementor-24281 .elementor-element-adb8fab .product-buttons-group .button:hover{background:var(--yp-lav2) !important}
.single-product .elementor-24281 .elementor-element-adb8fab :is(.quick_view,.product-buttons-group .button,.woocommerce-LoopProduct-link):focus-visible{outline:3px solid var(--yp-tq); outline-offset:2px}
/* 8. Long SEO text */
.single-product .elementor-24281 .elementor-element.elementor-element-63c1efb:has(.elementor-element-4ed42c2){padding:24px 0 72px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container{max-width:860px; margin:0 auto !important; padding:0 10px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 :is(p,li){font-family:Rubik,system-ui,sans-serif; font-size:17px; line-height:1.8; color:#2E2652}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 :is(h2,h3){font-family:Rubik,system-ui,sans-serif; color:var(--yp-ink); line-height:1.3; letter-spacing:-.005em}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h2{font-size:clamp(24px,2.2vw,30px); font-weight:700; margin:40px 0 12px}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h3{font-size:20px; font-weight:600; margin:28px 0 8px}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 a{color:var(--yp-purple); text-decoration:underline; text-underline-offset:3px}
/* 9. Tablet and phone */
@media (max-width:1100px){
.single-product .elementor-24281 .elementor-element-adb8fab ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:1024px){
.single-product .elementor-24281 .elementor-element.elementor-element-b13f5c4{padding:28px 0 56px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-widget-wrap{margin-top:28px !important}
}
@media (max-width:767px){
.single-product .elementor-24281 .elementor-element.elementor-element-b13f5c4{padding:20px 0 44px !important}
.single-product .elementor-24281 .elementor-element-b13f5c4::before{
background:
radial-gradient(circle 260px at calc(100% - 40px) 40px, rgba(45,107,228,.9) 0%, rgba(45,107,228,0) 72%),
radial-gradient(circle 220px at 20px 260px, rgba(122,43,230,.75) 0%, rgba(122,43,230,0) 72%),
radial-gradient(circle 260px at 30% calc(100% + 30px), rgba(3,218,196,.45) 0%, rgba(3,218,196,0) 72%),
radial-gradient(circle 240px at 100% 62%, rgba(122,43,230,.4) 0%, rgba(122,43,230,0) 72%);
}
.single-product .elementor-24281 .elementor-element-b13f5c4::after{-webkit-mask-image:radial-gradient(ellipse 90% 30% at 50% 14%,#000 20%,transparent 80%); mask-image:radial-gradient(ellipse 90% 30% at 50% 14%,#000 20%,transparent 80%)}
.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element-4f0f779{margin:0 0 20px !important; padding:0 16px !important}
.single-product .elementor-24281 nav.woocommerce-breadcrumb{font-size:13px !important; gap:6px 4px}
.single-product .elementor-24281 nav.woocommerce-breadcrumb a{min-height:28px; padding:3px 10px}
.single-product .elementor-24281 .elementor-element.elementor-element-3dca810 > .elementor-widget-container,
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 > .elementor-widget-container{margin-inline:16px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-3dca810 .elementor-heading-title{font-size:min(34px,8.6vw) !important; line-height:1.18 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12,
.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 *{font-size:16px !important; line-height:1.7 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-widget-wrap{width:calc(100% - 32px); margin:24px 16px 0 !important; border-radius:24px; padding-bottom:20px !important}
.single-product .elementor-24281 .s-prod{padding:24px 18px 0 !important}
.single-product .elementor-24281 .s-prod .single-product-icon{width:72px !important; height:72px !important}
.single-product .elementor-24281 .s-prod .product-short-desc{font-size:19px !important}
.single-product .elementor-24281 .white-box{margin:16px 14px 0 !important; padding:16px 14px !important}
.single-product .elementor-24281 .white-box .quantity .qty{width:96px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container{margin:16px 14px 0 !important}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) > .elementor-widget-container{padding:18px 14px 0 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-fe18cfa{padding:52px 0 32px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-65c3bd0 > .elementor-widget-container{margin:0 16px !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-title a{padding:16px 18px !important; gap:12px}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .ac_title_class{font-size:16.5px !important}
.single-product .elementor-24281 .wpsm_panel-group:not(#yp) .wpsm_panel-body{padding:0 18px 20px !important; font-size:16px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-18a6455 > .elementor-widget-container{margin:0 16px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-18a6455 .elementor-heading-title{font-size:26px !important; margin-bottom:8px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-adb8fab > .elementor-widget-container{margin:0 !important; padding:0 !important}
.single-product .elementor-24281 .elementor-element-adb8fab ul.products{display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px !important; margin:0 !important; padding:22px 16px 12px !important; scrollbar-width:none}
.single-product .elementor-24281 .elementor-element-adb8fab ul.products::-webkit-scrollbar{display:none}
.single-product .elementor-24281 .elementor-element-adb8fab li.product{flex:0 0 80%; scroll-snap-align:center; box-shadow:0 0 0 1px rgba(63,5,146,.12); transition:none}
.single-product .elementor-24281 .elementor-element-adb8fab li.product:hover{transform:none}
.single-product .elementor-24281 .elementor-element-adb8fab .woocommerce-loop-product__title{font-size:18px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container{padding:0 16px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 :is(p,li){font-size:16px}
}
/* 10. Reduced motion */
@media (prefers-reduced-motion:reduce){
.single-product .elementor-24281 *,
.single-product .elementor-24281 *::before,
.single-product .elementor-24281 *::after{transition:none !important}
.single-product .elementor-24281 .elementor-element-adb8fab li.product:hover,
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button:hover{transform:none}
.single-product .elementor-24281 :is(.elementor-element-71c8a48,.elementor-element-230dfa5) form.cart .single_add_to_cart_button.loading::before{animation-duration:2.4s}
}
/* ---------------------------------------------------------------------
11. (20.10) FAQ heading + framed SEO text
--------------------------------------------------------------------- */
/* "שאלות נפוצות" heading (printed by yh-product-headings.php only when the product has FAQ) — same type as the related heading */
.single-product .elementor-24281 .elementor-element-65c3bd0 h2.yp-faq-title{
margin:0 0 28px !important; padding:0 !important; text-align:center;
font:700 clamp(28px,3vw,40px)/1.2 Rubik,system-ui,sans-serif !important; color:var(--yp-ink) !important; letter-spacing:-.01em;
}
.single-product .elementor-24281 .elementor-element-65c3bd0 h2.yp-faq-title::after{
content:""; display:block; width:56px; height:5px; margin:14px auto 0; border-radius:5px;
background:linear-gradient(90deg,var(--yp-tq),#7A2BE6);
}
.single-product .elementor-24281 .elementor-element.elementor-element-18a6455 .elementor-heading-title::after{
content:""; display:block; width:56px; height:5px; margin:14px 0 0; border-radius:5px;
background:linear-gradient(90deg,var(--yp-tq),#7A2BE6);
}
/* Long SEO text: a framed reading card on a soft lavender band */
.single-product .elementor-24281 .elementor-element.elementor-element-63c1efb:has(.elementor-element-4ed42c2){
padding:56px 0 88px !important;
background:linear-gradient(180deg,#fff 0,var(--yp-lav) 120px,var(--yp-lav) 100%) !important;
}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container{
position:relative; max-width:980px; margin:0 auto !important; padding:56px 64px 48px !important;
background:#fff; border-radius:32px; overflow:hidden;
box-shadow:0 0 0 1px rgba(63,5,146,.07),0 30px 60px -36px rgba(11,29,99,.4);
}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container::before{
content:""; position:absolute; inset:0 0 auto 0; height:6px;
background:linear-gradient(90deg,#7A2BE6,#2D6BE4 50%,var(--yp-tq));
}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container > :first-child,
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container > :first-child > :first-child{margin-top:0 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h2{
position:relative; padding-inline-start:20px; margin:44px 0 14px;
}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h2::before{
content:""; position:absolute; inset-inline-start:0; top:.18em; bottom:.18em; width:6px; border-radius:6px;
background:linear-gradient(180deg,var(--yp-tq),#7A2BE6);
}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h3{color:var(--yp-purple)}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 li::marker{color:var(--yp-tq)}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 img{border-radius:18px; height:auto; max-width:100%}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 :is(strong,b){color:var(--yp-ink)}
@media (max-width:767px){
.single-product .elementor-24281 .elementor-element-65c3bd0 h2.yp-faq-title{font-size:26px !important; margin-bottom:20px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-63c1efb:has(.elementor-element-4ed42c2){padding:36px 0 56px !important}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 > .elementor-widget-container{
margin:0 16px !important; padding:34px 20px 28px !important; border-radius:24px;
}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h2{padding-inline-start:16px; margin-top:32px}
.single-product .elementor-24281 .elementor-element.elementor-element-4ed42c2 h2::before{width:5px}
}
/* ---------------------------------------------------------------------
12. (20.10) Desktop: the product text (20f3e57) stays in view while the purchase card is filled in.
The hero clips its decoration with overflow:clip (overflow:hidden would stop sticky).
yh-product.js sets --yp-stick (header bottom + gap) and adds .yp-stick only when the text fits the screen.
--------------------------------------------------------------------- */
@media (min-width:1025px){
.single-product .elementor-24281 .elementor-element.elementor-element-b13f5c4{overflow:clip !important}
.single-product .elementor-24281 .elementor-element-20f3e57.yp-stick > .elementor-widget-wrap{
position:sticky; top:var(--yp-stick,170px); align-self:flex-start; height:auto !important;
transition:top .35s var(--yp-ease);
}
}
/* ===== 12b. (20.10) Noa:================================================================
YouHoo product page: benefits list (widget 73febff = post content)
Scope: template 24281 only. "body." prefix gives higher specificity than
the older .single-product tile rules in yh-product.css, so this block can be
appended at the end of that file (or the old 73febff rules can be deleted).
Row = gradient icon tile at inline-start (right in RTL) + text.
Grid auto-fills: 2 cols in the 560px right column (desktop, after JS move),
3 cols when full width (pre-JS fallback / tablet), 1 col on phones.
===================================================================== */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff {
--yb-tile: 32px;
--yb-glyph: 18px;
--yb-gap: 12px;
--yb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
--yb-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
width: 100% !important;
max-width: none !important;
}
/* Widget container: reset old margins (Elementor mobile had margin:30% 5%) */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container {
margin: 40px 0 0 !important;
padding: 0 !important;
border: 0 !important;
text-align: start !important;
color: #fff;
}
/* Stray
and empty paragraphs from the editor */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff br { display: none !important; }
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff p:empty { display: none !important; }
/* ---------- Headline line (div[align=center]) -> label with gradient dash ---------- */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > div[align] {
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 0 14px !important;
text-align: start !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > div[align]::before {
content: "";
flex: 0 0 auto;
inline-size: 28px;
block-size: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #03DAC4, #7A2BE6);
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > div[align] :is(strong, b, span, font) {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
color: #fff !important; /* beats inline color:#00264d */
font: 600 17px/1.35 Rubik, system-ui, sans-serif !important; /* beats x-large */
letter-spacing: 0 !important;
}
/* ---------- The list ---------- */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important;
gap: 10px 20px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col {
display: contents !important;
}
/* Old rule moved column 2 first; restore source order */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col:nth-child(2) > * {
order: 0 !important;
}
/* Row */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p {
position: relative;
display: block !important;
width: auto !important;
height: auto !important;
min-height: var(--yb-tile) !important;
margin: 0 !important;
padding: 5px 0 0 !important; /* centres a 1-line text on the tile */
padding-inline-start: calc(var(--yb-tile) + var(--yb-gap)) !important;
background: none !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
text-align: start !important;
color: rgba(255, 255, 255, .9) !important;
font: 500 15px/1.5 Rubik, system-ui, sans-serif !important;
}
/* Icon tile (homepage "why" language: gradient rounded square + white glyph) */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: var(--yb-tile);
block-size: var(--yb-tile);
border-radius: 10px;
background: linear-gradient(135deg, #03DAC4 0%, #2D6BE4 55%, #7A2BE6 100%);
box-shadow: 0 8px 18px -8px rgba(3, 218, 196, .55), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
/* White check glyph, centred on the tile */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p::after {
content: "";
position: absolute;
inset-block-start: calc((var(--yb-tile) - var(--yb-glyph)) / 2);
inset-inline-start: calc((var(--yb-tile) - var(--yb-glyph)) / 2);
inline-size: var(--yb-glyph);
block-size: var(--yb-glyph);
background: #fff;
-webkit-mask: var(--yb-check) center / contain no-repeat;
mask: var(--yb-check) center / contain no-repeat;
}
/* Old 2018 PNG icons: hidden everywhere in this widget (they differ per product) */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff img {
display: none !important;
}
/* Text runs: neutralise inline colours / sizes from the editor */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p :is(span, strong, b, font, em) {
display: inline !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
text-align: inherit !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p :is(strong, b) {
font-weight: 600 !important;
color: #fff !important; /* beats inline color:#002966 */
}
/* ---------- Trailing note(s) outside the grid -> muted line + info icon ---------- */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > p {
position: relative;
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 14px 0 0 !important;
padding: 0 !important;
padding-inline-start: 26px !important;
background: none !important;
box-shadow: none !important;
border: 0 !important;
text-align: start !important; /* beats inline text-align:center */
color: rgba(255, 255, 255, .7) !important;
font: 400 14px/1.55 Rubik, system-ui, sans-serif !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > p::before {
content: "";
position: absolute;
inset-block-start: 2px;
inset-inline-start: 0;
inline-size: 18px;
block-size: 18px;
background: #03DAC4;
-webkit-mask: var(--yb-info) center / contain no-repeat;
mask: var(--yb-info) center / contain no-repeat;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > p :is(span, strong, b, font) {
display: inline !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
color: inherit !important;
font: inherit !important;
}
/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
/* Inside the right column (after JS move): sits under the description */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff.yb-in-col > .elementor-widget-container {
margin: 22px 0 0 !important;
}
/* Pre-JS fallback (full width under both columns) */
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff:not(.yb-in-col) > .elementor-widget-container {
margin: 48px 0 0 !important;
}
}
/* ---------- Tablet (columns stacked; list stays after the card) ---------- */
@media (max-width: 1024px) {
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container {
margin: 32px 16px 0 !important;
}
}
/* ---------- Phone: one column inside a glass panel, after the card ---------- */
@media (max-width: 767px) {
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff {
--yb-tile: 34px;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container {
margin: 24px 16px 0 !important; /* matches the card's 16px side inset */
padding: 20px 18px !important;
border-radius: 22px;
background: rgba(255, 255, 255, .07);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container {
gap: 12px !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p {
padding-block-start: 6px !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container > div[align] :is(strong, b, span, font) {
font-size: 16px !important;
}
}
/* No animation is introduced, so nothing needs a prefers-reduced-motion override. */
/* ---------------------------------------------------------------------
13. (20.10) Desktop: link field + add to cart under the text (right), quantity card + benefits (left)
--------------------------------------------------------------------- */
@media (min-width:1025px){
.single-product .elementor-24281 .elementor-element-20f3e57 .elementor-element-71c8a48{
margin-top:24px !important; background:#fff; border-radius:28px; padding-bottom:22px;
box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px -30px rgba(5,10,40,.7);
}
.single-product .elementor-24281 .elementor-element-20f3e57 .elementor-element-71c8a48 > .elementor-widget-container{padding:24px 24px 0 !important}
.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2.yp-has-list{flex-direction:column; justify-content:flex-start}
body.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-element-73febff.yb-in-col{width:100% !important; padding:0 30px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff.yb-in-col > .elementor-widget-container{
margin:24px 0 0 !important; padding:22px 22px !important; border-radius:24px;
background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff.yb-in-col .custom-two-col-container{grid-template-columns:1fr !important; gap:12px !important}
}
/* 13b. (20.10 v2) Benefits list in the text column (right), under the description */
@media (min-width:1025px){
body.single-product .elementor-24281 .elementor-element-20f3e57 .elementor-element.elementor-element-73febff.yb-in-col{width:100% !important}
body.single-product .elementor-24281 .elementor-element-20f3e57 .elementor-element.elementor-element-73febff.yb-in-col > .elementor-widget-container{margin:28px 0 0 !important}
}
/* 13c. (20.10) Quantity row: label and +/- together, centred */
body.single-product .elementor-24281 .white-box .input-wrap{justify-content:center !important; gap:16px !important}
body.single-product .elementor-24281 .white-box .input-wrap .input-label{flex:0 0 auto !important; width:auto !important}
body.single-product .elementor-24281 .white-box .input-wrap .quantity{flex:0 0 auto !important; width:auto !important; margin:0 !important}
/* 13d. (20.10) Breadcrumbs: no pills/background, just an underline under each link (the current page stays plain) */
body.single-product .elementor-24281 nav.woocommerce-breadcrumb a,
body.single-product .elementor-24281 .elementor-element-b13f5c4 nav.woocommerce-breadcrumb a{
min-height:0 !important; padding:2px 0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
text-decoration:underline !important; text-decoration-thickness:1.5px !important; text-underline-offset:5px !important;
text-decoration-color:rgba(3,218,196,.75) !important; transition:color .2s,text-decoration-color .2s;
}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb a:hover,
body.single-product .elementor-24281 .elementor-element-b13f5c4 nav.woocommerce-breadcrumb a:hover{
background:none !important; color:var(--yp-tq) !important; text-decoration-color:var(--yp-tq) !important;
}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb{gap:6px 10px !important}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb .yp-bc-cur{padding:0 !important; text-decoration:none !important}
/* 13e. (20.10) Phones: breadcrumbs on one line; whatever does not fit ends with "…" (links keep their full text first,
the current page name gives way) */
@media (max-width:767px){
body.single-product .elementor-24281 nav.woocommerce-breadcrumb{flex-wrap:nowrap !important; overflow:hidden; white-space:nowrap; min-width:0; max-width:100%}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb > *{flex:0 0 auto; white-space:nowrap}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb a{display:block !important; flex:0 0 auto !important; min-width:0; overflow:hidden; text-overflow:ellipsis; max-width:42vw}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb .yp-bc-cur{display:block !important; flex:1 1 0 !important; min-width:0; overflow:hidden; text-overflow:ellipsis}
}
/* 13f. (20.10) Breadcrumbs sit right above the title; links in the text column are turquoise */
body.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element.elementor-element-4f0f779{margin-bottom:14px !important}
body.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element.elementor-element-aceb954{margin-top:0 !important}
body.single-product .elementor-24281 .elementor-element-20f3e57 a:not(.button):not(.elementor-button),
body.single-product .elementor-24281 .elementor-element-20f3e57 a:not(.button):not(.elementor-button)[style*="color"],
body.single-product .elementor-24281 .elementor-element-20f3e57 a:not(.button):not(.elementor-button) *{
color:#03DAC4 !important; -webkit-text-fill-color:#03DAC4 !important; text-decoration-color:rgba(3,218,196,.6) !important;
}
body.single-product .elementor-24281 .elementor-element-20f3e57 a:not(.button):not(.elementor-button){text-decoration:underline !important; text-underline-offset:3px}
body.single-product .elementor-24281 .elementor-element-20f3e57 a:not(.button):not(.elementor-button):hover,
body.single-product .elementor-24281 .elementor-element-20f3e57 a:not(.button):not(.elementor-button):hover *{color:#7FF3E6 !important; -webkit-text-fill-color:#7FF3E6 !important}
@media (max-width:767px){
body.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element.elementor-element-4f0f779{margin:0 0 10px !important}
}
/* 13g. (20.10) Phones: more air between breadcrumbs and title; the benefits list sits straight on the hero with small
icons; the purchase card takes the glass style of that list (light text on the dark hero, white fields stay white) */
@media (max-width:1024px){
body.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element.elementor-element-4f0f779{margin:0 0 24px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff{--yb-tile:20px; --yb-glyph:12px; --yb-gap:10px}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff > .elementor-widget-container{
margin:28px 18px 0 !important; padding:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container{gap:10px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p{padding-block-start:0 !important; min-height:20px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p::before{inset-block-start:1px; border-radius:6px; box-shadow:0 6px 12px -6px rgba(3,218,196,.55), inset 0 0 0 1px rgba(255,255,255,.18)}
body.single-product .elementor-24281 .elementor-element.elementor-element-73febff .custom-two-col-container p::after{inset-block-start:5px}
/* the card */
body.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-widget-wrap{
background:rgba(255,255,255,.07) !important; color:#fff; border-radius:22px !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.single-product .elementor-24281 .elementor-element-32c83d2 .s-prod .product-short-desc{color:#fff !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box{background:rgba(255,255,255,.06) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box .input-label{color:rgba(255,255,255,.78) !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box > .woocommerce-Price-amount{color:#fff !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box input.range-amount[type="range"]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--yp-tq) 0,var(--yp-tq) var(--p,0%),rgba(255,255,255,.22) var(--p,0%),rgba(255,255,255,.22) 100%) !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box input.range-amount[type="range"]::-moz-range-track{background:rgba(255,255,255,.22)}
/* notice in the card: same glass notice as on desktop */
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container{border:1px solid rgba(255,255,255,.16) !important; background:rgba(255,255,255,.06) !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container::before{background:#FFC857}
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 .elementor-widget-container *{color:rgba(255,255,255,.88) !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 a,
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 a *{color:#03DAC4 !important; -webkit-text-fill-color:#03DAC4 !important; text-decoration-color:rgba(3,218,196,.6) !important}
/* form texts */
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-name,
body.single-product .elementor-24281 .elementor-element-32c83d2 table.variations :is(th,td).label,
body.single-product .elementor-24281 .elementor-element-32c83d2 table.variations label{color:#fff !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-name em.required{color:#FF9DBA !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 :is(.wc-pao-addon-description,.wc-pao-addon-description p,.woocommerce-variation-availability p,.woocommerce-variation-description p){color:rgba(255,255,255,.72) !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 :is(.wc-pao-validation-notice,.wc-pao-addon-container .error,.wc-pao-addon-container [class*="validation"]){color:#FF9DBA !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-container .form-row label:has(input[type=checkbox]){color:#fff !important; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-container .form-row label:has(input:checked){background:rgba(3,218,196,.14); box-shadow:inset 0 0 0 1.5px var(--yp-tq)}
body.single-product .elementor-24281 .elementor-element-32c83d2 .woocommerce-variation.single_variation:not(:empty){background:rgba(255,255,255,.06)}
body.single-product .elementor-24281 .elementor-element-32c83d2 .woocommerce-variation-price .price{color:#fff !important}
}
/* 13h. (20.10) Desktop: breadcrumbs move into the text column above the title (yh-product.js step 7), so breadcrumbs, title and card start on one line */
@media (min-width:1025px){
body.single-product .elementor-24281 .elementor-element-20f3e57 .elementor-element.elementor-element-4f0f779{margin:-10px 0 22px !important; padding:0 !important; width:100%}
}
/* 13i. (20.10) Breadcrumb links keep the light text (the turquoise rule for links in the text column must not reach them) */
body.single-product .elementor-24281 .elementor-element-20f3e57 nav.woocommerce-breadcrumb a:not(.button):not(.elementor-button),
body.single-product .elementor-24281 .elementor-element-20f3e57 nav.woocommerce-breadcrumb a:not(.button):not(.elementor-button) *{
color:rgba(255,255,255,.86) !important; -webkit-text-fill-color:rgba(255,255,255,.86) !important; text-decoration-color:rgba(3,218,196,.75) !important;
}
body.single-product .elementor-24281 .elementor-element-20f3e57 nav.woocommerce-breadcrumb a:not(.button):not(.elementor-button):hover,
body.single-product .elementor-24281 .elementor-element-20f3e57 nav.woocommerce-breadcrumb a:not(.button):not(.elementor-button):hover *{
color:#fff !important; -webkit-text-fill-color:#fff !important;
}
/* 13j. (20.10) Phones: breadcrumbs further from the title, description closer to it; fields and the +/- stepper are
transparent with a thin frame (like the "יחידות" box); notices in the card have no box at all */
@media (max-width:1024px){
body.single-product .elementor-24281 .elementor-element-b13f5c4 .elementor-element.elementor-element-4f0f779{margin:0 0 36px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-3dca810{margin-bottom:8px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-3dca810 .elementor-heading-title{margin-bottom:0 !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12,
body.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 > .elementor-widget-container{margin-top:0 !important; padding-top:0 !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 p:first-child{margin-top:0 !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-container :is(textarea.wc-pao-addon-field, input.wc-pao-addon-field:not([type=checkbox]):not([type=radio])),
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box .quantity :is(.qty, input.plus, input.minus){
background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.22) !important; color:#fff !important; box-shadow:none !important;
}
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-container :is(textarea, input)::placeholder{color:rgba(255,255,255,.5) !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .wc-pao-addon-container .wc-pao-addon-field:focus,
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box .quantity .qty:focus{border-color:var(--yp-tq) !important; box-shadow:0 0 0 3px rgba(3,218,196,.25) !important; outline:0 !important}
body.single-product .elementor-24281 .elementor-element-32c83d2 .white-box .quantity :is(input.plus, input.minus):hover{background:var(--yp-tq) !important; border-color:var(--yp-tq) !important; color:var(--yp-night) !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container{
background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
padding:0 !important; padding-inline-start:28px !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-c988210 > .elementor-widget-container::before{top:3px; inset-inline-start:0}
}
/* 13k. (20.10) The 13g/13j look on every screen size (Julia): desktop leftovers */
/* desktop notice (02964ec): no box, icon + text only */
body.single-product .elementor-24281 .elementor-element.elementor-element-02964ec > .elementor-widget-container{
background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
padding:0 !important; padding-inline-start:30px !important; margin-top:22px !important;
}
body.single-product .elementor-24281 .elementor-element.elementor-element-02964ec > .elementor-widget-container::before{top:3px; inset-inline-start:0}
/* desktop card: same radius feel as the glass list */
@media (min-width:768px){
body.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-widget-wrap{border-radius:26px !important}
}
/* 13l. (20.10) Desktop goes back to the white purchase card and the boxed benefits list (Julia); the glass card,
small icons and transparent fields of 13g/13j stay for phones and tablets. Kept on desktop: description close to
the title, notices without a box. The username/link notice (.notify_box): no fill, a soft red frame. */
@media (min-width:1025px){
body.single-product .elementor-24281 .elementor-element.elementor-element-3dca810{margin-bottom:8px !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-3dca810 .elementor-heading-title{margin-bottom:0 !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12,
body.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 > .elementor-widget-container{margin-top:0 !important; padding-top:0 !important}
body.single-product .elementor-24281 .elementor-element.elementor-element-66a9d12 p:first-child{margin-top:0 !important}
}
body.single-product .elementor-24281 .notify_box{
background:none !important; border:1px solid rgba(255,107,129,.55) !important; border-radius:14px !important; padding:12px 16px !important;
}
body.single-product .elementor-24281 .notify_box .notify_content{
background:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important;
color:rgba(255,255,255,.9) !important;
}
body.single-product .elementor-24281 .notify_box .notify_content *:not(.notify_message_close){color:inherit !important; background:none !important}
@media (min-width:1025px){
body.single-product .elementor-24281 .notify_box{border-color:rgba(214,51,90,.38) !important}
body.single-product .elementor-24281 .notify_box .notify_content{color:var(--yp-ink) !important}
}
/* 13m. (20.10) Desktop: the card ends after its content (no empty white area) and is sticky (yh-product.js step 8) */
@media (min-width:1025px){
body.single-product .elementor-24281 .elementor-element.elementor-element-32c83d2 > .elementor-widget-wrap{
position:sticky !important; top:var(--yp-card-top,170px); align-self:flex-start !important; height:auto !important;
}
}
/* add-on text fields: one line to start, they grow with the text (step 8) */
body.single-product .elementor-24281 form.cart textarea.wc-pao-addon-field{min-height:52px !important; resize:none !important; transition:height .15s ease}
@media (prefers-reduced-motion:reduce){ body.single-product .elementor-24281 form.cart textarea.wc-pao-addon-field{transition:none} }
/* 13n. (20.10) Related cards: the legacy snippet "Fixed Quantity Issue" (CCJ 30282) moves the quick-buy button into
.product-buttons-group (class "loaded"). Same look as the homepage cards: turquoise "רכישה מהירה" first, outlined
"מידע נוסף" under it. */
body.single-product .elementor-24281 .elementor-element-adb8fab li.product .product-buttons-group{
order:4; display:flex !important; flex-direction:column; gap:8px; margin:12px 16px 0 !important; padding:0 !important; width:auto !important;
}
body.single-product .elementor-24281 .elementor-element-adb8fab li.product .product-buttons-group .button.quick_view{
order:-1; display:flex !important; align-items:center; justify-content:center; width:auto !important; height:46px; margin:0 !important; padding:0 16px !important;
border:0 !important; border-radius:12px !important; background:var(--yp-tq) !important; color:var(--yp-night) !important;
font:600 16px/1 Rubik,system-ui,sans-serif !important; text-decoration:none !important; box-shadow:none !important; float:none !important; transition:background .3s,color .3s;
}
body.single-product .elementor-24281 .elementor-element-adb8fab li.product .product-buttons-group .button.quick_view *{color:inherit !important; font:inherit !important}
body.single-product .elementor-24281 .elementor-element-adb8fab li.product .product-buttons-group .button.quick_view:hover{background:var(--yp-night) !important; color:#fff !important}
body.single-product .elementor-24281 .elementor-element-adb8fab li.product .product-buttons-group .button:not(.quick_view){order:0}
/* 13o. (22.10) Breadcrumbs now sit in the template above the title (column 20f3e57), so they show on the hero from the first paint.
The emptied top section (only the fixed WhatsApp button is left) takes no height; the clearfix pseudo-elements
no longer add a flex gap, so the first crumb lines up with the title. */
body.single-product .elementor-24281 .elementor-element-1be9267:not(:has(.elementor-element-4f0f779)),
body.single-product .elementor-24281 .elementor-element-1be9267:not(:has(.elementor-element-4f0f779)) :is(.elementor-container,.elementor-column,.elementor-widget-wrap){height:0 !important; min-height:0 !important}
body.single-product .elementor-24281 nav.woocommerce-breadcrumb::before,
body.single-product .elementor-24281 nav.woocommerce-breadcrumb::after{content:none !important; display:none !important}
/* 13p. (22.10) Designed dropdown for every select in the purchase card (product options, add-ons, PayPal plans).
yh-product.js step 10 puts a combobox (current choice + turquoise chevron) and a listbox next to each select.
The real