/* Saroof Comax Sync — storefront skin (brand tokens + WooCommerce card/PDP). */ /* ---------- Fonts (bundled with the plugin) ---------- */ @font-face{font-family:'Erez';src:url('../fonts/Erez-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Erez';src:url('../fonts/Erez-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Erez';src:url('../fonts/Erez-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Erez';src:url('../fonts/Erez-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Erez';src:url('../fonts/Erez-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Erez';src:url('../fonts/Erez-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Inter Tight';src:url('../fonts/InterTight-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Inter Tight';src:url('../fonts/InterTight-Medium.ttf') format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'Inter Tight';src:url('../fonts/InterTight-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Inter Tight';src:url('../fonts/InterTight-Bold.ttf') format('truetype');font-weight:700;font-display:swap} :root{ --scs-brand:#F80040; --scs-brand-600:#D60038; --scs-brand-700:#B0002E; --scs-brand-100:#FFE3EB; --scs-brand-50:#FFF1F5; --scs-ink:#201820; --scs-ink-500:#6B5F6B; --scs-muted:#9A8F98; --scs-line:#ECE7EB; --scs-bg-soft:#F7F4F6; --scs-num:'Inter Tight','Erez',sans-serif; --scs-r:14px; --scs-r-lg:20px; --scs-r-pill:999px; } /* tabular numerals helper */ .scs-num{font-family:var(--scs-num);font-feature-settings:"tnum" 1} /* ---------- Product grid (float → CSS grid: tight gap + equal-height cards) ---------- WooCommerce lays the loop out with floats, which forces wide inter-card margins and leaves cards at their natural (unequal) heights. Grid tracks give a small, uniform gap and stretch every cell to the tallest in its row, so a pre-order card and an immediate card in the same row end up the same height. */ .woocommerce ul.products, ul.products{ display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;margin:0 !important;padding:0;list-style:none;clear:both; } .woocommerce ul.products.columns-1,ul.products.columns-1{grid-template-columns:minmax(0,1fr)} .woocommerce ul.products.columns-2,ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))} .woocommerce ul.products.columns-3,ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))} .woocommerce ul.products.columns-4,ul.products.columns-4{grid-template-columns:repeat(4,minmax(0,1fr))} .woocommerce ul.products.columns-5,ul.products.columns-5{grid-template-columns:repeat(5,minmax(0,1fr))} .woocommerce ul.products.columns-6,ul.products.columns-6{grid-template-columns:repeat(6,minmax(0,1fr))} .woocommerce ul.products li.product, ul.products li.product{width:auto !important;margin:0 !important;float:none !important;clear:none !important} .woocommerce ul.products::before,.woocommerce ul.products::after, ul.products::before,ul.products::after{content:none !important} @media(max-width:1024px){ .woocommerce ul.products,ul.products, .woocommerce ul.products.columns-4,ul.products.columns-4, .woocommerce ul.products.columns-5,ul.products.columns-5, .woocommerce ul.products.columns-6,ul.products.columns-6{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:768px){ .woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px} } /* ---------- Product loop cards (brand mockup port) ---------- */ .woocommerce ul.products li.product, ul.products li.product{ position:relative; /* anchor the over-image badges */ background:#fff;border:0;border-radius:var(--scs-r-lg); padding:0 0 16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--scs-line); transition:box-shadow .2s,transform .2s;text-align:start; display:flex;flex-direction:column; } .woocommerce ul.products li.product:hover, ul.products li.product:hover{box-shadow:0 6px 20px rgba(32,24,32,.09);transform:translateY(-3px)} /* the whole card body lives inside WooCommerce's product link; flex:1 lets the price sink to the bottom so prices + steppers align across the grid row */ .woocommerce ul.products li.product a.woocommerce-LoopProduct-link, ul.products li.product a.woocommerce-LoopProduct-link{ display:flex;flex-direction:column;flex:1;gap:10px;color:inherit;text-decoration:none; } /* image is full-bleed at the top; the card's overflow clips its top corners */ .woocommerce ul.products li.product a img, ul.products li.product a img{ width:100%;aspect-ratio:1;object-fit:cover;display:block;margin:0 0 4px;border-radius:0; background:var(--scs-bg-soft); } /* pad the text block so it lines up while the image stays edge-to-edge */ .woocommerce ul.products li.product .scs-dept, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .scs-pack-line, .woocommerce ul.products li.product .scs-card-desc, .woocommerce ul.products li.product .price{padding-inline:16px} /* card description, between the title and the pack line. Clamped to two lines so a long description can't make one card taller than its neighbours. */ .scs-card-desc{ font-family:'Erez',sans-serif;font-size:13px;line-height:1.55;color:var(--scs-ink-500); margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } .scs-dept{ display:block;font-family:'Erez',sans-serif;font-size:12.5px;font-weight:600; color:var(--scs-muted);margin:0; } .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title{ font-family:'Erez',sans-serif;font-weight:600;font-size:16px;line-height:1.3; color:var(--scs-ink)!important;margin:0;padding-top:0;padding-bottom:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em; } /* Units-per-pack is the key buying decision on a wholesale card — a solid brand pill so it reads before anything else in the meta line. */ .scs-pack-line{ display:flex;align-items:center;gap:8px;font-family:'Erez',sans-serif;font-size:14px; } .scs-pack-line > span:not(.scs-dot){ display:inline-flex;align-items:center; background:var(--scs-brand);color:#fff;font-weight:700;font-size:13px;line-height:1; border-radius:var(--scs-r-pill);padding:6px 12px; } .scs-pack-line .scs-dot{width:4px;height:4px;border-radius:50%;background:var(--scs-muted);flex:none} /* price: per-unit headline + secondary pack price */ .woocommerce ul.products li.product .price, ul.products li.product .price{ display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap;margin:auto 0 0; color:var(--scs-ink);font-family:var(--scs-num);font-weight:700;font-feature-settings:"tnum" 1; } .scs-unit{font-family:var(--scs-num);font-size:24px;font-weight:700;color:var(--scs-ink);line-height:1} .scs-per{font-size:12.5px;color:var(--scs-ink-500);font-weight:600} /* Pack price is what the shopper actually pays — bold and full-ink, not muted. flex-basis:100% forces it onto its OWN line under the unit price at every width (the old margin-inline-start:auto merely shoved it to the far edge of the same row). Keeping the row direction means the headline stays "6.40 ₪ ליחידה" on one line with the pack price beneath it, rather than breaking the unit price away from its "ליחידה" label. */ .scs-pack-price{ font-family:var(--scs-num);font-size:14px;font-weight:800;color:var(--scs-ink); flex:0 0 100%;margin-inline-start:0; } .woocommerce ul.products li.product .price del{color:var(--scs-muted);font-weight:400} .woocommerce ul.products li.product .price ins{color:var(--scs-brand-700);text-decoration:none} /* ---------- Mobile loop card: centred, price stacked ---------- Two cards per row leaves each one narrow, so the unit price and the pack price no longer sit comfortably side by side (the pack price was pushed to the far edge by margin-inline-start:auto and could wrap awkwardly). On mobile the whole card body centres and the two prices stack. */ @media(max-width:768px){ .woocommerce ul.products li.product, ul.products li.product{text-align:center} .woocommerce ul.products li.product .scs-dept, .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title{text-align:center} .woocommerce ul.products li.product .scs-pack-line, ul.products li.product .scs-pack-line{justify-content:center} /* the two price lines are already stacked globally — just centre them */ .woocommerce ul.products li.product .price, ul.products li.product .price{justify-content:center} .woocommerce ul.products li.product .price .scs-pack-price, ul.products li.product .price .scs-pack-price{text-align:center} /* keep the badge stack and stepper visually centred too */ .woocommerce ul.products li.product .scs-qty, ul.products li.product .scs-qty{margin-inline:auto} .woocommerce ul.products li.product .scs-eta-band, ul.products li.product .scs-eta-band{text-align:center} } /* over-image badge stack */ .scs-tags{ position:absolute;top:12px;inset-inline-end:12px;z-index:2; display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none; } .scs-tags .scs-pre-badge{ background:rgba(255,255,255,.92);color:var(--scs-ink); box-shadow:inset 0 0 0 1.5px var(--scs-ink);margin:0;backdrop-filter:blur(2px); } .scs-tags .scs-pre-badge svg{stroke:var(--scs-ink)} .scs-sale-badge{ display:inline-flex;align-items:center;background:var(--scs-ink);color:#fff; font-family:'Erez',sans-serif;font-weight:700;font-size:12px;line-height:1; border-radius:var(--scs-r-pill);padding:6px 11px; } /* ETA band + stepper align to the padded body */ .woocommerce ul.products li.product .scs-eta-band{margin:8px 16px 0} .woocommerce ul.products li.product .scs-qty, ul.products li.product .scs-qty{margin:8px 16px 0;width:auto} /* ---------- Buttons ---------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce .button.add_to_cart_button, .woocommerce #respond input#submit, .woocommerce-page a.button{ background:var(--scs-brand);color:#fff;border-radius:var(--scs-r-pill);font-family:'Erez',sans-serif; font-weight:700;padding:11px 22px;border:0;transition:background .15s,transform .1s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.add_to_cart_button:hover, .woocommerce #respond input#submit:hover{background:var(--scs-brand-700);color:#fff} .woocommerce a.button:active, .woocommerce button.button:active{transform:translateY(1px)} .woocommerce .button.added{background:var(--scs-brand-700)} /* ---------- In-card pack stepper (− qty +) — replaces add-to-cart ---------- */ .woocommerce ul.products li.product .scs-qty, .scs-qty{ display:flex;align-items:stretch;width:auto;height:50px;border-radius:var(--scs-r-pill); overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--scs-line);transition:.18s;margin-top:6px; } .scs-qty.has{box-shadow:inset 0 0 0 1.5px var(--scs-brand)} .scs-qty button{ flex:none;width:50px;display:grid;place-items:center;font-size:24px;font-weight:700;line-height:1; cursor:pointer;transition:.15s;color:var(--scs-ink);background:transparent;border:0;font-family:inherit;padding:0; } .scs-qty button.scs-plus{background:var(--scs-brand);color:#fff} .scs-qty button.scs-plus:hover{background:var(--scs-brand-600)} .scs-qty button.scs-plus:active{background:var(--scs-brand-700)} .scs-qty button.scs-minus:hover{background:var(--scs-brand-50);color:var(--scs-brand)} .scs-qty button.scs-minus:disabled{color:#CFC7CE;cursor:default;background:transparent} .scs-qty .scs-q-mid{ flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1; } .scs-qty .scs-q-mid b{font-family:var(--scs-num);font-size:18px;font-weight:800;color:var(--scs-ink)} .scs-qty.has .scs-q-mid b{color:var(--scs-brand-700)} .scs-qty .scs-q-mid small{font-size:11px;color:var(--scs-muted);font-weight:600} .scs-qty.is-busy{opacity:.55;pointer-events:none} /* ---------- Pre-order badge + ETA (cards & PDP) ---------- */ .scs-pre-badge{ display:inline-flex;align-items:center;gap:6px;background:var(--scs-ink);color:#fff; font-family:'Erez',sans-serif;font-weight:700;font-size:12px;line-height:1; border-radius:var(--scs-r-pill);padding:6px 11px;margin:0 0 8px; } .scs-pre-badge svg{width:14px;height:14px;flex:none;stroke:#fff} .woocommerce ul.products li.product .scs-pre-badge{margin-top:2px} .scs-eta-band{ display:flex;align-items:center;gap:10px;background:var(--scs-bg-soft); border:1px solid var(--scs-line);border-radius:var(--scs-r);padding:10px 13px;margin:10px 0; font-family:'Erez',sans-serif; } .scs-eta-band svg{width:20px;height:20px;flex:none;stroke:var(--scs-ink);opacity:.85} .scs-eta-band span{font-size:13px;color:var(--scs-ink-500);font-weight:600} .scs-eta-band b{margin-inline-start:auto;font-family:var(--scs-num);font-weight:800;color:var(--scs-ink);font-size:15px} /* PDP ETA uses the dark ink band like the mockup */ .single-product .scs-eta-band{background:var(--scs-ink);border-color:var(--scs-ink)} .single-product .scs-eta-band svg{stroke:#fff;opacity:.92} .single-product .scs-eta-band span{color:rgba(255,255,255,.72)} .single-product .scs-eta-band b{color:#fff} /* ---------- Categories accordion (custom Elementor widget) ---------- */ .scs-cat-acc{display:flex;gap:14px;height:340px} .scs-cat-acc .scs-ci{ flex:1 1 0;min-width:0;position:relative;background:var(--scs-brand);border-radius:var(--scs-r-lg); overflow:hidden;text-decoration:none;color:#fff; box-shadow:0 16px 36px -16px rgba(180,0,46,.55); transition:flex-grow .45s cubic-bezier(.4,0,.2,1); } .scs-cat-acc .scs-ci:hover,.scs-cat-acc .scs-ci.is-open{flex-grow:5.2} .scs-cat-acc:hover .scs-ci.is-open:not(:hover){flex-grow:1} /* collapsed face */ .scs-cat-acc .scs-ci-face{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:space-between;padding:22px 0;transition:opacity .25s; } .scs-cat-acc .scs-ci-ico{color:#fff;flex:none;line-height:0} .scs-cat-acc .scs-ci-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .scs-cat-acc .scs-ci-ico svg [fill="currentColor"]{stroke:none;fill:#fff} .scs-cat-acc .scs-ci-name{transform:rotate(-90deg);font-family:'Erez',sans-serif;font-weight:800;font-size:19px;white-space:nowrap;color:#fff} .scs-cat-acc .scs-ci-count{transform:rotate(-90deg);font-family:var(--scs-num);font-size:12px;color:rgba(255,255,255,.8)} .scs-cat-acc .scs-ci:hover .scs-ci-face,.scs-cat-acc .scs-ci.is-open .scs-ci-face{opacity:0} .scs-cat-acc:hover .scs-ci.is-open:not(:hover) .scs-ci-face{opacity:1} /* expanded body */ .scs-cat-acc .scs-ci-body{ position:absolute;inset:0;display:flex;flex-direction:column; justify-content:center;padding:32px;opacity:0;pointer-events:none;transition:opacity .3s;text-align:start; } .scs-cat-acc .scs-ci:hover .scs-ci-body,.scs-cat-acc .scs-ci.is-open .scs-ci-body{opacity:1;transition-delay:.12s} .scs-cat-acc:hover .scs-ci.is-open:not(:hover) .scs-ci-body{opacity:0;transition-delay:0s} .scs-cat-acc .scs-ci-body h3{font-family:'Erez',sans-serif;font-size:30px;font-weight:800;line-height:1;color:#fff;margin:0} .scs-cat-acc .scs-ci-desc{display:block;font-family:'Erez',sans-serif;font-size:14px;color:rgba(255,255,255,.85);margin:10px 0 4px;max-width:32ch} .scs-cat-acc .scs-ci-meta{display:block;font-family:var(--scs-num);font-size:13px;color:rgba(255,255,255,.95);font-weight:700} .scs-cat-acc .scs-ci-cta{ align-self:flex-start;margin-top:18px;display:inline-flex;align-items:center;gap:7px; background:#fff;color:var(--scs-brand);font-family:'Erez',sans-serif;font-weight:700;font-size:14px; padding:10px 18px;border-radius:var(--scs-r-pill);box-shadow:0 8px 18px -8px rgba(0,0,0,.35); } .scs-cat-acc .scs-ci-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(prefers-reduced-motion:reduce){.scs-cat-acc .scs-ci{transition:none}} @media(max-width:900px){ .scs-cat-acc{flex-direction:column;height:auto;gap:12px} .scs-cat-acc .scs-ci{flex:none;height:82px} .scs-cat-acc .scs-ci:hover,.scs-cat-acc .scs-ci.is-open{flex-grow:0} .scs-cat-acc .scs-ci-face{position:relative;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:0 20px;opacity:1} .scs-cat-acc .scs-ci-name{transform:none;font-size:18px} .scs-cat-acc .scs-ci-count{transform:none;margin-inline-start:auto} .scs-cat-acc .scs-ci-body{display:none} } /* ---------- Shop / category archive header + toolbar ---------- */ .woocommerce-products-header{margin:0 0 14px} .woocommerce-products-header__title, .woocommerce-products-header .page-title{ font-family:'Erez',sans-serif;font-weight:800;color:var(--scs-ink);font-size:30px;line-height:1.1;margin:0 0 6px; } .term-description,.term-description p{ font-family:'Erez',sans-serif;font-size:15px;color:var(--scs-ink-500);line-height:1.6;max-width:70ch; } .woocommerce .woocommerce-result-count{ font-family:'Erez',sans-serif;font-size:14px;color:var(--scs-ink-500);margin:0 0 14px; } .woocommerce .woocommerce-ordering{margin:0 0 16px} .woocommerce .woocommerce-ordering select{ font-family:'Erez',sans-serif;font-size:14px;font-weight:600;color:var(--scs-ink);background:#fff; border:0;box-shadow:inset 0 0 0 1px var(--scs-line);border-radius:var(--scs-r-pill);padding:9px 34px 9px 16px;cursor:pointer; } /* ---------- Single product page (PDP) ---------- */ .single-product .product_title{font-family:'Erez',sans-serif;font-weight:800;color:var(--scs-ink);font-size:32px;line-height:1.1;margin:2px 0 12px} /* badge row above the title */ .scs-pdp-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px} .scs-badge{ display:inline-flex;align-items:center;gap:5px;font-family:'Erez',sans-serif;font-weight:700; font-size:12.5px;line-height:1;border-radius:var(--scs-r-pill);padding:6px 12px; } .scs-badge-pack{background:var(--scs-brand-100);color:var(--scs-brand-700)} .scs-badge-ok{background:#E7F6EC;color:#1E7B45} .scs-badge-soft{background:var(--scs-bg-soft);color:var(--scs-ink-500);box-shadow:inset 0 0 0 1px var(--scs-line)} .scs-pdp-badges .scs-pre-badge{margin:0} /* the unit-count stock line reads in UNITS (misleading for pack products) — the in-stock badge above replaces it; the makat/SKU meta is hidden site-wide */ .single-product .summary p.stock{display:none} /* unit-first price shown in a soft boxed panel like the mockup */ .single-product div.product .summary p.price{ background:var(--scs-bg-soft);border-radius:var(--scs-r-lg);padding:18px 22px;margin:14px 0 20px; display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;box-shadow:inset 0 0 0 1px var(--scs-line); font-family:var(--scs-num);font-weight:700;color:var(--scs-ink); } .single-product .summary .scs-unit{font-size:40px} .single-product .summary .scs-per{font-size:14px} .single-product .summary .scs-pack-price{font-size:18px;margin-inline-start:0} .single-product div.product .summary .price ins{color:var(--scs-brand-700);text-decoration:none} /* buy row: pill quantity + big dark add-to-cart button */ .single-product form.cart{display:flex;align-items:stretch;gap:12px;margin:0 0 10px;flex-wrap:wrap} .single-product form.cart .quantity{margin:0} .single-product form.cart .quantity .qty{ height:54px;width:92px;border:0;border-radius:var(--scs-r-pill);box-shadow:inset 0 0 0 1px var(--scs-line); text-align:center;font-family:var(--scs-num);font-size:18px;font-weight:800;color:var(--scs-ink);background:#fff; } .single-product form.cart .single_add_to_cart_button{ flex:1;min-width:180px;height:54px;display:inline-flex;align-items:center;justify-content:center; font-size:16px;background:var(--scs-ink);border-radius:var(--scs-r-pill); } .single-product form.cart .single_add_to_cart_button:hover{background:#000;color:#fff} .single-product .woocommerce-product-gallery__image img{border-radius:var(--scs-r-lg);background:var(--scs-bg-soft)} /* PDP buy row: pack stepper (−/qty/+) + dark "go to cart" button */ .scs-buy-row{display:flex;align-items:stretch;gap:12px;margin:4px 0 8px;flex-wrap:wrap} .scs-buy-row .scs-qty{flex:1.7 1 210px;width:auto;min-width:200px;height:58px;margin:0} .scs-buy-row .scs-qty button{width:58px} .scs-buy-row .scs-q-mid b{font-size:20px} .scs-gocart{ flex:1 1 138px;min-width:130px;height:58px;display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--scs-ink);color:#fff;border-radius:var(--scs-r-pill); font-family:'Erez',sans-serif;font-weight:700;font-size:16px;text-decoration:none;transition:background .15s; } .scs-gocart:hover{background:#000;color:#fff} .scs-gocart svg{width:20px;height:20px;stroke:#fff;fill:none} .scs-buy-note{font-family:'Erez',sans-serif;font-size:13px;color:var(--scs-ink-500);margin:2px 0 0} /* PDP rich pre-order band (dark, with sub-note) */ .single-product .scs-eta-pdp{align-items:flex-start;padding:14px 16px;margin:16px 0} .single-product .scs-eta-pdp svg{margin-top:1px} .scs-eta-pdp .scs-eta-tx{display:flex;flex-direction:column;gap:3px} .scs-eta-pdp .scs-eta-t{font-family:'Erez',sans-serif;font-weight:800;font-size:15px;color:#fff} .scs-eta-pdp .scs-eta-t b{font-family:var(--scs-num);margin-inline-start:4px} .scs-eta-pdp .scs-eta-s{font-size:13px;color:rgba(255,255,255,.72);line-height:1.45} /* PDP specs list ("מפרט וכמויות") */ .scs-specs{margin-top:28px} .scs-specs-title{font-family:'Erez',sans-serif;font-weight:800;font-size:20px;color:var(--scs-ink);margin:0 0 4px} .scs-spec-list{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:0} .scs-spec-list>div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--scs-line)} .scs-spec-list dt{font-family:'Erez',sans-serif;color:var(--scs-ink-500);margin:0} .scs-spec-list dd{font-family:'Erez',sans-serif;margin:0;font-weight:700;color:var(--scs-ink)} .scs-spec-list dd.scs-num{font-family:var(--scs-num)} @media(max-width:600px){.scs-spec-list{grid-template-columns:1fr}} /* product tabs (reviews etc.) — quieter, on-brand */ .single-product .woocommerce-tabs ul.tabs li{border-radius:var(--scs-r) var(--scs-r) 0 0} .single-product .woocommerce-tabs ul.tabs li.active a{color:var(--scs-brand-700)} /* ============================================================= */ /* Cart · Checkout · My Account (classic WooCommerce shortcodes) */ /* ============================================================= */ /* ---- shared notices (also styles the pallet-gate error) ---- */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{ border-top:0;border-radius:var(--scs-r);font-family:'Erez',sans-serif;font-weight:600; } .woocommerce-message{background:#F1FBF4;box-shadow:inset 0 0 0 1px #BEE6CC;color:#176B3A} .woocommerce-message::before{color:#1E7B45} .woocommerce-error{background:var(--scs-brand-50);box-shadow:inset 0 0 0 1px var(--scs-brand-100);color:var(--scs-brand-700)} .woocommerce-error::before{color:var(--scs-brand)} .woocommerce-info{background:var(--scs-bg-soft);box-shadow:inset 0 0 0 1px var(--scs-line);color:var(--scs-ink)} .woocommerce-info::before{color:var(--scs-brand)} .woocommerce .button.wc-forward,.woocommerce a.button.wc-backward{background:var(--scs-ink);color:#fff} .woocommerce .woocommerce-message .button.wc-forward:hover{background:#000} /* ---------- Cart ---------- */ .woocommerce-cart .woocommerce{max-width:1180px;margin-inline:auto} .woocommerce-cart table.cart{border:0;border-collapse:separate;border-spacing:0;width:100%;margin:0 0 26px} .woocommerce-cart table.cart thead th{ font-family:'Erez',sans-serif;font-weight:700;font-size:13px;color:var(--scs-ink-500);text-transform:none; border:0;border-bottom:1px solid var(--scs-line);padding:0 14px 12px;text-align:start; } .woocommerce-cart table.cart td{border:0;border-bottom:1px solid var(--scs-line);padding:16px 14px;vertical-align:middle;background:transparent} .woocommerce-cart table.cart td.product-thumbnail img{width:74px;height:74px;object-fit:cover;border-radius:var(--scs-r);background:var(--scs-bg-soft)} .woocommerce-cart table.cart td.product-name a{font-family:'Erez',sans-serif;font-weight:700;color:var(--scs-ink);text-decoration:none} .woocommerce-cart table.cart td.product-name a:hover{color:var(--scs-brand-700)} .woocommerce-cart table.cart .product-price, .woocommerce-cart table.cart .product-subtotal{font-family:var(--scs-num);font-weight:700;color:var(--scs-ink)} .woocommerce-cart td.product-remove a.remove{ color:var(--scs-muted)!important;font-size:19px;line-height:26px;width:28px;height:28px;border-radius:50%; background:var(--scs-bg-soft)!important;text-align:center; } .woocommerce-cart td.product-remove a.remove:hover{background:var(--scs-brand)!important;color:#fff!important} .woocommerce-cart td.product-quantity .quantity .qty{ width:78px;height:46px;border:0;box-shadow:inset 0 0 0 1px var(--scs-line);border-radius:var(--scs-r-pill); text-align:center;font-family:var(--scs-num);font-weight:800;color:var(--scs-ink);background:#fff; } .woocommerce-cart td.actions{padding:18px 0} .woocommerce-cart td.actions .coupon{display:inline-flex;gap:8px;align-items:stretch;flex-wrap:wrap} .woocommerce-cart td.actions .coupon .input-text{ height:48px;min-width:190px;border:0;box-shadow:inset 0 0 0 1px var(--scs-line);border-radius:var(--scs-r-pill); padding:0 18px;font-family:'Erez',sans-serif;color:var(--scs-ink);background:#fff; } .woocommerce-cart td.actions .button{height:48px;display:inline-flex;align-items:center} .woocommerce-cart .cart-collaterals{display:flex;justify-content:flex-end;width:100%} .woocommerce-cart .cart-collaterals .cart_totals{ width:min(430px,100%);float:none;background:var(--scs-bg-soft);border-radius:var(--scs-r-lg); box-shadow:inset 0 0 0 1px var(--scs-line);padding:22px 24px; } .woocommerce-cart .cart_totals h2{font-family:'Erez',sans-serif;font-weight:800;font-size:20px;color:var(--scs-ink);margin:0 0 12px} .woocommerce-cart .cart_totals table{width:100%;border:0} .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td{border:0;border-top:1px solid var(--scs-line);padding:12px 0;font-family:'Erez',sans-serif;background:transparent;color:var(--scs-ink)} .woocommerce-cart .cart_totals tr:first-child th, .woocommerce-cart .cart_totals tr:first-child td{border-top:0} .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td{font-weight:800;font-size:18px} .woocommerce-cart .cart_totals .amount,.woocommerce-cart .cart_totals bdi{font-family:var(--scs-num)} .woocommerce-cart .wc-proceed-to-checkout{padding:16px 0 0} .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ display:flex;align-items:center;justify-content:center;height:56px;font-size:17px; background:var(--scs-ink);border-radius:var(--scs-r-pill); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:#000} .woocommerce-cart .cart-empty{font-family:'Erez',sans-serif;font-size:19px;color:var(--scs-ink);text-align:center;margin:34px 0 16px} .woocommerce-cart .return-to-shop{text-align:center;margin-bottom:20px} /* ---------- Checkout ---------- */ .woocommerce-checkout form.checkout{max-width:1180px;margin-inline:auto} @media(min-width:1000px){ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:start} .woocommerce-checkout #customer_details{grid-column:1;grid-row:1 / span 2} .woocommerce-checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 14px} .woocommerce-checkout #order_review{grid-column:2;grid-row:2;position:sticky;top:20px} } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2{width:100%;float:none} .woocommerce-checkout #customer_details .col-2{margin-top:20px} .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading{font-family:'Erez',sans-serif;font-weight:800;font-size:20px;color:var(--scs-ink)} .woocommerce form .form-row label{font-family:'Erez',sans-serif;font-weight:600;color:var(--scs-ink);font-size:14px} .woocommerce form .form-row{margin:0 0 14px} .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select, .woocommerce-checkout .select2-container .select2-selection, .woocommerce-account form .form-row input.input-text{ border:0!important;box-shadow:inset 0 0 0 1px var(--scs-line);border-radius:var(--scs-r); padding:12px 14px;min-height:48px;font-family:'Erez',sans-serif;color:var(--scs-ink);background:#fff; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:26px} .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus{box-shadow:inset 0 0 0 1.5px var(--scs-brand)!important;outline:0} .woocommerce-checkout #order_review{ background:var(--scs-bg-soft);border-radius:var(--scs-r-lg);box-shadow:inset 0 0 0 1px var(--scs-line);padding:22px 24px; } .woocommerce-checkout .shop_table{width:100%;border:0;background:transparent} .woocommerce-checkout .shop_table th, .woocommerce-checkout .shop_table td{border:0;border-top:1px solid var(--scs-line);padding:12px 0;font-family:'Erez',sans-serif;background:transparent;color:var(--scs-ink)} .woocommerce-checkout .shop_table thead th{border-top:0;font-weight:700;color:var(--scs-ink-500);font-size:13px} .woocommerce-checkout .shop_table .order-total th, .woocommerce-checkout .shop_table .order-total td{font-weight:800;font-size:18px} .woocommerce-checkout .shop_table .amount,.woocommerce-checkout .shop_table bdi{font-family:var(--scs-num)} .woocommerce-checkout #payment{background:transparent;border-radius:0} .woocommerce-checkout #payment ul.payment_methods{border:0;padding:0;margin:10px 0 0} .woocommerce-checkout #payment ul.payment_methods li{ background:#fff;border-radius:var(--scs-r);box-shadow:inset 0 0 0 1px var(--scs-line); padding:12px 14px;margin:0 0 8px;list-style:none; } .woocommerce-checkout #payment ul.payment_methods li label{font-family:'Erez',sans-serif;font-weight:700;color:var(--scs-ink)} .woocommerce-checkout #payment div.payment_box{background:var(--scs-bg-soft);border-radius:var(--scs-r);margin-top:8px;font-size:13px} .woocommerce-checkout #payment div.payment_box::before{display:none} .woocommerce-checkout #payment .place-order{padding-top:6px} .woocommerce-checkout #place_order{ width:100%;height:56px;font-size:17px;background:var(--scs-ink);border-radius:var(--scs-r-pill);margin-top:10px; } .woocommerce-checkout #place_order:hover{background:#000} /* ---------- My Account ---------- */ .woocommerce-account .woocommerce{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;max-width:1100px;margin-inline:auto} .woocommerce-account .woocommerce>.woocommerce-notices-wrapper, .woocommerce-account #customer_login{flex:1 1 100%} /* login / register cards — !important throughout: this integrates with a page- builder theme (Hello Elementor + Elementor Pro) whose own CSS load order and specificity vs. WooCommerce's default col2-set floats is unpredictable, and was observed live overriding the plain (non-!important) grid rule, leaving the register card dropped below and mis-aligned instead of a clean 2-col row. */ .woocommerce-account #customer_login.u-columns{ display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px!important;overflow:visible!important; } /* ROOT CAUSE (found live by the client): WooCommerce's own legacy clearfix — `.col2-set::before/::after{content:"";display:table;clear:both}` — targets the very element we just turned into a grid container. Once display:grid is set, those generated-content pseudo-elements become real (invisible) GRID ITEMS, occupying a cell and pushing the register card out of alignment. Kill them here, scoped to just this element (the clearfix is still fine/needed on any other .col2-set on the site, e.g. checkout address fields). */ .woocommerce-account #customer_login.u-columns::before, .woocommerce-account #customer_login.u-columns::after{display:none!important} @media(max-width:820px){.woocommerce-account #customer_login.u-columns{grid-template-columns:1fr!important}} .woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2{ width:auto!important;float:none!important;margin:0!important; background:#fff;border-radius:var(--scs-r-lg);box-shadow:inset 0 0 0 1px var(--scs-line);padding:26px 28px; } .woocommerce-account #customer_login h2{font-family:'Erez',sans-serif;font-weight:800;font-size:22px;color:var(--scs-ink);margin:0 0 16px} .woocommerce-account .woocommerce-form-login__submit, .woocommerce-account .woocommerce-form-register__submit, .woocommerce-account .woocommerce-Button{width:100%;height:52px;background:var(--scs-ink);border-radius:var(--scs-r-pill);margin-top:4px} .woocommerce-account .woocommerce-form-login__submit:hover, .woocommerce-account .woocommerce-form-register__submit:hover{background:#000} /* passwordless one-time login-link block, appended after the login form */ .scs-magic-block{margin-top:18px;font-family:'Erez','Heebo',sans-serif} .scs-magic-sep{display:flex;align-items:center;gap:10px;margin:2px 0 14px;color:var(--scs-muted);font-size:12.5px;font-weight:700} .scs-magic-sep::before,.scs-magic-sep::after{content:"";flex:1;height:1px;background:var(--scs-line)} .scs-magic-lead{margin:0 0 10px;font-size:13px;color:var(--scs-ink-500)} .scs-magic-form{display:flex;gap:8px;flex-wrap:wrap} .scs-magic-input{ flex:1;min-width:160px;height:48px;border:0;box-shadow:inset 0 0 0 1px var(--scs-line);border-radius:var(--scs-r-pill); padding:0 16px;font-family:inherit;font-size:14px;color:var(--scs-ink);background:#fff; } .scs-magic-input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--scs-brand)} .scs-magic-btn{ height:48px;padding:0 18px;border:0;border-radius:var(--scs-r-pill);background:#fff;color:var(--scs-ink); font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--scs-ink); transition:background .15s,color .15s;white-space:nowrap; } .scs-magic-btn:hover{background:var(--scs-ink);color:#fff} /* logged-in dashboard */ .woocommerce-account .woocommerce-MyAccount-navigation{flex:0 0 260px;width:auto;float:none} .woocommerce-account .woocommerce-MyAccount-navigation ul{ margin:0;padding:0;list-style:none;background:var(--scs-bg-soft);border-radius:var(--scs-r-lg); box-shadow:inset 0 0 0 1px var(--scs-line);overflow:hidden; } .woocommerce-account .woocommerce-MyAccount-navigation li{margin:0;border-bottom:1px solid var(--scs-line)} .woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0} .woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block;padding:13px 18px;font-family:'Erez',sans-serif;font-weight:600;color:var(--scs-ink-500);text-decoration:none; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--scs-brand-700);background:#fff} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{box-shadow:inset 3px 0 0 var(--scs-brand)} .woocommerce-account .woocommerce-MyAccount-content{flex:1;min-width:0;width:auto;float:none;font-family:'Erez',sans-serif;color:var(--scs-ink)} .woocommerce-account .woocommerce-MyAccount-content a:not(.button){color:var(--scs-brand-700)} @media(max-width:820px){ .woocommerce-account .woocommerce-MyAccount-navigation{flex-basis:100%} } /* account tables (orders / downloads / addresses) */ .woocommerce-account .woocommerce-orders-table, .woocommerce-account .shop_table{border:0;border-collapse:separate;border-spacing:0;width:100%} .woocommerce-account .shop_table th{font-family:'Erez',sans-serif;color:var(--scs-ink-500);font-size:13px;border:0;border-bottom:1px solid var(--scs-line);padding:0 12px 12px;text-align:start} .woocommerce-account .shop_table td{border:0;border-bottom:1px solid var(--scs-line);padding:14px 12px;font-family:'Erez',sans-serif} /* Checkout town selector (replaces the free-text city field) */ .woocommerce form .form-row select.scs-town-select{ width:100%;padding:12px 14px;border:1px solid #dcdcde;border-radius:10px; font-family:'Erez',sans-serif;font-size:15px;background:#fff;color:var(--scs-ink); min-height:48px; } .woocommerce form .form-row select.scs-town-select:focus{ outline:2px solid var(--scs-brand);outline-offset:1px;border-color:var(--scs-brand); } /* ---------- Infinite scroll (archive + search) ---------- The numbered pager stays in the DOM (it is the source of truth for the next URL, and the fallback if fetching ever fails) but is visually hidden. */ .woocommerce-pagination.scs-pager-hidden{display:none} .scs-infinite-sentinel{ display:flex;align-items:center;justify-content:center; min-height:80px;padding:24px 0;grid-column:1/-1; } .scs-infinite-spinner{ width:28px;height:28px;border-radius:50%; border:3px solid var(--scs-brand-100);border-top-color:var(--scs-brand); animation:scs-spin .7s linear infinite; } @keyframes scs-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ .scs-infinite-spinner{animation-duration:2s} } .scs-infinite-more{ background:var(--scs-brand);color:#fff;border:0;border-radius:var(--scs-r-pill); font-family:'Erez',sans-serif;font-weight:700;font-size:15px;padding:12px 26px; cursor:pointer;min-height:44px; } .scs-infinite-more:hover{background:var(--scs-brand-700)} /* ---------- Blocked add-to-cart toast (out of stock / purchase cap) ---------- */ .scs-toast{ position:fixed;inset-inline:0;bottom:110px;margin-inline:auto;z-index:99999; max-width:min(440px,calc(100% - 32px));width:max-content; background:var(--scs-ink);color:#fff;font-family:'Erez',sans-serif;font-weight:600; font-size:15px;line-height:1.45;text-align:center;padding:13px 20px; border-radius:var(--scs-r);box-shadow:0 10px 30px rgba(32,24,32,.28); opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .18s ease,transform .18s ease; } .scs-toast.is-on{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){.scs-toast{transition:none}} /* ---------- JetSmartFilters search bar on the product archive ---------- */ .scs-archive-filter{ margin:0 0 16px;padding:14px 16px;background:#fff; border-radius:var(--scs-r);box-shadow:inset 0 0 0 1px var(--scs-line); } .scs-archive-filter .jet-search-filter__input, .scs-archive-filter input[type="text"], .scs-archive-filter input[type="search"]{ width:100%;min-height:48px;padding:12px 16px; border:1px solid var(--scs-line);border-radius:var(--scs-r-pill); font-family:'Erez',sans-serif;font-size:15px;color:var(--scs-ink);background:#fff; } .scs-archive-filter input:focus{ outline:2px solid var(--scs-brand);outline-offset:1px;border-color:var(--scs-brand); } .scs-archive-filter .jet-search-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .scs-archive-filter .jet-search-filter__input-wrapper{flex:1;min-width:200px} .scs-archive-filter .jet-search-filter__submit, .scs-archive-filter button[type="submit"]{ background:var(--scs-brand);color:#fff;border:0;border-radius:var(--scs-r-pill); font-family:'Erez',sans-serif;font-weight:700;font-size:15px; padding:12px 26px;min-height:48px;cursor:pointer; } .scs-archive-filter .jet-search-filter__submit:hover, .scs-archive-filter button[type="submit"]:hover{background:var(--scs-brand-700)} @media(max-width:600px){ .scs-archive-filter{padding:12px} .scs-archive-filter .jet-search-filter__submit, .scs-archive-filter button[type="submit"]{width:100%} } /* ---------- WooCommerce card inside a JetEngine listing grid ---------- The card is wrapped in