.elementor-770 .elementor-element.elementor-element-2fc1c35{--display:flex;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5%;--padding-bottom:0%;--padding-left:4%;--padding-right:4%;}.elementor-770 .elementor-element.elementor-element-18e1ee4e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:10%;}.elementor-770 .elementor-element.elementor-element-2292bea7{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 8%) 0%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-770 .elementor-element.elementor-element-7c761660{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;}.elementor-770 .elementor-element.elementor-element-7c761660 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:22px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;color:#1C244B;}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-770 .elementor-element.elementor-element-49f212ca .elementor-heading-title{font-family:"אביב", Sans-serif;font-size:85px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;color:#1C244B;}.elementor-widget-woocommerce-product-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-770 .elementor-element.elementor-element-5b62de0{width:var( --container-widget-width, 507px );max-width:507px;margin:8% 0% calc(var(--kit-widget-spacing, 0px) + 8%) 0%;--container-widget-width:507px;--container-widget-flex-grow:0;color:#324A6D;font-family:"אביב", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-770 .elementor-element.elementor-element-384caa9c{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 4%) 0%;}.woocommerce .elementor-770 .elementor-element.elementor-element-384caa9c .price{color:#1C244B;font-family:"אביב", Sans-serif;font-size:36px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1.1em;letter-spacing:0px;}.woocommerce .elementor-770 .elementor-element.elementor-element-384caa9c .price ins{color:#324A6D;}body:not(.rtl) .elementor-770 .elementor-element.elementor-element-384caa9c:not(.elementor-product-price-block-yes) del{margin-right:10px;}body.rtl .elementor-770 .elementor-element.elementor-element-384caa9c:not(.elementor-product-price-block-yes) del{margin-left:10px;}.elementor-770 .elementor-element.elementor-element-384caa9c.elementor-product-price-block-yes del{margin-bottom:10px;}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-770 .elementor-element.elementor-element-76d7d22a .cart button, .elementor-770 .elementor-element.elementor-element-76d7d22a .cart .button{font-family:"אביב", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;padding:15px 50px 15px 50px;color:#FFFFFF;background-color:#467FF7;border-color:#467FF7;transition:all 0.2s;}.elementor-770 .elementor-element.elementor-element-76d7d22a .cart button:hover, .elementor-770 .elementor-element.elementor-element-76d7d22a .cart .button:hover{color:#467FF7;background-color:#02010100;border-color:#467FF7;}.elementor-770 .elementor-element.elementor-element-76d7d22a .added_to_cart{font-family:"אביב", Sans-serif;font-weight:500;}.elementor-770 .elementor-element.elementor-element-76d7d22a{--button-spacing:38px;}.elementor-770 .elementor-element.elementor-element-76d7d22a .quantity .qty{font-family:"אביב", Sans-serif;border-radius:0px 0px 0px 0px;color:#1C244B;border-color:#1C244B;transition:all 0.2s;}.woocommerce .elementor-770 .elementor-element.elementor-element-76d7d22a form.cart table.variations label{font-family:"אביב", Sans-serif;}.woocommerce .elementor-770 .elementor-element.elementor-element-76d7d22a form.cart table.variations td.value select, .woocommerce div.product.elementor.elementor-770 .elementor-element.elementor-element-76d7d22a form.cart table.variations td.value:before{font-family:"אביב", Sans-serif;}.elementor-770 .elementor-element.elementor-element-37aa4a3a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-770 .elementor-element.elementor-element-4da71c1 .woocommerce-breadcrumb{font-family:"אביב", Sans-serif;}.elementor-770 .elementor-element.elementor-element-46045e42{width:100%;max-width:100%;}.woocommerce .elementor-770 .elementor-element.elementor-element-46045e42 .flex-viewport:not(:last-child){margin-bottom:13px;}.woocommerce .elementor-770 .elementor-element.elementor-element-46045e42 .flex-control-thumbs li{padding-right:calc(13px / 2);padding-left:calc(13px / 2);padding-bottom:13px;}.woocommerce .elementor-770 .elementor-element.elementor-element-46045e42 .flex-control-thumbs{margin-right:calc(-13px / 2);margin-left:calc(-13px / 2);}.elementor-770 .elementor-element.elementor-element-37c6bd2{--display:flex;}.elementor-770 .elementor-element.elementor-element-7dacd57{--display:flex;}.elementor-770 .elementor-element.elementor-element-2a5772b{--display:flex;}@media(min-width:768px){.elementor-770 .elementor-element.elementor-element-2fc1c35{--content-width:1650px;}.elementor-770 .elementor-element.elementor-element-18e1ee4e{--width:50%;}.elementor-770 .elementor-element.elementor-element-37aa4a3a{--width:50%;}.elementor-770 .elementor-element.elementor-element-2a5772b{--width:100%;}}@media(max-width:1024px){.elementor-770 .elementor-element.elementor-element-2fc1c35{--min-height:700px;--padding-top:12%;--padding-bottom:0%;--padding-left:4%;--padding-right:4%;}.elementor-770 .elementor-element.elementor-element-18e1ee4e{--gap:25px 25px;--row-gap:25px;--column-gap:25px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:5%;}.elementor-770 .elementor-element.elementor-element-2292bea7{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-770 .elementor-element.elementor-element-7c761660{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-770 .elementor-element.elementor-element-7c761660 .elementor-heading-title{font-size:14px;}.elementor-770 .elementor-element.elementor-element-49f212ca .elementor-heading-title{font-size:65px;}.elementor-770 .elementor-element.elementor-element-5b62de0{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-size:14px;}.elementor-770 .elementor-element.elementor-element-384caa9c{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.woocommerce .elementor-770 .elementor-element.elementor-element-384caa9c .price{font-size:25px;}.elementor-770 .elementor-element.elementor-element-76d7d22a .cart button, .elementor-770 .elementor-element.elementor-element-76d7d22a .cart .button{font-size:14px;}}@media(max-width:767px){.elementor-770 .elementor-element.elementor-element-2fc1c35{--padding-top:5%;--padding-bottom:0%;--padding-left:6%;--padding-right:6%;}.elementor-770 .elementor-element.elementor-element-18e1ee4e{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-770 .elementor-element.elementor-element-7c761660{text-align:center;}.elementor-770 .elementor-element.elementor-element-49f212ca{text-align:center;}.elementor-770 .elementor-element.elementor-element-49f212ca .elementor-heading-title{font-size:48px;line-height:1em;}.elementor-770 .elementor-element.elementor-element-5b62de0{padding:0% 5% 0% 5%;text-align:center;}.elementor-770 .elementor-element.elementor-element-384caa9c{text-align:center;}.woocommerce .elementor-770 .elementor-element.elementor-element-384caa9c .price{font-size:20px;}.elementor-770 .elementor-element.elementor-element-37aa4a3a{--margin-top:10%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}}/* Start custom CSS for woocommerce-breadcrumb, class: .elementor-element-4da71c1 */.elementor-770 .elementor-element.elementor-element-4da71c1 { font-size: 13px; color: #946b6b; } .elementor-770 .elementor-element.elementor-element-4da71c1 a { color: #6a121d; text-decoration: none; transition: color 0.2s ease; } .elementor-770 .elementor-element.elementor-element-4da71c1 a:hover { color: #560d17; text-decoration: underline; } /* המפריד › בין הפריטים */ .elementor-770 .elementor-element.elementor-element-4da71c1 .separator, .elementor-770 .elementor-element.elementor-element-4da71c1 .rank-math-breadcrumb .separator { color: #b98a8f; margin: 0 6px; } /* הפריט הנוכחי (זר Surprise) — לא קליק, מודגש */ .elementor-770 .elementor-element.elementor-element-4da71c1 .last, .elementor-770 .elementor-element.elementor-element-4da71c1 .rank-math-breadcrumb .last { color: #572e2e; font-weight: 600; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2fc1c35 *//* ===================================================================== GET A BLOOM — Single Product Template Custom CSS for Elementor + WooCommerce Aug 2026 --------------------------------------------------------------------- HOW TO USE: Elementor → edit the Single Product template → Site Settings (or the page's Advanced → Custom CSS) → paste this whole file. Alternatively: Appearance → Customize → Additional CSS. --------------------------------------------------------------------- All colors live in the :root block below. Change them once, everywhere updates. RTL-aware, mobile-first. ===================================================================== */ :root { --gab-cream: #faf5e4; /* page background */ --gab-cream-card: #f5ecd4; /* section fills, info boxes */ --gab-cream-soft: #fffdf6; /* review / white-ish cards */ --gab-burgundy: #6a121d; /* CTA, headings, links */ --gab-burgundy-dk: #560d17; /* hover state on CTA */ --gab-chestnut: #572e2e; /* body text */ --gab-muted: #946b6b; /* captions, secondary text */ --gab-border: #e6dcc0; /* hairline dividers */ --gab-whatsapp: #25D366; /* WhatsApp green — do not change */ --gab-radius: 12px; } /* --------------------------------------------------------------------- 1. PAGE CANVAS --------------------------------------------------------------------- */ body.single-product, body.single-product .elementor, .single-product .elementor-location-single { background-color: var(--gab-cream); color: var(--gab-chestnut); } .single-product, .single-product .elementor-widget-container { direction: rtl; text-align: right; } /* --------------------------------------------------------------------- 2. BREADCRUMBS (RankMath / Woo breadcrumbs) --------------------------------------------------------------------- */ .single-product .rank-math-breadcrumb, .single-product .woocommerce-breadcrumb { font-size: 12px; color: var(--gab-muted); padding: 4px 0 10px; } .single-product .rank-math-breadcrumb a, .single-product .woocommerce-breadcrumb a { color: var(--gab-burgundy); text-decoration: none; } /* --------------------------------------------------------------------- 3. PRODUCT GALLERY --------------------------------------------------------------------- */ .single-product .woocommerce-product-gallery, .single-product .elementor-widget-woocommerce-product-images { border-radius: 16px; overflow: hidden; } .single-product .woocommerce-product-gallery__image img { border-radius: 16px; } /* gallery thumbnail dots / active state */ .single-product .flex-control-thumbs img.flex-active { border: 2px solid var(--gab-burgundy); } /* --------------------------------------------------------------------- 4. TITLES — H1 (emotional) + H2 (SEO subtitle) H1 = a plain Elementor Heading widget you add manually. H2 = the Woo Product Title widget, set to HTML tag H2. --------------------------------------------------------------------- */ .single-product .gab-h1, /* add class "gab-h1" to your H1 heading widget */ .single-product h1.product_title { font-size: 30px; font-weight: 500; line-height: 1.3; color: var(--gab-burgundy); margin: 0 0 4px; } .single-product .product_title, /* Woo title widget used as H2 */ .single-product h2.product_title { font-size: 16px; font-weight: 400; color: var(--gab-muted); margin: 0 0 14px; } /* generic section subheads inside description / tabs */ .single-product .elementor-widget-woocommerce-product-content h2, .single-product .elementor-widget-woocommerce-product-content h3, .single-product .woocommerce-Tabs-panel h2, .single-product .woocommerce-Tabs-panel h3 { color: var(--gab-burgundy); font-weight: 500; } /* --------------------------------------------------------------------- 5. RATING + REVIEW COUNT --------------------------------------------------------------------- */ .single-product .star-rating span::before, .single-product .woocommerce-product-rating .star-rating span::before { color: var(--gab-burgundy); } .single-product .woocommerce-review-link { color: var(--gab-muted); font-size: 12px; } /* --------------------------------------------------------------------- 6. PRICE --------------------------------------------------------------------- */ .single-product .price, .single-product p.price, .single-product .elementor-widget-woocommerce-product-price .price { color: var(--gab-chestnut); font-size: 28px; font-weight: 500; } .single-product .price del { color: var(--gab-muted); font-size: 18px; } .single-product .price ins { text-decoration: none; } /* --------------------------------------------------------------------- 7. INTRO BOX (Text Editor widget — add class "gab-intro") Holds the first ~60 words for AEO / AI answers. --------------------------------------------------------------------- */ .single-product .gab-intro { background: var(--gab-cream-card); border: 0.5px solid var(--gab-border); border-radius: var(--gab-radius); padding: 12px 14px; font-size: 14px; line-height: 1.75; margin-bottom: 14px; } /* --------------------------------------------------------------------- 8. VARIATIONS (size / color .elementor-770 .elementor-element.elementor-element-2fc1c35s) --------------------------------------------------------------------- */ .single-product .variations select, .single-product .variations td { border-radius: 10px; border: 0.5px solid var(--gab-border); color: var(--gab-chestnut); } .single-product .variations select:focus { border-color: var(--gab-burgundy); outline: none; } /* if you use button-style variation swatches */ .single-product .gab-variation-btn { border: 0.5px solid var(--gab-border); border-radius: 10px; padding: 10px; text-align: center; font-size: 13px; cursor: pointer; } .single-product .gab-variation-btn.active { border: 1.5px solid var(--gab-burgundy); background: var(--gab-cream-card); color: var(--gab-burgundy); } /* --------------------------------------------------------------------- 9. ADD TO CART — primary CTA --------------------------------------------------------------------- */ .single-product .single_add_to_cart_button, .single-product .elementor-button.add_to_cart_button, .single-product button.single_add_to_cart_button { background-color: var(--gab-burgundy) !important; color: var(--gab-cream) !important; border: none !important; border-radius: var(--gab-radius) !important; padding: 15px 20px !important; font-size: 16px !important; font-weight: 500 !important; width: 100%; transition: background-color 0.2s ease; } .single-product .single_add_to_cart_button:hover { background-color: var(--gab-burgundy-dk) !important; } /* quantity box */ .single-product .quantity input.qty { border: 0.5px solid var(--gab-border); border-radius: 10px; color: var(--gab-chestnut); } /* --------------------------------------------------------------------- 10. WHATSAPP SECONDARY BUTTON (Button widget — add class "gab-whatsapp") --------------------------------------------------------------------- */ .single-product .gab-whatsapp .elementor-button, .single-product a.gab-whatsapp { background: var(--gab-cream) !important; color: var(--gab-whatsapp) !important; border: 1.5px solid var(--gab-whatsapp) !important; border-radius: var(--gab-radius) !important; padding: 13px 20px !important; font-size: 15px !important; font-weight: 500 !important; width: 100%; } .single-product .gab-whatsapp .elementor-button:hover, .single-product a.gab-whatsapp:hover { background: var(--gab-whatsapp) !important; color: #fff !important; } /* --------------------------------------------------------------------- 11. TRUST ROW (Icon List widget — add class "gab-trust") --------------------------------------------------------------------- */ .single-product .gab-trust .elementor-icon-list-item { font-size: 13px; padding: 6px 0; } .single-product .gab-trust .elementor-icon-list-icon i, .single-product .gab-trust .elementor-icon-list-icon svg { color: var(--gab-burgundy); fill: var(--gab-burgundy); } /* --------------------------------------------------------------------- 12. SECTION SEPARATORS (a thin cream band between blocks) Add an empty Section/Container with class "gab-divider". --------------------------------------------------------------------- */ .single-product .gab-divider { height: 8px; background: var(--gab-cream-card); margin: 0; } /* --------------------------------------------------------------------- 13. TABS / DESCRIPTION / "WHAT'S INCLUDED" --------------------------------------------------------------------- */ .single-product .woocommerce-tabs ul.tabs li.active, .single-product .woocommerce-tabs ul.tabs li a { color: var(--gab-burgundy); } .single-product .woocommerce-tabs ul.tabs li.active a { font-weight: 500; } .single-product .woocommerce-Tabs-panel { font-size: 14px; line-height: 1.75; color: var(--gab-chestnut); } /* --------------------------------------------------------------------- 14. FAQ ACCORDION (Elementor Accordion — add class "gab-faq") Keep FAQPage schema in RankMath, not here. --------------------------------------------------------------------- */ .single-product .gab-faq .elementor-accordion-item { border-bottom: 0.5px solid var(--gab-border); border-top: none; border-left: none; border-right: none; } .single-product .gab-faq .elementor-tab-title, .single-product .gab-faq .elementor-tab-title a { color: var(--gab-chestnut); font-weight: 500; font-size: 14px; } .single-product .gab-faq .elementor-tab-title.elementor-active, .single-product .gab-faq .elementor-tab-title.elementor-active a { color: var(--gab-burgundy); } .single-product .gab-faq .elementor-tab-content { color: var(--gab-muted); font-size: 13px; line-height: 1.75; } /* --------------------------------------------------------------------- 15. REVIEWS --------------------------------------------------------------------- */ .single-product .comment_container, .single-product .gab-review-card { background: var(--gab-cream-soft); border: 0.5px solid var(--gab-border); border-radius: var(--gab-radius); padding: 12px 14px; margin-bottom: 10px; } .single-product .comment-text .star-rating span::before { color: var(--gab-burgundy); } .single-product .comment-author, .single-product .gab-review-card cite { color: var(--gab-muted); font-size: 12px; } /* --------------------------------------------------------------------- 16. RELATED / CROSS-SELL PRODUCTS --------------------------------------------------------------------- */ .single-product .related h2, .single-product .up-sells h2, .single-product .cross-sells h2 { color: var(--gab-burgundy); font-weight: 500; font-size: 17px; } .single-product ul.products li.product .price { font-size: 14px; color: var(--gab-chestnut); } .single-product ul.products li.product a img { border-radius: 10px; transition: transform 0.2s ease; } .single-product ul.products li.product:hover a img { transform: scale(1.03); } .single-product ul.products li.product .button { background: var(--gab-burgundy); color: var(--gab-cream); border-radius: 10px; } /* --------------------------------------------------------------------- 17. FLOATING WHATSAPP BUTTON (fixed, RTL-aware) Works with a floating button plugin OR a manual element with id "gabFloat" --------------------------------------------------------------------- */ #gabFloat { position: fixed; bottom: 18px; right: 16px; /* mobile: bottom-right */ width: 54px; height: 54px; border-radius: 50%; background: var(--gab-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 9999; text-decoration: none; } @media (min-width: 1025px) { #gabFloat { right: auto; left: 24px; } /* desktop: bottom-left (RTL) */ } /* --------------------------------------------------------------------- 18. LINKS (generic, inside product content) --------------------------------------------------------------------- */ .single-product .woocommerce-Tabs-panel a, .single-product .gab-intro a, .single-product .elementor-widget-woocommerce-product-content a { color: var(--gab-burgundy); text-decoration: underline; text-underline-offset: 2px; } /* --------------------------------------------------------------------- 19. MOBILE FINE-TUNING (≤ 767px) --------------------------------------------------------------------- */ @media (max-width: 767px) { .single-product .gab-h1, .single-product h1.product_title { font-size: 26px; } .single-product .single_add_to_cart_button, .single-product .gab-whatsapp .elementor-button { width: 100%; } /* touch targets */ .single-product .gab-variation-btn, .single-product .quantity input.qty { min-height: 44px; } }/* End custom CSS */ /* Start custom CSS *//* ===================================================================== GET A BLOOM — Single Product Template Custom CSS for Elementor + WooCommerce Aug 2026 --------------------------------------------------------------------- HOW TO USE: Elementor → edit the Single Product template → Site Settings (or the page's Advanced → Custom CSS) → paste this whole file. Alternatively: Appearance → Customize → Additional CSS. --------------------------------------------------------------------- All colors live in the :root block below. Change them once, everywhere updates. RTL-aware, mobile-first. ===================================================================== */ :root { --gab-cream: #faf5e4; /* page background */ --gab-cream-card: #f5ecd4; /* section fills, info boxes */ --gab-cream-soft: #fffdf6; /* review / white-ish cards */ --gab-burgundy: #6a121d; /* CTA, headings, links */ --gab-burgundy-dk: #560d17; /* hover state on CTA */ --gab-chestnut: #572e2e; /* body text */ --gab-muted: #946b6b; /* captions, secondary text */ --gab-border: #e6dcc0; /* hairline dividers */ --gab-whatsapp: #25D366; /* WhatsApp green — do not change */ --gab-radius: 12px; } /* --------------------------------------------------------------------- 1. PAGE CANVAS --------------------------------------------------------------------- */ body.single-product, body.single-product .elementor, .single-product .elementor-location-single { background-color: var(--gab-cream); color: var(--gab-chestnut); } .single-product, .single-product .elementor-widget-container { direction: rtl; text-align: right; } /* --------------------------------------------------------------------- 2. BREADCRUMBS (RankMath / Woo breadcrumbs) --------------------------------------------------------------------- */ .single-product .rank-math-breadcrumb, .single-product .woocommerce-breadcrumb { font-size: 12px; color: var(--gab-muted); padding: 4px 0 10px; } .single-product .rank-math-breadcrumb a, .single-product .woocommerce-breadcrumb a { color: var(--gab-burgundy); text-decoration: none; } /* --------------------------------------------------------------------- 3. PRODUCT GALLERY --------------------------------------------------------------------- */ .single-product .woocommerce-product-gallery, .single-product .elementor-widget-woocommerce-product-images { border-radius: 16px; overflow: hidden; } .single-product .woocommerce-product-gallery__image img { border-radius: 16px; } /* gallery thumbnail dots / active state */ .single-product .flex-control-thumbs img.flex-active { border: 2px solid var(--gab-burgundy); } /* --------------------------------------------------------------------- 4. TITLES — H1 (emotional) + H2 (SEO subtitle) H1 = a plain Elementor Heading widget you add manually. H2 = the Woo Product Title widget, set to HTML tag H2. --------------------------------------------------------------------- */ .single-product .gab-h1, /* add class "gab-h1" to your H1 heading widget */ .single-product h1.product_title { font-size: 30px; font-weight: 500; line-height: 1.3; color: var(--gab-burgundy); margin: 0 0 4px; } .single-product .product_title, /* Woo title widget used as H2 */ .single-product h2.product_title { font-size: 16px; font-weight: 400; color: var(--gab-muted); margin: 0 0 14px; } /* generic section subheads inside description / tabs */ .single-product .elementor-widget-woocommerce-product-content h2, .single-product .elementor-widget-woocommerce-product-content h3, .single-product .woocommerce-Tabs-panel h2, .single-product .woocommerce-Tabs-panel h3 { color: var(--gab-burgundy); font-weight: 500; } /* --------------------------------------------------------------------- 5. RATING + REVIEW COUNT --------------------------------------------------------------------- */ .single-product .star-rating span::before, .single-product .woocommerce-product-rating .star-rating span::before { color: var(--gab-burgundy); } .single-product .woocommerce-review-link { color: var(--gab-muted); font-size: 12px; } /* --------------------------------------------------------------------- 6. PRICE --------------------------------------------------------------------- */ .single-product .price, .single-product p.price, .single-product .elementor-widget-woocommerce-product-price .price { color: var(--gab-chestnut); font-size: 28px; font-weight: 500; } .single-product .price del { color: var(--gab-muted); font-size: 18px; } .single-product .price ins { text-decoration: none; } /* --------------------------------------------------------------------- 7. INTRO BOX (Text Editor widget — add class "gab-intro") Holds the first ~60 words for AEO / AI answers. --------------------------------------------------------------------- */ .single-product .gab-intro { background: var(--gab-cream-card); border: 0.5px solid var(--gab-border); border-radius: var(--gab-radius); padding: 12px 14px; font-size: 14px; line-height: 1.75; margin-bottom: 14px; } /* --------------------------------------------------------------------- 8. VARIATIONS (size / color body.elementor-page-770s) --------------------------------------------------------------------- */ .single-product .variations select, .single-product .variations td { border-radius: 10px; border: 0.5px solid var(--gab-border); color: var(--gab-chestnut); } .single-product .variations select:focus { border-color: var(--gab-burgundy); outline: none; } /* if you use button-style variation swatches */ .single-product .gab-variation-btn { border: 0.5px solid var(--gab-border); border-radius: 10px; padding: 10px; text-align: center; font-size: 13px; cursor: pointer; } .single-product .gab-variation-btn.active { border: 1.5px solid var(--gab-burgundy); background: var(--gab-cream-card); color: var(--gab-burgundy); } /* --------------------------------------------------------------------- 9. ADD TO CART — primary CTA --------------------------------------------------------------------- */ .single-product .single_add_to_cart_button, .single-product .elementor-button.add_to_cart_button, .single-product button.single_add_to_cart_button { background-color: var(--gab-burgundy) !important; color: var(--gab-cream) !important; border: none !important; border-radius: var(--gab-radius) !important; padding: 15px 20px !important; font-size: 16px !important; font-weight: 500 !important; width: 100%; transition: background-color 0.2s ease; } .single-product .single_add_to_cart_button:hover { background-color: var(--gab-burgundy-dk) !important; } /* quantity box */ .single-product .quantity input.qty { border: 0.5px solid var(--gab-border); border-radius: 10px; color: var(--gab-chestnut); } /* --------------------------------------------------------------------- 10. WHATSAPP SECONDARY BUTTON (Button widget — add class "gab-whatsapp") --------------------------------------------------------------------- */ .single-product .gab-whatsapp .elementor-button, .single-product a.gab-whatsapp { background: var(--gab-cream) !important; color: var(--gab-whatsapp) !important; border: 1.5px solid var(--gab-whatsapp) !important; border-radius: var(--gab-radius) !important; padding: 13px 20px !important; font-size: 15px !important; font-weight: 500 !important; width: 100%; } .single-product .gab-whatsapp .elementor-button:hover, .single-product a.gab-whatsapp:hover { background: var(--gab-whatsapp) !important; color: #fff !important; } /* --------------------------------------------------------------------- 11. TRUST ROW (Icon List widget — add class "gab-trust") --------------------------------------------------------------------- */ .single-product .gab-trust .elementor-icon-list-item { font-size: 13px; padding: 6px 0; } .single-product .gab-trust .elementor-icon-list-icon i, .single-product .gab-trust .elementor-icon-list-icon svg { color: var(--gab-burgundy); fill: var(--gab-burgundy); } /* --------------------------------------------------------------------- 12. SECTION SEPARATORS (a thin cream band between blocks) Add an empty Section/Container with class "gab-divider". --------------------------------------------------------------------- */ .single-product .gab-divider { height: 8px; background: var(--gab-cream-card); margin: 0; } /* --------------------------------------------------------------------- 13. TABS / DESCRIPTION / "WHAT'S INCLUDED" --------------------------------------------------------------------- */ .single-product .woocommerce-tabs ul.tabs li.active, .single-product .woocommerce-tabs ul.tabs li a { color: var(--gab-burgundy); } .single-product .woocommerce-tabs ul.tabs li.active a { font-weight: 500; } .single-product .woocommerce-Tabs-panel { font-size: 14px; line-height: 1.75; color: var(--gab-chestnut); } /* --------------------------------------------------------------------- 14. FAQ ACCORDION (Elementor Accordion — add class "gab-faq") Keep FAQPage schema in RankMath, not here. --------------------------------------------------------------------- */ .single-product .gab-faq .elementor-accordion-item { border-bottom: 0.5px solid var(--gab-border); border-top: none; border-left: none; border-right: none; } .single-product .gab-faq .elementor-tab-title, .single-product .gab-faq .elementor-tab-title a { color: var(--gab-chestnut); font-weight: 500; font-size: 14px; } .single-product .gab-faq .elementor-tab-title.elementor-active, .single-product .gab-faq .elementor-tab-title.elementor-active a { color: var(--gab-burgundy); } .single-product .gab-faq .elementor-tab-content { color: var(--gab-muted); font-size: 13px; line-height: 1.75; } /* --------------------------------------------------------------------- 15. REVIEWS --------------------------------------------------------------------- */ .single-product .comment_container, .single-product .gab-review-card { background: var(--gab-cream-soft); border: 0.5px solid var(--gab-border); border-radius: var(--gab-radius); padding: 12px 14px; margin-bottom: 10px; } .single-product .comment-text .star-rating span::before { color: var(--gab-burgundy); } .single-product .comment-author, .single-product .gab-review-card cite { color: var(--gab-muted); font-size: 12px; } /* --------------------------------------------------------------------- 16. RELATED / CROSS-SELL PRODUCTS --------------------------------------------------------------------- */ .single-product .related h2, .single-product .up-sells h2, .single-product .cross-sells h2 { color: var(--gab-burgundy); font-weight: 500; font-size: 17px; } .single-product ul.products li.product .price { font-size: 14px; color: var(--gab-chestnut); } .single-product ul.products li.product a img { border-radius: 10px; transition: transform 0.2s ease; } .single-product ul.products li.product:hover a img { transform: scale(1.03); } .single-product ul.products li.product .button { background: var(--gab-burgundy); color: var(--gab-cream); border-radius: 10px; } /* --------------------------------------------------------------------- 17. FLOATING WHATSAPP BUTTON (fixed, RTL-aware) Works with a floating button plugin OR a manual element with id "gabFloat" --------------------------------------------------------------------- */ #gabFloat { position: fixed; bottom: 18px; right: 16px; /* mobile: bottom-right */ width: 54px; height: 54px; border-radius: 50%; background: var(--gab-whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 9999; text-decoration: none; } @media (min-width: 1025px) { #gabFloat { right: auto; left: 24px; } /* desktop: bottom-left (RTL) */ } /* --------------------------------------------------------------------- 18. LINKS (generic, inside product content) --------------------------------------------------------------------- */ .single-product .woocommerce-Tabs-panel a, .single-product .gab-intro a, .single-product .elementor-widget-woocommerce-product-content a { color: var(--gab-burgundy); text-decoration: underline; text-underline-offset: 2px; } /* --------------------------------------------------------------------- 19. MOBILE FINE-TUNING (≤ 767px) --------------------------------------------------------------------- */ @media (max-width: 767px) { .single-product .gab-h1, .single-product h1.product_title { font-size: 26px; } .single-product .single_add_to_cart_button, .single-product .gab-whatsapp .elementor-button { width: 100%; } /* touch targets */ .single-product .gab-variation-btn, .single-product .quantity input.qty { min-height: 44px; } } /* ===================================================================== 20. VERIFIED OVERRIDES — matched to the real DOM (getabloom build) Elementor widget classes + Ocean WP. Fixes: button color/opacity, oversized title, spacing, price "gab-from" label. Keep at bottom. ===================================================================== */ /* ---- spacing rhythm for the whole product summary ---- */ body.single-product .elementor-widget-woocommerce-product-title, body.single-product .elementor-widget-woocommerce-product-content, body.single-product .elementor-widget-woocommerce-product-price, body.single-product .elementor-widget-woocommerce-product-add-to-cart { margin-bottom: 22px; } /* ---- TITLE: shrink from the huge default, burgundy ---- */ body.single-product .elementor-widget-woocommerce-product-title .product_title, body.single-product .elementor-page-title .product_title { color: #6a121d !important; font-size: 34px !important; line-height: 1.25 !important; font-weight: 500 !important; margin: 0 !important; } @media (max-width: 767px) { body.single-product .elementor-widget-woocommerce-product-title .product_title { font-size: 27px !important; } } /* ---- DESCRIPTION text ---- */ body.single-product .elementor-widget-woocommerce-product-content p { color: #572e2e; font-size: 15px; line-height: 1.75; } /* ---- PRICE: chestnut amount, burgundy "gab-from" label ---- */ body.single-product .elementor-widget-woocommerce-product-price .price, body.single-product .elementor-widget-woocommerce-product-price .woocommerce-Price-amount, body.single-product .elementor-widget-woocommerce-product-price bdi { color: #572e2e !important; font-size: 26px !important; font-weight: 500 !important; } body.single-product .gab-from { color: #6a121d !important; font-size: 26px !important; font-weight: 500; margin-left: 6px; } /* ---- VARIATION dropdown ---- */ body.single-product .elementor-add-to-cart .variations select, body.single-product table.variations select, body.single-product .variations .theme-select { border: 0.5px solid #e6dcc0 !important; border-radius: 10px !important; color: #572e2e !important; background-color: #fffdf6 !important; min-height: 44px; } body.single-product table.variations th.label label { color: #572e2e; font-weight: 500; } /* ---- QUANTITY box + / - ---- */ body.single-product .elementor-add-to-cart .quantity input.qty, body.single-product .quantity input.qty { border: 0.5px solid #e6dcc0 !important; color: #572e2e !important; background: #fffdf6 !important; border-radius: 8px !important; min-height: 44px; } body.single-product .quantity a.plus, body.single-product .quantity a.minus { border: 0.5px solid #e6dcc0 !important; color: #6a121d !important; background: #fffdf6 !important; border-radius: 8px !important; } /* ---- ADD TO CART: solid deep burgundy, kill opacity/gradient ---- */ body.single-product .elementor-add-to-cart button.single_add_to_cart_button, body.single-product .elementor-widget-woocommerce-product-add-to-cart button.single_add_to_cart_button, body.single-product form.cart button.single_add_to_cart_button { background-color: #6a121d !important; background-image: none !important; color: #faf5e4 !important; opacity: 1 !important; border: none !important; border-radius: 12px !important; padding: 15px 22px !important; font-size: 16px !important; font-weight: 500 !important; text-shadow: none !important; transition: background-color 0.2s ease; } body.single-product .elementor-add-to-cart button.single_add_to_cart_button:hover, body.single-product form.cart button.single_add_to_cart_button:hover { background-color: #560d17 !important; color: #faf5e4 !important; } /* disabled state (before a variation is chosen) — softer but still branded */ body.single-product button.single_add_to_cart_button.disabled, body.single-product button.single_add_to_cart_button[disabled] { background-color: #b98a8f !important; color: #fffdf6 !important; opacity: 1 !important; } /* ---- GALLERY: rounded corners ---- */ body.single-product .woocommerce-product-gallery, body.single-product .woocommerce-product-gallery__wrapper, body.single-product .woocommerce-product-gallery__image img { border-radius: 16px; } /* ---- manual helper sections you'll add (intro box, trust, faq) ---- */ body.single-product .gab-intro { background: #f5ecd4; border: 0.5px solid #e6dcc0; border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.75; } body.single-product .gab-trust .elementor-icon-list-icon i, body.single-product .gab-trust .elementor-icon-list-icon svg { color: #6a121d !important; fill: #6a121d !important; } body.single-product .gab-faq .elementor-tab-title.elementor-active, body.single-product .gab-faq .elementor-tab-title.elementor-active a { color: #6a121d !important; } /* ===================================================================== 21. VARIATION PRICE COLOR FIX ONLY (no card wrapper) Turns the green ₪179 variation price into brand burgundy. ===================================================================== */ body.single-product .woocommerce-variation-price .price, body.single-product .woocommerce-variation-price .amount, body.single-product .single_variation .price, body.single-product .single_variation_wrap .price, body.single-product .woocommerce-variation .price bdi { color: #6a121d !important; font-size: 30px !important; font-weight: 600 !important; } /* ===================================================================== 22. VARIATION DROPDOWN — styled select (no plugin) Matched to the real DOM: select.hasCustomSelect + span.theme-select (Ocean WP custom select). Clean, branded, RTL. ===================================================================== */ /* label "בחרו גודל זר" */ body.single-product table.variations th.label label, body.single-product .variations .label label { font-size: 15px !important; font-weight: 700 !important; color: #572e2e !important; display: block; margin-bottom: 8px; } /* the native select (kept, in case theme-select is off) */ body.single-product .variations select, body.single-product select.hasCustomSelect { border: 1px solid #e6dcc0 !important; border-radius: 12px !important; color: #572e2e !important; background-color: #fffdf6 !important; min-height: 50px !important; font-size: 15px !important; padding: 0 16px !important; } /* Ocean WP custom-select wrapper (the visible box) */ body.single-product .theme-select { display: block !important; width: 100% !important; border: 1px solid #e6dcc0 !important; border-radius: 12px !important; background-color: #fffdf6 !important; color: #572e2e !important; min-height: 50px !important; line-height: 50px !important; padding: 0 16px !important; font-size: 15px !important; position: relative; cursor: pointer; box-sizing: border-box; } body.single-product .theme-select:hover { border-color: #b98a8f !important; } /* the dropdown arrow (Ocean WP renders it via ::after) */ body.single-product .theme-select::after { color: #6a121d !important; left: 16px; right: auto; } /* the open list + options */ body.single-product .theme-select .list, body.single-product .theme-select ul { border: 1px solid #e6dcc0 !important; border-radius: 12px !important; background: #fffdf6 !important; margin-top: 4px !important; overflow: hidden; } body.single-product .theme-select .option, body.single-product .theme-select li { color: #572e2e !important; font-size: 14px !important; padding: 10px 16px !important; } body.single-product .theme-select .option:hover, body.single-product .theme-select li:hover, body.single-product .theme-select .option.selected, body.single-product .theme-select li.selected { background: #f5ecd4 !important; color: #6a121d !important; } /* "נקה" reset link — muted */ body.single-product .reset_variations { color: #946b6b !important; font-size: 12px !important; text-decoration: none !important; } /* ===================================================================== 23. FONT — Aviv on the whole product page NOTE: CSS only *references* the font; it must already be loaded on the site (Elementor → Site Settings → Custom Fonts, or a font plugin). If your installed font name differs, change "Aviv" below to match it exactly (check Elementor → Custom Fonts for the exact name). Best practice: also set it in Elementor → Site Settings → Global Fonts. ===================================================================== */ body.single-product, body.single-product h1, body.single-product h2, body.single-product h3, body.single-product h4, body.single-product p, body.single-product a, body.single-product span, body.single-product li, body.single-product label, body.single-product button, body.single-product input, body.single-product select, body.single-product .product_title, body.single-product .price, body.single-product .gab-intro, body.single-product .gab-from, body.single-product .elementor-widget-container, body.single-product .single_add_to_cart_button { font-family: "Aviv", "Heebo", sans-serif !important; } /* ===================================================================== 24. MOBILE — smaller variation dropdown text (≤ 767px) Shrinks the "בחירת אפשרות" select on phones only. Desktop unchanged. ===================================================================== */ @media (max-width: 767px) { /* the dropdown box + native select */ body.single-product .theme-select, body.single-product .variations select, body.single-product select.hasCustomSelect { font-size: 13px !important; min-height: 44px !important; line-height: 44px !important; padding: 0 12px !important; } /* the open options list — options themselves at 14px */ body.single-product .theme-select .option, body.single-product .theme-select li, body.single-product select.hasCustomSelect option, body.single-product .variations select option { font-size: 14px !important; padding: 8px 12px !important; } /* the "בחרו גודל זר" label above it */ body.single-product table.variations th.label label, body.single-product .variations .label label { font-size: 13px !important; } } /* ===================================================================== 25. OPEN DROPDOWN LIST — shrink the expanded options (Ocean WP) Ocean WP's custom select renders the open list in several possible wrappers. This covers them all so the expanded options aren't huge. Applies on all screens; tighten further inside the mobile query. ===================================================================== */ /* the open list container, whatever Ocean WP calls it */ body.single-product .theme-select .list, body.single-product .theme-select .nice-select-dropdown, body.single-product .theme-select ul.list, body.single-product .nice-select .list, body.single-product ul.owp-select-list { padding: 4px !important; border-radius: 12px !important; } /* each option row in the OPEN list */ body.single-product .theme-select .list .option, body.single-product .theme-select .list li, body.single-product .nice-select .list .option, body.single-product .nice-select .list li, body.single-product ul.owp-select-list li { font-size: 14px !important; line-height: 1.4 !important; min-height: 0 !important; padding: 9px 12px !important; } @media (max-width: 767px) { body.single-product .theme-select .list .option, body.single-product .theme-select .list li, body.single-product .nice-select .list .option, body.single-product .nice-select .list li, body.single-product ul.owp-select-list li { font-size: 14px !important; padding: 8px 12px !important; } } /* ===================================================================== 26. DISABLE Ocean WP custom select — use native select for consistency PREFERRED: turn off "Custom Select" in Appearance → Customize → General Options. This CSS is a fallback if that option isn't available: it hides the styled theme-select box and reveals the real native