@font-face{font-family:Vazir;src:url(assets/fa.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/en.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--ink:#132840;--muted:#50637a;--blue:#095bb7;--line:#dce6f1;--paper:#f6f9fd;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:26px}
body{margin:0;background:var(--white);color:var(--ink);font:500 15px/1.65 Manrope,Arial,sans-serif}
html[lang=fa] body{font-family:Vazir,Tahoma,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.wrap{width:min(calc(100% - 88px),1220px);margin-inline:auto}
.site-header{border-bottom:1px solid var(--line)}
.top{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:9px;color:#11447e;font:800 21px/1 Manrope,Arial;letter-spacing:-.05em;flex-shrink:0}
.brand img{width:34px;height:auto;display:block}
.brand img.brand-wordmark{width:124px;height:auto}
.brand small{display:block;font-size:7px;letter-spacing:.1em;margin-top:4px}
.top nav,.header-actions{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:750}
.top nav{align-self:stretch}
.top nav a{display:flex;align-items:center;position:relative;white-space:nowrap}
.top nav .current{color:var(--blue)}
.top nav .current::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--blue)}
.header-actions>a{color:var(--blue)}
.lang,.quiet{background:#fff;color:#21456d;border:1px solid #cddbea;border-radius:5px;font-weight:750}
.lang{min-width:53px;padding:6px 10px}
.crumb{display:flex;align-items:center;gap:12px;padding:22px 0;color:var(--muted);font-size:12px}
.crumb>*+*{border-inline-start:1px solid #cddbea;padding-inline-start:12px}
.crumb bdi{color:var(--ink);font-weight:800}
.hero{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:clamp(26px,5.5vw,82px);align-items:center}
.gallery{min-width:0;display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px}
.stage{grid-column:2;grid-row:1;isolation:isolate;position:relative;display:grid;place-items:center;height:clamp(400px,41vw,510px);overflow:hidden;border:1px solid var(--line);border-radius:8px;background:radial-gradient(ellipse at 50% 44%,#fff 25%,#edf4fc 85%)}
.studio-grid{position:absolute;inset:0;background:linear-gradient(#d1dfed80 1px,transparent 1px),linear-gradient(90deg,#d1dfed80 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse,transparent 25%,#000 95%)}
.stage>img{position:absolute;inset:0;width:100%;height:calc(100% - 49px);object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) invert(1) contrast(1.04) brightness(1.32) sepia(.11) hue-rotate(165deg);mask-image:radial-gradient(ellipse 53% 59%,black 67%,transparent 100%)}
.stage>img.in-use{height:100%;object-fit:cover;mix-blend-mode:normal;filter:none;mask-image:none}
.stage-footer{position:absolute;inset-inline:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#f6faffeb;border-top:1px solid var(--line);color:#315476;font-size:12px;font-weight:750}
.quiet{display:inline-block;padding:5px 10px;font-size:11px}
.quiet:hover,.lang:hover{background:#e8f2ff;border-color:#9bbbe0}
.thumbs{grid-column:1;grid-row:1;display:grid;gap:8px;align-content:start}
.thumbs button{display:grid;justify-items:center;align-content:start;gap:3px;padding:3px 3px 6px;border-radius:5px;border:1px solid var(--line);background:var(--paper);color:#34536f;font-size:10px;line-height:1.4;text-align:center}
.thumbs img{width:100%;height:61px;object-fit:contain;border-radius:3px;filter:grayscale(1) invert(1) contrast(1.04) brightness(1.32);mix-blend-mode:multiply}
.thumbs button:last-child img{filter:none;mix-blend-mode:normal;object-fit:cover}
.thumbs button[aria-pressed=true]{border-color:#3984d5;background:#edf5ff;color:#094d98;box-shadow:inset 0 0 0 1px #3984d5}
.eyebrow{font-size:12px;font-weight:800;color:var(--blue);margin:0 0 10px}
h1{font:800 clamp(54px,6vw,86px)/.99 Manrope,Arial,sans-serif;letter-spacing:-.07em;text-align:start;margin:0 0 11px}
html[dir=rtl] h1{text-align:right}
h2{font-size:clamp(23px,2.65vw,36px);line-height:1.25;letter-spacing:-.035em;margin:0}
html[dir=rtl] h2{letter-spacing:0}
.intro h2{font-size:clamp(20px,2.2vw,30px)}
.lede{max-width:420px;margin:12px 0 18px;color:var(--muted);line-height:1.85}
.facts{margin:0 0 22px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:1fr 1fr;align-items:center;border-bottom:1px solid var(--line);padding:8px 0}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:0;font-size:17px;font-weight:800}
.facts small{font-size:12px;font-weight:600;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:9px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:8px 14px;border:1px solid var(--blue);border-radius:5px;background:var(--blue);color:#fff;font-size:13px;font-weight:800;text-align:center}
.btn:hover{background:#094a95}
.btn.secondary{background:white;color:var(--blue);border-color:#b8cce2}
.btn.secondary:hover{background:#f1f7fe}
.section-nav{display:flex;gap:26px;margin-top:30px;border-bottom:1px solid var(--line);overflow:auto;white-space:nowrap}
.section-nav a{font-size:13px;color:#405a76;font-weight:750;padding:10px 0;border-bottom:2px solid transparent}
.section-nav a:hover,.section-nav a:focus-visible{color:var(--blue);border-color:var(--blue)}
.block{padding-top:34px;margin-bottom:42px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.section-heading span{color:#526f91;font:800 13px Manrope;letter-spacing:.08em}
.technical{display:grid;grid-template-columns:1.02fr 1fr;gap:18px;align-items:start}
.sheet,figure{border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:0}
table{width:100%;border-collapse:collapse}
tr:nth-child(odd){background:#f5f8fc}
th,td{text-align:start;padding:8px 15px;border-bottom:1px solid #e5edf6;font-size:13px}
th{color:var(--muted);font-weight:550;width:48%}
td{font-weight:750}
.note{font-size:12px;color:var(--muted);padding:0 15px;line-height:1.7}
.drawing{position:relative;border:0;padding:0;display:block;width:100%;background:#f4f8fe}
.drawing img{width:100%;max-height:365px;display:block;object-fit:contain}
.drawing .quiet{position:absolute;bottom:10px;inset-inline-end:10px}
figcaption{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-size:12px;color:var(--muted)}
figcaption strong{color:var(--ink)}
figcaption small{display:block;font-size:11px}
figcaption a{color:var(--blue);font-weight:800}
.application{display:grid;grid-template-columns:.9fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.application-photo{position:relative;min-height:280px;background:#ece4da}
.application-photo img{display:block;position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 47%}
.application-copy{padding:0 21px;background:#fbfdff}
article{padding:13px 0}
article+article{border-top:1px solid var(--line)}
article h3{margin:0 0 3px;font-size:16px}
article p{margin:0;color:var(--muted);font-size:13px;line-height:1.75}
.contact{margin:38px 0 30px;background:#edf5fe;border:1px solid var(--line);border-radius:7px;padding:23px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.contact h2{font-size:clamp(20px,2.3vw,29px)}
.contact p:last-child{margin:5px 0 0;color:var(--muted);font-size:13px}
.contact .btn{flex-shrink:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:15px 0;color:var(--muted);font-size:12px}
footer .brand{font-size:15px}
footer .brand img{width:24px}
footer .brand img.brand-wordmark{width:100px}
dialog{border:1px solid var(--line);border-radius:7px;padding:0;max-width:92vw;background:#fff}
dialog::backdrop{background:#061528bf}
dialog img{display:block;max-width:92vw;max-height:84vh;object-fit:contain}
dialog button{position:absolute;inset-inline-end:8px;top:8px;background:white;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px 11px}
@media(max-width:1000px){
  .wrap{width:calc(100% - 50px)}
  .top nav,.header-actions{gap:14px}
  .gallery{grid-template-columns:65px minmax(0,1fr);gap:8px}
  .thumbs img{height:51px}
  .stage{height:420px}
}
@media(max-width:740px){
  .wrap{width:calc(100% - 32px)}
  .top{min-height:59px}
  .top nav{display:none}
  .hero,.technical,.application{grid-template-columns:1fr}
  .hero{gap:20px}
  .intro{display:contents}
  .intro .eyebrow,.intro h1,.intro h2,.intro .lede{grid-column:1;margin:0}
  .intro .eyebrow{grid-row:1}
  .intro h1{grid-row:2}
  .intro h2{grid-row:3}
  .intro .lede{grid-row:4;margin-bottom:3px}
  .hero{row-gap:9px}
  .gallery{grid-row:5;margin-bottom:9px;grid-template-columns:minmax(0,1fr)}
  .stage{grid-column:1;height:clamp(300px,95vw,430px)}
  .thumbs{grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts{margin-bottom:5px}
  .section-nav{margin-top:22px;gap:17px}
  .block{padding-top:25px;margin-bottom:25px}
  .application-photo{min-height:245px}
  .contact{align-items:flex-start;flex-direction:column;padding:15px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:400px){.header-actions>a{display:none}.section-nav{gap:13px}.section-nav a{font-size:12px}}

/* Product catalog layout */
:root {
  --ink: #14283e;
  --blue: #1257a7;
  --line: #dae4ee;
}
body { background: #f4f7fb; }
.site-header { background: #fff; }
.hero {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: clamp(24px, 4.5vw, 70px);
  align-items: center;
  padding: clamp(16px, 2.2vw, 32px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.stage {
  grid-column: 1;
  height: auto;
  aspect-ratio: 1.05;
  background: #eef4fa;
  border-radius: 9px;
}
.stage > img {
  position: static;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  mask-image: none;
}
.stage-footer {
  background: #fff;
  font-size: 13px;
  padding: 8px 12px;
}
.stage-footer small {
  margin-inline-start: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.thumbs {
  grid-row: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.thumbs button {
  grid-template-columns: 36px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 5px;
  text-align: start;
  padding: 4px;
  background: #f8fafd;
  font-size: 11px;
}
.thumbs img, .thumbs button:last-child img {
  height: 36px;
  object-fit: cover;
  filter: none;
  mix-blend-mode: normal;
}
.intro h1 {
  color: #102a48;
  font-size: clamp(51px, 6vw, 92px);
  letter-spacing: -.085em;
}
.intro h2 { font-size: clamp(22px, 2.5vw, 32px); }
.lede { margin-bottom: 24px; }
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #f6f9fd;
}
.facts div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 9px 13px;
}
.facts div:nth-child(odd) { border-inline-end: 1px solid var(--line); }
.facts div:nth-child(n+3) { border-bottom: none; }
.facts dd { color: #183c63; font-size: 19px; }
.section-nav {
  margin-top: 18px;
  padding-inline: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.section-nav a { padding-block: 13px; }
.block {
  padding: clamp(17px, 3vw, 32px);
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.section-heading { margin-bottom: 20px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.section-heading span { align-self: end; }
.technical { gap: 22px; }
th, td { padding-block: 10px; }
.application-photo { min-height: 315px; }
.closure {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.contact { background: #e6effa; margin-top: 20px; }
@media (max-width: 1000px) {
  .thumbs button { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .thumbs img, .thumbs button:last-child img { height: 43px; }
}
@media (max-width: 740px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 14px; }
  .intro .eyebrow { margin-top: 2px; }
  .intro .lede { margin-bottom: 9px; }
  .stage { aspect-ratio: 1 / 1.1; }
  .stage > img { max-height: 100%; }
  .gallery { margin-bottom: 6px; }
  .section-nav { padding-inline: 10px; }
  .section-nav a { font-size: 11px; }
  .technical { gap: 12px; }
  .application-photo { min-height: 235px; }
}
.stage > img { position: absolute; height: calc(100% - 45px); max-height: none; }
.stage > img.studio { object-fit: cover; }
.stage > img.in-use { height: calc(100% - 45px); }
.image-actions { display: flex; gap: 5px; flex-shrink: 0; }
.image-actions [hidden] { display: none; }
@media(max-width:540px) {
  .stage-footer small { display: block; margin-inline-start: 0; }
  .stage-footer small[hidden] { display: none; }
  .stage-footer .quiet { padding-inline: 6px; }
  .stage > img, .stage > img.in-use { height: calc(100% - 53px); }
}

.dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.dialog-toolbar button, .model-controls button { position: static; }
.zoom-controls, .closure-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zoom-controls output { min-width: 44px; text-align: center; font-weight: 700; font-size: 12px; }
.zoom-controls button:disabled { opacity: .45; cursor: default; }
.zoom-scroll { direction: ltr; width: min(96vh, 88vw, 760px); max-height: 76vh; overflow: auto; background: #f4f8fe; }
.zoom-scroll img { display: block; max-width: none; max-height: none; height: auto; }
#model-dialog { width: min(680px, 92vw); max-height: 94vh; }
#bottle-model { width: 100%; height: auto; max-height: 55vh; display: block; background: radial-gradient(ellipse, #fff, #e1edf8); cursor: grab; touch-action: none; }
#bottle-model:active { cursor: grabbing; }
.model-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; padding: 12px 14px 4px; align-items: center; }
.model-controls label { min-width: 0; font-size: 12px; }
.model-controls input { display: block; width: 100%; accent-color: var(--blue); }
.viewer-note { margin: 8px 14px 14px; font-size: 12px; color: var(--muted); }
.closure-links a { color: var(--blue); font-size: 12px; font-weight: 750; text-decoration: underline; }
.related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-list a { border: 1px solid var(--line); border-radius: 5px; padding: 5px 12px; color: var(--blue); font-weight: 800; font-size: 13px; }
@media(max-width:540px) {
  .stage-footer { flex-wrap: wrap; }
  .stage > img, .stage > img.in-use { height: calc(100% - 82px); object-fit: contain; }
}
.application-photo { background: #d8e7f7; }
.application-photo img { object-fit: contain; object-position: center; }
@media(max-width:540px) {
  .stage { aspect-ratio: 1 / 1.24; }
  .stage-footer > div:first-child { width: 100%; }
  .image-actions { max-width: 100%; flex-wrap: wrap; }
}

.technical { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; gap: 16px; }
.spec-dimensions, .spec-details article { border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.spec-dimensions h3, .spec-details h3 { font-size: 15px; margin: 0 0 14px; }
.dimension-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; }
.dimension-list > div { padding: 10px 12px; background: #f2f7fd; border-radius: 5px; }
.dimension-list dt, .spec-details dt { color: var(--muted); font-size: 12px; }
.dimension-list dd { margin: 2px 0 0; color: #153b63; font-size: 17px; font-weight: 800; }
.technical figure { display: flex; flex-direction: column; }
.technical .drawing { flex: 1; display: grid; place-items: center; }
.technical .drawing img { max-height: 285px; }
.spec-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.spec-details dl { margin: 0; }
.spec-details dl div { display: grid; grid-template-columns: minmax(88px,.75fr) minmax(0,1.25fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.spec-details dd { margin: 0; font-size: 13px; font-weight: 700; }
.spec-details .note { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
.model-controls { grid-template-columns: 1fr 1fr auto auto; }
@media (max-width:740px) {
  .technical, .spec-details { grid-template-columns: minmax(0,1fr); }
  .model-controls { grid-template-columns: 1fr 1fr; }
}
.photo-viewport { position:absolute; inset:0 0 45px; overflow:hidden; cursor:zoom-in; }
.photo-viewport > img { display:block; width:100%; height:100%; object-fit:cover; }
.photo-viewport.magnified > img { transform:scale(2.15); }
.similar-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.similar-card { display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.similar-card:hover { border-color:#598ac2; }
.similar-card img { display:block; width:100%; height:168px; object-fit:contain; background:#f0f5fa; }
.similar-card > div { padding:12px 14px; }
.similar-card span { font-size:11px; color:var(--blue); font-weight:750; }
.similar-card h3 { margin:3px 0; font-size:21px; }
[dir=rtl] .similar-card h3 { text-align:right; }
.similar-card p { margin:0; font-size:12px; color:var(--muted); }
#bottle-model { background:radial-gradient(ellipse at 49% 42%,#f3f8ff 0%,#d7e7f8 65%,#c8dcef 100%); }
@media(max-width:540px) {
  .photo-viewport { inset-block-end:76px; }
  .similar-grid { grid-template-columns:1fr; }
  .similar-card { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; }
  .similar-card img { height:100px; }
}

.similar-intro { margin:8px 0 0; color:var(--muted); font-size:14px; }
.similar-grid { gap:16px; }
.similar-card { display:flex; flex-direction:column; border-radius:11px; background:#fff; }
.similar-card img { aspect-ratio: 1.25; height:auto; width:100%; object-fit:cover; object-position:center 52%; background:#d8e8f8; }
.similar-card .similar-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; padding:15px 17px 17px; }
.similar-card .similar-copy > span:first-child { background:#eaf3fc; padding:3px 8px; border-radius:4px; }
.similar-card h3 { margin:8px 0 2px; font-size:25px; }
.similar-card p { margin-bottom:12px; }
.similar-card .similar-cta { display:block; align-self:stretch; margin-top:auto; border-top:1px solid var(--line); padding-top:9px; font-size:12px; }
@media(max-width:630px) {
  .similar-grid { grid-template-columns:1fr; gap:10px; }
  .similar-card { display:grid; grid-template-columns:minmax(105px,32%) minmax(0,1fr); }
  .similar-card img { height:100%; min-height:122px; aspect-ratio:auto; object-fit:contain; }
  .similar-card .similar-copy { padding:10px 12px; }
  .similar-card h3 { font-size:21px; }
}
.model-stage { position:relative; }
.model-base-photo { position:absolute; inset:0; display:grid; place-items:center; background:#d9e8f9; pointer-events:none; }
.model-base-photo[hidden] { display:none; }
.model-base-photo img { width:100%; height:100%; object-fit:contain; position:absolute; }
.model-base-photo span { position:absolute; bottom:10px; inset-inline-start:12px; border-radius:4px; background:#f7fbffef; color:#315579; padding:3px 8px; font-size:11px; }
#model-bottom[aria-pressed=true] { border-color:#608bb9; background:#e8f2fd; }
@media(min-width:631px) { .similar-card img { aspect-ratio:1.16; } }
.model-base-photo img { mask-image:radial-gradient(ellipse 67% 100%,#000 58%,transparent 100%); }
#bottle-model { aspect-ratio:68/49; max-height:none; background:radial-gradient(ellipse at 49% 48%,#eaf3ff 0%,#dceafa 58%,#cfdef1 100%); }
@media (max-height:680px) { #bottle-model { max-height:53vh; } }

.bottle-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.suggestion-group { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.suggestion-group h3 { margin:0; padding:11px 15px; font-size:15px; background:#f4f8fd; border-bottom:1px solid var(--line); }
.suggestion-product { display:grid; grid-template-columns:minmax(100px,42%) minmax(0,1fr); align-items:center; }
.suggestion-product img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.suggestion-product > div { padding:12px 15px; }
.suggestion-product strong,.cap-feature strong { display:block; font-size:25px; line-height:1.2; }
[dir=rtl] .suggestion-product strong,[dir=rtl] .cap-feature strong { text-align:right; }
.suggestion-product p,.cap-feature p { font-size:13px; color:var(--muted); margin:7px 0 12px; }
.suggestion-product span { color:var(--blue); font-size:12px; font-weight:750; }
.suggestion-product:hover span { text-decoration:underline; }
.cap-feature { display:grid; grid-template-columns:minmax(125px,27%) minmax(0,1fr); margin-top:18px; align-items:center; gap:20px; background:#eff6fe; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cap-feature > img { display:block; width:100%; height:178px; object-fit:cover; }
.cap-feature h3 { font-size:15px; margin:0 0 6px; }
.cap-feature > div { padding:12px 0; padding-inline-end:14px; }
.cap-actions,.cap-preview-controls { display:flex; flex-wrap:wrap; gap:8px; }
#cap-dialog { width:min(510px,92vw); }
#cap-preview { width:100%; height:min(55vh,410px); max-width:none; object-fit:contain; background:#d7e8f8; }
.cap-preview-controls { padding:10px 14px 0; }
.cap-preview-controls button { position:static; }
.cap-preview-controls [aria-pressed=true] { background:#e4f1ff; border-color:#6698cc; }
@media(max-width:690px) { .bottle-groups { grid-template-columns:1fr; gap:12px; } .cap-feature { gap:10px; } .cap-feature > img { height:100%; min-height:125px; } }

#similar { padding-block:32px; }
#similar .section-heading { margin-bottom:23px; }
.bottle-groups { gap:22px; }
.suggestion-group { position:relative; border-color:#dce6f0; border-radius:12px; background:#fff; }
.suggestion-group h3 { position:absolute; z-index:1; inset-block-start:13px; inset-inline-start:13px; margin:0; padding:5px 10px; border:1px solid #ffffffcc; border-radius:5px; background:#ffffffee; color:#214b77; font-size:12px; }
.suggestion-product { display:block; }
.suggestion-product .suggestion-image { padding:0; background:#d8e8f9; overflow:hidden; }
.suggestion-image img { width:100%; height:clamp(194px,23vw,295px); aspect-ratio:auto; object-fit:cover; }
.suggestion-product > div:last-child { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:15px 17px 17px; }
.suggestion-product strong { font-size:28px; }
.suggestion-product p { grid-column:1; grid-row:2; margin:0; }
.suggestion-product span { grid-column:2; grid-row:1/3; border-bottom:1px solid #9cbbdb; white-space:nowrap; }
.cap-feature { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:22px; border-color:#dce6f0; background:#f6faff; }
.cap-feature > .cap-studio { display:grid; grid-template-columns:1fr .62fr; align-items:center; gap:1px; padding:0; background:#d8e8f9; }
.cap-studio img { width:100%; height:clamp(170px,22vw,260px); object-fit:cover; display:block; }
.cap-studio img:last-child { height:auto; aspect-ratio:1; border-radius:7px 0 0 7px; }
.cap-feature > div:last-child { padding:22px; }
.cap-feature h3 { color:#315780; }
@media(max-width:690px) {
  #similar { padding-block:21px; }
  .bottle-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .suggestion-group h3 { inset-block-start:7px; inset-inline-start:7px; padding:3px 6px; font-size:10px; }
  .suggestion-image img { height:170px; object-fit:contain; }
  .suggestion-product > div:last-child { display:flex; flex-direction:column; align-items:flex-start; padding:10px; }
  .suggestion-product strong { font-size:21px; }
  .suggestion-product p { font-size:11px; }
  .cap-feature { grid-template-columns:1fr; }
  .cap-feature > div:last-child { padding:15px; }
}
.suggestion-image img,.cap-studio img { object-fit:contain; }
.suggestion-image img { mask-image:radial-gradient(ellipse 76% 115%,#000 56%,transparent 100%); }
.suggestion-product .suggestion-image { display:grid; justify-items:center; }
.suggestion-image img { width:min(100%,clamp(194px,23vw,295px)); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.cap-studio img { mask-image:radial-gradient(ellipse at center,#000 50%,transparent 85%); }
@media(max-width:690px) { .suggestion-image img { width:min(100%,170px); } }

.recommendations { padding-block:clamp(20px,3vw,36px); }
.recommendations .section-heading { align-items:center; margin-bottom:22px; }
.recommendation-bottles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.recommendation { min-width:0; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.recommendation-media { position:relative; background:#d9e8fa; }
.recommendation-photo { --photo-square:calc((min(100vw - 154px, 1130px) - 16px) / 3.1); position:relative; display:block; aspect-ratio:1.55; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at center,#e2efff,#ccdef3); }
.recommendation-photo img { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:contain; transition:opacity .25s ease; }
.recommendation-photo img:first-child { width:min(100%,var(--photo-square)); inset-inline:0; margin-inline:auto; mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.recommendation-photo .detail-photo { opacity:0; object-fit:cover; mask-image:none; transition:opacity .25s ease; }
.recommendation-photo:focus-visible .detail-photo,.recommendation-media.is-detail .detail-photo { opacity:1; }
.recommendation-photo:focus-visible img:first-child,.recommendation-media.is-detail img:first-child { opacity:0; }
@media (hover:hover) and (pointer:fine) { .recommendation:has(.recommendation-photo:hover, .recommendation-body:hover) .detail-photo { opacity:1; } .recommendation:has(.recommendation-photo:hover, .recommendation-body:hover) .recommendation-photo img:first-child { opacity:0; } }
.detail-toggle { position:absolute; inset-block-end:10px; inset-inline-end:10px; border:1px solid #c2d5e9; border-radius:5px; padding:4px 8px; color:#234b76; background:#fff; font:inherit; font-size:11px; font-weight:750; }
.detail-toggle[aria-pressed=true] { background:#e9f4ff; }
.recommendation-body { padding:16px 18px; }
.recommendation-body h3 { color:#315b85; font-size:12px; margin:0 0 4px; }
.recommendation-body strong { display:block; font:800 29px/1.12 Manrope,sans-serif; }
[dir=rtl] .recommendation-body strong { text-align:right; }
.recommendation-body p { margin:7px 0 13px; font-size:13px; color:var(--muted); }
.recommendation-body > a { font-size:12px; font-weight:800; color:var(--blue); border-bottom:1px solid #b3c9df; }
.recommendation-cap { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; margin-top:16px; background:#f6faff; }
.recommendation-cap .recommendation-body { padding:clamp(16px,3vw,34px); }
.recommendation-cap .recommendation-photo { aspect-ratio:1.7; }
@media(max-width:620px) {
  .recommendation-bottles { gap:9px; }
  .recommendation-photo { --photo-square:100%; aspect-ratio:1; }
  .recommendation-body { padding:11px; }
  .recommendation-body strong { font-size:22px; }
  .recommendation-body p { font-size:11px; }
  .recommendation-cap { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .recommendation-photo img { transition:none; } }

.recommendations { background:#fbfdff; }
.recommendations .section-heading { padding-bottom:19px; border-bottom:1px solid var(--line); }
.shelf-group + .shelf-group { margin-top:27px; }
.shelf-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 14px; margin:0 0 11px; }
.shelf-heading h3 { margin:0; color:#173858; font-size:19px; }
.shelf-group .recommendation-photo { aspect-ratio:1.4; }
.shelf-group .recommendation-photo img { width:100%; object-fit:cover; mask-image:none; }
.shelf-group .recommendation-photo img:first-child { width:100%; mask-image:none; }
.shelf-group .recommendation-body { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 10px; padding:13px 16px; }
.shelf-group .recommendation-body p { grid-column:1; grid-row:2; margin:0; }
.shelf-group .recommendation-body a { grid-column:2; grid-row:1/3; white-space:nowrap; }
.use-badge { display:none; position:absolute; inset-block-start:10px; inset-inline-start:10px; padding:4px 8px; border-radius:4px; color:#163a5b; background:#fffffff0; font-size:11px; pointer-events:none; }
.recommendation-media.is-detail .use-badge,.recommendation-media:has(.recommendation-photo:focus-visible) .use-badge { display:block; }
@media (hover:hover) and (pointer:fine) { .recommendation:has(.recommendation-photo:hover,.recommendation-body:hover) .use-badge { display:block; } }
@media(max-width:620px) {
  .shelf-group .recommendation-photo { aspect-ratio:1; }
  .shelf-group .recommendation-body { display:flex; flex-direction:column; align-items:flex-start; padding:9px 10px; }
  .shelf-group .recommendation-body a { margin-top:5px; }
}

.shelf-group .recommendation-photo { aspect-ratio:1.23; }
#model-front-photo { z-index:1; }
@media(max-width:620px) { .shelf-group .recommendation-photo { aspect-ratio:1; } }
.application-photo img { object-fit:cover; }
.shelf-group article.recommendation { padding:0; }
.shelf-group .recommendation-photo { aspect-ratio:1.12; }
#model-front-photo img { mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent); }
@media(max-width:620px) { .shelf-group .recommendation-photo { aspect-ratio:1; } }

.recommendations > .recommendation-cap { margin:0 0 26px; }
#cap-dialog { width:min(790px,94vw); max-height:92vh; border-radius:14px; }
.cap-dialog-header { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--line); }
.cap-dialog-header button { position:static; }
.cap-dialog-header h2 { margin:3px 0 0; font-size:clamp(17px,2.1vw,23px); }
.cap-dialog-code { color:#37648e; font-size:11px; font-weight:800; }
.cap-comparison { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:stretch; }
.cap-comparison-image { display:grid; place-items:center; overflow:hidden; background:#d7e8f9; }
#cap-preview { display:block; width:100%; max-height:58vh; height:auto; aspect-ratio:1; object-fit:contain; }
.cap-comparison-panel { display:flex; flex-direction:column; justify-content:center; padding:20px; }
.cap-comparison-panel h3 { margin:0 0 10px; font-size:14px; }
.cap-preview-controls { display:grid; padding:0; gap:8px; }
.cap-preview-controls button { display:flex; align-items:center; gap:9px; width:100%; padding:5px 8px; text-align:start; font-size:12px; font-weight:750; }
.cap-preview-controls img { width:50px; height:50px; object-fit:cover; border-radius:4px; }
@media(max-width:560px) {
  .cap-comparison { grid-template-columns:1fr; }
  #cap-preview { max-height:45vh; }
  .cap-comparison-panel { padding:12px; }
  .cap-preview-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cap-preview-controls img { width:34px; height:34px; }
}

.gallery { gap:9px; }
.gallery .stage { aspect-ratio:1.16; }
.gallery .photo-viewport { inset:0; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.gallery-toolbar .thumbs { display:flex; gap:6px; margin:0; min-width:0; }
.gallery-toolbar .thumbs button { display:block; width:43px; height:43px; padding:2px; border-radius:5px; }
.gallery-toolbar .thumbs img,.gallery-toolbar .thumbs button:last-child img { width:100%; height:100%; object-fit:cover; }
.gallery-model { flex-shrink:0; min-height:43px; padding:6px 10px; white-space:nowrap; }
@media(max-width:540px) {
  .gallery .stage { aspect-ratio:1; }
  .gallery-toolbar .thumbs { gap:4px; }
  .gallery-toolbar .thumbs button { width:36px; height:40px; }
  .gallery-model { min-height:40px; padding-inline:6px; }
}

.compatible-caps .recommendation-cap { margin:0; }
#model-dialog { background:#fff; color:#183451; border-color:#d1dfed; border-radius:14px; }
#model-dialog .dialog-toolbar { border-color:#d8e5f1; }
#model-dialog .model-stage { isolation:isolate; background:radial-gradient(ellipse 41% 24% at 50% 89%,#9ab2cc80,transparent 80%),radial-gradient(ellipse 78% 76% at 41% 27%,#f7fafb 0%,#dde8ef 54%,#b6cedf 100%); }
#bottle-model { background:none; }
.model-actions { position:absolute; display:flex; gap:6px; inset-inline-end:12px; inset-block-end:12px; }
#model-dialog .model-actions button { position:static; background:#ffffffed; }
#model-dialog.model-warm { background:#1c1d1f; color:#f8f4e9; border-color:#555047; }
#model-dialog.model-warm .dialog-toolbar { border-color:#3f3c35; }
#model-dialog.model-warm .model-stage {
  background:
    radial-gradient(ellipse 47% 26% at 46% 92%, #91713866, transparent 86%),
    radial-gradient(ellipse 60% 90% at 35% 34%, #75603a 0%, #3d3528 38%, transparent 78%),
    radial-gradient(ellipse at 77% 42%, #33363b, #111214 73%);
}
#model-dialog.model-warm .quiet { background:#232326; color:#faf2df; border-color:#726349; }
#model-dialog.model-warm .quiet:hover { background:#393125; }
#model-dialog.model-warm .viewer-note { color:#c9c2b4; }
.model-lighting { display:flex; justify-content:center; gap:4px; }
#model-dialog .model-lighting button { white-space:nowrap; }
#model-dialog .model-lighting [aria-pressed="true"] { background:#e1efff; border-color:#83a8d2; }
#model-dialog.model-warm .model-lighting [aria-pressed="true"] { background:#5a4625; border-color:#a4834a; }
@media (max-width:460px) {
  #model-dialog .dialog-toolbar { flex-wrap:wrap; gap:8px; }
  .model-lighting { order:1; flex-basis:100%; }
}

/* Link to the separately hosted redesign. */
.header-actions .version-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:5px 12px;border:1px solid #095bb7;border-radius:5px;white-space:nowrap;color:#095bb7;background:#eef5ff}
@media(max-width:740px){.top{gap:12px}.header-actions{gap:10px}}