
:root{
  --paper:#f7f2ea;
  --surface:#ffffff;
  --ink:#211915;
  --muted:#5f5750;
  --accent:#0d6a71;
  --accent-dark:#08484d;
  --accent-soft:#e8f0ed;
  --line:#c9beb1;
  --gold:#b88948;
  --shadow:0 14px 34px rgba(40,29,20,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  direction:rtl;
  font-family:Tahoma,Arial,sans-serif;
  font-size:16px;
  line-height:1.8;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.topbar{
  height:68px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:30;background:rgba(247,242,234,.96);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)
}
.brand{font-weight:900;color:var(--accent-dark)}
.top-actions{display:flex;gap:14px;align-items:center}
.back-link,.buy-link{font-size:13px;font-weight:700;color:var(--accent-dark)}
.hero{
  min-height:68vh;padding:68px 7vw 50px;display:grid;grid-template-columns:1.05fr .95fr;
  gap:5vw;align-items:center;background:linear-gradient(135deg,var(--paper),var(--accent-soft))
}
.eyebrow{
  display:block;font-size:11px;line-height:1.4;font-weight:900;letter-spacing:.12em;
  color:var(--accent-dark);margin-bottom:8px
}
.hero h1{
  font-size:clamp(42px,5.8vw,76px);line-height:1.18;letter-spacing:-.025em;
  margin:0 0 14px;color:var(--ink)
}
.hero p{max-width:680px;margin:0;color:var(--muted);font-size:17px;line-height:2}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.primary,.secondary{
  display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;
  border-radius:999px;font-size:13px;font-weight:900
}
.primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.secondary{background:transparent;color:var(--accent-dark);border:1px solid var(--accent)}
.product-photo{margin:0}
.product-photo img{
  width:100%;max-height:540px;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.38);
  box-shadow:var(--shadow)
}
.compact{
  padding:46px 7vw;display:grid;grid-template-columns:.84fr 1.16fr;gap:5vw;
  align-items:start;border-top:1px solid var(--line)
}
.compact.white{background:#fff}
.compact h2{
  font-size:clamp(29px,3.6vw,46px);line-height:1.35;margin:6px 0 0;color:var(--ink)
}
.compact p{margin:0;color:var(--muted);font-size:16px;line-height:2}
.detail-row{
  padding:15px 17px;background:var(--accent-soft);border:1px solid var(--line);
  border-radius:12px;color:var(--ink);font-weight:700;line-height:1.9
}
details{
  margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden
}
summary{
  padding:11px 14px;cursor:pointer;color:var(--accent-dark);font-weight:900;list-style:none
}
summary::-webkit-details-marker{display:none}
details p{padding:0 14px 13px!important;font-size:14px!important;line-height:1.9!important}
.traits{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.traits>div{padding:18px 20px;background:var(--paper)}
.traits b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.traits span{display:block;color:var(--muted);font-size:12px;line-height:1.7}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.steps article{
  padding:15px;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:0
}
.steps b{display:block;color:var(--accent-dark);font-size:13px;margin-bottom:5px}
.steps span{display:block;color:var(--muted);font-size:13px;line-height:1.8}
.video-box{
  min-height:135px;width:100%;border:1px dashed var(--line);border-radius:13px;
  background:#faf7f2;color:var(--accent-dark);display:grid;place-items:center;gap:5px;cursor:default
}
.video-box span{font-size:28px}
.video-box small{color:var(--muted);font-size:12px}
.buy{background:linear-gradient(135deg,var(--accent-soft),#fff)}
.purchase{display:grid;gap:9px;justify-items:start}
.purchase strong{font-size:30px;line-height:1.3;color:var(--accent-dark)}
.purchase strong small{font-size:13px}
.option-list{display:flex;gap:8px;flex-wrap:wrap}
.option{
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--ink);font-size:13px;font-weight:700
}
.purchase button{
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  padding:12px 17px;border-radius:10px;font-weight:900;cursor:pointer
}
.purchase .note{font-size:11px;color:var(--muted);line-height:1.7}
footer{
  padding:28px 6vw;background:#0a292c;color:#d8e5e3;
  display:flex;justify-content:space-between;gap:20px;align-items:center
}
footer strong{color:#fff}
footer span{font-size:11px}

@media(max-width:900px){
  .hero,.compact{grid-template-columns:1fr}
  .traits{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .product-photo img{max-height:430px}
}
@media(max-width:620px){
  body{font-size:15px}
  .topbar{height:64px;padding:0 16px}
  .hero{min-height:auto;padding:46px 18px 36px}
  .hero h1{font-size:42px}
  .hero p{font-size:15px}
  .compact{padding:34px 18px;gap:18px}
  .compact h2{font-size:30px}
  .traits{grid-template-columns:1fr 1fr}
  .traits>div{padding:14px}
  .steps{gap:8px}
  .actions{flex-direction:column}
  .primary,.secondary{width:100%}
  footer{padding:24px 18px;flex-direction:column;align-items:flex-start}
}

/* Commerce v7 — selectable powder package */
.powder-detail-option{cursor:pointer;transition:.18s ease;border:1px solid transparent!important;border-radius:10px;padding:8px 10px!important}.powder-detail-option:hover{background:rgba(14,119,120,.05)!important}.powder-detail-option.active{border-color:#0e7778!important;background:rgba(14,119,120,.08)!important;box-shadow:0 0 0 1px rgba(14,119,120,.08) inset!important}
