@charset "utf-8";

:root {
  color-scheme: light;
  --navy: #14243a;
  --navy-2: #203b5b;
  --orange: #f28c28;
  --orange-dark: #d97114;
  --ink: #1c2b3c;
  --muted: #788493;
  --line: #e8ebee;
  --paper: #fff;
  --soft: #f6f7f8;
  --green: #27765c;
  --sans: "Segoe UI", Arial, Helvetica, sans-serif;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.announcement { background: var(--navy); color: #e9edf2; font-size: 11px; letter-spacing: .025em; }
.announcement-inner { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.announcement-inner > span:first-child { display: flex; align-items: center; gap: 9px; }
.announcement-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px #f28c2830; }
.announcement-note { color: #aeb9c5; }

.site-header { position: sticky; z-index: 20; top: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid #e9ebed; backdrop-filter: blur(12px); }
.header-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--navy); }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; background: #fff3e5; }
.brand-mark svg { width: 31px; height: 31px; fill: none; stroke: var(--navy); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark svg .brand-mark-accent { stroke: var(--orange); stroke-width: 4; }
.brand-copy { display: block; font-size: 20px; line-height: 1; font-weight: 900; letter-spacing: -.055em; }
.brand-copy > span { color: var(--orange-dark); }
.brand-copy small { display: block; margin-top: 5px; font-size: 8px; line-height: 1; letter-spacing: .19em; font-weight: 800; color: #7d8893; }
.primary-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 39px); margin-left: auto; }
.primary-nav a { position: relative; padding-block: 11px; font-size: 12px; font-weight: 700; color: #526071; transition: color .18s ease; }
.primary-nav a::after { position: absolute; content: ""; height: 2px; left: 0; right: 100%; bottom: 3px; background: var(--orange); transition: right .2s ease; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--navy); }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; }
.header-actions { display: flex; align-items: center; }
.cart-button { border: 1px solid #e5e8eb; border-radius: 6px; padding: 9px 11px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--navy); font-size: 11px; font-weight: 750; transition: border-color .2s, background .2s; }
.cart-button:hover { border-color: var(--orange); background: #fffaf4; }
.cart-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { min-width: 20px; height: 20px; padding-inline: 5px; display: inline-grid; place-items: center; border-radius: 10px; background: #fff1df; color: #bb5c0c; font-size: 10px; }
.menu-toggle { display: none; }

.hero { position: relative; overflow: hidden; background: linear-gradient(110deg, #14243a 0%, #1b324d 61%, #223d5b 100%); color: white; }
.hero-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .14; background-image: linear-gradient(30deg, transparent 48%, #8094aa 49%, #8094aa 50%, transparent 51%), linear-gradient(150deg, transparent 48%, #8094aa 49%, #8094aa 50%, transparent 51%); background-size: 64px 108px; mask-image: linear-gradient(90deg, transparent, #000 48%, #000); }
.hero-layout { min-height: 500px; display: grid; grid-template-columns: 1fr .93fr; align-items: center; gap: 35px; position: relative; z-index: 1; padding-block: 45px 28px; }
.hero-content { max-width: 590px; padding-block: 20px 30px; }
.hero-kicker, .section-eyebrow { color: #d97b24; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.hero-kicker { display: flex; align-items: center; gap: 9px; color: #ffb264; }
.hero-kicker span { width: 20px; height: 2px; background: var(--orange); }
.hero h1 { margin: 22px 0 19px; font-size: clamp(37px, 5vw, 59px); line-height: 1.08; letter-spacing: -.055em; font-weight: 760; }
.hero h1 em { color: #f9a44e; font-style: normal; }
.hero-content > p { max-width: 455px; color: #c3ceda; font-size: 13px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
.button { min-height: 43px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 800; transition: transform .18s, background .18s, color .18s, border-color .18s; }
.button:hover { transform: translateY(-2px); }
.button-orange { background: var(--orange); color: #1e2c3b; box-shadow: 0 7px 20px #f28c2835; }
.button-orange:hover { background: #ffab4c; }
.button-outline { border-color: #ffffff55; color: #fff; background: #ffffff08; }
.button-outline:hover { border-color: #fff; background: #ffffff12; }
.button-dark { background: var(--navy); color: #fff; }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 31px; }
.proof-avatars { display: flex; padding-left: 2px; }
.proof-avatars span { width: 26px; height: 26px; display: grid; place-items: center; margin-left: -3px; border: 2px solid #1a304a; border-radius: 50%; background: #e6a668; color: var(--navy); font-size: 7px; font-weight: 900; }
.proof-avatars span:nth-child(2) { background: #a4c4bf; }
.proof-avatars span:nth-child(3) { background: #f6f0e2; color: #267155; }
.hero-proof p { display: grid; gap: 4px; margin: 0; }
.hero-proof strong { font-size: 10px; }
.hero-proof small { color: #aebdcc; font-size: 9px; }
.hero-art { min-height: 390px; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-art::before { content: ""; position: absolute; inset: 12% 2% 5% 7%; border: 1px solid #ffffff19; border-radius: 48% 52% 43% 57% / 50% 42% 58% 50%; transform: rotate(-8deg); }
.hero-art::after { content: ""; position: absolute; width: 290px; height: 290px; top: 12%; right: 10%; border-radius: 50%; background: #f4a246; opacity: .1; filter: blur(1px); }
.hero-art-sun { position: absolute; right: 17%; top: 12%; width: 44px; height: 44px; border-radius: 50%; background: #f7bd78; opacity: .95; box-shadow: 0 0 0 14px #f7bd781a; }
.building-art { position: relative; z-index: 1; width: 100%; max-width: 490px; height: auto; margin: 15px 0 -7px; filter: drop-shadow(0 16px 21px #09152332); }
.hero-art-label { position: absolute; z-index: 2; top: 11%; left: -1%; display: flex; align-items: center; gap: 10px; padding: 11px 15px 11px 11px; border: 1px solid #ffffff23; border-radius: 7px; background: #ffffffef; color: var(--navy); box-shadow: 0 12px 30px #07111e25; }
.label-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #fff0dc; color: #d7731d; font-size: 15px; }
.hero-art-label span:last-child { display: grid; gap: 4px; }
.hero-art-label b { font-size: 10px; }
.hero-art-label small { color: #788493; font-size: 8px; }
.hero-art-stamp { position: absolute; z-index: 2; bottom: 9%; right: 3%; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #ffffff2b; border-radius: 5px; background: #14243ae8; color: white; transform: rotate(-5deg); }
.hero-art-stamp span { color: var(--orange); font-size: 15px; font-weight: 900; }
.hero-art-stamp small { font-size: 7px; line-height: 1.35; letter-spacing: .1em; font-weight: 800; }
.hero-bottom { min-height: 45px; position: relative; z-index: 1; display: flex; align-items: center; gap: 17px; border-top: 1px solid #ffffff1a; color: #aebdcc; font-size: 8px; letter-spacing: .1em; font-weight: 800; }
.hero-bottom i { width: 3px; height: 3px; border-radius: 50%; background: var(--orange); }

.benefits { border-bottom: 1px solid var(--line); background: #fff; }
.benefit-grid { min-height: 98px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 22px; }
.benefit-item { display: flex; align-items: center; gap: 11px; }
.benefit-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 850; }
.icon-orange { color: #cf6e19; background: #fff1e0; }
.icon-blue { color: #497997; background: #edf5f8; font-size: 21px; }
.icon-green { color: #387c62; background: #eaf5ee; font-size: 10px; }
.icon-sand { color: #966b3c; background: #f5f0e7; font-size: 21px; }
.benefit-item > span:last-child { display: grid; gap: 5px; }
.benefit-item b { font-size: 10px; }
.benefit-item small { color: var(--muted); font-size: 9px; }

.section { padding-block: 77px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 27px; }
.section-heading h2 { margin: 9px 0 7px; color: var(--navy); font-size: clamp(25px, 3vw, 33px); line-height: 1.12; letter-spacing: -.045em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.text-link { padding-bottom: 3px; color: #a9510b; font-size: 10px; font-weight: 800; white-space: nowrap; }
.text-link span { margin-left: 8px; font-size: 14px; }
.categories-section { background: #fff; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.category-tile { overflow: hidden; min-width: 0; padding: 0; border: 1px solid #e8ebee; border-radius: 8px; background: #fff; color: var(--navy); text-align: left; transition: transform .2s, box-shadow .2s, border-color .2s; }
.category-tile:hover, .category-tile:focus-visible { border-color: #f3bc81; box-shadow: 0 11px 27px #14243a12; transform: translateY(-4px); outline: none; }
.category-art { height: 126px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f4f3ef; }
.category-art::before { position: absolute; content: ""; width: 115px; height: 115px; right: -25px; top: -34px; border-radius: 50%; background: #fff; opacity: .75; }
.category-art::after { position: absolute; content: ""; left: 0; right: 0; bottom: 0; height: 25px; background: linear-gradient(0deg,#14243a0d,transparent); }
.cement-art { background: linear-gradient(145deg,#f5eadd,#ead7c0); }
.cement-art i { z-index: 1; width: 34px; height: 60px; margin-inline: 2px; border: 1px solid #b9a387; border-radius: 4px 4px 7px 7px; background: linear-gradient(90deg,#d9c6a9,#f2e7d8 48%,#c9b395); box-shadow: 0 6px 10px #6c513523; transform: rotate(-8deg); }
.cement-art i:nth-child(2) { height: 70px; transform: rotate(4deg); }
.cement-art i:nth-child(3) { height: 57px; transform: rotate(10deg); }
.steel-art { background: linear-gradient(145deg,#e1edf0,#c6d9df); }
.steel-art i { z-index: 1; width: 7px; height: 86px; margin: 0 6px; border-radius: 7px; background: linear-gradient(90deg,#687c85,#e0e6e5,#647983); box-shadow: 2px 6px 8px #12283a35; transform: rotate(24deg); }
.steel-art i:nth-child(2), .steel-art i:nth-child(4) { transform: rotate(31deg) translateY(3px); }
.blocks-art { background: linear-gradient(145deg,#eee9df,#dfd4c3); }
.blocks-art i { z-index: 1; width: 46px; height: 27px; margin: 1px; border: 1px solid #9c9385; border-radius: 2px; background: linear-gradient(145deg,#d2c9b8,#b8ae9d); box-shadow: 0 3px 4px #392d1e20; }
.blocks-art i:nth-child(1), .blocks-art i:nth-child(4) { transform: translateX(24px); }
.blocks-art i:nth-child(3), .blocks-art i:nth-child(6) { transform: translateX(-24px); }
.roofing-art { background: linear-gradient(145deg,#e7eef0,#d1dfe2); }
.roofing-art i { z-index: 1; width: 80px; height: 20px; margin: -2px; border-radius: 20px; background: repeating-linear-gradient(90deg,#718c96 0 7px,#9bb0b5 7px 12px); box-shadow: 0 4px 5px #14243a2b; transform: rotate(-25deg); }
.roofing-art i:nth-child(1) { margin-top: 25px; margin-left: -30px; }
.roofing-art i:nth-child(3) { margin-top: -25px; margin-right: -30px; }
.sand-art { background: linear-gradient(145deg,#f1e8d5,#e2d2b2); }
.sand-art i { position: absolute; z-index: 1; bottom: 25px; width: 52px; height: 35px; border-radius: 53% 47% 12% 10%; background: linear-gradient(150deg,#d2b37b,#b9945d); box-shadow: inset 0 5px 8px #fff4d25c, 0 4px 7px #604d3126; }
.sand-art i:nth-child(2) { transform: translate(-27px,9px) scale(.8); }
.sand-art i:nth-child(3) { transform: translate(26px,8px) scale(.85); }
.sand-art i:nth-child(4), .sand-art i:nth-child(5), .sand-art i:nth-child(6) { width: 7px; height: 6px; bottom: 65px; border-radius: 50%; background: #f9f2df; }
.sand-art i:nth-child(4) { margin-left: -26px; }
.sand-art i:nth-child(6) { margin-left: 28px; }
.tile-bottom { min-height: 67px; display: grid; align-content: center; gap: 7px; padding: 12px 14px; }
.tile-bottom b { font-size: 11px; }
.tile-bottom small { color: var(--muted); font-size: 9px; }
.tile-bottom small span { float: right; color: #b8610e; font-size: 13px; line-height: 9px; }

.marketplace-section { background: #f7f8f9; }
.marketplace-top { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.marketplace-heading { margin: 0; }
.search-field { display: flex; align-items: center; gap: 9px; width: min(285px, 38%); padding: 10px 12px; border: 1px solid #e2e6e9; border-radius: 5px; background: #fff; }
.search-field:focus-within { border-color: #e9a458; box-shadow: 0 0 0 3px #f28c2818; }
.search-field svg { width: 16px; height: 16px; fill: none; stroke: #718092; stroke-width: 1.7; stroke-linecap: round; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--navy); font-size: 10px; }
.search-field input::placeholder { color: #9aa3ad; }
.search-field kbd { min-width: 17px; padding: 2px 4px; border: 1px solid #e7e9eb; border-radius: 3px; color: #89939d; font-family: var(--sans); font-size: 9px; text-align: center; }
.filter-row { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.filter-list { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip { padding: 7px 12px; border: 1px solid #e2e6e9; border-radius: 30px; background: #fff; color: #647181; font-size: 9px; font-weight: 750; transition: .18s ease; }
.filter-chip:hover { border-color: #d59a5f; color: var(--navy); }
.filter-chip.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.result-count { color: #87919b; font-size: 9px; white-space: nowrap; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid #e7eaed; border-radius: 7px; background: white; transition: transform .2s, box-shadow .2s, border-color .2s; }
.product-card:hover { border-color: #e4d4c3; box-shadow: 0 12px 28px #14243a0e; transform: translateY(-3px); }
.product-card[hidden] { display: none; }
.product-visual { position: relative; height: 180px; overflow: hidden; background: #f2f1ed; }
.product-visual::after { content: ""; position: absolute; inset: auto 0 0; height: 45px; background: linear-gradient(0deg,#17283c12,transparent); pointer-events: none; }
.product-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-visual img { transform: scale(1.035); }
.product-tag { position: absolute; z-index: 1; top: 11px; left: 11px; padding: 5px 7px; border-radius: 3px; background: #fff0dd; color: #b55f14; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.tag-blue { background: #e8f1f5; color: #4a7184; }
.tag-green { background: #e7f2e9; color: #397154; }
.quick-add { position: absolute; z-index: 2; right: 11px; bottom: 11px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: white; color: var(--navy); box-shadow: 0 3px 12px #14243a20; font-size: 19px; line-height: 1; transition: background .16s, color .16s, transform .16s; }
.quick-add:hover { background: var(--orange); color: var(--navy); transform: scale(1.07); }
.product-details { padding: 14px 14px 13px; }
.product-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #9a6b3f; font-size: 7px; letter-spacing: .1em; font-weight: 900; }
.rating { color: #ce801c; font-size: 9px; letter-spacing: 0; }
.rating b { color: #586574; font-size: 8px; }
.product-details h3 { min-height: 34px; margin: 9px 0 4px; color: var(--navy); font-size: 12px; line-height: 1.4; letter-spacing: -.015em; }
.product-spec { margin: 0; color: #89939d; font-size: 9px; }
.product-spec span { padding-inline: 3px; color: #c0c5ca; }
.product-price { display: flex; align-items: baseline; gap: 5px; margin: 14px 0 11px; }
.product-price b { color: var(--navy); font-size: 15px; letter-spacing: -.025em; }
.product-price b small { font-size: 10px; }
.product-price > span { color: #8b949e; font-size: 8px; }
.add-button { width: 100%; min-height: 32px; border: 1px solid #e3e7ea; border-radius: 4px; background: #fff; color: #344356; font-size: 9px; font-weight: 800; transition: background .16s, border-color .16s, color .16s; }
.add-button span { margin-right: 4px; color: #c06a1a; font-size: 12px; vertical-align: -1px; }
.add-button:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.add-button:hover span { color: #ffc17d; }
.demo-disclaimer { margin: 21px 0 0; color: #929ba4; text-align: center; font-size: 9px; }
.no-results { padding: 55px 20px; text-align: center; }
.no-results[hidden] { display: none; }
.no-results > span { color: #d88532; font-size: 33px; }
.no-results h3 { margin: 10px 0 5px; color: var(--navy); font-size: 18px; }
.no-results p { margin: 0 0 16px; color: var(--muted); font-size: 11px; }

.project-banner { position: relative; overflow: hidden; padding-block: 58px; background: #f5f1ea; }
.banner-inner { min-height: 160px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.banner-inner > div:first-child { position: relative; z-index: 1; max-width: 540px; }
.banner-inner h2 { margin: 11px 0 9px; color: var(--navy); font-size: clamp(25px, 3vw, 34px); line-height: 1.16; letter-spacing: -.045em; }
.banner-inner p { max-width: 420px; margin: 0; color: #737e88; font-size: 11px; line-height: 1.7; }
.banner-inner > .button { position: relative; z-index: 1; flex: 0 0 auto; }
.banner-decoration { position: absolute; right: 17%; bottom: -100px; color: #e9e1d5; font-size: 260px; line-height: 1; font-weight: 950; letter-spacing: -.1em; }

.site-footer { background: var(--navy); color: #fff; }
.footer-main { min-height: 91px; display: flex; align-items: center; gap: 23px; }
.footer-brand .brand-copy { color: white; font-size: 17px; }
.footer-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
.footer-brand .brand-mark svg { width: 27px; height: 27px; }
.footer-main > p { color: #b4bfca; font-size: 10px; }
.back-top { margin-left: auto; color: #ffb36b; font-size: 10px; font-weight: 800; }
.footer-bottom { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff20; color: #9daaba; font-size: 8px; }

.cart-backdrop { position: fixed; z-index: 39; inset: 0; background: #08111dcc; opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s; }
.cart-drawer { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(390px, 100%); padding: 25px; background: #fff; box-shadow: -15px 0 50px #06101e24; transform: translateX(102%); transition: transform .25s ease; }
.cart-is-open .cart-backdrop { opacity: 1; visibility: visible; }
.cart-is-open .cart-drawer { transform: translateX(0); }
.cart-drawer-head { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.cart-drawer-head h2 { margin: 7px 0 0; color: var(--navy); font-size: 21px; letter-spacing: -.04em; }
.cart-drawer-head h2 span { color: #909aa4; font-size: 13px; font-weight: 500; }
.drawer-close { align-self: flex-start; width: 30px; height: 30px; border: 1px solid #e6e9eb; border-radius: 50%; background: white; color: var(--navy); font-size: 20px; line-height: 1; }
.drawer-close:hover { background: #fff3e5; border-color: #f0c99e; }
.cart-items { flex: 1; overflow-y: auto; padding-block: 12px; }
.cart-empty { min-height: 200px; display: grid; align-content: center; justify-items: center; gap: 8px; color: #8a949e; text-align: center; }
.cart-empty > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff2e3; color: #bd671c; font-size: 21px; }
.cart-empty b { color: #526070; font-size: 13px; }
.cart-empty small { font-size: 10px; }
.cart-line { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid #edf0f1; }
.cart-line img { width: 58px; height: 54px; object-fit: cover; border-radius: 5px; background: #f3f1ec; }
.cart-line-name { display: grid; gap: 5px; }
.cart-line-name b { color: var(--navy); font-size: 10px; line-height: 1.4; }
.cart-line-name small { color: #7c8792; font-size: 9px; }
.cart-qty { display: flex; align-items: center; gap: 6px; color: #465466; font-size: 9px; }
.cart-qty button { width: 22px; height: 22px; border: 1px solid #e3e7ea; border-radius: 4px; background: white; color: var(--navy); font-size: 13px; line-height: 1; }
.cart-qty button:hover { border-color: var(--orange); }
.cart-drawer-foot { padding-top: 16px; border-top: 1px solid var(--line); }
.cart-drawer-foot > p { display: flex; justify-content: space-between; margin: 0 0 14px; color: #6d7883; font-size: 11px; }
.cart-drawer-foot strong { color: var(--navy); font-size: 14px; }
.cart-demo-button { width: 100%; min-height: 42px; border: 0; border-radius: 5px; font-size: 10px; cursor: default; }
.cart-drawer-foot > small { display: block; margin-top: 9px; color: #929ba4; text-align: center; font-size: 9px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 25px; max-width: calc(100% - 32px); padding: 11px 16px; border: 1px solid #ffffff18; border-radius: 5px; background: var(--navy); color: white; box-shadow: 0 9px 30px #0e192834; font-size: 10px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

:focus-visible { outline: 3px solid #f28c2890; outline-offset: 3px; }

@media (min-width: 1400px) {
  .hero-layout { min-height: 545px; }
  .product-visual { height: 195px; }
}

@media (max-width: 1000px) {
  .container { width: min(var(--container), calc(100% - 44px)); }
  .header-inner { gap: 18px; }
  .primary-nav { gap: 18px; }
  .brand-copy { font-size: 18px; }
  .hero-layout { min-height: 455px; grid-template-columns: 1.03fr .9fr; gap: 10px; }
  .hero-art { min-height: 335px; }
  .hero-art-label { left: 0; }
  .category-grid { gap: 10px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-visual { height: 190px; }
}

@media (max-width: 720px) {
  .container { width: min(var(--container), calc(100% - 36px)); }
  .announcement-inner { min-height: 33px; justify-content: center; font-size: 9px; }
  .announcement-note { display: none; }
  .header-inner { min-height: 68px; flex-wrap: wrap; gap: 10px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-mark svg { width: 28px; height: 28px; }
  .brand-copy { font-size: 17px; }
  .brand-copy small { font-size: 7px; }
  .menu-toggle { order: 3; width: 35px; height: 35px; display: grid; align-content: center; justify-items: center; gap: 4px; margin-left: 2px; border: 1px solid #e8ebee; border-radius: 5px; background: white; }
  .menu-toggle > span:not(.sr-only) { width: 15px; height: 2px; border-radius: 2px; background: var(--navy); }
  .header-actions { margin-left: auto; }
  .cart-button { padding: 8px 9px; }
  .cart-button > span:not(.cart-count) { display: none; }
  .primary-nav { order: 4; display: none; width: 100%; padding: 2px 0 13px; margin: 0; justify-content: space-between; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { font-size: 10px; }
  .hero-layout { min-height: 0; grid-template-columns: 1fr; gap: 0; padding-block: 45px 6px; }
  .hero-content { padding: 0; }
  .hero h1 { margin: 18px 0 15px; font-size: clamp(37px, 9.5vw, 52px); }
  .hero-content > p { max-width: 490px; font-size: 12px; }
  .hero-actions { margin-top: 20px; }
  .hero-proof { margin-top: 23px; }
  .hero-art { min-height: 285px; max-height: 360px; width: min(100%, 440px); margin: 0 auto; }
  .hero-art-label { top: 9%; left: 1%; }
  .hero-art-stamp { right: 1%; bottom: 7%; }
  .hero-bottom { min-height: 40px; justify-content: center; gap: 9px; font-size: 6px; letter-spacing: .07em; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; padding-block: 19px; }
  .benefit-item { gap: 8px; }
  .benefit-icon { width: 33px; height: 33px; }
  .benefit-item b { font-size: 9px; }
  .benefit-item small { max-width: 145px; font-size: 8px; }
  .section { padding-block: 55px; }
  .section-heading { align-items: start; margin-bottom: 21px; }
  .section-heading h2 { font-size: 27px; }
  .section-heading p { max-width: 430px; font-size: 10px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .category-tile:last-child { grid-column: span 2; }
  .category-art { height: 116px; }
  .category-tile:last-child .category-art { height: 102px; }
  .marketplace-top { display: grid; gap: 15px; }
  .search-field { width: 100%; }
  .filter-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .filter-list { gap: 6px; }
  .filter-chip { padding: 7px 10px; font-size: 8px; }
  .result-count { align-self: flex-end; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-visual { height: clamp(125px, 38vw, 185px); }
  .product-details { padding: 11px 10px 10px; }
  .product-details h3 { min-height: 35px; font-size: 11px; }
  .product-price { margin-block: 11px 9px; }
  .product-price b { font-size: 13px; }
  .product-tag { top: 8px; left: 8px; font-size: 6px; }
  .quick-add { right: 8px; bottom: 8px; width: 27px; height: 27px; }
  .demo-disclaimer { line-height: 1.6; }
  .project-banner { padding-block: 43px; }
  .banner-inner { align-items: flex-start; flex-direction: column; gap: 19px; }
  .banner-inner h2 { font-size: 28px; }
  .banner-decoration { right: 0; bottom: -80px; font-size: 170px; }
  .footer-main { min-height: 105px; flex-wrap: wrap; gap: 7px 12px; padding-block: 15px; }
  .footer-main > p { order: 3; width: 100%; margin: 0; }
  .back-top { font-size: 9px; }
  .footer-bottom { min-height: 42px; font-size: 7px; }
}

@media (max-width: 390px) {
  .container { width: calc(100% - 28px); }
  .hero-bottom { gap: 6px; font-size: 5px; }
  .hero-actions .button { padding-inline: 12px; gap: 9px; font-size: 10px; }
  .product-meta { font-size: 6px; }
  .product-details h3 { font-size: 10px; }
  .add-button { font-size: 8px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}