:root{
  --navy:#1a2948;
  --line:#162b48;
  --red:#e50000;
  --dark:#111;
  --muted:#8b8b8b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy);
  color:var(--dark);
  font-family:Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.topbar{
  height:74px;
  background:#fff;
  border-bottom:18px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.topnav{
  width:min(900px,100%);
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:52px;
  padding:0 28px;
  font-size:17px;
}
.topnav a{color:#111;text-decoration:none}
.page{
  width:min(900px,100%);
  margin:0 auto;
  background:#fff;
  min-height:100vh;
}
.content{
  padding:54px 50px 46px;
  font-size:21px;
  line-height:1.34;
}
.badge{
  width:max-content;
  margin:0 auto 23px;
  background:#b18750;
  color:#fff;
  font-weight:700;
  letter-spacing:.4px;
  padding:4px 11px 3px;
  font-size:16px;
}
.meta{
  display:flex;
  justify-content:center;
  gap:44px;
  color:#9b9b9b;
  font-size:17px;
  margin-bottom:21px;
}
h1{
  margin:0 auto 47px;
  max-width:760px;
  text-align:center;
  font-size:33px;
  line-height:1.18;
  font-weight:800;
  text-transform:uppercase;
}
.headline-red{display:block;color:#f00000;margin-bottom:7px}
.headline-mark{
  color:#2a2a2a;
  background:#d3d3d3;
  padding:0 .08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
p{margin:0 0 24px}
.quote{margin-top:23px}
h2,h3{font-weight:800}
h3{font-size:23px;margin:38px 0 20px}
.danger{
  margin:29px 0 29px;
  text-align:center;
  color:#ec0000;
  font-size:24px;
}
.section-red{
  color:#e60000;
  font-size:24px;
  margin:39px 0 20px;
}
.facts{
  margin:0 0 27px;
  padding-left:39px;
}
.facts li{margin:0 0 23px;padding-left:1px}
.figure{margin:27px auto 31px;text-align:center}
.figure img{display:block;max-width:100%;height:auto;margin:0 auto}
.figure-wide img{width:550px}
.figure-medium img{width:410px}
.figure figcaption{
  margin-top:11px;
  font-size:17px;
  line-height:1.25;
  font-weight:700;
  font-style:italic;
}
.bottle{margin:47px auto 52px}
.bottle-wrap{
  position:relative;
  width:170px;
  margin:0 auto;
}
.bottle img{width:100%;display:block}
.bottle-brand{
  position:absolute;
  top:29.2%;
  left:50%;
  transform:translateX(-50%);
  width:72%;
  box-sizing:border-box;
  padding:1px 2px 2px;
  background:#1b4f78;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.25px;
  text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  pointer-events:none;
}
.heart{margin-top:42px}
.warning-box{
  margin:36px 0 31px;
  border:3px solid #e00000;
  background:#fff1f1;
  padding:30px 17px 26px;
}
.warning-box h2{
  margin:0 0 24px;
  color:#e10000;
  text-align:center;
  font-size:24px;
}
.warning-box p{margin-bottom:18px}
.warning-box .stock{
  text-align:center;
  font-size:22px;
  line-height:1.25;
  margin:4px 0 0;
}
.conditions-box{
  margin:0 0 17px;
  border:1px solid #998354;
  background:#fff4c9;
  padding:19px 12px 14px;
}
.conditions-box h2{
  margin:0 0 20px;
  color:#f00000;
  font-size:23px;
}
.conditions-box h2 a{color:#073cff}
.conditions-box p{margin:0 0 16px}
.important-box{
  margin-bottom:45px;
  padding:12px 11px;
  border:2px solid #ed2222;
  background:#dfead6;
  font-size:20px;
  line-height:1.3;
}
.important-box strong{color:#f00000}
.door-title{
  display:block;
  margin:0 auto 23px;
  border-radius:13px;
  background:#3f4f5a;
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-weight:800;
  font-size:23px;
  line-height:1.2;
  padding:11px 12px;
}
.doors{margin:0 auto 44px}
.doors img{width:740px}
hr{border:0;border-top:1px solid #9d9d9d;margin:0 0 43px}
.comments h2{
  margin:0 0 26px;
  color:#ef0000;
  font-size:22px;
}
.comment{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:0;
  align-items:start;
  margin-bottom:24px;
}
.avatar{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:50%;
}
.comment h3{
  margin:4px 0 13px;
  font-size:22px;
  line-height:1.1;
}
.comment p{
  margin:0;
  font-size:21px;
  line-height:1.35;
  text-indent:0;
}
.order-anchor{scroll-margin-top:20px}
.order-btn{
  display:block;
  width:max-content;
  max-width:100%;
  margin:42px auto 28px;
  background:#e6322b;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  padding:10px 18px;
  border-radius:22px;
  text-align:center;
}
.footer{
  min-height:162px;
  background:var(--navy);
  color:#fff;
  padding:45px 24px 28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-size:18px;
  line-height:1.15;
}
@media (max-width:760px){
  .topbar{height:58px;border-bottom-width:10px}
  .topnav{height:48px;gap:0;justify-content:space-around;padding:0 8px;font-size:12px}
  .page{width:100%}
  .content{padding:30px 18px 32px;font-size:17px;line-height:1.43}
  .badge{font-size:12px;margin-bottom:15px}
  .meta{font-size:12px;gap:24px;margin-bottom:14px}
  h1{font-size:24px;line-height:1.17;margin-bottom:30px}
  .danger,.section-red{font-size:20px}
  h3{font-size:19px}
  .figure-wide img,.figure-medium img,.doors img{width:100%}
  .figure figcaption{font-size:13px}
  .bottle-wrap{width:min(38vw,170px)}
  .facts{padding-left:25px}
  .warning-box{padding:21px 13px 16px}
  .warning-box h2{font-size:20px}
  .warning-box .stock{font-size:18px}
  .conditions-box h2{font-size:19px}
  .important-box{font-size:16px;margin-bottom:28px}
  .door-title{font-size:17px;border-radius:8px;padding:9px 8px}
  .comments h2{font-size:19px}
  .comment{grid-template-columns:44px 1fr;margin-bottom:21px}
  .avatar{width:44px;height:44px}
  .comment h3{font-size:18px;margin:2px 0 8px}
  .comment p{font-size:16px;line-height:1.42}
  .order-btn{font-size:15px;margin-top:30px}
  .footer{min-height:120px;padding:30px 18px 20px;font-size:13px}
}
@media (max-width:390px){
  .content{padding-left:14px;padding-right:14px}
  h1{font-size:21px}
  .topnav{font-size:11px}
  .door-title{font-size:15px}
}

/* --- Interactive discount doors --- */
.door-promo{
  margin:0 auto 44px;
}
.door-promo .door-title{
  margin-bottom:28px;
}
.door-game{
  width:100%;
  max-width:740px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,190px));
  justify-content:center;
  gap:clamp(18px,5vw,50px);
  align-items:start;
}
.door-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:191 / 402;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  perspective:950px;
  -webkit-tap-highlight-color:transparent;
}
.door-reveal{
  position:absolute;
  inset:8% 1% 2% 8%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:2px solid #1c1c1c;
  overflow:hidden;
}
.discount-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:66%;
  aspect-ratio:1 / 1;
  max-width:108px;
  border:1px solid #aaa;
  border-radius:28%;
  background:#fff;
  color:#f00000;
  font-size:clamp(27px,4vw,48px);
  line-height:1;
  font-weight:900;
  box-shadow:0 3px 5px rgba(0,0,0,.28);
}
.door-front{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  transform-origin:left center;
  transform:rotateY(0deg);
  transition:transform .34s cubic-bezier(.2,.72,.25,1), filter .25s ease;
  backface-visibility:hidden;
  will-change:transform;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.2));
}
@media (hover:hover) and (pointer:fine){
  .door-card:not(.is-open):hover .door-front,
  .door-card:not(.is-open):focus-visible .door-front{
    transform:rotateY(-25deg);
    filter:drop-shadow(8px 5px 6px rgba(0,0,0,.22));
  }
}
.door-card.is-open .door-front{
  transform:rotateY(-78deg);
  transition-duration:.65s;
  filter:drop-shadow(12px 7px 8px rgba(0,0,0,.25));
}
.door-card:focus-visible{
  outline:3px solid #1b65b8;
  outline-offset:5px;
  border-radius:3px;
}
.door-game.is-locked .door-card:not(.is-open){
  pointer-events:none;
  opacity:.72;
}
.door-hint{
  margin:17px 0 0;
  text-align:center;
  font-size:15px;
  line-height:1.3;
  color:#666;
}
@media (max-width:760px){
  .door-game{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .door-reveal{border-width:1.5px}
  .discount-badge{
    width:72%;
    border-radius:24%;
    font-size:clamp(22px,9vw,40px);
  }
  .door-hint{font-size:13px;margin-top:12px}
}
@media (max-width:390px){
  .door-game{gap:8px}
  .discount-badge{font-size:clamp(20px,8.8vw,34px)}
}
@media (prefers-reduced-motion:reduce){
  .door-front{transition-duration:.01ms !important}
}




/* Product image: Paratozol — larger, proportional, responsive */
.product-main-image {
  display: block;
  width: min(100%, 460px);
  max-height: 520px;
  height: auto;
  margin: 18px auto 26px;
  object-fit: contain;
  image-rendering: auto;
}

@media (max-width: 768px) {
  .product-main-image {
    width: min(92vw, 390px);
    max-height: 440px;
    margin: 16px auto 22px;
  }
}

@media (max-width: 480px) {
  .product-main-image {
    width: min(94vw, 340px);
    max-height: 390px;
    margin: 14px auto 20px;
  }
}