/* 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 {
	width:590px !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;
}

/* https://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), .footer.content a, a.action.view {
    color: #1e5c40;
}
.page-main a:not(.action):not(.btn):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(../fonts/fraunces-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../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;
  -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:1080px;margin:0 auto;padding:0 24px}
.eoc-narrow{max-width:880px}

.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:40px;margin:0 0 12px}
.eoc-lead{font-size:18px;color:var(--eoc-muted);max-width:56ch;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:26px;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 var(--eoc-rule);border-radius:12px;overflow:hidden;background:#fff}
.eoc-acc details+details{border-top:1px solid var(--eoc-rule)}
.eoc-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;
  align-items:center;padding:16px 20px;font-weight:600;font-size:16px}
.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 20px 18px;color:var(--eoc-muted)}
.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:14.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:15px;max-width:62ch}

.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:12px 16px;border:0;border-top:1px solid var(--eoc-rule);font-size:15px}
.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:16px 20px;
  background:var(--eoc-green-tint);border:1px solid #cfe0d7;font-size:15px}
.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{background:var(--eoc-green);color:#fff}
.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:13.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 .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-cards--2,.eoc-cards--3,.eoc-cards--4{grid-template-columns:1fr}
  .eoc-hero h1{font-size:27px}
}
/* ============================== 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)}