/* =========================================================
   Kiss Her by Bianca Hall — Global Neon Theme
   Link in <head> AFTER the Big Cartel stylesheet:
   <link rel="stylesheet" href="/global.css">
   No HTML changes needed. Targets Big Cartel markup:
   #wrap #header #main #main-content #footer .product .grid
   ========================================================= */

:root{
  --bg:#0b0710; --ink:#fff; --muted:#b9aecb;
  --pink:#ff2e93; --cyan:#27f0ff; --violet:#8b5cff;
  --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.14);
  --radius:22px;
}

/* ---------- Reset / base ---------- */
html{scroll-behavior:smooth}
html,body{background:var(--bg)!important;color:var(--ink)!important}
body{
  font-family:'PT Sans',Arial,sans-serif!important;
  font-size:16px!important; line-height:1.65!important; margin:0!important; padding:0!important;
  overflow-x:hidden; min-height:100vh;
  background-image:
    radial-gradient(circle at 15% 0%,rgba(255,46,147,.25),transparent 40%),
    radial-gradient(circle at 90% 20%,rgba(39,240,255,.18),transparent 40%),
    radial-gradient(circle at 50% 100%,rgba(139,92,255,.22),transparent 45%)!important;
  background-attachment:fixed!important;
}
#wrap,#main,#main-content,.main-inner,.container{background:transparent!important;border:0!important;box-shadow:none!important}
*,*::before,*::after{box-sizing:border-box}
.container{max-width:1180px!important;width:auto!important;margin:0 auto!important;padding:0 24px!important}
.clearfix::after{content:"";display:table;clear:both}
a{color:var(--cyan);text-decoration:none;transition:.25s}
a:hover{color:var(--pink);text-shadow:0 0 10px var(--pink)}
img{max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-family:'Maven Pro',sans-serif!important;color:#fff!important;line-height:1.15;font-weight:800}
p{color:#e7e0f2}
hr{border:0;border-top:1px solid var(--line)}
::selection{background:var(--pink);color:#fff}

/* ---------- Header ---------- */
#header{
  position:sticky!important; top:0; z-index:50;
  background:rgba(11,7,16,.7)!important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)!important; height:auto!important; padding:10px 0!important;
}
#header .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px}
#header .logo{order:1; margin:0!important; padding:0!important; flex:1 1 280px; float:none!important}
#header .logo a{
  display:block!important; width:100%!important; max-width:420px; height:56px!important;
  background-size:contain!important; background-position:left center!important; background-repeat:no-repeat!important;
  text-indent:-9000px; overflow:hidden; border-radius:6px; margin:0!important; padding:0!important;
}
#header .menu{order:2; float:none!important; margin:0!important; padding:0!important; background:none!important}
#header .menu ul{display:flex; gap:6px; flex-wrap:wrap}
#header .menu li{float:none!important; margin:0!important; padding:0!important; background:none!important; border:0!important}
#header .menu li:empty{display:none}
#header .menu a{
  display:block; padding:8px 18px; border-radius:999px; font-weight:700; font-size:.95rem;
  color:#fff!important; background:transparent; border:1px solid transparent;
}
#header .menu a:hover,#header .menu li.selected a{background:var(--pink); box-shadow:0 0 18px var(--pink); text-shadow:none}
#header .menu.cats{order:3; flex:1 0 100%; border-top:1px solid var(--line); padding-top:10px!important; overflow-x:auto}
#header .menu.cats ul{flex-wrap:nowrap; white-space:nowrap}
#header .menu.cats a{border-color:var(--line); font-weight:400; font-size:.88rem}
#header .menu.cats a:hover{background:transparent; border-color:var(--cyan); color:var(--cyan)!important; box-shadow:0 0 14px var(--cyan)}

/* ---------- Page title (neon sign) ---------- */
#page-title{padding:60px 0 24px!important; text-align:center; background:none!important; border:0!important}
#page-title h1{
  font-size:clamp(2.6rem,8vw,6rem)!important; letter-spacing:-.03em; margin:0!important;
  color:#fff!important; text-shadow:0 0 6px #fff,0 0 20px var(--pink),0 0 45px var(--pink),0 0 90px var(--pink);
  animation:flicker 5s infinite;
}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.7}}

/* ---------- Product grid (listing) ---------- */
.grid .row{
  display:grid!important; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:28px;
  margin:0!important; padding:20px 0!important; width:auto!important;
}
.grid .row::after,.grid .row::before{display:none!important}
.product{
  float:none!important; width:auto!important; margin:0!important;
  background:var(--card)!important; border:1px solid var(--line)!important; border-radius:26px;
  padding:16px!important; backdrop-filter:blur(10px); transition:.35s; position:relative; overflow:hidden;
}
.product:hover{transform:translateY(-10px); border-color:var(--pink)!important; box-shadow:0 0 40px rgba(255,46,147,.35)}
.product.two:hover,.product:nth-child(3n+2):hover{border-color:var(--cyan)!important; box-shadow:0 0 40px rgba(39,240,255,.35)}
.product.three:hover,.product:nth-child(3n):hover{border-color:var(--violet)!important; box-shadow:0 0 40px rgba(139,92,255,.4)}
.product-a{display:block; color:#fff!important}
.product .preview,.product-a .product-img{border-radius:18px}
.product-img{
  display:block; width:100%!important; height:auto; aspect-ratio:1; object-fit:cover;
  border-radius:18px; background:#000; transition:.6s; border:0!important; padding:0!important;
}
.product:hover .product-img{transform:scale(1.06)}
.stilt{display:none!important}
.product-info{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 6px 4px; background:none!important}
.product-title{font-family:'Maven Pro',sans-serif; font-weight:800; font-size:1.05rem; line-height:1.3; color:#fff!important}
.product-price{
  margin:0!important; background:linear-gradient(135deg,var(--pink),var(--violet)); color:#fff!important;
  padding:4px 14px; border-radius:999px; font-weight:700; white-space:nowrap;
}
.product-price span{color:#fff!important}
.sold-out,.status{color:var(--pink)!important; font-weight:700}

/* ---------- Pagination ---------- */
.pagination{text-align:center; padding:30px 0 70px!important; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.pagination a,.pagination span{
  display:inline-block; padding:12px 30px; border-radius:999px; font-weight:700;
  border:2px solid var(--cyan); color:var(--cyan)!important;
  box-shadow:0 0 20px rgba(39,240,255,.35), inset 0 0 20px rgba(39,240,255,.12);
}
.pagination a:hover{background:var(--cyan); color:#000!important; box-shadow:0 0 40px var(--cyan); text-shadow:none}
.pagination .disabled{opacity:.35; box-shadow:none; border-color:var(--line); color:var(--muted)!important}
.pagination .current{background:var(--pink); border-color:var(--pink); color:#fff!important}

/* ---------- Product detail page ---------- */
#product-page #main-content .main-inner,
.product-page .main-inner{display:block}
#product-images,.product-images,#product .images{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
#product-images img,.product-images img{border-radius:16px}
#product-images .thumbs img,.thumbs img{border:1px solid var(--line)!important; border-radius:10px; opacity:.75; transition:.25s}
.thumbs img:hover{opacity:1; border-color:var(--pink)!important; box-shadow:0 0 16px var(--pink)}
#product-details,.product-details,#product-info,.description{color:#e7e0f2}
#product-details h2,#product .price,.price{color:#fff!important}
.price{font-family:'Maven Pro',sans-serif; font-weight:800; font-size:1.6rem; text-shadow:0 0 14px rgba(255,46,147,.7)}

/* ---------- Forms (cart, contact, options) ---------- */
form{color:#fff}
label{display:block; margin:12px 0 6px; font-weight:700; color:var(--muted)!important}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],
select,textarea{
  width:100%; max-width:100%; padding:13px 16px; font:inherit; color:#fff!important;
  background:rgba(255,255,255,.07)!important; border:1px solid var(--line)!important; border-radius:14px; outline:0; transition:.25s;
}
select option{background:#150d20; color:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--cyan)!important; box-shadow:0 0 0 3px rgba(39,240,255,.2),0 0 20px rgba(39,240,255,.35)}
::placeholder{color:#8a7fa0}
input[type=checkbox],input[type=radio]{accent-color:var(--pink)}
button,input[type=submit],input[type=button],.button,.btn,a.button{
  display:inline-block; cursor:pointer; padding:14px 34px; border:0!important; border-radius:999px;
  font:700 1rem 'PT Sans',sans-serif; color:#fff!important;
  background:linear-gradient(135deg,var(--pink),var(--violet))!important;
  box-shadow:0 0 22px rgba(255,46,147,.5); transition:.3s; text-shadow:none; width:auto;
}
button:hover,input[type=submit]:hover,input[type=button]:hover,.button:hover{transform:translateY(-3px); box-shadow:0 0 38px var(--pink)}
button:disabled,input[type=submit]:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- Cart / generic tables (legacy markup safe) ---------- */
table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:#fff}
th{background:rgba(255,255,255,.08); font-family:'Maven Pro',sans-serif; text-align:left; padding:14px 16px; color:var(--cyan)!important}
td{padding:14px 16px; border-top:1px solid var(--line); background:transparent!important; color:#e7e0f2}
tr:hover td{background:rgba(255,255,255,.03)!important}
#cart .total,.cart-total,.subtotal{font-family:'Maven Pro',sans-serif; font-weight:800; color:#fff!important}

/* ---------- Content pages (About, Press, FAQ, T&Cs, Blog) ---------- */
#main-content .main-inner{padding-bottom:40px}
#main-content .main-inner>*:not(#page-title):not(.grid):not(.pagination):not(.feature){max-width:860px; margin-left:auto; margin-right:auto}
.main-inner p,.main-inner li,.main-inner td{color:#e7e0f2}
.main-inner ul:not(.menu ul){list-style:disc; padding-left:1.4em}
.main-inner ol{padding-left:1.4em}
.main-inner h2{font-size:1.8rem; margin:1.6em 0 .5em}
.main-inner h3{font-size:1.3rem; margin:1.4em 0 .4em; color:var(--cyan)!important}
.main-inner blockquote{margin:1.5em 0; padding:18px 24px; border-left:4px solid var(--pink); background:var(--card); border-radius:0 var(--radius) var(--radius) 0; box-shadow:0 0 24px rgba(255,46,147,.2)}
.main-inner img{border-radius:16px}
.post,.article,.blog-post{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:24px}

/* ---------- Home slider (if present) ---------- */
.feature.slide{margin:30px 0 20px}
.slides_container{display:flex!important; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 4px 24px; width:auto!important; height:auto!important}
.slides_container>*{flex:0 0 min(86%,760px); scroll-snap-align:center; border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(255,46,147,.25); width:auto!important; height:auto!important}
.slides_container img{display:block; width:100%}

/* ---------- Alerts ---------- */
.error,#error{background:rgba(255,46,147,.15); border:1px solid var(--pink); color:#fff; padding:14px 18px; border-radius:14px; margin:16px 0; list-style:none}
.error ul,#error ul{list-style:none; padding:0}
.notice,.success{background:rgba(39,240,255,.12); border:1px solid var(--cyan); color:#fff; padding:14px 18px; border-radius:14px}

/* ---------- Footer ---------- */
#footer{border-top:1px solid var(--line)!important; background:rgba(0,0,0,.4)!important; padding:40px 0!important; margin-top:40px; height:auto!important}
#footer ul{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; color:var(--muted)!important; font-size:.95rem}
#footer li{float:none!important; margin:0!important; padding:0!important; border:0!important; background:none!important; color:var(--muted)!important}
#footer li:empty{display:none}
#footer a{color:var(--muted)!important}
#footer a:hover{color:var(--pink)!important; text-shadow:0 0 10px var(--pink)}

/* ---------- Responsive & a11y ---------- */
@media(max-width:700px){
  #header .container{justify-content:center}
  #header .logo a{background-position:center!important; margin:0 auto!important}
  .product-info{flex-direction:column}
  .grid .row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}