/*
Theme Name: Tabs Wellness
Theme URI: https://tabswellness.in
Author: Tabs Wellness
Description: Custom WooCommerce theme for Tabs Wellness — premium wellness, intimacy and lifestyle products. Dark luxury aesthetic with maroon and gold accents.
Version: 1.0.0
Text Domain: tabs-wellness
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* =========================================================
   TABS WELLNESS — DESIGN TOKENS
   Derived from brand design system (Homepage + Complete Concept)
   ========================================================= */
:root{
  /* Core palette */
  --tabs-black:        #0A0808;
  --tabs-black-2:      #120D0D;
  --tabs-surface:       #1A1414;
  --tabs-surface-2:     #221A1A;
  --tabs-border:        #332727;
  --tabs-maroon:        #4A0E14;
  --tabs-maroon-deep:    #2E0A0F;
  --tabs-maroon-bright:  #7A1420;
  --tabs-gold:          #C9A356;
  --tabs-gold-light:     #E4C784;
  --tabs-gold-dim:       #8A7343;
  --tabs-cream:         #F3ECE2;
  --tabs-text:          #F3ECE2;
  --tabs-text-dim:       #B9ADA5;
  --tabs-text-faint:     #7C716C;
  --tabs-success:       #4C8B5E;
  --tabs-error:         #B4453A;
  --tabs-white:         #FFFFFF;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii & shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-gold: 0 0 0 1px rgba(201,163,86,0.35);

  /* Layout */
  --container-max: 1320px;
  --gutter: 24px;
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--tabs-black);
  color: var(--tabs-text);
  font-family: var(--font-body);
  font-size: 15px;
  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; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); margin:0 0 .5em; font-weight:600; color: var(--tabs-cream); }
p{ margin:0 0 1em; color: var(--tabs-text-dim); }

.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
::selection{ background: var(--tabs-gold); color: var(--tabs-black); }
:focus-visible{ outline: 2px solid var(--tabs-gold); outline-offset: 2px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(180deg, var(--tabs-gold-light), var(--tabs-gold));
  color: var(--tabs-black);
}
.btn-primary:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline{
  background: transparent;
  border-color: rgba(243,236,226,0.35);
  color: var(--tabs-cream);
}
.btn-outline:hover{ border-color: var(--tabs-gold); color: var(--tabs-gold); }
.btn-block{ width:100%; }
.btn-sm{ padding: 9px 18px; font-size: 12px; }

/* =========================================================
   BADGES / EYEBROWS
   ========================================================= */
.eyebrow{
  display:inline-block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tabs-gold);
  border: 1px solid var(--tabs-gold-dim);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; letter-spacing:.03em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(201,163,86,0.12);
  color: var(--tabs-gold);
}
.badge-sale{ background: var(--tabs-maroon-bright); color: var(--tabs-cream); }

/* =========================================================
   SECTION SPACING
   ========================================================= */
.section{ padding: 64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 28px; gap:16px; flex-wrap:wrap; }
.section-head h2{ font-size: 28px; margin:0; }
.section-link{ font-size:13px; color:var(--tabs-gold); font-weight:600; letter-spacing:.02em; display:inline-flex; align-items:center; gap:6px; }