/*
Theme Name: Vibylux
Theme URI: https://vibylux.com
Author: vibylux
Author URI: https://vibylux.com
Description: Cute & Beauty WooCommerce theme for Vibylux (skincare, makeup, accessories).
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: vibylux
Tags: e-commerce, woocommerce, responsive, custom-colors, custom-logo
*/

:root{
  --vxl-bg: #FADADD;
  --vxl-accent: #C8A2C8; /* lavender */
  --vxl-gold: #D8B469;
  --vxl-text: #2b2b2b;
  --vxl-white: #ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--vxl-text); background:var(--vxl-bg);
}

/* Header */
.vxl-header{position:sticky; top:0; z-index:50; background:var(--vxl-white); box-shadow:0 4px 16px rgba(0,0,0,.06)}
.vxl-topbar{background:var(--vxl-bg); color:#8a5e8a; font-size:13px; padding:6px 14px; text-align:center}
.vxl-nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 20px}
.vxl-logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:.5px}
.vxl-menu{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.vxl-menu a{color:#5b4b5b; text-decoration:none; font-weight:600}
.vxl-actions{display:flex; align-items:center; gap:14px}
.vxl-search{position:relative}
.vxl-search input{padding:10px 36px 10px 12px; border-radius:999px; border:1px solid #eee; outline:none}
.vxl-search svg{position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:.6}

/* Cart icon */
.vxl-cart-btn{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:transparent; border:0; padding:6px 10px}
.vxl-cart-count{position:absolute; top:-6px; right:-6px; background:var(--vxl-gold); color:#fff; font-weight:700; border-radius:999px; font-size:12px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center}

/* Mini cart drawer */
.vxl-drawer{position:fixed; right:-380px; top:0; width:360px; height:100vh; background:#fff; box-shadow:-6px 0 20px rgba(0,0,0,.08); transition:right .3s ease; z-index:60; display:flex; flex-direction:column}
.vxl-drawer.open{right:0}
.vxl-drawer-header{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #eee}
.vxl-drawer-body{padding:14px 18px; overflow:auto; flex:1}
.vxl-drawer-footer{padding:14px 18px; border-top:1px solid #eee}
.vxl-btn{display:inline-block; padding:12px 16px; border-radius:12px; border:0; cursor:pointer; font-weight:700}
.vxl-btn-primary{background:var(--vxl-gold); color:#fff}
.vxl-btn-outline{background:transparent; color:#5b4b5b; border:1px solid #ddd}

/* Hero */
.vxl-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:20px; padding:34px 20px; background:linear-gradient(180deg, #fff 0%, var(--vxl-bg) 100%)}
.vxl-hero-card{background:#fff; border-radius:20px; padding:28px; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.vxl-hero h1{font-family:'Playfair Display', Georgia, serif; font-size:42px; margin:0 0 8px}
.vxl-hero p{opacity:.8; margin:0 0 16px}
.vxl-pill{display:inline-block; background:#fff0; color:#8a5e8a; border:1px solid #e8d9e8; padding:8px 12px; border-radius:999px; font-size:13px; margin-bottom:10px}

/* Sections */
.vxl-section{padding:26px 20px}
.vxl-section h2{font-size:26px; margin:0 0 16px}
.vxl-grid{display:grid; gap:16px}
.vxl-grid.x3{grid-template-columns:repeat(3,1fr)}
.vxl-grid.x4{grid-template-columns:repeat(4,1fr)}
@media(max-width:990px){
  .vxl-hero{grid-template-columns:1fr}
  .vxl-grid.x4{grid-template-columns:repeat(2,1fr)}
  .vxl-grid.x3{grid-template-columns:repeat(2,1fr)}
}

/* Product card */
.vxl-card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06); display:flex; flex-direction:column}
.vxl-card-img{aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center}
.vxl-card-body{padding:12px}
.vxl-price{font-weight:800; color:#6d5a3b}
.vxl-card .vxl-btn{width:100%; margin-top:10px}

/* Category pill */
.vxl-cat{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #f1e9f1; padding:14px; border-radius:14px}

/* Footer */
.vxl-footer{background:#fff; padding:30px 20px; border-top:1px solid #f1f1f1}
.vxl-footer-cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px}
.vxl-footer a{color:#6b5a6b; text-decoration:none}
.vxl-copyright{padding:14px 0; color:#777; font-size:13px; text-align:center; border-top:1px dashed #eee; margin-top:12px}