/* reCAPTCHA v3: hide floating badge and inline form widget; disclosure text in footer satisfies ToS */ .grecaptcha-badge { visibility: hidden !important; } .field-recaptcha { display: none !important; } .recaptcha-disclosure { width: 100%; flex-basis: 100%; clear: both; text-align: center; font-size: 11px; color: #999; padding: 8px 0 4px; } .recaptcha-disclosure a { color: #999; text-decoration: underline; } /* .fotorama__caption__wrap{ display:none !important; } */ .eoHideMe { display:none; } .boxConfidence__wrap___2skKG{ text-align:center } .boxConfidence__item___3OCaH{ position:relative; display:inline-block; vertical-align:middle; height:60px; cursor:help } .boxConfidence__item___3OCaH:after{ content:""; display:inline-block; height:100%; min-height:inherit; vertical-align:middle } .boxConfidence__item___3OCaH:before{ content:""; display:inline-block; vertical-align:middle; width:1px; height:16px; margin:0 25px; background:#2d2d2d } .boxConfidence__item___3OCaH:first-of-type:before{ display:none } .boxConfidence__name___1fo-i{ display:inline-block; vertical-align:middle; font-size:13px } .boxConfidence__title___3Rmn1{ display:block; font-size:15px; font-weight:700; border-bottom:1px solid #eae9e5; color:#2d2d2d; padding-bottom:10px; margin-bottom:12px } .boxConfidence__text___3xOLW{ font-family:Arial; font-size:12px; line-height:1.8; letter-spacing:.04em; color:#4d4d4d } .boxConfidence__text___3xOLW a{ font-size:13px; -webkit-transition:color .1s ease; transition:color .1s ease; text-decoration:underline; color:#000 } .boxConfidence__text___3xOLW a:hover{ color:#5ecfea } .boxConfidence__tooltip___1oA-y{ border:1px solid #efefef; cursor:default; padding:15px 20px 20px; width:356px; background-color:#fff; -webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.11); box-shadow:0 3px 6px 0 rgba(0,0,0,.11); -webkit-box-sizing:border-box; box-sizing:border-box; text-align:center } .boxConfidence__tooltip___1oA-y .rc-tooltip-arrow{ -webkit-box-shadow:-2px 2px 0 -1px #efefef; box-shadow:-2px 2px 0 -1px #efefef } .boxConfidence__showOnTopOverlay___U19Ef{ z-index:100015 } .topStrip__wrap___1m-8A{ background:#2d2d2d } .topStrip__showOnTopOverlay___20ROX{ z-index:100014 } .topStrip__invisible___OzW96{ display:none } .topStrip__body___82_9H{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin:0 auto; max-width:1440px; min-width:965px; padding:0 20px; -webkit-box-sizing:border-box; box-sizing:border-box } @media (min-width:1280px) and (max-width:1439.9px){ .topStrip__body___82_9H{ padding:0 65px } } @media (min-width:1440px){ .topStrip__body___82_9H{ padding:0 95px } } .topStrip__boxPhone___2iMNd a{ color:#6cf } .topStrip__boxPhone___2iMNd a:after{ content:""; display:inline-block; vertical-align:middle; width:2px; height:16px; margin:0 10px; background:#fff } .topStrip__boxPhone___2iMNd:after{ content:""; display:inline-block; height:100%; min-height:inherit; vertical-align:middle } .topStrip__boxConfidence___38ugK{ -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto } .topStrip__boxConfidence___38ugK.topStrip__sticky___1u8Bd div{ text-align:left } .topStrip__boxConfidence___38ugK div>div{ height:35px; cursor:default } .topStrip__boxConfidence___38ugK div>div:before{ width:2px; margin:0 10px; background:#fff } .topStrip__boxConfidence___38ugK span{ font-size:14px; line-height:1.1; color:#fff; font-weight:700 } .topStrip__boxMenu___3eHOf{ -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; text-align:right } .topStrip__boxMenu___3eHOf>div{ height:100% } .home-main-slider__item__content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .home-main-slider { width: 100%; padding: 0px; } .home-main-slider__item {width: 100%; margin: 0; padding: 0; position: relative; } .home-main-slider__item img {} .home-main-slider__item__img { } .home-main-slider__item__content .col-xs-4 { position: relative; height: 100%; } .home-main-slider__item__content__button-left, .home-main-slider__item__content__button-left:hover, .home-main-slider__item__content__button-right, .home-main-slider__item__content__button-right:hover, .home-main-slider__item__content__button-right:visited, .home-main-slider__item__content__button-left:visited { display: inline-block; background-color: #4286f4; /* font-family: "Roboto", sans-serif; */ font-size: 1.3vw; color: #fff; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 3% 9%; position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%);} .home-main-slider__item__content__text-container__spans { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .home-main-slider__item__content__text-container__spans-h1 { /* font-family: "Roboto", sans-serif; */ font-size: 2vw; color: #fff; white-space: nowrap; } .home-main-slider__item__content__text-container__spans-h2 { /* font-family: "Roboto", sans-serif; */ font-size: 1.3vw; color: #fff; font-weight: 300; } .home-main-slider .owl-controls .owl-nav div img {height: 100%;} .home-main-slider .owl-controls .owl-nav div, .home-main-slider .owl-controls .owl-nav div:hover { background: none; margin: 0 10px; padding: 0;} @media (max-width: 991px){ .home-main-slider .owl-controls .owl-nav div { top: 40%; height: 30%;} } @media (max-width: 1200px){ .home-main-slider .owl-controls .owl-next { right: 0; top: 30%; } .home-main-slider .owl-controls .owl-prev { left: 0; top: 30%; } } .home-main-slider .owl-controls .owl-next { right: 0; top: 35%; } .home-main-slider .owl-controls .owl-prev { left: 0; top: 35%; } .home-feature-categories { text-align: center; } .home-feature-categories ul { display:block; width:100%; text-align:center; margin:0; } .home-feature-categories .subcat-boxes { display:inline-block; width:auto; max-width:100%; margin:0 auto;} .home-feature-categories .item { display: inline-block; border-right: 1px solid #ececec;} .home-feature-categories .item:last-child { border-right: 0;} .home-feature-categories .item a{ display:block; padding:36px 25px; color:#343434; font-family: 'Open-Sans', sans-serif; font-weight:400; text-align:center; text-decoration:none; font-size:16px; text-transform:uppercase } .home-feature-categories .item a:hover{ text-decoration:none; opacity:0.5 } .home-feature-categories .item a img{ clear:both; display:block; margin:0 auto 15px;} .home-feature-categories .item a span{ clear:both; display:block} .page-header .panel.wrapper { border-bottom: 1px solid #e8e8e8; background-color: #eae9e4; } .minicart-wrapper .action.showcart.active:before { content: '\f07a'; } .minicart-wrapper .action.showcart:before { content: '\f07a'; } .block-search, .minicart-wrapper { margin-top: 5px !important; } .header.links.header-cms-links.eoheaderlinks.li:before { content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 16px; margin: 0 25px; background: #2d2d2d; } .button__btn___xRa52 { display: inline-block; vertical-align: middle; position: relative; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; border: 0; } .button__btn___xRa52.button__blue___B5gfi { background: #F15B47; color: #fff; } .popupFindSizeForm__header___1uHR5 { height: 72px; margin-bottom: 10px; font-size: 31px; line-height: 72px; font-weight: 700; text-align: center; background-color: #efefef; } .popupFindSizeForm__text___Av9SK { color: #4d4d4d; font-size: 16px; margin-bottom: 44px; text-align: center; } .popupFindSizeForm__pic___3mlwU { display: block; width: 334px; margin: 0 auto; } .popupFindSizeForm__form___GNOyW { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 363px; margin: 32px auto; } .popupFindSizeForm__item___pvSAw { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; text-align: center; } .popupFindSizeForm__name___1-Rk7 { display: block; font-size: 16px; margin-bottom: 5px; white-space: nowrap; color: #4d4d4d; } .popupFindSizeForm__optional___qW-Rd { display: block; padding-left: 4px; text-align: left; font-size: 10px; color: #4d4d4d; } .popupFindSizeForm__input___3XPvl { width: 100%; height: 34px; border: 1px solid #b1b1b1; padding: 0 12px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .popupFindSizeForm__nameBtn___-C8J1 { font-size: 17px; } .popupFindSize__wrap___3iWE0 { } body > div.modals-wrapper > aside.modal-popup.modal-slide._show > div.modal-inner-wrap { /* ⚠ Was a flat `width:590px !important`, which overflowed every phone: the slide panel is ~331px on a 375px screen, so the wrapper ran 260px off the right and the modal looked blank. An override in Yireo/ExampleModal tried to fix it and lost — with !important on both sides, SPECIFICITY decides and this five-part selector wins. Fix it here instead. min() keeps the desktop width identical. */ width: min(590px, 100%) !important; max-width: 100%; box-sizing: border-box; /* ._show IS the open state, so pin the slide-in end position. Magento animates translateX(100%) -> 0 on open; once the width stopped being a fixed 590px the animation stopped landing on 0 and the panel parked one full width off-screen. Same selector as above, so nothing lower in the cascade can undo it. */ transform: translateX(0) !important; } .rc-dialog-mask { background: rgba(0, 0, 0, .8); height: 100%; } .rc-dialog-mask, .rc-dialog-wrap { bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 100; } .rc-dialog-wrap { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: auto; outline: 0; -webkit-overflow-scrolling: touch; } .rc-dialog { position: relative; width: auto; max-height: 100%; } .rc-dialog-content { background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000; position: relative; } .rc-dialog-content+div { display: none; } .rc-dialog-body { -webkit-box-sizing: border-box; box-sizing: border-box; } .rc-dialog-mask { background: rgba(0, 0, 0, .8); height: 100%; z-index: 1001; } .rc-dialog-mask, .rc-dialog-wrap { bottom: 0; left: 0; position: fixed; right: 0; top: 0; } .rc-dialog-wrap { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: auto; outline: 0; z-index: 1002; -webkit-overflow-scrolling: touch; } .rc-dialog { position: relative; width: auto; } .rc-dialog-content { background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .rc-dialog-content+div { display: none; } .rc-dialog-body { -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .rc-dialog-close { border: 0; background: #23aae2; cursor: pointer; height: 42px; position: absolute; right: -42px; top: 10px; width: 42px; } .rc-dialog-close:after, .rc-dialog-close:before { content: ""; position: absolute; top: 21px; right: 13px; width: 15px; height: 1px; background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rc-dialog-close:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); } div, img, p, span { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; } p { margin: 0; } /* //magento.stackexchange.com/questions/245361/hide-the-qty-box-in-bundle-product */ /* .bundle-options-container .nested .field.qty:last-child { display : none; } */ /* ── Checkout heading consistency ──────────────────────────────────────────── Luma sets checkout section titles to font-weight:300 / text-transform:none. Override to match the bold-uppercase style used throughout the rest of the site. */ .step-title, .opc-block-summary > .title, .shipping-information-title span, .checkout-payment-method .step-title { font-weight: 700 !important; text-transform: uppercase !important; } .fotorama--fullscreen .fotorama__stage__frame .fotorama__img--full { width: 100% !important; height: 100% !important; object-fit: contain !important; max-width: 100% !important; max-height: 100% !important; } @media (max-width: 767px) { [class*="popupFindSizeForm__header"] { font-size: 22px !important; } } .product-item-actions { display: none !important; } .products-grid .product-item .product-item-info, .products-grid .product-item:hover .product-item-info { padding: 8px !important; } .products-grid .product-item-info .product-image-container { width: 100% !important; max-width: 100% !important; } /* Frame Colour is always populated — suppress required asterisk */ .swatch-attribute.framecolours > .swatch-attribute-label:after { display: none !important; } /* Qty switcher: prevent inc button wrapping below input */ .qty-wrapper { white-space: nowrap; } /* ── fa-stack icon fix inside .block-benefits ──────────────────────────────── The easyoptical.css "span { font: inherit; vertical-align: baseline }" reset and FA 4.7 "line-height: inherit" interact to push the foreground icon to the bottom of the circle. Replace the line-height centering trick with explicit flexbox centering: fill the fa-stack container, then use align-items/justify- content to centre the glyph (::before) regardless of font or line-height. */ .block-benefits .fa-stack { vertical-align: top; } .block-benefits .fa-stack .fa-stack-1x, .block-benefits .fa-stack .fa-stack-2x { top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; } .block-benefits .fa-stack .fa-circle { color: #1150b5; } /* == Racing green (2026-08-08) ============================================== Buttons + links. Lives HERE, in plain CSS, because this theme chain imports neither _extend.less nor .extend.less — the latter sat unconsumed for years (its reCAPTCHA-badge rule never reached any compiled stylesheet, so that is re-stated below too). Swissup config drives only the hollow-outline style; the approved mock uses a solid primary. */ button.action.primary, .action.primary, .action.primary.tocart { background: #1e5c40 !important; border-color: #1e5c40 !important; color: #fff !important; } button.action.primary:hover, .action.primary:hover, .action.primary:focus, button.action.primary:active, .action.primary:active { background: #174a33 !important; border-color: #174a33 !important; color: #fff !important; } /* :not(.btn) -- the homepage hero overlay buttons (.btn.btn-transparent) are white-on-photo by design, styled inside the CMS block at specificity (0,1,0). This rule is (0,3,1), so it was repainting them green on top of a dark photograph. Regression from the 2026-08-08 green propagation, caught on the live homepage. */ .page-main a:not(.action):not(.eol-chipbtn):not(.btn):not(.eoc-btn):not(.product-item-link), .footer.content a, a.action.view { color: #1e5c40; } .page-main a:not(.action):not(.btn):not(.eoc-btn):not(.product-item-link):hover, .footer.content a:hover { color: #174a33; } .grecaptcha-badge { visibility: hidden !important; } /* Checkout progress bar + header cart counter: the last orange (Luma default) surfaces, brought into the racing green with everything else (2026-08-08). */ /* !important because checkout MERGES css and the merge order puts the theme after this file — on merged pages equal-specificity source order flips against us. */ .opc-progress-bar-item._active:before, .opc-progress-bar-item._active > span:before { background: #1e5c40 !important; border-color: #1e5c40 !important; } .opc-progress-bar-item._complete > span:before { background: #1e5c40 !important; } .opc-progress-bar-item._active > span:after, .opc-progress-bar-item._complete > span:after { border-color: #1e5c40 !important; } .opc-progress-bar-item._complete:before { background: #1e5c40 !important; border-color: #1e5c40 !important; } /* The completed step LABEL is Magento's default #006bb4 blue. It is only visible from step 2 onward -- step 1 is the only state you see before entering an address -- which is why it survived the first pass. Verified with getComputedStyle on the live page, not by reading the rule: the earlier attempt here was 'correct' CSS painting elements that a parent-theme rule had already set to display:none. */ .opc-progress-bar-item._complete > span { color: #1e5c40 !important; } .opc-progress-bar-item._complete:hover:before, .opc-progress-bar-item._complete:hover > span:before { background: #174a33 !important; } .minicart-wrapper .action.showcart .counter.qty { background: #1e5c40; } /* ------------------------------------------------------------------------ Racing green footer — Option A, applied 2026-08-11. The ground was #222337, a blue-violet. Racing green #1e5c40 is 84° away in hue: neither analogous nor complementary, which is the gap that reads muddy, and the cool violet pushed the green toward grey. Worse, the green button and social icons sat at 1.95:1 against it — below the 3:1 floor for non-text controls, so they read as smudges rather than things you can click. Ground moves into the green family so the accent belongs, and the accent lifts so it is actually visible: ground #16211c white text 16.6:1 accent #2a7a55 3.16:1 on the ground, white on it 5.23:1 (AA) hover #35916a icons #3fa87b 5.60:1 on the ground ⚠ Scoped to .page-footer on purpose. #1e5c40 is the site-wide brand green (checkout progress, minicart counter) and must NOT be swept up in this. ------------------------------------------------------------------------ */ .page-footer, .page-footer .footer.content .switcher-store { background: #16211c; } .page-footer .action.subscribe.primary { background-color: #2a7a55; border-color: #2a7a55; color: #fff; } .page-footer .action.subscribe.primary:hover, .page-footer .action.subscribe.primary:focus { background-color: #35916a; border-color: #35916a; } .page-footer .social-icons a, .page-footer .social-icons a:link, .page-footer .social-icons a:visited { color: #3fa87b; } .page-footer .social-icons a:hover, .page-footer .social-icons a:focus { color: #fff; } /* The copyright bar is a SEPARATE element with its own colours and was missed on the first pass: .footer-toolbar-bottom{color:#b8b9d3;background-color:#1c1d2e} — a darker indigo with blue-grey text. It sits directly under the footer, so leaving it behind left a violet stripe below the new green ground. Kept slightly darker than the footer, as it was before. #a8b5ad on #111a16 = 8.35:1, matching the 8.63:1 it had. */ .page-footer .footer-toolbar-bottom, .footer-toolbar.footer-toolbar-bottom { background: #111a16; background-color: #111a16; color: #a8b5ad; } .page-footer .footer-toolbar-bottom a, .footer-toolbar.footer-toolbar-bottom a { color: #a8b5ad; } .page-footer .footer-toolbar-bottom a:hover, .footer-toolbar.footer-toolbar-bottom a:hover { color: #fff; } /* ================================================================ EOC KIT - CMS refresh component kit (2026-08-12, approved proposal) Appended to easyoptical.css. Classes are all eoc- prefixed; fonts apply inside CMS content areas only, so PDP/checkout chrome is untouched. Fonts self-hosted in ../fonts/. ================================================================ */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-stretch:normal; font-display:swap;src:url(../../frontend/EasyOptical/easyoptical/en_US/fonts/fraunces-var.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(../../frontend/EasyOptical/easyoptical/en_US/fonts/inter-var.woff2) format('woff2')} :root{ --eoc-green:#1e5c40;--eoc-green-dk:#174a33;--eoc-green-tint:#e9f1ed; --eoc-ink:#1b1c1d;--eoc-muted:#5d6360;--eoc-rule:#e2e6e4; --eoc-wash:#f4f6f5;--eoc-card:#fff;--eoc-amber-tint:#faf4e0; --eoc-display:'Fraunces',Georgia,serif; --eoc-text:'Inter',-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; } /* typography inside refreshed content only */ .eoc{font-family:var(--eoc-text);color:var(--eoc-ink);line-height:1.65;font-size:17px; -webkit-font-smoothing:antialiased} .eoc h1,.eoc h2,.eoc h3{font-family:var(--eoc-display);font-weight:600;line-height:1.12; letter-spacing:-.01em;color:var(--eoc-ink);text-transform:none} .eoc a{color:var(--eoc-green)} .eoc p{margin:0} .eoc ul{margin:0 0 0 20px} .eoc-wrap{max-width:1200px;margin:0 auto;padding:0 24px} .eoc-narrow{max-width:1000px} .eoc-hero{background:var(--eoc-wash);border-bottom:1px solid var(--eoc-rule); padding:48px 0 42px;margin:0 -15px} .eoc-hero .eoc-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center} .eoc-hero--plain .eoc-wrap{display:block;max-width:820px;text-align:center} .eoc-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--eoc-green);margin-bottom:12px;font-family:var(--eoc-text)} .eoc-hero h1{font-size:44px;margin:0 0 12px} .eoc-lead{font-size:20px;color:var(--eoc-muted);max-width:58ch;margin:0} .eoc-hero--plain .eoc-lead{margin:0 auto} .eoc-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:24px 0 4px;list-style:none;margin:0} .eoc-chip{display:inline-block;padding:8px 17px;border:1.5px solid var(--eoc-rule);border-radius:99px; font-size:14px;font-weight:600;color:var(--eoc-ink);text-decoration:none;background:#fff} .eoc-chip:hover{border-color:var(--eoc-green);color:var(--eoc-green); background:var(--eoc-green-tint);text-decoration:none} .eoc-section{padding:40px 0} .eoc-section+.eoc-section{padding-top:6px} .eoc-h2{font-size:30px;margin:0 0 18px} .eoc-kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--eoc-green);margin-bottom:8px;font-family:var(--eoc-text)} .eoc-acc{border:1px solid #cfe0d7;border-radius:14px;background:var(--eoc-green-tint);padding:10px;display:grid;gap:8px} .eoc-acc details{background:#fff;border:1px solid var(--eoc-rule);border-radius:10px;overflow:hidden} .eoc-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px; align-items:center;padding:17px 22px;font-weight:600;font-size:18px} .eoc-acc summary::-webkit-details-marker{display:none} .eoc-acc summary:after{content:"";width:9px;height:9px;flex:0 0 9px; border-right:2.5px solid var(--eoc-green);border-bottom:2.5px solid var(--eoc-green); transform:rotate(45deg);transition:transform .15s;margin-top:-4px} .eoc-acc details[open] summary{color:var(--eoc-green)} .eoc-acc details[open] summary:after{transform:rotate(225deg);margin-top:4px} .eoc-acc__body{padding:0 22px 20px;color:#3f4442;font-size:16.5px} .eoc-acc__body p+p,.eoc-acc__body ul{margin-top:10px} .eoc-cards{display:grid;gap:16px} .eoc-cards--2{grid-template-columns:repeat(2,1fr)} .eoc-cards--3{grid-template-columns:repeat(3,1fr)} .eoc-cards--4{grid-template-columns:repeat(4,1fr)} .eoc-card{background:var(--eoc-card);border:1px solid var(--eoc-rule);border-radius:12px;padding:22px} .eoc-card h3{font-size:19px;margin:12px 0 6px} .eoc-card p{font-size:15.5px;color:var(--eoc-muted)} .eoc-ico{width:44px;height:44px;border-radius:12px;background:var(--eoc-green-tint); display:flex;align-items:center;justify-content:center} .eoc-ico svg{width:25px;height:25px;stroke:var(--eoc-green);fill:none;stroke-width:1.8} .eoc-steps{counter-reset:s;display:grid;margin:0;padding:0;list-style:none} .eoc-step{position:relative;padding:0 0 26px 62px;counter-increment:s} .eoc-step:before{content:counter(s);position:absolute;left:0;top:-2px;width:40px;height:40px; border-radius:50%;background:var(--eoc-green);color:#fff; font:600 17px/40px var(--eoc-display);text-align:center} .eoc-step:not(:last-child):after{content:"";position:absolute;left:19px;top:42px;bottom:4px; width:2px;background:var(--eoc-rule)} .eoc-step h3{font-size:18px;margin:0 0 5px} .eoc-step p{color:var(--eoc-muted);font-size:16.5px;max-width:64ch} .eoc-table{width:100%;border-collapse:collapse;border:1px solid var(--eoc-rule); border-radius:12px;overflow:hidden} .eoc-table th{background:var(--eoc-green);color:#fff;text-align:left;padding:12px 16px; font:600 13px/1.2 var(--eoc-text);letter-spacing:.06em;text-transform:uppercase;border:0} .eoc-table td{padding:13px 17px;border:0;border-top:1px solid var(--eoc-rule);font-size:16px} .eoc-table tr:nth-child(even) td{background:var(--eoc-wash)} .eoc-callout{display:flex;gap:14px;align-items:flex-start;border-radius:12px;padding:17px 21px; background:var(--eoc-green-tint);border:1px solid #cfe0d7;font-size:16px} .eoc-callout--warn{background:var(--eoc-amber-tint);border-color:#e7d9a8} .eoc-callout b{display:block;margin-bottom:2px} .eoc-cta{background:var(--eoc-green);color:#fff;border-radius:14px;padding:30px 34px; display:flex;align-items:center;justify-content:space-between;gap:22px} .eoc-cta h2{font-size:24px;color:#fff;margin:0} .eoc-cta p{opacity:.85;margin:4px 0 0;color:#fff} .eoc-btn{display:inline-block;background:#fff;color:var(--eoc-green);font-weight:700; font-size:15px;padding:13px 26px;border-radius:8px;text-decoration:none;white-space:nowrap} .eoc-btn:hover{text-decoration:none;color:var(--eoc-green-dk)} .eoc-btn--green,.eoc a.eoc-btn--green{background:var(--eoc-green);color:#fff} .eoc-btn--green:hover,.eoc a.eoc-btn--green:hover{background:var(--eoc-green-dk);color:#fff} .eoc-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .eoc-figure{background:var(--eoc-wash);border:1px solid var(--eoc-rule);border-radius:14px; padding:26px;text-align:center;margin:0} .eoc-figure figcaption{font-size:13.5px;color:var(--eoc-muted);margin-top:10px} .eoc-related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .eoc-related a{display:block;border:1px solid var(--eoc-rule);border-radius:12px;padding:16px 20px; text-decoration:none;color:var(--eoc-ink);font-weight:600;background:#fff} .eoc-related a span{display:block;font-weight:400;font-size:14.5px;color:var(--eoc-muted);margin-top:2px} .eoc-related a:hover{border-color:var(--eoc-green);text-decoration:none} .eoc-field{display:flex;flex-direction:column;gap:6px} .eoc-field label{font:700 12px/1 var(--eoc-text);letter-spacing:.1em;text-transform:uppercase; color:var(--eoc-muted)} .eoc-input{position:relative} .eoc-input input,.eoc-input select{width:100%;font-size:17px;padding:13px 42px 13px 15px; border:1.5px solid var(--eoc-rule);border-radius:10px;background:#fff;height:auto} .eoc-input input:focus{outline:none;border-color:var(--eoc-green);box-shadow:none} .eoc-input .unit{position:absolute;right:13px;top:50%;transform:translateY(-50%); color:var(--eoc-muted);font-size:14px} .eoc-note{font-size:13px;color:var(--eoc-muted)} .eoc-bands{display:flex;gap:10px} .eoc-band{flex:1;border:1.5px solid var(--eoc-rule);border-radius:10px;padding:9px 8px; text-align:center;background:#fff} .eoc-band b{display:block;font:600 15px/1.3 var(--eoc-text)} .eoc-band span{font-size:12.5px;color:var(--eoc-muted)} .eoc-band--on{border-color:var(--eoc-green);background:var(--eoc-green-tint)} .eoc-usp{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 40px;padding:14px 0; border-bottom:1px solid var(--eoc-rule);font-size:14px;font-weight:600} .eoc-usp svg{width:18px;height:18px;stroke:var(--eoc-green);fill:none;stroke-width:2; vertical-align:-3px;margin-right:7px} .eoc-stars{color:#d8a413;letter-spacing:2px;font-size:17px} .eoc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .eoc-tile{position:relative;border-radius:14px;overflow:hidden;background:var(--eoc-wash); border:1px solid var(--eoc-rule);aspect-ratio:4/3;display:flex;align-items:flex-end; text-decoration:none} .eoc-tile img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .eoc-tile .t{position:relative;width:100%;padding:14px 18px; background:linear-gradient(transparent,rgba(20,30,25,.55));color:#fff; font:600 19px/1.2 var(--eoc-display)} .eoc-tile:hover{text-decoration:none} /* responsive */ @media (max-width:880px){ .eoc-hero{margin:0} .eoc img,.eoc svg{max-width:100%;height:auto} .eoc-hero .eoc-wrap,.eoc-split{grid-template-columns:1fr;gap:24px} .eoc-hero h1{font-size:31px} .eoc-cards--3,.eoc-cards--4{grid-template-columns:1fr 1fr} .eoc-related,.eoc-tiles{grid-template-columns:1fr} .eoc-cta{flex-direction:column;text-align:center} .eoc-bands{flex-direction:column} } @media (max-width:560px){ .eoc .eo-sf__grid{grid-template-columns:1fr 1fr} .eoc .eo-sf__field--wide{grid-column:1/-1} .eoc-cards--2,.eoc-cards--3,.eoc-cards--4{grid-template-columns:1fr} .eoc-hero h1{font-size:27px} } /* A 4-up tile row, as a CLASS. ⚠ The homepages carried style="grid-template-columns:repeat(4,1fr)" INLINE, and an inline style beats every media query above it — so a 375px phone rendered four 70px tiles with 19px labels, clipping "Women's sunglasses" to "Wome". Never set the grid inline; use this. Declared after the media blocks above because the specificity is equal and source order decides which wins. */ .eoc-tiles--4{grid-template-columns:repeat(4,1fr)} @media (max-width:880px){ .eoc-tiles--4{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .eoc-tiles--4{grid-template-columns:repeat(2,1fr);gap:12px} .eoc-tile .t{padding:10px 12px;font-size:15px;line-height:1.15} } /* ============================== end EOC KIT ============================== */ /* eo-sf--page bridge: kit look for the size-finder block on the refreshed page. Scoped to .eoc so the header modal variant is untouched. */ .eoc .eo-sf--page .eo-sf__title,.eoc .eo-sf--page .eo-sf__intro,.eoc .eo-sf--page .eo-sf__pic{display:none} .eoc .eo-sf--page{border:0;padding:0;max-width:none;margin:0;box-shadow:none;background:transparent} .eoc .eo-sf--page .eo-sf__label{font:700 12px/1 var(--eoc-text);letter-spacing:.1em;text-transform:uppercase;color:var(--eoc-muted)} .eoc .eo-sf--page .eo-sf__input{font-size:17px;padding:13px 15px;border:1.5px solid var(--eoc-rule);border-radius:10px;height:auto;background:#fff} .eoc .eo-sf--page .eo-sf__input:focus{border-color:var(--eoc-green);outline:none;box-shadow:none} .eoc .eo-sf--page .eo-sf__submit{width:100%;background:var(--eoc-green);color:#fff;font:700 16px/1 var(--eoc-text);padding:16px;border:0;border-radius:8px;cursor:pointer;text-transform:none;letter-spacing:0} .eoc .eo-sf--page .eo-sf__submit:hover{background:var(--eoc-green-dk)} /* contact-index-index kit treatment (2026-08-12): stock Magento contact form in the refresh look. CSS-only, scoped to the contact page. */ .contact-index-index .page-title-wrapper .page-title{ font-family:var(--eoc-display);font-weight:600;font-size:40px;letter-spacing:-.01em; text-transform:none;color:var(--eoc-ink)} .contact-index-index .column.main{font-family:var(--eoc-text);font-size:17px} .contact-index-index .form.contact .legend span, .contact-index-index .form.contact legend{ font-family:var(--eoc-display);font-weight:600;font-size:26px;text-transform:none; letter-spacing:-.01em;color:var(--eoc-ink);border:0} .contact-index-index .form.contact .field .label{ font:700 12px/1 var(--eoc-text);letter-spacing:.1em;text-transform:uppercase; color:var(--eoc-muted);margin-bottom:6px} .contact-index-index .form.contact input[type=text], .contact-index-index .form.contact input[type=email], .contact-index-index .form.contact input[type=tel], .contact-index-index .form.contact select, .contact-index-index .form.contact textarea{ font-size:17px;padding:13px 15px;border:1.5px solid var(--eoc-rule);border-radius:10px; background:#fff;height:auto;font-family:var(--eoc-text)} .contact-index-index .form.contact input:focus, .contact-index-index .form.contact select:focus, .contact-index-index .form.contact textarea:focus{ border-color:var(--eoc-green);outline:none;box-shadow:none} .contact-index-index .form.contact .action.submit.primary{ font:700 16px/1 var(--eoc-text);padding:16px 34px;border-radius:8px;text-transform:none; letter-spacing:0} /* testimonials-index kit treatment (2026-08-13): Swissup testimonials in the refresh look. */ .testimonials-index-index .page-title-wrapper .page-title, .testimonials-index-form .page-title-wrapper .page-title{ font-family:var(--eoc-display);font-weight:600;font-size:40px;letter-spacing:-.01em; text-transform:none;color:var(--eoc-ink)} .testimonials-index-index .column.main,.testimonials-index-form .column.main{ font-family:var(--eoc-text);font-size:17px} .testimonials-index-index .testimonials-list{max-width:860px;margin:0 auto} .testimonials-index-index figure.testimonial{ background:#fff;border:1px solid var(--eoc-rule);border-radius:14px;padding:26px 30px; margin:0 0 16px;box-shadow:none} .testimonials-index-index figure.testimonial blockquote{ background:none;border:0;padding:0;margin:0;font-style:normal;font-size:17px; line-height:1.65;color:var(--eoc-ink)} .testimonials-index-index figure.testimonial blockquote:before, .testimonials-index-index figure.testimonial blockquote:after{display:none} .testimonials-index-index figure.testimonial .arrow{display:none} .testimonials-index-index figure.testimonial .extra-info{ display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px; padding-top:14px;border-top:1px solid var(--eoc-rule);background:none} .testimonials-index-index figure.testimonial .author, .testimonials-index-index figure.testimonial .author-name{ font-weight:600;color:var(--eoc-ink);font-style:normal;font-size:15.5px} .testimonials-index-index figure.testimonial .date{color:var(--eoc-muted);font-size:14px} .testimonials-index-index .rating-result > span:before{color:#d8a413} .testimonials-index-index .label.rating-label{ font:700 12px/1 var(--eoc-text);letter-spacing:.1em;text-transform:uppercase;color:var(--eoc-muted)} .testimonials-index-index .more-button .action, .testimonials-index-form .action.submit.primary{ font:700 15.5px/1 var(--eoc-text);padding:14px 28px;border-radius:8px;text-transform:none;letter-spacing:0} .testimonials-index-form .fieldset input[type=text], .testimonials-index-form .fieldset input[type=email], .testimonials-index-form .fieldset textarea{ font-size:17px;padding:13px 15px;border:1.5px solid var(--eoc-rule);border-radius:10px; background:#fff;height:auto;font-family:var(--eoc-text)} /* more-button kit fix (2026-08-13): the Show More control inherited Argento blue + green link text */ .testimonials-index-index .more-button{text-align:center;margin:10px 0 30px} .testimonials-index-index .more-button .action, .testimonials-index-index .more-button a{ display:inline-block;background:#1e5c40;border:0;border-radius:8px;color:#fff; font:700 15.5px/1 var(--eoc-text);padding:14px 30px;text-transform:none; letter-spacing:0;text-decoration:none} .testimonials-index-index .more-button .action:hover, .testimonials-index-index .more-button a:hover{background:#174a33;color:#fff;text-decoration:none} /* the green link rule (0,4,1) outguns any class chain here; scoped belt, same as .eoc-btn */ .testimonials-index-index .more-button a{color:#fff !important;background:#1e5c40 !important} .testimonials-index-index .more-button a:hover{background:#174a33 !important} /* ============ category / product-list pages (2026-08 kit restyle) ============ Scope: .page-products (category views + search results). CSS only — the Niks layered-nav markup and behaviour are untouched, this restyles what renders. */ .page-products .category-description{font-family:Inter,'Open Sans',sans-serif;font-size:17px;line-height:1.55;color:#1b1c1d;max-width:64em} /* facet sidebar: Inter kickers on hairline rows instead of Oswald caps */ .page-products .block.filter .filter-title strong, .page-products .filter-current-subtitle, .page-products .block-subtitle.filter-subtitle, .page-products .filter-options-title{font-family:Inter,'Open Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5d6360} .page-products .filter-options-item{border-bottom:1px solid #e2e6e4;padding:12px 0} .page-products .filter-options-title{padding:2px 22px 2px 0;cursor:pointer;position:relative} .page-products .filter-options-title:hover{color:#1e5c40} /* Argento's chevron is a FontAwesome glyph that fails to render (Mark: "nothing to indicate click-to-expand") — replace with a pure-CSS chevron, rotate when open */ .page-products .filter-options-title:after{content:'' !important;position:absolute;right:6px;top:50%; width:8px;height:8px;border-right:2px solid #5d6360;border-bottom:2px solid #5d6360; transform:translateY(-70%) rotate(45deg);transition:transform .15s ease;font-family:inherit} .page-products .filter-options-title:hover:after{border-color:#1e5c40} .page-products .filter-options-item.active .filter-options-title:after, .page-products .filter-options-title[aria-expanded=true]:after{transform:translateY(-30%) rotate(225deg)} .page-products .filter-options-content{font-family:Inter,'Open Sans',sans-serif;font-size:14.5px} .page-products .filter-count-label,.page-products .filter-options-content .count{color:#5d6360} .page-products .filter-current .item{font-family:Inter,'Open Sans',sans-serif;font-size:14px} /* toolbar */ .page-products .toolbar-amount{font-family:Inter,'Open Sans',sans-serif;font-size:14px;color:#5d6360} .page-products .toolbar select, .page-products .sorter-options{font-family:Inter,'Open Sans',sans-serif;font-size:14px;color:#1b1c1d;background-color:#fff;border:1px solid #e2e6e4;border-radius:8px;padding:6px 10px;height:auto} .page-products .sorter-label{font-family:Inter,'Open Sans',sans-serif;font-size:14px;color:#5d6360} /* product cards: kit card look */ /* Argento sets the card border (inline critical CSS + styles-l, (0,5,0)) and won the border contest in testing even against higher specificity — belt it, same pattern as the button fixes. Height 380px is Argento's; auto lets cards breathe. */ .page-products .products-grid:not(.swiper-container) .product-items .product-item.product-item{background:#fff;border:1px solid #e2e6e4 !important;border-radius:14px;padding:16px 14px;height:auto;min-height:380px;transition:border-color .15s ease,box-shadow .15s ease} .page-products .products-grid:not(.swiper-container) .product-items .product-item.product-item:hover{border-color:#a9c3b6 !important;box-shadow:0 6px 18px rgba(27,28,29,.07)} .page-products .product-item-name{margin:10px 0 4px} .page-products .product-item-name .product-item-link, .page-products .product-item-link{font-family:Inter,'Open Sans',sans-serif;font-size:15.5px;font-weight:600;color:#1b1c1d;text-decoration:none} .page-products .product-item-name .product-item-link:hover, .page-products .product-item-link:hover{color:#1e5c40;text-decoration:none} .page-products .price-box .price{font-family:Inter,'Open Sans',sans-serif;font-size:16px;font-weight:700;color:#174a33} .page-products .old-price .price{color:#5d6360;font-weight:400} /* pagination: quiet chips, green current page */ .page-products .pages .item{font-family:Inter,'Open Sans',sans-serif;font-size:14px} .page-products .pages a.page, .page-products .pages strong.page, .page-products .pages .action{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border:1px solid #e2e6e4;border-radius:8px;background:#fff;color:#1b1c1d;box-shadow:none} .page-products .pages a.page:hover, .page-products .pages .action:hover{border-color:#1e5c40;color:#1e5c40;background:#fff} .page-products .pages strong.page{background:#1e5c40;border-color:#1e5c40;color:#fff} @media (max-width:639px){ .page-products .products-grid .product-item{padding:12px 10px;border-radius:12px} }.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 10px 0 0 0; padding: 0.8em .5em 0.8em 1em; font-size: 15px; font-weight: bold; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .faq-accordion .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; } .faq-accordion .ui-widget-content { border: 1px solid #dddddd; /* background: #ffffff; */ /* color: #333333; */ } .faq-accordion .ui-widget-content a { /* color: #333333; */ } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #c5c5c5; /* background: #f6f6f6; */ font-weight: normal; /* color: #454545; */ } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { /* color: #2b2b2b; */ text-decoration: none; } .ui-visual-focus { /* box-shadow: 0 0 3px 1px rgb(94, 158, 214); */ } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { /* border: 1px solid #003eff; */ /* background: #007fff; */ font-weight: normal; /* color: #ffffff; */ } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { /* color: #ffffff; */ text-decoration: none; } .faq-content { float: left; width: 100%; } .group-title{ margin: 25px 0; font-size: 18px; text-transform: uppercase; line-height: 1.5; padding-bottom: 0.25em; border-bottom: 1px solid #ddd; width: 100%; /* color: #198dd3; */ font-weight: bold; } .group-title i { float: left; width: 2.15em; border-bottom: 1px solid #b55; position: absolute; bottom: -1px; z-index: 9999; border-bottom-color: #198dd3; } .faq-groups { width: 100%; float: left; margin-bottom: 30px; } .faq-group { float: left; } .faq-group-image { border: 1px solid #1979C3; padding: 20px; margin-right: 25px; } img.group-image { height: 100px; width: 100px; } .faq-groupname { font-size: 15px; font-weight: 700; text-align: center; text-transform: uppercase; margin: 10px 25px 0 0; } .faq-group a.group-link:hover { /* color: #ff5501; */ text-decoration: none; } .faq-group .faq-group-image:hover { /* border-color: #ff5501; */ } .faq-content .ui-accordion-header:hover { /* background-color: #1979c3; * color: #ffffff; */ } .faq-group:hover{ /* border-color: #ff5501; */ } .faq-collection { margin-bottom: 30px; float: left; width: 100%; } .ui-accordion .ui-state-default:after { content: '\f107'; font-family: 'FontAwesome'; float: right; } .ui-accordion .ui-accordion-header-active:after { content: '\f106'; font-family: 'FontAwesome'; }