/* RozContent site layer: service-card buttons, free-sample section, video play overlay (vui).
   Ordering and free samples run entirely through WhatsApp links. */
.btn-order{background:#E8B33D!important;color:#131711!important;border-color:#E8B33D!important}
.btn-order:hover{background:#f2c14e!important}
.vcard-foot{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#0D130F}
.vadd{background:#25D366;color:#062B16;border:0;border-radius:9px;padding:9px 14px;font:700 13.5px 'Archivo',sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.vadd:hover{background:#1FBE6B}
.vdetails{color:#9FB3A8;font:600 13.5px 'Archivo',sans-serif;text-decoration:none}
.vdetails:hover{color:#fff}
.vstrip h3 a{color:inherit;text-decoration:none}
.vstrip h3 a:hover{text-decoration:underline}
/* free-sample section (WhatsApp button, no form) */
.sample-sec{background:#0B100E;border-top:1px solid rgba(255,255,255,.07)}
/* Headings inside the dark sample section must be white — they otherwise inherit
   the dark body text colour (#0E1526) and vanish on the dark background. */
.sample-sec h2{color:#fff}
.sample-note{color:#C7D5CC;font-size:15px;line-height:1.65;max-width:70ch}

/* Video play overlay (vui): big centred play button over every video poster.
   JS (shop.js) wraps each <video> in span.vui and injects button.vui-btn. */
.vui{position:relative;display:block;line-height:0}
.videowrap .vui,.vmedia .vui{height:100%}
.vui-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(7,11,20,.62);box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.10);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:3;pointer-events:auto;transition:opacity .35s ease,transform .35s ease,background .2s ease,visibility .35s}
.vui-btn svg{width:30px;height:30px;fill:#fff;display:block;margin-left:4px}
.vui-btn:hover{background:rgba(7,11,20,.8);transform:translate(-50%,-50%) scale(1.07)}
.vui-btn:focus-visible{outline:3px solid #E8B33D;outline-offset:3px}
.vui-off .vui-btn{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) scale(.85)}
@media (max-width:480px){.vui-btn{width:56px;height:56px}.vui-btn svg{width:26px;height:26px}}

/* Service-page video layout: small player on one side, heading/text/transcript beside it.
   Desktop max player width 600px; mobile stacks, still capped at 600px. */
.vidrow{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:36px;align-items:start}
.vidrow .videowrap{max-width:600px;width:100%;margin:0}
.vidrow .sec-head{margin-bottom:18px}
.vidrow .transcript{max-width:none;margin:16px 0 0;border:1px solid rgba(20,30,24,.14);border-radius:14px;background:#fff;padding:16px 20px;font-size:14.5px;line-height:1.65}
.vidrow .transcript summary{cursor:pointer;font-weight:700}
@media(max-width:900px){.vidrow{grid-template-columns:1fr}.vidrow .videowrap{margin:0 auto}}

/* Homepage hero video: smaller, one side (max 640px) — 2026-10-15 rebuild */
.vidrow.herovid{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
.vidrow.herovid .videowrap{max-width:640px}

/* FINAL4 (2026-10-15): hero row balance + stack fix.
   1) The hero text column is ~720px tall while the 16:9 video is ~360px; with
      align-items:start the video stuck to the top and left a blank void under
      it. The video now sits in a full-height dark media panel, centred — one
      composed unit, no empty area. Video itself unchanged (still <=640px).
   2) Stack breakpoint: the base <=900px rule (.vidrow, specificity 0,1,0) lost
      to .vidrow.herovid (0,2,0), so on phones the text column collapsed to
      0px wide. The rule below has equal specificity and comes later, so the
      hero stacks properly on small screens. */
.vidrow.herovid{align-items:stretch}
.vidrow.herovid .videowrap{align-self:stretch;display:flex;align-items:center;background:#070B14;border-radius:20px;padding:18px;box-shadow:0 24px 50px -24px rgba(7,11,20,.45)}
.vidrow.herovid .videowrap .vui{height:auto;width:100%}
@media(max-width:1020px){
  .vidrow.herovid{grid-template-columns:1fr}
  .vidrow.herovid .videowrap{align-self:auto;margin:0 auto;width:100%}
}