/*
Theme Name: TÉYA
Theme URI: https://mystyloom.in/
Author: TÉYA
Author URI: https://mystyloom.in/
Description: A minimalist, luxury theme for TÉYA — elegant Indo-western fashion for women with personalized styling by skin undertone. Soft lavender and greige palette, elegant serif display type, built for a pastel, editorial shopping experience. WooCommerce ready.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: teya
Tags: e-commerce, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* -------------------------------------------------
   0. Design tokens
------------------------------------------------- */
:root{
  --c-bg:            #FBF8F6;
  --c-bg-alt:        #F2E9EE;
  --c-lavender:      #B9A4C9;
  --c-lavender-dark: #8F7A9E;
  --c-plum:          #453142;
  --c-gray:          #6E6570;
  --c-gray-light:    #8A7C8C;
  --c-taupe:         #C9AF8B;
  --c-line:          #E3D8DE;
  --c-white:         #FFFFFF;

  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  --gap: clamp(1.25rem, 3vw, 3rem);
  --radius: 2px;
}

/* -------------------------------------------------
   1. Reset & base
------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-plum);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
  color: var(--c-plum);
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight:400; letter-spacing:0.04em; }
h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3{ font-size: 1.3rem; }

.eyebrow{
  display:inline-block;
  font-family: var(--f-body);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gray-light);
  margin-bottom: 0.9em;
}

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

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding: 0.95em 2.1em;
  border: 1px solid var(--c-plum);
  border-radius: var(--radius);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--c-plum);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{ background: var(--c-plum); color: var(--c-white); }
.btn.btn-fill{ background: var(--c-plum); color: var(--c-white); }
.btn.btn-fill:hover{ background: var(--c-lavender-dark); border-color: var(--c-lavender-dark); }

/* -------------------------------------------------
   2. Site header
------------------------------------------------- */
#site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(226, 208, 240, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--c-lavender-dark);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem var(--gap);
  max-width: 1240px; margin:0 auto;
}
.site-logo img, .site-logo svg{ height: 46px; width:auto; }
.site-logo{ display:flex; align-items:center; }

#primary-menu{ display:flex; gap: 2.4rem; }
#primary-menu a{
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-plum);
  position:relative;
  padding-bottom: 4px;
}
#primary-menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--c-lavender-dark); transition: width .3s ease;
}
#primary-menu a:hover::after{ width:100%; }

.header-icons{ display:flex; align-items:center; gap:1.2rem; }
.header-icons a{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; }
.header-search input[type=search]{
  border:1px solid var(--c-line); background: var(--c-bg-alt);
  padding: 0.5em 0.9em; font-family: var(--f-body); font-size:0.8rem;
  border-radius: 20px; width: 150px; transition: width .3s ease, border-color .3s ease;
}
.header-search input[type=search]:focus{ width: 210px; border-color: var(--c-lavender-dark); outline:none; }
.cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-left:5px;
  background: var(--c-lavender-dark); color:#fff; border-radius:50%;
  font-size:0.62rem;
}
.menu-toggle{ display:none; background:none; border:none; font-size:1.4rem; color:var(--c-plum); }

@media (max-width: 860px){
  #primary-menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background: #E9DDF5;
    border-bottom: 1px solid var(--c-line);
    display:none; padding: 1rem var(--gap) 1.5rem;
  }
  #primary-menu.is-open{ display:flex; }
  #primary-menu a{ padding: 0.7rem 0; border-bottom: 1px solid var(--c-line); }
  .menu-toggle{ display:block; }
}

/* -------------------------------------------------
   3. Hero (front page)
------------------------------------------------- */
.hero{
  position:relative;
  padding: clamp(4rem,10vw,8rem) var(--gap) clamp(3rem,8vw,6rem);
  text-align:center;
  overflow:hidden;
  background: radial-gradient(120% 100% at 50% 0%, var(--c-bg-alt) 0%, var(--c-bg) 65%);
}
.hero::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width: min(70vw, 720px); height: min(70vw,720px);
  transform: translate(-50%,-52%);
  border: 1px solid var(--c-lavender);
  border-radius:50%;
  opacity:0.5;
}
.hero::after{
  content:"";
  position:absolute; top:calc(50% - 30px); left:calc(50% + 40px);
  width: min(46vw, 480px); height: min(46vw,480px);
  transform: translate(-50%,-52%);
  border: 1px solid var(--c-plum);
  border-radius:50%;
  opacity:0.18;
}
.hero-content{ position:relative; z-index:2; max-width: 720px; margin:0 auto; }
.hero p.lede{ color: var(--c-gray); font-size:1.05rem; max-width:520px; margin: 0 auto 2.2rem; }

/* -------------------------------------------------
   4. Section framing
------------------------------------------------- */
.section{ padding: clamp(3rem,7vw,6rem) var(--gap); }
.section-head{ text-align:center; max-width:640px; margin:0 auto clamp(2rem,5vw,3.5rem); }
.section-alt{ background: var(--c-bg-alt); }

/* -------------------------------------------------
   5. Product grid (works for WooCommerce + fallback)
------------------------------------------------- */
ul.products, .teya-product-grid{
  display:grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem;
  max-width:1240px; margin:0 auto; padding:0;
}
@media (max-width:1000px){ ul.products, .teya-product-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ ul.products, .teya-product-grid{ grid-template-columns: 1fr; } }

ul.products li.product, .teya-product-card{
  list-style:none; text-align:center; position:relative;
}
ul.products li.product img, .teya-product-card img{
  width:100%; aspect-ratio: 3/4; object-fit:cover;
  background: var(--c-bg-alt);
  margin-bottom: 1.1rem;
  border-radius: var(--radius);
  transition: opacity .4s ease;
}
ul.products li.product:hover img{ opacity:0.85; }
ul.products li.product h2, ul.products li.product h3, .teya-product-card h3{
  font-size:1.05rem; margin-bottom:0.3em;
}
ul.products li.product .price, .teya-product-card .price{
  font-family: var(--f-body); color: var(--c-gray); font-size:0.9rem;
}
ul.products li.product .price ins{ color:var(--c-plum); text-decoration:none; }
ul.products li.product .button, .teya-product-card .button{
  margin-top:0.8rem;
  display:inline-block;
  font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase;
  border-bottom: 1px solid var(--c-plum);
  padding-bottom:2px;
}

/* -------------------------------------------------
   5b. Personalized styling / undertone cards
------------------------------------------------- */
.undertone-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem;
  max-width:1080px; margin:0 auto;
}
@media (max-width:800px){ .undertone-grid{ grid-template-columns:1fr; } }
.undertone-card{
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  text-align:center;
}
.swatch-row{ display:flex; justify-content:center; gap:0.6rem; margin-bottom:1.3rem; }
.swatch{
  width:30px; height:30px; border-radius:50%;
  display:inline-block; border:1px solid rgba(0,0,0,0.06);
}
.undertone-card h3{ margin-bottom:0.5em; }
.undertone-card p{ color: var(--c-gray); font-size:0.9rem; margin:0; }

/* -------------------------------------------------
   5c. Category tiles (homepage topic grid)
------------------------------------------------- */
.category-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
  max-width:1240px; margin:0 auto;
}
@media (max-width:900px){ .category-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .category-grid{ grid-template-columns: 1fr; } }
.category-tile{
  display:block; background: var(--c-white);
  border: 1px solid var(--c-line); border-top: 3px solid var(--tile-color, var(--c-lavender));
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.category-tile:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(69,49,66,0.08); }
.tile-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background: var(--tile-color, var(--c-lavender)); margin-bottom:0.9rem;
}
.category-tile h3{ font-size:1.15rem; margin-bottom:0.4em; }
.category-tile p{ color: var(--c-gray); font-size:0.85rem; margin:0; }

/* -------------------------------------------------
   5d. Blog post cards & badges
------------------------------------------------- */
.post-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem;
  max-width:1240px; margin:0 auto;
}
@media (max-width:920px){ .post-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .post-grid{ grid-template-columns: 1fr; } }

.post-card{ background: var(--c-white); border-radius: var(--radius); overflow:hidden; }
.post-card-media{ display:block; aspect-ratio: 4/3; overflow:hidden; background: var(--c-bg-alt); }
.post-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.post-card:hover .post-card-media img{ transform: scale(1.04); }
.post-card-placeholder{ width:100%; height:100%; background: linear-gradient(160deg,#F2E9EE,#D9C7EC); }
.post-card-body{ padding: 1.2rem 0.2rem 0; }
.post-card-body h3{ font-size:1.2rem; margin: 0.6em 0 0.4em; }
.post-card-body h3 a{ color: var(--c-plum); }
.post-card-body p{ color: var(--c-gray); font-size:0.88rem; margin:0 0 0.7em; }

.cat-badge{
  display:inline-block; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  padding: 0.3em 0.8em; border-radius: 20px;
  background: color-mix(in srgb, var(--badge-color, var(--c-lavender)) 20%, white);
  color: var(--c-plum);
  border: 1px solid var(--badge-color, var(--c-lavender));
}
.read-time{ font-size:0.75rem; color: var(--c-gray-light); }

/* -------------------------------------------------
   6. Brand story / editorial split
------------------------------------------------- */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem);
  align-items:center; max-width:1240px; margin:0 auto;
}
.split img{ border-radius: var(--radius); aspect-ratio: 4/5; object-fit:cover; background:var(--c-bg-alt); }
@media (max-width:800px){ .split{ grid-template-columns:1fr; } }

/* -------------------------------------------------
   7. Newsletter
------------------------------------------------- */
.newsletter{ text-align:center; }
.newsletter-form{
  display:flex; justify-content:center; gap:0.6rem; max-width:440px; margin: 1.6rem auto 0; flex-wrap:wrap;
}
.newsletter-form input[type=email]{
  flex:1; min-width:220px; padding: 0.9em 1.1em;
  border:1px solid var(--c-line); background: var(--c-white);
  font-family: var(--f-body); font-size:0.85rem; border-radius: var(--radius);
}

/* -------------------------------------------------
   8. Footer
------------------------------------------------- */
#site-footer{
  background: var(--c-plum); color: var(--c-bg);
  padding: clamp(3rem,6vw,5rem) var(--gap) 2rem;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:2.5rem; max-width:1240px; margin:0 auto 3rem;
}
#site-footer h4{ color: var(--c-bg); font-family:var(--f-body); font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:1.2em; }
#site-footer a, #site-footer p{ color: #D9CFDA; font-size:0.88rem; }
#site-footer li{ margin-bottom:0.6em; }
#site-footer .site-logo img, #site-footer .site-logo svg{ filter: brightness(0) invert(1); height:38px; }
.footer-bottom{
  max-width:1240px; margin:0 auto; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,0.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-size:0.75rem; letter-spacing:0.04em; color:#B8A9C0;
}
@media (max-width:800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------
   9. Blog / page defaults
------------------------------------------------- */
.entry-content{ max-width: 760px; margin: 0 auto; padding: 3rem var(--gap); }
.entry-content p{ color: var(--c-gray); }
article.post{ max-width:760px; margin:0 auto; padding: 2.5rem var(--gap); border-bottom:1px solid var(--c-line); }
.page-title{ text-align:center; padding: 3rem var(--gap) 1rem; }

/* -------------------------------------------------
   10. WooCommerce specific tweaks
------------------------------------------------- */
.woocommerce-message, .woocommerce-info{
  border-top-color: var(--c-lavender-dark) !important;
  background: var(--c-bg-alt) !important;
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--c-plum) !important; color:#fff !important;
  border-radius: var(--radius) !important; letter-spacing:0.12em; text-transform:uppercase; font-size:0.75rem !important;
  border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--c-lavender-dark) !important; }
.woocommerce ul.products li.product .price{ font-size:0.95rem; }
.woocommerce-checkout #payment, .woocommerce-cart table.shop_table{
  border-color: var(--c-line) !important;
}

/* -------------------------------------------------
   11. Utilities
------------------------------------------------- */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.fade-in{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.is-visible{ opacity:1; transform:none; }