/*
Theme Name: V Exotic Gifts
Theme URI: https://vexoticgifts.com
Author: V Exotic Gifts
Author URI: https://vexoticgifts.com
Description: Custom WordPress theme for V Exotic Gifts — handcrafted Rakshabandhan gift hampers. Converted from a static HTML prototype.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: v-exotic-gifts
*/

/* =========================================================
   V EXOTIC GIFTS — Design tokens + shared components
   ========================================================= */

:root{
  /* ---- Color tokens ---- */
  --ivory:        #FFFFFF;   /* white background */
  --ivory-deep:   #F6F1E4;   /* section alt background — champagne tint */
  --maroon:       #111111;   /* primary — black */
  --maroon-deep:  #2B2B2B;   /* hover / pressed — charcoal */
  --gold:         #D4AF6A;   /* accent — champagne gold */
  --gold-soft:    #EFE0BE;   /* light accent, backgrounds */
  --mehendi:      #A9873F;   /* secondary accent — deep champagne gold */
  --ink:          #111111;   /* body text */
  --ink-soft:     #5C5C5C;   /* muted text */
  --white:        #FFFFFF;
  --line:         rgba(17,17,17,0.12);

  /* ---- Type ---- */
  --font-display: 'Fraunces', serif;
  --font-body:    'Work Sans', sans-serif;

  /* ---- Spacing / radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--maroon-deep);
}
p{ margin: 0 0 1em; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section{ padding: clamp(48px, 8vw, 96px) 0; }
.section--alt{ background: var(--ivory-deep); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mehendi);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 2px;
  background: var(--gold);
  display:inline-block;
}

.section-title{ font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 640px; }
.section-sub{ color: var(--ink-soft); max-width: 560px; font-size: 1.02rem; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 0.95rem;
  cursor:pointer;
  border: 1.5px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--maroon); color: var(--white); }
.btn-primary:hover{ background: var(--maroon-deep); }
.btn-outline{ background: transparent; border-color: var(--maroon); color: var(--maroon); }
.btn-outline:hover{ background: var(--maroon); color: var(--white); }
.btn-gold{ background: var(--gold); color: var(--maroon-deep); }
.btn-gold:hover{ background: var(--gold-soft); }
.btn-full{ width:100%; justify-content:center; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--gutter);
  max-width: 1180px; margin:0 auto;
}
.logo{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight:700;
  color: var(--maroon);
  display:flex; align-items:center; gap:8px;
}
.logo span{ color: var(--gold); }
.logo img{ height:75px; width:auto; display:block; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap: 32px; }
.nav-links a{
  font-weight:500; font-size:0.95rem; color: var(--ink);
  position:relative; padding: 4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background: var(--gold);
  transition: width .2s ease;
}
.nav-links a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-actions .btn{ white-space:nowrap; flex-shrink:0; }
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--ivory-deep); border: 1px solid var(--line);
  font-size: 1rem;
  flex-shrink:0;
}
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:32px; height:24px; position:relative;
  flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:2px;
  background: var(--maroon); transition: transform .2s ease;
}
.nav-toggle span{ top:11px; }
.nav-toggle span::before{ top:-9px; }
.nav-toggle span::after{ top:9px; }

@media (max-width: 860px){
  .header-inner{ padding: 12px var(--gutter); }
  .logo img{ height:42px; }
  .header-actions{ gap:10px; }
  .header-actions .btn-primary{ padding:9px 16px; font-size:0.85rem; }
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    background: var(--ivory);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 8px var(--gutter) 16px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 20px 40px rgba(17,17,17,0.14);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ width:100%; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-toggle{ display:block; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: clamp(40px,8vw,80px) 0 0;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap: 40px;
}
.hero h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
.hero h1 em{ font-style:italic; color: var(--maroon); }
.hero-desc{ font-size: 1.08rem; color: var(--ink-soft); max-width: 460px; }
.hero-cta{ display:flex; gap:16px; margin-top: 28px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:32px; margin-top:40px; }
.hero-stats div strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--maroon); }
.hero-stats div span{ font-size:0.85rem; color: var(--ink-soft); }

.hero-frame{
  position:relative;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 3px dashed var(--gold);
  padding: 18px;
  max-width: 460px;
  margin: 0 auto;
}
.hero-frame-inner{
  width:100%; height:100%; border-radius:50%;
  overflow:hidden; background: var(--gold-soft);
  border: 6px solid var(--white);
  box-shadow: 0 20px 50px rgba(212,175,106,0.30);
}
.hero-frame-inner img{ width:100%; height:100%; object-fit:cover; }
.hero-badge{
  position:absolute; bottom: 6%; left:-6%;
  background: var(--white); border-radius: var(--radius-md);
  padding: 14px 18px; box-shadow: 0 12px 30px rgba(17,17,17,0.15);
  font-family: var(--font-display); font-size:0.9rem; max-width: 190px;
}

@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-frame{ order:-1; max-width: 300px; }
}

/* ---- Thread divider (signature element) ---- */
.thread-divider{
  height: 34px;
  width: 100%;
  background-image: radial-gradient(circle, var(--gold) 2.5px, transparent 2.6px);
  background-size: 26px 26px;
  background-position: center;
  position: relative;
}
.thread-divider::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height: 1.5px; background: var(--gold-soft);
  transform: translateY(-50%);
  z-index:-1;
}

/* =========================================================
   PRODUCT / FEATURE GRIDS
   ========================================================= */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 40px; }
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 40px; }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.product-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px rgba(17,17,17,0.14); }
.product-card-img{ aspect-ratio: 4/3; background: var(--gold-soft); position:relative; overflow:hidden; }
.product-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product-card:hover .product-card-img img{ transform: scale(1.07); }
.product-tag{
  position:absolute; top:14px; left:14px;
  background: var(--maroon); color:var(--white);
  font-size:0.72rem; font-weight:600; letter-spacing:0.05em;
  padding: 6px 12px; border-radius: 999px;
}
.product-card-body{ padding: 22px 22px 26px; flex:1; display:flex; flex-direction:column; }
.product-card-body h3{ font-size: 1.25rem; margin-bottom:6px; }
.product-card-body p{ color: var(--ink-soft); font-size: 0.92rem; flex:1; }
.product-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.price{ font-family: var(--font-display); font-size: 1.3rem; color: var(--maroon); font-weight:600; }

.feature-card{
  background: var(--white); border-radius: var(--radius-md);
  padding: 28px 24px; border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(17,17,17,0.06);
}
.feature-icon{
  width:52px; height:52px; border-radius:50%;
  background: var(--ivory-deep); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:16px;
}
.feature-card h3{ font-size:1.1rem; margin-bottom:8px; }
.feature-card p{ color: var(--ink-soft); font-size:0.92rem; margin:0; }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial-card{
  background: var(--gold-soft); color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--line);
}
.testimonial-card p{ font-family: var(--font-display); font-style:italic; font-size:1.3rem; line-height:1.5; }
.testimonial-name{ font-weight:600; color: var(--maroon); font-family: var(--font-body); font-style:normal; }

/* =========================================================
   FORMS (Customize / Contact)
   ========================================================= */
.form-card{
  background: var(--white); border-radius: var(--radius-lg);
  padding: clamp(24px,4vw,44px); border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(17,17,17,0.07);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom: 20px; }
.field label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:0.95rem; background: var(--ivory);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--gold);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-soft); opacity: 1; }
.checkbox-group{ display:flex; flex-wrap:wrap; gap: 10px; }
.checkbox-pill{
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 9px 18px; font-size:0.88rem; cursor:pointer;
  transition: all .18s ease;
}
.checkbox-pill input{ display:none; }
.checkbox-pill.is-active, .checkbox-pill:has(input:checked){
  background: var(--maroon); color: var(--white); border-color: var(--maroon);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ivory-deep); color: var(--ink); padding-top: 64px; border-top: 1px solid var(--line); }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid var(--line);
}
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-logo{ font-family: var(--font-display); font-size:1.4rem; color: var(--maroon); margin-bottom:12px; display:flex; align-items:center; }
.footer-logo img{ height:80px; width:auto; display:block; }
.footer-logo span{ color: var(--gold); }
.footer-about p{ color: var(--ink-soft); font-size:0.92rem; max-width:280px; }
.footer-col h4{ font-family: var(--font-body); color: var(--mehendi); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{ color: var(--ink-soft); font-size:0.94rem; }
.footer-col ul li a:hover{ color: var(--maroon); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:0.95rem;
  color: var(--maroon);
}
.footer-bottom{
  padding: 22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size: 0.82rem; color: var(--ink-soft);
}

/* =========================================================
   PAGE HEADER (About / Contact / Shop / Customize / Product)
   ========================================================= */
.page-header{
  padding: 48px 0 32px; text-align:center;
  background: var(--ivory-deep) radial-gradient(circle, rgba(212,175,106,0.18) 1.5px, transparent 1.6px);
  background-size: 20px 20px;
}
.page-header h1{ font-size: clamp(2rem,4vw,2.8rem); }
.breadcrumb{ font-size:0.85rem; color: var(--ink-soft); margin-bottom:10px; }
.breadcrumb a{ color: var(--mehendi); font-weight:600; }

/* ---- Scroll reveal ---- */
.js-reveal{ opacity:0; transition: opacity .6s ease; }
.js-reveal.is-visible{ opacity:1; }

/* ---- Utility ---- */
.mt-0{ margin-top:0; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0; }
.tag-pill{
  background: var(--ivory-deep); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size:0.82rem; color: var(--ink-soft);
}

/* =========================================================
   PRODUCT DETAIL (single product templates)
   ========================================================= */
.product-detail{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:flex-start; }
.product-detail > div:first-child{ position:sticky; top:110px; }
@media (max-width:860px){ .product-detail{ grid-template-columns:1fr; } .product-detail > div:first-child{ position:static; } }
.gallery-main{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:1/1; margin-bottom:14px; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-thumbs{ display:flex; gap:12px; }
.gallery-thumbs img{ width:80px; height:80px; object-fit:cover; border-radius: var(--radius-sm); border:2px solid transparent; cursor:pointer; }
.gallery-thumbs img.is-active{ border-color: var(--gold); }
.whats-inside{ margin: 24px 0; }
.whats-inside li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.95rem; }
.whats-inside li:last-child{ border-bottom:none; }
.whats-inside .ico{ width:34px; height:34px; border-radius:50%; background: var(--ivory-deep); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
/* Any icon dropped into a .ico badge (built-in or from the custom "What's inside"
   icon picker) is forced to a consistent size regardless of its own svg attributes. */
.ico svg{ width:16px; height:16px; display:block; }
.customize-note{ background: var(--ivory-deep); border-left:3px solid var(--gold); border-radius: var(--radius-sm); padding:16px 20px; font-size:0.92rem; color: var(--ink-soft); margin:24px 0; }
.qty-row{ display:flex; align-items:center; gap:16px; margin: 24px 0; }
.qty-box{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; }
.qty-box button{ width:40px; height:40px; border:none; background:var(--ivory-deep); cursor:pointer; font-size:1.1rem; }
.qty-box span{ width:40px; text-align:center; font-weight:600; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-layout{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items:flex-start; }
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info-card{ background: var(--gold-soft); color: var(--ink); border-radius: var(--radius-lg); padding: 36px 30px; border: 1px solid var(--line); }
.contact-info-card h3{ color: var(--maroon); font-size:1.1rem; }
.contact-info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info-row .ico{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  color: var(--maroon);
}
.contact-info-row div p{ margin:0; color: var(--ink-soft); font-size:0.92rem; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-intro-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
.about-lead{
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-style: italic;
  color: var(--maroon-deep);
  line-height: 1.35;
  margin: 6px 0 22px;
}
.about-stats{
  display:flex; gap:32px; flex-wrap:wrap;
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.about-stats div strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--maroon); }
.about-stats div span{ font-size:0.85rem; color: var(--ink-soft); }
.about-photo{ position:relative; }
.about-photo::before{
  content:"";
  position:absolute; top:-20px; right:-20px; bottom:20px; left:20px;
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index:0;
}
.about-photo-frame{
  position:relative; z-index:1;
  border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 24px 48px rgba(17,17,17,0.14);
}
.about-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-photo-badge{
  position:absolute; z-index:2; bottom:-22px; left:-22px;
  background: var(--white); border-radius: var(--radius-md);
  padding: 14px 18px; box-shadow: 0 12px 30px rgba(17,17,17,0.15);
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size:0.85rem; color: var(--maroon-deep); max-width:190px;
}
.about-photo-badge svg{ color: var(--gold); flex-shrink:0; }

@media (max-width:860px){
  .about-intro-grid{ grid-template-columns:1fr; }
  .about-photo{ order:-1; margin-bottom:44px; }
  .about-photo::before{ display:none; }
  .about-photo-badge{ left:12px; bottom:-18px; }
  .about-stats{ gap:20px 32px; }
}

/* =========================================================
   WOOCOMMERCE
   We disable WooCommerce's own stylesheet (see functions.php,
   woocommerce_enqueue_styles filter) and theme everything here.
   ========================================================= */

/* ---- Product gallery (single product) ----
   Note: this is our own fully-custom gallery (.gallery-main / .gallery-thumbs,
   same classes/CSS the original static-site design used) — not WooCommerce's
   flexslider gallery. See assets/js/script.js for why. */

/* ---- Add to cart (single product) ---- */
.vexotic-add-to-cart{ margin: 24px 0; }
.vexotic-add-to-cart form.cart{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
/* Pill quantity stepper — applies anywhere WooCommerce renders a .quantity
   field (single product, cart page); the +/- buttons are injected by
   assets/js/script.js since WooCommerce's own markup is just a number input. */
.quantity{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--line); border-radius:999px; overflow:hidden;
}
.quantity .vexotic-qty-btn{
  width:40px; height:48px; border:none; background:var(--ivory-deep);
  cursor:pointer; font-size:1.1rem; color:var(--ink); font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.quantity .vexotic-qty-btn:hover{ background: var(--gold-soft); }
.quantity .qty{
  width:52px; height:48px; text-align:center;
  border:none; background:transparent;
  font-family:var(--font-body); font-size:0.95rem; color:var(--ink);
  -moz-appearance: textfield;
}
.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.vexotic-add-to-cart .single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:999px; border:none; cursor:pointer;
  background: var(--maroon); color: var(--white);
  font-family: var(--font-body); font-weight:600; font-size:0.95rem;
  transition: transform .18s ease, background .18s ease;
}
.vexotic-add-to-cart .single_add_to_cart_button:hover{ background: var(--maroon-deep); transform: translateY(-2px); }
.vexotic-add-to-cart .stock{ width:100%; margin-top:10px; font-size:0.88rem; color: var(--ink-soft); }
.vexotic-add-to-cart .stock.out-of-stock{ color:#B23B3B; font-weight:600; }
/* Stack "Label" above the dropdown instead of a <table> layout — avoids
   table cell vertical-align quirks that misaligned the label and select. */
.vexotic-add-to-cart table.variations,
.vexotic-add-to-cart table.variations tbody,
.vexotic-add-to-cart table.variations tr{ display:block; width:100%; }
.vexotic-add-to-cart table.variations tr{ margin-bottom:16px; }
.vexotic-add-to-cart table.variations th.label{
  display:block; text-align:left; padding:0 0 8px; margin:0;
  font-weight:600; font-size:0.88rem; color: var(--ink);
}
.vexotic-add-to-cart table.variations td.value{ display:block; padding:0; margin:0; }
.vexotic-add-to-cart table.variations select{
  width:100%; padding:13px 44px 13px 16px; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:0.95rem; background-color: var(--ivory); color: var(--ink);
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
  cursor:pointer;
}
.vexotic-add-to-cart table.variations select:focus{ outline:none; border-color: var(--gold); }
.vexotic-add-to-cart .woocommerce-variation-price .price,
.vexotic-add-to-cart .woocommerce-variation-availability{ margin-top:10px; }

/* ---- Price formatting ---- */
.price{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:10px; }
.price ins{ text-decoration:none; font-weight:700; }
.price del{
  font-size:0.6em; font-weight:400; color: var(--ink-soft); opacity:0.7;
  text-decoration: line-through;
}
.price del .woocommerce-Price-amount{ text-decoration: line-through; }

/* ---- Pagination (archive-product.php) ---- */
.woocommerce-pagination{ text-align:center; }
.woocommerce-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:0 4px; border-radius:50%;
  border:1.5px solid var(--line); font-weight:600; font-size:0.9rem;
}
.woocommerce-pagination .page-numbers.current{ background: var(--maroon); color: var(--white); border-color: var(--maroon); }
.woocommerce-pagination .page-numbers.dots{ border:none; }

/* ---- Notices (added to cart, errors, etc.) ---- */
.woocommerce-message, .woocommerce-error, .woocommerce-info,
ul.woocommerce-error, ul.woocommerce-message, ul.woocommerce-info{
  list-style:none; margin:0 0 24px; padding:16px 20px;
  border-radius: var(--radius-sm); border-left:3px solid var(--gold);
  background: var(--ivory-deep); color: var(--ink); font-size:0.92rem;
}
.woocommerce-error{ border-left-color:#B23B3B; }
.woocommerce-message .button, .woocommerce-error .button{
  display:inline-block; margin-left:12px; padding:8px 16px; border-radius:999px;
  background: var(--maroon); color: var(--white); font-weight:600; font-size:0.85rem;
}

/* ---- Cart / Checkout tables ---- */
.woocommerce-cart-form, .woocommerce-checkout{ margin-bottom:40px; }
table.shop_table{
  width:100%; border-collapse:collapse; margin-bottom:32px;
  border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
}
table.shop_table th, table.shop_table td{
  padding:16px; text-align:left; border-bottom:1px solid var(--line); font-size:0.92rem;
}
table.shop_table th{ font-family:var(--font-display); font-weight:600; color:var(--maroon-deep); background:var(--ivory-deep); }
table.shop_table td.product-remove a{ color: var(--ink-soft); font-weight:700; }
table.shop_table img{ width:64px; height:64px; object-fit:cover; border-radius: var(--radius-sm); }
.cart-collaterals .cart_totals{
  background: var(--ivory-deep); border-radius: var(--radius-lg); padding:28px;
}
.cart_totals table.shop_table{ border:none; background:transparent; }
.wc-proceed-to-checkout .checkout-button{
  display:flex; justify-content:center; width:100%; margin-top:12px;
  padding:14px 30px; border-radius:999px; background: var(--maroon); color: var(--white);
  font-family: var(--font-body); font-weight:600; font-size:0.95rem;
}
.wc-proceed-to-checkout .checkout-button:hover{ background: var(--maroon-deep); }

/* ---- Checkout form fields ---- */
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading{
  font-family: var(--font-display); color: var(--maroon-deep); margin-bottom:20px;
}
.woocommerce form .form-row{ margin-bottom:16px; }
.woocommerce form .form-row label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:8px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:0.95rem; background: var(--ivory); color: var(--ink);
}
#place_order{
  width:100%; padding:16px 30px; border:none; border-radius:999px; cursor:pointer;
  background: var(--maroon); color: var(--white); font-family: var(--font-body);
  font-weight:600; font-size:1rem;
}
#place_order:hover{ background: var(--maroon-deep); }
#payment{ background: var(--ivory-deep); border-radius: var(--radius-lg); padding:24px; margin-top:24px; }

/* ---- My Account ---- */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ margin-bottom:24px; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin-bottom:8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:inline-block; padding:8px 16px; border-radius:999px; border:1.5px solid var(--line);
  font-weight:600; font-size:0.88rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: var(--maroon); color: var(--white); border-color: var(--maroon);
}

/* =========================================================
   CONTACT FORM 7
   Themed to match .field/.form-row/.btn so a form dropped in via
   shortcode on the Contact / Customize pages looks native.
   ========================================================= */
.form-card .wpcf7-form{ margin:0; }
.form-card .wpcf7-form p{ margin-bottom:20px; }
.form-card .wpcf7-form-control-wrap{ display:block; }

.form-card .wpcf7-text,
.form-card .wpcf7-email,
.form-card .wpcf7-tel,
.form-card .wpcf7-number,
.form-card .wpcf7-date,
.form-card .wpcf7-select,
.form-card .wpcf7-textarea{
  width:100%; padding:13px 16px;
  border:1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size:0.95rem; background: var(--ivory);
  color: var(--ink);
}
.form-card .wpcf7-form-control:focus{ outline:none; border-color: var(--gold); }
.form-card .wpcf7-form-control::placeholder{ color: var(--ink-soft); opacity:1; }
.form-card .wpcf7-textarea{ min-height:110px; resize:vertical; }

.form-card label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:8px; }

/* Checkbox groups rendered as pills, matching .checkbox-pill */
.form-card .wpcf7-checkbox{ display:flex; flex-wrap:wrap; gap:10px; }
.form-card .wpcf7-checkbox .wpcf7-list-item{ margin:0; }
.form-card .wpcf7-checkbox .wpcf7-list-item label{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--line); border-radius:999px;
  padding:9px 18px; font-size:0.88rem; font-weight:400; margin:0;
  cursor:pointer; transition: all .18s ease;
}
.form-card .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"]{ display:none; }
.form-card .wpcf7-checkbox .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label{
  color: inherit;
}
.form-card .wpcf7-checkbox .wpcf7-list-item:has(input:checked) label{
  background: var(--maroon); color: var(--white); border-color: var(--maroon);
}

.form-card .wpcf7-submit{
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:14px 30px; border:none; border-radius:999px; cursor:pointer;
  background: var(--maroon); color: var(--white);
  font-family: var(--font-body); font-weight:600; font-size:0.95rem;
  transition: transform .18s ease, background .18s ease;
}
.form-card .wpcf7-submit:hover{ background: var(--maroon-deep); transform: translateY(-2px); }
.form-card .wpcf7-spinner{ margin-left:10px; }

.form-card .wpcf7-not-valid-tip{
  color:#B23B3B; font-size:0.82rem; margin-top:6px; display:block;
}
.form-card .wpcf7-response-output{
  margin:20px 0 0; padding:14px 18px; border-radius: var(--radius-sm);
  border:1px solid var(--line); border-left:3px solid var(--gold);
  background: var(--ivory-deep); color: var(--ink); font-size:0.9rem;
}
.form-card form.sent .wpcf7-response-output{ border-left-color:#3F8F52; }
.form-card form.failed .wpcf7-response-output,
.form-card form.aborted .wpcf7-response-output{ border-left-color:#B23B3B; }