:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#7c3aed;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
}
*{box-sizing:border-box}
html, body { height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,-apple-system,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,#07111a 0%, #0b1320 100%);
  background-attachment: fixed;
  background-size:cover;
  color:#e6eef8;
  line-height:1.45;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Modal input stronger theme for phone stand */
#modalCustomInput input#customTextInput{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border:1px solid rgba(124,58,237,0.14);padding:12px 14px;border-radius:10px;font-size:1rem}
#modalCustomInput input#customTextInput{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border:1px solid rgba(124,58,237,0.14);padding:12px 14px;border-radius:10px;font-size:1rem;color:#ffffff}
#modalCustomInput input#customTextInput:focus{border-color:var(--accent);box-shadow:0 6px 30px rgba(124,58,237,0.12)}

/* Inline custom input in cart */
.custom-input{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);color:#e6eef8;padding:8px 10px;border-radius:8px;font-size:0.95rem}
.custom-input:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 20px rgba(124,58,237,0.08)}
.save-custom{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 8px;border-radius:8px;color:var(--muted)}
.save-custom:hover{background:rgba(255,255,255,0.03);color:white}


.container{max-width:1100px;margin:0 auto;padding:1.25rem}

.site-header{position:sticky;top:0;z-index:90;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.3));padding:6px 0}
.header-inner{display:flex;align-items:center;gap:10px}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);text-decoration:none;font-size:1rem}
.brand-logo{display:inline-block;height:auto;width:auto;max-height:28px;margin-right:6px;vertical-align:middle}
.nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;display:inline-block;border-bottom:2px solid transparent}
.nav a:hover{color:white;background:rgba(255,255,255,0.03);border-bottom-color:var(--accent);text-decoration:none}

main{flex:1}

.cart-btn{background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:10px;color:inherit}
.cart-btn:hover{background:rgba(255,255,255,0.06); box-shadow:0 8px 20px rgba(2,6,23,0.35); transform: translateY(-1px);}
.cart-count{background:var(--accent);color:white;border-radius:999px;padding:2px 7px;margin-right:8px;font-weight:600}

.hero{padding:28px 0}
.hero-inner{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:center}
.hero h1{font-size:1.8rem;margin:0 0 8px}
.hero p{color:var(--muted);max-width:40ch}
.hero-img{width:100%;max-width:360px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6);transition:transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease, box-shadow 260ms ease !important;cursor:pointer}
.hero-img:hover{transform:scale(1.08) !important;filter:brightness(1.15) drop-shadow(0 0 25px rgba(124,58,237,0.8)) !important;box-shadow:0 30px 80px rgba(124,58,237,0.5), inset 0 0 20px rgba(124,58,237,0.2) !important}

/* top-wrap: apply darker panel that ends above the About section */
.top-wrap{background:linear-gradient(180deg, rgba(2,6,23,0.9) 0%, rgba(2,6,23,0.6) 40%, rgba(2,6,23,0.3) 70%, transparent 100%);padding-bottom:68px ;}

.section{padding:40px 0}
.muted{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}


.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);}
.card img{width:100%;height:200px;object-fit:contain;border-radius:8px;background:#071020;padding:8px;transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
.card{transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms, border-color 220ms; cursor: pointer;}
.card:hover{transform: translateY(-10px) scale(1.03);box-shadow:0 24px 60px rgba(124,58,237,0.3), 0 8px 30px rgba(2,6,23,0.8);border-color:rgba(124,58,237,0.4)}
.card:hover img{transform:scale(1.05)}
.card .meta .add-btn, .card .meta .btn{transition: transform 140ms ease, box-shadow 140ms ease}
.card .meta .add-btn:hover, .card .meta .btn:hover{transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2,6,23,0.35)}
.card h4{margin:10px 0 6px}
.card p{margin:0;color:var(--muted);font-size:0.95rem}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:0;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--accent),#5b21b6);color:white;font-weight:600}

.cart-drawer{position:fixed;right:20px;top:80px;width:360px;background:var(--card);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 20px 60px rgba(0,0,0,0.6);z-index:60}
.hidden{display:none}
.cart-items{max-height:320px;overflow:auto;margin:10px 0}
.cart-item{display:flex;gap:10px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);align-items:center}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.close-btn{background:transparent;border:0;color:var(--muted);font-size:18px}
.cart-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}

.site-footer{padding:24px 0;text-align:center;color:var(--muted);background:transparent;margin-top:auto}

/* Modal styles */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:120}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:18px;border-radius:12px;max-width:960px;width:calc(100% - 40px);box-shadow:0 30px 80px rgba(2,6,23,0.7);border:1px solid rgba(255,255,255,0.03)}
.modal-body{display:flex;gap:18px;align-items:flex-start}
.modal-img{width:360px;height:auto;border-radius:10px;object-fit:contain;background:#071020;padding:6px}
.modal-info{flex:1}
.modal-info h3{margin-top:0}
.modal-info p{color:var(--muted)}

/* Modal open/close animation */
.modal{opacity:0;transition:opacity 220ms ease;pointer-events:none}
.modal .modal-content{transform: translateY(8px) scale(0.98);opacity:0;transition:transform 260ms cubic-bezier(.2,.8,.2,1), opacity 260ms}
.modal.open{opacity:1;pointer-events:auto}
.modal.open .modal-content{transform: translateY(0) scale(1);opacity:1}

/* Popout transform: briefly scale and lift modal to suggest it's becoming a new window */
.modal.popout{opacity:1;pointer-events:auto}
.modal.popout .modal-content{transform: translateY(-20px) scale(1.15);box-shadow:0 60px 180px rgba(2,6,23,0.95);transition:transform 380ms cubic-bezier(.34,.1,.68,.55), box-shadow 380ms ease}
.modal.popout::before{content:'';position:fixed;inset:0;background:transparent}

@media (max-width:900px){
  .modal-body{flex-direction:column;align-items:center}
  .modal-img{width:80%}
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .container{padding:10px}
  .cart-drawer{left:12px;right:12px;top:auto;bottom:20px;width:auto}
  .brand-logo{max-height:22px}
  .hero-img{max-width:300px}
  .card img{height:160px}
}
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#7c3aed;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
}
*{box-sizing:border-box}
.html, body { height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,-apple-system,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,#07111a 0%, #0b1320 100%);
    background-attachment: fixed;
    background-size:cover;
  .site-header{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.3));padding:6px 0}
  line-height:1.45;
  .header-inner{display:flex;align-items:center;gap:10px}
  .logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent);text-decoration:none;font-size:1rem}
  .brand-logo{display:inline-block;height:auto;width:auto;max-height:24px;margin-right:6px;vertical-align:middle;filter:none}
  min-height:100vh;
}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.site-header{position:sticky;top:0;z-index:90}
.site-header{backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.3));padding:12px 0}
.header-inner{display:flex;align-items:center;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
.brand-logo{display:inline-block;height:auto;width:auto;max-height:120px;margin-right:8px;vertical-align:middle;filter:none}
.nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
  .hero{padding:28px 0}
  .hero-inner{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center}
  /* Hero carousel: smaller images and fade transition */
  .hero { padding: 28px 0; }
  .hero .hero-inner { gap:18px; align-items:center }
  .hero-carousel{position:relative;width:320px;max-width:38vw;height:auto;display:block;justify-self:end}
  .hero-carousel img{position:absolute;inset:0;width:100%;height:auto;object-fit:contain;border-radius:8px;opacity:0;transform:scale(0.98);transition:opacity 420ms ease, transform 420ms ease, box-shadow 280ms ease, filter 280ms ease;cursor:pointer;pointer-events:none}
  .hero-carousel img.active{opacity:1;transform:translateY(-12px) scale(1);pointer-events:auto}

  /* Hover: only highlight the active slide — non-active slides remain hidden */
  .hero-carousel:hover img.active{transform:translateY(-14px) scale(1.04);box-shadow:0 30px 80px rgba(124,58,237,0.16),0 12px 34px rgba(2,6,23,0.6);filter:brightness(1.04)}

  /* Pot (p4) pop animation when it becomes active: jump up then settle */
  @keyframes potPop {
    0% { transform: translateY(20px) scale(0.96); opacity: 0; }
    20% { transform: translateY(-90px) scale(1.11); opacity: 1; }
    50% { transform: translateY(-70px) scale(1.05); }
    100% { transform: translateY(-70px) scale(1); }
  }

  .hero-carousel img[data-id="p4"].active{
    animation: potPop 800ms cubic-bezier(.2,.8,.2,1);
    /* keep pot elevated while active */
    transform: translateY(-70px) scale(1) !important;
  }
  .hero-carousel .visually-hidden{position:absolute;left:-9999px}

  @media (max-width:780px){
    .hero-inner{grid-template-columns:1fr;grid-auto-rows:auto}
    .hero-carousel{justify-self:center;width:280px;max-width:60vw;height:280px}
    .hero-carousel img{opacity:0;transform:translateY(-6px) scale(1)}
    .hero-carousel img[data-id="p4"].active{ animation: potPop 600ms cubic-bezier(.2,.8,.2,1); transform: translateY(-70px) scale(1) !important; }
  }

/* Layout adjustments requested: move products down and raise top area */
#products{margin-top:80px}
.top-wrap{margin-bottom:-40px}
  .hero h1{font-size:1.8rem;margin:0 0 8px}
  .hero p{color:var(--muted);max-width:40ch}
  .hero-img{width:100%;max-width:360px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.cart-count{background:var(--accent);color:white;border-radius:999px;padding:2px 7px;margin-right:8px;font-weight:600}

.hero{padding:48px 0}
.hero-inner{display:grid;grid-template-columns:1fr 440px;gap:32px;align-items:center}
.hero h1{font-size:2rem;margin:0 0 8px}
.hero p{color:var(--muted);max-width:45ch}
  .card img{width:100%;height:200px;object-fit:contain;border-radius:8px;background:#071020;padding:8px}

.section{padding:40px 0}
.muted{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);}
.card img{width:100%;height:300px;object-fit:contain;border-radius:8px;background:#071020;padding:10px}
.card h4{margin:10px 0 6px}
.card p{margin:0;color:var(--muted);font-size:0.95rem}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:0;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--accent),#5b21b6);color:white;font-weight:600}

.cart-drawer{position:fixed;right:20px;top:80px;width:360px;background:var(--card);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 20px 60px rgba(0,0,0,0.6);z-index:60}
.hidden{display:none}
.cart-items{max-height:320px;overflow:auto;margin:10px 0}
.cart-item{display:flex;gap:10px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);align-items:center}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.close-btn{background:transparent;border:0;color:var(--muted);font-size:18px}
.cart-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}

.site-footer{padding:24px 0;text-align:center;color:var(--muted);background:transparent}

/* ensure footer sits at bottom when content is short */
.site-footer{margin-top:auto}

/* Modal styles */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:120}
.modal.hidden{display:none}
.modal-content{background:var(--card);padding:18px;border-radius:12px;max-width:960px;width:calc(100% - 40px);box-shadow:0 30px 80px rgba(2,6,23,0.7);border:1px solid rgba(255,255,255,0.03)}
.modal-body{display:flex;gap:18px;align-items:flex-start}
.modal-img{width:360px;height:auto;border-radius:10px;object-fit:contain;background:#071020;padding:6px}
.modal-info{flex:1}
.modal-info h3{margin-top:0}
.modal-info p{color:var(--muted)}

@media (max-width:900px){
  .modal-body{flex-direction:column;align-items:center}
  .modal-img{width:80%}
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .checkout-grid{grid-template-columns:1fr}
  .checkout-pay{position:relative;top:auto}
}

@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .container{padding:12px}
  .cart-drawer{left:12px;right:12px;top:auto;bottom:20px;width:auto;max-height:60vh}
  .brand-logo{max-height:28px}
  .hero-img{max-width:100%;height:auto}
  .card img{height:160px}
  .hero h1{font-size:1.5rem}
  .hero p{font-size:0.95rem}
  .nav{gap:8px}
  .nav a{font-size:0.9rem;padding:4px 6px}
  .cart-btn{padding:4px 8px;font-size:0.9rem}
  .modal-content{padding:12px;width:calc(100% - 24px)}
  .modal-img{width:100%;max-width:280px}
  .modal-info h3{font-size:1.2rem}
  .btn{padding:8px 12px;font-size:0.95rem}
  .checkout-pay .total{font-size:1.4rem}
  .checkout-pay .btn-pay{padding:12px;font-size:1rem}
  .checkout-item{flex-direction:column;text-align:center}
  .checkout-item img{width:100%;max-width:200px;height:auto}
  .site-header{padding:8px 0}
}

/* Flying image used for add-to-cart animation (created dynamically) */
.fly-image{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms;
}

/* Checkout page tweaks */
#checkoutArea { margin-top: 18px; }
#items div { border-bottom: 1px solid rgba(255,255,255,0.02); padding-bottom:8px }

/* Polished checkout layout */
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.checkout-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.checkout-items{display:flex;flex-direction:column;gap:12px}
.checkout-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);background:rgba(255,255,255,0.01)}
.checkout-item img{width:68px;height:68px;object-fit:cover;border-radius:8px}
.checkout-pay{position:sticky;top:100px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.checkout-pay .total{font-size:1.6rem;font-weight:800;color:var(--accent);margin-bottom:12px}
.checkout-pay .meta{color:var(--muted);font-size:0.95rem;margin-bottom:12px}
.checkout-pay .btn-pay{width:100%;padding:14px 16px;border-radius:12px;font-size:1.05rem}

@media (max-width:900px){
  .checkout-grid{grid-template-columns:1fr;}
  .checkout-pay{position:relative;top:auto}
}

/* Cart drawer slide animation and close-button reposition */
.cart-drawer{
  /* start slightly offset and transparent so we can animate in */
  transform: translateX(12px);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms;
  padding-top: 44px; /* leave space for absolute close button */
}
.cart-drawer:hover{
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
}
.cart-item{
  transition: background 180ms ease, transform 180ms ease;
}
.cart-item:hover{
  background: rgba(124,58,237,0.08);
  transform: translateX(4px);
}
.cart-drawer.open{
  transform: translateX(0);
  opacity: 1;
 }
 .cart-drawer .close-btn{
   position: absolute;
   left: 12px;
  top: 12px;
  font-size:18px;
  color:var(--muted);
  cursor: pointer;
}
.cart-drawer .cart-header{ position:relative; text-align:center; }
.cart-drawer .cart-header h3{ margin:6px 0; }

/* quick button click animation */
.cart-btn.click-animate{ transform: scale(0.92); transition: transform 160ms ease; }

/* Hide scrollbars while retaining scroll (cart + page) */
body, .cart-items {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
body::-webkit-scrollbar, .cart-items::-webkit-scrollbar { display: none; }

/* Touch-friendly buttons and inputs on mobile */
@media (max-width:600px){
  button, .btn, input, select, textarea {
    min-height: 44px; /* iOS touch target minimum */
    font-size: 16px; /* Prevents zoom on iOS */
  }
  .cart-item {
    padding: 12px;
  }
  .cart-footer button {
    padding: 12px 16px;
  }
}
  /* Success/cancel page mobile adjustments */
  body.checkout-page main.container {
    padding: 24px 16px;
    margin: 12px;
  }
  body.checkout-page h1 {
    font-size: 1.4rem;
  }
}

/* Keep checkout cart fixed on right, including mobile */
.checkout-page .cart-drawer {
  position: fixed;
  right: 20px;
  top: 80px;
  left: auto;
  bottom: auto;
  width: 360px;
}
@media (max-width:900px){
  .checkout-page .cart-drawer { 
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin-top: 20px;
  }
}
@media (max-width:600px){
  .checkout-page .cart-drawer { 
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin-top: 20px;
  }
}