/* Vape Hut theme stylesheet - generated by design/build_theme.py from the approved designs. */
:root { --ink:#000000; --panel:#0e0e0e; --line:#2a2a2a; --text:#ffffff; --muted:#a3a3a3; --orange:#f26a1b; --orange-deep:#b8420a; --orange-deep2:#c8500e; --orange-text:#ff9a4d; --radius:16px; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 24px; border-radius:12px; font-weight:700; letter-spacing:.03em; color:#fff; background:linear-gradient(90deg,var(--orange-deep),var(--orange-deep2)); transition:filter .2s, transform .1s; }
.btn:hover { filter:brightness(1.12); }
.btn:active { transform:scale(.98); }
.btn.ghost { background:transparent; border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--orange); filter:none; }
:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.notice { background:#000; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; padding:8px 12px; }
.notice b { color:var(--orange-text); font-weight:700; }
header.site { --bar:116px; --logo:104px; position:sticky; top:0; z-index:50; background:#000; border-bottom:1px solid var(--line); }
header.site.scrolled { --bar:70px; --logo:56px; }
.bar { display:flex; align-items:center; gap:22px; height:var(--bar); transition:height .2s; }
.logo { flex:none; line-height:0; }
.logo img { display:block; height:var(--logo); width:var(--logo); transition:height .2s, width .2s; }
.search { display:flex; align-items:center; flex:1; max-width:560px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; height:46px; padding:0 14px; gap:10px; }
.search input { flex:1; min-width:0; background:none; border:0; outline:0; color:var(--text); font:inherit; font-size:15px; }
.search:focus-within { border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,27,.2); }
.tools { display:flex; align-items:center; gap:10px; margin-left:auto; }
.icon-btn { color:var(--text); font-family:inherit; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 14px; border-radius:12px; background:var(--panel); border:1px solid var(--line); font-size:14px; font-weight:600; }
.icon-btn:hover { border-color:var(--orange); }
.icon-btn .count { min-width:22px; height:22px; border-radius:11px; background:linear-gradient(90deg,var(--orange-deep),var(--orange-deep2)); color:#fff; font-size:12px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.menu-btn { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0 12px; border-radius:12px; background:var(--panel); border:1px solid var(--line); cursor:pointer; }
.menu-btn span { display:block; height:2px; background:var(--text); border-radius:2px; transition:transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.navrow { border-top:1px solid var(--line); position:relative; }
nav.main ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:2px; }
nav.main li { position:static; display:flex; align-items:center; }
nav.main a.top { white-space:nowrap; padding:14px 12px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); transition:color .15s; }
nav.main li:hover > a.top, nav.main a.top:focus-visible, nav.main li.open > a.top { color:#fff; }
nav.main .caret { width:18px; height:18px; margin-left:-8px; padding:0; border:0; background:none; cursor:pointer; position:relative; }
nav.main .caret::after { content:""; position:absolute; left:4px; top:6px; border:4px solid transparent; border-top-color:var(--muted); }
nav.main li.open .caret::after, nav.main li:hover .caret::after { border-top-color:var(--orange); }
.has-mega::before { content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:linear-gradient(90deg,var(--orange-deep),var(--orange-deep2)); transform:scaleX(0); transition:transform .2s; }
.navrow nav { position:static; }
.has-mega { position:static; }
.mega { position:absolute; left:0; right:0; top:100%; background:#0a0a0a; border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(0,0,0,.5); display:none; max-height:calc(100vh - 170px); overflow-y:auto; }
.has-mega.open > .mega, .has-mega:hover > .mega { display:block; }
.has-mega.open::before, .has-mega:hover::before { transform:scaleX(1); }
.mega-in { padding-top:22px; padding-bottom:26px; }
.mega-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.mega-head b { font-size:18px; text-transform:uppercase; letter-spacing:.06em; }
.mega-head a { color:var(--orange-text); font-weight:600; font-size:14px; }
.mega-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:22px 28px; }
.mega .col { display:flex; flex-direction:column; gap:2px; }
.mega .col a { padding:4px 0; font-size:14px; color:var(--muted); }
.mega .col a:hover { color:#fff; }
.mega .col a.h { font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
.mega .col a.h:hover { color:var(--orange-text); }
.mega .col a.all { color:var(--orange-text); font-size:13px; }
.drawer { position:absolute; top:100%; left:0; right:0; background:var(--ink); border-bottom:1px solid var(--line); max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto; }
.drawer[hidden] { display:none; }
.drawer-in { padding:14px 16px 24px; }
.drawer .search { max-width:none; margin:0 0 10px; }
.drawer details { border-bottom:1px solid var(--line); }
.drawer summary { list-style:none; cursor:pointer; padding:14px 4px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.drawer summary::-webkit-details-marker { display:none; }
.drawer summary::after { content:"+"; color:var(--orange-text); font-size:20px; font-weight:400; }
.drawer details[open] > summary::after { content:"\2212"; }
.drawer details details { border:0; margin-left:12px; }
.drawer details details summary { text-transform:none; letter-spacing:0; font-weight:600; font-size:15px; padding:10px 4px; color:var(--text); }
.drawer a { display:block; padding:12px 4px; color:var(--muted); font-size:15px; }
.drawer a.d0 { color:var(--text); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:14px; border-bottom:1px solid var(--line); padding:14px 4px; }
.drawer a.all { color:var(--orange-text); font-weight:600; }
.drawer details details a { padding-left:12px; }
.drawer-links { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.drawer-links a { text-align:center; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); font-weight:600; }
.hero { position:relative; margin-top:20px; }
.slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:var(--radius); border:1px solid var(--line); }
.slides::-webkit-scrollbar { display:none; }
.slide { flex:0 0 100%; scroll-snap-align:start; background:var(--panel); aspect-ratio:1138/400; }
.slide img { width:100%; height:100%; object-fit:cover; }
.dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.dots button { width:28px; height:5px; border-radius:3px; border:0; padding:0; background:var(--line); cursor:pointer; }
.dots button.on { background:var(--orange); }
.arrow { position:absolute; top:calc(50% - 30px); width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.85); color:#fff; font-size:20px; cursor:pointer; }
.arrow:hover { border-color:var(--orange); }
.arrow.prev { left:14px; }
.arrow.next { right:14px; }
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0 8px; }
.trust div { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:14px; }
.trust b { display:block; color:#fff; font-size:15px; }
.trust span { color:var(--muted); }
section { padding:44px 0 8px; }
.head { display:flex; align-items:end; justify-content:space-between; margin-bottom:20px; gap:16px; }
.head h2 { margin:0; font-size:clamp(24px,3.4vw,34px); line-height:1.15; }
.head p { margin:4px 0 0; color:var(--muted); }
.head a.more { color:var(--orange-text); font-weight:600; white-space:nowrap; }
.cats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat { position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); aspect-ratio:4/3; transition:transform .2s, border-color .2s; }
.cat:hover { transform:translateY(-3px); border-color:var(--orange); }
.cat img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cat:hover img { transform:scale(1.04); }
.cat span { position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:15px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.85)); display:flex; justify-content:space-between; align-items:center; }
.cat span i { font-style:normal; color:var(--orange-text); }
.locs { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.loc .tel { color:var(--text); font-weight:600; }
.loc .tel:hover { color:var(--orange-text); }
.loc { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.loc h3 { margin:0 0 6px; font-size:20px; }
.loc p { margin:0 0 4px; color:var(--muted); }
.loc .pill { display:inline-block; margin-bottom:12px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-text); }
.loc .acts { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.band { margin-top:44px; border-radius:var(--radius); border:1px solid var(--line); padding:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg,#1b110a,#14141a 55%); }
.band h2 { margin:0 0 6px; font-size:clamp(22px,3vw,30px); }
.band p { margin:0; color:var(--muted); max-width:560px; }
footer.site { margin-top:64px; border-top:1px solid var(--line); background:#000; padding:0 0 22px; }
.f-news { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:34px 0; border-bottom:1px solid var(--line); }
.f-news h3 { margin:0 0 4px; font-size:22px; }
.f-news p { margin:0; color:var(--muted); }
.news { display:flex; gap:8px; flex:1; max-width:460px; min-width:260px; }
.news input { flex:1; min-width:0; height:48px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0 14px; color:var(--text); font:inherit; }
.news input:focus { outline:none; border-color:var(--orange); }
.news .btn { cursor:pointer; border:0; font-family:inherit; font-size:15px; }
.f-cols { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding:36px 0 28px; }
.f-cols h4, .f-stores h4 { margin:0 0 12px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.f-cols nav a { display:block; padding:5px 0; color:var(--text); font-size:15px; }
.f-cols nav a:hover, .legal a:hover, .mail:hover { color:var(--orange-text); }
.f-logo { display:inline-block; line-height:0; }
.f-logo img { width:112px; height:112px; }
.f-brand p { margin:12px 0 8px; color:var(--muted); }
.mail { color:var(--text); font-weight:600; }
.f-stores { padding:26px 0; border-top:1px solid var(--line); }
.stores { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.store { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; font-size:14px; }
.store b { font-size:15px; }
.store span { color:var(--muted); }
.store a { color:var(--text); font-weight:600; }
.store a.dir { color:var(--orange-text); font-weight:600; font-size:13px; margin-top:4px; }
.store a:hover { color:var(--orange-text); }
.f-pay { display:flex; align-items:center; gap:12px; padding:18px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; flex-wrap:wrap; }
.f-pay img { height:26px; width:auto; background:#fff; border-radius:5px; padding:2px 6px; }
.legal { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.legal .links { display:flex; gap:18px; flex-wrap:wrap; }
.crumbs { display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 6px; font-size:13px; color:var(--muted); }
.crumbs a:hover { color:var(--orange-text); }
.crumbs span[aria-current] { color:var(--text); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
.card:hover { border-color:var(--orange); transform:translateY(-3px); }
.card .pic { display:block; background:#fff; aspect-ratio:1; }
.card .pic img { width:100%; height:100%; object-fit:contain; padding:10px; }
.card .body { padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card .t { font-weight:600; font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.card .p { font-size:18px; font-weight:800; }
.card .btn { height:42px; font-size:14px; margin-top:auto; }
.card .btn.ghost { background:transparent; }
.page-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:6px 0 22px; flex-wrap:wrap; }
.page-head h1 { margin:0; font-size:clamp(28px,4vw,40px); line-height:1.1; }
.page-head p { margin:0; color:var(--muted); }
.layout { display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:start; }
.side { position:sticky; top:190px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:6px 18px 18px; }
.side summary { list-style:none; display:none; }
.side h4 { margin:18px 0 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.side .cats a { display:block; padding:6px 0; font-size:14px; color:var(--text); }
.side .cats a:hover, .side .cats a.on { color:var(--orange-text); }
.side .cats a.on { font-weight:700; }
.side .range { display:flex; gap:8px; align-items:center; }
.side input, .side select, .toolbar select { width:100%; height:42px; background:var(--ink); border:1px solid var(--line); border-radius:10px; color:var(--text); font:inherit; font-size:14px; padding:0 10px; }
.side input:focus, .side select:focus, .toolbar select:focus { outline:none; border-color:var(--orange); }
.side .btn { width:100%; height:42px; font-size:14px; margin-top:12px; border:0; cursor:pointer; font-family:inherit; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .info { color:var(--muted); font-size:14px; }
.toolbar .ctl { display:flex; align-items:center; gap:10px; }
.toolbar label { color:var(--muted); font-size:14px; }
.toolbar select { width:auto; min-width:170px; }
.view { display:flex; gap:6px; }
.view a { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--muted); }
.view a.on, .view a:hover { color:#fff; border-color:var(--orange); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:30px 0 4px; flex-wrap:wrap; color:var(--muted); font-size:14px; }
.pager ul { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.pager a, .pager span.n { min-width:42px; height:42px; display:grid; place-items:center; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); font-weight:600; }
.pager a:hover { border-color:var(--orange); }
.pager .on { background:linear-gradient(90deg,var(--orange-deep),var(--orange-deep2)); border-color:transparent; color:#fff; }
.pager .off { opacity:.4; }
.pwrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; margin-top:12px; align-items:start; }
.gallery { position:sticky; top:190px; }
.stage { background:#fff; border-radius:var(--radius); border:1px solid var(--line); aspect-ratio:1/1.1; display:grid; place-items:center; overflow:hidden; }
.stage img { width:100%; height:100%; object-fit:contain; padding:14px; }
.thumbs { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:10px; }
.th { background:#fff; border:2px solid var(--line); border-radius:10px; padding:2px; cursor:pointer; aspect-ratio:1; overflow:hidden; }
.th img { width:100%; height:100%; object-fit:contain; }
.th.on, .th:hover { border-color:var(--orange); }
.brandtag { display:inline-block; color:var(--orange-text); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13px; }
.pinfo h1 { margin:6px 0 10px; font-size:clamp(26px,3.4vw,38px); line-height:1.15; }
.priceline { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.price { font-size:34px; font-weight:800; }
.stock { font-size:13px; font-weight:700; padding:5px 12px; border-radius:20px; background:rgba(60,200,120,.14); color:#4ade80; }
.opt { margin-bottom:14px; }
.opt label { display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.opt select { width:100%; height:50px; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--text); font:inherit; padding:0 14px; }
.opt select:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,27,.2); }
.buyrow { display:flex; gap:12px; margin:18px 0 14px; }
.qty { display:flex; align-items:center; border:1px solid var(--line); background:var(--panel); border-radius:12px; height:54px; }
.qty button { width:44px; height:100%; background:none; border:0; color:var(--text); font-size:22px; cursor:pointer; }
.qty button:hover { color:var(--orange-text); }
.qty input { width:42px; text-align:center; background:none; border:0; color:var(--text); font:inherit; font-weight:700; }
.buyrow .btn { flex:1; height:54px; font-size:16px; border:0; cursor:pointer; font-family:inherit; }
.notes { display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none; color:var(--muted); font-size:14px; }
.notes li::before { content:"\2713"; color:var(--orange-text); font-weight:800; margin-right:10px; }
.links { display:flex; gap:18px; flex-wrap:wrap; font-size:14px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.links a { color:var(--muted); }
.links a:hover { color:var(--orange-text); }
.tabs { margin-top:26px; }
.tabbar { display:flex; gap:6px; border-bottom:1px solid var(--line); }
.tabbar button { background:none; border:0; border-bottom:3px solid transparent; color:var(--muted); font:inherit; font-weight:700; padding:12px 16px; cursor:pointer; }
.tabbar button.on { color:#fff; border-color:var(--orange); }
.tabpane { display:none; padding:18px 0; color:var(--muted); }
.tabpane.on { display:block; }
.tabpane table { border-collapse:collapse; }
.tabpane td { padding:6px 24px 6px 0; }
.tabpane td:first-child { color:var(--text); font-weight:600; }
.tabpane .ok { color:#4ade80; font-weight:700; }
.related { margin-top:56px; }
.related h2 { margin:0 0 18px; font-size:clamp(22px,3vw,30px); }
.rgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.sticky-buy { display:none; }
@media (max-width:980px) {
  .f-cols { grid-template-columns:1fr 1fr; }
  .stores { grid-template-columns:repeat(3,1fr); }
  .menu-btn { display:flex; }
  .navrow { display:none; }
  .bar { gap:12px; }
  .search { display:none; }
  .drawer .search { display:flex; }
  .tools { margin-left:auto; }
  .cats { grid-template-columns:repeat(3,1fr); }
  .trust { grid-template-columns:repeat(2,1fr); }
  header.site { --bar:92px; --logo:80px; }
  header.site.scrolled { --bar:64px; --logo:50px; }
  .layout { grid-template-columns:1fr; }
  .side { position:static; padding:0 16px; }
  .side summary { display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-weight:700; cursor:pointer; }
  .side summary::after { content:"+"; color:var(--orange-text); font-size:22px; font-weight:400; }
  .side[open] summary::after { content:"\2212"; }
  .side[open] { padding-bottom:16px; }
  .grid { grid-template-columns:repeat(3,1fr); }
  .pwrap { grid-template-columns:1fr; gap:24px; }
  .gallery { position:static; }
  .rgrid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .f-news { padding:26px 0; }
  .news { max-width:none; width:100%; flex-basis:100%; }
  .f-cols { grid-template-columns:1fr 1fr; gap:22px; }
  .f-brand { grid-column:1 / -1; }
  .stores { grid-template-columns:1fr 1fr; }
  .legal { flex-direction:column; }
  .wrap { padding:0 14px; }
  .bar { height:64px; }
  .logo img { height:46px; width:46px; }
  .icon-btn .lbl { display:none; }
  .icon-btn { padding:0 12px; }
  .icon-btn.cart .lbl { display:none; }
  .cats { grid-template-columns:repeat(2,1fr); gap:12px; }
  .trust { grid-template-columns:1fr 1fr; }
  .arrow { display:none; }
  .slide { aspect-ratio:16/9; }
  .band { padding:22px; }
  .head { align-items:start; flex-direction:column; gap:6px; }
  header.site { --bar:84px; --logo:72px; }
  header.site.scrolled { --bar:62px; --logo:46px; }
  .grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .card .body { padding:12px; }
  .card .t { font-size:14px; }
  .card .p { font-size:16px; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .toolbar .ctl { width:100%; }
  .toolbar select { flex:1; }
  .view { display:none; }
  .pager { justify-content:center; }
  .thumbs { grid-template-columns:repeat(4,1fr); }
  .price { font-size:28px; }
  .rgrid { gap:12px; }
  .sticky-buy { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; align-items:center; gap:12px; padding:10px 14px; background:#000; border-top:1px solid var(--line); }
  .sticky-buy b { font-size:20px; }
  .sticky-buy .btn { flex:1; height:46px; border:0; font-family:inherit; font-size:15px; cursor:pointer; }
  footer.site { padding-bottom:80px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
}

/* ===== Elements that exist only in the real Rain templates ===== */
.container.content { width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; background:none; float:none; }
.wrapper { min-height:40vh; background:none; }
@media (max-width:640px) { .container.content { padding:0 14px; } }

.messages { margin:18px 0; }
.messages ul { list-style:none; margin:0 0 10px; padding:0; }
.messages li { padding:14px 18px 14px 20px; border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:12px; background:#161616; margin-bottom:8px; }
.messages .error li { border-left-color:#ff5a4e; color:#ffb4ad; }
.messages .success li { border-left-color:#3ecf8e; }

.side .cats-nav { display:flex; flex-direction:column; }
.side .cats-nav a { padding:6px 0; font-size:14px; color:var(--text); }
.side .cats-nav a:hover, .side .cats-nav a.on { color:var(--orange-text); }
.side .cats-nav a.on { font-weight:700; }
.side .cats-nav a.sub { padding-left:14px; color:var(--muted); }
.side .cats-nav a.sub2 { padding-left:28px; color:var(--muted); font-size:13px; }
.side .checks label { display:flex; gap:8px; align-items:center; color:var(--text); margin:6px 0; font-size:14px; text-transform:none; letter-spacing:0; }
.side .checks input { width:auto; height:auto; accent-color:var(--orange); }

.card .pic { position:relative; }
.tag.sale { position:absolute; top:10px; left:10px; background:linear-gradient(90deg,var(--orange-deep),var(--orange-deep2)); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; }
.card .was { color:var(--muted); text-decoration:line-through; font-weight:400; font-size:14px; margin-right:6px; }
.card .p small { display:block; font-size:11px; font-weight:400; color:var(--muted); }
.card .unit { font-size:12px; color:var(--muted); }
.grid.list-mode { grid-template-columns:1fr; }
.card.list { flex-direction:row; }
.card.list .pic { flex:0 0 200px; aspect-ratio:1; }
.card.list .body { justify-content:center; }
.card.list .btn { max-width:220px; margin-top:6px; }
@media (max-width:640px) { .card.list .pic { flex-basis:110px; } }
.no-products-found { padding:40px 0; color:var(--muted); text-align:center; }
.textcategory { color:var(--muted); margin:0 0 20px; max-width:900px; }

.product-option { margin:6px 0 4px; }
.product-configure-options-option { margin-bottom:14px; }
.product-configure-options-option label { display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.product-configure-options-option label em { color:var(--orange-text); font-style:normal; }
.product-configure-options-option select, .product-configure input[type="text"], .product-configure input[type="number"], .product-configure textarea { width:100%; height:50px; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--text); font:inherit; padding:0 14px; }
.product-configure textarea { height:auto; min-height:90px; padding:12px 14px; }
.product-configure-options-option select:focus, .product-configure input:focus, .product-configure textarea:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,27,.2); }
.product-configure-clear { display:none; }
.priceline .old-price { color:var(--muted); text-decoration:line-through; font-size:20px; margin-right:8px; font-weight:400; }
.stock.out { background:rgba(255,90,78,.14); color:#ff8a80; }
.stock.back { background:rgba(242,106,27,.14); color:var(--orange-text); }
.tabpane .bad { color:#ff8a80; font-weight:700; }
.unitprice { color:var(--muted); font-size:13px; margin:-8px 0 14px; }
.discounts { margin:12px 0; padding-left:18px; color:var(--text); }
.review { border-bottom:1px solid var(--line); padding:12px 0; }

.prose { color:var(--muted); line-height:1.7; max-width:820px; }
.prose h2, .prose h3 { color:#fff; margin:1.4em 0 .5em; }
.prose a { color:var(--orange-text); }
.prose table { border-collapse:collapse; width:100%; }
.prose td, .prose th { border:1px solid var(--line); padding:8px 12px; }
.prose img { max-width:100%; height:auto; border-radius:12px; }
.prose strong { color:#fff; }
.home-content { max-width:900px; margin:30px auto 0; text-align:center; color:var(--muted); }
.ptags, .tagline { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.ptags a, .tagline a { padding:6px 14px; border:1px solid var(--line); border-radius:20px; color:var(--muted); font-size:14px; }
.ptags a:hover, .tagline a:hover { border-color:var(--orange); color:#fff; }
.brandrow { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.brandrow a { background:#fff; border-radius:10px; padding:10px 18px; color:#000; font-weight:700; }
.bundles { margin-top:40px; }
.bundle-actions .product { display:inline-block; vertical-align:top; width:200px; margin:0 12px 12px 0; }
.bundle-actions img { max-width:100%; height:auto; background:#fff; border-radius:10px; }
.bundle-actions h3 { font-size:14px; }

/* ===== Cart, checkout and account pages (Lightspeed components) ===== */
/* Vape Hut - shop flow styles (cart, checkout, account).
   Restyles Lightspeed's built-in "gui" components so they match the new theme.
   Ships by being appended to theme/assets/style.css. Uses only classes Lightspeed already renders. */

.gui {
  --g-ink:#000000; --g-panel:#0e0e0e; --g-panel2:#161616; --g-line:#2a2a2a; --g-text:#ffffff; --g-muted:#a3a3a3;
  --g-orange:#f26a1b; --g-deep:#b8420a; --g-deep2:#c8500e; --g-orange-text:#ff9a4d; --g-radius:14px;
  color:var(--g-text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:1240px; margin:0 auto; padding:8px 0 40px; box-sizing:border-box;
}
.gui *, .gui *::before, .gui *::after { box-sizing:border-box; }
.gui a { color:var(--g-orange-text); text-decoration:none; }
.gui a:hover { text-decoration:underline; }
.gui-clear { clear:both; }
.gui-hide, .gui .gui-hide { display:none !important; }
.gui-bold, .gui strong { font-weight:700; }
.gui-align-right { text-align:right !important; } .gui-align-center { text-align:center !important; } .gui-align-left { text-align:left !important; }
.gui-nowrap { white-space:nowrap; }
.gui-spacer { height:14px; } .gui-spacer-small { height:8px; }

/* ---------- Page title ---------- */
.gui .gui-page-title { font-size:clamp(28px,4vw,40px); font-weight:800; line-height:1.1; margin:18px 0 18px; color:#fff; border:0; padding:0; text-transform:none; }
.gui .gui-margin-fix { display:none; }

/* ---------- Progress steps (Cart > Details > Shipping > Payment > Confirmation) ---------- */
.gui .gui-progressbar { position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 26px; padding:0; background:none; border:0; height:auto; }
.gui .gui-progressbar-background, .gui .gui-progressbar .gui-indicator { display:none; }
.gui .gui-progressbar > a, .gui .gui-progressbar li a {
  display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px; border-radius:23px;
  background:var(--g-panel); border:1px solid var(--g-line); color:var(--g-muted); font-weight:600; font-size:14px; text-decoration:none; float:none; width:auto; }
.gui .gui-progressbar ul { display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; float:none; width:auto; }
.gui .gui-progressbar li { float:none; width:auto; margin:0; padding:0; background:none; border:0; }
.gui .gui-progressbar .count { width:24px; height:24px; border-radius:50%; background:var(--g-ink); border:1px solid var(--g-line); display:inline-grid; place-items:center; font-size:12px; color:var(--g-muted); }
.gui .gui-progressbar li.gui-active a, .gui .gui-progressbar a[aria-current="step"] { color:#fff; border-color:var(--g-orange); background:linear-gradient(90deg,rgba(242,106,27,.18),rgba(200,80,14,.12)); }
.gui .gui-progressbar li.gui-active .count { background:linear-gradient(90deg,var(--g-deep),var(--g-deep2)); border-color:transparent; color:#fff; }
.gui .gui-progressbar li.gui-done a { color:var(--g-text); }

/* ---------- Layout columns ---------- */
.gui .gui-col2-right { display:grid !important; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; float:none; width:auto; }
.gui .gui-col2-right > div { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
.gui .gui-col2-equal { display:grid !important; grid-template-columns:1fr 1fr; gap:24px; }
.gui .gui-col2-equal > div { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
.gui .gui-col3-equal { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.gui .gui-col3-equal > aside, .gui .gui-col3-equal > div { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
.gui .gui-col3-equal > aside { display:contents; }
.gui .gui-col3-equal > aside > div { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }

/* ---------- Blocks ---------- */
.gui .gui-block { background:var(--g-panel); border:1px solid var(--g-line); border-radius:var(--g-radius); margin:0 0 20px; overflow:hidden; box-shadow:none; }
.gui .gui-block-title { padding:16px 20px; border-bottom:1px solid var(--g-line); background:var(--g-panel2); font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:#fff; margin:0; }
.gui .gui-block-title strong { font-weight:700; }
.gui .gui-block-title a { float:right; font-size:13px; text-transform:none; letter-spacing:0; }
.gui .gui-block-content { padding:20px; }
.gui .gui-block-subtitle { font-weight:700; color:#fff; margin:0 0 10px; font-size:17px; }
.gui .gui-block-subtitle.gui-transparent { font-size:14px; color:var(--g-muted); font-weight:600; opacity:.8; }
.gui .gui-block-subcontent { padding:0; }
.gui .gui-bigger { font-size:16px; }
.gui p { color:var(--g-muted); margin:0 0 12px; }
.gui .gui-min-height { min-height:0 !important; }
.gui hr, .gui .gui-border { border-color:var(--g-line); }

/* ---------- Forms ---------- */
.gui .gui-form { margin:0; }
.gui .gui-field { margin:0 0 16px; }
.gui label { display:block; color:var(--g-muted); font-size:13px; font-weight:600; letter-spacing:.04em; margin:0 0 6px; float:none; width:auto; text-align:left; }
.gui label em { color:var(--g-orange-text); font-style:normal; }
.gui .gui-input { display:block; margin:0; }
.gui input[type="text"], .gui input[type="password"], .gui input[type="email"], .gui input[type="tel"], .gui input[type="number"], .gui input:not([type]), .gui textarea, .gui select {
  width:100% !important; max-width:none; height:48px; padding:0 14px; background:var(--g-ink); color:var(--g-text); border:1px solid var(--g-line); border-radius:10px; font:inherit; font-size:15px; box-shadow:none; outline:0; transition:border-color .15s, box-shadow .15s; }
.gui textarea { height:auto; min-height:96px; padding:12px 14px; }
.gui input:focus, .gui textarea:focus, .gui select:focus { border-color:var(--g-orange); box-shadow:0 0 0 3px rgba(242,106,27,.22); }
.gui input::placeholder, .gui textarea::placeholder { color:#7a7a7a; }
.gui input.error, .gui .gui-error input, .gui select.error { border-color:#ff5a4e; }
.gui label.error, .gui .gui-error, .gui .gui-message-error { color:#ff6b5e; font-size:13px; }
.gui .gui-required { color:var(--g-muted); font-size:12px; margin:4px 0 0; }
.gui .gui-radio, .gui .gui-checkbox { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--g-ink); border:1px solid var(--g-line); border-radius:10px; }
.gui .gui-radio:hover, .gui .gui-checkbox:hover { border-color:var(--g-orange); }
.gui .gui-radio input, .gui .gui-checkbox input { width:18px !important; height:18px; accent-color:var(--g-orange); margin:0; flex:none; }
.gui .gui-radio label, .gui .gui-checkbox label { margin:0; color:var(--g-text); font-size:15px; font-weight:600; letter-spacing:0; cursor:pointer; flex:1; }

/* ---------- Buttons ---------- */
.gui .gui-buttons { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--g-line); background:none; }
.gui .gui-buttons .gui-left, .gui .gui-buttons .gui-right { float:none; }
.gui .gui-buttons .gui-right { margin-left:auto; }
.gui a.gui-button-small, .gui a.gui-button-large, .gui button.gui-button-small, .gui button.gui-button-large, .gui input[type="submit"].gui-button-small {
  display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border-radius:12px; border:1px solid var(--g-line); background:var(--g-panel2);
  color:#fff; font-weight:700; font-size:14px; letter-spacing:.03em; text-decoration:none; cursor:pointer; text-shadow:none; box-shadow:none; transition:filter .2s, border-color .2s, transform .1s; }
.gui a.gui-button-small:hover, .gui a.gui-button-large:hover { border-color:var(--g-orange); text-decoration:none; }
.gui a.gui-button-action, .gui .gui-button-action {
  background:linear-gradient(90deg,var(--g-deep),var(--g-deep2)) !important; border-color:transparent !important; color:#fff !important; }
.gui a.gui-button-action:hover { filter:brightness(1.12); }
.gui a.gui-button-large { height:56px; padding:0 28px; font-size:16px; width:100%; }
.gui a.gui-button-link { color:var(--g-muted); font-size:14px; }
.gui a.gui-button-link:hover { color:var(--g-orange-text); }
.gui a:focus-visible, .gui button:focus-visible { outline:3px solid var(--g-orange); outline-offset:2px; }

/* ---------- Cart table ---------- */
.gui .gui-table { background:var(--g-panel); border:1px solid var(--g-line); border-radius:var(--g-radius); overflow:hidden; margin:0 0 20px; }
.gui .gui-table table { width:100%; border-collapse:collapse; background:none; border:0; }
.gui .gui-table th { padding:14px 16px; text-align:left; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--g-muted); background:var(--g-panel2); border:0; border-bottom:1px solid var(--g-line); font-weight:600; }
.gui .gui-table th.gui-align-right { text-align:right; }
.gui .gui-table td { padding:16px; border:0; border-bottom:1px solid var(--g-line); vertical-align:middle; background:none; color:var(--g-text); }
.gui .gui-table tbody tr:last-child td { border-bottom:0; }
.gui .gui-table td a.gui-bold { color:#fff; }
.gui .gui-table td a.gui-bold:hover { color:var(--g-orange-text); text-decoration:none; }
.gui .cart_variant { font-size:13px !important; color:var(--g-muted); margin:4px 0 0; }
.gui .gui-image { background:#fff; border-radius:10px; overflow:hidden; width:72px; height:72px; display:grid; place-items:center; }
.gui .gui-image img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.gui .gui-image-40 { width:48px; height:48px; }
.gui .gui-number { display:inline-flex; align-items:center; border:1px solid var(--g-line); background:var(--g-ink); border-radius:10px; overflow:hidden; height:44px; }
.gui .gui-number .gui-value { margin:0; }
.gui .gui-number .gui-value input { width:46px !important; height:42px; text-align:center; border:0; background:none; border-radius:0; box-shadow:none; padding:0; font-weight:700; }
.gui .gui-number .gui-handle { display:flex; flex-direction:column; height:44px; border-left:1px solid var(--g-line); }
.gui .gui-number .gui-handle a { flex:1; width:34px; display:grid; place-items:center; color:var(--g-text); font-size:16px; line-height:1; text-decoration:none; background:none; }
.gui .gui-number .gui-handle a:hover { color:var(--g-orange-text); background:var(--g-panel2); }
.gui a.gui-action-delete { color:var(--g-muted); font-size:13px; text-decoration:underline; }
.gui a.gui-action-delete:hover { color:#ff6b5e; }

/* ---------- Cart summary, coupons, related ---------- */
.gui .gui-cart-sum { background:var(--g-panel); border:1px solid var(--g-line); border-radius:var(--g-radius); padding:20px; margin:0 0 16px; }
.gui .gui-item { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--g-line); }
.gui .gui-item:last-child { border-bottom:0; }
.gui .gui-item .gui-desc, .gui .gui-item .gui-price { float:none; width:auto; margin:0; padding:0; }
.gui .gui-item.gui-big { font-size:18px; color:#fff; padding-top:14px; }
.gui .gui-item.gui-big .gui-price strong { font-size:22px; }
.gui .gui-reward-cart-block { border-radius:12px; margin:0 0 16px; background:linear-gradient(120deg,#1b110a,var(--g-panel2)); }
.gui .gui-reward-cart-block .gui-block-content { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.gui .gui-div-cart-sum .gui-right { float:none; width:100%; }
.gui .gui-products { list-style:none; margin:0; padding:0; }
.gui .gui-products li.gui-option { display:grid; grid-template-columns:48px 1fr auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--g-line); }
.gui .gui-products li.gui-option:last-child { border-bottom:0; }
.gui .gui-products-image, .gui .gui-products-title, .gui .gui-products-info, .gui .gui-products-price, .gui .gui-products-option { float:none; width:auto; margin:0; padding:0; }
.gui .gui-products-title a { color:var(--g-text); font-size:14px; font-weight:600; }
.gui .gui-products-info { display:none; }
.gui .gui-products-price { font-weight:700; white-space:nowrap; }
.gui .gui-products-option input { width:18px !important; height:18px; accent-color:var(--g-orange); }

/* ---------- Login popover ---------- */
.gui .gui-popover { background:var(--g-panel); border:1px solid var(--g-line); border-radius:var(--g-radius); box-shadow:0 20px 60px rgba(0,0,0,.6); color:var(--g-text); }
.gui .gui-popover-title { padding:16px 20px; border-bottom:1px solid var(--g-line); display:flex; justify-content:space-between; align-items:center; background:var(--g-panel2); border-radius:var(--g-radius) var(--g-radius) 0 0; }
.gui .gui-popover-content { padding:20px; }

/* ---------- Messages ---------- */
.gui .gui-messages, .gui .gui-message { border-radius:12px; padding:14px 18px; margin:0 0 18px; background:var(--g-panel2); border:1px solid var(--g-line); }

/* ---------- Tablet ---------- */
@media (max-width:980px) {
  .gui .gui-col2-right { grid-template-columns:1fr; }
  .gui .gui-col3-equal { grid-template-columns:1fr 1fr; }
  .gui .gui-col3-equal > .gui-div-cart-sum { grid-column:1 / -1; }
}
/* ---------- Phone ---------- */
@media (max-width:640px) {
  .gui .gui-col2-equal, .gui .gui-col3-equal { grid-template-columns:1fr; }
  .gui .gui-progressbar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; scrollbar-width:none; }
  .gui .gui-progressbar ul { flex-wrap:nowrap; }
  .gui .gui-progressbar a, .gui .gui-progressbar li a { white-space:nowrap; height:42px; padding:0 14px; }
  .gui .gui-table thead { display:none; }
  .gui .gui-table table, .gui .gui-table tbody { display:block; }
  .gui .gui-table tbody tr { display:grid; grid-template-columns:72px 1fr auto; gap:6px 14px; padding:16px; border-bottom:1px solid var(--g-line); align-items:center; }
  .gui .gui-table tbody tr:last-child { border-bottom:0; }
  .gui .gui-table td { display:block; padding:0; border:0; width:auto !important; }
  .gui .gui-table td:nth-child(1) { grid-row:1 / span 3; }
  .gui .gui-table td:nth-child(2) { grid-column:2 / -1; }
  .gui .gui-table td:nth-child(3) { grid-column:2; }
  .gui .gui-table td:nth-child(4) { grid-column:3; text-align:right; }
  .gui .gui-table td:nth-child(5) { display:none; }
  .gui .gui-table td:nth-child(6) { grid-column:2 / -1; text-align:left; font-weight:800; font-size:18px; }
  .gui .gui-table tbody tr:last-child { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
  .gui .gui-table tbody tr:last-child td { flex:1 1 auto; grid-column:auto; text-align:left; }
  .gui .gui-buttons { flex-direction:column-reverse; align-items:stretch; }
  .gui .gui-buttons .gui-right, .gui .gui-buttons .gui-left { width:100%; margin:0; text-align:center; }
  .gui .gui-buttons a.gui-button-small { width:100%; }
  .gui .gui-block-content { padding:16px; }
}

/* ---------- Specificity fixes: Lightspeed's own gui rules use background images, forced colours and !important ---------- */
.gui .gui-progressbar li, .gui .gui-progressbar li a, .gui .gui-progressbar > a { background-image:none !important; box-shadow:none !important; clip-path:none !important; }
.gui .gui-progressbar li a, .gui .gui-progressbar > a { background-color:var(--g-panel) !important; border:1px solid var(--g-line) !important; border-radius:23px !important; padding:0 18px !important; height:46px !important; line-height:1 !important; }
.gui .gui-progressbar li.gui-active a, .gui .gui-progressbar > a[aria-current="step"] { background-image:linear-gradient(90deg,rgba(242,106,27,.18),rgba(200,80,14,.12)) !important; border-color:var(--g-orange) !important; color:#fff !important; }
.gui .gui-progressbar li a, .gui .gui-progressbar li a span { color:var(--g-muted) !important; }
.gui .gui-progressbar li.gui-active a, .gui .gui-progressbar li.gui-active a span { color:#fff !important; }
.gui .gui-progressbar li a::before, .gui .gui-progressbar li a::after, .gui .gui-progressbar li::before, .gui .gui-progressbar li::after { display:none !important; content:none !important; }
.gui .gui-progressbar li a i, .gui .gui-progressbar li a .icon, .gui .gui-progressbar li a svg, .gui .gui-progressbar li a img { display:none !important; }
.gui .gui-block-title, .gui .gui-block-title strong, .gui .gui-block-title a { color:#fff !important; text-shadow:none !important; }
.gui .gui-block-title a { color:var(--g-orange-text) !important; }
.gui .gui-block-subtitle, .gui .gui-block-subtitle * { color:#fff !important; }
.gui .gui-block-subtitle.gui-transparent { color:var(--g-muted) !important; }
.gui .gui-input { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; height:auto !important; }
.gui .gui-input input, .gui .gui-input select, .gui .gui-input textarea { border:1px solid var(--g-line) !important; background:var(--g-ink) !important; color:var(--g-text) !important; border-radius:10px !important; box-shadow:none !important; }
.gui .gui-input input:focus, .gui .gui-input select:focus, .gui .gui-input textarea:focus { border-color:var(--g-orange) !important; box-shadow:0 0 0 3px rgba(242,106,27,.22) !important; }
.gui a.gui-button-small, .gui a.gui-button-large { border-radius:12px !important; box-shadow:none !important; text-shadow:none !important; border:1px solid var(--g-line) !important; }
.gui a.gui-button-action { border-color:transparent !important; background-image:linear-gradient(90deg,var(--g-deep),var(--g-deep2)) !important; background-color:transparent !important; }
.gui .gui-form, .gui .gui-block-content, .gui .gui-block-subcontent { background:none !important; border:0 !important; box-shadow:none !important; }
.gui .gui-block { border:1px solid var(--g-line) !important; }
.gui .gui-buttons.gui-border, .gui .gui-buttons { border-top:1px solid var(--g-line) !important; border-bottom:0 !important; }
.gui .gui-required { color:var(--g-muted) !important; }
.gui .gui-radio label, .gui .gui-checkbox label { color:var(--g-text) !important; }

/* ---------- Progress steps: final fixes ---------- */
.gui .gui-progressbar { height:auto !important; min-height:0 !important; width:auto !important; background:none !important; flex-wrap:wrap; }
.gui .gui-progressbar ul { display:contents !important; }
.gui .gui-progressbar li { background:none !important; background-color:transparent !important; border:0 !important; height:auto !important; width:auto !important; margin:0 !important; padding:0 !important; }
.gui .gui-progressbar .count { background-image:none !important; background-color:var(--g-ink) !important; border:1px solid var(--g-line) !important; color:var(--g-muted) !important; font-size:12px !important; width:24px !important; height:24px !important; border-radius:50% !important; display:inline-grid !important; place-items:center; text-indent:0 !important; padding:0 !important; line-height:1 !important; }
.gui .gui-progressbar li.gui-active .count { background-image:linear-gradient(90deg,var(--g-deep),var(--g-deep2)) !important; border-color:transparent !important; color:#fff !important; }
.gui .gui-progressbar li.gui-active a { color:#fff !important; }
.gui .gui-progressbar li a * { color:inherit !important; }

/* ---------- Cart fixes ---------- */
.gui .gui-table td a, .gui .gui-table td a.gui-bold { color:#fff !important; font-weight:700; }
.gui .gui-table td a:hover { color:var(--g-orange-text) !important; }
.gui .gui-table td.gui-valign-top a { color:inherit !important; }
.gui .gui-continue a, .gui .gui-table td[colspan] > a:not(.gui-button-small) { color:var(--g-muted) !important; }
.gui .gui-table td[colspan] > a:not(.gui-button-small):hover { color:var(--g-orange-text) !important; }
.gui a.gui-button-small:not(.gui-button-action), .gui a.gui-button-large:not(.gui-button-action) { background-color:var(--g-panel2) !important; background-image:none !important; color:#fff !important; border:1px solid var(--g-line) !important; text-shadow:none !important; }
.gui a.gui-button-small:not(.gui-button-action):hover { border-color:var(--g-orange) !important; text-decoration:none; }
.gui .gui-number, .gui .gui-number .gui-value, .gui .gui-number .gui-handle { background:var(--g-ink) !important; background-image:none !important; }
.gui .gui-number { display:inline-flex !important; align-items:center; width:auto !important; height:44px !important; border:1px solid var(--g-line) !important; border-radius:10px !important; overflow:hidden; padding:0 !important; }
.gui .gui-number .gui-value { width:auto !important; height:auto !important; float:none !important; margin:0 !important; }
.gui .gui-number .gui-value input { color:#fff !important; font-size:16px !important; width:46px !important; }
.gui .gui-number .gui-handle { position:static !important; float:none !important; width:34px !important; height:44px !important; display:flex !important; flex-direction:column !important; border-left:1px solid var(--g-line) !important; }
.gui .gui-number .gui-handle a { flex:1 !important; display:grid !important; place-items:center; width:100% !important; height:50% !important; color:#fff !important; background:none !important; text-indent:0 !important; font-size:15px !important; border:0 !important; line-height:1 !important; }
.gui .gui-number .gui-handle a:hover { color:var(--g-orange-text) !important; background:var(--g-panel2) !important; }
.gui .gui-products li.gui-option { grid-template-columns:48px minmax(0,1fr) auto 22px !important; }
.gui .gui-products-image { grid-column:1; } .gui .gui-products-title { grid-column:2; min-width:0; } .gui .gui-products-price { grid-column:3; } .gui .gui-products-option { grid-column:4; }
.gui .gui-products-title a { color:#fff !important; white-space:normal !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.gui .gui-products-price { color:#fff !important; }
.gui .gui-progressbar .count::before, .gui .gui-progressbar .count::after { display:none !important; content:none !important; }
.gui .gui-cart-sum .gui-desc, .gui .gui-cart-sum .gui-desc strong, .gui .gui-cart-sum .gui-price, .gui .gui-cart-sum .gui-price strong { color:#fff !important; }

/* ---------- Quantity box: fixed widths (Lightspeed sets its own tiny width) ---------- */
.gui .gui-number { width:96px !important; min-width:96px !important; max-width:none !important; }
.gui .gui-number .gui-value { width:62px !important; min-width:62px !important; flex:none !important; }
.gui .gui-number .gui-value input { width:100% !important; }
.gui .gui-number .gui-handle { flex:none !important; }

/* ---------- Remove link: plain text instead of Lightspeed's tiny icon ---------- */
.gui a.gui-action-delete { background:none !important; background-image:none !important; text-indent:0 !important; width:auto !important; height:auto !important; display:inline !important; font-size:13px !important; padding:0 !important; color:var(--g-muted) !important; text-decoration:underline; overflow:visible !important; }
.gui a.gui-action-delete:hover { color:#ff6b5e !important; }

/* ---------- Phone: cart rows as cards, steps that fit ---------- */
@media (max-width:640px) {
  .gui .gui-table tbody tr { display:flex !important; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:16px !important; }
  .gui .gui-table td { display:block !important; padding:0 !important; border:0 !important; width:auto !important; grid-column:auto !important; grid-row:auto !important; }
  .gui .gui-table td:nth-child(1) { flex:0 0 72px; }
  .gui .gui-table td:nth-child(2) { flex:1 1 calc(100% - 90px); min-width:0; }
  .gui .gui-table td:nth-child(3) { flex:0 0 auto; }
  .gui .gui-table td:nth-child(4) { margin-left:auto; }
  .gui .gui-table td:nth-child(5) { display:none !important; }
  .gui .gui-table td:nth-child(6) { flex:0 0 100%; text-align:right !important; font-weight:800; font-size:18px; border-top:1px solid var(--g-line) !important; padding-top:10px !important; }
  .gui .gui-table td[colspan] { flex:1 1 100%; text-align:left !important; }
  .gui .gui-table td[colspan] a.gui-button-small { width:100%; }
  .gui .gui-progressbar { flex-wrap:nowrap !important; overflow-x:auto !important; gap:8px !important; padding-bottom:6px; }
  .gui .gui-progressbar li a:not([aria-current]), .gui .gui-progressbar li:not(.gui-active) a { font-size:0 !important; gap:0 !important; padding:0 8px !important; }
  .gui .gui-progressbar li:not(.gui-active) a .count { font-size:12px !important; }
  .gui .gui-progressbar > a, .gui .gui-progressbar li a { white-space:nowrap; flex:none; }
}

/* ---------- Phone: quantity label and tidy "continue shopping" row ---------- */
@media (max-width:640px) {
  .gui .valueAmount { display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--g-line); border-radius:10px; background:var(--g-ink); color:#fff; font-weight:700; }
  .gui .valueAmount::before { content:"Qty "; color:var(--g-muted); font-weight:400; margin-right:6px; }
  .gui .gui-table tbody tr:last-child { display:block !important; padding:14px 16px !important; border-top:1px solid var(--g-line); }
  .gui .gui-table tbody tr:last-child td { display:block !important; width:100% !important; text-align:center !important; flex:none !important; }
  .gui .gui-table tbody tr:last-child td:nth-child(2) { display:none !important; }
}

/* ================= Account pages: login, register, forgot password ================= */

/* Message boxes (info / success / warning / error) */
.gui .gui-messages { background:none !important; border:0 !important; padding:0 !important; margin:0 0 18px !important; }
.gui .gui-messages ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.gui .gui-messages li { margin:0 !important; padding:14px 18px 14px 20px !important; background:var(--g-panel2) !important; color:var(--g-text) !important; border:1px solid var(--g-line) !important; border-left:4px solid var(--g-orange) !important; border-radius:12px !important; font-size:14px; line-height:1.5; box-shadow:none !important; text-shadow:none !important; background-image:none !important; }
.gui .gui-messages .gui-error li, .gui .gui-messages .gui-warning li { border-left-color:#ff5a4e !important; color:#ffb4ad !important; }
.gui .gui-messages .gui-success li { border-left-color:#3ecf8e !important; }
.gui ul.gui-error li, .gui ul.gui-warning li, .gui ul.gui-success li, .gui ul.gui-info li { background-image:none !important; }

/* Login: two columns as cards */
.gui .gui-col2-big { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; float:none; width:auto; }
.gui .gui-col2-big > div { float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
.gui .gui-col2-big-col1 { background:var(--g-panel); border:1px solid var(--g-line); border-radius:var(--g-radius); padding:24px !important; }
.gui .gui-col2-big-col2 .gui-block { margin:0; }
.gui .gui-content-title { font-size:15px !important; letter-spacing:.04em; text-transform:uppercase; font-weight:700 !important; color:#fff !important; margin:0 0 14px !important; padding:0 0 14px !important; border-bottom:1px solid var(--g-line); background:none !important; }
.gui .gui-account-loyalty-content { color:var(--g-muted) !important; margin:0 0 12px; font-size:15px; line-height:1.55; }
.gui .gui-col2-big-col1 .gui-buttons { border-top:1px solid var(--g-line) !important; }

/* Labels that Lightspeed forces dark */
.gui .gui-field label, .gui .gui-field > label, .gui label[for] { color:var(--g-muted) !important; }
.gui .gui-field label em, .gui label em { color:var(--g-orange-text) !important; }
.gui .gui-form p, .gui .gui-block-content p, .gui .gui-form .gui-note { color:var(--g-muted) !important; }

/* Custom dropdowns (Lightspeed overlays a styled value box on the real select) */
.gui .gui-select { position:relative; display:block; background:none !important; border:0 !important; height:48px; }
.gui .gui-select .gui-value { display:flex !important; align-items:center; height:48px !important; width:100% !important; padding:0 40px 0 14px !important; background:var(--g-ink) !important; border:1px solid var(--g-line) !important; border-radius:10px !important; color:var(--g-text) !important; font-size:15px; text-indent:0 !important; overflow:hidden; white-space:nowrap; }
.gui .gui-select .gui-handle { position:absolute !important; right:0; top:0; width:40px !important; height:48px !important; background:none !important; border:0 !important; pointer-events:none; }
.gui .gui-select .gui-handle::after { content:""; position:absolute; right:16px; top:21px; border:5px solid transparent; border-top-color:var(--g-muted); }
.gui .gui-select select { position:absolute !important; inset:0; width:100% !important; height:48px !important; opacity:0 !important; cursor:pointer; }

/* Phone number field (flag + country code + number) */
.gui .gui-input-phone-number { position:relative; display:flex !important; align-items:center; background:var(--g-ink) !important; border:1px solid var(--g-line) !important; border-radius:10px !important; height:48px !important; padding:0 !important; }
.gui .gui-input-phone-number:focus-within { border-color:var(--g-orange) !important; box-shadow:0 0 0 3px rgba(242,106,27,.22) !important; }
.gui .gui-input-phone-number .gui-input-phone-number-code-wrapper { position:relative; display:flex; align-items:center; gap:8px; padding:0 12px; height:100%; border-right:1px solid var(--g-line); color:var(--g-text); flex:none; }
.gui .gui-input-phone-number .gui-input-phone-number-code-flag { width:22px; height:auto; border-radius:3px; }
.gui .gui-input-phone-number-code-placeholder { color:var(--g-text) !important; font-size:14px; white-space:nowrap; }
.gui .gui-input-phone-number-code-wrapper select { position:absolute !important; inset:0; width:100% !important; height:100% !important; opacity:0 !important; cursor:pointer; border:0 !important; }
.gui .gui-input-phone-number > input { flex:1; border:0 !important; background:none !important; height:46px !important; box-shadow:none !important; border-radius:0 !important; }

/* Checkboxes in forms (newsletter, terms) */
.gui .gui-checkbox label, .gui .gui-field .gui-checkbox label { color:var(--g-text) !important; }
.gui .gui-block-content .gui-form + .gui-form { margin-top:14px; }

@media (max-width:980px) { .gui .gui-col2-big { grid-template-columns:1fr; } }
.gui .gui-col2-big > .gui-col2-big-col1 { padding:24px !important; }
.gui .gui-col2-big > .gui-col2-big-col2 .gui-block { margin-top:0 !important; }
.gui .gui-col2-big-col1 .gui-content-title { margin-top:0 !important; }
.gui .gui-account-loyalty-content, .gui .gui-col2-big-col1 > div { height:auto !important; min-height:0 !important; overflow:visible !important; }

/* ---------- Account refinements ---------- */
.gui .gui-input-phone-number .gui-input-phone-number-code-wrapper { align-items:center !important; }
.gui .gui-input-phone-number .gui-input-phone-number-code-flag { position:static !important; margin:0 !important; display:block; flex:none; width:22px !important; height:auto !important; transform:none !important; }
.gui .gui-input-phone-number .gui-input-phone-number-code-placeholder { position:static !important; margin:0 !important; padding:0 !important; line-height:1 !important; }
.gui .gui-input-phone-number > input { text-align:left !important; padding:0 14px !important; }
.gui .gui-block label, .gui .gui-block-content label, .gui .gui-field label { color:var(--g-muted) !important; }
.gui .gui-block label em, .gui .gui-field label em { color:var(--g-orange-text) !important; }
.gui .gui-checkbox label { line-height:1.5 !important; }
.gui input[type="checkbox"], .gui input[type="radio"] { accent-color:var(--g-orange); }
.gui .gui-buttons .gui-right > a.gui-button-small:not(.gui-button-action) { background-color:transparent !important; background-image:linear-gradient(90deg,var(--g-deep),var(--g-deep2)) !important; border-color:transparent !important; color:#fff !important; }
.gui .gui-buttons .gui-right > a.gui-button-small:not(.gui-button-action):hover { filter:brightness(1.12); border-color:transparent !important; }
.gui label span, .gui label .gui-nostyle, .gui .gui-nostyle { color:inherit !important; font:inherit !important; }

/* ---------- Plain Lightspeed text blocks (for example the empty cart message) ---------- */
.container.content > p { color:var(--muted); }
.container.content > p a { color:var(--orange-text); text-decoration:underline; } /* empty-cart */

/* ================= Rewards page (/loyalty/) ================= */
.gui #gui-loyalty-reward-page-title { font-size:clamp(30px,5vw,48px) !important; font-weight:800 !important; text-align:center !important; color:#fff !important; margin:34px 0 6px !important; line-height:1.1 !important; }
.gui .gui-reward-icon { object-fit:contain; filter:brightness(0) invert(1); }
.gui div.gui-reward-text-center[role="region"] { display:grid !important; grid-template-columns:auto 1fr; gap:30px; align-items:center; max-width:780px; margin:26px auto !important; padding:32px !important; text-align:left !important; background:linear-gradient(135deg,#1c1109,#0e0e0e 65%) !important; border:1px solid var(--g-line); border-radius:var(--g-radius); }
.gui div.gui-reward-text-center[role="region"] > .gui-reward-icon { width:auto !important; height:auto !important; max-width:200px; padding:6px 10px; box-sizing:content-box; }
.gui ul.gui-reward-top-text { list-style:none !important; margin:0 !important; padding:0 !important; display:grid; gap:14px; }
.gui ul.gui-reward-top-text li { display:flex; align-items:flex-start; gap:14px; margin:0 !important; padding:0 !important; font-size:19px; font-weight:700; line-height:1.35; color:#fff !important; background:none !important; border:0 !important; }
.gui ul.gui-reward-top-text li::before { content:"\2713"; flex:none; width:28px; height:28px; margin-top:1px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:800; color:#fff; background:linear-gradient(90deg,#b8420a,#c8500e); }
.gui ul.gui-reward-wrapper { list-style:none !important; max-width:780px; margin:0 auto !important; padding:0 !important; display:grid; gap:14px; }
.gui li.gui-reward-item { display:flex !important; align-items:center; gap:20px; margin:0 !important; padding:22px 26px !important; background:var(--g-panel) !important; border:1px solid var(--g-orange) !important; border-radius:var(--g-radius); box-shadow:0 0 0 4px rgba(242,106,27,.10); }
.gui li.gui-reward-item .gui-reward-icon { width:56px !important; height:56px !important; flex:none; padding:6px; box-sizing:border-box; }
.gui .gui-reward-item-text { font-size:18px !important; font-weight:700; color:#fff !important; line-height:1.35; }
.gui .gui-loyalty .gui-buttons, .gui [aria-label="Navigation"].gui-buttons { max-width:780px; margin-left:auto; margin-right:auto; }
@media (max-width:640px) {
  .gui div.gui-reward-text-center[role="region"] { grid-template-columns:1fr; justify-items:center; padding:24px !important; gap:22px; }
  .gui ul.gui-reward-top-text li { font-size:17px; }
  .gui li.gui-reward-item { padding:18px !important; }
}
.gui ul.gui-reward-wrapper { display:grid !important; width:100% !important; box-sizing:border-box; }
.gui li.gui-reward-item { width:100% !important; box-sizing:border-box; }

/* ================= Blog (/blogs/...) ================= */
.gui .gui-blog-article { max-width:780px; }
.gui .gui-blog-article header h1 { font-size:clamp(28px,4vw,42px) !important; line-height:1.15 !important; font-weight:800 !important; margin:6px 0 12px !important; color:#fff !important; }
.gui .gui-blog-article header h1 a { color:#fff !important; text-decoration:none !important; }
.gui .gui-blog-article header ul { list-style:none !important; margin:0 0 22px !important; padding:0 !important; display:flex; flex-wrap:wrap; gap:6px 18px; }
.gui .gui-blog-article header ul li { float:none !important; margin:0 !important; padding:0 !important; border:0 !important; font-size:14px; color:var(--g-muted) !important; }
.gui .gui-blog-article .blog-article-summary { font-size:19px !important; line-height:1.55 !important; color:#fff !important; border-left:3px solid var(--g-orange); padding:2px 0 2px 16px; margin:0 0 26px !important; }
.gui .gui-blog-article-content, .gui .gui-blog-article-content p, .gui .gui-blog-article-content li { color:#d6d6d6 !important; font-size:17px; line-height:1.75; }
.gui .gui-blog-article-content p { margin:0 0 16px; }
.gui .gui-blog-article-content h2 { color:#fff !important; font-size:26px; line-height:1.25; margin:1.7em 0 .5em; }
.gui .gui-blog-article-content h3 { color:#fff !important; font-size:20px; margin:1.4em 0 .4em; }
.gui .gui-blog-article-content ul, .gui .gui-blog-article-content ol { margin:0 0 18px; padding-left:24px; }
.gui .gui-blog-article-content li { margin:0 0 10px; }
.gui .gui-blog-article-content strong { color:#fff !important; }
.gui .gui-blog-article-content a { color:var(--g-orange-text) !important; text-decoration:underline; }
.gui .gui-blog-article-content a:hover { color:#fff !important; }
.gui .gui-col2-right-col2 .gui-block a { color:var(--g-orange-text) !important; }
.gui .gui-col2-right-col2 .gui-block li { margin:0 0 8px; }