:root {
  --bg: #eef6fb; --bg2: #e1eff8; --card: #fff; --ink: #18213f; --muted: #56607c; --line: #d5e3ee; --line2: #e6eef4;
  --indigo: #334593; --indigo-d: #27367a; --cyan: #0a8fcf; --deep: #172152;
  --serif: Literata, Georgia, serif; --sans: Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.12; }
h2 { font-size: clamp(34px, 4vw, 54px); }
.ph { border-bottom: 1.5px dashed currentColor; opacity: .72; }
.ico { width: 20px; height: 20px; }
html[lang="el"] [data-l="en"], html[lang="en"] [data-l="el"] { display: none !important; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s, transform .2s var(--ease), border-color .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-d); }
.btn-white { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-white:hover { border-color: #b4c6d6; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: #fff; }
.btn-light { background: #fff; color: var(--deep); }
.btn-light:hover, .btn-light:focus-visible { background: #fff; color: var(--deep); box-shadow: 0 10px 24px -10px rgba(8,20,60,.5); }
.btn.small { height: 42px; padding: 0 18px; font-size: 14.5px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 600; }
.link svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* header (option 1) */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid #e2e7ee; }
.site-head .wrap { display: flex; align-items: center; gap: 30px; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand .mark { height: 46px; width: auto; }
.brand .word { height: 29px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav > a { position: relative; font-weight: 600; font-size: 15px; color: var(--muted); padding: 6px 0; transition: color .2s; }
.site-nav > a:hover, .site-nav > a.active { color: var(--ink); }
.site-nav > a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--indigo); }
.head-tools { display: flex; align-items: center; gap: 14px; }
.menu-btn { display: none; width: 44px; height: 44px; background: none; border: 0; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn .ico { width: 26px; height: 26px; }

/* page head (inner pages) */
.page-head { padding: 64px 0 56px; }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { color: #a5b2c4; }
.page-head h1 { font-size: clamp(42px, 5vw, 66px); }
.page-head p { font-size: 19px; color: var(--muted); max-width: 36em; margin-top: 16px; }

section { padding: 104px 0; }
.center { text-align: center; }
.center > p { color: var(--muted); font-size: 18px; max-width: 34em; margin: 16px auto 0; }
.white { background: #fff; }

/* home hero */
.hero { text-align: center; padding: 72px 0 0; }
.hero h1 { font-size: clamp(42px, 5.6vw, 76px); max-width: 13em; margin: 0 auto; line-height: 1.07; }
.hero .lead { font-size: 20px; color: var(--muted); max-width: 30em; margin: 24px auto 0; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.phones { margin-top: 22px; color: var(--muted); font-size: 16px; display: flex; gap: 8px 22px; justify-content: center; flex-wrap: wrap; }
.phones a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.phones a:hover { color: var(--cyan); }
.phones svg { width: 17px; height: 17px; color: var(--cyan); }

.shelf { margin-top: 64px; background: #fff; border-radius: 32px 32px 0 0; padding: 64px 48px 0; overflow: hidden; }
.shelf .row { display: flex; justify-content: center; align-items: flex-end; gap: 28px; border-bottom: 2px solid var(--line2); }
.shelf img { height: calc(var(--h) * .86px); width: auto; }
.js .shelf img { opacity: 0; transform: translateY(46px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i) * 110ms + 250ms); }
.js .shelf.in img { opacity: 1; transform: none; }

/* category cards */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.cat { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: #fff; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.cat:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(24,33,63,.45); }
.white .cat { background: var(--bg); }
.cat .pic { aspect-ratio: 900 / 640; overflow: hidden; background: #eef5fb; }
.cat .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat:hover .pic img { transform: scale(1.05); }
.cat .body { padding: 20px 24px 24px; }
.cat h3 { font-size: 22px; line-height: 1.25; }
.cat p { color: var(--muted); font-size: 14.5px; margin-top: 6px; line-height: 1.55; }
.cat .count { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--cyan); }
.cat .count svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.cat:hover .count svg { transform: translateX(3px); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; position: relative; }
.steps::before { content: ''; position: absolute; top: 31px; left: 16.6%; right: 16.6%; height: 2px; background: var(--line); transform-origin: left; }
.js .steps::before { transform: scaleX(0); transition: transform 1.4s var(--ease) .3s; }
.js .steps.in::before { transform: scaleX(1); }
.step { text-align: center; position: relative; }
.step .n { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; margin: 0 auto 22px; color: var(--indigo); position: relative; z-index: 1; transition: border-color .4s, background .4s; }
.step .n svg { width: 26px; height: 26px; }
.js .steps .step { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * 260ms + 200ms); }
.js .steps.in .step { opacity: 1; transform: none; }
.step h3 { font-size: 22px; }
.step p { color: var(--muted); font-size: 15.5px; margin: 8px auto 0; max-width: 18em; }

/* map */
.area-card { background: #fff; border-radius: 32px; padding: 64px 56px 56px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.area-card h2 { font-size: clamp(34px, 3.6vw, 48px); }
.area-card p { color: var(--muted); font-size: 18px; margin-top: 16px; }
.area-card .addr { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line2); color: var(--ink); font-size: 16px; }
.area-card .addr svg { color: var(--cyan); margin-top: 2px; }
.area-card .addr small { display: block; color: var(--muted); font-size: 13px; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .land { fill: var(--bg2); }
.map .coast { fill: none; stroke: #9fb7d2; stroke-width: 2; stroke-linejoin: round; }
.map .pin { fill: var(--indigo); }
.map .ring { fill: none; stroke: var(--indigo); stroke-width: 2; }
.map .label { font: 600 28px var(--sans); fill: var(--ink); }
.map .tick { stroke: var(--indigo); stroke-width: 2; }
.js .map .coast { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.js .map .land { opacity: 0; transition: opacity 1.2s ease 1.2s; }
.js .map .pinwrap { opacity: 0; transform: translateY(-40px); transition: opacity .5s ease 1.7s, transform .9s cubic-bezier(.3, 1.5, .5, 1) 1.7s; }
.js .map .label, .js .map .tick { opacity: 0; transition: opacity .6s ease 2.4s; }
.js .map .ring { opacity: 0; }
.js .map.in .coast { stroke-dashoffset: 0; }
.js .map.in .land, .js .map.in .label, .js .map.in .tick { opacity: 1; }
.js .map.in .pinwrap { opacity: 1; transform: none; }
.js .map.in .ring { animation: ring 2.4s ease-out 2.4s 3; transform-box: fill-box; transform-origin: center; }
@keyframes ring { 0% { opacity: .55; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }

/* dark band */
.band { padding: 0 0 104px; }
.band .box { background: linear-gradient(120deg, #334593 0%, #1a72bb 58%, #0a96d6 100%); color: #fff; border-radius: 32px; padding: 0; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; position: relative; overflow: hidden; }
.band .text { padding: 60px 56px; align-self: center; }
.band .text .actions { justify-content: flex-start; margin-top: 30px; }
.band .photo { position: relative; min-height: 340px; }
.band .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #1b6cb8 0%, rgba(27,108,184,0) 30%); }
.band h2 { font-size: clamp(32px, 3.6vw, 48px); }
.band p { color: #e3ecfb; font-size: 18px; margin-top: 14px; }
.band .actions { justify-content: flex-end; margin-top: 0; position: relative; }

/* company page */
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: start; }
.about-grid .text p { font-family: var(--serif); font-size: 24px; line-height: 1.55; color: #222b4b; }
.about-grid .text p + p { margin-top: 20px; }
.about-grid .text p.note { font-family: var(--sans); font-size: 17px; color: var(--muted); }
.photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: #d6d6d3; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 62%; }
.facts { display: grid; grid-template-columns: 1.45fr 1fr 1.15fr 1.1fr; gap: 18px; margin-top: 64px; }
.facts div { background: #fff; border-radius: 22px; padding: 26px 24px; }
.facts dt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.facts dt svg { width: 17px; height: 17px; color: var(--cyan); }
.facts dd { font-family: var(--serif); font-size: 23px; line-height: 1.3; margin-top: 10px; }

/* products page */
.filters { position: sticky; top: 78px; z-index: 30; background: rgba(238,246,251,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 14px 0; }
.filters .wrap { display: flex; gap: 16px; align-items: center; }
.search { position: relative; flex: 0 0 300px; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.search input { width: 100%; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: #fff; padding: 0 16px 0 44px; font-size: 15px; transition: border-color .2s; }
.search input:focus { outline: none; border-color: var(--indigo); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s, border-color .2s; }
.chips a:hover { color: var(--ink); border-color: #b7c8d8; }
.chips a.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pgroup { padding: 72px 0 8px; }
.pgroup:last-of-type { padding-bottom: 104px; }
.pgroup > .wrap > h2 { font-size: clamp(30px, 3.2vw, 42px); }
.pgroup h3.sub { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 36px 0 14px; }
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pgroup h2 + .pgrid { margin-top: 28px; }
.prod { position: relative; background: #fff; border-radius: 20px; padding: 14px 14px 16px; display: flex; flex-direction: column; border: 1px solid transparent; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(24,33,63,.45); }
.prod.sel { border-color: var(--indigo); }
.prod .cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.prod .pic { aspect-ratio: 1; border-radius: 14px; background: #fff; overflow: hidden; }
.prod .pic img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.prod:hover .pic img { transform: scale(1.04); }
.prod .pic.none { background: var(--bg); display: grid; place-items: center; }
.prod .pic.none img { width: 38%; height: auto; opacity: .2; filter: grayscale(1); }
.prod .sub { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod h4 { font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; margin-top: 4px; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod .meta { font-size: 13px; color: var(--cyan); font-weight: 600; margin-top: 6px; min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod .add { position: relative; z-index: 2; margin-top: auto; padding-top: 12px; }

/* product page */
.pd-head { padding: 36px 0 0; }
.pd { padding: 28px 0 96px; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pd-pic { position: sticky; top: 104px; background: #fff; border-radius: 28px; aspect-ratio: 1; overflow: hidden; }
.pd-pic img { width: 100%; height: 100%; object-fit: contain; }
.pd-pic.none { display: grid; place-items: center; background: #fff; }
.pd-pic.none img { width: 30%; height: auto; opacity: .18; filter: grayscale(1); }
.pd-info .sub { color: var(--muted); font-size: 15px; }
.pd-info h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: .005em; line-height: 1.2; margin-top: 8px; }
.pd-info .desc { font-size: 18px; color: #353e5c; margin-top: 18px; }
.pd-table { width: 100%; border-collapse: collapse; margin-top: 28px; background: #fff; border-radius: 18px; overflow: hidden; font-size: 14.5px; }
.pd-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 12px 16px; background: #f6fafd; border-bottom: 1px solid var(--line2); }
.pd-table td { padding: 12px 16px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.pd-table tr:last-child td { border-bottom: 0; }
.pd-table td:first-child { font-weight: 600; }
.white .prod { border-color: var(--line2); }
.white .prod.sel { border-color: var(--indigo); }
.pd-table td:nth-child(3) { white-space: nowrap; color: var(--muted); }
.pd-buy { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.pd-buy label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; color: #3a4361; flex: 1 1 260px; }
.pd-buy label.qty { flex: 0 0 120px; }
.pd-buy select, .pd-buy input { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; padding: 12px 14px; }
.pd-buy select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7590 50%), linear-gradient(135deg, #6b7590 50%, transparent 50%); background-position: calc(100% - 20px) 54%, calc(100% - 15px) 54%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.pd-buy select:focus, .pd-buy input:focus { outline: none; border-color: var(--indigo); }
.pd-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.pd-wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 600; color: #1f8a5b; }
.pd-wa svg { width: 20px; height: 20px; }
.pd-note { font-size: 13px; color: var(--muted); margin-top: 18px; }
.pd-rel { padding: 88px 0; }
.noresult { padding: 80px 0 120px; text-align: center; color: var(--muted); font-size: 18px; display: none; }

/* contact page */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.cform { display: grid; gap: 16px; background: #fff; border-radius: 28px; padding: 36px; }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: #3a4361; }
.cform input, .cform select, .cform textarea { width: 100%; background: #f6fafd; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; padding: 13px 14px; transition: border-color .2s, background .2s; }
.cform textarea { resize: vertical; min-height: 130px; }
.cform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7590 50%), linear-gradient(135deg, #6b7590 50%, transparent 50%); background-position: calc(100% - 20px) 54%, calc(100% - 15px) 54%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--indigo); background: #fff; }
.cform .check { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; color: var(--muted); }
.cform .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--indigo); flex: none; padding: 0; }
.cform .check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform .err input, .cform .err textarea { border-color: #d6503d; }
.cform .err-text { color: #c4412f; font-size: 13px; }
.cform .check.err { flex-wrap: wrap; }
.cform .check .err-text { display: block; width: 100%; }
.form-end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-msg { font-size: 15px; }
.form-msg.ok { color: #1f8a5b; }
.form-msg.bad { color: #c4412f; }
.form-msg a { color: inherit; }
.info { background: #fff; border-radius: 28px; padding: 12px 32px; }
.info a, .info > div { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line2); }
.info > :last-child { border-bottom: 0; }
.info .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); color: var(--cyan); display: grid; place-items: center; flex: none; transition: background .2s, color .2s; }
.info a:hover .ic { background: var(--indigo); color: #fff; }
.info small { display: block; font-size: 13px; color: var(--muted); }
.info b { font-weight: 600; font-size: 16.5px; }
.info .sub { display: block; font-size: 14px; color: var(--cyan); font-weight: 600; margin-top: 4px; }
.contact-side .map { background: #fff; border-radius: 28px; padding: 28px; margin-top: 18px; }

/* legal pages */
.prose { max-width: 760px; }
.prose h2 { font-size: 28px; margin: 40px 0 12px; }
.prose p, .prose li { color: #353e5c; font-size: 17px; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 22px; margin-top: 10px; display: grid; gap: 6px; }
.prose a { color: var(--cyan); }
.updated { font-size: 15px !important; margin-top: 10px !important; }

/* footer (Stavraetos structure, light) */
.site-foot { background: #fff; padding: 72px 0 32px; color: var(--muted); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand img { width: 150px; height: auto; }
.foot-brand p { margin-top: 18px; max-width: 22em; }
.foot-soc { display: flex; gap: 10px; margin-top: 22px; }
.soc { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--indigo); transition: background .2s, color .2s, border-color .2s; }
.soc:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.soc svg { width: 19px; height: 19px; }
.foot-col { display: grid; gap: 10px; align-content: start; }
.foot-col h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.foot-col a:hover { color: var(--ink); }
.foot-col .btn { justify-self: start; margin-top: 8px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line2); margin-top: 48px; padding-top: 24px; font-size: 13.5px; }

/* reveal */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .shelf img, .js .trio figure, .js .steps .step, .js .map .land, .js .map .pinwrap, .js .map .label, .js .map .tick { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .map .coast { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .trio .base, .js .steps::before { transform: none !important; }
  .js .map.in .ring { animation: none; }
}

@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .site-nav { display: none; }
  .head-tools { margin-left: auto; }
  .head-tools .call, .head-tools .lang { display: none; }
  .menu-btn { display: inline-flex; }
  .menu-open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 78px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e2e7ee; padding: 8px 32px 24px; box-shadow: 0 24px 30px -26px rgba(24,33,63,.4); }
  .menu-open .site-nav > a { padding: 15px 0; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line2); }
  .menu-open .site-nav > a.active::after { display: none; }
  .site-nav .m-only { display: flex; }
  .shelf .row { gap: 18px; }
  .shelf img { height: calc(var(--h) * .6px); }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .sizes .wrap, .area-card, .about-grid, .contact-grid, .band .box { grid-template-columns: 1fr; }
  .band .actions { justify-content: flex-start; }
  .facts { grid-template-columns: 1fr 1fr; }
  .filters { top: 78px; }
  .filters .wrap { flex-direction: column; align-items: stretch; }
  .search { flex: none; }
}
.site-nav .m-only { display: none; }
.menu-open .site-nav .m-only { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; gap: 12px; }
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .site-head .wrap { height: 68px; gap: 12px; }
  .brand .mark { height: 38px; } .brand .word { height: 23px; }
  .menu-open .site-nav { top: 68px; padding: 6px 20px 22px; }
  .filters { top: 68px; }
  .page-head { padding: 40px 0 36px; }
  .page-head p { font-size: 17px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: 40px; }
  .hero .lead { font-size: 17px; }
  .actions .btn { flex: 1 1 100%; }
  .shelf { margin-top: 44px; padding: 40px 14px 0; border-radius: 24px 24px 0 0; }
  .shelf .row { gap: 10px; }
  .shelf img { height: calc(var(--h) * .45px); }
  .shelf .hide-s { display: none; }
  section { padding: 72px 0; }
  .grid3 { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .cat .body { padding: 16px 18px 20px; }
  .cat h3 { font-size: 20px; }
  .steps { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .steps::before { top: 32px; bottom: 32px; left: 50%; right: auto; width: 2px; height: auto; transform-origin: top; }
  .js .steps::before { transform: scaleY(0); }
  .js .steps.in::before { transform: scaleY(1); }
  .area-card { padding: 36px 20px 28px; border-radius: 24px; gap: 28px; }
  .map .label { font-size: 38px; }
  .band { padding-bottom: 72px; }
  .band .box { padding: 36px 24px; border-radius: 24px; }
  .about-grid .text p { font-size: 20px; }
  .facts { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .pgroup { padding-top: 52px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .prod { padding: 10px 10px 12px; border-radius: 16px; }
  .prod .pic { padding: 10px; }
  .prod h4 { font-size: 13px; }
  .prod .sub { font-size: 11.5px; }
  .prod .meta { font-size: 12px; }
  .pd-grid { grid-template-columns: 1fr; gap: 28px; }
  .pd-pic { position: static; }
          .cform { padding: 22px 18px; border-radius: 22px; }
  .cform .two { grid-template-columns: 1fr; }
          .info { padding: 6px 20px; border-radius: 22px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- photo cards: spaces ---------- */
.spaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; }
.space { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; aspect-ratio: 3 / 4; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.space img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,20,64,0) 30%, rgba(11,20,64,.9) 100%); }
.space:hover img { transform: scale(1.06); }
.space h3 { font-size: 23px; line-height: 1.2; }
.space p { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82); margin-top: 8px; }
.space .go { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; transition: background .3s, transform .3s var(--ease); }
.space .go svg { width: 18px; height: 18px; }
.space:hover .go { background: #fff; color: var(--indigo); transform: translateX(3px); }

/* ---------- brands strip ---------- */
.brands { padding: 0 0 88px; text-align: center; }
.brands p { color: var(--muted); font-size: 15px; }
.brands .row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 52px; margin-top: 18px; }
.brands .row span { font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: #8f9bb3; }

/* ---------- section head with a button ---------- */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.head-row p { color: var(--muted); font-size: 18px; margin-top: 12px; }
.head-row .btn svg { width: 18px; height: 18px; }

/* ---------- photo banner on inner pages ---------- */
.banner { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); padding: 96px 0 92px; }
.banner .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; animation: bannerIn 2.2s var(--ease) both; }
.banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246,250,253,.97) 0%, rgba(246,250,253,.9) 40%, rgba(246,250,253,.15) 75%, rgba(246,250,253,0) 100%); }
.banner .crumbs { color: var(--muted); }
.banner .crumbs a:hover { color: var(--ink); }
.banner h1 { font-size: clamp(42px, 5vw, 68px); }
.banner p { color: #3d4766; font-size: 19px; max-width: 30em; margin-top: 16px; }
@keyframes bannerIn { from { transform: scale(1.08); } }

@media (max-width: 980px) {
  .spaces { grid-template-columns: 1fr 1fr; }
  .band .photo { min-height: 220px; order: -1; }
  .band .photo::before { background: linear-gradient(0deg, #2a5fb0 0%, rgba(42,95,176,0) 40%); }
  .head-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .stats { gap: 24px; margin-top: 24px; }
  .stats b { font-size: 26px; }
  .spaces { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .space { aspect-ratio: 16 / 11; padding: 20px; }
  .brands { padding-bottom: 64px; }
  .brands .row { gap: 10px 26px; }
  .brands .row span { font-size: 17px; }
  .banner { padding: 56px 0 52px; }
  .banner::after { background: linear-gradient(180deg, rgba(246,250,253,.95) 0%, rgba(246,250,253,.86) 100%); }
  .banner p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 980px) { .pd-grid { grid-template-columns: 1fr; gap: 32px; } .pd-pic { position: static; max-width: 560px; } }

/* ---------- header tools: language menu and quote list ---------- */
.lang-dd { position: relative; }
.lang-cur { display: inline-flex; align-items: center; height: 40px; padding: 0 6px; border: 0; background: none; cursor: pointer; color: var(--muted); transition: border-color .2s; }
.lang-cur > svg:last-child { display: none; }
.lang-cur:hover > svg:first-child, .lang-dd.open .lang-cur > svg:first-child { box-shadow: 0 0 0 2px #b4c6d6; }
.lang-cur > svg:first-child, .lang-menu button > svg:first-child { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(24,33,63,.1); }
.lang-cur > svg:last-child { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.lang-dd.open .lang-cur > svg:last-child { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 176px; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 18px 40px -16px rgba(24,33,63,.35), 0 0 0 1px rgba(24,33,63,.06); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.lang-dd.open .lang-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease); }
.lang-dd.up .lang-menu { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.lang-dd.up.open .lang-menu { transform: none; }
.lang-menu button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; text-align: left; color: var(--ink); }
.lang-menu button:hover { background: var(--bg); }
.lang-menu button > svg:last-child:not(:first-child) { width: 17px; height: 17px; margin-left: auto; color: var(--indigo); }
.cart-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: var(--indigo); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s; }
.cart-btn:hover { background: var(--indigo-d); }
.cart-btn .ico { width: 20px; height: 20px; }
.cart-btn b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: var(--indigo); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.cart-btn b[hidden] { display: none; }
.cart-btn.bump b { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.3); } }

/* ---------- add to quote controls ---------- */
.addb { width: 100%; height: 42px; border-radius: 999px; border: 0; background: var(--indigo); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.addb:hover { background: var(--indigo-d); }
.addb .ico { width: 18px; height: 18px; }
.stepper { display: flex; align-items: center; justify-content: space-between; height: 42px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); padding: 3px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--indigo); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 2px rgba(24,33,63,.12); transition: background .2s; }
.stepper button:hover { background: #eef2fb; }
.stepper button svg { width: 16px; height: 16px; }
.stepper span, .stepper input { min-width: 36px; text-align: center; font-weight: 700; font-size: 15px; }
.stepper input { width: 64px; border: 0; background: transparent; -moz-appearance: textfield; padding: 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper input:focus { outline: none; }
.stepper.big { height: 50px; width: 170px; }
.stepper.big button { width: 42px; height: 42px; }
.prod .add { position: relative; z-index: 2; margin-top: auto; padding-top: 12px; }
.prod.sel { border-color: var(--indigo); }

/* ---------- quote list drawer and toast ---------- */
.drawer .scrim { position: fixed; inset: 0; z-index: 80; background: rgba(15,22,52,.42); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.drawer .panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(440px, 100vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .45s var(--ease); box-shadow: -20px 0 50px -30px rgba(15,22,52,.5); }
.cart-open .drawer .scrim { opacity: 1; visibility: visible; transition: opacity .3s; }
.cart-open .drawer .panel { transform: none; }
.cart-open { overflow: hidden; }
.panel .ph { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line2); }
.panel .ph h2 { font-size: 26px; }
.panel .ph h2 span { color: var(--muted); font-size: 18px; }
.panel .x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg); cursor: pointer; display: grid; place-items: center; }
.panel .x svg { width: 18px; height: 18px; }
.pitems { flex: 1; overflow-y: auto; padding: 8px 24px; }
.ci { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.ci img { width: 76px; height: 76px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--line2); }
.ci .nm { font-weight: 700; font-size: 14px; line-height: 1.35; }
.ci .vl { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.ci select { margin-top: 6px; width: 100%; font-size: 13px; padding: 7px 30px 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7590 50%), linear-gradient(135deg, #6b7590 50%, transparent 50%); background-position: calc(100% - 15px) 54%, calc(100% - 10px) 54%; background-size: 5px 5px; background-repeat: no-repeat; }
.ci .row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ci .stepper { width: 128px; height: 38px; }
.ci .stepper button { width: 30px; height: 30px; }
.ci .addb { width: auto; height: 38px; padding: 0 16px; }
.ci .rm { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; margin-left: auto; }
.ci .rm:hover { background: #fdeeee; color: #c4412f; }
.ci .rm svg { width: 18px; height: 18px; }
.pf { padding: 18px 24px 24px; border-top: 1px solid var(--line2); display: grid; gap: 10px; }
.pf p { font-size: 13.5px; color: var(--muted); }
.pf .btn { width: 100%; }
.pf .btn svg { width: 18px; height: 18px; }
.pempty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 40px; color: var(--muted); }
.pempty .ico { width: 44px; height: 44px; color: #b6c4d6; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; box-shadow: 0 18px 40px -16px rgba(15,22,52,.6); transform: translate(-50%, 140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast .ico { width: 18px; height: 18px; color: #7fd6a8; }
.toast button { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; }

/* ---------- products page: sidebar + results ---------- */
.shop { padding: 48px 0 104px; }
.shop-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 40px; align-items: start; }
.side { position: sticky; top: 98px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; max-height: calc(100vh - 118px); }
.side-cats { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; align-content: start; }
.side .search { position: relative; display: block; }
.side .search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.side .search input { width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 0 12px 0 44px; font-size: 15px; line-height: 48px; text-overflow: ellipsis; color: var(--ink); transition: border-color .2s; }
.side .search input:focus { outline: none; border-color: var(--indigo); }
.cat-select { display: none; }
.side-cats { background: #fff; border-radius: 20px; padding: 10px; display: grid; gap: 2px; }
.side-cats h3 { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); padding: 10px 12px 8px; }
.side-cats a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: #3a4361; transition: background .2s, color .2s; }
.side-cats a:hover { background: var(--bg); color: var(--ink); }
.side-cats a b { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 9px; }
.side-cats a.on { background: var(--indigo); color: #fff; }
.side-cats a.on b { background: rgba(255,255,255,.2); color: #fff; }
.side-cats a.off { opacity: .4; }
.results .pgroup { padding: 0 0 56px; }
.results .pgroup > h2 { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 4px; }
.results .pgroup h3.sub { margin: 22px 0 12px; font-size: 13px; letter-spacing: .02em; }
.results .pgrid { grid-template-columns: repeat(3, 1fr); }
.pgrid.four { grid-template-columns: repeat(4, 1fr); }
.results .noresult { display: none; padding: 60px 0; text-align: center; color: var(--muted); font-size: 18px; }

/* ---------- product page: options and specs ---------- */
.pd-pic img { transition: opacity .25s ease, transform .35s var(--ease); }
.pd-pic img.swap { opacity: 0; transform: scale(.97); }
.opt-label { margin-top: 26px; font-size: 14px; color: var(--muted); }
.opt-label b { color: var(--ink); font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.opt { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); text-align: left; transition: border-color .2s, box-shadow .2s, background .2s; }
.opt:hover { border-color: #9fb3cb; }
.opt[aria-pressed="true"] { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); background: #f5f7fd; }
.opts.thumbs .opt { padding: 6px 14px 6px 6px; }
.opt img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; }
.pd-specs { display: flex; gap: 12px; margin-top: 22px; }
.pd-specs div { flex: 1; background: #fff; border-radius: 16px; padding: 14px 18px; }
.pd-specs dt { font-size: 13px; color: var(--muted); }
.pd-specs dd { font-weight: 700; font-size: 17px; margin-top: 4px; word-break: break-word; }
.pd-buy { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 14px; color: #3a4361; font-weight: 500; }
.pd-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.pd-actions .btn { flex: 1 1 200px; height: 54px; }
.pd-actions .btn svg { width: 19px; height: 19px; }
.pd-points { list-style: none; margin-top: 24px; display: grid; gap: 10px; }
.pd-points li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.pd-points svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.pd-points a { color: var(--ink); font-weight: 600; }

/* ---------- checkout ---------- */
.page-head.slim { padding: 40px 0 28px; }
.page-head.slim h1 { font-size: clamp(34px, 3.6vw, 48px); }
.co-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 32px; align-items: start; }
.co-grid .cform h2, .co-sum h2 { font-size: 26px; margin-bottom: 4px; }
.co-sum { position: sticky; top: 98px; background: #fff; border-radius: 28px; padding: 28px; }
.co-sum .ch { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-sum .link { background: none; border: 0; cursor: pointer; font-size: 14px; }
.co-items { margin-top: 14px; display: grid; }
.co-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.co-item img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line2); }
.co-item b { display: block; font-size: 13.5px; line-height: 1.35; }
.co-item span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.co-item em { font-style: normal; font-weight: 700; font-size: 14px; }
.co-total { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0 6px; font-size: 14.5px; }
.co-total span { color: var(--muted); }
.co-pay { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 13.5px; color: #3a4361; }
.co-pay svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 1px; }
.co-empty { display: grid; justify-items: center; gap: 16px; padding: 80px 20px 120px; text-align: center; color: var(--muted); font-size: 18px; }
.co-empty .ico { width: 48px; height: 48px; color: #b6c4d6; }
.co-empty.done .ico { color: #1f8a5b; }

/* ---------- footer contact lines ---------- */
.foot-col .fi { display: flex; align-items: center; gap: 10px; }
.foot-col .fi .ico { width: 17px; height: 17px; color: var(--cyan); }

/* ---------- three home header options (index.html?hero=1|2|3) ---------- */
.hv { display: block; position: relative; overflow: hidden; }
.hsearch { position: relative; display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 50px; margin-top: 30px; max-width: 560px; box-shadow: 0 14px 34px -24px rgba(24,33,63,.35); }
.hsearch > span:first-child svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.hsearch input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 16px; color: var(--ink); caret-color: var(--indigo); }
.hsearch input::placeholder { color: #7a849c; }
.hsearch input:focus { outline: none; }
.hsearch .btn { height: 46px; }
.hsearch.big { max-width: 720px; margin-left: auto; margin-right: auto; padding: 8px 8px 8px 56px; }
.hsearch.big input, .hsearch.big .btn { height: 52px; }
.lead { font-size: 19px; color: #46506d; margin-top: 18px; max-width: 32em; }
/* option 1 */
.hv1 { background: linear-gradient(180deg, #f6fafd 0%, #e7f1fa 100%); padding: 64px 0 80px; }
.hv1-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.hv1 h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.08; }
.ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.ticks li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #3a4361; font-weight: 500; }
.ticks li > svg { width: 19px; height: 19px; color: var(--cyan); }
.hv1-art { position: relative; padding: 0 0 40px 40px; }
.hv1 .photo { border-radius: 32px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 30px 60px -36px rgba(24,33,63,.45); }
.hv1 .photo img { width: 100%; height: 100%; object-fit: cover; animation: photoIn 1.6s var(--ease) both; }
.hv1 .p { position: absolute; bottom: 0; filter: drop-shadow(0 22px 22px rgba(24,33,63,.28)); animation: rise 1.1s var(--ease) both; }
.hv1 .p1 { left: 0; height: 52%; animation-delay: .35s; }
.hv1 .p2 { left: 19%; height: 58%; animation-delay: .5s; }
.hv1 .badge { position: absolute; right: -14px; top: 36px; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 12px 18px 12px 12px; box-shadow: 0 20px 40px -22px rgba(24,33,63,.45); animation: rise 1s var(--ease) .75s both; }
.hv1 .badge .ic { width: 44px; height: 44px; border-radius: 12px; background: #e8f3fb; color: var(--cyan); display: grid; place-items: center; }
.hv1 .badge b { display: block; font-size: 15px; }
.hv1 .badge small { display: block; color: var(--muted); font-size: 13px; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes photoIn { from { opacity: 0; transform: scale(1.06); } }
/* option 2 */
.hv2 { min-height: 640px; display: none; align-items: center; padding: 72px 0; }
html[data-hero="2"] .hv2 { display: flex; }
.hv2 .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: bannerIn 2.4s var(--ease) both; }
.hv2::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(246,250,253,.98) 0%, rgba(246,250,253,.93) 38%, rgba(246,250,253,.4) 62%, rgba(246,250,253,0) 80%); }
.hv2 { isolation: isolate; }
.hv2 > .wrap { width: 100%; }
.hv2-box { max-width: 600px; animation: rise 1s var(--ease) .2s both; }
.hv2 h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.08; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.quick a { height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; color: #3a4361; transition: border-color .2s, color .2s; }
.quick a:hover { border-color: var(--indigo); color: var(--indigo); }
/* option 3 */
.hv3-top { background: linear-gradient(120deg, #334593 0%, #1a72bb 55%, #0aa0e0 100%); color: #fff; text-align: center; padding: 76px 0 150px; }
.hv3 h1 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.1; max-width: 15em; margin: 0 auto; }
.hv3 .lead { color: #e4eefc; margin-left: auto; margin-right: auto; }
.hv3 .hsearch { border-color: transparent; box-shadow: 0 24px 50px -28px rgba(10,20,60,.55); }
.hv3-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -96px; position: relative; padding-bottom: 24px; }
.hc { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 44px -30px rgba(24,33,63,.45); transition: transform .35s var(--ease); animation: rise .9s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 250ms); }
.hc:hover { transform: translateY(-4px); }
.hc img { width: 100%; aspect-ratio: 900 / 640; object-fit: cover; }
.hc > span { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 16px; font-family: var(--serif); font-size: 19px; }

@media (max-width: 1080px) {
  .results .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pgrid.four { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .cart-btn span { display: none; }
  .cart-btn { padding: 0 14px; }
  .shop { padding-top: 0; }
  .shop-grid { grid-template-columns: 1fr; gap: 20px; }
  .side { position: sticky; top: 68px; z-index: 20; grid-template-columns: 1fr 1fr; gap: 10px; background: rgba(238,246,251,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 0; margin: 0 -32px; padding-left: 32px; padding-right: 32px; border-bottom: 1px solid var(--line); }
  .side { grid-template-rows: auto; max-height: none; }
  .side-cats { display: none; }
  .cat-select { display: block; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 0 36px 0 14px; font-size: 15px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6b7590 50%), linear-gradient(135deg, #6b7590 50%, transparent 50%); background-position: calc(100% - 20px) 54%, calc(100% - 15px) 54%; background-size: 5px 5px; background-repeat: no-repeat; }
  .results .pgroup { padding-top: 12px; }
  .co-grid { grid-template-columns: 1fr; }
  .co-sum { position: static; order: -1; }
  .hv1-grid { grid-template-columns: 1fr; gap: 40px; }
  .hv3-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .head-tools { gap: 8px; }
  .lang-cur { height: 38px; }
  .side { margin: 0 -20px; padding-left: 20px; padding-right: 20px; grid-template-columns: 1fr; }
  .results .pgrid, .pgrid.four { grid-template-columns: 1fr 1fr; gap: 10px; }
  .addb { height: 38px; font-size: 13px; gap: 6px; }
  .addb .ico { width: 16px; height: 16px; }
  .stepper { height: 38px; }
  .stepper button { width: 30px; height: 30px; }
  .opts { gap: 8px; }
  .opt { font-size: 13px; min-height: 42px; }
  .pd-specs { flex-direction: column; }
  .toast { left: 12px; right: 12px; transform: translateY(140%); justify-content: space-between; }
  .toast.show { transform: none; }
  .hv1 { padding: 36px 0 56px; }
  .hv1 h1, .hv2 h1 { font-size: 36px; }
  .hv1-art { padding: 0 0 26px 18px; }
  .hv1 .badge { right: 8px; top: 14px; padding: 8px 12px 8px 8px; }
  .hv1 .badge .ic { width: 36px; height: 36px; }
  .hsearch { padding-left: 44px; }
  .hsearch > span:first-child svg { left: 16px; }
  .hsearch .btn { padding: 0 16px; }
  .hv2 { min-height: 0; padding: 48px 0 56px; }
  .hv2::after { background: linear-gradient(180deg, rgba(246,250,253,.94) 0%, rgba(246,250,253,.9) 100%); }
  .hv3-top { padding: 52px 0 120px; }
  .hv3 h1 { font-size: 34px; }
  .hv3-cards { margin-top: -80px; gap: 10px; }
  .hc > span { font-size: 15px; padding: 10px 12px 12px; }
  .band .text { padding: 36px 24px; }
}

.hv3 { padding: 0; }
.hv1, .hv2 { padding-left: 0; padding-right: 0; }

/* grids never grow past the screen (long product names, search fields) */
.pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.results .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .results .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgrid.four, .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .shop-grid, .hv1-grid, .pd-grid, .co-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pgrid, .pgrid.four, .results .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hsearch { max-width: 100%; } }

/* ---------- closing banner: brand blue with real products ---------- */
.band-2 { padding-bottom: 0; }
.b2 { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 84px 0 0; background: linear-gradient(120deg, #334593 0%, #1a72bb 55%, #0aa0e0 100%); }
.b2 h2 { font-size: clamp(30px, 3.6vw, 50px); max-width: 17em; margin: 0 auto; }
.b2 p { color: #e3ecfb; font-size: 18px; margin-top: 14px; }
.b2 .actions { margin-top: 30px; justify-content: center; }
.b2-line { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: 48px; padding-bottom: 44px; }
.b2-line::after { content: ''; position: absolute; left: 50%; bottom: 30px; width: min(760px, 80%); height: 36px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(8,20,60,.35), transparent); z-index: 0; }
.b2-line img { position: relative; z-index: var(--z, 1); height: calc(var(--h) * 1px); width: auto; margin: 0 -14px; filter: drop-shadow(0 16px 18px rgba(8,20,60,.35)); }
.js .b2-line img { opacity: 0; transform: translateY(70px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i) * 110ms + 200ms); }
.js .b2.in .b2-line img { opacity: 1; transform: none; }
@media (max-width: 600px) {
    .b2 { padding-top: 56px; }
  .b2-line { margin-top: 32px; padding-bottom: 30px; }
  .b2-line::after { bottom: 20px; height: 24px; }
  .b2-line img { height: calc(var(--h) * .55px); margin: 0 -8px; }
  .b2-line img:nth-child(1), .b2-line img:nth-child(5) { display: none; }
  .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .js .b2-line img { opacity: 1 !important; transform: none !important; } }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border-radius: 16px; padding: 14px 18px; margin-bottom: 28px; font-size: 16px; }
.results-head[hidden] { display: none; }
.results-head b { font-weight: 700; }
.results-head button { border: 1px solid var(--line); background: #fff; border-radius: 999px; height: 38px; padding: 0 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.results-head button:hover { border-color: var(--indigo); color: var(--indigo); }

/* footer bottom line: copyright and policy links on one line (as on akiconstructions.com.cy) */
.foot-bottom { align-items: center; }
.foot-bottom .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.foot-bottom .legal span { color: #c3cdd9; }
.foot-bottom .legal a:hover { color: var(--ink); }

/* header search: always on top and easy to click into */
.hv3 .hsearch { z-index: 8; }
.hsearch { cursor: text; }
.hsearch > span:first-child, .hsearch > span:first-child svg { pointer-events: none; }
.hsearch input { cursor: text; position: relative; z-index: 1; }

/* live search suggestions */
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 50; background: #fff; border-radius: 20px; box-shadow: 0 28px 60px -24px rgba(15,22,52,.45), 0 0 0 1px rgba(24,33,63,.06); padding: 8px; text-align: left; max-height: min(70vh, 560px); overflow-y: auto; color: var(--ink); }
.sugg[hidden] { display: none; }
.sugg .sh { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 12px 6px; }
.sugg .si { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 12px; }
.sugg .si:hover, .sugg .si.on, .sugg .sall:hover, .sugg .sall.on { background: var(--bg); }
.sugg .sp { width: 48px; height: 48px; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--line2); display: grid; place-items: center; overflow: hidden; }
.sugg .sp img { width: 100%; height: 100%; object-fit: contain; }
.sugg .sp.cat { background: #e8f3fb; border-color: transparent; color: var(--cyan); }
.sugg .sp.cat svg { width: 22px; height: 22px; }
.sugg b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.sugg small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sugg .sall { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 12px; border-radius: 12px; font-weight: 600; font-size: 14px; color: var(--indigo); border-top: 1px solid var(--line2); }
.sugg .sall svg { width: 18px; height: 18px; }
.sugg .snone { padding: 16px 12px; color: var(--muted); font-size: 14.5px; }
.sugg .sfoot { padding: 8px 12px 4px; font-size: 12px; color: #98a2b8; border-top: 1px solid var(--line2); margin-top: 4px; }
@media (max-width: 600px) { .sugg .sfoot { display: none; } .sugg { border-radius: 16px; } }

.hv3 { overflow: visible; }
.hv3-cards { z-index: 5; }

.photo.bare { background: none; aspect-ratio: auto; border-radius: 0; overflow: visible; align-self: start; margin-top: -32px; }
.photo.bare img { height: auto; object-fit: contain; }

.band .box > div:first-child:not(.text):not(.photo) { padding: 56px 0 56px 56px; align-self: center; }
.band .box > .actions { padding: 56px 56px 56px 0; align-self: center; flex-wrap: wrap; }
@media (max-width: 980px) { .band .box > div:first-child:not(.text):not(.photo) { padding: 36px 24px 0; } .band .box > .actions { padding: 20px 24px 36px; } }
a.btn.btn-primary, a.btn.btn-primary:hover, a.btn.btn-primary:focus-visible { color: #fff; }

/* phone header: menu on the left, logo in the middle, language + quote list on the right */
@media (max-width: 980px) {
  .site-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .site-head .brand .mark { height: 34px; } .site-head .brand .word { height: 20px; } .site-head .brand { gap: 8px; }
  .head-tools .cart-btn { width: 42px; height: 42px; }
  .menu-btn { grid-column: 1; justify-self: start; margin-left: -10px; }
  .brand { grid-column: 2; }
  .head-tools { grid-column: 3; justify-self: end; margin-left: 0; }
}

.m-lang { display: none; }
@media (max-width: 980px) {
  .head-tools .lang-dd { display: none; }
  .menu-open .site-nav .m-lang { display: flex; gap: 10px; padding-top: 18px; }
  .m-lang button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
  .m-lang button svg { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(24,33,63,.1); }
  .m-lang button[aria-pressed="true"] { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo); }
}
@media (max-width: 980px) { .head-tools .cart-btn { padding: 0; gap: 0; justify-content: center; } .head-tools .cart-btn .ico { margin: 0; } }

.pd-bullets { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.pd-bullets li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: var(--muted); }
.pd-bullets li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); flex: none; transform: translateY(-2px); }
.pd-bullets li b { color: var(--ink); font-weight: 600; }
.pd-bullets li span::after { content: ':'; }

/* product page: quantity and the add button on one row, same height */
.pd-info .pd-buy { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: nowrap; }
.pd-info .pd-buy .stepper.big { flex: none; width: 150px; height: 54px; }
.pd-info .pd-buy .stepper.big button { width: 44px; height: 44px; }
.pd-info .pd-buy .pd-actions { margin: 0; flex: 1; display: block; }
.pd-info .pd-buy .pd-actions .btn { width: 100%; height: 54px; }
.opt[aria-pressed="true"] { background: #fff; }
@media (max-width: 420px) { .pd-info .pd-buy { flex-wrap: wrap; } .pd-info .pd-buy .stepper.big { width: 100%; } }

.pd-info .pd-buy { display: block; margin-top: 28px; }
.pd-info .pd-buy .pd-actions .btn { width: auto; min-width: 260px; padding: 0 34px; }
@media (max-width: 600px) { .pd-info .pd-buy .pd-actions .btn { width: 100%; } }