, which masked horizontal bleed site-wide. That wrapper is gone, so contain the overflow here instead. overflow-x on alone would break position:sticky on the header, so it goes on both. */ html.prox-rd-html,body.prox-rd{max-width:100%;overflow-x:hidden} /* style.css:1891-1903 makes

position:fixed under 575px and pads #siteContent by 80px to compensate. The new header is position:sticky and already occupies layout space, so both rules must go — the padding is the blank band under the header. */ .prox-rd #siteContent{padding-top:0!important} @media(max-width:575px){ .prox-rd header.rd-header{position:sticky!important;width:auto} .prox-rd #siteContent{padding-top:0!important} } /* No carousel arrows on mobile — swipe is the natural gesture. 700px matches the breakpoint in slick's responsive settings so JS and CSS agree. */ @media(max-width:700px){ .slick-prev,.slick-next{display:none!important} } /* The drawer overlay is appended to on every viewport. Above the mobile breakpoint it must never render; below it, it is shown/hidden via .on only. Note this must NOT use display:none inside the media query, or the .on class could not bring it back. */ .rd-nav-ov{display:none} @media(max-width:900px){ .rd-nav-ov{display:block;position:fixed;inset:0;background:rgba(12,15,13,.45); z-index:90;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .rd-nav-ov.on{opacity:1;visibility:visible} } /* Decorative rules on .section-title extend 100px past the element (style.css:595-603) and were the actual source of the horizontal scrollbar. Clip them to the title box. */ .prox-rd .section-title{position:relative;overflow:hidden} .prox-rd img{max-width:100%} .prox-rd .num{font-family:'Mont',sans-serif;font-variant-numeric:tabular-nums;direction:ltr;display:inline-block} .prox-rd .en{font-family:'Mont',sans-serif;direction:ltr;display:inline-block} .rd-wrap{max-width:1280px;margin:0 auto;padding:0 24px} /* ============================================================ HEADER ============================================================ */ /* Almoni across the entire header — including Latin words like "OpenSpace", which would otherwise fall back to Montserrat. Phone numbers keep Mont via .num. */ .rd-ticker,.rd-ticker *,header.rd-header,header.rd-header *,nav.rd-nav,nav.rd-nav *{ font-family:'Almoni',system-ui,sans-serif} header.rd-header .num,.rd-ticker .num,header.rd-header .rd-badge{font-family:'Mont',sans-serif} .rd-ticker{background:var(--ink);color:#fff;font-size:14px} .rd-ticker .rd-wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:20px} .rd-ticker ul{display:flex;gap:26px;list-style:none;color:#d6dbd8;margin:0;padding:0} .rd-ticker li{display:flex;align-items:center;gap:7px;white-space:nowrap} .rd-ticker li b{color:#fff;font-weight:600} .rd-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-glow);flex:none} .rd-ticker .rd-tel{font-weight:600;display:flex;align-items:center;gap:8px;color:#fff} .rd-ticker .rd-tel:hover{color:#fff;text-decoration:none} header.rd-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92); backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .rd-hdr-top{display:flex;align-items:center;gap:26px;height:78px} /* !important + max-width: the source logo is very large and any stray rule that wins on specificity would blow the header apart, so constrain it unconditionally. */ .rd-hdr-top>a{flex:none;display:block;line-height:0;max-height:40px} img.rd-logo,.rd-hdr-top>a>img{height:40px!important;width:auto!important;max-width:220px; object-fit:contain;flex:none;display:block} .rd-search{flex:1;max-width:520px;position:relative} .rd-search input{width:100%;height:46px;border-radius:12px;border:1.5px solid var(--line); background:var(--soft);padding:0 44px 0 16px;font:inherit;font-size:16px;color:var(--ink)} .rd-search input::placeholder{color:var(--muted)} .rd-search input:focus{outline:none;border-color:var(--green);background:#fff} .rd-search .rd-search-ic{position:absolute;top:13px;inset-inline-start:14px;color:var(--muted);pointer-events:none} .rd-search button[type=submit]{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer} /* --- AJAX search suggestions --- */ .rd-sug{position:absolute;top:calc(100% + 8px);inset-inline-start:0;inset-inline-end:0; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg); z-index:70;overflow:hidden;max-height:70vh;overflow-y:auto;text-align:start} .rd-sug[hidden]{display:none} .rd-sug-item{display:flex;align-items:center;gap:12px;padding:10px 14px;color:inherit; border-bottom:1px solid var(--line)} .rd-sug-item:last-child{border-bottom:0} .rd-sug-item:hover,.rd-sug-item.on{background:var(--green-l);text-decoration:none;color:inherit} .rd-sug-item img{width:52px;height:52px;object-fit:contain;border-radius:9px; background:var(--soft);flex:none} .rd-sug-tx{min-width:0;flex:1} /* clamp to 2 lines instead of a single ellipsised line — Hebrew product names are long */ .rd-sug-nm{font-size:16px;font-weight:600;line-height:1.35;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rd-sug-pr{white-space:nowrap;margin-inline-start:auto;display:flex;align-items:baseline;gap:6px} .rd-sug-pr b{font-family:'Mont',sans-serif;font-weight:800;font-size:16px;color:var(--ink)} .rd-sug-pr s{font-family:'Mont',sans-serif;font-size:13px;color:var(--muted)} .rd-sug-foot{display:block;padding:12px 14px;text-align:center;font-weight:600; color:var(--green);background:var(--soft)} .rd-sug-foot:hover{background:var(--green-l);text-decoration:none;color:var(--green-d)} .rd-sug-msg{padding:16px 14px;text-align:center;color:var(--muted);font-size:15px} .topimages.slick-slider {margin-bottom:0!important;} .rd-hdr-act{margin-inline-start:auto;display:flex;align-items:center;gap:10px} .rd-icon-btn{width:44px;height:44px;border-radius:11px;border:1px solid var(--line); display:grid;place-items:center;position:relative;background:#fff;color:var(--ink)} .rd-icon-btn:hover{border-color:var(--green);color:var(--green);text-decoration:none} .rd-icon-btn .rd-badge{position:absolute;top:-6px;inset-inline-start:-6px;background:var(--green); color:#fff;font-size:11px;min-width:19px;height:19px;border-radius:10px;display:grid; place-items:center;font-family:'Mont';font-weight:700} .rd-wa-btn{background:var(--green);color:#fff;padding:0 18px;height:44px;border-radius:11px; display:flex;align-items:center;gap:9px;font-weight:600; box-shadow:0 6px 18px -8px var(--green-glow);white-space:nowrap} .rd-wa-btn:hover{background:var(--green-d);color:#fff;text-decoration:none} .rd-burger{display:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line); place-items:center;background:#fff} nav.rd-nav{border-top:1px solid var(--line);height:52px;display:flex;align-items:stretch; font-size:17px;font-weight:600;color:var(--ink-2)} nav.rd-nav ul{display:flex;list-style:none;margin:0;padding:0;flex:1;min-width:0} /* min-width:0 lets flex items shrink below their text width — without it a long menu forces the row wider than the viewport and the whole page scrolls sideways. */ nav.rd-nav li{flex:1 1 0;display:flex;min-width:0} nav.rd-nav li+li{border-inline-start:1px solid var(--line)} nav.rd-nav a{flex:1;display:flex;align-items:center;justify-content:center;min-width:0; border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:.15s;color:inherit;padding:0 8px} nav.rd-nav a:hover{background:var(--soft);color:var(--green);border-color:var(--green);text-decoration:none} nav.rd-nav li.current-menu-item>a,nav.rd-nav li.current_page_item>a{color:var(--green);border-color:var(--green)} /* highlight a menu item whose label contains "מבצע" */ nav.rd-nav li.rd-sale>a{color:var(--red)} /* ============================================================ FOOTER ============================================================ */ .rd-contact{padding:62px 0} .rd-sec-head-c{text-align:center;margin-bottom:28px} .rd-sec-head-c .rd-kick{color:var(--green);font-weight:600;font-size:15px;letter-spacing:.6px} .rd-sec-head-c h2{font-size:36px;font-weight:800;letter-spacing:-.8px;line-height:1.12;margin-top:4px} .rd-cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .rd-ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px; text-align:center;transition:.2s;display:block;color:inherit} .rd-ccard:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow); text-decoration:none;color:inherit} .rd-ccard .rd-ic{width:50px;height:50px;border-radius:14px;background:var(--green-l);color:var(--green); display:grid;place-items:center;margin:0 auto 12px} .rd-ccard .rd-ic img{width:24px;height:24px;object-fit:contain} .rd-ccard b{display:block;font-size:17px;font-weight:600} .rd-ccard span{color:var(--muted);font-size:15.5px} footer.rd-footer{background:var(--ink);color:#b9c0bb;padding:52px 0 0} .rd-fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;padding-bottom:36px} footer.rd-footer h4{color:#fff;font-size:17px;font-weight:600;margin-bottom:12px} footer.rd-footer ul{list-style:none;display:grid;gap:7px;font-size:15.5px;margin:0;padding:0} footer.rd-footer a{color:inherit} footer.rd-footer a:hover{color:var(--green);text-decoration:none} footer.rd-footer .rd-fbot{border-top:1px solid rgba(255,255,255,.1);padding:18px 0; display:flex;justify-content:space-between;font-size:14px;flex-wrap:wrap;gap:10px} footer.rd-footer .rd-flogo{height:36px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1)} .rd-fabout{font-size:15.5px;max-width:320px} .rd-fsocials{display:flex;gap:10px;margin-top:16px} .rd-fsocials a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.09); display:grid;place-items:center;transition:.18s} .rd-fsocials a:hover{background:var(--green)} .rd-fsocials img{width:17px;height:17px;object-fit:contain;filter:brightness(0) invert(1)} /* ============================================================ SINGLE PRODUCT (PDP) ============================================================ */ body.prox-rd-pdp{padding-bottom:92px} .rd-pdp-wrap{max-width:1240px;margin:0 auto;padding:0 24px} .rd-crumbs{font-size:14px;color:var(--muted);padding:18px 0 6px} .rd-crumbs a{color:inherit} .rd-crumbs a:hover{color:var(--green);text-decoration:none} .rd-crumbs span.sep{margin:0 7px;opacity:.5} .rd-pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:10px 0 64px;align-items:start} /* gallery */ .rd-gallery{display:grid;grid-template-columns:88px 1fr;gap:16px;position:sticky;top:96px} .rd-thumbs{display:flex;flex-direction:column;gap:12px} .rd-thumb{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft); aspect-ratio:3/4;transition:.18s;padding:0} .rd-thumb.on{border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)} .rd-thumb:hover{border-color:var(--green)} .rd-thumb img{width:100%;height:100%;object-fit:cover} .rd-stage{position:relative;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(170deg,#fafbfa,#eef1ef);aspect-ratio:4/4.4;display:grid;place-items:center} .rd-stage img{height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply; transition:transform .5s cubic-bezier(.2,.8,.2,1)} .rd-stage:hover img{transform:scale(1.045)} .rd-flag{position:absolute;top:18px;inset-inline-end:18px;background:var(--red);color:#fff; font-weight:800;font-size:19px;padding:7px 14px;border-radius:10px;letter-spacing:.4px; box-shadow:0 8px 20px -8px rgba(226,59,59,.6);z-index:2} .rd-stage-chips{position:absolute;bottom:16px;inset-inline-start:16px;display:flex;gap:8px;z-index:2} .rd-chip{background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border:1px solid rgba(20,22,20,.07); border-radius:99px;padding:7px 13px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px} /* info column */ .rd-eyebrow{font-size:14px;font-weight:600;color:var(--green);letter-spacing:.6px} .rd-info h1{font-size:15px;font-weight:400;color:var(--muted);margin-top:2px} .rd-model{font-family:'Archivo',sans-serif;font-size:60px;line-height:.95;letter-spacing:-1.5px; margin:6px 0 4px;direction:ltr;text-align:right} .rd-model span{color:var(--green)} .rd-sub{font-size:21px;color:var(--ink-2);font-weight:600} .rd-rate{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:15px;flex-wrap:wrap} .rd-stars{color:#f0a500;font-size:18px;letter-spacing:1px} .rd-rate a{color:var(--muted);text-decoration:underline;text-underline-offset:3px} .rd-sold{color:var(--green);font-weight:600;display:flex;align-items:center;gap:6px} .rd-pitch{margin-top:18px;font-size:19px;color:var(--ink-2); border-inline-start:3px solid var(--green);padding-inline-start:14px} .rd-pitch b{color:var(--ink);font-weight:600} .rd-pricebox{margin-top:26px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(180deg,#fff,var(--soft))} .rd-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .rd-price{font-family:'Mont';font-weight:800;font-size:46px;color:var(--ink);letter-spacing:-1px} .rd-was{font-family:'Mont';font-size:22px;color:var(--muted);text-decoration:line-through; text-decoration-color:var(--red);text-decoration-thickness:2px} .rd-save{background:var(--green);color:#fff;font-weight:600;font-size:16px;padding:5px 12px;border-radius:8px} .rd-price-sub{margin-top:8px;font-size:15px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap} .rd-price-sub b{color:var(--ink-2);font-weight:600} .rd-countdown{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:flex; align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:16px;color:var(--amber);font-weight:600} .rd-cd-num{background:var(--ink);color:#fff;font-family:'Mont';font-weight:700;padding:3px 8px; border-radius:6px;font-size:15px} /* woo buy area restyle */ .rd-buybox{margin-top:24px} .rd-buybox .price{display:none} /* price rendered by our own pricebox */ .rd-buybox form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0} .rd-buybox .quantity{display:flex;align-items:center;border:1.5px solid var(--line); border-radius:14px;overflow:hidden;flex:none} .rd-buybox .quantity .minus,.rd-buybox .quantity .plus{width:46px;height:60px;font-size:22px; color:var(--ink-2);background:none;border:0;cursor:pointer} .rd-buybox .quantity .minus:hover,.rd-buybox .quantity .plus:hover{background:var(--soft);color:var(--green)} .rd-buybox .quantity input.qty{width:44px;height:60px;border:0;text-align:center; font-family:'Mont';font-weight:700;font-size:19px;background:none;-moz-appearance:textfield} .rd-buybox .quantity input.qty::-webkit-outer-spin-button, .rd-buybox .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .rd-buybox button.single_add_to_cart_button{flex:1;min-height:60px;border-radius:14px; background:var(--green);color:#fff;font-size:21px;font-weight:600;display:flex;align-items:center; justify-content:center;gap:10px;box-shadow:0 10px 26px -10px var(--green-glow);transition:.18s;border:0} .rd-buybox button.single_add_to_cart_button:hover{background:var(--green-d);transform:translateY(-1px); box-shadow:0 16px 34px -12px var(--green-glow)} .rd-cta2{margin-top:10px;width:100%;height:54px;border-radius:14px;border:1.5px solid var(--line); display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:600; color:var(--ink-2);transition:.18s;background:#fff} .rd-cta2:hover{border-color:var(--green);color:var(--green);background:var(--green-l);text-decoration:none} .rd-assure{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center; font-size:13.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:14px 8px} .rd-assure div{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.3} .rd-assure svg{color:var(--green)} .rd-delivery{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .rd-dl-row{display:flex;gap:12px;padding:13px 15px;font-size:15.5px;align-items:flex-start} .rd-dl-row+.rd-dl-row{border-top:1px solid var(--line)} .rd-dl-row svg{flex:none;margin-top:3px;color:var(--green)} .rd-dl-row b{font-weight:600} .rd-dl-row .free{color:var(--green);font-weight:600} .rd-dl-row small{display:block;color:var(--muted);font-size:14px} .rd-bulkbar{margin-top:14px;background:var(--ink);color:#fff;border-radius:var(--r);padding:14px 18px; display:flex;align-items:center;gap:14px;font-size:16px} .rd-bulkbar b{color:#fff} .rd-bulkbar a{margin-inline-start:auto;color:#fff;background:rgba(255,255,255,.14);padding:7px 14px; border-radius:9px;font-weight:600;white-space:nowrap;font-size:15px;border:1px solid rgba(255,255,255,.18)} .rd-bulkbar a:hover{background:var(--green);border-color:var(--green);text-decoration:none} /* swatches */ .rd-opt{margin-top:26px} .rd-opt-t{font-size:16px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px} .rd-opt-t em{font-style:normal;color:var(--muted);font-weight:400} .rd-swatches{display:flex;gap:10px} .rd-sw{width:54px;height:54px;border-radius:12px;border:2px solid var(--line);padding:3px; transition:.15s;position:relative;background:none} .rd-sw i{display:block;width:100%;height:100%;border-radius:8px} .rd-sw.on{border-color:var(--green)} .rd-sw:hover{border-color:var(--ink-2)} .rd-sw.out::after{content:'';position:absolute;inset:3px;border-radius:8px; background:linear-gradient(to top left,transparent 47%,#fff 47%,#fff 53%,transparent 53%)} /* sections */ .rd-sec{padding:64px 0;border-top:1px solid var(--line)} .rd-sec.soft{background:var(--soft)} .rd-sec-h{text-align:center;margin-bottom:38px} .rd-sec-h .rd-kick{color:var(--green);font-weight:600;font-size:15px;letter-spacing:.8px} .rd-sec-h h2{font-size:38px;font-weight:800;letter-spacing:-.6px;margin-top:4px} .rd-sec-h p{color:var(--muted);font-size:18px;margin-top:8px} .rd-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .rd-bcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;background:#fff;transition:.2s} .rd-bcard:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-3px)} .rd-bico{width:50px;height:50px;border-radius:14px;background:var(--green-l);color:var(--green); display:grid;place-items:center;margin-bottom:16px} .rd-bico img{width:24px;height:24px;object-fit:contain} .rd-bcard h3{font-size:21px;font-weight:600;margin-bottom:7px} .rd-bcard p{color:var(--muted);font-size:16px} .rd-bcard .rd-spec{margin-top:12px;font-size:13.5px;color:var(--ink-2);background:var(--soft); border-radius:8px;padding:7px 10px} .rd-fitwrap{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center} .rd-fitbox{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px} .rd-fitrow{margin-bottom:22px} .rd-fitrow:last-child{margin-bottom:0} .rd-fitrow .lbl{display:flex;justify-content:space-between;font-size:16px;font-weight:600;margin-bottom:9px} .rd-fitrow .lbl span{color:var(--muted);font-weight:400} .rd-track{height:10px;border-radius:6px;background:var(--soft);position:relative;overflow:hidden} .rd-track i{position:absolute;top:0;bottom:0;border-radius:6px; background:linear-gradient(90deg,var(--green),#2bbd72)} .rd-ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--muted); margin-top:6px;font-family:'Mont'} .rd-fitnote{background:var(--green-l);border-radius:var(--r);padding:16px 18px;font-size:16px; color:var(--green-d);margin-top:22px;display:flex;gap:10px} .rd-tblwrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff} .rd-tbl{width:100%;border-collapse:collapse;font-size:16.5px;margin:0} .rd-tbl th,.rd-tbl td{padding:15px 18px;text-align:right;border-bottom:1px solid var(--line)} .rd-tbl th{background:var(--soft);font-weight:600;width:34%;color:var(--ink-2)} .rd-tbl tr:hover td{background:#fcfdfc} /* "מתאים במיוחד ל" list under the specs table */ .rd-fits{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-lg); padding:24px 26px;background:#fff} .rd-fits h3{font-size:21px;font-weight:800;margin-bottom:14px} .rd-fits ul{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 24px} .rd-fits li{display:flex;align-items:flex-start;gap:9px;font-size:16.5px;color:var(--ink-2)} .rd-fits svg{color:var(--green);flex:none;margin-top:4px} .rd-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .rd-tier{border:1.5px solid var(--line);border-radius:var(--r);padding:20px 18px;text-align:center; position:relative;transition:.2s;background:#fff} .rd-tier.best{border-color:var(--green);background:var(--green-l)} .rd-tier .tg{position:absolute;top:-11px;left:0;right:0;margin:0 auto;width:fit-content; background:var(--green);color:#fff;font-size:13px;font-weight:600;padding:3px 11px;border-radius:99px} .rd-tier .qtyl{font-size:16px;color:var(--muted);font-weight:600} .rd-tier .p{font-family:'Mont';font-weight:800;font-size:30px;margin:6px 0 2px} .rd-tier .off{font-size:14.5px;color:var(--green);font-weight:600} .rd-cmp{overflow-x:auto} .rd-cmp table{width:100%;border-collapse:collapse;min-width:660px;font-size:16px} .rd-cmp th,.rd-cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center} .rd-cmp th:first-child,.rd-cmp td:first-child{text-align:right;font-weight:600;color:var(--ink-2)} .rd-cmp thead th{background:var(--soft);font-size:17px} .rd-cmp thead th.me{background:var(--green);color:#fff;border-radius:12px 12px 0 0} .rd-cmp td.me{background:var(--green-l);font-weight:600} .rd-yes{color:var(--green);font-weight:800} .rd-no{color:#c9cec9} .rd-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .rd-rev{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff} .rd-rev .rd-stars{font-size:16px} .rd-rev p{margin:12px 0 16px;font-size:16.5px;color:var(--ink-2)} .rd-rev .who{display:flex;align-items:center;gap:11px;font-size:15px} .rd-av{width:38px;height:38px;border-radius:50%;background:var(--green-l);color:var(--green-d); display:grid;place-items:center;font-weight:800;flex:none;object-fit:cover} .rd-rev .who small{color:var(--muted);display:block;font-size:13.5px} .rd-verified{margin-inline-start:auto;font-size:13px;color:var(--green);font-weight:600; background:var(--green-l);padding:4px 9px;border-radius:99px;white-space:nowrap} .rd-faq{max-width:820px;margin:0 auto} .rd-faq details{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px; overflow:hidden;background:#fff} .rd-faq details[open]{border-color:var(--green)} .rd-faq summary{padding:18px 22px;font-size:18px;font-weight:600;cursor:pointer;list-style:none; display:flex;align-items:center;gap:12px} .rd-faq summary::-webkit-details-marker{display:none} .rd-faq summary::after{content:'+';margin-inline-start:auto;color:var(--green);font-size:24px; font-weight:400;line-height:1} .rd-faq details[open] summary::after{content:'−'} .rd-faq details .rd-faq-a{padding:0 22px 20px;color:var(--muted);font-size:16.5px} .rd-finale{background:var(--ink);color:#fff;border-radius:26px;padding:52px;display:grid; grid-template-columns:1.3fr auto;gap:40px;align-items:center} .rd-finale h2{font-size:36px;font-weight:800;letter-spacing:-.5px} .rd-finale p{color:#b9c0bb;font-size:18px;margin-top:10px} .rd-finale .acts{display:flex;flex-direction:column;gap:11px;min-width:290px} .rd-finale .b1{background:var(--green);height:58px;border-radius:14px;display:flex;align-items:center; justify-content:center;gap:9px;font-size:20px;font-weight:600;color:#fff} .rd-finale .b1:hover{background:var(--green-d);color:#fff;text-decoration:none} .rd-finale .b2{border:1.5px solid rgba(255,255,255,.25);height:54px;border-radius:14px;display:flex; align-items:center;justify-content:center;gap:9px;font-size:18px;font-weight:600;color:#fff} .rd-finale .b2:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none} /* sticky buy bar */ .rd-sticky{position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(255,255,255,.94); backdrop-filter:blur(16px);border-top:1px solid var(--line); box-shadow:0 -10px 40px -20px rgba(0,0,0,.3);transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1)} .rd-sticky.on{transform:none} .rd-sticky .rd-pdp-wrap{display:flex;align-items:center;gap:18px;height:82px} .rd-sticky img.th{width:52px;height:52px;object-fit:cover;border-radius:10px;background:var(--soft);flex:none} .rd-sticky .nm{font-weight:600;font-size:17px} .rd-sticky .nm small{display:block;color:var(--muted);font-weight:400;font-size:14px} .rd-sticky .pr{margin-inline-start:auto;display:flex;align-items:baseline;gap:9px} .rd-sticky .pr b{font-family:'Mont';font-weight:800;font-size:26px} .rd-sticky .pr s{color:var(--muted);font-family:'Mont';font-size:16px} .rd-sticky .sb{height:52px;padding:0 26px;border-radius:13px;background:var(--green);color:#fff; font-size:18px;font-weight:600;display:flex;align-items:center;gap:9px;border:0} .rd-sticky .sb:hover{background:var(--green-d);color:#fff;text-decoration:none} .rd-sticky .sw2{height:52px;width:52px;border-radius:13px;border:1.5px solid var(--line); display:grid;place-items:center;color:var(--green);background:#fff;flex:none} /* ============================================================ HOME PAGE (front-page.php) ============================================================ */ .rd-sec-home{padding:62px 0} .rd-sec-home.soft{background:var(--soft)} .rd-sec-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:28px} .rd-sec-head .rd-kick{color:var(--green);font-weight:600;font-size:15px;letter-spacing:.6px} .rd-sec-head h2{font-size:36px;font-weight:800;letter-spacing:-.8px;line-height:1.12;margin-top:4px} .rd-sec-head .rd-side{margin-inline-start:auto;display:flex;align-items:center;gap:10px;flex:none} .rd-link-all{font-weight:600;color:var(--green);display:flex;align-items:center;gap:6px;white-space:nowrap} .rd-link-all:hover{color:var(--green-d);text-decoration:none} /* hero */ /* line-height:0 on the wrapper removes the inline-block descender gap that otherwise shows as a white strip under the hero; children reset it to normal. */ .rd-hero-wrap{position:relative;line-height:0;font-size:0} .rd-hero-wrap .rd-hero{line-height:1.55;font-size:1rem} .rd-hero-wrap .slick-list,.rd-hero-wrap .slick-slide,.rd-hero-wrap .slick-slide>div{margin:0;padding:0} .rd-hero{position:relative;min-height:560px;display:grid;align-items:center;overflow:hidden} .rd-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .rd-hero-scrim{position:absolute;inset:0; background:linear-gradient(to left,rgba(10,13,11,.94) 0%,rgba(10,13,11,.86) 26%,rgba(10,13,11,.58) 58%,rgba(10,13,11,.26) 100%)} .rd-hero .rd-wrap{position:relative;width:100%;padding-top:60px;padding-bottom:60px} .rd-hero-inner{max-width:640px;color:#fff} .rd-hero-kick{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);border-radius:99px; padding:7px 15px;font-size:15px;font-weight:600} .rd-hero-title{font-size:54px;line-height:1.1;letter-spacing:-1.4px;font-weight:800;margin:18px 0 14px;color:#fff} .rd-hero-title em{font-style:normal;color:#6fd79c} .rd-hero-lead{font-size:19.5px;color:#dbe2dd;max-width:560px} .rd-hero-acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap} .rd-btn{height:56px;padding:0 26px;border-radius:14px;display:inline-flex;align-items:center;gap:10px; font-size:19px;font-weight:600;transition:.18s} .rd-btn-p{background:var(--green);color:#fff;box-shadow:0 10px 26px -10px var(--green-glow)} .rd-btn-p:hover{background:var(--green-d);transform:translateY(-1px);color:#fff;text-decoration:none} .rd-btn-g{border:1.5px solid rgba(255,255,255,.4);color:#fff} .rd-btn-g:hover{background:#fff;color:var(--ink);text-decoration:none} /* --- hero slick --------------------------------------------------------- Do NOT set line-height:0 here: each slide contains text, and collapsing the line box stacks every line on one baseline (overlapping paragraph). */ .rd-hero-wrap .slick-prev,.rd-hero-wrap .slick-next{z-index:5} .rd-hero-wrap .slick-list,.rd-hero-wrap .slick-track{line-height:normal} /* before slick initialises, only the first slide should be visible — otherwise every slide paints in the same place and all the text overlaps. */ .topimages:not(.slick-initialized)>.rd-hero-slide:nth-child(n+2){display:none} /* fade mode stacks slides absolutely; make sure only the active one is clickable */ .rd-hero-wrap .slick-slide{pointer-events:none} .rd-hero-wrap .slick-slide.slick-active{pointer-events:auto} /* reasons strip */ .rd-points{background:var(--ink);color:#fff} .rd-points .rd-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:20px 24px} .rd-points div{display:flex;align-items:center;gap:10px;font-size:15.5px;color:#dbe2dd;line-height:1.3} .rd-points div+div{border-inline-start:1px solid rgba(255,255,255,.12);padding-inline-start:18px} .rd-points svg{color:#6fd79c;flex:none} .rd-points b{color:#fff;font-weight:600} /* category tiles */ .rd-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .rd-cat{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff; transition:.2s;display:block;color:inherit} .rd-cat:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-4px); text-decoration:none;color:inherit} .rd-cat-im{aspect-ratio:1/.92;background:#fff;display:grid;place-items:center;padding:14px;overflow:hidden} .rd-cat-im img{max-height:100%;width:auto;max-width:100%;object-fit:contain; transition:transform .45s cubic-bezier(.2,.8,.2,1)} .rd-cat:hover .rd-cat-im img{transform:scale(1.06)} .rd-cat-bd{padding:14px 15px 16px;text-align:center;border-top:1px solid var(--line);display:block} .rd-cat-bd b{display:block;font-size:16.5px;font-weight:600} .rd-cat-bd span{color:var(--green);font-size:14.5px;font-weight:600} /* customer logos */ .rd-logos{background:var(--soft);padding:48px 0} .rd-logos-head{text-align:center;margin-bottom:26px} .rd-logos-head .rd-kick{color:var(--green);font-weight:600;font-size:15px} .rd-logos-head h2{font-size:28px;font-weight:800;margin-top:4px} .rd-logorow .rd-logo-cell{padding:0 10px} .rd-logorow img{height:44px;width:100%;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.2s} .rd-logorow img:hover{filter:none;opacity:1} /* ============================================================ PRODUCT CARD (template-parts/product-card.php) Used by: front page rails, category grids, related products. The outer Bootstrap column is untouched — slick needs it. ============================================================ */ /* NOTE: inside a slick rail the column must NOT be display:flex — slick sets inline widths on .slick-slide and a flex column fights that, collapsing the track to one full-width card per row. Keep it block here; flex only in real (non-slick) grids. */ .rd-card-col{display:block;border-left:0!important;padding:0 9px;margin-bottom:18px} .slick-slide .rd-card-col{padding:0 9px;margin-bottom:0;width:auto;float:none} .rd-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff; transition:.2s;position:relative;display:flex;flex-direction:column;flex:1 1 auto; color:inherit;text-decoration:none} .rd-card:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-4px); text-decoration:none;color:inherit} .rd-card-im{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center; overflow:hidden;padding:10px} .rd-card-im img{max-height:100%;max-width:100%;width:auto;object-fit:contain; transition:transform .45s cubic-bezier(.2,.8,.2,1)} .rd-card:hover .rd-card-im img{transform:scale(1.06)} .rd-tagsale{position:absolute;top:12px;inset-inline-start:12px;background:var(--red);color:#fff; font-weight:700;font-size:14px;padding:4px 10px;border-radius:7px;z-index:2;line-height:1.4} .rd-tagnew{position:absolute;top:12px;inset-inline-end:12px;background:var(--ink);color:#fff; font-weight:600;font-size:13.5px;padding:4px 10px;border-radius:7px;z-index:2;line-height:1.4} .rd-tagout{position:absolute;bottom:12px;inset-inline-start:12px;background:var(--muted);color:#fff; font-weight:600;font-size:13.5px;padding:4px 10px;border-radius:7px;z-index:3;line-height:1.4} .rd-quick{position:absolute;left:12px;right:12px;bottom:12px;height:44px;border-radius:11px; background:var(--ink);color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center; justify-content:center;gap:8px;opacity:0;transform:translateY(8px);transition:.22s;z-index:2} .rd-card:hover .rd-quick{opacity:1;transform:none} .rd-card-bd{padding:15px 16px 17px;display:block;border-top:1px solid var(--line); flex:1 1 auto;text-align:start} .rd-card-bd .rd-nm{font-size:18px;font-weight:600;line-height:1.25;display:block;color:var(--ink)} .rd-card-bd .rd-ds{font-size:14.5px;color:var(--muted);margin:2px 0 10px;display:block} .rd-card-bd .rd-pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .rd-card-bd .rd-pr b{font-family:'Mont';font-weight:800;font-size:22px;color:var(--ink)} .rd-card-bd .rd-pr s{font-family:'Mont';font-size:15px;color:var(--muted)} .rd-card-bd .rd-pr .rd-sv{margin-inline-start:auto;font-size:13px;font-weight:600;color:var(--green); background:var(--green-l);padding:3px 8px;border-radius:7px} .rd-card-bd .rd-opt-txt{font-size:15.5px;color:var(--green);font-weight:600} /* variable products fall back to Woo's own price markup */ .rd-card-bd .rd-pr-html{font-family:'Mont';font-weight:800;font-size:20px;color:var(--ink)} .rd-card-bd .rd-pr-html del{font-weight:400;font-size:15px;color:var(--muted);margin-inline-end:6px} .rd-card-bd .rd-pr-html ins{text-decoration:none} .rd-card-cta{margin-top:10px;width:100%;padding:0 9px} /* --- slick rails --------------------------------------------------------- Bootstrap's col-* sets width:25% + float, which conflicts with the inline width slick puts on each .slick-slide. Inside a rail, slick owns the width. */ /* negative margin cancels the card padding so the rail aligns with the section edge; dropped on mobile where slick's centerMode adds its own padding */ .pop_products{margin:0 -9px} @media(max-width:700px){.pop_products{margin:0}} .pop_products .slick-slide>div{height:100%} /* Neutralise Bootstrap's col-* sizing on the card INSIDE a slide: slick owns the slide width, the column must simply fill it. Note this targets the element inside .slick-slide only — never the .slick-slide itself, whose float slick controls (rtl:true floats slides right; overriding that reverses the rail). */ .pop_products .slick-slide .rd-card-col[class*="col-"]{width:100%!important;max-width:100%!important; flex:none!important;float:none!important;padding:0 9px} /* Equal-height cards WITHOUT touching .slick-track. Slick sizes the track and each slide with inline styles; making the track a flex container makes flex re-distribute children and ignore those widths, which blows every slide up to full width (one giant card per row). Never set display on the track. Stretch the slide's inner wrapper instead — that is safe. */ .pop_products.slick-initialized .slick-track{display:block} /* Do not set float here — slick sets it itself (right in rtl mode) and overriding it knocks the track out of alignment, cropping the visible slide. */ .pop_products.slick-initialized .slick-slide{height:auto} .pop_products.slick-initialized .slick-slide>div{height:100%} .pop_products.slick-initialized .rd-card-col{height:100%;display:flex;flex-direction:column} .pop_products.slick-initialized .rd-card{flex:1 1 auto} /* before slick initialises, show a plain grid so there is no flash of stacked cards */ .pop_products:not(.slick-initialized){display:grid;grid-template-columns:repeat(4,1fr);gap:0} .pop_products:not(.slick-initialized)>.rd-card-col:nth-child(n+5){display:none} /* ============================================================ RESPONSIVE ============================================================ */ /* Shrink the horizontal nav before items truncate. Lower bound 901px so it can never reach the mobile drawer (≤900px), which needs its own padding and font size. */ @media(min-width:901px) and (max-width:1100px){ nav.rd-nav{font-size:15.5px} nav.rd-nav a{padding:0 4px} } @media(max-width:1100px){ .rd-cgrid{grid-template-columns:repeat(2,1fr)} .rd-cats{grid-template-columns:repeat(3,1fr)} .rd-points .rd-wrap{grid-template-columns:repeat(3,1fr);gap:14px} .rd-points div+div{border:0;padding:0} } @media(max-width:980px){ .rd-pdp{grid-template-columns:1fr;gap:30px} .rd-gallery{position:static;grid-template-columns:1fr;gap:12px} .rd-thumbs{flex-direction:row;order:2;overflow-x:auto} .rd-thumb{width:76px;flex:none} .rd-stage{aspect-ratio:1/1.08} .rd-benefits,.rd-tiers,.rd-revs{grid-template-columns:1fr 1fr} .rd-fitwrap,.rd-finale{grid-template-columns:1fr} .rd-model{font-size:46px} .rd-sec-h h2,.rd-finale h2{font-size:30px} .rd-sec{padding:48px 0} } @media(max-width:900px){ .rd-fgrid{grid-template-columns:1fr 1fr} .rd-sec-head-c h2{font-size:29px} .rd-hero-title{font-size:38px} .rd-hero{min-height:460px} .rd-sec-home{padding:46px 0} .rd-sec-head h2{font-size:29px} .pop_products:not(.slick-initialized){grid-template-columns:1fr 1fr} .pop_products:not(.slick-initialized)>.rd-card-col:nth-child(n+3){display:none} /* ---- mobile nav drawer ---- height:auto + border-top:0 remove the 52px band the desktop rule reserves in the header. The drawer itself slides in from the page edge as a full-height panel. */ .rd-burger{display:grid;order:-1} /* !important throughout: the desktop rule (height:52px, display:flex, border-top) and Bootstrap's own `nav{display:flex}` both target the same element, and any one of them leaking through collapses the drawer into a short strip. */ nav.rd-nav{ position:fixed!important;top:0!important;bottom:0!important; inset-inline-end:0;inset-inline-start:auto; width:min(86vw,340px)!important;max-width:340px;height:auto!important; display:flex!important;flex-direction:column!important;align-items:stretch!important; background:#fff!important;z-index:95!important; border-top:0!important;border-inline-end:1px solid var(--line); transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s; overflow-y:auto;padding:0!important;box-shadow:var(--shadow-lg); /* visibility keeps the closed drawer out of the scrollable area, otherwise the translated panel widens the page and causes horizontal scroll */ visibility:hidden} /* LTR slides from the left, RTL from the right */ html:not([dir=rtl]) nav.rd-nav{inset-inline-end:auto;inset-inline-start:0;transform:translateX(-100%)} nav.rd-nav.open{transform:none!important;visibility:visible!important} /* Close button sits in normal flow at the top of the drawer — position:absolute inside an overflow-y:auto panel scrolls away with the content. */ .rd-nav-close{flex:none;align-self:flex-end;margin:14px 14px 6px;width:38px;height:38px; border-radius:10px;border:1px solid var(--line);display:grid;place-items:center; background:#fff;color:var(--ink)} .rd-nav-close:hover{border-color:var(--green);color:var(--green)} /* the desktop rule makes ul/li/a flex children that stretch — reset all of it */ nav.rd-nav ul{display:block!important;flex:none;width:100%;min-width:0} nav.rd-nav li{display:block!important;flex:none;width:100%} nav.rd-nav li+li{border-inline-start:0;border-top:1px solid var(--line)} nav.rd-nav a{display:flex!important;flex:none;justify-content:flex-start;align-items:center; padding:15px 22px;border-bottom:0;font-size:17.5px;width:100%; white-space:normal;overflow:visible;text-overflow:clip} nav.rd-nav a:hover{background:var(--green-l)} /* overlay itself is defined near the top of this file (single source of truth) */ body.rd-nav-open{overflow:hidden} } @media(max-width:640px){ .rd-wrap,.rd-pdp-wrap{padding:0 16px} .rd-search,.rd-ticker ul{display:none} .rd-hero-title{font-size:31px} .rd-hero-scrim{background:linear-gradient(to top,rgba(12,15,13,.94) 30%,rgba(12,15,13,.72) 72%,rgba(12,15,13,.5))} .rd-cats{grid-template-columns:1fr 1fr} .rd-points .rd-wrap{grid-template-columns:1fr;gap:12px} .rd-btn{height:50px;padding:0 20px;font-size:17px} .pop_products:not(.slick-initialized){grid-template-columns:1fr} .pop_products:not(.slick-initialized)>.rd-card-col:nth-child(n+2){display:none} .rd-hdr-top{height:66px;gap:12px} .rd-logo{height:32px} .rd-wa-btn span{display:none} .rd-wa-btn{padding:0 14px} .rd-cgrid,.rd-fgrid{grid-template-columns:1fr} body.prox-rd-pdp{padding-bottom:84px} .rd-model{font-size:38px} .rd-sub{font-size:18px} .rd-pitch{font-size:17px} .rd-price{font-size:38px} .rd-stage-chips{flex-wrap:wrap;gap:6px} .rd-chip{font-size:12.5px;padding:5px 10px} .rd-benefits,.rd-tiers,.rd-revs{grid-template-columns:1fr} .rd-buybox form.cart{flex-wrap:wrap} .rd-buybox button.single_add_to_cart_button{width:100%;flex:auto;order:-1;font-size:19px} .rd-buybox .quantity{width:100%} .rd-buybox .quantity input.qty{flex:1;width:auto} .rd-assure{font-size:12.5px;padding:12px 4px} .rd-bulkbar{flex-wrap:wrap;font-size:15px} .rd-bulkbar a{margin:0;width:100%;text-align:center} .rd-finale{padding:30px 22px;border-radius:20px} .rd-sec-h h2,.rd-finale h2{font-size:26px} .rd-sticky .rd-pdp-wrap{height:74px;gap:10px} .rd-sticky img.th,.rd-sticky .nm{display:none} .rd-sticky .pr{margin:0} .rd-sticky .pr b{font-size:22px} .rd-sticky .sb{flex:1;justify-content:center;padding:0 14px;font-size:17px} }