/*
Theme Name: Roam & Bloom Boutique
Theme URI: https://roamandbloomboutique.com/
Author: OpenAI
Version: 1.2.0
Description: Custom WooCommerce-ready boutique theme with homepage hero, categories, featured products, responsive mobile menu, rewards placeholder card, and customizable color settings.
Text Domain: roam-bloom-boutique
*/

:root{
  --primary-color:#ff2e93;
  --secondary-color:#7A1CAC;
  --background-color:#050308;
  --surface-color:#100914;
  --surface-2:#140b18;
  --card-border:rgba(255,255,255,.08);
  --text-color:#ffffff;
  --muted-text:rgba(255,255,255,.72);
  --heading-font:'Playfair Display', Georgia, serif;
  --body-font:'Montserrat', Arial, sans-serif;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-glow:0 0 24px rgba(255,46,147,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text-color);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 32%),
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--secondary-color) 20%, transparent), transparent 28%),
    radial-gradient(circle at 80% 60%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 35%),
    linear-gradient(180deg, #08040c 0%, var(--background-color) 35%, #09040a 100%);
  font-family:var(--body-font);
  line-height:1.45;
  overflow-x:hidden;
}
a{color:var(--text-color);text-decoration:none}
a:hover{color:var(--primary-color)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}

.container{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(10px);
  background:rgba(7,4,10,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:92px;
}
.branding{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.site-title{
  margin:0;
  font-family:var(--heading-font);
  font-size:clamp(1.65rem, 2.4vw, 2.4rem);
  line-height:1;
  color:color-mix(in srgb, var(--primary-color) 88%, white);
  letter-spacing:.01em;
}
.site-tagline{
  margin:0;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--muted-text);
}
.menu-toggle{
  display:none;
  width:48px;height:48px;
  border:0;background:none;color:#fff;cursor:pointer;
  position:relative;
}
.menu-toggle span{
  display:block;
  width:28px;height:2px;background:#fff;border-radius:10px;
  margin:6px auto;transition:.25s ease;
}
.menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.main-nav{margin-left:auto}
.nav-menu{
  list-style:none;margin:0;padding:0;
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
}
.nav-menu a{
  font-size:.96rem;
  font-weight:500;
  letter-spacing:.04em;
  opacity:.88;
}
.header-actions{
  display:flex;align-items:center;gap:16px;flex-shrink:0;
}
.header-icon{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
  color:#fff;font-size:1rem;
}
.cart-badge{
  position:relative;
}
.cart-badge::after{
  content:attr(data-count);
  position:absolute;top:-6px;right:-5px;
  width:20px;height:20px;border-radius:50%;
  background:var(--primary-color);color:#fff;font-size:.72rem;
  display:grid;place-items:center;font-weight:700;
}

.site-content{padding:0}

.hero{
  padding:54px 0 48px;
}
.hero-shell{
  position:relative;
  background:linear-gradient(180deg, rgba(18,9,25,.78), rgba(10,5,13,.96));
  border:1px solid rgba(255,255,255,.06);
  border-radius:32px;
  box-shadow:0 24px 70px rgba(0,0,0,.45), var(--shadow-glow);
  overflow:hidden;
}
.hero-shell::before,
.hero-shell::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;
}
.hero-shell::before{width:380px;height:380px;left:-80px;top:-40px;background:color-mix(in srgb, var(--secondary-color) 78%, transparent)}
.hero-shell::after{width:340px;height:340px;right:-60px;bottom:-60px;background:color-mix(in srgb, var(--primary-color) 72%, transparent)}
.hero-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.05fr 1.25fr;
  gap:34px;
  padding:42px;
  align-items:center;
}
.hero-copy h1{
  margin:0 0 12px;
  font-family:var(--heading-font);
  font-size:clamp(2.8rem, 6vw, 5.1rem);
  line-height:.96;
  letter-spacing:.01em;
}
.hero-script{
  display:block;
  font-size:clamp(2rem, 5vw, 4rem);
  color:color-mix(in srgb, var(--primary-color) 92%, white);
  font-family:var(--heading-font);
  font-style:italic;
  font-weight:500;
  margin-bottom:2px;
}
.hero-subtitle{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:1rem;
  color:color-mix(in srgb, var(--primary-color) 85%, white 15%);
}
.hero-kicker{
  margin:0 0 28px;
  color:var(--muted-text);
  font-size:1rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.button-row{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:var(--radius-pill);
  border:1px solid transparent;font-weight:700;letter-spacing:.03em;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 92%, white 8%), var(--primary-color));
  color:#fff;box-shadow:0 8px 25px color-mix(in srgb, var(--primary-color) 34%, transparent);
}
.btn-secondary{
  background:transparent;border-color:color-mix(in srgb, var(--primary-color) 75%, white 25%);
  color:#fff;
}
.hero-visual{
  position:relative;
  min-height:460px;
  display:grid;place-items:center;
}
.hero-stage{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 70% 12%, color-mix(in srgb, var(--primary-color) 28%, transparent), transparent 22%),
    radial-gradient(circle at 35% 80%, color-mix(in srgb, var(--secondary-color) 32%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.42));
  border-radius:24px;
}
.reward-card{
  position:absolute;
  top:24px;right:18px;
  width:180px;
  background:linear-gradient(180deg, rgba(21,10,30,.92), rgba(13,7,18,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:20px;
  box-shadow:0 20px 35px rgba(0,0,0,.35), 0 0 20px color-mix(in srgb, var(--primary-color) 28%, transparent);
  z-index:4;
}
.reward-card small{
  display:block;font-size:.9rem;color:var(--muted-text);margin-bottom:6px;
}
.reward-card strong{
  display:block;font-size:2.35rem;line-height:1;color:color-mix(in srgb, var(--primary-color) 88%, white);margin-bottom:8px;
}
.reward-card .btn{
  padding:10px 16px;width:100%;margin-top:10px;font-size:.9rem;
}
.visual-circle{
  position:absolute;border-radius:50%;overflow:hidden;
  border:2px solid color-mix(in srgb, var(--primary-color) 52%, white 12%);
  box-shadow:0 0 24px color-mix(in srgb, var(--primary-color) 26%, transparent);
  background:radial-gradient(circle at 30% 30%, #2d1a32, #09050d 70%);
  display:grid;place-items:center;
}
.visual-circle svg{width:64%;height:64%;opacity:.95}
.circle-main{width:220px;height:220px;top:46px;right:188px;z-index:3}
.circle-left{width:210px;height:210px;left:58px;bottom:82px;z-index:2}
.circle-bottom{width:190px;height:190px;right:98px;bottom:36px;z-index:3}

.section{
  padding:40px 0;
}
.section-title-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;
}
.section-title{
  margin:0;
  font-family:var(--heading-font);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(1.3rem, 2.8vw, 2rem);
}
.section-link{color:color-mix(in srgb, var(--primary-color) 86%, white 14%);font-weight:700}
.section-rule{
  flex:1;height:1px;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 45%, transparent), transparent);
}

.category-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;
}
.category-card{
  position:relative;min-height:184px;padding:22px;overflow:hidden;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(20,11,24,.88), rgba(12,7,14,.96));
  border:1px solid var(--card-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 15px color-mix(in srgb, var(--primary-color) 16%, transparent);
  transition:transform .24s ease, box-shadow .24s ease;
}
.category-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(0,0,0,.42), 0 0 20px color-mix(in srgb, var(--primary-color) 34%, transparent)}
.category-card::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 28%);
}
.category-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 90%, white 10%), transparent);
}
.category-card .shape{
  position:absolute;inset:18px 18px auto auto;opacity:.24;transform:scale(1.02);
}
.category-content{position:absolute;left:22px;bottom:20px;z-index:1}
.category-title{margin:0 0 6px;font-family:var(--heading-font);font-size:2rem;line-height:1}
.category-link{font-size:1rem;text-transform:uppercase;letter-spacing:.18em;color:color-mix(in srgb, var(--primary-color) 86%, white 14%)}

.home-lower{
  display:grid;grid-template-columns:minmax(0, 1fr) 320px;gap:22px;align-items:start;
}
.newsletter-box{
  padding:28px 24px;border-radius:24px;
  background:linear-gradient(180deg, rgba(20,11,24,.9), rgba(12,7,14,.96));
  border:1px solid var(--card-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 18px color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.newsletter-box h3{
  margin:0 0 10px;
  font-size:1.9rem;font-family:var(--heading-font);
}
.newsletter-box p{margin:0 0 18px;color:var(--muted-text)}
.newsletter-box input{
  width:100%;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:#fff;margin-bottom:14px;
}
.newsletter-box .socials{display:flex;gap:14px;justify-content:center;margin-top:16px}
.socials a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);font-weight:700;
}

.woocommerce ul.products{
  display:grid !important;grid-template-columns:repeat(4, minmax(0,1fr));gap:20px;
  padding:0;margin:0;list-style:none;
}
.woocommerce ul.products li.product{
  float:none !important;width:auto !important;margin:0 !important;
  padding:16px !important;border-radius:22px;
  background:linear-gradient(180deg, rgba(19,10,23,.95), rgba(11,7,14,.98));
  border:1px solid var(--card-border);
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--primary-color) 12%, transparent);
  text-align:left;position:relative;overflow:hidden;
}
.woocommerce ul.products li.product::after{
  content:"❤";position:absolute;top:16px;right:16px;color:#fff;font-size:1rem;opacity:.9;
}
.woocommerce ul.products li.product img{
  width:100% !important;border-radius:16px;margin-bottom:14px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2{
  font-size:1.18rem !important;font-family:var(--body-font);font-weight:600;line-height:1.35;margin:0 0 8px !important;color:#fff;
}
.woocommerce ul.products li.product .price{
  color:color-mix(in srgb, var(--primary-color) 86%, white 14%) !important;
  font-size:1.35rem !important;font-weight:700 !important;margin:0 0 14px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  display:inline-flex;justify-content:center;align-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--secondary-color) 92%, white 8%), var(--primary-color)) !important;
  border:0 !important;border-radius:var(--radius-pill) !important;
  color:#fff !important;padding:12px 18px !important;font-weight:700 !important;
}
.woocommerce a.added_to_cart{display:none !important}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0}

.woocommerce .woocommerce-products-header,
.woocommerce-breadcrumb{display:none !important}

.shop-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:28px;padding-top:10px;
}
.feature-pill{
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--muted-text);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;
}
.feature-pill .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.05);color:color-mix(in srgb, var(--primary-color) 86%, white 14%)}

.page-shell,
.single-shell,
.archive-shell,
.woocommerce-page .site-content > .container{
  padding-top:36px;padding-bottom:48px;
}
.page-shell .entry-title,
.single-shell .entry-title,
.woocommerce div.product .product_title{
  font-family:var(--heading-font);
  font-size:clamp(2rem,4vw,3.2rem);
  margin:0 0 18px;color:#fff;
}
.woocommerce div.product{
  display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:30px;align-items:start;
}
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  border-radius:24px;border:1px solid var(--card-border);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:color-mix(in srgb, var(--primary-color) 86%, white 14%) !important;font-weight:700}
.woocommerce div.product form.cart .quantity input{
  background:#0f0912;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;
}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details{
  background:linear-gradient(180deg, rgba(18,10,22,.95), rgba(11,7,14,.98));
  border:1px solid var(--card-border);border-radius:22px;padding:22px;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{border-color:rgba(255,255,255,.08)}
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select{
  background:#0f0912;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:14px;
}

.site-footer{
  margin-top:40px;padding:26px 0 30px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted-text);text-align:center;
}

@media (max-width: 1100px){
  .hero-inner{grid-template-columns:1fr;gap:28px}
  .hero-visual{min-height:420px}
  .home-lower{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .shop-features{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 900px){
  .menu-toggle{display:block}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;display:none;
    background:rgba(8,5,11,.98);border-bottom:1px solid rgba(255,255,255,.06);
  }
  .main-nav.active{display:block}
  .nav-menu{flex-direction:column;gap:0;padding:14px 20px}
  .nav-menu li{width:100%}
  .nav-menu a{display:block;padding:14px 0}
  .header-actions{gap:10px}
  .hero{padding:26px 0 34px}
  .hero-inner{padding:24px}
  .hero-shell{border-radius:28px}
  .hero-visual{min-height:auto}
  .reward-card{
    position:relative;top:auto;right:auto;margin:14px auto 0;width:min(100%, 260px);
  }
  .circle-main,.circle-left,.circle-bottom{
    position:relative;top:auto;right:auto;left:auto;bottom:auto;
    width:160px;height:160px;margin:10px auto;
  }
  .hero-stage{display:none}
  .hero-copy h1{text-align:left}
  .header-inner{min-height:78px}
  .site-tagline{display:none}
  .category-grid{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr}
  .woocommerce div.product{grid-template-columns:1fr}
}

@media (max-width: 600px){
  .container{width:min(100% - 24px, 1200px)}
  .site-title{font-size:2rem}
  .hero-copy h1{font-size:3rem}
  .hero-subtitle{font-size:.88rem;letter-spacing:.16em}
  .button-row{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .hero-shell{border-radius:24px}
  .hero-inner{padding:20px}
  .section{padding:28px 0}
  .section-title-row{align-items:flex-end}
  .section-title{font-size:1.15rem}
  .newsletter-box h3{font-size:1.6rem}
}