:root{
  --p:#7441bd;
  --pd:#3d2167;
  --t:#2e9298;
  --ink:#231b29;
  --muted:#756a79;
  --line:#e8ddec;
  --paper:#fffdfb;
  --soft:#f8f3fb;
  --lavender:#efe6ff;
}


.shop-category-section{
  padding:64px clamp(20px,7vw,108px);
  background:#fffdfb;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.compact-heading{margin-bottom:24px}
.shop-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.shop-category{
  appearance:none;
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  border-radius:999px;
  padding:12px 17px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  min-height:44px;
  transition:.2s ease;
}
.shop-category:hover,
.shop-category:focus-visible{
  border-color:var(--purple);
  color:var(--purple);
  transform:translateY(-1px);
}
.inventory-note{
  margin-top:22px;
  padding:15px 18px;
  border-radius:16px;
  background:var(--lavender);
  color:var(--purple-dark);
  line-height:1.6;
  font-size:14px;
}

.shop-category.selected{
  background:var(--purple);
  border-color:var(--purple);
  color:white;
}


.live-inventory{background:linear-gradient(180deg,#fff,#fbf8ff)}
.live-shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:-8px 0 24px;padding:14px 0;border-bottom:1px solid var(--line)
}
.clear-filter{
  border:1px solid var(--line);background:#fff;color:var(--p);
  border-radius:999px;padding:10px 15px;font-weight:800;cursor:pointer
}
.live-product-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px
}
.live-product-card{
  background:#fff;border:1px solid var(--line);border-radius:22px;
  overflow:hidden;box-shadow:0 14px 38px rgba(55,30,75,.08)
}
.live-product-card img{
  display:block;width:100%;height:290px;object-fit:cover;background:#f4eef8
}
.live-product-body{padding:19px}
.live-product-card h3{font-size:23px;margin:8px 0 7px}
.live-product-card p{color:var(--muted);line-height:1.55}
.live-product-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:15px 0
}
.live-price{font-size:19px;font-weight:900;color:var(--pd)}
.stock{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 9px;border-radius:999px;background:#eaf7ef;color:#256b3d
}
.stock.sold{background:#f6e7e9;color:#8b3340}
.contact-product{
  display:inline-flex;justify-content:center;width:100%;
  padding:12px 16px;border:0;border-radius:999px;background:var(--p);
  color:white;font:inherit;font-weight:800;cursor:pointer
}
.inventory-empty,.inventory-error,.inventory-loading{
  grid-column:1/-1;padding:30px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:18px
}
@media(max-width:900px){.live-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.live-product-grid{grid-template-columns:1fr}.live-shop-toolbar{align-items:flex-start;flex-direction:column}}


/* V5.1 branding + layout corrections */
.shop-category-section,
.live-inventory{
  position:relative;
  overflow:hidden;
  padding:72px clamp(24px,7vw,108px);
}

.shop-category-section > *,
.live-inventory > *{
  position:relative;
  z-index:2;
}

.shop-category-section{
  background:
    radial-gradient(circle at 88% 18%, rgba(116,65,189,.08), transparent 26%),
    linear-gradient(180deg,#fffdfb,#fbf8ff);
}

.mandala-watermark{
  position:absolute;
  z-index:1;
  right:-90px;
  top:50%;
  transform:translateY(-50%);
  width:min(460px,42vw);
  max-width:none;
  opacity:.065;
  pointer-events:none;
  user-select:none;
}

.shop-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.shop-category{
  appearance:none;
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  border-radius:999px;
  padding:12px 17px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  min-height:44px;
  transition:.2s ease;
}

.shop-category:hover,
.shop-category:focus-visible{
  border-color:var(--p);
  color:var(--p);
  transform:translateY(-1px);
}

.shop-category.selected{
  background:var(--p);
  border-color:var(--p);
  color:white;
}

.inventory-note{
  margin-top:22px;
  padding:15px 18px;
  border-radius:16px;
  background:var(--lavender);
  color:var(--pd);
  line-height:1.6;
  font-size:14px;
  max-width:900px;
}

.live-inventory .head{
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:40px;
  align-items:end;
  margin-bottom:28px;
}

.live-inventory .head h2{
  font-size:clamp(38px,5vw,64px);
  line-height:1.05;
  margin:10px 0 0;
}

.live-inventory .head > p{
  color:var(--muted);
  line-height:1.7;
  margin:0;
}

.live-shop-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 24px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.clear-filter{
  border:1px solid var(--line);
  background:#fff;
  color:var(--p);
  border-radius:999px;
  padding:10px 15px;
  font-weight:800;
  cursor:pointer;
}

.live-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

@media(max-width:900px){
  .live-inventory .head{grid-template-columns:1fr}
  .mandala-watermark{right:-140px;width:520px;opacity:.05}
  .live-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .shop-category-section,.live-inventory{padding:52px 20px}
  .mandala-watermark{right:-180px;width:430px;opacity:.045}
  .live-product-grid{grid-template-columns:1fr}
  .live-shop-toolbar{align-items:flex-start;flex-direction:column}
}


/* V5.2 — stronger VB Kreations mandala branding */
.mandala-watermark{
  right:-55px;
  top:50%;
  width:min(560px,46vw);
  opacity:.14;
  filter:saturate(1.05);
}

.hero:before{
  right:24%;
  top:85px;
  width:360px;
  height:360px;
  opacity:.10;
}

.inventory-preview .mandala-watermark{
  opacity:.11;
}

/* Add a second subtle branded mandala to the live inventory area */
.live-inventory:before{
  content:"";
  position:absolute;
  z-index:0;
  left:-110px;
  bottom:-130px;
  width:430px;
  height:430px;
  background:url("images/vb-mandala.png") center/contain no-repeat;
  opacity:.055;
  pointer-events:none;
}

@media(max-width:900px){
  .mandala-watermark{
    right:-120px;
    width:500px;
    opacity:.11;
  }
  .hero:before{
    right:-35px;
    top:120px;
    width:300px;
    height:300px;
    opacity:.075;
  }
}

@media(max-width:600px){
  .mandala-watermark{
    right:-165px;
    width:420px;
    opacity:.09;
  }
  .hero:before{
    right:-80px;
    top:150px;
    width:260px;
    height:260px;
    opacity:.06;
  }
  .live-inventory:before{
    left:-160px;
    bottom:-120px;
    width:330px;
    height:330px;
    opacity:.04;
  }
}


/* V5.3 clean customer-facing category filter */
.shop-category-section{
  padding:54px clamp(24px,7vw,108px) 42px;
}

.category-filter-wrap{
  position:relative;
  z-index:2;
  max-width:1200px;
}

.category-filter-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}

.category-filter-heading h2{
  margin:6px 0 0;
  font-size:clamp(30px,4vw,46px);
  line-height:1.05;
}

.shop-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.shop-category{
  border:1px solid rgba(116,65,189,.18);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  box-shadow:0 4px 14px rgba(55,30,75,.05);
}

.shop-category:hover,
.shop-category:focus-visible{
  background:#fff;
  border-color:var(--p);
  color:var(--p);
}

.shop-category.selected{
  background:var(--p);
  color:#fff;
  border-color:var(--p);
  box-shadow:0 6px 18px rgba(116,65,189,.18);
}

/* Hide any legacy setup copy if cached markup survives */
.inventory-note{display:none!important}

@media(max-width:700px){
  .category-filter-heading{
    display:block;
  }
  .shop-category-section{
    padding:42px 20px 34px;
  }
}


/* V5.4 cleanup — remove duplicate category section and strengthen branding */
.shop-category-section{display:none!important}

.section#shop{
  position:relative;
  overflow:hidden;
}

.section#shop > *{
  position:relative;
  z-index:2;
}

.section#shop::before{
  content:"";
  position:absolute;
  right:-120px;
  top:40px;
  width:520px;
  height:520px;
  background:url("images/vb-mandala.png") center/contain no-repeat;
  opacity:.11;
  pointer-events:none;
  z-index:1;
}

.section#shop::after{
  content:"";
  position:absolute;
  left:-120px;
  bottom:-160px;
  width:380px;
  height:380px;
  background:url("images/vb-mandala.png") center/contain no-repeat;
  opacity:.045;
  pointer-events:none;
  z-index:1;
}

.section#shop .head > p{
  max-width:640px;
}

@media(max-width:900px){
  .section#shop::before{
    right:-170px;
    top:80px;
    width:430px;
    height:430px;
    opacity:.09;
  }
}

@media(max-width:600px){
  .section#shop::before{
    right:-180px;
    top:100px;
    width:330px;
    height:330px;
    opacity:.07;
  }
  .section#shop::after{
    left:-140px;
    bottom:-120px;
    width:260px;
    height:260px;
    opacity:.04;
  }
}


/* V5.5 headline refinement */
.section#shop .head > p{
  font-size:18px;
  line-height:1.7;
  max-width:680px;
}

.section#shop .head > p::first-line{
  font-weight:700;
  color:var(--pd);
}


/* V5.6 branding */
.brand-logo img{width:180px!important;height:80px!important;object-fit:contain;object-position:left center}
.header{padding-top:10px;padding-bottom:10px}
.fb-nav{color:#5b2aa7;font-weight:800}
.facebook-btn{background:#1877f2;color:#fff;border:1px solid #1877f2}
.facebook-btn:hover{filter:brightness(.96)}
.hero::before{
  content:"";
  position:absolute;
  right:18%;
  top:78px;
  width:540px;
  height:540px;
  background:url("images/vb-mandala.png") center/contain no-repeat;
  opacity:.16!important;
  pointer-events:none;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-155px;
  width:360px;
  height:360px;
  background:url("images/vb-mandala.png") center/contain no-repeat;
  opacity:.055;
  pointer-events:none;
  z-index:0;
}
.hero>div{position:relative;z-index:1}
@media(max-width:900px){
  .brand-logo img{width:150px!important;height:68px!important}
  .hero::before{right:-80px;top:110px;width:420px;height:420px;opacity:.12!important}
}
@media(max-width:600px){
  .brand-logo img{width:135px!important;height:62px!important}
  .hero::before{right:-160px;top:180px;width:360px;height:360px;opacity:.095!important}
  .hero::after{left:-150px;bottom:-120px;width:280px;height:280px;opacity:.04}
}