.ecommerce-page { background: #f8f8f3; }
.ecommerce-page h2 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.17; }
.commerce-section { padding-block: clamp(64px, 7vw, 108px); }
.commerce-hero { background: #193b2d; color: #fff; overflow: hidden; padding-block: clamp(72px, 8vw, 125px); }
.commerce-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(42px, 6vw, 90px); align-items: center; }
.commerce-kicker { margin: 0 0 22px; color: #f4a66a; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.commerce-hero h1 { color: #fff; font-size: clamp(43px, 4.5vw, 70px); line-height: 1.14; }
.commerce-hero h1 em { color: #f1a769; font-style: normal; }
.commerce-hero-copy > p:not(.commerce-kicker):not(.commerce-price-line) { color: #dce8db; font-size: 18px; line-height: 1.7; }
.commerce-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.commerce-outline { background: transparent; border-color: #9db5a3; color: #fff; }
.commerce-outline:hover { background: #2d5740; }
.commerce-price-line { margin: 22px 0 0; color: #dce8db; font-size: 14px; }
.commerce-price-line strong { color: #fff; }
.commerce-hero-art { position: relative; padding: 18px 25px 55px 0; }
.commerce-hero-art::before { content: ''; position: absolute; inset: 1% -6% 8% 9%; border: 1px solid #749a7d; border-radius: 50%; transform: rotate(-16deg); }
.commerce-screen { position: relative; margin: 0; border: 8px solid #f4efdf; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px #0b211b77; transform: rotate(-3deg); background: #f4efdf; }
.commerce-screen img { display: block; width: 100%; height: auto; }
.commerce-window-bar { height: 27px; background: #f4efdf; display: flex; align-items: center; gap: 6px; padding: 0 8px; color: #385a43; font-size: 10px; }
.commerce-window-bar span { width: 6px; height: 6px; border-radius: 50%; background: #9eae9b; }
.commerce-window-bar b { margin: auto; font-weight: 400; }
.commerce-order-slip { position: absolute; right: -4%; bottom: 0; width: min(48%, 230px); padding: 19px 22px; background: #f6e6c4; color: #1c3829; border: 1px solid #d4bd91; box-shadow: 0 15px 35px #07191055; transform: rotate(5deg); }
.commerce-order-slip > span:not(.commerce-order-stamp), .commerce-order-slip strong { display: block; padding: 7px 0; border-bottom: 1px dashed #aa9a7a; font-size: 12px; }
.commerce-order-slip strong { font-size: 14px; border: 0; }
.commerce-order-stamp { color: #9a4a2b; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.commerce-chapters { background: #fff; border-bottom: 1px solid #d7ded3; }
.commerce-chapters .wrap { display: flex; flex-wrap: wrap; gap: 12px 36px; padding-block: 16px; }
.commerce-chapters a { font-size: 13px; font-weight: 700; border-bottom: 1px solid transparent; }
.commerce-chapters a:hover { border-color: currentColor; }
.commerce-real { background: #fffdf6; }
.commerce-real-grid, .commerce-delivery-grid, .commerce-control-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.commerce-real-copy p, .commerce-delivery-copy p, .commerce-control-copy p { color: var(--body); font-size: 17px; }
.commerce-real-image { margin: 0; padding: 8px; background: #e1e7d9; box-shadow: 14px 14px 0 #d4dec9; }
.commerce-real-image img { display: block; width: 100%; height: auto; }
.commerce-real-image figcaption { padding: 12px 10px 4px; color: #395b43; font-size: 12px; }
.commerce-flow { background: #e5eadf; }
.commerce-flow-head { display: grid; grid-template-columns: 1fr .75fr; gap: 85px; align-items: end; margin-bottom: 45px; }
.commerce-flow-head p { color: var(--body); font-size: 17px; margin-bottom: 5px; }
.commerce-flow-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; }
.commerce-flow-grid li { position: relative; min-height: 295px; padding: 25px; background: #fffdf7; border-top: 4px solid #e59b5b; }
.commerce-flow-grid li:nth-child(2) { border-color: #668269; }.commerce-flow-grid li:nth-child(3) { border-color: #a73e2a; }.commerce-flow-grid li:nth-child(4) { border-color: #193b2d; }
.commerce-flow-grid li > span { display: block; color: #8c9a85; font-size: 13px; font-weight: 700; margin-bottom: 26px; }
.commerce-flow-grid li > svg { width: 35px; height: 35px; color: #a34a30; margin-bottom: 13px; }
.commerce-flow-grid h3 { font: 400 23px/1.28 var(--serif); margin: 0 0 11px; }
.commerce-flow-grid p { margin: 0; color: var(--body); font-size: 14px; }
.commerce-delivery { background: #9c3228; color: #fff; }
.commerce-delivery-grid { grid-template-columns: 1.16fr .84fr; }
.commerce-delivery-copy h2 { color: #fff; }
.commerce-delivery-copy p { color: #fae8da; }
.commerce-delivery-visual { position: relative; padding: 0 26px 42px 0; }
.commerce-checkout-card { max-width: 660px; padding: clamp(24px, 4vw, 42px); color: #203b2d; background: #fffaf0; border: 7px solid #e9c089; box-shadow: 0 18px 38px #511b1b66; transform: rotate(-3deg); }
.commerce-checkout-head { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid #d9d7c8; color: #6d7968; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.commerce-checkout-card h3 { margin: 23px 0; font: 400 clamp(24px, 2.6vw, 35px)/1.2 var(--serif); }
.commerce-checkout-choice { display: flex; align-items: center; gap: 16px; padding: 17px; margin-top: 11px; border: 1px solid #cfdbcf; border-radius: 5px; background: #fff; }
.commerce-checkout-choice.is-selected { border-color: #537663; background: #eef3e9; }
.commerce-checkout-choice > svg { width: 28px; height: 28px; flex: 0 0 auto; color: #a34a30; }
.commerce-checkout-choice > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.commerce-checkout-choice strong { font-size: 15px; }
.commerce-checkout-choice small { color: #526657; font-size: 12px; }
.commerce-choice-mark { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid #78907a; border-radius: 50%; }
.commerce-checkout-choice.is-selected .commerce-choice-mark { border: 5px solid #295540; }
.commerce-checkout-card > p { margin: 20px 0 0; color: #566858; font-size: 12px; }
.commerce-delivery-tag { position: absolute; right: 0; bottom: 0; display: flex; gap: 11px; align-items: center; padding: 15px 18px; color: #213a2c; background: #fae6ba; box-shadow: 0 12px 25px #4d15153d; transform: rotate(4deg); font-size: 13px; line-height: 1.4; }
.commerce-delivery-tag svg { width: 26px; height: 26px; }
.commerce-control { background: #fffdf6; }
.commerce-control-grid { grid-template-columns: .85fr 1.15fr; }
.commerce-control-board { background: #f3f6ee; border: 1px solid #cbd7c8; border-radius: 8px; overflow: hidden; box-shadow: 18px 18px 0 #e2ebd9; }
.commerce-board-head { display: flex; align-items: center; gap: 13px; padding: 18px 25px; color: #fff; background: #193b2d; }
.commerce-board-head span { font: 400 18px var(--serif); color: #f2a96a; }.commerce-board-head strong { font-size: 12px; font-weight: 400; }.commerce-board-head svg { margin-left: auto; width: 19px; }
.commerce-board-row { display: grid; grid-template-columns: 30px 1fr 20px; gap: 15px; align-items: center; margin: 0 24px; padding: 22px 0; border-bottom: 1px solid #cbd7c8; }
.commerce-board-row > svg:first-child { width: 25px; height: 25px; color: #a34a30; }.commerce-board-row > svg:last-child { width: 18px; color: #799384; }
.commerce-board-row strong, .commerce-board-row small { display: block; }.commerce-board-row strong { font-size: 15px; }.commerce-board-row small { color: var(--body); font-size: 12px; }
.commerce-control-board > p { padding: 10px 24px 22px; margin: 0; color: #687d69; font-size: 11px; }
.commerce-plan { background: #e9d5ae; }
.commerce-plan-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 90px; align-items: center; }
.commerce-plan-grid > div:first-child > p { color: #415243; font-size: 17px; }
.commerce-plan-card { padding: 32px; background: #193b2d; color: #fff; border-radius: 7px; box-shadow: 14px 14px 0 #c29b68; }
.commerce-plan-card > p:first-child { color: #f2aa69; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.commerce-plan-card > strong { display: block; font: 400 clamp(40px, 5vw, 68px)/1.1 var(--serif); }.commerce-plan-card > strong span { font: 400 16px var(--sans); }
.commerce-plan-card > p { color: #dbe7d8; }.commerce-plan-card .button { margin: 13px 0 20px; }.commerce-plan-card small { display: block; color: #b6cbbb; font-size: 11px; }
.commerce-faq { background: #fbfcf8; }.commerce-final { background: #193b2d; }.ecommerce-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1050px) { .commerce-hero-grid { gap: 40px; }.commerce-flow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.commerce-flow-grid li { min-height: 250px; }.commerce-real-grid, .commerce-delivery-grid, .commerce-control-grid, .commerce-plan-grid { gap: 45px; } }
@media (max-width: 760px) { .commerce-hero { padding-block: 60px 45px; }.commerce-hero-grid, .commerce-real-grid, .commerce-delivery-grid, .commerce-control-grid, .commerce-plan-grid, .commerce-flow-head, .commerce-faq .faq-layout, .commerce-final .final-layout { grid-template-columns: 1fr; gap: 28px; }.commerce-hero h1 { font-size: clamp(39px, 8vw, 55px); }.commerce-hero-art { padding: 20px 20px 33px 0; }.commerce-order-slip { width: 45%; padding: 11px 13px; }.commerce-order-slip > span:not(.commerce-order-stamp), .commerce-order-slip strong { font-size: 9px; padding: 4px 0; }.commerce-order-stamp { font-size: 8px; }.commerce-real-image { margin: 10px 14px 0 0; }.commerce-delivery-visual { grid-row: 1; }.commerce-control-board { margin: 8px 14px 0 0; }.commerce-plan-card { margin-right: 14px; }.commerce-final .final-layout > .button { justify-self: start; } }
@media (max-width: 480px) { .commerce-chapters .wrap { gap: 7px 16px; }.commerce-chapters a { font-size: 11px; }.commerce-flow-grid { grid-template-columns: 1fr; }.commerce-flow-grid li { min-height: 0; }.commerce-window-bar b { font-size: 8px; }.commerce-hero-copy > p:not(.commerce-kicker):not(.commerce-price-line) { font-size: 16px; } }