/*
Theme Name: TARSIYA
Theme URI: http://tarsiya.local
Author: TARSIYA Design Team
Author URI: http://tarsiya.local
Description: 1:1 Implementation of TARSIYA luxury fashion website blueprint (Burgundy #411115, Ivory #EBE4C9, Gold #C99A45, Source Serif 4 & Montserrat).
Version: 3.4.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tarsiya
Tags: e-commerce, luxury, fashion, ivory, burgundy, woocommerce, editorial, tarsiya
*/

/* ==========================================================================
   TARSIYA BRAND SYSTEM & DESIGN TOKENS
   ========================================================================== */

:root {
  /* Official Brand Colors (from Brand Guidelines & Mockups) */
  --ts-burgundy: #411115;         /* Primary Accent / Dark Brand Color */
  --ts-burgundy-hover: #2E0B0E;   /* Deep Burgundy Hover */
  --ts-burgundy-light: rgba(65, 17, 21, 0.06);

  --ts-ivory: #EBE4C9;            /* Brand Warm Ivory */
  --ts-bg-main: #FAF7F2;          /* Primary Page Background */
  --ts-bg-surface: #FFFFFF;       /* Crisp White Card/Surface */
  --ts-bg-alt: #F4EFEA;           /* Soft Ivory Section Background */
  --ts-bg-subtle: #EFE8DE;        /* Secondary Tint */

  --ts-champagne: #DBD0C2;        /* Neutral Champagne */
  --ts-gold: #C99A45;             /* Warm Subtle Gold Accent */
  --ts-espresso: #170D0C;         /* Rich Dark Espresso Text/Accent */

  --ts-text-heading: #170D0C;     /* Deep Espresso Heading */
  --ts-text-body: #3D3534;        /* Dark Warm Body Text */
  --ts-text-muted: #786E6B;       /* Medium Warm Muted Text */
  --ts-text-light: #A39995;       /* Subdued Label Text */

  --ts-border: #E2D8CD;           /* Hairline Border */
  --ts-border-subtle: #EFE7DC;    /* Soft Subdued Divider */

  /* Official Typography Pairing */
  --ts-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ts-font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout & Measurements */
  --ts-container: 1340px;
  --ts-radius-sm: 2px;
  --ts-radius-md: 4px;

  /* Transitions & Elevation */
  --ts-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --ts-shadow-subtle: 0 4px 20px rgba(23, 13, 12, 0.04);
  --ts-shadow-card: 0 12px 35px rgba(23, 13, 12, 0.06);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ts-font-sans);
  background-color: var(--ts-bg-main);
  color: var(--ts-text-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ts-font-serif);
  color: var(--ts-text-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--ts-transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

.container {
  max-width: var(--ts-container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Accessibility Focus States */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ts-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   TOP ANNOUNCEMENT BAR (BURGUNDY #411115)
   ========================================================================== */

.ts-announcement-bar {
  background-color: var(--ts-burgundy);
  color: var(--ts-ivory);
  padding: 0.65rem 2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ts-announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ts-announcement-text {
  flex-grow: 1;
  text-align: center;
}

.ts-currency-selector {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ts-ivory);
  opacity: 0.9;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ==========================================================================
   HEADER NAVIGATION & LOGO CONSTRAINTS (STRICTLY CONSTRAINED LOGO)
   ========================================================================== */

.ts-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ts-border-subtle);
  transition: var(--ts-transition);
}

.ts-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}

.ts-brand-logo-link {
  display: inline-flex;
  align-items: center;
  max-height: 48px;
  flex-shrink: 0;
}

.ts-brand-logo-link img,
.ts-brand-logo-img,
.custom-logo,
a.custom-logo-link img {
  max-height: 32px !important;
  height: auto !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  display: block;
}

.ts-brand-logo-fallback {
  font-family: var(--ts-font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ts-burgundy);
  text-transform: uppercase;
}

/* Mobile Navigation Elements (Strictly hidden on desktop) */
.ts-mobile-nav-overlay,
.ts-mobile-drawer-header,
.ts-nav-arrow {
  display: none !important;
}

.ts-nav-menu {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.ts-nav-links-wrap {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.ts-nav-menu ul {
  display: flex;
  align-items: center;
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ts-nav-menu li {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.ts-nav-menu a {
  font-family: var(--ts-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-text-heading);
  position: relative;
  padding: 0.25rem 0;
}

.ts-nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--ts-burgundy);
  transition: var(--ts-transition);
}

.ts-nav-menu a:hover::after,
.ts-nav-menu .current-menu-item > a::after,
.ts-nav-menu a.current-menu-item::after {
  width: 100%;
}

.ts-header-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

button.ts-icon-link,
a.ts-icon-link {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--ts-text-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: var(--ts-transition);
  padding: 0.4rem;
  cursor: pointer;
  outline: none;
}

.ts-icon-link:hover {
  color: var(--ts-burgundy);
  transform: translateY(-1px);
}

.ts-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--ts-burgundy);
  color: var(--ts-ivory);
  font-size: 0.65rem;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu hamburger toggle: strictly hidden on desktop */
.ts-mobile-toggle,
button.ts-mobile-toggle,
button.ts-icon-link.ts-mobile-toggle,
#ts-mobile-menu-btn {
  display: none !important;
}

/* ==========================================================================
   HOMEPAGE HERO SECTION (MOCKUP MATCH 1:1)
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE HERO SECTION (FULL-WIDTH EDGE-TO-EDGE VISUAL BLUEPRINT)
   ========================================================================== */

.ts-hero {
  position: relative;
  width: 100%;
  min-height: 650px;
  height: min(78vh, 850px);
  background-color: var(--ts-bg-main);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ts-hero-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.ts-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  pointer-events: none;
}

.ts-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  pointer-events: auto;
}

.ts-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.ts-hero-slide[data-slide-index="0"] .ts-hero-bg-img {
  object-position: right top;
}

.ts-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ts-hero-content {
  max-width: 520px;
}

.ts-hero-tagline {
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ts-text-muted);
  margin-bottom: 1.5rem;
  display: block;
}

.ts-hero-title {
  font-family: var(--ts-font-serif);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ts-text-heading);
  margin-bottom: 1.75rem;
  letter-spacing: -0.02em;
}

.ts-hero-desc {
  font-family: var(--ts-font-sans);
  font-size: 1.05rem;
  color: var(--ts-text-muted);
  margin-bottom: 2.75rem;
  max-width: 480px;
  line-height: 1.8;
}

.ts-hero-buttons {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.15rem 2.25rem;
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--ts-transition);
  border: 1px solid transparent;
  border-radius: var(--ts-radius-sm);
}

.ts-btn-primary {
  background-color: var(--ts-burgundy);
  color: var(--ts-ivory);
  border-color: var(--ts-burgundy);
}

.ts-btn-primary:hover {
  background-color: var(--ts-burgundy-hover);
  border-color: var(--ts-burgundy-hover);
  color: #FFFFFF;
}

.ts-btn-secondary {
  background-color: transparent;
  border-color: var(--ts-text-heading);
  color: var(--ts-text-heading);
}

.ts-btn-secondary:hover {
  background-color: var(--ts-burgundy-light);
  border-color: var(--ts-burgundy);
  color: var(--ts-burgundy);
}

.ts-hero-overlay-controls {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  z-index: 3;
}

.ts-hero-caption {
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.85rem 1.5rem;
  font-family: var(--ts-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ts-text-heading);
  border: 1px solid var(--ts-border);
}

.ts-hero-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ts-text-muted);
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.4rem 1rem;
  border-radius: var(--ts-radius-sm);
  border: 1px solid var(--ts-border-subtle);
}

/* ==========================================================================
   SECTION HEADER WITH HORIZONTAL RULE (MATCHING MOCKUP)
   ========================================================================== */

.ts-section {
  padding: 6rem 0;
}

.ts-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid var(--ts-border);
  padding-bottom: 1rem;
}

.ts-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ts-section-title {
  font-family: var(--ts-font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--ts-text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ts-section-rule {
  flex-grow: 1;
  height: 1px;
  background-color: var(--ts-border);
  max-width: 120px;
}

.ts-section-link {
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-text-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ts-section-link:hover {
  color: var(--ts-burgundy);
}

/* ==========================================================================
   SHOP BY CATEGORY (4 TALL CARDS MATCHING MOCKUP 1:1)
   ========================================================================== */

.ts-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.ts-cat-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--ts-bg-alt);
  display: block;
}

.ts-cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ts-cat-card:hover img {
  transform: scale(1.05);
}

.ts-cat-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 13, 12, 0.8) 0%, rgba(23, 13, 12, 0) 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 1.5rem;
  color: #FFFFFF;
}

.ts-cat-name {
  font-family: var(--ts-font-serif);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: #FFFFFF;
}

.ts-cat-btn {
  font-family: var(--ts-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-champagne);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   PRODUCT CARDS GRID (3:4 PORTRAIT PROMINENCE)
   ========================================================================== */

.ts-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.ts-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ts-bg-surface);
  border: 1px solid var(--ts-border-subtle);
  border-radius: var(--ts-radius-md);
  padding: 1.25rem;
  box-shadow: 0 4px 18px rgba(23, 13, 12, 0.03);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  box-sizing: border-box;
}

.ts-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(23, 13, 12, 0.07);
  border-color: var(--ts-border);
}

.ts-product-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--ts-bg-alt);
  margin-bottom: 1.25rem;
}

.ts-product-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ts-product-card:hover .ts-product-thumb-wrap img {
  transform: scale(1.04);
}

.ts-wishlist-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(4px);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-text-heading);
  cursor: pointer;
  transition: var(--ts-transition);
}

.ts-wishlist-btn:hover {
  background: var(--ts-burgundy);
  color: var(--ts-ivory);
}

.ts-product-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-text-muted);
}

.ts-product-info {
  display: flex;
  flex-direction: column;
}

.ts-product-title {
  font-family: var(--ts-font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ts-text-heading);
  margin-bottom: 0.35rem;
}

.ts-product-title a:hover {
  color: var(--ts-burgundy);
}

.ts-product-price {
  font-family: var(--ts-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ts-text-muted);
  margin-bottom: 0.5rem;
}

.ts-color-swatches {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.ts-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--ts-border);
  display: inline-block;
  cursor: pointer;
}

/* ==========================================================================
   EDITORIAL STORY SECTION ("MORE THAN CLOTHING.")
/* ==========================================================================
   EDITORIAL STORY SECTION ("MORE THAN CLOTHING." FULL-WIDTH BANNER)
   ========================================================================== */

.ts-story-section {
  position: relative;
  width: 100%;
  min-height: 580px;
  height: min(72vh, 720px);
  background-color: var(--ts-bg-main);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ts-story-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.ts-story-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  display: block;
}

.ts-story-container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.ts-story-content {
  max-width: 520px;
}

.ts-story-title {
  font-family: var(--ts-font-serif);
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--ts-text-heading);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.ts-story-subtitle {
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ts-text-muted);
  margin-bottom: 1.5rem;
  display: block;
}

.ts-story-desc {
  font-size: 1.02rem;
  color: var(--ts-text-body);
  line-height: 1.75;
  margin-bottom: 2.25rem;
  max-width: 460px;
}

/* ==========================================================================
   BURGUNDY CALLOUT BANNER (#411115) WITH BACKGROUND IMAGE
   ========================================================================== */

.ts-callout-banner {
  position: relative;
  width: 100%;
  min-height: 200px;
  background-color: var(--ts-burgundy);
  background-image: url('assets/images/about-cta-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ts-ivory);
  padding: 4.5rem 0;
  display: flex;
  align-items: center;
}

.ts-callout-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}

.ts-callout-title {
  font-family: var(--ts-font-serif);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ts-ivory);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ts-callout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-ivory);
  background-color: rgba(65, 17, 21, 0.45);
  border: 1px solid var(--ts-champagne);
  padding: 1.1rem 2.5rem;
  white-space: nowrap;
  transition: var(--ts-transition);
  cursor: pointer;
}

.ts-callout-btn:hover {
  background-color: var(--ts-ivory);
  border-color: var(--ts-ivory);
  color: var(--ts-burgundy);
}

/* ==========================================================================
   VALUE PROPOSITION BAR (MODULAR 4-ITEM MOCKUP BAR)
   ========================================================================== */

.ts-props-bar {
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
  background-color: var(--ts-bg-main);
  padding: 3.5rem 0;
}

.ts-props-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  text-align: center;
}

.ts-prop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 0.85rem;
}

.ts-prop-icon svg {
  color: var(--ts-burgundy);
  stroke: var(--ts-burgundy);
  opacity: 0.8;
}

.ts-prop-icon-img {
  width: auto;
  height: 40px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.ts-prop-title {
  font-family: var(--ts-font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-text-heading);
  margin-bottom: 0.25rem;
}

.ts-prop-sub {
  font-size: 0.8rem;
  color: var(--ts-text-muted);
}

/* ==========================================================================
   FOOTER (5-COLUMN MOCKUP MATCH WITH STRICT LOGO CONSTRAINTS)
   ========================================================================== */

.ts-footer {
  background-color: var(--ts-bg-main);
  border-top: 1px solid var(--ts-border);
  padding: 6rem 0 3rem;
  color: var(--ts-text-body);
}

.ts-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 3.5rem;
  margin-bottom: 5rem;
}

.ts-footer-logo-img {
  max-height: 125px !important;
  height: auto !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain;
  display: block;
  margin-bottom: 1.5rem;
}

.ts-footer-col h4 {
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-text-heading);
  margin-bottom: 1.75rem;
}

.ts-footer-col ul li {
  margin-bottom: 0.85rem;
}

.ts-footer-col ul li a {
  font-size: 0.88rem;
  color: var(--ts-text-muted);
  transition: var(--ts-transition);
}

.ts-footer-col ul li a:hover {
  color: var(--ts-burgundy);
}

.ts-footer-socials {
  display: flex;
  gap: 1.25rem;
  font-size: 1.1rem;
  color: var(--ts-text-heading);
}

.ts-footer-socials a:hover {
  color: var(--ts-burgundy);
}

.ts-footer-bottom {
  border-top: 1px solid var(--ts-border);
  padding-top: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ts-text-muted);
}

.ts-footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.ts-footer-tagline-script {
  font-family: var(--ts-font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ts-text-heading);
}

/* ==========================================================================
   SHOP / CATALOG PAGE STYLES (MOCKUP MATCH 1:1)
   ========================================================================== */

.ts-breadcrumbs {
  font-size: 0.8rem;
  color: var(--ts-text-muted);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ts-shop-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 4rem;
}

.ts-shop-title {
  font-family: var(--ts-font-serif);
  font-size: 4rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.ts-shop-sub {
  font-size: 1.05rem;
  color: var(--ts-text-muted);
}

.ts-shop-banner-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center top;
}

.ts-shop-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
  padding: 1rem 0;
  margin-bottom: 3rem;
  font-size: 0.85rem;
  color: var(--ts-text-muted);
}

.ts-shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3.5rem;
}

.ts-filter-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.ts-filter-group h4 {
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.ts-filter-list li {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: var(--ts-text-muted);
}

.ts-size-boxes {
  display: flex;
  gap: 0.5rem;
}

.ts-size-box {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ts-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
}

.ts-size-box.active,
.ts-size-box:hover {
  border-color: var(--ts-burgundy);
  color: var(--ts-burgundy);
}

/* ==========================================================================
   WOOCOMMERCE OVERRIDES & CATALOG — PREMIUM PRODUCT GRID
   ========================================================================== */

.woocommerce .ts-woocommerce-container {
  background-color: transparent;
  padding: 0;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  background-color: var(--ts-bg-surface);
  border-top: 2px solid var(--ts-burgundy);
  color: var(--ts-text-heading);
  padding: 1.5rem 2rem;
  border-radius: var(--ts-radius-sm);
  font-size: 0.95rem;
}

/* ── Filter Bar Sub-regions ────────────────────────────────────────── */

.ts-filter-bar-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.ts-filter-bar-label {
  font-family: var(--ts-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-text-heading);
}

.ts-filter-bar-clear {
  font-size: 0.82rem;
  color: var(--ts-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ts-filter-bar-center {
  font-size: 0.82rem;
  color: var(--ts-text-muted);
}

/* WooCommerce result count override */
.woocommerce-result-count {
  font-family: var(--ts-font-sans);
  font-size: 0.82rem;
  color: var(--ts-text-muted);
  margin: 0;
  float: none;
}

/* WooCommerce ordering dropdown override */
.woocommerce-ordering {
  margin: 0;
  float: none;
}

.woocommerce-ordering select {
  font-family: var(--ts-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ts-text-heading);
  background-color: var(--ts-bg-main);
  border: 1px solid var(--ts-border);
  padding: 0.45rem 2rem 0.45rem 0.85rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23786E6B'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
  border-color: var(--ts-burgundy);
}

/* ── Catalog Area ─────────────────────────────────────────────────── */

.ts-catalog-area {
  min-width: 0;
}

/* ── Product Grid: 3 equal columns ───────────────────────────────── */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 2.5rem 1.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: start !important;
}

/* ── Individual Product Card: flex column ─────────────────────────── */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1.25rem !important;
  background-color: var(--ts-bg-surface) !important;
  border: 1px solid var(--ts-border-subtle) !important;
  border-radius: var(--ts-radius-md) !important;
  box-shadow: 0 4px 18px rgba(23, 13, 12, 0.03) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  float: none !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(23, 13, 12, 0.07) !important;
  border-color: var(--ts-border) !important;
}

/* ── Product Image Link Wrapper: clips zoom + positions badge ──── */

.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  background-color: transparent !important;
}

/* ── Product Thumbnail Image (scoped to WC thumbnail class only) ──── */
/* The thumbnail is the .wp-post-image / attachment-woocommerce_thumbnail.
   We DO NOT use a bare 'img' selector here to avoid hitting logos inside
   the same <a> link wrapper. */

.woocommerce ul.products li.product .woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img.attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link img.attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  margin: 0 !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link img.attachment-woocommerce_thumbnail,
.woocommerce-page ul.products li.product:hover .woocommerce-LoopProduct-link img.wp-post-image,
.woocommerce-page ul.products li.product:hover .woocommerce-LoopProduct-link img.attachment-woocommerce_thumbnail {
  transform: scale(1.03) !important;
}

/* Explicit fallback: any img inside the link that is NOT a logo keeps its
   natural sizing — logos are handled separately below. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img:not(.mintpay-logo):not(.mintpay-info-icon):not(.koko-logo):not(.koko-info),
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link img:not(.mintpay-logo):not(.mintpay-info-icon):not(.koko-logo):not(.koko-info) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  margin: 0 !important;
}


/* ── Product Title ────────────────────────────────────────────────── */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ts-font-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--ts-text-heading) !important;
  margin: 1rem 0 0.4rem 0 !important;
  padding: 0 !important;
  min-height: 2.92rem;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--ts-burgundy) !important;
}

/* ── Price wrapper (contains WC price + Mintpay + Koko) ────────────── */

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--ts-font-serif) !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  color: var(--ts-gold) !important;
  display: block !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  flex: 1;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  color: var(--ts-text-light) !important;
  font-weight: 400 !important;
  font-size: 0.88rem !important;
  margin-right: 0.3rem;
  opacity: 0.7;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--ts-gold) !important;
}

/* Suppress injected <br> tags that cause uneven spacing */
.woocommerce ul.products li.product .price br,
.woocommerce-page ul.products li.product .price br {
  display: none;
}

/* ── Payment Info (Mintpay / Koko) ────────────────────────────────── */
/* Container: flex row so text and logo sit side-by-side */

.woocommerce ul.products li.product .price .product-price-installments-not-in-variation,
.woocommerce-page ul.products li.product .price .product-price-installments-not-in-variation {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.72rem !important;
  color: var(--ts-text-muted) !important;
  line-height: 1.6 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px 4px !important;
  min-height: 1.55rem;
  margin-top: 0.3rem;
  font-weight: 400 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* The <span> wrapper Mintpay injects around its logo + info-icon */
.woocommerce ul.products li.product .price .product-price-installments-not-in-variation span,
.woocommerce-page ul.products li.product .price .product-price-installments-not-in-variation span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0;
}

/* ── Mintpay logo ──────────────────────────────────────────────────── */
.woocommerce ul.products li.product .price .mintpay-logo,
.woocommerce-page ul.products li.product .price .mintpay-logo {
  height: 14px !important;
  width: auto !important;
  max-height: 14px !important;
  max-width: none !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: static !important;
  flex-shrink: 0 !important;
}

/* ── Mintpay info icon ─────────────────────────────────────────────── */
.woocommerce ul.products li.product .price .mintpay-info-icon,
.woocommerce-page ul.products li.product .price .mintpay-info-icon {
  height: 11px !important;
  width: 11px !important;
  max-height: 11px !important;
  max-width: 11px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: static !important;
  flex-shrink: 0 !important;
}

/* ── Koko logo ─────────────────────────────────────────────────────── */
.woocommerce ul.products li.product .price .koko-logo,
.woocommerce-page ul.products li.product .price .koko-logo {
  height: 14px !important;
  width: auto !important;
  max-height: 14px !important;
  max-width: none !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: static !important;
  flex-shrink: 0 !important;
}

/* ── Koko info icon ────────────────────────────────────────────────── */
.woocommerce ul.products li.product .price .koko-info,
.woocommerce-page ul.products li.product .price .koko-info {
  height: 11px !important;
  width: 11px !important;
  max-height: 11px !important;
  max-width: 11px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: static !important;
  flex-shrink: 0 !important;
}


/* ── Add to Cart Button ─────────────────────────────────────────── */

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .add_to_cart_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0.9rem 0 0 0 !important;
  padding: 0 1rem !important;
  background-color: var(--ts-burgundy) !important;
  color: var(--ts-ivory) !important;
  border: 1px solid var(--ts-burgundy) !important;
  border-radius: var(--ts-radius-sm) !important;
  font-family: var(--ts-font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  flex-shrink: 0;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .add_to_cart_button:hover {
  background-color: var(--ts-burgundy-hover) !important;
  border-color: var(--ts-burgundy-hover) !important;
  color: #FFFFFF !important;
}

.woocommerce ul.products li.product .button.added,
.woocommerce-page ul.products li.product .button.added {
  background-color: var(--ts-espresso) !important;
  border-color: var(--ts-espresso) !important;
}

/* ── Sale / New Badges ──────────────────────────────────────────── */

.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
  position: absolute !important;
  top: 0.85rem !important;
  left: 0.85rem !important;
  right: auto !important;
  bottom: auto !important;
  background-color: var(--ts-burgundy) !important;
  color: var(--ts-ivory) !important;
  font-family: var(--ts-font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 0 !important;
  min-height: unset !important;
  min-width: unset !important;
  line-height: 1;
  margin: 0 !important;
}



/* ==========================================================================
   SLIDE-OUT MINI CART DRAWER
   ========================================================================== */

.ts-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 13, 12, 0.4);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--ts-transition);
}

.ts-cart-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.ts-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  background: var(--ts-bg-main);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  box-shadow: -10px 0 40px rgba(23, 13, 12, 0.15);
}

.ts-cart-drawer.active {
  transform: translateX(0);
}

.ts-cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ts-border);
  font-family: var(--ts-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
}

.ts-cart-drawer-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ts-text-heading);
}

.ts-cart-drawer-items {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ts-cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1rem;
  align-items: center;
}

.ts-cart-item-img {
  width: 80px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.ts-cart-drawer-footer {
  border-top: 1px solid var(--ts-border);
  padding-top: 1.5rem;
}

.ts-cart-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */

@media (max-width: 1024px) {
  .ts-hero {
    min-height: 560px;
    height: auto;
    padding: 4rem 0 5rem;
  }
  .ts-hero-bg-img,
  .ts-story-bg-img {
    object-position: 85% top;
  }
  .ts-story-section {
    min-height: 520px;
    height: auto;
    padding: 4rem 0 5rem;
  }
  .ts-callout-banner {
    padding: 3.5rem 0;
  }
  .ts-callout-title {
    font-size: 1.85rem;
  }
  .ts-story-grid,
  .ts-shop-header {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .ts-hero-title,
  .ts-story-title,
  .ts-shop-title {
    font-size: 3.25rem;
  }
  .ts-categories-grid,
  .ts-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* WC product grid: 2 columns at tablet */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2rem 1.25rem !important;
  }
  .ts-props-grid,
  .ts-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ts-shop-layout {
    grid-template-columns: 1fr;
  }
  .ts-filter-sidebar {
    display: none;
  }
}

@media (max-width: 640px) {
  .ts-hero {
    min-height: 500px;
    height: auto;
    padding: 3rem 0 4rem;
  }
  .ts-hero-bg-img,
  .ts-story-bg-img {
    object-position: 80% top;
  }
  .ts-story-section {
    min-height: 480px;
    height: auto;
    padding: 3rem 0 4rem;
  }
  .ts-callout-banner {
    padding: 3rem 0;
  }
  .ts-callout-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .ts-callout-title {
    font-size: 1.55rem;
  }
  .ts-callout-btn {
    width: 100%;
    text-align: center;
  }
  .ts-hero-content,
  .ts-story-content {
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2rem 1.5rem;
    border: 1px solid var(--ts-border);
  }
  .ts-hero-overlay-controls {
    position: relative;
    bottom: auto;
    right: auto;
    align-items: flex-start;
    margin-top: 1.5rem;
  }
  .ts-mobile-toggle {
    display: inline-flex;
  }
  .ts-hero-title,
  .ts-story-title,
  .ts-shop-title {
    font-size: 2.5rem;
  }
  .ts-categories-grid,
  .ts-products-grid,
  .ts-props-grid,
  .ts-footer-grid {
    grid-template-columns: 1fr;
  }
  .ts-footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  /* WC product grid: 2 columns on mobile */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem 1rem !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem !important;
    min-height: 2.52rem;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size: 0.9rem !important;
  }
  .ts-shop-filter-bar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

@media (max-width: 400px) {
  /* Very small screens: single column */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================================
   TARSIYA SHOP REDESIGN — PREMIUM EDITORIAL ENHANCEMENTS v3.0
   Added: 2026-09-24 via Antigravity IDE
   Purpose: View Product overlay, ADD TO BAG label, payment minimization
   ========================================================================== */

/* ── 1. "VIEW PRODUCT" Hover Overlay on Product Image ───────────────────── */
/*
   The .woocommerce-LoopProduct-link wraps the image AND the product title (h2).
   We use ::after on the image container only by constraining it to sit over
   the image portion. The image is at the top of the link.
   The overlay uses position:absolute bottom-0 so it reveals from the bottom
   of the image area, not the full card.
*/

.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link {
  /* Already position:relative in existing CSS; confirm overflow hidden */
  overflow: hidden !important;
}

/* Pseudo-element overlay DISABLED GLOBALLY */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link::after,
.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link::after,
.woocommerce ul.products li.product:hover .woocommerce-LoopProduct-link::after,
.woocommerce-page ul.products li.product:hover .woocommerce-LoopProduct-link::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ── 2. "ADD TO BAG" Button Label ──────────────────────────────────────── */
/*
   WooCommerce outputs: <a class="button add_to_cart_button">Add to cart</a>
   We use font-size: 0 to hide the native text and ::before to show our label.
   Functionality remains 100% intact — only the visible label changes.
*/

.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product a.add_to_cart_button {
  font-size: 0 !important;      /* Hide "Add to cart" text */
  line-height: 1 !important;
  gap: 0 !important;
}

.woocommerce ul.products li.product a.add_to_cart_button::before,
.woocommerce-page ul.products li.product a.add_to_cart_button::before {
  content: 'ADD TO BAG' !important;
  font-family: 'Montserrat', -apple-system, sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  color: inherit !important;
  display: block !important;
  text-transform: uppercase !important;
}

/* Preserve loading spinner functionality */
.woocommerce ul.products li.product a.add_to_cart_button.loading,
.woocommerce-page ul.products li.product a.add_to_cart_button.loading {
  /* WC appends a spinner via ::after; keep it visible */
  padding-right: 2.5em !important;
}

.woocommerce ul.products li.product a.add_to_cart_button.loading::before,
.woocommerce-page ul.products li.product a.add_to_cart_button.loading::before {
  content: 'ADDING...' !important;
}

.woocommerce ul.products li.product a.add_to_cart_button.added::before,
.woocommerce-page ul.products li.product a.add_to_cart_button.added::before {
  content: 'ADDED \2713' !important;
}

/* WooCommerce View cart link that appears after adding */
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product a.added_to_cart {
  display: block !important;
  text-align: center !important;
  font-family: var(--ts-font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ts-burgundy) !important;
  margin-top: 0.4rem !important;
  text-decoration: underline !important;
}

/* ── 3. Payment Info — Further Visual Minimization ─────────────────────── */
/*
   Existing CSS already sets payment divs to 0.72rem. We reduce further
   and add low opacity to deprioritize them below product name + price.
*/

.woocommerce ul.products li.product .price .product-price-installments-not-in-variation,
.woocommerce-page ul.products li.product .price .product-price-installments-not-in-variation {
  font-size: 0.65rem !important;  /* Reduced from 0.72rem */
  color: var(--ts-text-light) !important;    /* #A39995 — very muted */
  opacity: 0.85 !important;
  margin-top: 0.2rem !important;
}

/* Payment logo sizes — slightly smaller than existing 14px */
.woocommerce ul.products li.product .price .mintpay-logo,
.woocommerce-page ul.products li.product .price .mintpay-logo {
  height: 11px !important;
  max-height: 11px !important;
  opacity: 0.7 !important;
}

.woocommerce ul.products li.product .price .koko-logo,
.woocommerce-page ul.products li.product .price .koko-logo {
  height: 11px !important;
  max-height: 11px !important;
  opacity: 0.7 !important;
}

.woocommerce ul.products li.product .price .mintpay-info-icon,
.woocommerce-page ul.products li.product .price .mintpay-info-icon,
.woocommerce ul.products li.product .price .koko-info,
.woocommerce-page ul.products li.product .price .koko-info {
  height: 9px !important;
  width: 9px !important;
  max-height: 9px !important;
  max-width: 9px !important;
  opacity: 0.5 !important;
}

/* Hide payment info on very small screens to prevent overflow */
@media (max-width: 400px) {
  .woocommerce ul.products li.product .price .product-price-installments-not-in-variation,
  .woocommerce-page ul.products li.product .price .product-price-installments-not-in-variation {
    display: none !important;
  }
}

/* ── 4. Sorting Dropdown — Burgundy Typography Enhancement ──────────────── */

.woocommerce-ordering {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 1.5rem !important;
}

form.woocommerce-ordering select.orderby {
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ts-burgundy) !important;
  border-color: var(--ts-border) !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23411115' stroke-width='1.8' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: right 0.7rem center !important;
}

/* ── 5. Product Grid Gap Enhancement ────────────────────────────────────── */

.woocommerce ul.products,
.woocommerce-page ul.products {
  gap: 3.5rem 2.5rem !important;    /* More generous whitespace for editorial feel */
  margin-top: 1.5rem !important;
}

/* ── 6. Remove WooCommerce page-title duplicate heading ──────────────────── */

.ts-section .page-title,
.woocommerce .page-title,
.woocommerce-page .page-title {
  display: none !important;
}

/* ── 7. Card bottom padding for breathing room ───────────────────────────── */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  padding-bottom: 0.5rem !important;
}

/* ==========================================================================
   END TARSIYA SHOP REDESIGN ENHANCEMENTS v3.0
   ========================================================================== */


/* ==========================================================================
   TARSIYA MOBILE SHOP — CLEAN & SMOOTH v1.0
   Added: 2026-09-24
   Fixes: hover overlay clutter, gap spacing, payment info, touch layout
   ========================================================================== */

/* ── Tablet & Mobile shared fixes (≤ 900px) ───────────────────────────── */
@media (max-width: 900px) {

  /* Stacking & Body Scroll Lock for Open Drawer */
  body.ts-drawer-open,
  html.ts-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.ts-drawer-open .ts-header,
  .ts-header.is-drawer-open {
    z-index: 99999 !important;
  }

  /* Mobile Navigation Overlay (Dark backdrop covering remaining screen BEHIND drawer) */
  .ts-mobile-nav-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(23, 13, 12, 0.5) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 99990 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }

  .ts-mobile-nav-overlay.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Dedicated Mobile Navigation Panel (Slides in from LEFT side with solid ivory #FAF7F2 background) */
  .ts-nav-menu {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: 85% !important;
    max-width: 360px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-color: #FAF7F2 !important;
    background: #FAF7F2 !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 0 2.5rem !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease !important;
    box-shadow: none !important;
    border-right: 1px solid #DBD0C2 !important;
    border-top: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ts-nav-menu.is-active {
    transform: translateX(0) !important;
    visibility: visible !important;
    box-shadow: 14px 0 50px rgba(23, 13, 12, 0.32) !important;
  }

  /* Drawer Top Header with Close (X) Button */
  .ts-mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px 24px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  .ts-mobile-drawer-close {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #170D0C !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .ts-mobile-drawer-close:hover,
  .ts-mobile-drawer-close:focus {
    color: #411115 !important;
    background-color: rgba(219, 208, 194, 0.3) !important;
    transform: rotate(90deg);
  }

  /* Drawer Navigation Links Wrap */
  .ts-nav-links-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    flex-grow: 1 !important;
    border-top: 1px solid #DBD0C2 !important;
  }

  .ts-nav-menu a {
    font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 26px 24px !important;
    color: #170D0C !important;
    width: 100% !important;
    border-bottom: 1px solid #DBD0C2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: color 0.2s ease, padding-left 0.2s ease, background-color 0.2s ease !important;
  }

  .ts-nav-menu a::after {
    display: none !important; /* disable desktop underline */
  }

  .ts-nav-menu a:hover,
  .ts-nav-menu a:active,
  .ts-nav-menu a:focus {
    color: #411115 !important;
    padding-left: 28px !important;
    background-color: rgba(219, 208, 194, 0.15) !important;
  }

  .ts-nav-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8c827a !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  .ts-nav-menu a:hover .ts-nav-arrow {
    color: #411115 !important;
    transform: translateX(3px) !important;
  }

  /* Support for WordPress ul/li hierarchies and child menus */
  .ts-nav-menu ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .ts-nav-menu li {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ts-nav-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .ts-nav-menu .sub-menu {
    display: none !important;
    padding-left: 1rem !important;
    background: rgba(219, 208, 194, 0.15) !important;
    border-bottom: 1px solid #DBD0C2 !important;
  }

  .ts-nav-menu .menu-item-has-children.is-expanded > .sub-menu {
    display: flex !important;
  }

  .ts-nav-menu .sub-menu a {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(219, 208, 194, 0.4) !important;
  }

  .ts-mobile-toggle,
  button.ts-mobile-toggle,
  button.ts-icon-link.ts-mobile-toggle,
  #ts-mobile-menu-btn {
    display: inline-flex !important;
  }

  /* 1. DISABLE hover overlay on touch devices entirely.
        The ::after on .woocommerce-LoopProduct-link (which wraps image + title)
        causes the overlay to appear over the price area on small screens.
        Touch hover state also gets "stuck" on tap, showing it persistently. */
  .woocommerce ul.products li.product .woocommerce-LoopProduct-link::after,
  .woocommerce-page ul.products li.product .woocommerce-LoopProduct-link::after {
    display: none !important;
  }

  /* Card padding on tablet */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .ts-product-card {
    padding: 1rem !important;
  }

  /* 2. Remove the top margin added to products grid (eliminates the big gap) */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    margin-top: 0 !important;
    gap: 2.25rem 1.25rem !important;
  }

  /* 3. Reduce ordering section bottom margin */
  .woocommerce-ordering {
    margin-bottom: 0.5rem !important;
  }

  /* 4. Compact result count + ordering bar */
  .woocommerce-result-count {
    font-size: 0.78rem !important;
  }

  /* 5. Reduce title min-height so short titles don't leave dead space */
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    min-height: unset !important;
    font-size: 0.88rem !important;
    margin: 0.6rem 0 0.3rem 0 !important;
    line-height: 1.35 !important;
  }

  /* 6. Compact price */
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  /* 7. Compact ADD TO BAG button on tablet */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce-page ul.products li.product .add_to_cart_button {
    height: 42px !important;
    margin-top: 0.65rem !important;
    font-size: 0 !important;     /* keep font-size:0 so ::before label shows */
  }


}

/* ── Mobile (≤ 640px) ─────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Card padding on 2-column mobile */
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .ts-product-card {
    padding: 0.75rem !important;
    border-radius: 3px !important;
  }

  /* 2-column grid on mobile phones */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.75rem 0.85rem !important;
    margin-top: 0 !important;
  }

  /* Tighter title on small screens */
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.8rem !important;
    margin: 0.5rem 0 0.2rem 0 !important;
  }

  /* Price smaller on 2-col mobile */
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size: 0.78rem !important;
  }

  /* ADD TO BAG button — compact on mobile */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce-page ul.products li.product .add_to_cart_button {
    height: 36px !important;
    margin-top: 0.5rem !important;
    border-radius: 0 !important;
  }

  /* ADD TO BAG label smaller on 2-col */
  .woocommerce ul.products li.product a.add_to_cart_button::before,
  .woocommerce-page ul.products li.product a.add_to_cart_button::before {
    font-size: 0.52rem !important;
    letter-spacing: 0.1em !important;
  }

  /* HIDE payment installment info completely on mobile —
     it clutters 2-column small cards and breaks the layout */
  .woocommerce ul.products li.product .price .product-price-installments-not-in-variation,
  .woocommerce-page ul.products li.product .price .product-price-installments-not-in-variation {
    display: none !important;
  }

  /* Remove shop filter bar left/right padding that adds gap */
  .ts-shop-filter-bar {
    padding: 0.75rem 0 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Tighten the woocommerce-ordering row */
  .woocommerce-ordering,
  .woocommerce-result-count {
    margin-bottom: 0 !important;
  }

  /* Remove any excess spacing above the grid */
  .ts-catalog-area,
  .woocommerce,
  .woocommerce-page {
    padding-top: 0 !important;
  }

  /* Ensure shop header banner doesn't create dead space */
  .ts-shop-header {
    margin-bottom: 1.5rem !important;
  }
}

/* ── Very small screens (≤ 400px) — single column ───────────────────── */
@media (max-width: 400px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
    gap: 2rem 0 !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Single-column card: larger button */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce-page ul.products li.product .button,
  .woocommerce-page ul.products li.product .add_to_cart_button {
    height: 44px !important;
  }

  .woocommerce ul.products li.product a.add_to_cart_button::before,
  .woocommerce-page ul.products li.product a.add_to_cart_button::before {
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
  }
}

/* ==========================================================================
   END TARSIYA MOBILE SHOP FIXES v1.0
   ========================================================================== */

/* ==========================================================================
   TARSIYA CHECKOUT & CART ORDER SUMMARY — MOBILE SQUISHED TEXT FIX
   Fixes: iOS/WebKit flex collapse on .wc-block-components-order-summary-item__description
          and letter-by-letter vertical wrapping of product title and metadata
   ========================================================================== */

/* 1. Main Order Summary Line Item Container */
.wc-block-components-order-summary .wc-block-components-order-summary-item,
.wc-block-components-order-summary-item,
.wp-block-woocommerce-checkout-order-summary-cart-items-block .wc-block-components-order-summary-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 100% !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  box-sizing: border-box !important;
}

/* 2. Product Thumbnail & Quantity Badge */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image {
  flex: 0 0 54px !important;
  width: 54px !important;
  max-width: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.wc-block-components-order-summary-item__image > img,
.wc-block-components-order-summary-item__image img {
  width: 54px !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
}

/* 3. Product Description (Title, Unit Price, Metadata / Pre-order notice) —
      Takes full available middle space; never collapses to 1-character strip */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* 4. Product Name / Title in Order Summary */
.wc-block-components-order-summary .wc-block-components-product-name,
.wc-block-components-order-summary-item__description .wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-components-product-name {
  font-family: var(--ts-font-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--ts-text-heading) !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* 5. Product Metadata (Pre-order notice, variations, custom data) */
.wc-block-components-order-summary .wc-block-components-product-metadata,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 2px !important;
}

.wc-block-components-product-metadata .wc-block-components-product-metadata__description,
.wc-block-components-product-metadata .wc-block-components-product-metadata__description p,
.wc-block-components-product-metadata p,
.wc-block-components-order-summary-item__description p,
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata__item {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  color: var(--ts-text-muted) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 6. Total Price on the Right */
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-family: var(--ts-font-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ts-text-heading) !important;
}

/* 7. Individual unit price */
.wc-block-components-order-summary-item__individual-prices {
  font-size: 0.82rem !important;
  color: var(--ts-gold) !important;
  white-space: nowrap !important;
}

/* 8. Classic WooCommerce Checkout Review Table Fallback */
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table th.product-name {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

.woocommerce-checkout-review-order-table .product-name dl.variation,
.woocommerce-checkout-review-order-table .product-name p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   TARSIYA — WooCommerce Premium Editorial Redesign
   Version: 3.0.0
   Philosophy: Premium Sri Lankan fashion label / editorial fashion e-commerce
   ========================================================================== */

/* ============================================================
   SPACING SYSTEM (consistent scale across all components)
   ============================================================ */
:root {
  --ts-sp-4:  4px;
  --ts-sp-8:  8px;
  --ts-sp-12: 12px;
  --ts-sp-16: 16px;
  --ts-sp-24: 24px;
  --ts-sp-32: 32px;
  --ts-sp-48: 48px;
  --ts-sp-64: 64px;
  --ts-sp-80: 80px;

  /* Product page specific */
  --ts-product-section-gap: 56px;
  --ts-product-control-gap: 14px;
  --ts-product-inner-gap:   20px;

  /* Gallery column split */
  --ts-gallery-width:  58%;
  --ts-summary-width:  42%;
}

/* ============================================================
   WOOCOMMERCE CONTAINER & PAGE WRAPPER
   ============================================================ */
.ts-woocommerce-container {
  padding-top: 0;
}

/* Single product: remove default WC margin top */
.woocommerce div.product {
  margin-top: 0 !important;
}

/* ============================================================
   1. SINGLE PRODUCT — TWO-COLUMN EDITORIAL LAYOUT
   ============================================================ */
.woocommerce div.product {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding-top: var(--ts-sp-32);
  padding-bottom: var(--ts-sp-80);
  position: relative !important;
}

/* Gallery occupies left column (53% width, non-sticky, natural scroll) */
.woocommerce div.product .woocommerce-product-gallery {
  width: 53% !important;
  max-width: 53% !important;
  flex: 0 0 53% !important;
  position: relative !important;
  top: auto !important;
  margin: 0 0 var(--ts-sp-48) 0 !important;
  z-index: 1;
}

/* Summary occupies right column (43% width) */
.woocommerce div.product .summary.entry-summary {
  width: 43% !important;
  max-width: 43% !important;
  flex: 0 0 43% !important;
  position: relative !important;
  margin: 0 0 var(--ts-sp-48) 0 !important;
  z-index: 1;
}

/* WooCommerce tabs span full width cleanly below both columns */
.woocommerce div.product .woocommerce-tabs {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  margin-top: var(--ts-sp-48) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Related products span full width below tabs */
.woocommerce div.product .related.products {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  clear: both !important;
  margin-top: var(--ts-sp-64) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Clear WooCommerce default floats */
.woocommerce div.product::after,
.woocommerce div.product::before {
  display: none !important;
}

.woocommerce div.product .clear {
  display: none;
}

/* ============================================================
   2. PRODUCT GALLERY — Editorial image presentation
   ============================================================ */
.woocommerce-product-gallery {
  position: relative !important;
  top: auto !important;
  background: transparent;
  overflow: visible;
}

/* Remove WooCommerce's default opacity animation flash */
.woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
}

/* Main image wrapper */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

/* Primary image — full-width, no crop, editorial */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--ts-bg-alt);
}

.woocommerce-product-gallery .woocommerce-product-gallery__image a {
  display: block;
  width: 100%;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center top;
  max-height: 760px;
  background: var(--ts-bg-alt);
}

/* FlexSlider / Gallery thumbnails */
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery .flex-control-thumbs {
  margin-top: 14px !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
}

.woocommerce-product-gallery .flex-control-nav li,
.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 auto !important;
  width: 76px !important;
  height: 102px !important;
  overflow: hidden !important;
  border: 1.5px solid var(--ts-border-subtle) !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: var(--ts-bg-alt) !important;
}

.woocommerce-product-gallery .flex-control-nav li img,
.woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  opacity: 0.8 !important;
  transition: all 0.2s ease !important;
}

.woocommerce-product-gallery .flex-control-nav li:hover img,
.woocommerce-product-gallery .flex-control-thumbs li:hover img,
.woocommerce-product-gallery .flex-control-nav li.flex-active img,
.woocommerce-product-gallery .flex-control-thumbs li.flex-active img {
  opacity: 1 !important;
}

.woocommerce-product-gallery .flex-control-nav li:hover,
.woocommerce-product-gallery .flex-control-thumbs li:hover {
  border-color: var(--ts-espresso) !important;
}

.woocommerce-product-gallery .flex-control-nav li.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li.flex-active {
  border: 2px solid var(--ts-burgundy) !important;
  box-shadow: 0 2px 8px rgba(65, 17, 21, 0.15) !important;
}

/* Remove WooCommerce product gallery trigger button default styling */
.woocommerce-product-gallery__trigger {
  display: none;
}

/* ============================================================
   3. PRODUCT SUMMARY COLUMN — Controlled vertical rhythm
   ============================================================ */
.summary.entry-summary {
  padding-top: 4px; /* Optical alignment with image top */
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================================
   4. PRODUCT TITLE — Editorial serif typography
   ============================================================ */
.woocommerce div.product .product_title {
  font-family: var(--ts-font-serif) !important;
  font-size: 2.25rem !important;   /* ~36px */
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  color: var(--ts-espresso) !important;
  margin: 0 0 var(--ts-sp-24) 0 !important;
  padding: 0 !important;
}

/* ============================================================
   5. PRICE — Clean hierarchy, strong main price
   ============================================================ */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: block;
  font-family: var(--ts-font-sans) !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  color: var(--ts-espresso) !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 var(--ts-sp-8) 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  border: none !important;
}

.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ts-espresso);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  opacity: 0.45;
  font-size: 0.9rem;
  font-weight: 400;
  margin-right: 6px;
}

.woocommerce div.product p.price ins {
  text-decoration: none;
  font-weight: 600;
  color: var(--ts-burgundy);
}

/* ============================================================
   5b. PAYMENT INSTALLMENT INFO (Mintpay / KOKO)
       — subordinated secondary styling
   ============================================================ */
.product-price-installments-not-in-variation-single,
.product-price-installments-not-in-variation {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.7rem !important;
  color: var(--ts-text-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 var(--ts-sp-4) 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

/* Override inline styles on payment info containers */
p.price > div[style*="font-size: 18px"],
p.price > div[style*="font-size:18px"],
p.price > div[style*="font-size: 13px"],
p.price > div[style*="font-size:13px"],
.price > div[class*="product-price-installments"] {
  font-size: 0.7rem !important;
  color: var(--ts-text-muted) !important;
  line-height: 1.5 !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

/* Payment info bold amounts */
.product-price-installments-not-in-variation-single b,
.product-price-installments-not-in-variation b,
p.price > div b {
  font-weight: 500 !important;
  color: var(--ts-text-muted) !important;
}

/* Mintpay logo sizing */
.mintpay-logo {
  height: 14px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* KOKO logo sizing */
.koko-logo {
  height: 14px !important;
  width: auto !important;
  vertical-align: middle !important;
}

/* Mintpay info icon */
.mintpay-info-icon {
  height: 10px !important;
  width: auto !important;
  opacity: 0.6;
}

/* Wrapper for the price block including installments */
.woocommerce div.product p.price {
  padding-bottom: var(--ts-sp-16);
  border-bottom: 1px solid var(--ts-border-subtle);
  margin-bottom: var(--ts-sp-20) !important;
}

/* ============================================================
   6. SHORT DESCRIPTION
   ============================================================ */
.woocommerce-product-details__short-description {
  font-family: var(--ts-font-sans);
  font-size: 0.85rem;
  color: var(--ts-text-body);
  line-height: 1.75;
  margin: 0 0 var(--ts-sp-24) 0;
}

.woocommerce-product-details__short-description p {
  margin: 0 0 0.5em 0;
}

/* ============================================================
   7. VARIATION FORM — Premium editorial selectors
   ============================================================ */
.woocommerce div.product form.cart.variations_form {
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--ts-product-control-gap);
}

/* Variations table: convert from table to flex stack */
.woocommerce div.product .variations {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ts-product-control-gap) !important;
  width: 100% !important;
  border: none !important;
  margin-bottom: var(--ts-sp-4) !important;
}

.woocommerce div.product .variations tbody,
.woocommerce div.product .variations tr {
  display: block !important;
  width: 100% !important;
}

.woocommerce div.product .variations tr {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Variation label */
.woocommerce div.product .variations .label {
  display: block !important;
  padding: 0 !important;
  text-align: left !important;
  vertical-align: top !important;
  width: 100% !important;
}

.woocommerce div.product .variations .label label {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted) !important;
  display: block;
  margin-bottom: 6px;
}

/* Variation value cell */
.woocommerce div.product .variations .value {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* ============================================================
   7b. COLOUR IMAGE SWATCHES — Luxury Editorial Swatches
   ============================================================ */
/* Hide the default WooCommerce colour select */
.woocommerce div.product .variations tr.ts-has-swatches select[name="attribute_colour"],
.woocommerce div.product .variations tr.ts-has-swatches select[name="attribute_color"],
.woocommerce div.product .variations tr.ts-has-swatches select[data-attribute_name="attribute_colour"],
.woocommerce div.product .variations tr.ts-has-swatches select[data-attribute_name="attribute_color"],
.woocommerce div.product .variations tr:has(.ts-colour-swatches) select {
  display: none !important;
}

/* Hide table label when swatches wrapper provides its own header */
.woocommerce div.product .variations tr.ts-has-swatches .label {
  display: none !important;
}

.ts-colour-swatches-wrapper {
  margin: 0 0 var(--ts-sp-16) 0;
  width: 100%;
}

.ts-colour-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--ts-font-sans);
}

.ts-colour-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-text-muted);
}

.ts-selected-colour-value {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ts-burgundy);
  text-transform: capitalize;
}

.ts-colour-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ts-colour-swatch {
  width: 68px;
  height: 90px;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--ts-border-subtle);
  border-radius: 2px;
  background: var(--ts-bg-alt);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(0.2, 0, 0.2, 1);
  outline: none;
  box-shadow: 0 1px 3px rgba(23, 13, 12, 0.04);
}

.ts-colour-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.25s ease;
}

.ts-colour-swatch:hover {
  border-color: var(--ts-espresso);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(23, 13, 12, 0.08);
}

.ts-colour-swatch:hover img {
  transform: scale(1.04);
}

/* Selected state - luxury burgundy border matching screenshot */
.ts-colour-swatch.ts-colour-swatch--selected {
  border: 2px solid var(--ts-burgundy) !important;
  outline: 2px solid rgba(65, 17, 21, 0.18) !important;
  outline-offset: 2px !important;
  box-shadow: 0 2px 10px rgba(65, 17, 21, 0.16) !important;
}

.ts-colour-swatch.ts-colour-swatch--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
}

.ts-colour-swatch--text {
  font-family: var(--ts-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ts-espresso);
  padding: 8px 12px;
  width: auto;
  height: 40px;
}

/* Reset link in variations */
.woocommerce div.product .variations .reset_variations {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted) !important;
  text-decoration: underline !important;
  margin-top: 4px !important;
  display: inline-block !important;
}

/* ============================================================
   8. SIZE SELECTOR — Premium visual button grid
       (Syncs with the hidden WC select via JS)
   ============================================================ */
/* Hide the actual size select (still functional for WC) */
.woocommerce div.product .variations tr.ts-has-swatches select[name="attribute_size"],
.woocommerce div.product .variations tr.ts-has-swatches select[data-attribute_name="attribute_size"],
.woocommerce div.product .variations tr:has(.ts-size-buttons) select {
  display: none !important;
}

/* Size buttons container (injected by JS) */
.ts-size-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-sp-8);
  margin-top: 2px;
}

.ts-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 42px;
  padding: 0 12px;
  font-family: var(--ts-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-espresso);
  background-color: var(--ts-bg-main);
  border: 1px solid var(--ts-champagne);
  border-radius: var(--ts-radius-sm);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}

.ts-size-btn:hover:not(.ts-size-btn--disabled) {
  border-color: var(--ts-burgundy);
  color: var(--ts-burgundy);
}

.ts-size-btn--selected {
  background-color: var(--ts-burgundy) !important;
  color: var(--ts-ivory) !important;
  border-color: var(--ts-burgundy) !important;
}

.ts-size-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ============================================================
   9. QUANTITY CONTROL — Compact premium stepper
   ============================================================ */
.woocommerce div.product .quantity {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  max-width: 120px !important;
}

/* Hide default number input spinners */
.woocommerce div.product .quantity .input-text.qty {
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 48px !important;
  height: 50px !important;
  border: 1px solid var(--ts-champagne) !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: var(--ts-bg-main) !important;
  font-family: var(--ts-font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--ts-espresso) !important;
  text-align: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.woocommerce div.product .quantity .input-text.qty::-webkit-inner-spin-button,
.woocommerce div.product .quantity .input-text.qty::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Quantity stepper buttons (injected by JS) */
.ts-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 50px !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--ts-espresso) !important;
  background: var(--ts-bg-main) !important;
  border: 1px solid var(--ts-champagne) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.ts-qty-btn:first-child {
  border-radius: var(--ts-radius-sm) 0 0 var(--ts-radius-sm) !important;
}

.ts-qty-btn:last-child {
  border-radius: 0 var(--ts-radius-sm) var(--ts-radius-sm) 0 !important;
}

.ts-qty-btn:hover {
  background: var(--ts-ivory) !important;
  border-color: var(--ts-espresso) !important;
}

/* ============================================================
   10. ADD TO CART BUTTON — Primary TARSIYA CTA
   ============================================================ */
/* Quantity + Add to cart inline row */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product .cart:not(.variations_form):not(.grouped_form) {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--ts-sp-12) !important;
  margin-top: var(--ts-sp-16) !important;
}

.single_variation_wrap .woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--ts-sp-12) !important;
}

.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button.single_add_to_cart_button {
  flex: 1 1 auto !important;
  height: 50px !important;
  padding: 0 var(--ts-sp-24) !important;
  font-family: var(--ts-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ts-ivory) !important;
  background-color: var(--ts-burgundy) !important;
  border: 1px solid var(--ts-burgundy) !important;
  border-radius: var(--ts-radius-sm) !important;
  cursor: pointer !important;
  transition: background-color 0.22s ease, border-color 0.22s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.woocommerce div.product .single_add_to_cart_button:hover:not(:disabled),
.woocommerce div.product button.single_add_to_cart_button:hover:not(:disabled) {
  background-color: var(--ts-burgundy-hover) !important;
  border-color: var(--ts-burgundy-hover) !important;
  color: #FFFFFF !important;
}

.woocommerce div.product .single_add_to_cart_button:disabled,
.woocommerce div.product button.single_add_to_cart_button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ============================================================
   11. VARIATION STOCK / PRICE update area
   ============================================================ */
.woocommerce div.product .woocommerce-variation {
  min-height: auto !important;
  margin-bottom: var(--ts-sp-8) !important;
  padding: 0 !important;
}

.woocommerce div.product .woocommerce-variation .price {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--ts-espresso) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce div.product .woocommerce-variation .stock.in-stock {
  font-family: var(--ts-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a7a5a;
  margin: 0;
}

.woocommerce div.product .woocommerce-variation .stock.out-of-stock {
  font-family: var(--ts-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-burgundy);
  margin: 0;
}

/* ============================================================
   12. SKU / CATEGORY META
   ============================================================ */
.woocommerce div.product .product_meta {
  margin-top: var(--ts-sp-24) !important;
  padding-top: var(--ts-sp-16) !important;
  border-top: 1px solid var(--ts-border-subtle) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  font-family: var(--ts-font-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-light) !important;
}

/* Label part */
.woocommerce div.product .product_meta .sku_wrapper::before {
  content: 'SKU';
  font-weight: 700;
  color: var(--ts-text-muted);
  min-width: 60px;
  flex-shrink: 0;
}

.woocommerce div.product .product_meta .posted_in::before {
  content: 'CATEGORY';
  font-weight: 700;
  color: var(--ts-text-muted);
  min-width: 60px;
  flex-shrink: 0;
}

/* Remove "SKU: " and "Category: " text from before the value */
.woocommerce div.product .product_meta .sku_wrapper > *:not(.sku),
.woocommerce div.product .product_meta .posted_in > *:not(a),
.woocommerce div.product .product_meta .sku_wrapper:not(:has(.sku)) {
  display: inline;
}

/* SKU value */
.woocommerce div.product .product_meta .sku {
  font-weight: 400 !important;
  color: var(--ts-text-muted) !important;
}

/* Category links */
.woocommerce div.product .product_meta .posted_in a,
.woocommerce div.product .product_meta .tagged_as a {
  font-weight: 400 !important;
  color: var(--ts-text-muted) !important;
  text-decoration: none !important;
}

.woocommerce div.product .product_meta .posted_in a:hover,
.woocommerce div.product .product_meta .tagged_as a:hover {
  color: var(--ts-burgundy) !important;
}

/* ============================================================
   13. PRODUCT TABS — Minimal editorial treatment
   ============================================================ */
.woocommerce-tabs {
  border-top: 1px solid var(--ts-border) !important;
}

.woocommerce-tabs .tabs.wc-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-bottom: 1px solid var(--ts-border-subtle) !important;
  background: transparent !important;
}

.woocommerce-tabs .tabs.wc-tabs::before {
  display: none !important;
}

.woocommerce-tabs .tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  position: relative;
}

.woocommerce-tabs .tabs li a {
  display: block !important;
  padding: var(--ts-sp-16) var(--ts-sp-24) !important;
  font-family: var(--ts-font-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color 0.18s ease !important;
  position: relative !important;
}

.woocommerce-tabs .tabs li a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: var(--ts-sp-24);
  right: var(--ts-sp-24);
  height: 2px;
  background: var(--ts-burgundy);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.woocommerce-tabs .tabs li.active a {
  color: var(--ts-burgundy) !important;
  background: transparent !important;
}

.woocommerce-tabs .tabs li.active a::after {
  opacity: 1 !important;
}

.woocommerce-tabs .tabs li a:hover {
  color: var(--ts-burgundy) !important;
}

/* Tab panels */
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: var(--ts-sp-32) 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  max-width: 720px;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-family: var(--ts-font-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--ts-espresso) !important;
  margin-bottom: var(--ts-sp-16) !important;
  letter-spacing: 0.02em;
}

.woocommerce-tabs .woocommerce-Tabs-panel p,
.woocommerce-tabs .woocommerce-Tabs-panel li {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.88rem !important;
  line-height: 1.8 !important;
  color: var(--ts-text-body) !important;
}

/* ============================================================
   14. ADDITIONAL INFORMATION TABLE — Editorial redesign
   ============================================================ */
.woocommerce-product-attributes {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
}

.woocommerce-product-attributes tr {
  border-bottom: 1px solid var(--ts-border-subtle) !important;
}

.woocommerce-product-attributes tr:first-child {
  border-top: 1px solid var(--ts-border-subtle) !important;
}

.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted) !important;
  padding: var(--ts-sp-12) var(--ts-sp-24) var(--ts-sp-12) 0 !important;
  width: 120px !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
}

.woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
  font-family: var(--ts-font-sans) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--ts-text-body) !important;
  padding: var(--ts-sp-12) 0 !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
}

.woocommerce-product-attributes td p {
  margin: 0 !important;
}

/* ============================================================
   15. RELATED PRODUCTS — Editorial grid
   ============================================================ */
/* ============================================================
   15. RELATED PRODUCTS — Editorial 4-column grid
   ============================================================ */
/* Disable ::before and ::after pseudo-elements on product grids to prevent ghost grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce div.product .related.products ul.products::before,
.woocommerce div.product .related.products ul.products::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.woocommerce div.product .related.products {
  width: 100% !important;
  margin-top: var(--ts-sp-64) !important;
  padding-top: var(--ts-sp-48) !important;
  border-top: 1px solid var(--ts-border-subtle) !important;
  clear: both !important;
}

.woocommerce div.product .related.products > h2 {
  font-family: var(--ts-font-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--ts-espresso) !important;
  margin-bottom: var(--ts-sp-32) !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
}

.woocommerce div.product .related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--ts-sp-32) var(--ts-sp-24) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}


/* ==========================================================================
   TARSIYA PREMIUM WOOCOMMERCE CATALOG REDESIGN (Shop, New Arrivals & Archives)
   ========================================================================== */

/* 1. Expand Catalog Container to Allocate Maximum Width to Product Cards */
.woocommerce-shop .container,
.woocommerce-page .container,
.post-type-archive-product .container,
.tax-product_cat .container,
.page-template-template-new-arrivals .container {
  max-width: 1540px !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 2. Proportionate Filter Sidebar & Catalog Layout */
.ts-shop-layout {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 2rem !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ts-filter-sidebar {
  width: 220px !important;
  max-width: 220px !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
}

/* 3. Four-Column Product Grid with 16px Gaps */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .products.columns-4,
.woocommerce-page .products.columns-4,
ul.products.columns-4,
.ts-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem 1rem !important; /* 16px horizontal gap, 20px vertical gap */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 3rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}

/* 4. Product Card Container (Ivory #FAF7F2, Subtle Champagne Border #DBD0C2, 12-14px Padding) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.ts-product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  background-color: #FAF7F2 !important; /* Ivory background */
  border: 1px solid #DBD0C2 !important; /* Champagne subtle border */
  border-radius: 4px !important;
  padding: 12px 14px 14px 14px !important; /* 12-14px inner card padding */
  box-sizing: border-box !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  text-align: left !important;
  box-shadow: 0 2px 8px rgba(23, 13, 12, 0.02) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  position: relative !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
.ts-product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(23, 13, 12, 0.07) !important;
  border-color: #411115 !important; /* Burgundy accent border on hover */
}

/* Wishlist Heart Icon (Top-right corner of card image, matching reference mockup) */
.woocommerce ul.products li.product::after,
.ts-product-card::after {
  content: '♡' !important;
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(250, 247, 242, 0.92) !important;
  border: 1px solid rgba(219, 208, 194, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: #170D0C !important;
  line-height: 28px !important;
  text-align: center !important;
  z-index: 3 !important;
  pointer-events: none !important;
  box-shadow: 0 1px 4px rgba(23, 13, 12, 0.06) !important;
  transition: all 0.2s ease !important;
}

/* 5. Product Link / Info Container (Flex-grow so CTA button locks to bottom)
   CRITICAL: ONLY match direct top-level child anchor to prevent breaking nested payment links */
.woocommerce ul.products li.product > .woocommerce-LoopProduct-link:first-child,
.woocommerce ul.products li.product > a:first-child,
.ts-product-card .ts-product-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  text-decoration: none !important;
  color: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
}

/* 6. Product Image (Same dimensions, top position, strictly 3:4 portrait ratio, non-distorted) */
.woocommerce ul.products li.product > .woocommerce-LoopProduct-link:first-child > img,
.woocommerce ul.products li.product > a:first-child > img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.ts-product-card .ts-product-thumb-wrap,
.ts-product-card .ts-product-thumb-wrap img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 3px !important;
  display: block !important;
  background-color: #F5EFE6 !important;
  margin: 0 0 12px 0 !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product:hover > .woocommerce-LoopProduct-link:first-child > img,
.ts-product-card:hover .ts-product-thumb-wrap img {
  transform: scale(1.025) !important;
}

/* 7. Product Title (Source Serif 4, Left-Aligned, Two-line clamp, 12px spacing from image) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.ts-product-card .ts-product-title,
.ts-product-card .ts-product-title a {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  color: #170D0C !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  margin: 12px 0 6px 0 !important; /* 12px vertical spacing between bottom of product image and dress name */
  padding: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  min-height: 2.7em !important; /* Reserved height so 1-line or 2-line titles never displace prices */
  max-height: 2.7em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hide stray <br> elements inside li.product and inside price */
.woocommerce ul.products li.product > br,
.woocommerce-page ul.products li.product > br,
.ts-product-card > br,
.woocommerce ul.products li.product .price > br,
.ts-product-card .ts-product-price > br {
  display: none !important;
}

/* 8. Full Product Price with Burgundy Accent */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.ts-product-card .ts-product-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce-page ul.products li.product .price .woocommerce-Price-amount,
.ts-product-card .ts-product-price .woocommerce-Price-amount,
.ts-product-card .ts-product-price > span:first-child {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #411115 !important; /* Burgundy Price Accent matching brand and reference */
  letter-spacing: 0.02em !important;
  display: block !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
}

/* 9. Mintpay & KOKO Installment Rows (Single Row Each, Compact, Aligned, Zero Wrap Spillage) */
/* Reset any nested anchors inside installment widgets to inline-flex flow */
.woocommerce ul.products li.product .product-price-installments-not-in-variation a,
.woocommerce ul.products li.product .product-price-installments-not-in-variation a.woocommerce-LoopProduct-link {
  display: inline-flex !important;
  flex-direction: row !important;
  flex: 0 0 auto !important;
  width: auto !important;
  align-items: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .product-price-installments-not-in-variation,
.woocommerce-page ul.products li.product .product-price-installments-not-in-variation,
.ts-product-card .product-price-installments-not-in-variation,
.woocommerce ul.products li.product .price div.product-price-installments-not-in-variation,
.ts-product-card .ts-product-price div.product-price-installments-not-in-variation {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  text-align: left !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 400 !important;
  color: #786E6B !important;
  line-height: 1.3 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 17px !important;
  max-height: 19px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.woocommerce ul.products li.product .product-price-installments-not-in-variation:first-of-type,
.woocommerce-page ul.products li.product .product-price-installments-not-in-variation:first-of-type,
.ts-product-card .product-price-installments-not-in-variation:first-of-type {
  margin: 0 0 4px 0 !important;
}

.woocommerce ul.products li.product .product-price-installments-not-in-variation:last-of-type,
.woocommerce-page ul.products li.product .product-price-installments-not-in-variation:last-of-type,
.ts-product-card .product-price-installments-not-in-variation:last-of-type {
  margin: 0 0 12px 0 !important; /* 12px breathing room before Add to Bag button */
}

.woocommerce ul.products li.product .product-price-installments-not-in-variation b,
.ts-product-card .product-price-installments-not-in-variation b {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: #170D0C !important;
  margin: 0 2px !important;
}

/* Mintpay Logo */
.woocommerce ul.products li.product .mintpay-logo,
.ts-product-card .mintpay-logo,
img.mintpay-logo {
  height: 12px !important;
  max-height: 12px !important;
  width: auto !important;
  max-width: 48px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 2px 0 3px !important;
  object-fit: contain !important;
  position: static !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* Mintpay Info Icon */
.woocommerce ul.products li.product .mintpay-info-icon,
.ts-product-card .mintpay-info-icon,
img.mintpay-info-icon {
  height: 11px !important;
  max-height: 11px !important;
  width: 11px !important;
  max-width: 11px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 2px !important;
  opacity: 0.75 !important;
  cursor: pointer !important;
  position: static !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* KOKO Logo */
.woocommerce ul.products li.product .koko-logo,
.ts-product-card .koko-logo,
img.koko-logo {
  height: 12px !important;
  max-height: 12px !important;
  width: auto !important;
  max-width: 42px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 0 0 3px !important;
  object-fit: contain !important;
  position: static !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* 10. Add to Bag Button (Solid Burgundy #411115 Background, Ivory Text, Aligned at Bottom) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.ts-product-card .button,
.ts-product-card a.button,
.ts-product-card a.add_to_cart_button,
.ts-product-card .ts-product-add-to-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin-top: auto !important; /* Guarantees strict bottom alignment across rows */
  margin-bottom: 0 !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
  background-color: #411115 !important; /* Solid burgundy brand accent */
  border: 1px solid #411115 !important;
  border-radius: 3px !important;
  color: #FAF7F2 !important; /* Ivory text */
  font-size: 0 !important; /* Hide native WC label */
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 2px 6px rgba(65, 17, 21, 0.15) !important;
}

.woocommerce ul.products li.product .button::before,
.woocommerce ul.products li.product a.button::before,
.woocommerce ul.products li.product a.add_to_cart_button::before,
.ts-product-card .button::before,
.ts-product-card a.button::before,
.ts-product-card a.add_to_cart_button::before,
.ts-product-card .ts-product-add-to-cart::before {
  content: 'ADD TO BAG' !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #FAF7F2 !important;
  pointer-events: none !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.ts-product-card .button:hover,
.ts-product-card a.button:hover,
.ts-product-card a.add_to_cart_button:hover,
.ts-product-card .ts-product-add-to-cart:hover {
  background-color: #2D0C0E !important; /* Deep dark burgundy on hover */
  border-color: #2D0C0E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(65, 17, 21, 0.25) !important;
}

.woocommerce ul.products li.product .button:active,
.ts-product-card .button:active {
  transform: scale(0.98) !important;
}

/* 11. Responsive Breakpoints */
@media (max-width: 1024px) {
  .ts-shop-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .ts-filter-sidebar {
    display: none !important;
  }
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products.columns-4,
  .woocommerce-page .products.columns-4,
  ul.products.columns-4,
  .ts-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem 1rem !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .ts-product-card {
    padding: 12px !important;
  }
}

@media (max-width: 768px) {
  .ts-shop-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .ts-filter-sidebar {
    display: none !important;
  }
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .woocommerce .products.columns-4,
  .woocommerce-page .products.columns-4,
  ul.products.columns-4,
  .ts-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem 0.65rem !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product,
  .ts-product-card {
    padding: 9px 8px !important; /* Compact mobile padding to give maximum room for installments */
    border-radius: 4px !important;
  }
  .woocommerce ul.products li.product::after,
  .ts-product-card::after {
    top: 15px !important;
    right: 14px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 11px !important;
  }
  .woocommerce ul.products li.product > .woocommerce-LoopProduct-link:first-child > img,
  .woocommerce ul.products li.product > a:first-child > img,
  .woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
  .ts-product-card .ts-product-thumb-wrap img {
    margin-bottom: 0 !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
  .ts-product-card .ts-product-title,
  .ts-product-card .ts-product-title a {
    font-size: 0.88rem !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
    margin: 10px 0 4px 0 !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price,
  .ts-product-card .ts-product-price {
    min-height: auto !important;
    margin-bottom: 5px !important;
  }
  .woocommerce ul.products li.product .price .woocommerce-Price-amount,
  .woocommerce-page ul.products li.product .price .woocommerce-Price-amount,
  .ts-product-card .ts-product-price .woocommerce-Price-amount {
    font-size: 0.84rem !important;
    margin-bottom: 0 !important;
  }
  .woocommerce ul.products li.product .product-price-installments-not-in-variation,
  .woocommerce-page ul.products li.product .product-price-installments-not-in-variation,
  .ts-product-card .product-price-installments-not-in-variation {
    font-size: 0.54rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    min-height: 14px !important;
    max-height: 16px !important;
  }
  .woocommerce ul.products li.product .product-price-installments-not-in-variation:last-of-type,
  .woocommerce-page ul.products li.product .product-price-installments-not-in-variation:last-of-type,
  .ts-product-card .product-price-installments-not-in-variation:last-of-type {
    margin-bottom: 10px !important; /* 10px breathing room before button on mobile */
  }
  .woocommerce ul.products li.product .mintpay-logo,
  .ts-product-card .mintpay-logo,
  img.mintpay-logo {
    width: 32px !important;
    height: 10px !important;
    max-width: 32px !important;
    max-height: 10px !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
  }
  .woocommerce ul.products li.product .mintpay-info-icon,
  .ts-product-card .mintpay-info-icon,
  img.mintpay-info-icon {
    display: none !important; /* Hide tiny info icon on mobile to prevent overflow */
  }
  .woocommerce ul.products li.product .koko-logo,
  .ts-product-card .koko-logo,
  img.koko-logo {
    width: 30px !important;
    height: 10px !important;
    max-width: 30px !important;
    max-height: 10px !important;
    flex-shrink: 0 !important;
    margin: 0 0 0 3px !important;
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button,
  .ts-product-card .button,
  .ts-product-card .ts-product-add-to-cart {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 3px !important;
  }
}


/* ============================================================
   18. PayPal / PPC button wrapper — subordinate
   ============================================================ */
.ppc-button-wrapper {
  margin-bottom: var(--ts-sp-8) !important;
}

/* ============================================================
   19. WooCommerce notices — clean styling
   ============================================================ */
.woocommerce-notices-wrapper {
  grid-column: 1 / -1 !important;
  margin-bottom: var(--ts-sp-16) !important;
}

/* ============================================================
   20. RESPONSIVE — Tablet (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --ts-gallery-width: 52%;
    --ts-summary-width: 48%;
  }

  .woocommerce div.product {
    gap: 0 var(--ts-sp-48);
  }

  .woocommerce div.product .product_title {
    font-size: 1.9rem !important;
  }

  .woocommerce div.product .related.products ul.products,
  .woocommerce .products.columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .woocommerce .products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   21. RESPONSIVE — Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --ts-sp-48: 32px;
    --ts-sp-64: 40px;
    --ts-sp-80: 48px;
  }

  /* Stack product layout */
  .woocommerce div.product {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ts-sp-32) !important;
    padding-top: var(--ts-sp-24) !important;
  }

  /* Gallery full width */
  .woocommerce div.product .woocommerce-product-gallery {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }

  .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    max-height: 520px !important;
    object-fit: contain !important;
    width: 100% !important;
  }

  /* Summary full width */
  .woocommerce div.product .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce div.product .product_title {
    font-size: 1.65rem !important;
  }

  /* Related products */
  .woocommerce div.product .related.products ul.products,
  .woocommerce .products.columns-4,
  .woocommerce .products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--ts-sp-24) var(--ts-sp-12) !important;
  }

  .woocommerce-tabs .tabs li a {
    padding: var(--ts-sp-12) var(--ts-sp-16) !important;
    font-size: 0.65rem !important;
  }

  .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: var(--ts-sp-24) 0 !important;
  }

  /* Size buttons */
  .ts-size-btn {
    min-width: 42px;
    height: 38px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  /* Add to cart row */
  .single_variation_wrap .woocommerce-variation-add-to-cart {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
   22. MOBILE — Small phones (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .woocommerce div.product .product_title {
    font-size: 1.45rem !important;
  }

  .woocommerce div.product .related.products > h2 {
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   23. PREVENT HORIZONTAL OVERFLOW
   ============================================================ */
.woocommerce,
.woocommerce-page {
  overflow-x: hidden;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  max-width: 100%;
  overflow: hidden;
}

/* ============================================================
   24. UTILITY — Fix default WooCommerce overrides
   ============================================================ */

/* Remove WooCommerce default add to cart green */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--ts-burgundy) !important;
  color: var(--ts-ivory) !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--ts-burgundy-hover) !important;
}

/* Remove WooCommerce's default widget-style on breadcrumbs */
.woocommerce-breadcrumb {
  font-family: var(--ts-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-text-light);
  margin-bottom: var(--ts-sp-24) !important;
  grid-column: 1 / -1;
  padding: 0 !important;
}

.woocommerce-breadcrumb a {
  color: var(--ts-text-muted);
}

.woocommerce-breadcrumb a:hover {
  color: var(--ts-burgundy);
}

/* Fix small-screen WC overrides */
@media (max-width: 768px) {
  .woocommerce-smallscreen-view {
    display: none !important;
  }
}



/* ==========================================================================
   TARSIYA HERO SLIDESHOW CONTROLS & DYNAMIC THEME SYSTEM
   ========================================================================== */

.ts-hero-indicator {
  background: none;
  border: none;
  padding: 0.25rem 0.45rem;
  font-family: var(--ts-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ts-text-muted);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
  line-height: 1;
}

.ts-hero-indicator:hover {
  color: var(--ts-burgundy);
}

.ts-hero-indicator.is-active {
  color: var(--ts-burgundy);
  font-weight: 700;
}

.ts-hero-indicator.is-active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 20%;
  right: 20%;
  height: 2px;
  background-color: var(--ts-gold);
  border-radius: 1px;
}

.ts-hero-arrows {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.65rem;
  border-left: 1px solid var(--ts-border-subtle);
  padding-left: 0.65rem;
}

.ts-hero-arrow-btn {
  background: none;
  border: none;
  color: var(--ts-text-heading);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ts-hero-arrow-btn:hover {
  color: var(--ts-burgundy);
  transform: scale(1.18);
}

.ts-hero-caption {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ts-hero-caption.is-fading {
  opacity: 0;
  transform: translateY(4px);
}

/* Dynamic theme transitions for text and buttons */
.ts-hero-tagline,
.ts-hero-title,
.ts-hero-desc,
.ts-btn-primary,
.ts-btn-secondary {
  transition: color 0.6s ease, border-color 0.6s ease, background-color 0.6s ease, text-shadow 0.6s ease, box-shadow 0.6s ease;
}

/* Slide 02 and 03 High-Contrast Editorial Luxury Text Styling */
.ts-hero[data-theme="dark"] .ts-hero-tagline,
.ts-hero[data-active-slide="1"] .ts-hero-tagline,
.ts-hero[data-active-slide="2"] .ts-hero-tagline {
  color: #E5C384 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.22em;
}

.ts-hero[data-theme="dark"] .ts-hero-title,
.ts-hero[data-active-slide="1"] .ts-hero-title,
.ts-hero[data-active-slide="2"] .ts-hero-title {
  color: #FAF7F2 !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95) !important;
}

.ts-hero[data-theme="dark"] .ts-hero-desc,
.ts-hero[data-active-slide="1"] .ts-hero-desc,
.ts-hero[data-active-slide="2"] .ts-hero-desc {
  color: #F8F5F0 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8) !important;
}

.ts-hero[data-theme="dark"] .ts-btn-primary,
.ts-hero[data-active-slide="1"] .ts-btn-primary,
.ts-hero[data-active-slide="2"] .ts-btn-primary {
  background-color: #FAF7F2 !important;
  border-color: #FAF7F2 !important;
  color: #411115 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

.ts-hero[data-theme="dark"] .ts-btn-primary:hover,
.ts-hero[data-active-slide="1"] .ts-btn-primary:hover,
.ts-hero[data-active-slide="2"] .ts-btn-primary:hover {
  background-color: #D4AF37 !important;
  border-color: #D4AF37 !important;
  color: #170D0C !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4) !important;
}

.ts-hero[data-theme="dark"] .ts-btn-secondary,
.ts-hero[data-active-slide="1"] .ts-btn-secondary,
.ts-hero[data-active-slide="2"] .ts-btn-secondary {
  border-color: rgba(250, 247, 242, 0.85) !important;
  color: #FAF7F2 !important;
  background-color: rgba(250, 247, 242, 0.12) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.ts-hero[data-theme="dark"] .ts-btn-secondary:hover,
.ts-hero[data-active-slide="1"] .ts-btn-secondary:hover,
.ts-hero[data-active-slide="2"] .ts-btn-secondary:hover {
  background-color: rgba(250, 247, 242, 0.28) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

@media (max-width: 1024px) {
  .ts-hero-slide .ts-hero-bg-img {
    object-position: 85% center;
  }
  .ts-hero-slide[data-slide-index="0"] .ts-hero-bg-img {
    object-position: 85% top;
  }
}

@media (max-width: 640px) {
  .ts-hero-slide .ts-hero-bg-img {
    object-position: 80% center;
  }
  .ts-hero-slide[data-slide-index="0"] .ts-hero-bg-img {
    object-position: 80% top;
  }
  .ts-hero[data-theme="dark"] .ts-hero-content,
  .ts-hero[data-active-slide="1"] .ts-hero-content,
  .ts-hero[data-active-slide="2"] .ts-hero-content {
    background: rgba(45, 10, 14, 0.92) !important;
    border-color: rgba(201, 154, 69, 0.35) !important;
  }
}

/* ==========================================================================
   TARSIYA COMPLETE MOBILE & RESPONSIVE POLISH SYSTEM v3.6.0
   - Prevents all horizontal overflow & page clipping
   - 100% viewport containment on iOS Safari, Android Chrome & WebKit
   - Header actions & logo alignment
   - Single-product page full-width container & button fix
   ========================================================================== */

/* 1. Root & Viewport Overflow Lockdown */
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img, svg, video, canvas {
  max-width: 100%;
}

/* 2. Cart Drawer Off-Canvas Overflow Prevention */
/* When closed, hide visibility and disable pointer events so it cannot cause overflow */
.ts-cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(400px, 88vw) !important;
  max-width: 100% !important;
  z-index: 99999 !important;
  background: var(--ts-bg-main) !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ts-cart-drawer.is-active,
.ts-cart-drawer.active {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ts-cart-drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(23, 13, 12, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.ts-cart-drawer-overlay.is-active,
.ts-cart-drawer-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3. Global Containers on Mobile (<= 768px) */
@media (max-width: 768px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  .ts-section {
    padding: 2.25rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .ts-section {
    padding: 1.75rem 0 !important;
  }
}

/* 4. Top Announcement Bar */
@media (max-width: 768px) {
  .ts-announcement-bar {
    padding: 0.45rem 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .ts-announcement-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .ts-announcement-spacer,
  .ts-currency-selector {
    display: none !important;
  }

  .ts-announcement-text {
    font-size: 0.62rem !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* 5. Header Bar & Navigation on Mobile */
@media (max-width: 768px) {
  .ts-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(250, 247, 242, 0.98) !important;
  }

  .ts-header-inner {
    height: 58px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0.85rem !important;
    gap: 0.5rem !important;
  }

  .ts-brand-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 110px !important;
    flex-shrink: 0 !important;
  }

  .ts-brand-logo-img,
  .custom-logo,
  a.custom-logo-link img {
    max-height: 22px !important;
    max-width: 100px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .ts-brand-logo-fallback {
    font-family: var(--ts-font-serif) !important;
    font-size: 1.3rem !important;
    letter-spacing: 0.08em !important;
    color: var(--ts-burgundy) !important;
    white-space: nowrap !important;
  }

  /* Header action icons: Search, Cart, Menu hamburger (hide redundant wishlist/account to prevent wrapping) */
  .ts-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .ts-header-actions .ts-account-link,
  .ts-header-actions .ts-wishlist-link {
    display: none !important;
  }

  .ts-icon-link {
    padding: 0.25rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    color: var(--ts-text-heading) !important;
  }

  .ts-icon-link svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .ts-cart-count {
    top: 1px !important;
    right: 1px !important;
    width: 15px !important;
    height: 15px !important;
    font-size: 0.58rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* 6. Single Product Main Page Layout on Mobile */
@media (max-width: 768px) {
  .ts-single-product-main {
    padding-top: 0.75rem !important;
    padding-bottom: 2.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .ts-breadcrumbs {
    font-size: 0.65rem !important;
    margin-bottom: 0.85rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }
  .ts-breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .ts-woocommerce-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .woocommerce div.product {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Gallery Full Width & Centered */
  .woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: center !important;
    position: relative !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .woocommerce-product-gallery .woocommerce-product-gallery__image {
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .woocommerce-product-gallery .woocommerce-product-gallery__image img,
  .woocommerce div.product .woocommerce-product-gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: var(--ts-radius-sm);
  }

  .woocommerce-product-gallery .flex-control-nav,
  .woocommerce-product-gallery .flex-control-thumbs {
    gap: 8px !important;
    margin-top: 10px !important;
    justify-content: center !important;
  }

  .woocommerce-product-gallery .flex-control-nav li,
  .woocommerce-product-gallery .flex-control-thumbs li {
    width: 58px !important;
    height: 78px !important;
  }

  /* Summary Details Column */
  .woocommerce div.product .summary.entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    float: none !important;
  }

  .woocommerce div.product .product_title {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
    word-break: break-word !important;
  }

  .woocommerce div.product p.price {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Payment installment widgets (Mintpay, Koko) */
  p.price > div[style*="font-size"],
  .price > div[class*="product-price-installments"],
  .mintpay-price-breakdown,
  .koko-price-breakdown {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-break: break-word !important;
    font-size: 0.74rem !important;
  }

  /* Short description */
  .woocommerce-product-details__short-description {
    font-size: 0.84rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.35rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Swatches on mobile */
  .ts-colour-swatches-wrapper {
    margin: 0 0 1rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ts-colour-swatches-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  .ts-colour-swatch-btn {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
  }

  /* Size buttons on mobile */
  .ts-size-selector-wrapper,
  .ts-size-buttons {
    margin: 0 0 1.25rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .ts-size-btn {
    min-width: 44px !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
    flex: 0 0 auto !important;
  }

  /* Add to Cart row on mobile - NO CLIPPING */
  .woocommerce div.product form.cart.variations_form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .single_variation_wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .woocommerce-variation-add-to-cart,
  .single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .quantity {
    flex: 0 0 76px !important;
    max-width: 76px !important;
    height: 46px !important;
    min-width: 76px !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .quantity .input-text.qty {
    width: 36px !important;
    height: 46px !important;
    font-size: 0.82rem !important;
  }

  .woocommerce div.product .single_add_to_cart_button,
  .woocommerce div.product button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 0.85rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Product Tabs on Mobile */
  .woocommerce-tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2rem !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .woocommerce-tabs ul.tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0.4rem !important;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }
  .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-tabs ul.tabs li {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .woocommerce-tabs ul.tabs li a {
    padding: 10px 14px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
  }

  .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 1.25rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .woocommerce-tabs .woocommerce-Tabs-panel table.shop_attributes {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    word-break: break-word !important;
  }

  /* Related Products Grid */
  .woocommerce div.product .related.products {
    margin-top: 2.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .related.products ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.78rem !important;
    min-height: 2.2rem !important;
  }

  .woocommerce div.product .related.products ul.products li.product .price {
    font-size: 0.8rem !important;
  }

  /* Footer on Mobile */
  .ts-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .ts-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ts-footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   TARSIYA MOBILE CART RESPONSIVE REFINEMENT (v2.2.3)
   Fixes: Mobile cart price clipping (e.g. LKR 9,000.00 / රු9,000.00)
   Viewports: 375px, 390px, 430px
   Layout: Responsive grid on mobile, dedicated compact column for price,
           0px horizontal scroll, preserving desktop cart unchanged.
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Page container & cart block constraints (override inline 3.5rem on mobile) */
  .woocommerce-cart .ts-page-content,
  .woocommerce-cart article.ts-page-content,
  article.ts-page-content {
    padding: 1.25rem 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent container overflow */
  .wp-block-woocommerce-cart,
  .wc-block-cart,
  .wc-block-components-sidebar-layout,
  .wc-block-cart__main,
  .wp-block-woocommerce-cart-items-block,
  .woocommerce-cart-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Block Cart Table on Mobile */
  table.wc-block-cart-items {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    box-sizing: border-box !important;
  }

  .wc-block-cart-items thead,
  .wc-block-cart-items__header {
    display: none !important;
  }

  .wc-block-cart-items tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Cart Row: Responsive Grid Layout with dedicated compact price column */
  tr.wc-block-cart-items__row {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid var(--ts-border-subtle, #EFECE6) !important;
    box-sizing: border-box !important;
  }

  /* Thumbnail cell */
  td.wc-block-cart-item__image {
    grid-column: 1 !important;
    width: 68px !important;
    max-width: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  td.wc-block-cart-item__image a {
    display: block !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

  td.wc-block-cart-item__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Product details cell */
  td.wc-block-cart-item__product {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }

  .wc-block-cart-item__wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wc-block-components-product-name {
    font-family: var(--ts-font-serif, 'Source Serif 4', Georgia, serif) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--ts-text-heading, #170D0C) !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .wc-block-cart-item__prices {
    display: block !important;
    font-size: 0.85rem !important;
    color: var(--ts-text-muted, #786E6B) !important;
    margin: 2px 0 !important;
  }

  .wc-block-components-product-metadata,
  .wc-block-components-product-details {
    font-size: 0.78rem !important;
    color: var(--ts-text-muted, #786E6B) !important;
    line-height: 1.4 !important;
  }

  /* Quantity & Remove controls container */
  .wc-block-cart-item__quantity {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
    flex-wrap: nowrap !important;
  }

  .wc-block-components-quantity-selector {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--ts-border, #DBD0C2) !important;
    border-radius: 4px !important;
    height: 32px !important;
    background: #fff !important;
  }

  .wc-block-components-quantity-selector__input {
    width: 36px !important;
    height: 30px !important;
    text-align: center !important;
    border: none !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .wc-block-components-quantity-selector__button {
    width: 28px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    color: var(--ts-text-heading, #170D0C) !important;
  }

  .wc-block-cart-item__remove-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--ts-text-muted, #786E6B) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0 !important;
  }

  .wc-block-cart-item__remove-link svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Total price cell: dedicated compact right column, zero clipping */
  td.wc-block-cart-item__total {
    grid-column: 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    white-space: nowrap !important;
  }

  td.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-family: var(--ts-font-serif, 'Source Serif 4', Georgia, serif) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--ts-text-heading, #170D0C) !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  /* Classic WooCommerce Cart Table Fallback Support */
  table.cart.shop_table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  table.cart.shop_table tbody,
  table.cart.shop_table tr.cart_item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  table.cart.shop_table tr.cart_item {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid var(--ts-border-subtle, #EFECE6) !important;
  }

  table.cart.shop_table td.product-thumbnail {
    grid-column: 1 !important;
    width: 68px !important;
    padding: 0 !important;
  }

  table.cart.shop_table td.product-thumbnail img {
    width: 68px !important;
    height: 68px !important;
    object-fit: cover !important;
  }

  table.cart.shop_table td.product-name {
    grid-column: 2 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  table.cart.shop_table td.product-subtotal,
  table.cart.shop_table td.product-price {
    grid-column: 3 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
}


/* ==========================================================================
   TARSIYA LUXURY SINGLE PRODUCT DETAIL PAGE REDESIGN
   ========================================================================== */

/* 1. Page Section & Container */
.ts-single-product-main {
  background-color: var(--ts-bg-main, #FAF7F2) !important;
  padding: 1rem 0 5rem 0 !important;
  min-height: 80vh !important;
}

.ts-single-product-main .container {
  max-width: var(--ts-container, 1340px) !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
}

/* 2. Breadcrumbs */
.ts-breadcrumbs,
.single-product .woocommerce-breadcrumb {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted, #786E6B) !important;
  margin-bottom: 2rem !important;
  padding: 0.5rem 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.ts-breadcrumbs a,
.single-product .woocommerce-breadcrumb a {
  color: var(--ts-text-muted, #786E6B) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.ts-breadcrumbs a:hover,
.single-product .woocommerce-breadcrumb a:hover {
  color: var(--ts-burgundy, #411115) !important;
}

.ts-breadcrumbs span,
.single-product .woocommerce-breadcrumb span {
  color: var(--ts-text-heading, #170D0C) !important;
  font-weight: 600 !important;
}

/* 3. Product Primary 2-Column Grid (Gallery Left, Summary Right) */
.single-product .ts-woocommerce-container div.product,
.single-product div.product {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  grid-template-areas:
    "gallery summary"
    "tabs    tabs"
    "related related" !important;
  column-gap: 4.5rem !important;
  row-gap: 3.5rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* 4. Product Gallery (Left Column) */
.single-product .woocommerce-product-gallery {
  grid-area: gallery !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: #F5EFE6 !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: #F5EFE6 !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Gallery Zoom Trigger & PhotoSwipe */
.single-product .woocommerce-product-gallery__trigger {
  top: 1.25rem !important;
  right: 1.25rem !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(250, 247, 242, 0.9) !important;
  border: 1px solid var(--ts-champagne, #DBD0C2) !important;
  box-shadow: 0 2px 8px rgba(23, 13, 12, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

.single-product .woocommerce-product-gallery__trigger:hover {
  background: #FFFFFF !important;
  transform: scale(1.05) !important;
}

/* Gallery Thumbnails (Only when actual multiple gallery images exist) */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto !important;
  scrollbar-width: thin !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 76px !important;
  width: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  border: 1.5px solid var(--ts-champagne, #DBD0C2) !important;
  border-radius: 3px !important;
  opacity: 0.65 !important;
  transition: all 0.2s ease !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1 !important;
  border-color: var(--ts-burgundy, #411115) !important;
}

/* 5. Product Summary Information (Right Column) */
.single-product .summary.entry-summary {
  grid-area: summary !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Product Title */
.single-product .product_title.entry-title {
  font-family: var(--ts-font-serif, 'Source Serif 4', Georgia, serif) !important;
  font-size: 2.15rem !important;
  font-weight: 500 !important;
  color: var(--ts-text-heading, #170D0C) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}

/* Product Price */
.single-product .summary.entry-summary p.price,
.single-product .summary.entry-summary .price {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.single-product .summary.entry-summary .price .woocommerce-Price-amount {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--ts-burgundy, #411115) !important;
  letter-spacing: 0.02em !important;
  display: block !important;
  line-height: 1.25 !important;
  margin: 0 0 4px 0 !important;
}

/* Clean up stray breaks and empty paragraphs */
.single-product .summary.entry-summary p.price > br,
.single-product .summary.entry-summary > br,
.single-product .summary.entry-summary > p:empty {
  display: none !important;
}

/* Installment rows (Mintpay & KOKO) */
.single-product .product-price-installments-not-in-variation-single,
.single-product p.price > div[class*="product-price-installments"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  color: var(--ts-text-muted, #786E6B) !important;
  line-height: 1.4 !important;
  margin: 2px 0 !important;
  padding: 0 !important;
}

.single-product .product-price-installments-not-in-variation-single:first-of-type {
  margin-top: 6px !important;
  margin-bottom: 3px !important;
}

.single-product .product-price-installments-not-in-variation-single:last-of-type {
  margin-bottom: 18px !important; /* Breathing room before description */
}

.single-product .product-price-installments-not-in-variation-single b {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-weight: 600 !important;
  color: var(--ts-text-heading, #170D0C) !important;
  margin: 0 3px !important;
}

.single-product .mintpay-logo {
  height: 13px !important;
  width: auto !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
}

.single-product .koko-logo {
  height: 13px !important;
  width: auto !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
}

.single-product .mintpay-info-icon {
  height: 12px !important;
  width: 12px !important;
  margin-left: 2px !important;
  opacity: 0.75 !important;
  cursor: pointer !important;
}

/* Short Description */
.single-product .woocommerce-product-details__short-description {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #4A4240 !important;
  max-width: 580px !important;
  margin: 0 0 20px 0 !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--ts-champagne, #DBD0C2) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.single-product .woocommerce-product-details__short-description p {
  margin: 0 0 0.5rem 0 !important;
}

.single-product .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0 !important;
}

/* 6. Variations Form */
.single-product form.variations_form {
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.single-product table.variations {
  width: 100% !important;
  border: none !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

.single-product table.variations tbody,
.single-product table.variations tr {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}

.single-product table.variations th.label {
  display: none !important;
}

.single-product table.variations td.value {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: none !important;
}

.single-product table.variations select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Colour Swatches Container */
.single-product .ts-colour-swatches-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.single-product .ts-colour-header,
.single-product .ts-size-header {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-heading, #170D0C) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.single-product .ts-selected-colour-value,
.single-product .ts-selected-size-value {
  font-weight: 500 !important;
  color: var(--ts-text-muted, #786E6B) !important;
  text-transform: none !important;
}

.single-product .ts-colour-swatches {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.single-product .ts-colour-swatch {
  width: 46px !important;
  height: 60px !important;
  padding: 2px !important;
  border: 1.5px solid var(--ts-champagne, #DBD0C2) !important;
  border-radius: 3px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.single-product .ts-colour-swatch img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 2px !important;
}

.single-product .ts-colour-swatch:hover {
  border-color: var(--ts-burgundy, #411115) !important;
}

.single-product .ts-colour-swatch.is-selected,
.single-product .ts-colour-swatch--active {
  border-color: var(--ts-burgundy, #411115) !important;
  outline: 1.5px solid var(--ts-burgundy, #411115) !important;
  outline-offset: 1px !important;
}

/* Size Buttons Container */
.single-product .ts-size-buttons-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.single-product .ts-size-buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.single-product .ts-size-btn {
  min-width: 44px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--ts-champagne, #DBD0C2) !important;
  border-radius: 3px !important;
  background: var(--ts-bg-main, #FAF7F2) !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--ts-text-heading, #170D0C) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.single-product .ts-size-btn:hover {
  border-color: var(--ts-burgundy, #411115) !important;
  color: var(--ts-burgundy, #411115) !important;
  background: #FFFFFF !important;
}

.single-product .ts-size-btn.is-selected,
.single-product .ts-size-btn--active {
  background: var(--ts-burgundy, #411115) !important;
  color: var(--ts-ivory, #FAF7F2) !important;
  border-color: var(--ts-burgundy, #411115) !important;
}

.single-product .ts-size-btn--disabled {
  opacity: 0.4 !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
}

/* Clear Variations Link */
.single-product a.reset_variations {
  display: inline-block !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted, #786E6B) !important;
  margin-top: 6px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.single-product a.reset_variations:hover {
  color: var(--ts-burgundy, #411115) !important;
}

/* Stock Status */
.single-product .woocommerce-variation-availability,
.single-product p.stock {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #2E6B38 !important;
  margin: 4px 0 12px 0 !important;
}

/* 7. Purchase Action Controls (Quantity, Add to Bag, Wishlist - Aligned on ONE Row) */
.single-product .single_variation_wrap {
  width: 100% !important;
}

.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Quantity Stepper */
.single-product .quantity {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--ts-champagne, #DBD0C2) !important;
  border-radius: 3px !important;
  height: 48px !important;
  min-height: 48px !important;
  background: var(--ts-bg-main, #FAF7F2) !important;
  box-sizing: border-box !important;
  flex: 0 0 116px !important;
  width: 116px !important;
  overflow: hidden !important;
}

.single-product .quantity .ts-qty-btn {
  width: 36px !important;
  height: 46px !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.1rem !important;
  color: var(--ts-text-heading, #170D0C) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.single-product .quantity .ts-qty-btn:hover {
  background: rgba(65, 17, 21, 0.06) !important;
  color: var(--ts-burgundy, #411115) !important;
}

.single-product .quantity input.qty {
  width: 44px !important;
  height: 46px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--ts-text-heading, #170D0C) !important;
  box-shadow: none !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
}

.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Add to Bag Button */
.single-product button.single_add_to_cart_button {
  flex: 1 1 auto !important;
  height: 48px !important;
  min-height: 48px !important;
  background-color: var(--ts-burgundy, #411115) !important;
  color: var(--ts-ivory, #FAF7F2) !important;
  border: 1px solid var(--ts-burgundy, #411115) !important;
  border-radius: 3px !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(65, 17, 21, 0.15) !important;
  transition: all 0.25s ease !important;
}

.single-product button.single_add_to_cart_button:hover {
  background-color: #2D0C0E !important;
  border-color: #2D0C0E !important;
  box-shadow: 0 4px 14px rgba(65, 17, 21, 0.25) !important;
}

/* Wishlist Control */
.single-product .ts-single-wishlist-btn {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid var(--ts-champagne, #DBD0C2) !important;
  border-radius: 3px !important;
  background: var(--ts-bg-main, #FAF7F2) !important;
  color: var(--ts-text-heading, #170D0C) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.single-product .ts-single-wishlist-btn:hover {
  border-color: var(--ts-burgundy, #411115) !important;
  color: var(--ts-burgundy, #411115) !important;
  background: rgba(65, 17, 21, 0.04) !important;
}

.single-product .ts-single-wishlist-btn.is-active svg {
  fill: var(--ts-burgundy, #411115) !important;
  stroke: var(--ts-burgundy, #411115) !important;
}

/* Product Meta (SKU, Category) */
.single-product .product_meta {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--ts-champagne, #DBD0C2) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted, #786E6B) !important;
}

.single-product .product_meta span.sku_wrapper,
.single-product .product_meta span.posted_in {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.single-product .product_meta a {
  color: var(--ts-text-heading, #170D0C) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.single-product .product_meta a:hover {
  color: var(--ts-burgundy, #411115) !important;
}

/* 8. Product Details Section (Tabs) */
.single-product .woocommerce-tabs.wc-tabs-wrapper {
  grid-area: tabs !important;
  width: 100% !important;
  margin-top: 2rem !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid var(--ts-champagne, #DBD0C2) !important;
  box-sizing: border-box !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 2.5rem !important;
  list-style: none !important;
  padding: 0 0 0.85rem 0 !important;
  margin: 0 0 2rem 0 !important;
  border-bottom: 1px solid var(--ts-champagne, #DBD0C2) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-muted, #786E6B) !important;
  text-decoration: none !important;
  padding-bottom: 0.95rem !important;
  display: inline-block !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li:hover a {
  color: var(--ts-burgundy, #411115) !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
  color: var(--ts-burgundy, #411115) !important;
  border-bottom: 2px solid var(--ts-burgundy, #411115) !important;
  margin-bottom: -1px !important;
}

.single-product .woocommerce-Tabs-panel {
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: #3D3534 !important;
  max-width: 800px !important;
}

.single-product .woocommerce-Tabs-panel > h2 {
  display: none !important;
}

.single-product .woocommerce-Tabs-panel p {
  margin: 0 0 1rem 0 !important;
}

.single-product .woocommerce-Tabs-panel ul {
  list-style: disc !important;
  padding-left: 1.25rem !important;
  margin: 0.75rem 0 1rem 0 !important;
}

.single-product .woocommerce-Tabs-panel ul li {
  margin-bottom: 0.4rem !important;
}

/* Additional Information Table */
.single-product table.shop_attributes {
  width: 100% !important;
  max-width: 600px !important;
  border-collapse: collapse !important;
  margin: 1rem 0 !important;
}

.single-product table.shop_attributes th {
  padding: 0.75rem 1rem 0.75rem 0 !important;
  font-family: var(--ts-font-sans, 'Montserrat', sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ts-text-heading, #170D0C) !important;
  border-bottom: 1px solid var(--ts-border-subtle, #EFE7DC) !important;
  text-align: left !important;
}

.single-product table.shop_attributes td {
  padding: 0.75rem 0 !important;
  font-size: 0.85rem !important;
  color: var(--ts-text-body, #3D3534) !important;
  border-bottom: 1px solid var(--ts-border-subtle, #EFE7DC) !important;
}

/* 9. Related Products Section */
.single-product section.related.products {
  grid-area: related !important;
  width: 100% !important;
  margin-top: 3rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid var(--ts-champagne, #DBD0C2) !important;
}

.single-product section.related.products > h2 {
  font-family: var(--ts-font-serif, 'Source Serif 4', Georgia, serif) !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  color: var(--ts-text-heading, #170D0C) !important;
  margin-bottom: 2rem !important;
  text-align: left !important;
}

/* 10. Mobile and Responsive Adjustments */
@media (max-width: 900px) {
  .ts-single-product-main {
    padding: 0.5rem 0 3.5rem 0 !important;
  }

  .ts-single-product-main .container {
    padding: 0 1.25rem !important;
  }

  .single-product .ts-woocommerce-container div.product,
  .single-product div.product {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "gallery"
      "summary"
      "tabs"
      "related" !important;
    gap: 2rem !important;
  }

  .single-product .product_title.entry-title {
    font-size: 1.75rem !important;
  }

  .single-product .summary.entry-summary .price .woocommerce-Price-amount {
    font-size: 1.2rem !important;
  }

  .single-product .woocommerce-tabs ul.tabs.wc-tabs {
    gap: 1.25rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 500px) {
  .single-product .woocommerce-variation-add-to-cart,
  .single-product form.cart:not(.variations_form) {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
  }

  .single-product .quantity {
    width: 96px !important;
    flex: 0 0 96px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .single-product .quantity .ts-qty-btn {
    width: 30px !important;
    height: 42px !important;
  }

  .single-product .quantity input.qty {
    width: 36px !important;
    height: 42px !important;
    font-size: 0.85rem !important;
  }

  .single-product button.single_add_to_cart_button {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 0.76rem !important;
    padding: 0 10px !important;
  }

  .single-product .ts-single-wishlist-btn {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
}


/* ==========================================================================
   HERO BUTTONS MOBILE RESPONSIVE FIX (Prevent "WATCH THE FILM" overflow)
   ========================================================================== */
@media (max-width: 640px) {
  .ts-hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .ts-hero-buttons .ts-btn {
    width: 100% !important;
    padding: 0.95rem 1.25rem !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}