/* ============================================================ SAVAGEARS — theme-level CSS (not in the prototype helmet): page wrapper, sticky-nav scrolled state, cart drawer + overlay + toast, and a light WooCommerce skin for cart / checkout / shop. Section visuals themselves are inline-styled in the markup (ported verbatim from the prototype) so they stay pixel-exact. ============================================================ */ html { scroll-behavior: smooth; } body.sg { margin: 0; overflow-x: hidden; background: var(--sg-bg); color: var(--sg-text); font-family: var(--sg-body); -webkit-font-smoothing: antialiased; } body.sg a { color: inherit; } img { max-width: 100%; } /* ---- Wholesale-only tokens / keyframes (storefront app.css lacks them) ---- */ :root { --wa: #25d366; } @keyframes wsmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } } input::placeholder, textarea::placeholder { color: var(--sg-dim); } /* ---- Sticky nav scrolled state (JS toggles .sg-scrolled) ---- */ #sg-nav.sg-scrolled, #ws-nav.sg-scrolled { background: var(--sg-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--sg-line); } /* ---- Image zoom on hover (replaces the prototype's style-hover) ---- */ /* #details now uses the .bento grid (see app.css). */ body.sg-wholesale img { transition: transform .7s cubic-bezier(.2,.7,.2,1); } body.sg-wholesale .sg-zoom:hover img, body.sg-wholesale figure:hover img, body.sg-wholesale a:hover > img { transform: scale(1.06); } /* Wholesale "קו מלא למדף" shelf: 5 cards (3 bags + 2 wallets). Flex + centered wrap so wide desktop shows all 5 in one row, and narrower widths center the last row instead of leaving a lonely orphan card in an empty column. */ .sg-wh-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px,2vw,24px); } .sg-wh-shelf > div { flex: 1 1 200px; min-width: 0; max-width: 260px; } @media (max-width: 560px) { .sg-wh-shelf > div { flex-basis: 100%; max-width: none; } } /* ---- Reveal-on-scroll (progressive enhancement; visible without JS) ---- */ .sg-rv-init { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .sg-rv-in { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce){ .sg-rv-init{ opacity:1; transform:none; } } /* ---- Cart drawer + overlay ---- */ .sg-overlay { position: fixed; inset: 0; background: var(--sg-veil); z-index: 96; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .sg-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(420px, 92vw); background: var(--sg-surface); border-inline-end: 1px solid var(--sg-line); z-index: 97; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .34s cubic-bezier(.2,.7,.2,1); } .sg-cart-open .sg-overlay { opacity: 1; pointer-events: auto; } .sg-cart-open .sg-drawer { transform: translateX(0); } body.sg-cart-open { overflow: hidden; } .sg-drawer-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ---- Cart drawer: in-flight state ---- The drawer is repainted the instant a button is pressed and the server reply lands ~1.2s later, so these rules only mark what the browser could not work out for itself. They are deliberately quiet: a badge that flashes on every single tap is worse noise than the wait it is reporting. `display` is never set on the elements app.js toggles, so the UA's `[hidden] { display: none }` holds — but Flatsome's stylesheet also loads on the cart and checkout templates, so state it here rather than trust it. */ .sg-drawer [hidden] { display: none !important; } /* A hairline running along the top of the drawer while a request is out. The 250ms delay means a fast reply never draws it at all. */ .sg-drawer::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sg-accent-ink), transparent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: opacity .2s ease .25s; z-index: 3; pointer-events: none; } body.sg-cart-busy .sg-drawer::before { opacity: 1; animation: sg-cart-wait 1.1s ease-in-out infinite; } @keyframes sg-cart-wait { 0% { transform: scaleX(0); transform-origin: 0 50%; } 50% { transform: scaleX(1); transform-origin: 0 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } } /* The upsell is the one panel the browser cannot recompute — which offer to make depends on server-side logic — so it is frozen rather than guessed at. Same delayed fade: no flicker on a quick reply. */ body.sg-cart-busy [data-sg-upsell] { opacity: .5; pointer-events: none; transition: opacity .2s ease .25s; } [data-sg-upsell] { transition: opacity .2s ease; } /* A row added optimistically has no WooCommerce cart key yet, so its own +/-/remove controls genuinely cannot work until the reply arrives. */ [data-sg-line][data-sg-pending] button[disabled] { opacity: .4; cursor: default; } button.sg-add[disabled] { cursor: progress; } @media (prefers-reduced-motion: reduce) { body.sg-cart-busy .sg-drawer::before { animation: none; transform: scaleX(1); } } /* ---- FAQ accordion ---- */ .faqcard { border: 1px solid var(--sg-line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: var(--sg-surface); transition: border-color .25s ease, box-shadow .25s ease; } .faqcard.is-open { border-color: var(--sg-accent-ink); box-shadow: 0 0 44px -24px var(--sg-accent); } .faqcard .faq-panel { display: none; } .faqcard.is-open .faq-panel { display: block; } .faqcard .faq-sign::before { content: '+'; } .faqcard.is-open .faq-sign::before { content: '\2212'; } /* ---- Toast ---- */ #sg-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(16px); z-index: 95; background: var(--sg-surface); border: 1px solid var(--sg-line); color: var(--sg-text); padding: 13px 20px; border-radius: 9999px; display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } #sg-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ WooCommerce skin (cart / checkout / shop / account). The two designed pages are custom; these pages inherit the brand so the flow stays on-theme. ============================================================ */ .sg-shell { max-width: 1180px; margin: 0 auto; padding: clamp(96px,12vw,140px) 24px clamp(60px,8vw,100px); } /* Legal / content pages (privacy, terms, shipping-returns, accessibility) */ .sg-page-content { max-width: 780px; font-size: 16px; } /* …but cart and checkout render inside the same wrapper, and a 780px reading measure squeezed the two-column checkout into half the screen on desktop. Those pages are layouts, not prose — let them use the shell width. */ .woocommerce-cart .sg-page-content, .woocommerce-checkout .sg-page-content, .woocommerce-account .sg-page-content, .sg-tracking .sg-page-content { max-width: none; } .sg-page-content h2 { font-family: var(--sg-display); font-weight: 800; font-size: clamp(20px,2.4vw,26px); letter-spacing: -.01em; color: var(--sg-text); margin: 40px 0 12px; } .sg-page-content h3 { font-family: var(--sg-display); font-weight: 700; font-size: 18px; color: var(--sg-text); margin: 26px 0 8px; } .sg-page-content p { color: var(--sg-muted); margin: 0 0 14px; } .sg-page-content ul, .sg-page-content ol { color: var(--sg-muted); margin: 0 0 18px; padding-inline-start: 22px; } .sg-page-content li { margin: 0 0 8px; } .sg-page-content strong { color: var(--sg-text); font-weight: 700; } .sg-page-content a { color: var(--sg-accent-ink); text-decoration: none; } .sg-page-content a:hover { text-decoration: underline; } .sg-page-content em { color: var(--sg-dim); font-size: 13.5px; } /* Legal / info pages (template-legal.php) — a readable branded document */ .sg-shell.sg-legal { max-width: 820px; } .sg-legal .sg-legal-head { margin: 0 0 clamp(24px,4vw,38px); padding-bottom: 22px; border-bottom: 1px solid var(--sg-line); } .sg-legal .sg-legal-eyebrow { font-family: var(--sg-mono); font-size: 12px; letter-spacing: .22em; color: var(--sg-accent-ink); } .sg-legal .sg-legal-head h1 { font-family: var(--sg-display); font-weight: 900; letter-spacing: -.02em; font-size: clamp(30px,5vw,48px); line-height: 1.04; margin: 14px 0 0; color: var(--sg-text); } .sg-legal .sg-legal-updated { margin: 12px 0 0; font-family: var(--sg-mono); font-size: 12.5px; color: var(--sg-dim); } .sg-legal .sg-legal-body { max-width: none; } .sg-legal .sg-legal-body h2:first-child { margin-top: 0; } .sg-legal .sg-legal-more { margin: clamp(38px,5vw,58px) 0 0; padding-top: 26px; border-top: 1px solid var(--sg-line); } .sg-legal .sg-legal-more-label { font-family: var(--sg-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sg-dim); } .sg-legal .sg-legal-more-links { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; } .sg-legal .sg-legal-more-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sg-muted); text-decoration: none; border: 1px solid var(--sg-line); border-radius: 9999px; padding: 9px 16px; transition: border-color .2s ease, color .2s ease; } .sg-legal .sg-legal-more-links a:hover { border-color: var(--sg-accent-ink); color: var(--sg-text); } .sg-legal .sg-legal-more-links a svg { color: var(--sg-accent-ink); } /* Flatsome dumps its off-canvas mobile menu + popup content (newsletter signup, search) into wp_footer on every page; its own CSS hides them, but we dequeue Flatsome CSS on our pages — so hide these leftovers ourselves. This is what was showing as a stray "search / • / התחברות / Newsletter" list + empty dot. */ #main-menu, .mfp-hide, .header-newsletter-signup, #header-newsletter-signup { display: none !important; } /* WooCommerce's password show/hide toggle renders as a stray dash without Flatsome's icon font — hide it on our account/checkout forms. */ .sg-shell .show-password-input { display: none; } .woocommerce-page h1, .woocommerce h1, .woocommerce h2 { font-family: var(--sg-display); font-weight: 900; letter-spacing: -.02em; } /* Branded keyboard focus — gold ring instead of the browser default (blue), on all our pages. Only swaps the colour; focus is never removed (accessibility). Text inputs keep their own gold box-shadow ring (higher-specificity :focus). */ body.sg a:focus-visible, body.sg button:focus-visible, body.sg select:focus-visible, body.sg textarea:focus-visible, body.sg input:focus-visible, body.sg [tabindex]:focus-visible, body.sg .select2-selection:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .woocommerce-store-notice { background: var(--sg-surface); border: 1px solid var(--sg-line); border-top: 3px solid var(--sg-accent-ink); color: var(--sg-text); border-radius: 12px; padding: 14px 18px; } .woocommerce-message a, .woocommerce-info a { color: var(--sg-accent-ink); } .woocommerce table.shop_table { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 14px; border-collapse: separate; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--sg-line); color: var(--sg-text); } .woocommerce .cart_totals, .woocommerce-checkout #order_review { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 16px; padding: 18px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection { background: var(--sg-bg); border: 1px solid var(--sg-line); color: var(--sg-text); border-radius: 10px; padding: 12px 13px; font-family: var(--sg-body); } .woocommerce form .form-row label { color: var(--sg-muted); font-size: 13px; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--sg-accent); color: var(--sg-on-accent); border: none; border-radius: 9999px; padding: 13px 24px; font-family: var(--sg-body); font-weight: 800; font-size: 15px; cursor: pointer; transition: filter .2s ease, transform .2s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { filter: brightness(1.08); transform: translateY(-1px); } .woocommerce .button.wc-backward, .woocommerce a.button.alt.wc-forward { background: var(--sg-accent); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 16px; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--sg-accent-ink); font-weight: 800; } .woocommerce .quantity input.qty { background: var(--sg-bg); border: 1px solid var(--sg-line); color: var(--sg-text); border-radius: 8px; } /* ============================================================ PREMIUM CHECKOUT — scoped to .woocommerce-checkout ============================================================ */ /* Checkout guard (assets/js/checkout-guard.js): a transparent shield over the express-pay buttons while the form is incomplete; required offenders and the terms row turn red. Shield hidden = form complete = real button live. */ /* PayPal's iframe carries z-index:100 (measured live) — the shield must sit above it. */ .woocommerce-checkout .sg-pay-shield { position: absolute; z-index: 1000; cursor: pointer; background: transparent; } .woocommerce-checkout .payment_box, .woocommerce-checkout .wc_payment_method, .woocommerce-checkout #payment, .woocommerce-checkout .place-order { position: relative; } .woocommerce-checkout .sg-pay-shield[hidden] { display: none; } .woocommerce-checkout .form-row.sg-guard-invalid input.input-text, .woocommerce-checkout .form-row.sg-guard-invalid select, .woocommerce-checkout .form-row.sg-guard-invalid textarea { border-color: var(--sg-err) !important; box-shadow: 0 0 0 3px var(--sg-err-bg) !important; } .woocommerce-checkout .form-row.sg-guard-invalid > label { color: var(--sg-err); } .woocommerce-checkout .form-row.sg-guard-invalid .woocommerce-terms-and-conditions-checkbox-text, .woocommerce-checkout .form-row.sg-guard-invalid .woocommerce-terms-and-conditions-checkbox-text a { color: var(--sg-err) !important; font-weight: 700; } .woocommerce-checkout .sg-guard-invalid #terms { outline: 2px solid var(--sg-err); outline-offset: 2px; border-radius: 3px; } .woocommerce-checkout .sg-guard-notice { background: var(--sg-err-bg); border: 1px solid var(--sg-err-line); color: var(--sg-err); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-weight: 600; } .woocommerce-checkout .sg-shell { max-width: 1200px; } .woocommerce-checkout form.checkout { max-width: 1200px; margin-inline: auto; } /* branded header */ .sg-co-head { margin: 0 0 26px; } .sg-co-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .sg-co-head h1 { font-family: var(--sg-display); font-weight: 900; letter-spacing: -.02em; font-size: clamp(28px,4vw,42px); margin: 0; color: var(--sg-text); } .sg-co-secure { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sg-mono); font-size: 12px; letter-spacing: .05em; color: var(--sg-ok); background: var(--sg-ok-bg); border: 1px solid var(--sg-ok-line); padding: 6px 12px; border-radius: 9999px; } .sg-co-sub { margin: 10px 0 0; color: var(--sg-muted); font-size: 15px; } /* two-column layout: Flatsome wraps the checkout in .row > .large-7 (details) + .large-5 (order review). We dequeue Flatsome CSS, so grid that .row ourselves. */ .woocommerce-checkout form.checkout > .row { display: grid; grid-template-columns: 1fr minmax(340px,400px); gap: 28px; align-items: start; max-width: none; } .woocommerce-checkout form.checkout > .row > .large-7 { grid-column: 1; min-width: 0; float: none; width: auto; max-width: none; padding: 0; } .woocommerce-checkout form.checkout > .row > .large-5 { grid-column: 2; float: none; width: auto; max-width: none; padding: 0; } .woocommerce-checkout .checkout-sidebar { position: sticky; top: 96px; } .woocommerce-checkout #order_review_heading { margin: 0 0 14px; font-family: var(--sg-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sg-dim); } /* stack the col2-set into full-width cards */ .woocommerce-checkout #customer_details.col2-set { display: block; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; max-width: none; margin: 0 0 18px; } .woocommerce-checkout #customer_details .col-2:empty { display: none; } /* cards. This WooCommerce build renders #customer_details WITHOUT the legacy .col-1/.col-2 wrappers, so the card was being painted on selectors that never matched — invisible on the dark ground, obvious on paper. Put the card on #customer_details itself and neutralise the inner columns so older markup does not end up with a card inside a card. */ .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 16px; padding: clamp(18px,2.4vw,26px); box-shadow: 0 14px 34px -28px var(--sg-shadow); } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { background: transparent; border: 0; padding: 0; box-shadow: none; } .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce-checkout .woocommerce-additional-fields > h3, .woocommerce-checkout .woocommerce-shipping-fields h3 { font-family: var(--sg-display); font-weight: 800; font-size: 19px; margin: 0 0 18px; color: var(--sg-text); } /* Field grid — SIX tracks so both splits divide cleanly: first/last name are 3+3, the entrance/floor/apartment minis are 2+2+2, everything else spans the row. (A 2-track grid can never seat three fields on one line.) */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 16px; } .woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row { float: none !important; width: auto !important; margin: 0 0 15px !important; padding: 0 !important; } .woocommerce-checkout .form-row-wide, .woocommerce-checkout #billing_country_field, .woocommerce-checkout #billing_address_1_field, .woocommerce-checkout #billing_email_field { grid-column: 1 / -1; } .woocommerce-checkout .form-row-first { grid-column: span 3; } .woocommerce-checkout .form-row-last { grid-column: span 3; } .woocommerce-checkout .form-row.sg-mini { grid-column: span 2; } /* labels + inputs */ .woocommerce-checkout form .form-row { margin: 0 0 15px; } .woocommerce-checkout form .form-row label { display: block; margin: 0 0 7px; color: var(--sg-muted); font-size: 13px; font-weight: 600; } .woocommerce-checkout form .form-row .required { color: var(--sg-accent-ink); border: 0; text-decoration: none; } .woocommerce-checkout form .form-row .optional { color: var(--sg-dim); } .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row textarea, .woocommerce-checkout form .form-row select { width: 100%; box-sizing: border-box; height: 50px; background: var(--sg-bg); border: 1px solid var(--sg-line-strong); border-radius: 11px; color: var(--sg-text); padding: 0 15px; font-family: var(--sg-body); font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease; } .woocommerce-checkout form .form-row textarea { height: auto; min-height: 92px; padding: 13px 15px; resize: vertical; } .woocommerce-checkout form .form-row input.input-text:focus, .woocommerce-checkout form .form-row textarea:focus, .woocommerce-checkout form .form-row select:focus { border-color: var(--sg-accent-ink); box-shadow: 0 0 0 3px var(--sg-accent-soft); outline: none; } .woocommerce-checkout form .form-row input::placeholder, .woocommerce-checkout form .form-row textarea::placeholder { color: var(--sg-dim); } /* select2 (country) */ .woocommerce-checkout .select2-container--default .select2-selection--single { height: 50px; padding: 0; box-sizing: border-box; background: var(--sg-bg); border: 1px solid var(--sg-line-strong); border-radius: 11px; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sg-text); line-height: 50px; padding: 0 15px; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; } .select2-dropdown { background: var(--sg-surface) !important; border: 1px solid var(--sg-line-strong) !important; color: var(--sg-text); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sg-accent-soft) !important; color: var(--sg-text) !important; } .select2-search--dropdown .select2-search__field { background: var(--sg-bg); border: 1px solid var(--sg-line); color: var(--sg-text); border-radius: 8px; } /* order summary table */ .woocommerce-checkout #order_review .shop_table { background: transparent; border: 0; border-radius: 0; width: 100%; } .woocommerce-checkout #order_review .shop_table thead th { border: 0; border-bottom: 1px solid var(--sg-line); padding: 0 0 12px; color: var(--sg-dim); font-family: var(--sg-mono); font-size: 10.5px; letter-spacing: .12em; font-weight: 600; text-transform: uppercase; } .woocommerce-checkout #order_review .shop_table td, .woocommerce-checkout #order_review .shop_table tbody th, .woocommerce-checkout #order_review .shop_table tfoot th, .woocommerce-checkout #order_review .shop_table tfoot td { border: 0; border-top: 1px solid var(--sg-line); padding: 14px 0; color: var(--sg-text); font-size: 14px; vertical-align: middle; } .woocommerce-checkout .sg-co-item { display: flex; align-items: center; gap: 12px; } .woocommerce-checkout .sg-co-item-thumb img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; background: var(--plate); display: block; margin: 0; } .woocommerce-checkout .sg-co-item-name { font-weight: 600; line-height: 1.3; } .woocommerce-checkout #order_review .product-total, .woocommerce-checkout #order_review .product-quantity { white-space: nowrap; } .woocommerce-checkout #order_review .cart-subtotal td, .woocommerce-checkout #order_review .shipping td, .woocommerce-checkout #order_review .cart-subtotal th, .woocommerce-checkout #order_review .shipping th { color: var(--sg-muted); } .woocommerce-checkout #order_review tr.fee th, .woocommerce-checkout #order_review tr.fee td { color: var(--sg-accent-ink); font-weight: 600; } .woocommerce-checkout #order_review .order-total th { font-family: var(--sg-display); font-size: 16px; color: var(--sg-text); } .woocommerce-checkout #order_review .order-total .amount, .woocommerce-checkout #order_review .order-total bdi { color: var(--sg-accent-ink); font-family: var(--sg-display); font-weight: 900; font-size: 23px; } /* payment */ .woocommerce-checkout #payment { background: transparent; border-radius: 0; border-top: 1px solid var(--sg-line); margin-top: 8px; padding-top: 18px; } .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 6px; } .woocommerce-checkout #payment ul.payment_methods li { list-style: none; background: none; } .woocommerce-checkout #payment ul.payment_methods li label { color: var(--sg-text); } /* Gateway description (COD "שלמו במזומן…", and ppcp when connected) reads as an explanation line, not an empty input: no box border, muted text, soft indent. */ .woocommerce-checkout #payment .payment_box { background: transparent !important; border: 0; border-radius: 0; box-shadow: none; color: var(--sg-dim); font-size: 13px; line-height: 1.55; margin: 2px 0 4px; padding: 2px 2px 2px 0; } .woocommerce-checkout #payment .payment_box p { margin: 0; } .woocommerce-checkout #payment .payment_box::before { display: none; } /* Official PayPal Payments (ppcp) gateway — dark-skin the method row + smart-button container (the buttons themselves are a PayPal iframe; set style=Gold in the plugin). */ .woocommerce-checkout .payment_method_ppcp-gateway label, .woocommerce-checkout .payment_method_ppcp-credit-card-gateway label { color: var(--sg-text); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .woocommerce-checkout .payment_method_ppcp-gateway label img, .woocommerce-checkout li[class*="payment_method_ppcp"] label img { max-height: 24px; width: auto; display: inline-block; } .woocommerce-checkout li[class*="payment_method_ppcp"] .payment_box { background: transparent !important; border: 0; border-radius: 0; } .woocommerce-checkout .ppcp-button-container, .woocommerce-checkout [id^="ppc-button"] { margin-top: 10px; } .woocommerce-checkout .ppcp-messages { margin: 8px 0 0; } .woocommerce-checkout #payment div.place-order { padding: 0; } .woocommerce-checkout #place_order { width: 100%; padding: 17px; font-size: 16.5px; border-radius: 12px; margin-top: 4px; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 4px 0 16px; } /* branded, comfortably tappable checkboxes (terms + ship-to-different), RTL-aligned */ .woocommerce-checkout .woocommerce-form__label-for-checkbox, .woocommerce-checkout #ship-to-different-address label { color: var(--sg-muted); font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; } .woocommerce-checkout input[type="checkbox"], .woocommerce-checkout #ship-to-different-address input[type="checkbox"] { accent-color: var(--sg-accent); width: 20px; height: 20px; min-width: 20px; margin: 1px 0 0; flex: none; cursor: pointer; } .woocommerce-checkout .woocommerce-invalid input.input-text { border-color: var(--sg-err-line); } .woocommerce-checkout .woocommerce-validated input.input-text { border-color: var(--sg-ok-line); } /* coupon — consistent with the cards (no dashed default, gold link) */ .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--sg-surface); border: 1px solid var(--sg-line); border-top: 1px solid var(--sg-line); border-radius: 12px; padding: 14px 18px; color: var(--sg-muted); } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--sg-accent-ink); font-weight: 600; } .woocommerce-checkout form.checkout_coupon { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 12px; padding: 18px; } .woocommerce-checkout form.checkout_coupon p:first-child { color: var(--sg-muted); font-size: 13.5px; } /* free-shipping progress in the order summary (row in the totals table) */ .woocommerce-checkout #order_review .shop_table tfoot .sg-co-ship-row td { border-top: 0; padding: 6px 0 2px; } .sg-co-ship { margin: 0; } .sg-co-ship-track { height: 6px; border-radius: 9999px; background: var(--sg-line); overflow: hidden; } .sg-co-ship-fill { height: 100%; border-radius: 9999px; background: var(--sg-accent); transition: width .5s ease; } .sg-co-ship.is-free .sg-co-ship-fill { background: var(--sg-ok); } .sg-co-ship-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--sg-dim); line-height: 1.5; } .sg-co-ship.is-free .sg-co-ship-msg { color: var(--sg-ok); font-weight: 700; } /* trust row */ .sg-co-trust { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sg-line); } .sg-co-trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sg-muted); } .sg-co-trust-ic { color: var(--sg-accent-ink); display: inline-flex; } /* mobile */ @media (max-width: 880px) { .woocommerce-checkout form.checkout > .row { display: block; } .woocommerce-checkout .checkout-sidebar { position: static; margin-top: 20px; } .woocommerce-checkout #order_review_heading { margin-top: 24px; } /* Mobile: everything stacks — except the entrance/floor/apartment minis, which stay three-up (their values are 1–3 characters). */ .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: repeat(3, 1fr); } .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { grid-column: 1 / -1; } .woocommerce-checkout .form-row.sg-mini { grid-column: span 1; } } /* ============================================================ CART — scoped to .woocommerce-cart. The cart uses Flatsome's markup (.ux-quantity, .ux-cart-coupon, .cart-sidebar) but Flatsome's CSS is dequeued on our pages, so we skin those classes ourselves. Its JS still loads, so the +/- quantity buttons keep working. ============================================================ */ /* Two columns. Flatsome grids the cart as .large-7 (items) + .large-5 (sidebar), but its CSS is dequeued here, so both rendered full width and stacked — the totals ended up a screen below the items. Grid the .row ourselves, exactly like the checkout. */ .woocommerce-cart .woocommerce.row { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,380px); gap: 26px; align-items: start; max-width: none; } .woocommerce-cart .woocommerce.row > .large-7 { grid-column: 1; min-width: 0; float: none; width: auto; max-width: none; padding: 0; } .woocommerce-cart .woocommerce.row > .cart-collaterals { grid-column: 2; float: none; width: auto; max-width: none; padding: 0; } .woocommerce-cart .cart-sidebar { position: sticky; top: 96px; } /* items table + a real thumbnail size. Without Flatsome the images rendered at their natural 300px, turning every row into a 300px-tall block. */ .woocommerce-cart table.cart { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 16px; overflow: hidden; } .woocommerce-cart table.cart td.product-thumbnail img { width: 88px; height: 88px; object-fit: cover; display: block; } .woocommerce-cart table.cart td { vertical-align: middle; padding: 14px 16px; } .woocommerce-cart table.cart thead th { padding: 14px 16px; color: var(--sg-dim); font-family: var(--sg-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 880px) { .woocommerce-cart .woocommerce.row { display: block; } .woocommerce-cart .cart-sidebar { position: static; margin-top: 18px; } } /* sidebar: coupon + totals as one cohesive stack (coupon on top) */ .woocommerce-cart .cart-sidebar { display: flex; flex-direction: column; gap: 16px; } .woocommerce-cart .ux-cart-coupon { order: -1; } /* totals card */ .woocommerce-cart .cart_totals { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 16px; padding: clamp(18px,2.4vw,24px); } /* Flatsome injects a duplicate header table (via woocommerce_before_cart_totals) before the

— hide it */ .woocommerce-cart .cart_totals > table:not(.shop_table) { display: none; } .woocommerce-cart .cart_totals > h2 { font-family: var(--sg-display); font-weight: 800; font-size: 20px; margin: 0 0 14px; color: var(--sg-text); } .woocommerce-cart .cart_totals .shop_table { background: transparent; border: 0; border-radius: 0; width: 100%; margin: 0; } .woocommerce-cart .cart_totals .shop_table th, .woocommerce-cart .cart_totals .shop_table td { border: 0; border-top: 1px solid var(--sg-line); padding: 13px 0; color: var(--sg-text); font-size: 14px; background: transparent; } .woocommerce-cart .cart_totals .cart-subtotal th, .woocommerce-cart .cart_totals .woocommerce-shipping-totals th { color: var(--sg-muted); font-weight: 600; } .woocommerce-cart .cart_totals tr.fee th, .woocommerce-cart .cart_totals tr.fee td { color: var(--sg-accent-ink); font-weight: 600; } .woocommerce-cart .cart_totals .order-total th { font-family: var(--sg-display); font-size: 16px; color: var(--sg-text); } .woocommerce-cart .cart_totals .order-total .amount, .woocommerce-cart .cart_totals .order-total bdi { color: var(--sg-accent-ink); font-family: var(--sg-display); font-weight: 900; font-size: 22px; } /* free-shipping row (shared sg-co-ship markup, rendered by sg_render_ship_bar_row) */ .woocommerce-cart .cart_totals .sg-co-ship-row td { border-top: 0; padding: 10px 0 2px; } /* proceed-to-checkout button, full width */ .woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; margin: 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 16px; } /* coupon → card matching the checkout coupon */ .woocommerce-cart .ux-cart-coupon { margin: 0; background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 14px; padding: 16px 18px; } .woocommerce-cart .ux-cart-coupon .coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } .woocommerce-cart .ux-cart-coupon .widget-title { flex: 1 1 100%; margin: 0 0 2px; font-family: var(--sg-display); font-weight: 700; font-size: 15px; color: var(--sg-text); } .woocommerce-cart .ux-cart-coupon input#coupon_code { flex: 1 1 150px; min-width: 0; height: 46px; background: var(--sg-bg); border: 1px solid var(--sg-line-strong); border-radius: 10px; color: var(--sg-text); padding: 0 14px; font-size: 16px; } .woocommerce-cart .ux-cart-coupon input#coupon_code::placeholder { color: var(--sg-dim); } .woocommerce-cart .ux-cart-coupon button[name="apply_coupon"] { flex: none; height: 46px; padding: 0 20px; } /* quantity: segmented [−|value|+] control (Flatsome .ux-quantity, its CSS dequeued) */ .woocommerce-cart .quantity.ux-quantity { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid var(--sg-line-strong); border-radius: 10px; overflow: hidden; background: var(--sg-bg); } .woocommerce-cart .ux-quantity .ux-quantity__button { -webkit-appearance: none; appearance: none; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--sg-tint); color: var(--sg-accent-ink); font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: none; transition: background .15s ease; } .woocommerce-cart .ux-quantity .ux-quantity__button:hover { background: var(--sg-accent-soft); transform: none; filter: none; } .woocommerce-cart .ux-quantity input.qty { width: 54px; height: 42px; min-height: 42px; text-align: center; border: 0; border-inline: 1px solid var(--sg-line); border-radius: 0; background: transparent; color: var(--sg-text); font-family: var(--sg-mono); font-size: 16px; padding: 0; -moz-appearance: textfield; box-shadow: none; } .woocommerce-cart .ux-quantity input.qty:focus { outline: none; box-shadow: none; } .woocommerce-cart .ux-quantity input.qty::-webkit-outer-spin-button, .woocommerce-cart .ux-quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* cart items table rounding for thumbs */ .woocommerce-cart table.cart img { border-radius: 10px; } /* mobile: sidebar full width under items (Flatsome large-7/large-5 already stack) */ @media (max-width: 760px) { .woocommerce-cart .cart-sidebar { gap: 14px; } } /* mobile: stack the cart items table into cards (WooCommerce's responsive-cart CSS is dequeued with Flatsome; rebuild it from the data-title attributes). */ @media (max-width: 660px) { .woocommerce-cart table.cart thead { display: none; } /* A shrink-wraps to its content. Once the rows below became blocks nothing stretched it any more, so the cards rendered in a ~225px column with a dead strip of background beside them. Make the table and tbody block-level and full width so the cards fill the screen. */ .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody { display: block; width: 100%; } .woocommerce-cart table.cart tbody tr.cart_item { display: block; position: relative; border: 1px solid var(--sg-line); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; background: var(--sg-surface); } .woocommerce-cart table.cart tbody tr.cart_item td { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; border: 0; border-top: 1px solid var(--sg-line); padding: 11px 0; text-align: start; } .woocommerce-cart table.cart tbody tr.cart_item td::before { content: attr(data-title); color: var(--sg-muted); font-size: 12.5px; font-weight: 600; } .woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail { display: block; border-top: 0; padding: 0 0 6px; } .woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail::before { display: none; } .woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail img { width: 92px; height: auto; margin: 0 auto; display: block; } .woocommerce-cart table.cart tbody tr.cart_item td.product-name { display: block; border-top: 0; text-align: center; padding-bottom: 6px; } .woocommerce-cart table.cart tbody tr.cart_item td.product-name::before { display: none; } .woocommerce-cart table.cart tbody tr.cart_item td.product-quantity { justify-content: center; } .woocommerce-cart table.cart tbody tr.cart_item td.product-quantity::before { display: none; } .woocommerce-cart table.cart tbody tr.cart_item td.product-remove { position: absolute; top: 6px; inset-inline-start: 6px; width: auto; padding: 0; border: 0; } .woocommerce-cart table.cart tbody tr.cart_item td.product-remove::before { display: none; } /* The "×" glyph is only ~9px wide — an impossible tap target on a phone. Grow the hit area to 40px without changing how large the mark looks. */ .woocommerce-cart table.cart tbody tr.cart_item td.product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px; line-height: 1; border-radius: 9999px; } .woocommerce-cart table.cart tbody tr:not(.cart_item) td.actions { display: block; border: 0; padding: 6px 0 0; } } a { text-decoration: none; } /* ============================================================ Sticky mobile buy-bar (storefront) — always-available CTA. ============================================================ */ .sg-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; background: var(--sg-glass); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border-top: 1px solid var(--sg-line-strong); padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); transform: translateY(135%); transition: transform .42s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -14px 34px -22px var(--sg-shadow-strong); } .sg-buybar-hook { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--sg-mono); font-size: 10.5px; letter-spacing: .01em; color: var(--sg-muted); margin-bottom: 7px; } .sg-buybar-hook svg { color: var(--sg-accent-ink); } .sg-buybar-row { display: flex; align-items: stretch; gap: 10px; max-width: 560px; margin: 0 auto; } .sg-buybar-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; background: var(--sg-accent); color: var(--sg-on-accent); font-family: var(--sg-body); font-weight: 800; font-size: 16px; border-radius: 9999px; text-decoration: none; box-shadow: 0 12px 30px -12px var(--sg-accent); } .sg-buybar-cart { position: relative; flex: none; width: 54px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; background: var(--sg-tint); border: 1px solid var(--sg-line-strong); color: var(--sg-text); border-radius: 16px; cursor: pointer; } .sg-buybar-cart .sg-cart-count { position: absolute; top: 5px; inset-inline-start: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9999px; background: var(--sg-accent); color: var(--sg-on-accent); font-family: var(--sg-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Footer links render at ~21px tall — fine with a mouse, fiddly with a thumb. Vertical padding grows the tap area to ~40px without moving anything visually (the surrounding lists already use gap, so the padding just fills the space). */ @media (max-width: 760px) { .sg footer a { display: inline-block; padding-block: 9px; } } /* ---------- mobile header ---------- The desktop bar packs a wordmark, five links, a cart icon and a CTA. At 375px that never fit: the wordmark wrapped to two lines and the last two links ("שאלות", "סיטונאות") were clipped off-screen entirely — unreachable. Rather than squeeze everything, drop what the page already provides by scrolling and keep the two links that lead somewhere else. Inline styles from the prototype are overridden here, hence !important. */ /* ============================================================ Reviews wall (page-reviews.php) — masonry via CSS columns. The tilt lives on an INNER div: the [data-rv] reveal ends in `transform:none!important` (.sg-rv-in), which would erase any rotation set on the revealed element itself. ============================================================ */ .sg-revwall { columns: 3 300px; column-gap: 20px; max-width: 1180px; margin: 0 auto; } .sg-rev-card { break-inside: avoid; margin: 0 0 20px; } .sg-rev-tilt { background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: 16px; padding: 10px; box-shadow: 0 18px 44px -34px var(--sg-shadow-strong); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .sg-rev-card:nth-child(odd) .sg-rev-tilt { transform: rotate(.5deg); } .sg-rev-card:nth-child(even) .sg-rev-tilt { transform: rotate(-.45deg); } .sg-rev-card:hover .sg-rev-tilt { transform: rotate(0) translateY(-3px); box-shadow: 0 24px 54px -30px var(--sg-shadow-strong); } .sg-rev-tilt img { display: block; width: 100%; height: auto; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .sg-rev-card .sg-rev-tilt { transform: none !important; transition: none; } } /* Tablet band: seven links + the CTA no longer fit at the desktop 28px gap once "מי אנחנו" joined the row — at 761–900px the לרכישה pill was pushed off-screen left. Tighten the link gap only in that band (inline gap:28px on the