:root{--bg:#0b1020;--text:#e6e8ee;--muted:#b6bdd3;--brand:#8bd3ff;--brand2:#b892ff;--border:rgba(255,255,255,.12);--card:#101831}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#070b16 0%,#0b1020 60%,#0f1830 100%);color:var(--text);
  font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:manipulation}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}
header{position:sticky;top:0;z-index:50;background:rgba(7,11,22,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.navwrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:.8rem;align-items:center}
.brand img{height:40px;border-radius:10px}
.brand .t{font:800 20px/1 Inter}
.brand .s{font:500 12px/1.2 Inter;color:var(--muted)}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{padding:.5rem .7rem;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:rgba(255,255,255,.10);font-weight:700}
.menu{display:none;border:1px solid var(--border);background:rgba(255,255,255,.06);border-radius:10px;padding:.55rem .7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.1rem;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0a0d18;border:0;font-weight:700}
.btn.block{display:flex;width:100%;justify-content:center;margin-top:10px}
.nav-socials{display:flex;align-items:center;gap:.45rem;margin-left:.4rem}
.nav-socials .label{font-weight:600;font-size:14px;opacity:.9}
.nav-socials a{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);transition:.15s}
.nav-socials a:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.nav-socials svg{width:34px;height:34px;display:block}
.hero{position:relative;min-height:64vh;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 20% -10%,rgba(139,211,255,.15),transparent 40%),
             radial-gradient(ellipse at 120% 0%,rgba(184,146,255,.12),transparent 36%),var(--bg)}
.hero::before{content:"";position:absolute;inset:-4vh 0 0 0;background-image:var(--hero,url('images/hero.jpg'));background-size:cover;background-position:center 40%;
  transform:translateY(var(--parallax,0px)) scale(1.08);filter:saturate(1.05) contrast(1.02) brightness(.9);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,8,18,.55) 0%,rgba(5,8,18,.85) 85%)}
.hero .inner{position:relative;z-index:2;text-align:center;padding:12vh 0 10vh}
.hero h1{margin:0 0 .6rem;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(28px,7vw,52px);
  line-height:1.15;letter-spacing:.3px;color:#f2f5f9;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.type{font-weight:800}
.hero p{max-width:720px;margin:0 auto 1.2rem;color:var(--muted);font-size:clamp(15px,4.4vw,18px)}
section{padding:64px 0;content-visibility:auto;contain-intrinsic-size:1px 1000px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:18px}
h2{margin:0;font-family:'Playfair Display',serif;font-size:clamp(22px,5vw,34px)}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery figure{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:1px solid var(--border);border-radius:16px;padding:18px;background:rgba(255,255,255,.04)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.frame{border:1px solid var(--border);border-radius:16px;overflow:hidden}
.cta-bar{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.sticky-cta{position:fixed;right:12px;bottom:12px;z-index:60;display:none}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.cards-3{grid-template-columns:1fr}.split{grid-template-columns:1fr}}
@media (max-width:640px){
  header{backdrop-filter:none;background:#0a0f22CC}
  .menu{display:inline-flex}
  .nav{display:none;position:absolute;top:56px;left:4%;right:4%;flex-direction:column;background:#0a0f22;border:1px solid var(--border);border-radius:14px;padding:10px}
  .nav.open{display:flex}
  .brand .t{font-size:18px}
  .hero{min-height:58vh}
  .container{width:min(1100px,94%)}
  p,li{word-wrap:break-word;overflow-wrap:anywhere}
  .nav-socials a{width:44px;height:44px}
  .nav-socials svg{width:26px;height:26px}
  .sticky-cta{display:block}
}
.footer{padding:28px 0;border-top:1px solid var(--border);color:var(--muted);text-align:center}

/* ---- Portfolio image adjustment (one-off) ---- */
.gallery img.head-in-frame {
  object-fit: cover;
  object-position: 50% 20%; /* show a bit more head */
}


/* --- Brighten the mobile Menu button --- */
@media (max-width: 640px) {
  .menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    border: none;
    border-radius: 14px;
    padding: 0.8rem 1.2rem;
    box-shadow: 
      0 4px 14px rgba(139, 211, 255, 0.45),
      0 2px 10px rgba(184, 146, 255, 0.35);
    transition: all 0.25s ease;
  }

  .menu:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
  }

  .menu:active {
    transform: scale(0.97);
    filter: brightness(0.9);
  }

  /* When open, tone it down slightly */
  .menu[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    box-shadow: none;
  }
}


/* --- Services & Pricing polish --- */
.price {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 32px;
  color: #fff;
  margin-bottom: 6px;
  text-align: center;
}

.price small {
  display: block;
  font: 600 13px/1.4 Inter, sans-serif;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  text-align: center;
}

.pricing .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 2rem 1.5rem;
  transition: all 0.25s ease;
}

.pricing .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.3);
}


/* Build Your Own */
.card.build-your-own .card-body{ display:flex; flex-direction:column; gap:12px; }
.byo-form fieldset{ border:1px solid var(--border); border-radius:16px; padding:12px 14px; margin:8px 0; }
.byo-form legend{ font-weight:800; font-size:14px; color:var(--muted); padding:0 6px; }
.byo-form label{ display:flex; align-items:center; gap:8px; padding:6px 4px; cursor:pointer; }
.byo-summary{ border:1px dashed var(--border); border-radius:14px; padding:10px 12px; margin:8px 0 12px; }
.byo-summary .row{ display:flex; justify-content:space-between; padding:4px 0; }
.byo-summary .row.total{ font-weight:800; font-size:18px; }
@media (max-width:640px){
  .byo-form fieldset label{ font-size:14px; }
}


/* BYO modal + form (kept minimal to blend with site) */
.modal.byo-modal{}
.byo-card .notice{ color: var(--muted); font-size: 13px; margin-top:8px; }
.byo-modal .modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.byo-modal .modal-card{ position:fixed; inset:auto 50% auto auto; top:8vh; transform:translateX(50%);
  width:min(640px,92%); background:rgba(14,20,40,.98); border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4);
  padding:16px; z-index:1001; }
.byo-modal .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.byo-modal .modal-close{ background:transparent; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.byo-form fieldset{ border:1px solid var(--border); border-radius:16px; padding:12px 14px; margin:10px 0; }
.byo-form legend{ font-weight:800; font-size:14px; color:var(--muted); padding:0 6px; }
.byo-form label{ display:flex; align-items:center; gap:8px; padding:6px 4px; cursor:pointer; }
.byo-summary{ border:1px dashed var(--border); border-radius:14px; padding:10px 12px; margin:8px 0 12px; }
.byo-summary .row{ display:flex; justify-content:space-between; padding:4px 0; }
.byo-summary .row.total{ font-weight:800; font-size:18px; }
@media (max-width:640px){
  .byo-modal .modal-card{ top:6vh; width:94%; left:50%; transform:translateX(-50%); }
  .byo-form fieldset label{ font-size:14px; }
}


.cart-fab{
  position:fixed; top:16px; right:16px; z-index:2147483647;
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px; border:none;
  background:#FFD84D; color:#0b1020; font-weight:800; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer;
}
.cart-fab svg{ width:22px; height:22px; fill:currentColor; display:block; }
.cart-fab .count{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#0b1020; color:#fff; font:700 12px/1 Inter,system-ui,sans-serif; }
@media (max-width:640px){
  .cart-fab{ top:auto; bottom: calc(env(safe-area-inset-bottom,0px) + 12px); right:12px; }
}


/* BYO highlight */
.byo-card .price small.badge.best-choice{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font:800 11px/1 Inter, system-ui, sans-serif; letter-spacing:.3px;
  background:linear-gradient(90deg,#FFE680,#FFD24D); color:#1a1a1a; box-shadow:0 2px 10px rgba(255,210,77,.35);
}
.byo-card .price{ text-shadow: 0 0 10px rgba(255,210,77,.15), 0 0 22px rgba(255,210,77,.08); }
.byo-form .stack{ display:flex; flex-direction:column; gap:10px; margin:8px 0; }
.byo-form .select-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.byo-form select{ background:#0f1830; color:#e6e8ee; border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
#byo-open.btn.primary{ box-shadow:0 8px 30px rgba(184,146,255,.25); }



/* --- BYO modal clickability & stacking fix --- */
.byo-modal{ position:fixed; inset:0; z-index: 2000; }
.byo-modal .modal-backdrop{ position:fixed; inset:0; z-index: 2001; pointer-events:auto; }
.byo-modal .modal-card{ position:fixed; z-index: 2002; pointer-events:auto; }
.byo-modal[hidden]{ display:none !important; }



/* ===== BYO modal emergency overrides ===== */
.byo-modal{ position:fixed !important; inset:0 !important; z-index: 9999 !important; pointer-events:auto !important; }
.byo-modal .modal-backdrop{ position:fixed !important; inset:0 !important; z-index: 10000 !important; background:rgba(0,0,0,.45) !important; pointer-events:none !important; }
.byo-modal .modal-card{
  position:fixed !important; top:8vh !important; left:50% !important; transform:translateX(-50%) !important;
  width:min(640px,94vw) !important; max-height:84vh !important; overflow:auto !important;
  z-index: 10001 !important; pointer-events:auto !important;
}
/* Hide floating basket above modal to avoid intercepting clicks */
.byo-modal .cart-fab{ display:none !important; }
/* Ensure modal is really hidden when attribute is set */
.byo-modal[hidden]{ display:none !important; visibility:hidden !important; opacity:0 !important; }



/* ---------------------
   🎃 Halloween Theme (auto for October, safe & reversible)
   You can toggle live by adding/removing the "halloween" class on <html>.
   Or preview any month with ?halloween=on/off in the URL.
----------------------*/
@import url('https://fonts.googleapis.com/css2?family=Eater&display=swap');

:root.halloween {
  --brand:#ff6a00;   /* pumpkin orange */
  --brand2:#8c00ff;  /* witch purple */
  --bg:#0a0a0a;
  --text:#f7f7f7;
  --card:#151515;
}

.halloween body {
  background: linear-gradient(180deg,#080808 0%,#111 100%);
  color: var(--text);
}

/* Light touch to header/footer */
.halloween header, .halloween .footer {
  background: rgba(0,0,0,0.65);
  border-color: rgba(255,106,0,0.28);
}

/* Buttons pop nicely in Halloween mode */
.halloween .btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#0b0b0b !important;
  border: none;
  box-shadow: 0 0 15px rgba(255,106,0,.35);
}
.halloween .btn.primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Optional spooky headline font — only when an element uses .tagline */
.halloween .tagline {
  font-family: "Eater", system-ui, sans-serif;
  color: #ff7a1f;
  text-shadow: 0 0 10px #8c00ff66;
}

/* Tiny decorative cobweb top-left when the body has .cobweb */
.halloween .cobweb::before {
  content: "";
  position: absolute; inset: 0 auto auto 0; width: 120px; height: 120px;
  pointer-events: none; opacity: .25;
  background-image:
    radial-gradient(60px 60px at 60px 60px, transparent 58px, #ffffff22 59px, transparent 60px),
    conic-gradient(from 0deg at 0 0, #ffffff26 0 6deg, transparent 6deg 12deg, #ffffff26 12deg 18deg, transparent 18deg 24deg, #ffffff26 24deg 30deg, transparent 30deg 360deg);
  filter: drop-shadow(0 0 4px #ffffff10);
}

/* Floating bats — hidden on small screens to keep things crisp */
.halloween .bat {
  position: fixed; top: -40px; width: 28px; height: 12px; opacity: .35; z-index: 9999; pointer-events:none;
  animation: fly linear infinite;
}
@keyframes fly {
  from { transform: translateX(-10vw) translateY(0) rotate(0deg); }
  to   { transform: translateX(110vw) translateY(12vh) rotate(3deg); }
}
@media (max-width: 640px) {
  .halloween .bat { display: none; }
}


/* --- Reviews helpers (tiny) --- */
.reviews-list{grid-template-columns:1fr;gap:14px}
.review .meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.stars .s{opacity:.5}
.stars .s.on{opacity:1}
.badge.success{color:#baf3d1;border-color:rgba(36,216,124,.35);background:rgba(36,216,124,.08)}
.badge.error{color:#ffcaca;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}

/* ===============================
   MOBILE CLEAN & CENTERED LAYOUT
   =============================== */
@media (max-width: 640px) {

  /* Header: stack + center */
  header, .site-header, #site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
  }

  .brand, .logo, .site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  /* Navigation */
  nav, .nav, .nav-tabs {
    width: 100%;
  }
  nav ul, .nav ul, .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    padding: 0;
    margin: 2px 0 0;
    list-style: none;
  }
  nav a, .nav a, .nav-tabs a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
  }

  /* Hero content */
  .hero, .hero-section, .home-hero {
    text-align: center;
    padding: 40px 16px 28px;
  }

  .hero h1, .hero-title, .home-hero h1 {
    margin: 0 auto 10px;
    max-width: 24ch;
    line-height: 1.2;
    font-size: clamp(24px, 6vw, 32px);
  }

  .hero p, .hero-sub, .subtitle, .tagline {
    margin: 0 auto 18px;
    max-width: 36ch;
    font-size: clamp(14px, 3.8vw, 18px);
  }

  /* CTA buttons stacked vertically */
  .cta-row, .cta-buttons, .hero-ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .cta-row .btn,
  .cta-buttons .btn,
  .hero-ctas .btn {
    width: min(92%, 420px);
  }

  /* Basket button tidy at bottom right */
  .cart-fab, .basket-fab, .floating-basket {
    right: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    border-radius: 16px !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    z-index: 9999 !important;
  }

  /* Optional: soften bats */
  .bat, .bats, .halloween .bat { opacity: 0.35; transform: scale(0.85); }

  /* Hero background gradient overlay */
  .hero::before, .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.35));
    pointer-events: none;
  }
}

/* === Snipcart: remove top black/grey header bar & tighten spacing === */
#snipcart .snipcart-cart-header,
#snipcart .snipcart-layout__header,
#snipcart .snipcart-cart__secondary-header,
#snipcart .snipcart-modal__header {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure content lifts up after header is hidden */
#snipcart .snipcart-cart__content,
#snipcart .snipcart-layout__content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep sticky/floating basket visible above Snipcart only when not in modal */
#snipcart .cart-fab { z-index: 10; } /* Snipcart uses huge z-index internally, so no overlap */

/* ===== Mobile menu compaction (less vertical space, tighter look) ===== */
@media (max-width: 640px) {
  /* Make the dropdown panel a bit smaller and more centered */
  .nav {
    top: 60px;
    left: 3%;
    right: 3%;
    border-radius: 16px;
    padding: 12px 14px;
  }

  /* Stack items with modest spacing */
  .nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    margin: 0;
    list-style: none;
  }

  /* Reduce link padding + font size a touch for mobile */
  .nav a {
    display: block;
    padding: 10px 14px;
    font-size: 17px;
    border-radius: 12px;
  }

  .nav a.active {
    font-weight: 800;
  }
}

/* === Mobile menu toggle fix === */
@media (max-width: 640px) {
  /* Hide menu by default */
  .nav {
    display: none !important;
  }

  /* Only show when the menu is toggled open */
  .nav.open {
    display: flex !important;
    flex-direction: column;
  }
}