/* =========================================================================
   NOTE ON THIS FILE
   This stylesheet is the untouched CSS pulled out of the <style> blocks of
   the two original static pages (index.html and new-arrivals.html) so that
   markup and styling are separated, as required for a WordPress theme.
   Nothing has been deleted, shortened, or rewritten — only moved here.
========================================================================= */

/* =========================================================================
   SECTION 1 — Styles originally inline in index.html (Home page)
========================================================================= */


/* =========================================================
   TOKENS
========================================================= */
:root{
  --maroon:       #67061A;
  --maroon-deep:  #4A0413;
  --maroon-rich:  #8A122C;
  --wine:         #5B1A3A;
  --blush:        #ECDDD3;
  --cream:        #FCF5EF;
  --cream-soft:   #FFF8F3;
  --gold:         #B59410;
  --gold-light:   #D4AF37;
  --ink:          #2A211D;
  --ink-soft:     #6b5f58;

  --font-display: "Lora", serif;
  --font-body:    "Poppins", sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}

a{ text-decoration:none; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}

.display-heading{
  font-family:var(--font-display);
  color:var(--maroon);
  font-weight:600;
  line-height:1.08;
}

.display-heading em{
  font-style:italic;
  font-weight:500;
  color:var(--gold);
}

.section-lede{
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.85;
  max-width:46ch;
}

.btn-maroon{
  background:var(--maroon);
  border:1px solid var(--maroon);
  color:#fff;
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.85rem 2.1rem;
  border-radius:2px;
  transition:.35s;
}
.btn-maroon:hover{ background:var(--maroon-deep); color:#fff; letter-spacing:.16em; }

.btn-outline-gold{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--maroon);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.75rem 1.8rem;
  border-radius:2px;
  transition:.35s;
}
.btn-outline-gold:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

section{ position:relative; }

/* =========================================================
   SIGNATURE — TEMPLE-BORDER DIVIDER
   (a running zig-zag + dot motif lifted from a kanjeevaram
   saree temple-border, used everywhere a "rule" is needed)
========================================================= */
.temple-divider{
  height:16px;
  width:100%;
  background-repeat:repeat-x;
  background-position:center;
  background-size:34px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Cpath d='M0 14 L8.5 2 L17 14 L25.5 2 L34 14' fill='none' stroke='%23B59410' stroke-width='1.4'/%3E%3Ccircle cx='8.5' cy='2' r='1.6' fill='%23B59410'/%3E%3Ccircle cx='25.5' cy='2' r='1.6' fill='%23B59410'/%3E%3C/svg%3E");
  opacity:.85;
  display:none;
}
.temple-divider.on-blush{ background-color:var(--blush); }
.temple-divider.on-cream{ background-color:var(--cream); }
.temple-divider.on-wine{
  background-color:var(--wine);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Cpath d='M0 14 L8.5 2 L17 14 L25.5 2 L34 14' fill='none' stroke='%23D4AF37' stroke-width='1.4'/%3E%3Ccircle cx='8.5' cy='2' r='1.6' fill='%23D4AF37'/%3E%3Ccircle cx='25.5' cy='2' r='1.6' fill='%23D4AF37'/%3E%3C/svg%3E");
}

/* =========================================================
   NAVBAR
========================================================= */
.navbar-haravillu{
  background:var(--blush);
  padding:.9rem 0;
}
.logo-mark{ width:52px; height:auto; }
.brand-word{
  font-family:var(--font-display);
  font-size:1.65rem;
  font-weight:700;
  color:var(--maroon);
  letter-spacing:.01em;
  margin-left:.6rem;
}
.brand-tagline{
  display:block;
  font-family:var(--font-body);
  font-size:.55rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-left:.6rem;
  margin-top:-4px;
}
.nav-haravillu .nav-link{
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--maroon) !important;
  padding:.4rem 1rem !important;
  position:relative;
}
.nav-haravillu .nav-link::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.1rem;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transition:.3s;
  transform-origin:left;
}
.nav-haravillu .nav-link:hover::after,
.nav-haravillu .nav-link.active::after{ transform:scaleX(1); }
.nav-haravillu .nav-link.active{ color:var(--gold) !important; }

.nav-icon-btn{
  width:38px; height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center; justify-content:center;
  color:var(--maroon);
  border:1px solid rgba(103,6,26,.25);
  transition:.3s;
  font-size:1rem;
}
.nav-icon-btn:hover{ background:var(--maroon); color:#fff; border-color:var(--maroon); }

.search-pill{
  background:rgba(103,6,26,.07);
  border-radius:30px;
  padding:.45rem .3rem .45rem 1rem;
  display:flex; align-items:center;
  width:230px;
}
.search-pill input{
  border:none !important; background:transparent !important; outline:none;
  font-family:var(--font-body); font-size:.82rem;
  width:100%; color:var(--ink); box-shadow:none !important;
}
.search-pill input:focus{
  background:transparent !important; box-shadow:none !important;
}
.search-pill input:-webkit-autofill,
.search-pill input:-webkit-autofill:hover,
.search-pill input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 30px var(--cream-soft) inset !important;
  -webkit-text-fill-color:var(--ink) !important;
}
.search-pill button{
  border:none; background:var(--maroon); color:#fff;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:none; font-size:.8rem;
}

/* =========================================================
   HERO
========================================================= */
.hero{
  background:var(--cream);
  padding-top:2.4rem;
  padding-bottom:0;
}
.hero-copy-wrap{
  padding:3.2rem 3rem 3.2rem 0;
  z-index:2;
}
.hero-frame{
  position:relative;
}
.hero-frame img{
  width:100%;
  height:640px;
  object-fit:cover;
  object-position:top center;
  border-radius:2px;
}
.hero-frame::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(212,175,55,.65);
  pointer-events:none;
  z-index:2;
}
.hero-frame::after{
  content:"";
  position:absolute;
  left:-22px; right:22px; top:22px; bottom:-22px;
  background:var(--maroon);
  z-index:-1;
}
.hero-tag{
  position:absolute;
  left:-1.1rem;
  bottom:2.4rem;
  background:var(--maroon);
  color:#fff;
  padding:1.2rem 1.5rem;
  max-width:250px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.4;
  z-index:3;
  box-shadow:0 14px 30px rgba(74,4,19,.35);
}
.hero-tag strong{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:.35rem;
}
.hero-heading{
  font-family:var(--font-display);
  font-size:3.6rem;
}
.hero-stats{
  gap:2.6rem;
  margin-top:2.6rem;
}
.hero-stats .num{
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--maroon);
  font-weight:700;
  line-height:1;
}
.hero-stats .lbl{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* =========================================================
   SECTION HEAD
========================================================= */
.section-head{ margin-bottom:2.6rem; }
.section-pad{ padding:5.5rem 0; }
/* Responsive scale - one place, smallest screen wins as the base gets
   progressively reduced. Was previously three separate overrides
   scattered across the file that happened to cascade correctly only by
   coincidence of their order - consolidated here for clarity. */
@media (max-width:991.98px){
  .section-pad{ padding:3.5rem 0; }
  .section-head{ margin-bottom:2rem; }
}
@media (max-width:767.98px){ .section-pad{ padding:3.2rem 0; } }
@media (max-width:575.98px){
  .section-pad{ padding:2.6rem 0; }
  .section-head{ margin-bottom:1.6rem; }
}

/* =========================================================
   NEW ARRIVALS
========================================================= */
.scroll-row{
  display:flex;
  gap:1.6rem;
  overflow-x:auto;
  padding-bottom:1rem;
  scroll-snap-type:x mandatory;
}
.scroll-row::-webkit-scrollbar{ height:5px; }
.scroll-row::-webkit-scrollbar-thumb{ background:var(--maroon); border-radius:10px; }

.product-card{
  flex:0 0 270px;
  scroll-snap-align:start;
  background:var(--cream-soft);
  position:relative;
  transition:.4s;
}
.product-card:hover{ transform:translateY(-6px); }
.product-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/3.8;
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition:.6s;
}
.product-card:hover .product-media img{ transform:scale(1.06); }

.ribbon-new{
  position:absolute; top:14px; left:-6px;
  background:var(--gold);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  padding:.3rem .8rem .3rem .9rem;
  z-index:2;
}
.ribbon-new::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  border-left:6px solid transparent;
  border-top:6px solid #7a6208;
}
.product-actions{
  position:absolute; right:10px; top:10px;
  display:flex; flex-direction:column; gap:8px;
  opacity:1; transform:none;
  transition:.35s;
}
/* Hover-reveal is a desktop-only nicety - devices with a real mouse (not
   touchscreens) get the fade-in-on-hover effect; everything else (mobile,
   tablets) always shows the icons, since ":hover" never fires there and
   they'd otherwise be completely inaccessible. */
@media (hover: hover) and (pointer: fine) {
  .product-actions{ opacity:0; transform:translateX(8px); }
  .product-card:hover .product-actions{ opacity:1; transform:translateX(0); }
}
.icon-chip{
  width:34px; height:34px; border-radius:50%; border:none;
  background:#fff; color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:.25s; cursor:pointer;
}
.icon-chip:hover{ background:var(--maroon); color:#fff; }
.icon-chip.wishlist-btn.active{ background:var(--maroon); color:#fff; }
.product-info{ padding:1rem .2rem 0; }
.product-info .cat{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.product-info h6{
  font-family:var(--font-display); font-size:1.15rem; color:var(--maroon); margin:.2rem 0 .3rem; font-weight:600;
}
.product-info .price{ font-size:.85rem; color:var(--ink-soft); font-weight:500; }

.arrow-nav{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--maroon); color:var(--maroon);
  display:inline-flex; align-items:center; justify-content:center;
  transition:.3s; background:transparent;
}
.arrow-nav:hover{ background:var(--maroon); color:#fff; }
.arrow-nav.swiper-button-disabled{
  opacity:.35; cursor:not-allowed; pointer-events:none;
}
.arrow-nav.swiper-button-disabled:hover{ background:transparent; color:var(--maroon); }

/* =========================================================
   FEATURED COLLECTION
========================================================= */
.featured{ background:var(--blush); }
.featured-media{ position:relative; }
.featured-media img{
  width:100%; height:520px; object-fit:cover;
}
@media (max-width:767.98px){
  .featured-media img{ height:320px; }
}
@media (max-width:575.98px){
  .featured-media img{ height:260px; }
}
.featured-media .corner-frame{
  position:absolute; inset:16px;
  border:1px solid var(--gold-light);
  pointer-events:none;
}
.featured-copy{ padding-left:3.5rem; }

/* ---- Our Story section image carousel ---- */
.story-swiper{
  position:relative; border-radius:2px; overflow:hidden;
  aspect-ratio:4/5; box-shadow:0 20px 50px rgba(0,0,0,.35);
}
@media (max-width:991.98px){
  .story-swiper{ max-width:280px; margin:0 auto; }
}
.story-swiper::after{
  content:""; position:absolute; inset:14px; border:1px solid var(--gold-light);
  pointer-events:none; z-index:2;
}
.story-swiper .swiper-slide img{
  width:100%; height:100%; object-fit:cover;
}
.feature-list-mini{ margin:2rem 0 2.2rem; padding:0; list-style:none; }
.feature-list-mini li{
  display:flex; align-items:baseline; gap:.7rem;
  font-size:.92rem; color:var(--ink); margin-bottom:.7rem;
  font-weight:500;
}
.feature-list-mini li::before{
  content:"◆";
  color:var(--gold); font-size:.55rem;
}

/* =========================================================
   CATALOGUE
========================================================= */
.catalogue-card{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/4.3;
}
.catalogue-card img{
  width:100%; height:100%; object-fit:cover;
  transition:.6s;
}
.catalogue-card:hover img{ transform:scale(1.08); }
.catalogue-card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(42,15,20,.88) 0%, rgba(42,15,20,.15) 45%, rgba(42,15,20,0) 65%);
}

/* Flush grid - no gutter between cards, thin line between them instead
   (classic "table border" technique: each card gets a right + bottom
   border, the row gets a matching top + left border, so every seam in
   the grid ends up with exactly one thin line regardless of how many
   columns wrap per row at each breakpoint). */
.catalogue-grid{
  border-top:1px solid rgba(255,255,255,.25);
  border-left:1px solid rgba(255,255,255,.25);
}
.catalogue-grid .catalogue-card{
  border-right:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(255,255,255,.25);
}
.catalogue-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.3rem;
  color:#fff;
  z-index:2;
}
.catalogue-label .eyebrow{ color:var(--gold-light); }
.catalogue-label h5{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin:.2rem 0 .5rem;
}
.catalogue-label a{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  border-bottom:1px solid var(--gold-light); padding-bottom:2px;
}

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonials{ background:var(--maroon); color:#fff; }
.testimonial-card{
  background:var(--cream-soft);
  color:var(--ink);
  border-radius:2px;
  padding:2rem 1.7rem 1.7rem;
  height:100%;
  position:relative;
}
.testimonial-card .quote-mark{
  font-family:var(--font-display);
  font-size:3.4rem; color:var(--blush);
  line-height:.5; margin-bottom:.6rem; display:block;
}
.testimonial-card .stars{ color:var(--gold); font-size:.82rem; letter-spacing:2px; }
.testimonial-card p{ font-size:.92rem; color:var(--ink-soft); line-height:1.75; margin:1rem 0 1.3rem; }
.reviewer{ display:flex; align-items:center; gap:.7rem; }
.reviewer img{ width:38px; height:38px; object-fit:cover; border-radius:50%; }
.reviewer .name{ font-weight:600; font-size:.85rem; color:var(--maroon); }
.reviewer .place{ font-size:.7rem; color:var(--ink-soft); }

.stat-block{
  background:var(--gold);
  color:var(--maroon-deep);
  border-radius:2px;
  padding:2.1rem 1.7rem;
  height:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.stat-block .big{ font-family:var(--font-display); font-size:2.7rem; font-weight:700; line-height:1; }
.stat-block .rating{ font-size:1.6rem; font-family:var(--font-display); font-weight:700; margin-top:.6rem;}

/* =========================================================
   ABOUT
========================================================= */
.about-media{ position:relative; }
.about-media img{ width:100%; height:460px; object-fit:cover; border-radius:2px; }
.about-badge{
  position:absolute; bottom:-1.6rem; left:-1.6rem;
  background:var(--maroon); color:#fff;
  padding:1.3rem 1.6rem;
  text-align:center;
  box-shadow:0 14px 26px rgba(0,0,0,.2);
}
.about-badge .big{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--gold-light); }
.about-badge small{ display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }

.value-grid{ margin-top:2rem; }
.value-item{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.1rem 0;
  border-bottom:1px dashed rgba(103,6,26,.2);
}
.value-item:last-child{ border-bottom:none; }
@media (max-width:767.98px){
  .value-grid{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:0;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-top:1.4rem; padding-bottom:.3rem;
  }
  .value-grid::-webkit-scrollbar{ display:none; }
  .value-item{
    flex:0 0 auto; width:78%; scroll-snap-align:start;
    border-bottom:none; padding:.6rem 1rem .6rem 0;
  }
}
.value-item .num{
  font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--gold);
  min-width:34px;
}
.value-item h6{ font-family:var(--font-display); color:var(--maroon); font-size:1.15rem; font-weight:600; margin-bottom:.15rem; }
.value-item p{ font-size:.85rem; color:var(--ink-soft); margin:0; }

/* =========================================================
   OUR STORY BANNER
========================================================= */
.story-banner{
  position:relative;
  background:linear-gradient(rgba(42,10,16,.72), rgba(42,10,16,.72)), var(--maroon);
  background-size:cover; background-position:center;
  padding:4.5rem 0 3.5rem;
  color:#fff;
}
@media (max-width:767.98px){
  .story-banner{ padding:2.8rem 0 2.2rem; }
}
.story-stats{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  margin-top:3rem;
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:2.2rem;
}
.story-stat{ text-align:center; flex:1; min-width:160px; }
.story-stat .big{ font-family:var(--font-display); font-size:2.3rem; font-weight:700; color:var(--gold-light); }
.story-stat .lbl{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:.3rem; }

/* =========================================================
   PROMISE
========================================================= */
.promise{ background:var(--blush); overflow:hidden; }
.promise-media{ height:100%; min-height:340px; background-size:cover; background-position:center; }
@media (max-width:767.98px){
  .promise-media{ min-height:200px; }
}
.promise-icons{
  display:flex; flex-wrap:wrap; gap:2.6rem 2rem; margin-top:2.2rem;
}
.promise-icon{ text-align:center; width:130px; }
.promise-icon .circle{
  width:64px; height:64px; border-radius:50%;
  background:var(--cream-soft);
  border:1px solid var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto .8rem;
}
@media (max-width:991.98px){
  .promise-icons{
    flex-wrap:nowrap; overflow-x:auto; gap:1.4rem;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:.4rem; margin-top:1.6rem;
  }
  .promise-icons::-webkit-scrollbar{ display:none; }
  .promise-icon{ flex:0 0 auto; width:92px; scroll-snap-align:start; }
  .promise-icon .circle{ width:52px; height:52px; font-size:.9rem; margin-bottom:.6rem; }
  .promise-icon h6{ font-size:.8rem; }
  .promise-icon p{ font-size:.72rem; }
}
.promise-icon .circle i{ font-size:1.5rem; color:var(--maroon); }
.promise-icon h6{ font-family:var(--font-display); font-size:1.02rem; color:var(--maroon); font-weight:600; margin-bottom:.15rem; }
.promise-icon p{ font-size:.72rem; color:var(--ink-soft); margin:0; }

/* =========================================================
   FOOTER
========================================================= */
.footer{ background:var(--wine); color:rgba(255,255,255,.82); }
.footer h6.col-title{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-light); margin-bottom:1.3rem; font-weight:600;
}
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:.7rem; }
.footer ul li a{ color:rgba(255,255,255,.78); font-size:.88rem; transition:.25s; }
.footer ul li a:hover{ color:var(--gold-light); padding-left:3px; }
.footer-brand-word{ font-family:var(--font-display); font-size:1.5rem; color:#fff; font-weight:700; }
.footer p.desc{ font-size:.86rem; line-height:1.75; color:rgba(255,255,255,.65); max-width:30ch; }
.social-circle{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; margin-right:.6rem; transition:.3s;
}
.social-circle:hover{ background:var(--gold-light); border-color:var(--gold-light); color:var(--wine); }

.trust-strip{ background:var(--cream-soft); padding:1.8rem 0; }
.trust-item{ display:flex; align-items:center; gap:.9rem; }
.trust-item i{ font-size:1.5rem; color:var(--maroon); }
.trust-item .t{ font-size:.85rem; font-weight:600; color:var(--maroon); }
.trust-item .s{ font-size:.72rem; color:var(--ink-soft); }

.trust-strip-swipe{
  display:flex; gap:1.6rem; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:.1rem .1rem .3rem;
}
.trust-strip-swipe::-webkit-scrollbar{ display:none; }
.trust-strip-swipe .trust-item{
  flex:0 0 auto; width:74%; scroll-snap-align:start;
}
.trust-strip-swipe .trust-item i{ font-size:1.3rem; }
.trust-strip-swipe .trust-item .t{ font-size:.8rem; }
.trust-strip-swipe .trust-item .s{ font-size:.7rem; }

.copyright-bar{
  background:var(--maroon-deep);
  color:rgba(255,255,255,.6);
  font-size:.78rem;
  padding:1rem 0;
}
.copyright-bar a{ color:rgba(255,255,255,.75); margin-left:1.3rem; }
.pay-icons img{ height:22px; margin-left:.6rem; border-radius:3px; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:991.98px){
  .hero-heading{ font-size:2.1rem; }
  .hero-copy-wrap{ padding:2.5rem 1rem 1rem; }
  .hero-frame{ margin-top:1rem; }
  .hero-frame img{ height:420px; }
  .hero-frame::after{ display:none; }
  .hero-tag{ left:1rem; bottom:-1.6rem; }
  .featured-copy{ padding-left:1rem; padding-top:2.5rem; }
  .about-badge{ left:1rem; bottom:-1.2rem; padding:1rem 1.2rem; }
  .about-badge .big{ font-size:1.6rem; }
  .story-stats{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    gap:0; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-top:2rem; padding-top:1.6rem;
  }
  .story-stats::-webkit-scrollbar{ display:none; }
  .story-stat{ flex:0 0 auto; width:44%; min-width:0; scroll-snap-align:start; }
  .story-stat .big{ font-size:1.9rem; }
}
@media (max-width:575.98px){
  .search-pill{ display:none; }
  .hero-heading{ font-size:1.6rem; }
  .navbar-brand .brand-word,
  .navbar-brand .brand-tagline{ display:none; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}



/* CSS */
.hero-slide{
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  text-align:center;
}
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 62%, rgba(20,4,8,.30) 0%, rgba(20,4,8,.05) 70%);
}
.hero-caption{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto;
  padding:0 4vw;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-eyebrow{
  color:#E4C978;
  letter-spacing:.32em;
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.hero-title{
  font-family:'Jost', sans-serif;
  font-weight:700;
  color:#fff;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.12;
  margin-bottom:1.1rem;
}
.hero-subtitle{
  color:#fbeee0;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  margin-bottom:2rem;
  max-width:520px;
}
.hero-btn{
  display:inline-block;
  background:#FFF8F0;
  color:#4A0413;
  font-family:'Jost', sans-serif;
  font-weight:700;
  font-size:1.02rem;
  padding:.95rem 2.6rem;
  border-radius:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.arrivals-swiper{ padding-bottom:2.6rem; }
.arrivals-swiper .swiper-slide{ height:auto; }

.arrivals-scrollbar{
  position:absolute !important;
  right:0 !important; left:auto !important;
  bottom:0 !important;
  width:140px !important;
  height:4px !important;
  background:var(--blush) !important;
  border-radius:10px;
}
.arrivals-scrollbar .swiper-scrollbar-drag{
  background:var(--maroon) !important;
  border-radius:10px;
}


/* =========================================================================
   SECTION 2 — Styles originally inline in new-arrivals.html
   (Home-page rules that repeat here are kept as-is, exactly as they were
   duplicated in the original file, so no original code is lost.)
========================================================================= */


/* =========================================================
   TOKENS  (matches haravillu-redesign/index.html)
========================================================= */
:root{
  --maroon:       #67061A;
  --maroon-deep:  #4A0413;
  --maroon-rich:  #8A122C;
  --wine:         #5B1A3A;
  --blush:        #ECDDD3;
  --cream:        #FCF5EF;
  --cream-soft:   #FFF8F3;
  --gold:         #B59410;
  --gold-light:   #D4AF37;
  --ink:          #2A211D;
  --ink-soft:     #6b5f58;

  --font-display: "Lora", serif;
  --font-body:    "Poppins", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
a{ text-decoration:none; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}
.display-heading{
  font-family:var(--font-display);
  color:var(--maroon);
  font-weight:600;
  line-height:1.08;
}
.section-lede{
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.85;
  max-width:46ch;
}

.btn-maroon{
  background:var(--maroon);
  border:1px solid var(--maroon);
  color:#fff;
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.85rem 2.1rem;
  border-radius:2px;
  transition:.35s;
  display:inline-block;
}
.btn-maroon:hover{ background:var(--maroon-deep); color:#fff; letter-spacing:.16em; }

.btn-outline-gold{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--maroon);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.75rem 1.8rem;
  border-radius:2px;
  transition:.35s;
  display:inline-block;
}
.btn-outline-gold:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }

section{ position:relative; }

/* =========================================================
   SIGNATURE — TEMPLE-BORDER DIVIDER (same motif as home page)
========================================================= */
.temple-divider{
  height:16px;
  width:100%;
  background-repeat:repeat-x;
  background-position:center;
  background-size:34px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Cpath d='M0 14 L8.5 2 L17 14 L25.5 2 L34 14' fill='none' stroke='%23B59410' stroke-width='1.4'/%3E%3Ccircle cx='8.5' cy='2' r='1.6' fill='%23B59410'/%3E%3Ccircle cx='25.5' cy='2' r='1.6' fill='%23B59410'/%3E%3C/svg%3E");
  opacity:.85;
}
.temple-divider.on-blush{ background-color:var(--blush); }
.temple-divider.on-cream{ background-color:var(--cream); }

/* =========================================================
   NAVBAR  (identical to home page)
========================================================= */
.navbar-haravillu{ background:var(--blush); padding:.9rem 0; }
.logo-mark{ width:52px; height:auto; }
.brand-word{
  font-family:var(--font-display); font-size:1.65rem; font-weight:700;
  color:var(--maroon); letter-spacing:.01em; margin-left:.6rem;
}
.brand-tagline{
  display:block; font-family:var(--font-body); font-size:.55rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin-left:.6rem; margin-top:-4px;
}
.nav-haravillu .nav-link{
  font-family:var(--font-body); font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--maroon) !important;
  padding:.4rem 1rem !important; position:relative;
}
.nav-haravillu .nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.1rem;
  height:1px; background:var(--gold); transform:scaleX(0); transition:.3s; transform-origin:left;
}
.nav-haravillu .nav-link:hover::after,
.nav-haravillu .nav-link.active::after{ transform:scaleX(1); }
.nav-haravillu .nav-link.active{ color:var(--gold) !important; }
.nav-icon-btn{
  width:38px; height:38px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; color:var(--maroon);
  border:1px solid rgba(103,6,26,.25); transition:.3s; font-size:1rem;
}
.nav-icon-btn:hover{ background:var(--maroon); color:#fff; border-color:var(--maroon); }
.search-pill{
  background:rgba(103,6,26,.07); border-radius:30px;
  padding:.45rem .3rem .45rem 1rem; display:flex; align-items:center; width:230px;
}
.search-pill input{
  border:none; background:transparent; outline:none;
  font-family:var(--font-body); font-size:.82rem; width:100%; color:var(--ink);
}
.search-pill button{
  border:none; background:var(--maroon); color:#fff; width:30px; height:30px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex:none; font-size:.8rem;
}

/* =========================================================
   PAGE HERO — breadcrumb + title band
========================================================= */
.page-hero{
  background:linear-gradient(90deg, var(--cream-soft) 0%, var(--blush) 100%);
  overflow:hidden;
}
.breadcrumb-trail{
  font-size:.82rem;
  color:var(--ink-soft);
  margin-bottom:1.3rem;
}
.breadcrumb-trail a{ color:var(--ink-soft); }
.breadcrumb-trail a:hover{ color:var(--maroon); }
.breadcrumb-trail .sep{ margin:0 .4rem; color:var(--gold); }
.page-hero-title{ font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:0; }
.page-hero-rule{ width:70px; height:3px; background:var(--gold); margin:1.2rem 0 1.3rem; }
.page-hero-media{ position:relative; height:100%; min-height:320px; }
.page-hero-media img{
  position:absolute; right:0; bottom:0; height:100%; width:auto;
  max-width:none; object-fit:cover;
}
@media (max-width:991px){
  .page-hero-media{ min-height:220px; margin-top:2rem; }
  .page-hero-media img{ position:static; width:100%; height:auto; border-radius:2px; }
}

/* =========================================================
   FILTERS SIDEBAR
========================================================= */
.filters-panel{
  background:var(--cream-soft);
  border:1px solid rgba(103,6,26,.12);
  border-radius:4px;
  padding:1.8rem 1.6rem;
}
.filters-panel h4{
  font-family:var(--font-display); font-size:1.5rem; font-weight:600;
  color:var(--maroon); margin-bottom:1.4rem;
}
.filter-group{
  padding-bottom:1.5rem; margin-bottom:1.5rem;
  border-bottom:1px solid rgba(103,6,26,.12);
}
.filter-group:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.filter-group h6{
  font-family:var(--font-body); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:1rem;
}
.filter-check{
  display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem;
  font-size:.9rem; color:var(--ink-soft); cursor:pointer;
}
.filter-check input{ width:16px; height:16px; accent-color:var(--maroon); cursor:pointer; }
.filter-check:hover{ color:var(--maroon); }
.filter-swatches{ display:flex; gap:.6rem; flex-wrap:wrap; }
.filter-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; box-shadow:0 0 0 1px rgba(103,6,26,.15);
}
.filter-swatch.active{ border-color:var(--gold); }

/* ---- Single product page: round colour swatches (replaces the plain
   dropdown for the Colour attribute specifically) ---- */
.haravillu-colour-swatches{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.5rem;
}
.colour-swatch-option{
  width:34px; height:34px; border-radius:50%;
  border:2px solid transparent; box-shadow:0 0 0 1px rgba(103,6,26,.2);
  cursor:pointer; transition:.2s; padding:0;
}
.colour-swatch-option:hover{ box-shadow:0 0 0 1px var(--maroon); }
.colour-swatch-option.active{ border-color:var(--gold); box-shadow:0 0 0 1px var(--maroon); }
.haravillu-colour-select-wrap{ display:none; }
.filter-range-current{
  font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--maroon-deep); margin-bottom:.5rem;
}
.filter-range{ width:100%; accent-color:var(--maroon); }
.filter-range-labels{
  display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-soft); margin-top:.4rem;
}

/* =========================================================
   TOOLBAR
========================================================= */
.listing-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:1.6rem;
}
.listing-toolbar .count{ font-size:.92rem; color:var(--ink-soft); }
.sort-select{
  border:1px solid rgba(103,6,26,.2); background:var(--cream-soft);
  color:var(--ink); font-size:.85rem; padding:.55rem 1rem; border-radius:2px;
  font-family:var(--font-body);
}

/* =========================================================
   SHOP CARD
========================================================= */
.shop-card{
  background:var(--cream-soft);
  border:1px solid rgba(103,6,26,.1);
  border-radius:4px;
  overflow:hidden;
  height:100%;
  transition:.35s;
}
.shop-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(74,4,19,.12); }
.shop-card-media{ position:relative; aspect-ratio:3/3.6; overflow:hidden; background:var(--blush); }
.shop-card-media img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.shop-card:hover .shop-card-media img{ transform:scale(1.06); }
@media (max-width:575.98px){
  .shop-card-media{ aspect-ratio:3/3.2; }
}

/* ---- Quick View glass bar ---- */
.quickview-glass-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem; border:none; border-top:1px solid rgba(255,255,255,.35);
  background:rgba(74,4,19,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; font-family:var(--font-body); font-size:.76rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:.3s ease;
}
@media (hover:hover) and (pointer:fine){
  .quickview-glass-bar{ transform:translateY(100%); opacity:0; }
  .shop-card:hover .quickview-glass-bar{ transform:translateY(0); opacity:1; }
}
.shop-ribbon{
  position:absolute; top:14px; left:-6px;
  background:var(--maroon-rich); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  padding:.3rem .8rem .3rem .9rem; z-index:2;
}
.shop-ribbon::after{
  content:""; position:absolute; left:0; bottom:-6px;
  border-left:6px solid transparent; border-top:6px solid var(--maroon-deep);
}
.shop-card-actions{
  position:absolute; top:12px; right:12px; z-index:2;
  display:flex; flex-direction:column; gap:.5rem;
}
.shop-wish{
  width:32px; height:32px; border-radius:50%; border:none;
  background:#fff; color:var(--maroon); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; box-shadow:0 4px 10px rgba(0,0,0,.15); transition:.25s; cursor:pointer;
}
.shop-wish:hover{ background:var(--maroon); color:#fff; }
.shop-wish.active{ color:#fff; background:var(--maroon); }
.shop-card-body{ padding:1.2rem 1.3rem 1.4rem; }
.shop-rating{ color:var(--gold); font-size:.82rem; margin-bottom:.5rem; }
.shop-rating span{ color:var(--ink-soft); margin-left:.3rem; }
.shop-card-body h5{
  font-family:var(--font-display); font-size:1.28rem; font-weight:600;
  color:var(--maroon); margin-bottom:.15rem;
}
.shop-card-collection{ font-size:.76rem; color:var(--ink-soft); margin-bottom:.7rem; display:block; }
.shop-price{ margin-bottom:1rem; }
.shop-price .now{ font-family:var(--font-body); font-weight:700; font-size:1.1rem; color:var(--maroon); }
.shop-price .was{ font-size:.88rem; color:var(--ink-soft); text-decoration:line-through; margin-left:.5rem; }
.shop-card-body .btn-maroon{ width:100%; text-align:center; padding:.7rem 1rem; }

/* =========================================================
   PAGINATION
========================================================= */
.listing-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; margin-top:3rem; flex-wrap:wrap;
}
.listing-pagination a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.88rem; font-weight:600; color:var(--ink);
  border:1px solid rgba(103,6,26,.15); background:var(--cream-soft); transition:.25s;
}
.listing-pagination a:hover{ border-color:var(--gold); color:var(--maroon); }
.listing-pagination a.active{ background:var(--maroon-rich); border-color:var(--maroon-rich); color:#fff; }
.listing-pagination .dots{ color:var(--ink-soft); padding:0 .3rem; }

/* =========================================================
   FOOTER  (identical to home page)
========================================================= */
.footer{ background:var(--wine); color:rgba(255,255,255,.82); }
.footer h6.col-title{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-light); margin-bottom:1.3rem; font-weight:600;
}
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:.7rem; }
.footer ul li a{ color:rgba(255,255,255,.78); font-size:.88rem; transition:.25s; }
.footer ul li a:hover{ color:var(--gold-light); padding-left:3px; }
.footer-brand-word{ font-family:var(--font-display); font-size:1.5rem; color:#fff; font-weight:700; }
.footer p.desc{ font-size:.86rem; line-height:1.75; color:rgba(255,255,255,.65); max-width:30ch; }
.social-circle{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  margin-right:.6rem; transition:.3s;
}
.social-circle:hover{ background:var(--gold-light); border-color:var(--gold-light); color:var(--wine); }
.copyright-bar{ background:var(--maroon-deep); color:rgba(255,255,255,.6); font-size:.78rem; padding:1rem 0; }
.copyright-bar a{ color:rgba(255,255,255,.75); margin-left:1.3rem; }
.pay-icons img{ height:22px; margin-left:.6rem; border-radius:3px; }



.page-hero{
  position:relative;
  background-image:url('../images/hero-newcollection.png');
  background-size:cover;
  background-position:center 25%;
  min-height:460px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--cream-soft) 0%, rgba(255,248,243,.88) 30%, rgba(255,248,243,.35) 55%, rgba(255,248,243,0) 75%);
}
.page-hero .container{ position:relative; z-index:2; }

/* =========================================================================
   SECTION 3 — WooCommerce core pages (Cart, Checkout, My Account, Login /
   Register) and the header cart badge / add-to-cart toast. Added so the
   whole store — not just the custom listing pages — matches the theme.
========================================================================= */

/* ---- Header cart icon badge ---- */
.haravillu-cart-link{ position:relative; }
.haravillu-cart-link .cart-count{
  position:absolute; top:-6px; right:-8px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--maroon); color:#fff;
  font-family:var(--font-body); font-size:.68rem; font-weight:700;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ---- "Added to cart" toast ---- */
.haravillu-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 16px);
  background:var(--maroon-deep); color:#fff;
  font-family:var(--font-body); font-size:.85rem; font-weight:500; letter-spacing:.02em;
  padding:.8rem 1.6rem; border-radius:30px;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
  z-index:9999;
}
.haravillu-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ---- Generic page wrapper (page.php) ---- */
.haravillu-page-content{ font-family:var(--font-body); color:var(--ink); }
.haravillu-page-content h2, .haravillu-page-content h3{ font-family:var(--font-display); color:var(--maroon-deep); }
.haravillu-page-content h3{ font-size:1.4rem; margin:2rem 0 .8rem; }
.haravillu-page-content h3:first-child{ margin-top:0; }
.haravillu-page-content p{ line-height:1.85; max-width:70ch; margin-bottom:1.1rem; }
.haravillu-page-content ul{ max-width:70ch; padding-left:1.3rem; margin-bottom:1.2rem; }
.haravillu-page-content ul li{ margin-bottom:.5rem; line-height:1.7; }
.haravillu-page-content a{ color:var(--maroon); text-decoration:underline; }
.haravillu-page-content a:hover{ color:var(--maroon-deep); }

/* ---- FAQs accordion ---- */
.haravillu-faq-accordion .accordion-item{
  border:none; border-bottom:1px solid rgba(103,6,26,.12); background:transparent;
}
.haravillu-faq-accordion .accordion-item:first-child{ border-top:1px solid rgba(103,6,26,.12); }
.haravillu-faq-accordion .accordion-button{
  font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--maroon-deep);
  background:transparent; padding:1.3rem .5rem; box-shadow:none;
}
.haravillu-faq-accordion .accordion-button:not(.collapsed){ color:var(--maroon-deep); background:var(--cream); }
.haravillu-faq-accordion .accordion-button:focus{ box-shadow:none; border-color:transparent; }
.haravillu-faq-accordion .accordion-button::after{
  filter:invert(20%) sepia(80%) saturate(2000%) hue-rotate(320deg);
}
.haravillu-faq-accordion .accordion-body{
  font-family:var(--font-body); color:var(--ink-soft); line-height:1.8; padding:0 .5rem 1.5rem;
}

/* ---- Shared form styling: cart, checkout, login, register, account ---- */
.woocommerce form .form-row label,
.woocommerce-form-row label{
  font-family:var(--font-body); font-size:.82rem; font-weight:600;
  color:var(--ink); letter-spacing:.02em; margin-bottom:.35rem; display:block;
}
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form select,
.woocommerce form textarea{
  width:100%;
  border:1px solid rgba(103,6,26,.18);
  background:var(--cream-soft);
  border-radius:2px;
  padding:.75rem 1rem;
  font-family:var(--font-body); font-size:.92rem; color:var(--ink);
  transition:.25s;
}
.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus{
  outline:none; border-color:var(--maroon); background:#fff;
}
.woocommerce form .form-row{ margin-bottom:1.1rem; }
.woocommerce-error, .woocommerce-message, .woocommerce-info{
  list-style:none; margin:0 0 1.5rem; padding:1rem 1.4rem;
  border-radius:2px; font-family:var(--font-body); font-size:.9rem;
  background:var(--blush); color:var(--maroon-deep); border-left:3px solid var(--maroon);
}
.woocommerce-message{ background:#eef7ee; color:#2b5c2b; border-left-color:#2b5c2b; }
.woocommerce-error{ background:#fbe9e9; color:#8a1f1f; border-left-color:#8a1f1f; }

/* Buttons across all WooCommerce forms/tables match .btn-maroon */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit{
  background:var(--maroon);
  border:1px solid var(--maroon);
  color:#fff !important;
  font-family:var(--font-body);
  font-size:.82rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 2rem; border-radius:2px;
  transition:.3s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover{
  background:var(--maroon-deep); border-color:var(--maroon-deep); color:#fff !important;
}
.woocommerce .button.alt{ background:var(--maroon); }

/* ---- Cart page ---- */
.woocommerce-cart-form,
.woocommerce table.shop_table{
  width:100%; border-collapse:collapse;
  font-family:var(--font-body); font-size:.92rem;
}
.woocommerce table.shop_table th{
  text-align:left; padding:1rem; background:var(--cream);
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon-deep);
  border-bottom:1px solid rgba(103,6,26,.12);
}
.woocommerce table.shop_table td{
  padding:1.1rem 1rem; border-bottom:1px solid rgba(103,6,26,.08); vertical-align:middle;
}
.woocommerce table.shop_table img{ width:70px; border-radius:2px; }
.woocommerce table.shop_table .product-name a{ color:var(--ink); font-weight:600; }
.woocommerce table.shop_table td.product-remove a{
  color:var(--maroon); font-size:1.2rem; line-height:1;
}
.woocommerce .quantity .qty{ width:70px; text-align:center; }
.woocommerce .cart-collaterals{
  background:var(--cream); border-radius:4px; padding:1.75rem; margin-top:2rem; max-width:420px; margin-left:auto;
}
.woocommerce .cart_totals h2{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.6rem; margin-bottom:1rem;
}
.woocommerce .cart_totals table{ width:100%; }
.woocommerce .cart_totals table td, .woocommerce .cart_totals table th{
  padding:.7rem 0; border-bottom:1px solid rgba(103,6,26,.1);
}
.woocommerce .cart_totals .order-total .amount{ color:var(--maroon-deep); font-size:1.2rem; font-weight:700; }
.woocommerce-shipping-calculator .shipping-calculator-button{ color:var(--maroon); font-weight:600; }
#coupon_code{ max-width:220px; display:inline-block; margin-right:.6rem; }

/* ---- Checkout page ---- */
.woocommerce-checkout h3{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.6rem; margin:1.75rem 0 1.25rem;
}
.woocommerce-checkout #order_review{
  background:var(--cream); border-radius:4px; padding:1.75rem;
}
.woocommerce-checkout table.shop_table{ background:transparent; }
.woocommerce-additional-fields textarea{ min-height:110px; }
.woocommerce-checkout .payment_methods{ list-style:none; padding:0; margin-top:1rem; }
.woocommerce-checkout .payment_methods li{
  border:1px solid rgba(103,6,26,.15); border-radius:2px; padding:.9rem 1.1rem; margin-bottom:.6rem;
}
.woocommerce-checkout .payment_box{ background:var(--cream-soft); padding:1rem; margin-top:.75rem; font-size:.88rem; }

/* ---- My Account (dashboard, orders, addresses, downloads) ---- */
.woocommerce-MyAccount-navigation{
  background:var(--cream); border-radius:4px; padding:0; margin-bottom:2rem; overflow:hidden;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid rgba(103,6,26,.08); }
.woocommerce-MyAccount-navigation li:last-child{ border-bottom:none; }
.woocommerce-MyAccount-navigation li a{
  display:block; padding:.9rem 1.3rem; color:var(--ink);
  font-family:var(--font-body); font-size:.88rem; font-weight:500;
  transition:.2s;
}
.woocommerce-MyAccount-navigation li a:hover{ background:var(--blush); color:var(--maroon-deep); }
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--maroon); color:#fff;
}
.woocommerce-MyAccount-content{ font-family:var(--font-body); font-size:.94rem; line-height:1.8; overflow-wrap:break-word; }

/* Edit Account tab (name/email + password change) - constrain width and
   style the fields + WordPress's own password-strength meter, which
   otherwise render with no theme styling and can overflow their column. */
.woocommerce-EditAccountForm{ max-width:520px; }
.woocommerce-EditAccountForm .form-row{ max-width:100%; }
.woocommerce-EditAccountForm .input-text{ width:100%; max-width:100%; box-sizing:border-box; }
.woocommerce-EditAccountForm fieldset{ border:none; padding:0; margin:1.5rem 0 0; }
.woocommerce-EditAccountForm legend{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.3rem; padding:0; margin-bottom:1rem;
}
#pass-strength-result{
  padding:.6rem 1rem; margin:.6rem 0 1rem; border-radius:3px;
  font-family:var(--font-body); font-size:.82rem; background:var(--cream);
  border-left:3px solid var(--ink-soft); max-width:100%; overflow-wrap:break-word;
}
#pass-strength-result.short, #pass-strength-result.bad{ border-left-color:#8a1f1f; background:#fbe9e9; color:#8a1f1f; }
#pass-strength-result.good{ border-left-color:var(--gold); background:#fff8e6; color:#7a5d00; }
#pass-strength-result.strong{ border-left-color:#2b5c2b; background:#eef7ee; color:#2b5c2b; }
.woocommerce-MyAccount-content .woocommerce-Address{
  border:1px solid rgba(103,6,26,.12); border-radius:4px; padding:1.5rem; margin-bottom:1.5rem;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h3{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.3rem;
}
.woocommerce-orders-table__cell-order-status{ text-transform:capitalize; }

/* ---- Login / Register (My Account page when logged out) ---- */
.woocommerce-form-login, .woocommerce-form-register{
  background:var(--cream); border-radius:4px; padding:2rem; max-width:480px;
}
.woocommerce form.login, .woocommerce form.register{ max-width:480px; }
.u-columns.woocommerce-Addresses,
.woocommerce-form-login-toggle,
.woocommerce-form-register-toggle{ margin-bottom:1.5rem; }
.woocommerce-form-login .woocommerce-form-row.form-row-first,
.woocommerce-form-login .woocommerce-form-row.form-row-last,
.woocommerce-form-register .woocommerce-form-row.form-row-first,
.woocommerce-form-register .woocommerce-form-row.form-row-last{ width:100%; }
.woocommerce-privacy-policy-text{ font-size:.8rem; color:var(--ink-soft); margin:1rem 0; }
.woocommerce-LostPassword a, .woocommerce-form-login__rememberme{
  font-size:.85rem; color:var(--maroon); font-family:var(--font-body);
}

@media (max-width:991px){
  .woocommerce table.shop_table thead{ display:none; }
  .woocommerce table.shop_table, .woocommerce table.shop_table tbody, .woocommerce table.shop_table tr, .woocommerce table.shop_table td{
    display:block; width:100%;
  }
  .woocommerce table.shop_table tr{ border-bottom:2px solid rgba(103,6,26,.1); padding-bottom:.5rem; margin-bottom:.5rem; }
  .woocommerce .cart-collaterals{ max-width:none; }
}

/* =========================================================================
   SECTION 4 — Stock status (Out of Stock ribbons, disabled add-to-cart,
   low-stock notice) so non-simple / out-of-stock products behave correctly.
========================================================================= */
.ribbon-outofstock, .shop-ribbon-outofstock{
  background:#6b5f58 !important;
}
.ribbon-outofstock::after{ border-top-color:#3f3833 !important; }
.icon-chip.is-disabled, .btn-maroon.is-disabled{
  background:#cfc7c2 !important; border-color:#cfc7c2 !important;
  color:#fff !important; cursor:not-allowed; pointer-events:none;
  opacity:.85;
}
.low-stock-notice{
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  color:var(--maroon-rich); margin-top:.25rem;
}

/* =========================================================================
   SECTION 5 — Custom Login / Register screen (My Account, logged out).
   Left: full-bleed brand photo panel. Right: cream form panel with
   decorative corner flourishes, per the approved design.
========================================================================= */
.haravillu-auth{
  display:flex;
  min-height:100vh;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

/* ---- Left: photo panel ---- */
.haravillu-auth-photo-panel{
  flex:0 0 50%;
  max-width:50%;
  position:relative;
  background-size:cover;
  background-position:center 15%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:2.6rem 3rem;
}
.haravillu-auth-photo-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,8,10,.18) 0%, rgba(20,8,10,.12) 35%, rgba(20,8,10,.82) 100%);
  z-index:1;
}
.haravillu-auth-photo-bottom{ position:relative; z-index:2; color:#fff; }
.haravillu-auth-photo-bottom h2{
  font-family:var(--font-display); font-weight:500; font-size:2.3rem; line-height:1.3; margin-bottom:1.1rem;
}
.auth-photo-rule{ width:64px; height:2px; background:var(--gold-light); margin-bottom:.9rem; }
.auth-photo-eyebrow{
  display:block; font-family:var(--font-body); font-size:.76rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-light); margin-bottom:1.8rem;
}
.auth-trust-row{ display:flex; gap:1rem; }
.auth-trust-item{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  font-family:var(--font-body); font-size:.7rem; letter-spacing:.02em;
}
.auth-trust-item i{ font-size:1.4rem; color:var(--gold-light); }

/* ---- Right: form panel ---- */
.haravillu-auth-form-panel{
  flex:1; max-width:50%;
  background:var(--cream-soft);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:3rem 3.5rem;
}
.auth-corner{
  position:absolute; width:150px; height:150px; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.3' opacity='0.55'%3E%3Cpath d='M10 190 C 60 190 60 140 100 140 C 140 140 140 90 190 90'/%3E%3Ccircle cx='100' cy='140' r='4'/%3E%3Ccircle cx='190' cy='90' r='3'/%3E%3Ccircle cx='10' cy='190' r='3'/%3E%3Cpath d='M40 170 q10 -20 30 -10'/%3E%3Cpath d='M150 110 q10 -20 30 -10'/%3E%3C/g%3E%3C/svg%3E");
}
.auth-corner-tr{ top:0; right:0; transform:scaleX(-1); }
.auth-corner-bl{ bottom:0; left:0; transform:scaleY(-1); }

.haravillu-auth-form-inner{ position:relative; z-index:1; width:100%; max-width:400px; }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; animation:haravilluFadeIn .35s ease; }
@keyframes haravilluFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.auth-ornament{
  text-align:center; color:var(--gold); letter-spacing:.3em; font-size:.85rem; margin-bottom:.7rem;
}
.auth-title{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:2.5rem; text-align:center; margin-bottom:.5rem;
}
.auth-subtitle{
  text-align:center; font-family:var(--font-body); color:var(--ink-soft); font-size:.88rem; margin-bottom:2rem;
}

.haravillu-auth-form-inner .form-row{ margin-bottom:1.2rem; }
.haravillu-auth-form-inner .form-row label{
  display:block; font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.4rem;
}
.input-icon-wrap{ position:relative; display:block; }
.input-icon-wrap .input-icon{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  color:var(--maroon); font-size:1rem; line-height:1;
  display:grid; place-items:center;
  width:18px; height:18px;
}

.input-icon-wrap .input-text{ padding-left:2.7rem !important; padding-right:2.6rem !important; }
.password-toggle{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%); z-index:2;
  display:grid; place-items:center;
  width:28px; height:28px; line-height:1;
  background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:0; margin:0; font-size:.95rem;
}
.password-toggle i{ display:block; line-height:1; }
.password-toggle:hover{ color:var(--maroon); }

/* Hide browsers' own built-in password reveal/clear controls - Edge/IE and
   some Chromium builds add their own icon inside password fields, which
   would otherwise stack visually on top of our custom eye-toggle button. */
.input-icon-wrap input[type="password"]::-ms-reveal,
.input-icon-wrap input[type="password"]::-ms-clear{
  display:none;
}
.input-icon-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
.input-icon-wrap input[type="password"]::-webkit-strong-password-auto-fill-button,
.input-icon-wrap input[type="password"]::-webkit-contacts-auto-fill-button{
  visibility:hidden; display:none !important; pointer-events:none; position:absolute; right:0;
}

.auth-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.4rem; font-family:var(--font-body); font-size:.82rem;
}
.auth-remember{ display:flex; align-items:center; gap:.4rem; color:var(--ink-soft); cursor:pointer; }
.auth-forgot{ color:var(--maroon); font-weight:600; }

.btn-auth-diamond{
  background:var(--maroon); border:1px solid var(--maroon); color:#fff;
  font-family:var(--font-body); font-size:.85rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem; border-radius:3px;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  transition:.3s;
}
.btn-auth-diamond:hover{ background:var(--maroon-deep); border-color:var(--maroon-deep); }
.btn-auth-diamond .diamond{ color:var(--gold-light); font-size:.8rem; }

.auth-divider{
  display:flex; align-items:center; gap:1rem; margin:1.7rem 0;
  font-family:var(--font-body); font-size:.75rem; letter-spacing:.12em; color:var(--ink-soft);
}
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:rgba(103,6,26,.15); }

.auth-social-row{ display:flex; gap:.7rem; margin-bottom:1.6rem; }
.auth-social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid rgba(103,6,26,.18); border-radius:3px; background:#fff;
  padding:.7rem .5rem; font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--ink);
  text-decoration:none; transition:.25s;
}
.auth-social-btn:hover{ border-color:var(--maroon); background:var(--blush); color:var(--maroon-deep); }
.auth-social-btn[data-provider="google"] i{ color:#DB4437; }
.auth-social-btn[data-provider="facebook"] i{ color:#1877F2; }
.auth-social-btn[data-provider="apple"] i{ color:#000; }

/* Nextend Social Login's own real buttons (documented .nsl-container
   wrapper), shown automatically in place of the placeholders above once
   the plugin is installed and configured - light touch only, since we
   don't control its internal markup. */
.haravillu-nsl-wrap{ margin-bottom:1.6rem; }
.haravillu-nsl-wrap .nsl-container{
  font-family:var(--font-body) !important;
  max-width:100%;
}
.haravillu-nsl-wrap .nsl-container .nsl-button{
  border-radius:3px !important;
}

.auth-create-box{
  width:100%; display:flex; align-items:center; gap:.9rem;
  background:var(--blush); border:none; border-radius:3px; padding:1rem 1.2rem;
  margin-bottom:1.6rem; cursor:pointer; text-align:left;
}
.auth-create-box i{ font-size:1.3rem; color:var(--maroon); flex-shrink:0; }
.auth-create-box span{ font-family:var(--font-body); font-size:.8rem; color:var(--ink-soft); line-height:1.5; }
.auth-create-box strong{ color:var(--maroon-deep); }

.auth-trust-footer{
  text-align:center; font-family:var(--font-body); font-size:.74rem; color:var(--ink-soft);
  border-top:1px solid rgba(103,6,26,.1); padding-top:1.2rem;
}
.auth-trust-footer div{ display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:.45rem; }
.auth-trust-footer div:last-child{ margin-bottom:0; }

.auth-back-home{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  margin-top:1.3rem; font-family:var(--font-body); font-size:.85rem; font-weight:600;
  color:var(--maroon); text-decoration:none;
}
.auth-back-home:hover{ text-decoration:underline; }

@media (max-width:991px){
  .haravillu-auth{ flex-direction:column; min-height:auto; }
  .haravillu-auth-photo-panel{ flex:none; max-width:100%; min-height:340px; }
  .haravillu-auth-form-panel{ flex:none; max-width:100%; padding:10vw 7vw; }
  .haravillu-auth-photo-bottom h2{ font-size:1.8rem; }
  .auth-title{ font-size:2.1rem; }
}
@media (max-width:575px){
  .auth-trust-row{ flex-wrap:wrap; row-gap:1rem; }
  .auth-social-row{ flex-wrap:wrap; }
  .auth-social-btn{ flex:1 1 45%; }
}

/* =========================================================================
   SECTION 6 — Wishlist badge + Quick View modal.
========================================================================= */
.haravillu-wishlist-link{ position:relative; }
.haravillu-wishlist-link .wishlist-count{
  position:absolute; top:-6px; right:-8px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--maroon); color:#fff;
  font-family:var(--font-body); font-size:.68rem; font-weight:700;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ---- Quick View modal ---- */
.quickview-modal{
  border:none; border-radius:6px; overflow:hidden;
  background:var(--cream-soft);
}
.quickview-close{
  position:absolute; top:1rem; right:1rem; z-index:3;
}
.quickview-body{
  display:flex; flex-wrap:wrap; padding:2rem;
}
.quickview-loading{
  width:100%; text-align:center; padding:3rem 0; font-family:var(--font-body); color:var(--ink-soft);
}
.quickview-media{
  flex:0 0 42%; max-width:42%; padding-right:2rem;
}
.quickview-media img{ width:100%; border-radius:4px; }
.quickview-info{ flex:1; min-width:280px; }
.quickview-info .cat{
  font-family:var(--font-body); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--maroon);
  margin-bottom:.4rem;
}
.quickview-info h3{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.7rem; margin-bottom:.5rem;
}
.quickview-rating{ color:var(--gold); font-size:.9rem; margin-bottom:.8rem; }
.quickview-rating span{ color:var(--ink-soft); font-family:var(--font-body); font-size:.82rem; margin-left:.3rem; }
.quickview-price{
  font-family:var(--font-body); font-size:1.3rem; font-weight:700; color:var(--maroon-deep); margin-bottom:1rem;
}
.quickview-desc{
  font-family:var(--font-body); font-size:.9rem; color:var(--ink-soft); line-height:1.7; margin-bottom:1.4rem;
}
.quickview-stock.is-out{
  font-family:var(--font-body); font-weight:600; color:#6b5f58; margin-bottom:1rem;
}
.quickview-cart-form{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.quickview-qty{
  display:flex; align-items:center; border:1px solid rgba(103,6,26,.2); border-radius:3px; overflow:hidden;
}
.quickview-qty .qty-btn{
  width:36px; height:44px; border:none; background:var(--cream); color:var(--maroon); font-size:1.1rem; cursor:pointer;
}
.quickview-qty .qty-btn:hover{ background:var(--blush); }
.quickview-qty .qty-input{
  width:48px; height:44px; border:none; text-align:center; font-family:var(--font-body); font-size:.95rem;
  -moz-appearance:textfield;
}
.quickview-qty .qty-input::-webkit-outer-spin-button,
.quickview-qty .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.quickview-add-btn{ flex:1; text-align:center; }
.quickview-full-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-body); font-size:.85rem; font-weight:600; color:var(--maroon);
}
.quickview-full-link:hover{ text-decoration:underline; }

@media (max-width:767px){
  .quickview-media{ flex:0 0 100%; max-width:100%; padding-right:0; margin-bottom:1.5rem; }
}

/* =========================================================================
   SECTION 7 — Remaining default WooCommerce chrome (single product page
   breadcrumb + spacing) so pages we haven't fully custom-templated yet
   still read as part of the same site rather than bare WooCommerce output.
========================================================================= */
.woocommerce-breadcrumb{
  font-family:var(--font-body); font-size:.82rem; color:var(--ink-soft);
  margin:1.5rem 0 1rem; padding:0 1rem;
}
.woocommerce-breadcrumb a{ color:var(--ink-soft); }
.woocommerce-breadcrumb a:hover{ color:var(--maroon); }

body.single-product div#primary,
body.woocommerce-page div#primary{
  max-width:1200px; margin:0 auto; padding:0 1rem 3rem;
  font-family:var(--font-body); color:var(--ink);
}
body.single-product .product_title{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:2rem;
}
body.single-product .price{ color:var(--maroon-deep); font-size:1.3rem; font-weight:700; }
body.single-product .cart .button,
body.single-product .single_add_to_cart_button{
  background:var(--maroon); border-color:var(--maroon);
}
body.single-product .single_add_to_cart_button:hover{ background:var(--maroon-deep); }
body.single-product .woocommerce-tabs ul.tabs li a{
  font-family:var(--font-body); font-weight:600; color:var(--ink-soft);
}
body.single-product .woocommerce-tabs ul.tabs li.active a{ color:var(--maroon-deep); }
body.single-product .related.products > h2{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.8rem;
}

/* ---- Single product layout ----
   Disabling WooCommerce's default stylesheet (see woocommerce_enqueue_styles
   filter above) also removed the only layout CSS this page had, since we
   hadn't built a custom single-product template yet - this restores it. */
body.single-product div.product{
  display:flex; flex-wrap:wrap; gap:3rem; margin-bottom:3rem;
}
body.single-product div.product .woocommerce-product-gallery{
  flex:1 1 420px; max-width:520px;
}
body.single-product div.product .woocommerce-product-gallery img{
  width:100%; height:auto; border-radius:2px;
}

/* Thumbnail strip specifically - WooCommerce renders this as an <ol> list
   (hence the "1." "2." you'd see without list-style reset), and without
   its own sizing it was inheriting the "full width" rule meant only for
   the main photo above, blowing each thumbnail up to full size instead of
   a small clickable strip. */
body.single-product .woocommerce-product-gallery .flex-control-thumbs{
  display:flex !important; flex-wrap:wrap; gap:.6rem;
  margin:1rem 0 0 !important; padding:0 !important; list-style:none !important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li{
  width:70px; list-style:none;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs img{
  width:70px !important; height:70px !important; object-fit:cover;
  border-radius:2px; cursor:pointer; opacity:.65; transition:.2s;
  border:2px solid transparent;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover,
body.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{
  opacity:1; border-color:var(--maroon);
}

/* Gallery zoom trigger (magnifying glass) - was completely unstyled
   since it's normally styled by WooCommerce's own default stylesheet,
   which we disabled theme-wide to avoid clashing with our custom design. */
body.single-product .woocommerce-product-gallery__wrapper{ position:relative; }
body.single-product .woocommerce-product-gallery__trigger{
  position:absolute; top:14px; right:14px; z-index:5;
  width:36px; height:36px; border-radius:50%;
  background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--maroon); font-size:.9rem; text-decoration:none;
}
body.single-product .woocommerce-product-gallery__trigger:hover{
  background:var(--maroon); color:#fff;
}
body.single-product .woocommerce-product-gallery__trigger::before{
  content:"\1F50D"; font-size:.95rem; line-height:1;
}
body.single-product div.product .summary{
  flex:1 1 360px;
}
body.single-product div.product .summary .product_title{ margin-bottom:.6rem; }
body.single-product div.product .summary .price{ display:block; margin-bottom:1.4rem; }
body.single-product div.product form.cart{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem;
}
body.single-product div.product form.cart .quantity{ margin:0; }
body.single-product div.product form.cart .qty{
  width:70px; text-align:center; padding:.7rem .5rem !important;
}
body.single-product .posted_in, body.single-product .tagged_as{
  display:block; font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft); margin-top:.8rem;
}
body.single-product .posted_in a, body.single-product .tagged_as a{ color:var(--maroon); }

/* ---- Product tabs (Description / Reviews) ----
   Was rendering as a bare bullet list (<ul class="tabs">) with no styling. */
body.single-product .woocommerce-tabs{ clear:both; margin-top:1rem; }
body.single-product .woocommerce-tabs ul.tabs{
  list-style:none; display:flex; gap:0; margin:0 0 -1px; padding:0;
  border-bottom:1px solid rgba(103,6,26,.15);
}
body.single-product .woocommerce-tabs ul.tabs li{
  list-style:none; margin:0;
}
body.single-product .woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:.9rem 1.4rem;
  font-family:var(--font-body); font-weight:600; font-size:.88rem;
  letter-spacing:.03em; color:var(--ink-soft); text-decoration:none;
  border-bottom:2px solid transparent;
}
body.single-product .woocommerce-tabs ul.tabs li.active a{
  color:var(--maroon-deep); border-bottom-color:var(--maroon);
}
body.single-product .woocommerce-tabs .panel{
  padding:2rem 0 0; font-family:var(--font-body); color:var(--ink); line-height:1.8;
}
body.single-product .woocommerce-tabs .panel h2{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.6rem; margin-bottom:1rem;
}
body.single-product .woocommerce-tabs .panel img{ max-width:100%; height:auto; border-radius:2px; }

@media (max-width:767px){
  body.single-product div.product{ gap:1.5rem; }
}

/* Standard WordPress utility class for visually-hidden-but-accessible text
   (e.g. WooCommerce's quantity field label) - every theme normally
   includes this; ours didn't, so such labels could show up visibly. */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;
  width:1px; word-wrap:normal !important;
}

/* ---- Quantity +/- stepper (see js/main.js) ---- */
.quantity{
  display:inline-flex; align-items:stretch;
  border:1px solid rgba(103,6,26,.2); border-radius:3px; overflow:hidden;
}
.quantity .qty-step-btn{
  width:38px; border:none; background:var(--cream); color:var(--maroon);
  font-family:var(--font-body); font-size:1.1rem; line-height:1; cursor:pointer; transition:.2s;
}
.quantity .qty-step-btn:hover{ background:var(--blush); }
.quantity .qty{
  border:none !important; width:52px; text-align:center; padding:.7rem .3rem !important;
  background:#fff !important;
}

/* ---- Sale badge (WooCommerce's default .onsale element) ---- */
.woocommerce span.onsale{
  position:absolute; top:14px; left:14px; z-index:5;
  min-width:44px; height:44px; padding:0 .3rem; border-radius:50%;
  background:#fff; color:var(--maroon-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:.78rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
body.single-product .woocommerce-product-gallery{ position:relative; }

/* ---- Wishlist button on the single product page ---- */
.single-product-wishlist{
  display:flex; align-items:center; gap:.5rem; margin-top:.5rem;
}
.single-product-wishlist .wishlist-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--maroon); font-size:1.15rem; cursor:pointer; padding:0;
}
.single-product-wishlist .wishlist-btn.active{ color:var(--maroon-deep); }
.single-product-wishlist .single-wishlist-label{
  font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft);
}
.single-product-wishlist:hover .single-wishlist-label{ color:var(--maroon); }

/* ---- Reviews list (WooCommerce's default #reviews / .commentlist) ---- */
#reviews .woocommerce-Reviews-title{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.6rem; margin-bottom:1.5rem;
}
#reviews .commentlist{ list-style:none; margin:0; padding:0; }
#reviews .comment{
  display:flex; gap:1rem; padding:1.4rem 0; border-bottom:1px solid rgba(103,6,26,.1);
}
#reviews .comment_container img.avatar{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
}
#reviews .comment-text{ flex:1; }
#reviews .comment-text .star-rating{ color:var(--gold); float:right; }
#reviews .woocommerce-review__author{ font-family:var(--font-body); font-weight:700; color:var(--ink); }
#reviews .woocommerce-review__dash,
#reviews .woocommerce-review__published-date{ color:var(--ink-soft); font-size:.82rem; }
#reviews .description p:last-child{ margin-bottom:0; color:var(--ink-soft); }
#reviews .woocommerce-noreviews{ color:var(--ink-soft); font-family:var(--font-body); }

/* Review submission form */
#review_form_wrapper #respond{ margin-top:2rem; }
#review_form_wrapper .comment-reply-title{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.4rem;
}
#review_form_wrapper .comment-notes,
#review_form_wrapper .comment-form-rating label{
  font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft);
}
#review_form_wrapper p.stars{
  display:flex; gap:.35rem; margin:.4rem 0 1.2rem; list-style:none; padding:0;
}
#review_form_wrapper p.stars a{
  position:relative; display:inline-block; width:1.6rem; height:1.6rem;
  text-indent:-9999px; overflow:hidden; text-decoration:none;
}
#review_form_wrapper p.stars a::before{
  content:"☆"; position:absolute; left:0; top:0; text-indent:0;
  font-size:1.6rem; line-height:1; color:var(--gold);
}
#review_form_wrapper p.stars a:hover::before,
#review_form_wrapper p.stars a.filled::before{
  content:"★";
}
#review_form_wrapper .comment-form-author,
#review_form_wrapper .comment-form-email,
#review_form_wrapper .comment-form-comment{ margin-top:1rem; }
#review_form_wrapper .comment-form-cookies-consent{
  display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.82rem; color:var(--ink-soft);
}
#review_form_wrapper .comment-form-cookies-consent label{ margin:0; }
#review_form_wrapper .form-submit .submit{
  background:var(--maroon); border-color:var(--maroon);
}

/* ---- Related products (WooCommerce's default product loop markup) ---- */
.woocommerce .related.products ul.products,
.woocommerce ul.products{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.5rem; list-style:none; padding:0; margin:1.5rem 0 0;
}
.woocommerce ul.products li.product{
  position:relative; text-align:left; list-style:none;
}
.woocommerce ul.products li.product a img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; margin-bottom:.8rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display); font-size:1.15rem; color:var(--ink); font-weight:600; margin-bottom:.3rem;
}
.woocommerce ul.products li.product .price{
  font-family:var(--font-body); color:var(--maroon-deep); font-weight:700; font-size:1rem;
}
.woocommerce ul.products li.product .price del{ color:var(--ink-soft); font-weight:400; margin-right:.4rem; }
.woocommerce ul.products li.product .star-rating{ color:var(--gold); font-size:.85rem; margin-bottom:.3rem; }
.woocommerce ul.products li.product .button{
  display:inline-block; margin-top:.6rem;
}

/* =========================================================================
   SECTION 8 — Reviews page: written-review carousel arrows + video review
   cards (portrait Instagram-style clips with graceful placeholder state).
========================================================================= */
.review-cards-wrap{ position:relative; padding:0 3rem; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:none;
  background:#fff; color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18); cursor:pointer; z-index:2; transition:.25s;
}
.carousel-arrow:hover{ background:var(--maroon); color:#fff; }
.review-cards-prev, .review-videos-prev{ left:0; }
.review-cards-next, .review-videos-next{ right:0; }

.review-video-card{
  border-radius:6px; overflow:hidden; background:#000;
  box-shadow:0 10px 26px rgba(74,4,19,.14);
  display:flex; flex-direction:column;
}
.review-video-card video{
  width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#000;
}
.review-video-badge{
  position:absolute; top:.7rem; right:.7rem;
  width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.review-video-placeholder{
  position:relative; width:100%; aspect-ratio:9/16;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.review-video-placeholder::before{
  content:""; position:absolute; inset:0; background:rgba(20,8,10,.55);
}
.review-video-soon{
  position:relative; z-index:1; color:#fff;
  font-family:var(--font-body); font-size:.8rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.6); border-radius:30px; padding:.5rem 1.1rem;
}
.review-video-caption{
  background:var(--cream-soft); padding:1rem 1.2rem; text-align:center;
}
.review-video-caption .stars{ color:var(--gold); font-size:.8rem; letter-spacing:2px; margin-bottom:.3rem; }
.review-video-caption .name{ font-family:var(--font-body); font-weight:700; font-size:.88rem; color:var(--maroon-deep); }
.review-video-caption .place{ font-family:var(--font-body); font-size:.74rem; color:var(--ink-soft); }

@media (max-width:767px){
  .review-cards-wrap{ padding:0 2.2rem; }
  .carousel-arrow{ width:34px; height:34px; }
}

/* =========================================================================
   SECTION 8 — Video Reviews (homepage section + Reviews page).
========================================================================= */
.testimonials-divider{
  width:100%; height:1px; background:rgba(255,255,255,.15);
  margin:3.5rem 0;
}
@media (max-width:767.98px){
  .testimonials-divider{ margin:1.6rem 0; }
}
.video-review-card{
  background:#fff; border-radius:4px; overflow:hidden;
  box-shadow:0 8px 24px rgba(74,4,19,.1);
}
.video-review-thumb{
  position:relative; width:100%; height:340px; background:var(--blush); overflow:hidden;
}
.video-review-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; transition:.4s;
}
.video-review-card:hover .video-review-thumb img{ transform:scale(1.05); }
.video-review-thumb-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--maroon); font-size:2.2rem; background:var(--cream);
}
.video-review-thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.video-play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:56px; height:56px; border-radius:50%; border:none;
  background:rgba(255,255,255,.92); color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:.25s;
}
.video-play-btn i{ margin-left:3px; } /* optically centre the play triangle */
.video-play-btn-sm{ width:32px; height:32px; font-size:.9rem; }
.video-review-thumb-sm{ height:auto !important; aspect-ratio:3/3.3; }
.video-play-btn:hover{ background:var(--maroon); color:#fff; transform:translate(-50%,-50%) scale(1.08); }
.video-review-card video{
  width:100%; height:340px; object-fit:cover; background:#000; display:block;
}
.video-review-caption{
  display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem;
}
.video-review-caption i{
  font-size:1.25rem; color:var(--maroon);
}
.video-review-caption .name{ font-family:var(--font-body); font-weight:600; font-size:.85rem; color:var(--ink); }
.video-review-caption .handle{ font-family:var(--font-body); font-size:.72rem; color:var(--ink-soft); }

/* =========================================================================
   SECTION 9 — Contact Us page.
========================================================================= */
.contact-info-card{
  background:var(--maroon); color:#fff; border-radius:6px; padding:2.4rem;
  height:100%;
}
.contact-info-card h3{
  font-family:var(--font-display); font-size:1.7rem; margin-bottom:.6rem; color:#fff;
}
.contact-info-card p{ color:rgba(255,255,255,.82); font-size:.92rem; line-height:1.8; margin-bottom:2rem; }
.contact-info-row{
  display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.6rem;
}
.contact-info-row i{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--gold-light); flex-shrink:0;
}
.contact-info-row .label{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); margin-bottom:.2rem; }
.contact-info-row .value{ font-family:var(--font-body); font-size:.92rem; color:#fff; line-height:1.6; }
.contact-info-row a{ color:#fff; }
.contact-social{ display:flex; gap:.7rem; margin-top:2rem; }

.contact-form-card{
  background:var(--cream-soft); border-radius:6px; padding:2.4rem; height:100%;
}
.contact-form-card h3{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.7rem; margin-bottom:.4rem;
}
.contact-form-card > p{ font-family:var(--font-body); color:var(--ink-soft); font-size:.9rem; margin-bottom:1.8rem; }
.haravillu-contact-form .form-row{ margin-bottom:1.2rem; }
.haravillu-contact-form label{
  display:block; font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:.4rem;
}
.haravillu-contact-form input[type="text"],
.haravillu-contact-form input[type="email"],
.haravillu-contact-form input[type="tel"],
.haravillu-contact-form textarea{
  width:100%; border:1px solid rgba(103,6,26,.18); background:#fff; border-radius:2px;
  padding:.8rem 1rem; font-family:var(--font-body); font-size:.92rem; color:var(--ink); transition:.25s;
}
.haravillu-contact-form textarea{ min-height:130px; resize:vertical; }
.haravillu-contact-form input:focus, .haravillu-contact-form textarea:focus{
  outline:none; border-color:var(--maroon);
}
.haravillu-contact-form .form-row-hp{ position:absolute; left:-9999px; }
.contact-form-message{
  padding:1rem 1.3rem; border-radius:2px; font-family:var(--font-body); font-size:.88rem; margin-bottom:1.5rem;
}
.contact-form-message.success{ background:#eef7ee; color:#2b5c2b; border-left:3px solid #2b5c2b; }
.contact-form-message.error{ background:#fbe9e9; color:#8a1f1f; border-left:3px solid #8a1f1f; }

@media (max-width:991px){
  .contact-info-card{ margin-bottom:1.5rem; }
}

/* =========================================================================
   SECTION 8 — Wishlist page (table layout + bulk actions + share row).
========================================================================= */
.wishlist-shared-notice{
  background:var(--cream); border-left:3px solid var(--gold);
  padding:.9rem 1.2rem; margin-bottom:1.5rem; border-radius:2px;
  font-family:var(--font-body); font-size:.88rem; color:var(--ink-soft);
}
.table-responsive{ overflow-x:auto; }
.wishlist-table{
  width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:.92rem;
  min-width:760px;
}
.wishlist-table thead th{
  text-align:left; padding:.9rem 1rem; background:var(--cream);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--maroon-deep);
  border-bottom:1px solid rgba(103,6,26,.12); white-space:nowrap;
}
.wishlist-table tbody td{
  padding:1rem; border-bottom:1px solid rgba(103,6,26,.08); vertical-align:middle;
}
.wl-check{ width:36px; }
.wl-remove{ width:36px; }
.wl-remove-btn{
  width:26px; height:26px; border-radius:50%; border:none;
  background:var(--cream); color:var(--maroon); font-size:.9rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.wl-remove-btn:hover{ background:var(--maroon); color:#fff; }
.wl-image img{ width:64px; height:64px; object-fit:cover; border-radius:2px; }
.wl-name a{ color:var(--ink); font-weight:600; }
.wl-name a:hover{ color:var(--maroon); }
.wl-price{ color:var(--maroon-deep); font-weight:600; white-space:nowrap; }
.wl-date{ color:var(--ink-soft); white-space:nowrap; }
@media (max-width:575.98px){
  .wishlist-table tbody td{ padding:.7rem; }
  .wl-image img{ width:48px; height:48px; }
}
.wl-instock{ color:#2b5c2b; white-space:nowrap; }
.wl-outofstock{ color:#8a1f1f; white-space:nowrap; }
.wl-action{ white-space:nowrap; }
.wl-add-btn{ padding:.6rem 1.2rem; font-size:.72rem; }
.wl-add-btn.is-disabled{ padding:.6rem 1rem; font-size:.7rem; }

.wishlist-bulk-bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:1rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(103,6,26,.1);
}
.wishlist-bulk-left, .wishlist-bulk-right{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.wishlist-actions-select{
  border:1px solid rgba(103,6,26,.2); border-radius:2px; padding:.65rem 1rem;
  font-family:var(--font-body); font-size:.85rem; background:var(--cream-soft); color:var(--ink);
}
.btn-maroon-outline{
  background:transparent; border:1px solid var(--maroon); color:var(--maroon);
  font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.75rem 1.6rem; border-radius:2px; cursor:pointer; transition:.25s;
}
.btn-maroon-outline:hover{ background:var(--maroon); color:#fff; }
.wishlist-bulk-right .btn-maroon{ padding:.75rem 1.4rem; font-size:.76rem; cursor:pointer; border:none; }

.wishlist-share-row{
  display:flex; align-items:center; gap:.8rem; margin-top:2rem;
  font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft);
}
.wishlist-share-row .social-circle{
  width:36px; height:36px; font-size:.9rem; cursor:pointer;
  border:1px solid rgba(103,6,26,.25); color:var(--maroon); background:none;
}
.wishlist-share-row .social-circle:hover{ background:var(--maroon); border-color:var(--maroon); color:#fff; }

@media (max-width:767px){
  .wishlist-bulk-bar{ flex-direction:column; align-items:stretch; }
  .wishlist-bulk-left, .wishlist-bulk-right{ justify-content:center; }
}

/* =========================================================================
   SECTION 9 — Track Your Order + Order Received (thank-you) page.
========================================================================= */
.woocommerce-order-tracking{ max-width:480px; }
.woocommerce-order-tracking .form-row{ margin-bottom:1.2rem; }
.woocommerce-order-tracking .button{ margin-top:.5rem; }

.woocommerce-order .woocommerce-notice,
.woocommerce-thankyou-order-received{
  font-family:var(--font-display); font-size:1.3rem; color:var(--maroon-deep);
  background:var(--cream); border-left:3px solid var(--maroon);
  padding:1.2rem 1.5rem; margin-bottom:2rem; border-radius:2px; list-style:none;
}
ul.woocommerce-order-overview{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  list-style:none; margin:0 0 2.5rem; padding:1.5rem; background:var(--cream); border-radius:4px;
}
ul.woocommerce-order-overview li{
  font-family:var(--font-body); font-size:.82rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;
}
ul.woocommerce-order-overview li strong{
  display:block; font-family:var(--font-display); font-size:1.2rem; text-transform:none;
  letter-spacing:normal; color:var(--maroon-deep); margin-top:.2rem;
}
.woocommerce-order-details__title,
.woocommerce-order-downloads h2,
.woocommerce-customer-details h2{
  font-family:var(--font-display); color:var(--maroon-deep); font-size:1.5rem; margin:2rem 0 1rem;
}
.woocommerce-customer-details .woocommerce-column{ margin-bottom:1.5rem; }
.woocommerce-customer-details address{
  font-family:var(--font-body); font-style:normal; line-height:1.8; color:var(--ink);
  background:var(--cream-soft); border:1px solid rgba(103,6,26,.1); padding:1.2rem 1.4rem; border-radius:4px;
}
.woocommerce-customer-details .woocommerce-column__title{
  font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--maroon); margin-bottom:.6rem; display:block;
}

@media (max-width:575px){
  ul.woocommerce-order-overview{ gap:1rem 1.5rem; }
}

/* =========================================================================
   SECTION 10 — Variable products (size/colour dropdowns + the price/stock/
   add-to-cart box that appears once options are selected). Previously had
   zero styling - relevant the moment any saree is sold with variations.
========================================================================= */
body.single-product table.variations{
  width:100%; margin-bottom:1.5rem; border-collapse:collapse;
}
body.single-product table.variations tr{ display:flex; align-items:center; margin-bottom:1rem; }
body.single-product table.variations td.label{
  flex:0 0 110px; font-family:var(--font-body); font-weight:600; font-size:.88rem; color:var(--ink);
}
body.single-product table.variations td.value{ flex:1; }
body.single-product table.variations select{
  width:100%; max-width:280px; border:1px solid rgba(103,6,26,.2); border-radius:2px;
  background:var(--cream-soft); padding:.7rem 1rem; font-family:var(--font-body); font-size:.92rem; color:var(--ink);
}
body.single-product table.variations select:focus{ outline:none; border-color:var(--maroon); background:#fff; }
body.single-product .reset_variations{
  display:inline-block; margin-top:.3rem; font-family:var(--font-body); font-size:.78rem; color:var(--maroon);
}
body.single-product .woocommerce-variation{
  background:var(--cream); border-radius:4px; padding:1.4rem; margin-bottom:1.4rem;
}
body.single-product .woocommerce-variation-price .price{ font-size:1.2rem; }
body.single-product .woocommerce-variation-availability{ margin-top:.4rem; font-family:var(--font-body); font-size:.85rem; }
body.single-product .woocommerce-variation-availability .stock.in-stock{ color:#2b5c2b; }
body.single-product .woocommerce-variation-availability .stock.out-of-stock{ color:#8a1f1f; }
body.single-product .woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:1rem; margin-top:1rem; flex-wrap:wrap;
}
body.single-product .woocommerce-variation-description p{ color:var(--ink-soft); font-size:.88rem; }

@media (max-width:575px){
  body.single-product table.variations tr{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  body.single-product table.variations td.label{ flex:none; }
  body.single-product table.variations select{ max-width:100%; }
}

/* =========================================================================
   SECTION 11 — Checkout payment method area (generic, gateway-agnostic).
   Real payment gateways (Razorpay, Stripe, PayPal, etc.) each inject their
   own card-entry markup/iframes once installed - this styles WooCommerce's
   standard wrapper structure that virtually all of them render into, so
   the payment box looks intentional rather than bare by default. Once a
   specific gateway is chosen, its own fields (e.g. an embedded card iframe)
   may need a small follow-up pass.
========================================================================= */
.woocommerce-checkout #payment{
  background:var(--cream); border-radius:4px; padding:1.5rem; margin-top:1.5rem;
}
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none; margin:0 0 1rem; padding:0; border-bottom:1px solid rgba(103,6,26,.12); padding-bottom:1rem;
}
.woocommerce-checkout #payment ul.payment_methods li{
  padding:.2rem 0; font-family:var(--font-body); font-size:.92rem;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{
  margin-right:.6rem; accent-color:var(--maroon);
}
.woocommerce-checkout #payment ul.payment_methods li img{
  height:20px; vertical-align:middle; margin-left:.4rem;
}
.woocommerce-checkout #payment .payment_box{
  background:#fff; border:1px solid rgba(103,6,26,.12); border-radius:3px;
  padding:1.2rem; margin-top:.6rem; font-family:var(--font-body); font-size:.88rem; color:var(--ink-soft);
}
.woocommerce-checkout #payment .payment_box p{ margin-bottom:.8rem; }
.woocommerce-checkout #payment .payment_box:before{ display:none; } /* remove WC's default css arrow shape, we don't load its stylesheet */
.woocommerce-checkout #place_order{
  width:100%; margin-top:1rem; padding:1.1rem; font-size:.9rem;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
  font-family:var(--font-body); font-size:.85rem; color:var(--ink-soft); margin:1rem 0;
}
.woocommerce-checkout .woocommerce-privacy-policy-text{ font-size:.8rem; }

/* =========================================================================
   SECTION 12 — 404 page search box (deliberately separate from .search-pill
   so it stays visible on mobile - the header's version hides there because
   a mobile search icon takes over, but the 404 page has no such fallback).
========================================================================= */
.notfound-search-pill{
  background:rgba(103,6,26,.07); border-radius:30px;
  padding:.5rem .35rem .5rem 1.2rem; width:100%; max-width:420px; margin:0 auto;
}
.notfound-search-pill input{
  border:none; background:transparent; outline:none;
  font-family:var(--font-body); font-size:.88rem; width:100%; color:var(--ink);
}
.notfound-search-pill button{
  border:none; background:var(--maroon); color:#fff;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none; font-size:.85rem;
}

/* =========================================================================
   SECTION 13 — Header "My Profile" dropdown (Wishlist / Track Order /
   Contact Us / Account / Logout).
========================================================================= */
.haravillu-profile-menu .dropdown-toggle::after{ display:none; }
.haravillu-profile-menu .dropdown-menu{
  min-width:200px; border:none; border-radius:4px;
  box-shadow:0 12px 30px rgba(74,4,19,.15); padding:.5rem 0; margin-top:.6rem;
}
.haravillu-profile-menu .dropdown-item{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-body); font-size:.88rem; color:var(--ink);
  padding:.6rem 1.2rem;
}
.haravillu-profile-menu .dropdown-item i{ color:var(--maroon); font-size:1rem; width:1.1em; text-align:center; }
.haravillu-profile-menu .dropdown-item:hover,
.haravillu-profile-menu .dropdown-item:focus{ background:var(--blush); color:var(--maroon-deep); }
.haravillu-profile-menu .dropdown-divider{ margin:.4rem 0; border-color:rgba(103,6,26,.1); }

/* =========================================================================
   SECTION 14 — "View cart" link (WooCommerce inserts this automatically
   next to any Add to Cart button after a successful AJAX add - was
   completely unstyled, appearing as a bare blue underlined browser link).
========================================================================= */
a.added_to_cart.wc-forward{
  display:inline-block; margin-left:.7rem;
  font-family:var(--font-body); font-size:.78rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--maroon); text-decoration:underline; text-underline-offset:2px;
}
a.added_to_cart.wc-forward:hover{ color:var(--maroon-deep); }
/* Inside the Wishlist table / product-card icon rows, keep it from
   wrapping awkwardly next to a small button. */
.wl-action a.added_to_cart.wc-forward{ display:block; margin-left:0; margin-top:.4rem; text-align:center; }

/* =========================================================================
   SECTION 15 — WooCommerce Blocks (Gutenberg-block versions of Cross-Sells,
   Related/Product grids, Cart, and Checkout). These are a completely
   separate rendering system from the classic PHP templates we've styled
   everywhere else - our woocommerce_enqueue_styles filter only disabled
   the classic stylesheet, so Blocks' own default styling (grey pill
   buttons, its default accent color) was still showing through untouched.
========================================================================= */

/* ---- Buttons: base class every WC Blocks button uses ---- */
.wc-block-components-button,
.wc-block-components-button.wp-element-button,
a.wc-block-components-button,
button.wc-block-components-button,
.wp-block-button__link.add_to_cart_button,
.wc-block-grid .add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button{
  background:var(--maroon) !important;
  border:1px solid var(--maroon) !important;
  color:#fff !important;
  font-family:var(--font-body) !important;
  font-size:.82rem !important; font-weight:600 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
.wc-block-components-button:hover,
.wc-block-components-button.wp-element-button:hover,
a.wc-block-components-button:hover,
button.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{
  background:var(--maroon-deep) !important;
  border-color:var(--maroon-deep) !important;
  color:#fff !important;
}
.wc-block-components-button.is-loading::after{ border-color:#fff !important; }

/* ---- Product grid blocks (Related Products / Cross-Sells / Product blocks) ---- */
.wc-block-grid__product-title,
.wc-block-components-product-title{
  font-family:var(--font-display) !important; color:var(--ink) !important; font-size:1.1rem !important;
}
.wc-block-grid__product-price,
.wc-block-components-product-price{
  font-family:var(--font-body) !important; color:var(--maroon-deep) !important; font-weight:700 !important;
}
.wc-block-grid__product-price del{ color:var(--ink-soft) !important; }
.wc-block-grid__product-rating,
.wc-block-components-product-rating{ color:var(--gold) !important; }
.wc-block-grid__products,
.wc-block-grid__product-list{ gap:1.5rem !important; }

/* ---- Cart block ---- */
.wc-block-cart-items__header,
.wc-block-cart-item__product-name{
  font-family:var(--font-body) !important; color:var(--ink) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--maroon-deep) !important; font-weight:700 !important;
}
.wc-block-components-panel,
.wc-block-cart__totals-title{ font-family:var(--font-display) !important; color:var(--maroon-deep) !important; }
.wc-block-components-quantity-selector{
  border-color:rgba(103,6,26,.2) !important; border-radius:3px !important;
}

/* ---- Checkout block ---- */
.wc-block-checkout__form .wc-block-components-text-input input,
.wc-block-checkout__form select{
  border-color:rgba(103,6,26,.2) !important; border-radius:2px !important;
  background:var(--cream-soft) !important;
}
.wc-block-checkout__form .wc-block-components-text-input input:focus{
  border-color:var(--maroon) !important;
}
.wc-block-components-radio-control__option.is-active .wc-block-components-radio-control__label,
.wc-block-components-radio-control input[type="radio"]{ accent-color:var(--maroon) !important; }
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button{
  width:100% !important; padding:1rem !important;
}

/* ---- My Account order history block (some WC versions render this as a block too) ---- */
.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals{
  font-family:var(--font-body) !important; color:var(--ink) !important;
}

/* =========================================================================
   SECTION 16 — DTDC shipment tracking box (Order Received page, My
   Account order view).
========================================================================= */
.dtdc-tracking-box{
  background:var(--cream); border-radius:4px; padding:1.4rem 1.6rem;
  margin:1.5rem 0; border-left:3px solid var(--maroon);
}
.dtdc-tracking-label{
  font-family:var(--font-body); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem;
}
.dtdc-tracking-awb{
  font-family:var(--font-body); font-size:1.15rem; font-weight:700;
  color:var(--maroon-deep); letter-spacing:.03em; margin-bottom:.9rem;
}
.dtdc-tracking-box .btn-maroon-outline{
  display:inline-flex; align-items:center; gap:.5rem;
}

/* =========================================================================
   SECTION 17 — Mobile bottom navigation bar (Westside-style fixed tab bar,
   mobile/tablet only - Home / Catalogue / Wishlist / Cart / Account).
========================================================================= */
.mobile-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; background:#fff;
  border-top:1px solid rgba(103,6,26,.1);
  box-shadow:0 -4px 16px rgba(74,4,19,.08);
}
.mobile-nav-item{
  flex:1; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:.55rem 0 .5rem;
  font-family:var(--font-body); font-size:.62rem; font-weight:600;
  letter-spacing:.02em; color:var(--ink-soft); text-decoration:none;
}
.mobile-nav-item i{ font-size:1.25rem; color:var(--ink-soft); transition:.2s; }
.mobile-nav-item.active,
.mobile-nav-item.active i{ color:var(--maroon); }
.mobile-nav-item:active i{ transform:scale(.9); }
.mobile-nav-badge{
  position:absolute; top:2px; right:calc(50% - 20px);
  min-width:15px; height:15px; padding:0 3px;
  background:var(--maroon); color:#fff;
  font-size:.6rem; font-weight:700; line-height:15px; text-align:center;
  border-radius:50%;
}

/* Room for the fixed bar so it never covers page/footer content, and hide
   it entirely on desktop where the full top nav already covers this. */
@media (max-width:991.98px){
  body{ padding-bottom:60px; }
}
@media (min-width:992px){
  .mobile-bottom-nav{ display:none !important; }
}

/* =========================================================================
   SECTION 18 — Mobile header/menu overhaul: search overlay (top) and
   navigation drawer (bottom), replacing the hamburger + collapse nav
   entirely on mobile. Desktop nav is untouched.
========================================================================= */

/* .mobile-nav-item is used on both <a> and <button> (Menu trigger) -
   reset button-specific defaults so both look identical. */
.mobile-nav-item{ background:none; border:none; cursor:pointer; }

/* ---- Mobile search overlay (slides down from the very top) ---- */
.haravillu-mobile-search .offcanvas-body{
  background:var(--cream-soft); padding:1.2rem 1.2rem 1.4rem;
  border-bottom:1px solid rgba(103,6,26,.12);
}
.haravillu-mobile-search form{
  background:#fff; border:1px solid rgba(103,6,26,.15); border-radius:30px;
  padding:.7rem 1.2rem; gap:.7rem;
}
.haravillu-mobile-search form i.bi-search{ color:var(--maroon); font-size:1rem; }
.haravillu-mobile-search input{
  flex:1; border:none; outline:none; background:transparent !important;
  font-family:var(--font-body); font-size:.92rem; color:var(--ink);
}
.haravillu-mobile-search .btn-close{ flex-shrink:0; }

/* ---- Mobile navigation drawer (slides up from the bottom) ---- */
.haravillu-mobile-menu{ border-radius:16px 16px 0 0; max-height:80vh; }
.haravillu-mobile-menu .offcanvas-header{
  border-bottom:1px solid rgba(103,6,26,.1); padding:1.1rem 1.3rem;
}
.haravillu-mobile-menu-brand{
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--maroon-deep);
}
.haravillu-mobile-menu .offcanvas-body{ padding:.6rem 0 1.5rem; }
.haravillu-mobile-menu-list{ list-style:none; margin:0; padding:0; }
.haravillu-mobile-menu-list li hr{
  margin:.5rem 1.3rem; border-color:rgba(103,6,26,.1);
}
.haravillu-mobile-menu-list li a{
  display:flex; align-items:center; gap:.9rem;
  padding:.95rem 1.3rem;
  font-family:var(--font-body); font-size:.95rem; font-weight:500; color:var(--ink);
  text-decoration:none;
}
.haravillu-mobile-menu-list li a i{ font-size:1.1rem; color:var(--maroon); width:1.3em; text-align:center; }
.haravillu-mobile-menu-list li a:active{ background:var(--blush); }

/* =========================================================================
   SECTION 19 — "View All" card (5th slide capping each product swiper)
   and compact mobile product-card sizing.
========================================================================= */
.view-all-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; height:100%; aspect-ratio:3/3.8;
  background:var(--cream); border:1px dashed rgba(103,6,26,.3); border-radius:2px;
  text-decoration:none; transition:.25s;
}
.view-all-card:hover{ background:var(--blush); border-color:var(--maroon); }
.view-all-arrow{
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:var(--maroon); border:1px solid var(--maroon);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:.25s;
}
.view-all-card:hover .view-all-arrow{ background:var(--maroon); color:#fff; transform:translateX(4px); }
.view-all-label{
  font-family:var(--font-body); font-size:.8rem; font-weight:600;
  letter-spacing:.04em; color:var(--maroon-deep); text-align:center; padding:0 1rem;
}

/* ---- Compact product cards on mobile - smaller images, tighter spacing,
   more content-dense while keeping a premium feel. ---- */
@media (max-width:767.98px){
  .product-info{ padding:.7rem .1rem 0; }
  .product-info h6{ font-size:.88rem; }
  .product-info .price{ font-size:.85rem; }
  .product-info .cat{ font-size:.68rem; }
  .icon-chip{ width:28px; height:28px; font-size:.72rem; }
  .view-all-arrow{ width:36px; height:36px; font-size:.95rem; }
  .view-all-label{ font-size:.72rem; }
}

/* =========================================================================
   SECTION 20 — Mobile-specific redesign pass, informed directly by
   reviewing an actual screen recording of Westside's mobile site:
   swipeable weave tiles (caption below the image, not overlaid), a plain
   "View All" text link, and more restrained, letter-spaced section labels
   on small screens.
========================================================================= */

/* ---- Weave tiles (mobile Catalogue row) ---- */
.weave-tile-row{
  display:flex; gap:.9rem; overflow-x:auto; padding:.3rem .1rem 1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.weave-tile-row::-webkit-scrollbar{ display:none; }
.weave-tile{
  flex:0 0 auto; width:26%; scroll-snap-align:start;
  text-decoration:none; display:block;
}
.weave-tile img{
  width:100% !important; height:auto !important;
  aspect-ratio:3/3.3 !important; object-fit:cover !important;
  border-radius:2px; display:block;
}
.weave-tile-label{
  display:block; width:100%; margin-top:.5rem; text-align:center;
  font-family:var(--font-body); font-size:.66rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
/* On dark sections (testimonials/video reviews), the tile text needs to
   flip to light colors - the default dark --ink color was unreadable
   against the maroon background. */
.testimonials .weave-tile-label{ color:#fff; }
.testimonials .weave-tile-price{ color:var(--gold-light) !important; }
.weave-tile-price{
  display:inline-block; margin-top:.25rem; font-weight:700;
  letter-spacing:.02em; text-transform:none; color:var(--maroon-deep);
}
.weave-tile-price del{ font-weight:400; color:var(--ink-soft); margin-right:.3rem; }
.weave-view-all{
  display:block; font-family:var(--font-body); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--maroon);
  text-decoration:underline; text-underline-offset:3px;
  border-top:1px solid rgba(103,6,26,.1); padding-top:1rem; margin-top:-.3rem;
}

/* ---- More restrained section headings on mobile - smaller, tighter,
   letter-spaced labels rather than large ornate display headings for
   every section, matching Westside's minimal mobile typography. ---- */
@media (max-width:767.98px){
  .section-head .eyebrow{ font-size:.7rem; letter-spacing:.12em; }
  .section-head .display-heading{ font-size:1.6rem !important; line-height:1.2; }
  .section-lede{ font-size:.85rem; }
}

/* =========================================================================
   SECTION 20 — Mobile: transparent header overlaid on the hero, becoming
   solid once scrolled past it (toggled via .header-solid, added by JS).
   Only applies on the front page, where the hero fills the top of the
   screen - other pages keep the normal solid header throughout.
========================================================================= */
@media (max-width:991.98px){
  body.has-hero-overlay .navbar-haravillu{
    position:absolute; top:0; left:0; right:0; width:100%; z-index:1040;
    background:transparent; border-bottom:none; box-shadow:none;
    transition:background .3s, box-shadow .3s;
  }
  /* WordPress's admin toolbar (visible when logged in) sits above
     everything else and pushes page content down - without this, the
     transparent header would overlap it and cut off hero text when the
     shop owner previews the site while signed in. */
  body.has-hero-overlay.admin-bar .navbar-haravillu{ top:46px; }
  body.has-hero-overlay .navbar-haravillu .logo-mark{ filter:brightness(0) invert(1); }
  body.has-hero-overlay .navbar-haravillu .nav-icon-btn{
    color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12);
  }
  body.has-hero-overlay.header-solid .navbar-haravillu{
    position:sticky; background:var(--blush);
    box-shadow:0 2px 10px rgba(74,4,19,.08);
  }
  body.has-hero-overlay.header-solid .navbar-haravillu .logo-mark{ filter:none; }
  body.has-hero-overlay.header-solid .navbar-haravillu .nav-icon-btn{
    color:var(--maroon); border-color:var(--maroon); background:transparent;
  }
  body.has-hero-overlay .hero-slide{ margin-top:-64px; }
}

/* On mobile, rely on touch-swipe + the "View All" card instead of the
   prev/next arrow buttons - matches the cleaner, decluttered heading
   treatment seen in the reference layout. Desktop keeps the arrows. */
@media (max-width:767.98px){
  .section-head .d-flex.gap-2{ display:none !important; }
}

/* =========================================================================
   SECTION 21 — Mobile footer: horizontal swipeable strip of link columns
   instead of stacking vertically (desktop keeps the standard column grid).
========================================================================= */
.footer-swipe-row{
  display:flex; gap:1.1rem; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:.2rem .1rem 1rem;
}
.footer-swipe-row::-webkit-scrollbar{ display:none; }
.footer-swipe-card{
  flex:0 0 auto; width:62%; scroll-snap-align:start;
}

/* =========================================================================
   SECTION 22 — Hide the visible swiper scrollbar on mobile. It's a
   mouse-drag affordance for desktop; on touch devices swipe is the
   natural gesture already, so the bar is just clutter there.
========================================================================= */
@media (max-width:991.98px){
  .swiper-scrollbar{ display:none !important; }
}

/* =========================================================================
   SECTION 23 — Cap all section headings on mobile to a consistent,
   readable size, overriding the varied inline font-size values used
   per-section (2.4rem, 2.6rem, 1.9rem, etc.) - those sizes make sense on
   desktop but are too large on a phone screen.
========================================================================= */
@media (max-width:575.98px){
  .display-heading{ font-size:1.6rem !important; }
  .section-lede{ font-size:.92rem !important; }
}
@media (min-width:576px) and (max-width:767.98px){
  .display-heading{ font-size:1.9rem !important; }
}

/* =========================================================================
   SECTION 24 — On mobile, the header shouldn't stay pinned throughout the
   whole page (it was appearing to "float" over content like the footer as
   users scrolled, which read as a glitch). Scrolls away normally instead,
   like the rest of the page. The homepage keeps its own separate
   transparent-over-hero header logic (SECTION 20), untouched here.
========================================================================= */
@media (max-width:991.98px){
  body:not(.has-hero-overlay) .navbar-haravillu{ position:static; }
}