/* Product landing v2. Layout, sizes and colours reproduce the reference one-product page (Tailwind build,
   see _reference/). Colours come from content.php → CSS variables in index.php; do not edit per product. */
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
body{margin:0;line-height:inherit;background:#fff;color:#111827}
h1,h2,h3,p,dl,dd,figure{margin:0}
h2,h3{font-size:inherit;font-weight:inherit}
img,svg{display:block;vertical-align:middle}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:inherit}
button,input,select{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button{cursor:pointer;background:transparent;-webkit-appearance:button}
select{-webkit-appearance:none;appearance:none}

.wrap{width:100%;max-width:768px;margin:0 auto}
.bg-white{background:#fff}

/* hero + benefits */
.hero img{width:100%}
/* headline above the photo: the reference carries it inside the infographic, we keep text out of images (rule 1: = ad hook) */
.hero .h1{padding:20px 16px 0;margin:0;text-align:center;font-size:30px;line-height:36px;font-weight:800;color:#111827;letter-spacing:-.01em}
.hero .sub{padding:6px 16px 12px;text-align:center;font-size:16px;line-height:24px;font-weight:500;color:#4b5563}
.benefits{padding:0 12px}
.benefits dl{border-top:1px solid #f3f4f6}
.benefits dl>div{padding:16px 0}
.benefits dl>div+div{border-top:1px solid #f3f4f6}
.benefits dd{display:flex;align-items:center;font-size:16px;line-height:24px;font-weight:500;color:#374151}
.benefits svg{width:24px;height:24px;flex:none;margin-right:16px;color:var(--check)}

/* dark offer card: timer, prices, button, stock */
.offer{padding:24px;color:#fff;background:var(--dark)}
.offer .t-title{text-align:center}
.timer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-width:320px;margin:8px auto 0;place-content:center}
.timer>div{padding:4px;border-radius:8px;text-align:center}
.timer b{display:flex;align-items:center;justify-content:center;font-size:36px;line-height:40px;font-weight:700}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:12px}
.prices>div{text-align:center}
.prices span{font-size:14px;line-height:20px}
.prices .old,.prices .new{font-size:36px;line-height:40px;font-weight:700}
.prices .old{text-decoration:line-through}
.prices .new{color:var(--accent)}
.btn{position:relative;display:flex;width:100%;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--accent-border);
  background:var(--accent);padding:16px 8px;text-transform:uppercase;font-size:18px;line-height:28px;font-weight:700;color:#000}
.btn:hover{background:var(--accent-border)}
.btn:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #f9fafb,0 0 0 4px var(--accent-ring)}
.btn .ping{position:absolute;top:8px;left:28px;display:flex;width:40px;height:40px}
.btn .ping i{position:absolute;display:inline-flex;width:100%;height:100%;border-radius:9999px;background:var(--accent-ping);opacity:.75;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,to{transform:scale(2);opacity:0}}
.offer .mt-5{margin-top:20px}
.stock{text-align:center;margin-top:12px}

/* gallery: photos edge to edge, optional text between them (prose-sm) */
.gallery figure{margin:0}
.gallery figure img{width:100%}
.gallery .txt{padding:0 15px;font-size:14px;line-height:1.7142857;color:#374151}
.gallery .txt h2{font-size:20px;line-height:1.4;font-weight:700;color:#111827;margin:1.6em 0 .8em}
.gallery .txt p{margin:1.1428571em 0}
.gallery .txt strong{color:#111827;font-weight:600}
.gallery .txt ul{margin:1.1428571em 0;padding-left:1.5714286em}
.gallery .txt li{margin:.2857143em 0}

/* reviews */
.reviews{padding:24px 16px}
.reviews h2{font-weight:700;font-size:30px;line-height:36px;text-align:center}
.reviews h2 .small{font-size:24px;line-height:32px;font-weight:500}
.reviews h2 .big{color:#030712}
.rv-list{margin:20px 0 0}
.rv{display:flex;font-size:14px;line-height:20px;color:#6b7280}
.rv>*+*{margin-left:16px}
.rv .av{flex:none;padding:40px 0}
.rv .av span{display:flex;width:40px;height:40px;border-radius:9999px;align-items:center;justify-content:center;background:#1f2937;color:#fff;font-size:14px;overflow:hidden}
.rv .av img{width:40px;height:40px;object-fit:cover}
.rv .body{flex:1;padding:40px 0}
.rv+.rv .body{border-top:1px solid #e5e7eb}
.rv h3{font-weight:500;color:#111827}
.rv .stars{display:flex;align-items:center;margin-top:16px}
.rv .stars svg{width:20px;height:20px;flex:none;color:var(--star)}
.rv .text{margin-top:16px;font-size:14px;line-height:1.7142857;color:#374151}
.rv .photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.rv .photos img{border-radius:8px;width:100%}

/* order form (inside the dark card) */
form.order{margin-top:40px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:14px;line-height:24px;font-weight:500;color:#fff}
.fld label i{font-style:normal;color:#ef4444}
.fld .ctl{margin-top:8px;position:relative}
.fld input,.fld select{display:block;width:100%;border-radius:6px;padding:12px 14px;color:#fff;background:var(--field);
  box-shadow:inset 0 0 0 1px var(--field-ring);font-size:16px;line-height:24px}
.fld input::placeholder{color:#9ca3af;opacity:1}
.fld input:focus,.fld select:focus{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--dark)}
.fld select{padding-right:40px;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position:right 8px center;background-repeat:no-repeat;background-size:24px 24px}
.fld .err{display:none;margin-top:6px;font-size:13px;color:#fca5a5}
.fld.bad input{box-shadow:inset 0 0 0 2px #ef4444}
.fld.bad .err{display:block}
.form-error{margin:0 0 12px;padding:10px 12px;border-radius:6px;background:#7f1d1d;color:#fff;font-size:14px}
.btn[disabled]{background:#6b7280;border-color:#6b7280;color:#fff;cursor:not-allowed}
@media (min-width:640px){.fld input,.fld select{font-size:14px;line-height:24px}}

/* footer */
footer{padding:24px 16px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center}
footer nav div{margin:4px 8px}
footer nav a{font-size:14px;line-height:24px;color:#4b5563}
footer nav a:hover{color:#111827}
footer p{margin-top:16px;text-align:center;font-size:12px;line-height:20px;color:#6b7280}

/* «X щойно замовила» pop-up (our addition, rule 6): dark card like the offer block */
.notif{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9999;display:none;align-items:center;gap:12px;width:94%;max-width:400px;
  padding:12px;border-radius:12px;background:var(--dark);color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.25);font-size:14px;line-height:1.3}
.notif.show{display:flex;animation:ndown .5s ease-out}
.notif.hide{display:flex;animation:nup .5s ease-in forwards}
@keyframes ndown{from{top:-60px;opacity:0}to{top:12px;opacity:1}}
@keyframes nup{from{top:12px;opacity:1}to{top:-60px;opacity:0}}
.notif .ic{flex:none;width:40px;height:40px;border-radius:9999px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.notif .ic svg{width:22px;height:22px;fill:#111827}
.notif .nc{flex:1}
.notif .nt{font-weight:700;font-size:15px}
.notif .nd{font-size:13px;color:#d1d5db}
.notif .nd strong{color:#fff}
.notif .tm{flex:none;font-size:12px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.15);white-space:nowrap}

/* legal / info pages */
.page{padding:24px 16px 8px;font-size:15px;line-height:1.7;color:#374151}
.page h1{font-size:24px;line-height:32px;font-weight:700;color:#111827;margin-bottom:16px}
.page p{margin:0 0 12px}
.page a.back{display:inline-block;margin-top:12px;color:#111827;text-decoration:underline}