/* Estimator: same palette and type as the main site. */
:root { --cream: #fbf9f5; --cream-soft: #f7f4ec; --card: #f1efe2; --white: #fff; --green: #0b3d2e; --green-deep: #082920; --green-soft: #e3ebe5; --yellow: #f5d44a; --sun: #ffe066; --ink: #141414; --soft: #55554e; --faint: #7d7a6c; --line: #e6e1d3; --field-h: 48px;
  --z-header: 900; --z-modal: 1100; --z-popover: 1200; --z-toast: 1300; --z-lightbox: 1400; --font-display: 'Archivo', Arial, sans-serif; --font-body: 'Inter', Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 15px/1.6 var(--font-body); color: var(--ink); background: var(--cream); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; }
a { color: inherit; text-decoration: none; } p { margin: 0 0 1em; } img { max-width: 100%; display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; background: var(--green); color: #fff; padding: 10px 16px; z-index: 2000; } .skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.muted { color: var(--soft); } .opt { font-weight: 400; color: var(--faint); } [hidden] { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 600 14px var(--font-body); cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { background: var(--ink); color: #fff; } .btn--primary { background: var(--ink); color: #fff; } .btn--primary:hover { background: var(--green); border-color: var(--green); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 13px; } .btn--block { width: 100%; min-height: 50px; } .btn:disabled { opacity: .6; cursor: wait; }
.eh { position: sticky; top: 0; z-index: var(--z-header); background: rgba(251, 249, 245, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.eh__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.brand { display: inline-flex; gap: 9px; align-items: center; font: 700 21px var(--font-display); letter-spacing: -.02em; }
.eh__nav { display: flex; gap: 22px; align-items: center; font-size: 14px; font-weight: 500; } .eh__nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.hero { padding: 44px 24px 22px; }
.eyebrow { display: inline-block; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -.03em; max-width: 16ch; }
.lead { font-size: 17px; color: var(--soft); max-width: 62ch; }
.est { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; padding-bottom: 20px; }
.est__form { display: grid; gap: 16px; min-width: 0; }
.ecard { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; margin: 0; min-width: 0; }
.ecard legend { display: flex; align-items: center; gap: 10px; font: 700 18px var(--font-display); padding: 0; float: left; width: 100%; margin-bottom: 16px; } .ecard legend + * { clear: both; }
.n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; }
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.style { position: relative; display: grid; gap: 2px; padding: 10px 10px 14px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--cream-soft); transition: .15s; text-align: center; }
.style:hover { border-color: #bdb7a3; } .style.is-on { border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(11, 61, 46, .12); }
.style:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.style__img { background: #dbe7de; border-radius: 12px; display: grid; place-items: center; aspect-ratio: 1.2; margin-bottom: 8px; } .style__img img { width: 62%; height: 82%; object-fit: contain; }
.style__t { font-weight: 600; font-size: 14px; } .style__s { font-size: 12px; color: var(--faint); line-height: 1.35; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .row--between { justify-content: space-between; margin-bottom: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f { display: grid; gap: 7px; margin-bottom: 14px; min-width: 0; align-content: start; } .f label, .lbl { font-size: 13px; font-weight: 600; }
.f input[type=text], .f input[type=email], .f input[type=tel], .f textarea { width: 100%; min-height: var(--field-h); padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 61, 46, .14); } .f [aria-invalid="true"] { border-color: #b3261e; }
.hint { font-size: 12.5px; color: var(--faint); margin: 0 0 6px; }
.err { color: #b3261e; font-size: 12.5px; margin: 6px 0 0; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: 500 13px var(--font-body); color: var(--ink); cursor: pointer; transition: .12s; }
.chip:hover { border-color: var(--green); } .chip.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.chip:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
#qtyChips { margin-top: 10px; } #covOut { font-weight: 700; color: var(--green); margin-left: 6px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: var(--line); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); margin-top: -8px; cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--green); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.speeds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.speed { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; } .speed.is-on { border-color: var(--green); background: #f4f8f5; }
.speed span { display: grid; line-height: 1.3; } .speed small { color: var(--faint); font-size: 12px; min-height: 16px; }
.switchrow { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; }
.est__out { position: sticky; top: 86px; min-width: 0; }
.out { background: var(--green); color: #fff; border-radius: 26px; padding: 28px; transition: opacity .15s; } .out.is-loading { opacity: .65; }
.out__k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 0 0 4px; }
.out__unit { font: 800 56px/1 var(--font-display); letter-spacing: -.03em; margin: 0 0 6px; } .out__sub { opacity: .85; margin-bottom: 18px; }
.out__bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .18); gap: 2px; }
.legend { list-style: none; margin: 12px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; opacity: .9; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .legend b { opacity: .7; font-weight: 500; }
.out__rows { margin: 0; display: grid; } .out__rows div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; } .out__rows dt { opacity: .8; } .out__rows dd { margin: 0; font-weight: 600; text-align: right; }
.out__total { font-size: 17px !important; } .out__total dd { font: 700 22px var(--font-display); }
.out__ship { margin: 14px 0 6px; font-size: 13.5px; } .out__next { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; }
.out__btns { display: grid; gap: 10px; margin: 18px 0; } .out__btns .row { justify-content: center; }
.out .btn--primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); } .out .btn--primary:hover { background: #fff; border-color: #fff; }
.out .btn:not(.btn--primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); } .out .btn:not(.btn--primary):hover { background: #fff; color: var(--ink); }
.out__more summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 8px 0; } .out__more .hint { color: rgba(255, 255, 255, .7); margin-top: 8px; }
.out__fine { font-size: 12px; opacity: .7; margin: 12px 0 0; } .out__err { background: #fbe9e7; color: #8c1d17; border-radius: 14px; padding: 14px 18px; margin-top: 12px; }
.sec { padding-top: 48px; } .sec h2 { font-size: clamp(24px, 3vw, 34px); } .sec--two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.chartwrap { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; margin: 16px 0; } .chartwrap svg { width: 100%; height: auto; display: block; font-family: var(--font-body); }
.tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; } .ptable { width: 100%; border-collapse: collapse; min-width: 460px; }
.ptable th, .ptable td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); } .ptable thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: var(--cream-soft); } .ptable tbody tr:last-child > * { border-bottom: 0; } .ptable tr.is-on > * { background: #f1f7f3; font-weight: 600; }
.tick { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .tick li { display: flex; gap: 12px; color: var(--soft); } .tick li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m4 8.5 2.8 2.8L12 5'/></svg>") center / 12px no-repeat; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 10px; } .faq summary { cursor: pointer; font-weight: 600; padding: 16px 20px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq details p { padding: 0 20px 18px; margin: 0; color: var(--soft); }
.ef { margin-top: 60px; background: var(--green); color: rgba(255, 255, 255, .8); font-size: 13px; } .ef__in { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 24px; } .ef a:hover { text-decoration: underline; }
.dlg-back { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(12, 19, 15, .55); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.dlg { background: #fff; border-radius: 24px; padding: 28px; width: min(560px, 100%); max-height: 100%; overflow-y: auto; } .dlg h2 { font-size: 22px; }
.dlg__row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .hp { position: absolute; left: -9999px; }
.ui-select__btn, .ui-stepper { background: #fff; }
@media (max-width: 1020px) { .est { grid-template-columns: 1fr; } .est__out { position: static; order: -1; } .sec--two { grid-template-columns: 1fr; gap: 28px; } .out__unit { font-size: 46px; } }
@media (max-width: 760px) { .wrap { padding: 0 16px; } .hero { padding: 30px 16px 14px; } .eh__nav a:not(.btn) { display: none; } .grid3, .grid2, .speeds { grid-template-columns: 1fr; } .ecard { padding: 18px; border-radius: 18px; } .out { padding: 22px; border-radius: 20px; } .styles { grid-template-columns: repeat(2, 1fr); } .dlg { padding: 20px; } .dlg__row .btn { flex: 1; } }
@media (min-width: 521px) and (max-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
@media print { .eh, .ef, .est__form, .out__btns, .skip, .faq, .sec--two, .dlg-back { display: none !important; } .est { display: block; } .est__out { position: static; } .out { background: #fff; color: #000; border: 1px solid #000; } .out__rows div { border-color: #ccc; } }