:root {
  --ink: #3b3d40;
  --blue: #3273f6;
  --primary: #0e6fff;
  --button-blue: #125bcb;
  --slate: #92979e;
  --muted: #f3f3f4;
  --white: #fff;
  --footer: #1f1f1f;
  --body: #494d54;
  --edge: clamp(18px,5.21vw,75px);
  --space: clamp(45px,5.21vw,75px);
  --radius: 25px;
  --ease: cubic-bezier(.2,.7,.3,1);
}
* { box-sizing: border-box }
html { scroll-padding-top: 105px }
body { margin: 0; color: var(--ink); font-family: "Avenir Next", Avenir, "Century Gothic", Arial, sans-serif; font-size: 16px; line-height: 1.55 }
body:has(dialog[open]) { overflow: hidden }
img { display: block; width: 100%; height: auto }
svg { flex-shrink: 0; vertical-align: middle }
a { color: inherit; text-underline-offset: .2em }
button, input, textarea { font: inherit }
button, a { -webkit-tap-highlight-color: transparent }
button { cursor: pointer; color: inherit }
button:disabled { cursor: default; opacity: .45 }
:focus-visible { outline: 3px solid var(--button-blue); outline-offset: 4px }
[hidden] { display: none !important }
h1,h2,h3,p { margin: 0 }
h1,h2,h3 { line-height: 1.14 }
p + p { margin-top: .85em }
.wrap { width: min(calc(100% - 2 * var(--edge)),1290px); margin-inline: auto }
.band { padding-block: var(--space) }
.muted { background: var(--muted) }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 15px; background: white; padding: 12px; transform: translateY(-170%) }
.skip-link:focus { transform: none }
.site-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; padding-top: clamp(15px,1.74vw,25px) }
.site-header.scrolled { position: fixed; pointer-events: none }
.nav-shell { position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 11px 9px clamp(14px,1.74vw,25px); border-radius: 50px; background: rgba(255,255,255,.76); backdrop-filter: blur(13px) }
.scrolled .nav-shell { box-shadow: 0 4px 24px #20263120; background: rgba(255,255,255,.94) }
.brand { display: inline-flex; flex-shrink: 0; gap: 8px; align-items: center; text-decoration: none; font-weight: 700; font-size: clamp(18px,1.7vw,25px); letter-spacing: -.07em; line-height: 1.1 }
.brand i { font-weight: 600 }
.brand-mark { display: grid; place-items: center; width: 1.24em; height: 1.24em; border-radius: 35%; background: var(--blue); color: white; font-size: .92em; font-weight: 850; font-style: italic; letter-spacing: -.09em; padding-right: .12em }
#navigation { display: flex; align-items: center; gap: 2px }
#navigation a, .nav-phone a, .basket-button { text-decoration: none; font-size: 14px; font-weight: 600 }
#navigation a { padding: 9px clamp(8px,1.1vw,16px); border-radius: 50px }
#navigation .mobile-phone { display:none }
#navigation a:hover, body:not(.policy-page) #navigation a:first-child { background: var(--ink); color: white }
.nav-actions { display: flex; align-items: center; gap: 16px }
.basket-button, .menu-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50px; min-height: 44px }
.basket-button { gap: 7px; padding: 10px 17px; background: var(--button-blue); color: white; font-variant-numeric: tabular-nums }
.menu-button, .icon-button { width: 44px; background: var(--muted) }
.menu-button { display: none }
.hero { position: relative; isolation: isolate; background: var(--slate); overflow: hidden; padding-top: clamp(132px,12.2vw,176px); padding-bottom: clamp(38px,3.55vw,51px) }
.hero-photo { position: absolute; z-index: -1; inset: 0 }
.hero-photo img { height: 100%; object-fit: cover; object-position: center }
.hero-layout { display: flex; align-items: end; gap: clamp(20px,3.48vw,50px) }
.hero-panel { display: flex; flex-direction: column; justify-content: space-between; width: min(60.2%,776px); min-height: clamp(490px,45.5vw,655px); padding: clamp(38px,5.21vw,75px); gap: 25px; background: rgba(255,255,255,.74); border: 1px solid #ffffff50; backdrop-filter: blur(12.5px); border-radius: var(--radius) }
.hero-panel h1 { font-size: clamp(40px,3.34vw,48px); font-weight: 680; letter-spacing: -.035em; max-width: 18ch }
.hero-panel h1 em { color: var(--button-blue); font-style: normal }
.hero-panel p, .lead { font-size: clamp(18px,1.67vw,24px); line-height: 1.5; letter-spacing: -.025em }
.hero-panel p { margin-top: 14px; max-width: 38ch }
.hero-buttons,.contact-links { display: flex; flex-wrap: wrap; gap: 12px }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; min-height: 44px; border: 0; border-radius: 50px; padding: 12px 24px; font-weight: 600; font-size: 15px; text-decoration: none; line-height: 1.25; transition: transform .25s var(--ease) }
.button:hover { transform: translateY(-2px) }
.button.primary { color: white; background: var(--button-blue) }
.button.light { color: var(--ink); background: var(--white) }
.button.dark { background: var(--ink); color: white }
.hero-facts { display: grid; grid-template-columns: repeat(3,1fr); padding: 21px 10px; background: rgba(146,151,158,.45); border-radius: 22px }
.hero-facts div { display: grid; text-align: center; align-content: center }
.hero-facts div + div { border-left: 1px solid #fff }
.hero-facts strong { font-size: clamp(25px,2.92vw,42px); font-weight: 550; line-height: 1.15; letter-spacing: -.04em }
.hero-facts span { font-size: 13px; font-weight: 550 }
.hero-chips { display: flex; flex: 1; flex-wrap: wrap; gap: 10px; align-content: end }
.hero-chips a,.image-label { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.9); padding: 6px 11px 6px 7px; border-radius: 25px; backdrop-filter: blur(12px); background: #ffffffc9; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none }
.hero-chips svg { width: 25px; height: 25px; padding: 5px; border-radius: 100%; background: #fff }
.split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(25px,3.48vw,50px); align-items: center }
.section-title,.dialog-heading h2,.policy h1 { font-size: clamp(32px,2.92vw,42px); font-weight: 550; letter-spacing: -.045em }
.section-title::after { display: block; content: ""; width: 85px; height: 7px; margin: 15px 0 20px; background: var(--blue); border-radius: 2px }
.editorial-image,.trade-image,.delivery-image,.product-image,.contact-scene { overflow: hidden; background: var(--slate) }
.editorial-image { border-radius: var(--radius); aspect-ratio: 620/355 }
.editorial-image img,.trade-image img,.delivery-image img,.contact-scene img { width: 100%; height: 100%; object-fit: cover }
.trade-image { aspect-ratio: 620/488 }
.split p + .button { margin-top: 22px }
.range { background: var(--slate); color: #161a20 }
.range .section-title { color: white }
.range-grid { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(25px,3.48vw,50px); align-items: start; margin-top: 45px }
.range-list { display: grid; gap: 14px }
.range-option { display: flex; align-items: center; gap: 15px; min-height: 52px; border: 1px solid #ffffffbd; border-radius: 50px; background: #ffffff9e; padding: 8px 15px 8px 10px; text-decoration: none; font-weight: 600 }
.range-option > svg { width: 32px; height: 32px; padding: 6px; border: 1px solid #72787e; border-radius: 50% }
.switch { background: #777e87; margin-left: auto; width: 42px; border-radius: 20px; padding: 3px }
.switch::after { content: ""; display: block; background: white; border-radius: 100%; width: 17px; height: 17px; transition: transform .25s var(--ease) }
.selected .switch { background: var(--button-blue) }
.selected .switch::after { transform: translateX(19px) }
.range-panel { padding: clamp(22px,2.6vw,38px); background: #ffffffa6; border: 1px solid white; border-radius: var(--radius) }
.range-panel h3,.product h3,.delivery-card h3,.checkout h3 { font-size: 24px; font-weight: 600; letter-spacing: -.03em }
.range-panel h3::after { content:""; display:block; width:50px; height:3px; background:white; margin:12px 0 }
.range-panel a { display: inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:650 }
.section-intro { max-width: 67ch; color: var(--body) }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 }
.filters button { padding: 8px 17px; background:white; border:1px solid #c5c9ce; border-radius:25px; min-height:42px }
.filters [aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:white }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.7vw,25px) }
.product,.delivery-card { display:flex; flex-direction:column; background:white; border-radius:var(--radius); overflow:hidden }
.product-image,.delivery-image { position:relative }
.product-image { aspect-ratio:1 }
.product-image img { height:100%; object-fit:contain; transition:transform .4s var(--ease) }
.product:hover .product-image img { transform:scale(1.025) }
.image-label { position:absolute; top:12px; right:12px; padding:5px 12px; font-size:12px }
.product-body { flex:1; display:flex; flex-direction:column; padding:clamp(15px,1.4vw,21px) }
.product-body p { margin:10px 0; line-height:1.45; color:var(--body) }
.specs { list-style:none; padding:0; margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--body) }
.specs li + li { border-top:1px solid #e5e7e9; padding-top:3px; margin-top:3px }
.product-buy { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:auto }
.product-buy strong { font-size:23px; letter-spacing:-.045em }
.add { font-size:14px; padding:10px 15px; gap:5px }
.add svg { width:16px }
.delivery-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.48vw,50px); margin-top:40px }
.delivery-image { aspect-ratio:620/410 }
.delivery-card > div:last-child { padding:25px; display:flex; flex-direction:column; flex:1; align-items:flex-start }
.delivery-card h3 + p { margin-top:12px }
.delivery-card .button { align-self:end; margin-top:auto }
.delivery-card p:last-of-type { margin-bottom:18px }
.contact-details { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin:22px 0 30px }
address { font-style:normal }
.contact-scene { position:relative; height:clamp(175px,15vw,235px); border-radius:35px }
.contact-links { position:absolute; top:0; left:0; background:white; padding:0 13px 13px 0; border-radius:0 0 25px 0 }
.site-footer { background:var(--footer); color:white; border-top:12px solid var(--slate); padding:var(--space) 0 }
.footer-grid { display:grid; grid-template-columns:1.15fr .85fr 1fr 1.12fr; gap:clamp(20px,3vw,48px) }
.footer-grid h2 { font-size:16px; font-weight:650; margin-bottom:15px }
.footer-grid p,.footer-grid a:not(.brand) { font-size:14px; color:#eceef0 }
.footer-grid a:not(.brand) { display:block; width:fit-content; text-decoration:none; margin:6px 0 }
.footer-grid a:hover { text-decoration:underline }
.footer-grid .brand { margin-bottom:14px }
dialog { border:0; color:var(--ink); padding:26px; background:white; box-shadow:0 10px 80px #1e263330; overflow-y:auto }
dialog::backdrop { background:#1a233480; backdrop-filter:blur(3px) }
.drawer { width:min(440px,100%); max-width:100%; height:100dvh; max-height:100dvh; margin:0 0 0 auto }
.drawer[open] { display:flex; flex-direction:column; animation:slide-in .25s var(--ease) }
@keyframes slide-in { from { transform:translateX(100%); opacity:.5 } to { transform:translateX(0); opacity:1 } }
.dialog-heading { display:flex; gap:15px; align-items:center; justify-content:space-between; margin-bottom:24px }
.dialog-heading h2 { font-size:32px }
.cart-line { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 14px; padding:18px 0; border-bottom:1px solid #d7dadd }
.cart-line h3 { font-size:18px }
.cart-line p { font-size:14px }
.quantity { display:inline-flex; align-items:center; gap:8px }
.quantity button { border:1px solid #b4bac2; border-radius:50%; width:40px; height:40px; background:var(--muted) }
.text-button { background:none; border:0; padding:8px 0; text-decoration:underline }
.basket-bottom { margin-top:auto; padding-top:28px }
.basket-bottom .button { width:100% }
.total-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:20px; margin:16px 0 }
.checkout { width:min(850px,100%); max-height:92dvh; border-radius:var(--radius); padding:clamp(18px,3.2vw,42px) }
.checkout-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start; margin:15px 0 }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:20px }
.field { display:grid; align-content:start; gap:4px; font-size:14px; font-weight:600 }
.field.full { grid-column:1/-1 }
.field input,.field textarea { min-width:0; width:100%; background:#fff; padding:10px; border:1px solid #818890; border-radius:8px }
.field small:empty,.payment small:empty { display:none }
.field small,.payment small { color:#9d2434; font-size:13px; line-height:1.4 }
input[aria-invalid="true"] { border-color:#9d2434 }
.summary { background:var(--muted); padding:20px; border-radius:15px }
.summary ul { list-style:none; padding:0; line-height:1.7 }
.summary p,.privacy-note { font-size:14px }
.payment { border:1px solid #cbd0d5; border-radius:12px; margin:15px 0; padding:8px 14px 14px }
.payment legend { font-weight:650 }
.payment label { display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 0 }
.payment small { display:block }
.privacy-note { margin:15px 0 }
#confirmation dl { background:var(--muted); border-radius:15px; padding:20px }
#confirmation dd { margin:0 0 10px; font-weight:650 }
#confirmation p { margin-top:12px }
.toast { position:fixed; z-index:4; bottom:24px; left:50%; transform:translate(-50%,12px); opacity:0; background:var(--ink); color:white; border-radius:36px; padding:12px 22px; pointer-events:none; transition:opacity .25s,transform .25s; white-space:nowrap }
.toast.visible { transform:translate(-50%,0); opacity:1 }
.changed { animation:count-pulse .3s var(--ease) }
@keyframes count-pulse { 50% { transform:scale(1.25) } }
.policy-page { background:var(--muted) }
.policy { padding:clamp(120px,12vw,178px) var(--edge) var(--space); max-width:1440px; margin:auto }
.policy__intro,.policy__body,.policy__contents { background:white; border-radius:var(--radius); padding:clamp(22px,4vw,58px) }
.policy__intro { margin-bottom:30px }
.policy__intro h1 { margin-bottom:16px }
.policy__layout { display:grid; grid-template-columns:minmax(210px,1fr) minmax(0,2.5fr); gap:24px; align-items:start }
.policy__contents { position:sticky; top:102px; padding:24px }
.policy__contents ol { padding-left:22px; line-height:1.85; margin-bottom:0 }
.policy__contents h2,.policy__body h2 { font-size:24px; font-weight:600 }
.policy__body section + section { border-top:1px solid #e0e3e7; margin-top:26px; padding-top:26px }
.policy__body h2,.policy__body h3 { margin-bottom:10px }
.policy__body address { margin-top:12px }
.policy__body li + li { margin-top:8px }
@media(max-width:1160px) {
  .nav-phone { display:none }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media(max-width:900px) {
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero-panel { width:62%; padding:32px }
  .hero-chips { gap:6px }
  .footer-grid { grid-template-columns:1fr 1fr }
  .footer-grid > div { overflow-wrap:anywhere }
}
@media(max-width:780px) {
  .menu-button { display:inline-flex }
  .nav-actions { gap:7px }
  #navigation { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; padding:12px; border-radius:20px; background:white; box-shadow:0 12px 35px #20263126 }
  #navigation.expanded { display:grid }
  #navigation .mobile-phone { display:block }
  .site-header:focus-within { z-index:8 }
  .policy__layout { grid-template-columns:1fr }
  .policy__contents { position:static }
}
@media(max-width:680px) {
  :root { --edge:clamp(16px,5.8vw,25px); --space:48px }
  .hero { padding-top:clamp(105px,25vw,135px); padding-bottom:34px }
  .hero-photo img { object-position:70% 50% }
  .hero-layout { display:grid; gap:22px }
  .hero-panel { width:100%; min-height:0; padding:clamp(20px,5.8vw,28px); gap:22px; background:#fffc }
  .hero-panel h1 { font-size:clamp(33px,8vw,42px) }
  .hero-panel p,.lead { font-size:18px }
  .hero-facts { padding:15px 5px }
  .hero-facts span { font-size:12px }
  .hero-chips { max-width:380px; gap:8px }
  .hero-chips a { font-size:12px }
  .split,.range-grid,.delivery-grid,.checkout-grid { grid-template-columns:1fr }
  .range-grid,.delivery-grid { margin-top:26px; gap:20px }
  .editorial-image { aspect-ratio:1.12 }
  .range-option { min-height:45px }
  .section-title::after { width:62px; height:5px; margin:12px 0 16px }
  .contact-scene { height:180px; border-radius:20px }
  .contact-links { gap:6px; padding:0 7px 8px 0 }
  .contact-links .button { font-size:13px; padding:10px 13px }
  .checkout { max-width:100%; max-height:100dvh; border-radius:16px }
  .fields { gap:12px }
}
@media(max-width:480px) {
  .product-grid,.fields { grid-template-columns:1fr }
  .hero-buttons { gap:8px }
  .hero-buttons .button { padding:10px 14px; font-size:14px }
  .product-body { padding:20px }
  .shop .filters button { font-size:14px; padding:8px 13px }
  .footer-grid { gap:24px 16px }
  .footer-grid > div:first-child,.footer-grid > div:last-child { grid-column:1/-1 }
  .nav-shell { width:calc(100% - 30px) }
  .checkout { margin:auto; padding:18px }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
}