/*
Theme Name:  Tula Tea Child
Theme URI:   https://tulatea.com
Description: Tula Tea child theme for Blocksy. Luxury tea brand — Cormorant Garamond headings, Jost body, gold/cream/ink palette.
Author:      Tula Tea
Template:    blocksy
Version:     1.0.0
License:     GNU General Public License v2 or later
Tags:        woocommerce, e-commerce, full-site-editing
*/

/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* ============================================================
   2. DESIGN TOKENS — single source of truth for all pages
   ============================================================ */
:root {
  /* Brand palette */
  --tt-ink:      #1A1A1A;
  --tt-gold:     #C9A96E;
  --tt-gold-lt:  #E8D5B0;
  --tt-gold-dk:  #9E7D46;
  --tt-cream:    #F9F5EF;
  --tt-cream-dk: #EDE5D8;
  --tt-sage:     #4A7C59;
  --tt-sage-lt:  #D4E6DA;
  --tt-umber:    #8B5E3C;
  --tt-stone:    #E8E0D5;
  --tt-white:    #FFFFFF;
  --tt-muted:    #6B6460;

  /* Typography */
  --tt-font-display: 'Cormorant Garamond', Georgia, serif;
  --tt-font-body:    'Jost', Helvetica, sans-serif;

  /* Type scale */
  --tt-text-xs:   0.75rem;   /* 12px */
  --tt-text-sm:   0.875rem;  /* 14px */
  --tt-text-base: 1rem;      /* 16px */
  --tt-text-lg:   1.125rem;  /* 18px */
  --tt-text-xl:   1.375rem;  /* 22px */
  --tt-text-2xl:  1.75rem;   /* 28px */
  --tt-text-3xl:  2.5rem;    /* 40px */
  --tt-text-4xl:  3.5rem;    /* 56px */
  --tt-text-5xl:  4.5rem;    /* 72px */

  /* Spacing */
  --tt-space-xs:  0.5rem;
  --tt-space-sm:  1rem;
  --tt-space-md:  2rem;
  --tt-space-lg:  4rem;
  --tt-space-xl:  7rem;

  /* Borders & radius */
  --tt-radius-sm: 4px;
  --tt-radius-md: 8px;
  --tt-radius-lg: 16px;
  --tt-border:    1px solid var(--tt-stone);
  --tt-border-gold: 1px solid var(--tt-gold);

  /* Shadows */
  --tt-shadow-sm: 0 2px 8px rgba(26,26,26,0.07);
  --tt-shadow-md: 0 6px 24px rgba(26,26,26,0.10);
  --tt-shadow-lg: 0 16px 48px rgba(26,26,26,0.14);

  /* Transitions */
  --tt-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tt-duration: 300ms;
}

/* ============================================================
   3. GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-base);
  font-weight: 300;
  line-height: 1.75;
  color: var(--tt-ink);
  background-color: var(--tt-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--tt-umber);
  text-decoration: none;
  transition: color var(--tt-duration) var(--tt-ease);
}
a:hover { color: var(--tt-gold-dk); }

/* ============================================================
   4. TYPOGRAPHY — unified heading system
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3 {
  font-family: var(--tt-font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tt-ink);
}

h1, .wp-block-heading h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2, .wp-block-heading h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3, .wp-block-heading h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4                        { font-size: 1.25rem; }
h5, h6                    { font-size: 1rem; font-weight: 500; font-family: var(--tt-font-body); letter-spacing: 0.08em; text-transform: uppercase; }

p {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-base);
  font-weight: 300;
  line-height: 1.8;
  color: var(--tt-ink);
  margin-bottom: 1rem;
}

.tt-overline {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tt-gold-dk);
}

blockquote {
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-2xl);
  font-style: italic;
  font-weight: 300;
  border-left: 3px solid var(--tt-gold);
  padding: var(--tt-space-sm) var(--tt-space-md);
  margin: var(--tt-space-md) 0;
  color: var(--tt-umber);
}

/* ============================================================
   5. LAYOUT — site structure
   ============================================================ */
.site-content,
.wp-site-blocks {
  background-color: var(--tt-cream);
}

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

.tt-section {
  padding: var(--tt-space-lg) 0;
}

.tt-section--xl {
  padding: var(--tt-space-xl) 0;
}

.tt-section--cream  { background: var(--tt-cream); }
.tt-section--white  { background: var(--tt-white); }
.tt-section--ink    { background: var(--tt-ink); color: var(--tt-cream); }
.tt-section--stone  { background: var(--tt-stone); }

/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */
.site-header,
#site-header,
.ct-header {
  background-color: var(--tt-cream) !important;
  border-bottom: 1px solid var(--tt-stone);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(249,245,239,0.95) !important;
}

/* Logo */
.site-logo img,
.ct-logo img { max-height: 48px; width: auto; }

/* Nav links */
.main-navigation a,
.ct-main-nav a,
nav.ct-header-content a {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-ink);
  padding: 0.5rem 1rem;
  transition: color var(--tt-duration) var(--tt-ease);
}

.main-navigation a:hover,
.ct-main-nav a:hover { color: var(--tt-gold-dk); }

/* Cart icon */
.woocommerce-cart-link,
.ct-cart-sidebar-toggle {
  color: var(--tt-ink);
  transition: color var(--tt-duration) var(--tt-ease);
}
.woocommerce-cart-link:hover,
.ct-cart-sidebar-toggle:hover { color: var(--tt-gold-dk); }

/* ============================================================
   7. HERO / COVER BLOCK
   ============================================================ */
.wp-block-cover,
.wp-block-cover-image {
  min-height: 90vh;
}

.wp-block-cover__inner-container h1,
.wp-block-cover__inner-container h2 {
  color: var(--tt-white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Hero overlay — dark ink base */
.tt-hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,26,26,0.15) 0%,
    rgba(26,26,26,0.45) 100%
  );
  pointer-events: none;
}

/* ============================================================
   8. BUTTONS — primary, secondary, ghost
   ============================================================ */
.wp-block-button__link,
.tt-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .single_add_to_cart_button {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0.875rem 2rem !important;
  border-radius: 0 !important;
  background-color: var(--tt-ink) !important;
  color: var(--tt-cream) !important;
  border: 1px solid var(--tt-ink) !important;
  cursor: pointer;
  display: inline-block;
  transition: background-color var(--tt-duration) var(--tt-ease),
              color var(--tt-duration) var(--tt-ease),
              border-color var(--tt-duration) var(--tt-ease) !important;
}

.wp-block-button__link:hover,
.tt-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--tt-gold-dk) !important;
  border-color: var(--tt-gold-dk) !important;
  color: var(--tt-white) !important;
}

/* Gold outline button */
.wp-block-button.is-style-outline .wp-block-button__link,
.tt-btn--outline {
  background-color: transparent !important;
  color: var(--tt-ink) !important;
  border: 1px solid var(--tt-ink) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.tt-btn--outline:hover {
  background-color: var(--tt-ink) !important;
  color: var(--tt-cream) !important;
}

/* Gold fill button */
.tt-btn--gold,
.woocommerce .alt.button {
  background-color: var(--tt-gold) !important;
  border-color: var(--tt-gold) !important;
  color: var(--tt-ink) !important;
}
.tt-btn--gold:hover {
  background-color: var(--tt-gold-dk) !important;
  border-color: var(--tt-gold-dk) !important;
  color: var(--tt-white) !important;
}

/* ============================================================
   9. WOOCOMMERCE — SHOP & PRODUCT GRID
   ============================================================ */

/* Product grid */
.woocommerce ul.products,
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Product card */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: var(--tt-white);
  border: 1px solid var(--tt-stone);
  padding: 0 !important;
  overflow: hidden;
  transition: box-shadow var(--tt-duration) var(--tt-ease),
              transform var(--tt-duration) var(--tt-ease);
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
  box-shadow: var(--tt-shadow-md);
  transform: translateY(-3px);
}

/* Product image */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--tt-ease);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* Product info area */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: var(--tt-font-display) !important;
  font-size: var(--tt-text-xl) !important;
  font-weight: 400 !important;
  color: var(--tt-ink) !important;
  padding: 1rem 1.25rem 0.25rem !important;
}

.woocommerce ul.products li.product .price,
.wc-block-grid__product-price .price {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  font-weight: 400 !important;
  color: var(--tt-muted) !important;
  padding: 0 1.25rem 0.75rem !important;
  display: block;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--tt-umber) !important;
  color: var(--tt-white) !important;
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  min-height: unset !important;
  min-width: unset !important;
  line-height: 1.4 !important;
}

/* Add to cart on loop */
.woocommerce ul.products li.product .button {
  margin: 0 1.25rem 1.25rem !important;
  width: calc(100% - 2.5rem) !important;
  text-align: center !important;
}

/* ============================================================
   10. WOOCOMMERCE — SINGLE PRODUCT PAGE
   ============================================================ */
.woocommerce div.product .product_title {
  font-family: var(--tt-font-display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  margin-bottom: 0.5rem !important;
}

.woocommerce div.product .price {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-lg) !important;
  color: var(--tt-umber) !important;
  margin-bottom: var(--tt-space-sm) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-base) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  border-top: 1px solid var(--tt-stone);
  border-bottom: 1px solid var(--tt-stone);
  padding: var(--tt-space-sm) 0;
  margin: var(--tt-space-sm) 0;
}

/* Quantity input */
.woocommerce .quantity input.qty {
  font-family: var(--tt-font-body) !important;
  border: 1px solid var(--tt-stone) !important;
  border-radius: 0 !important;
  text-align: center;
  width: 64px !important;
  height: 48px !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--tt-muted) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--tt-ink) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  background-color: var(--tt-gold) !important;
}

/* ============================================================
   11. WOOCOMMERCE — CART & CHECKOUT
   ============================================================ */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  border-color: var(--tt-stone) !important;
  vertical-align: middle;
}

.woocommerce-cart table.cart td.product-name a {
  font-family: var(--tt-font-display) !important;
  font-size: var(--tt-text-lg) !important;
  color: var(--tt-ink) !important;
}

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--tt-font-display) !important;
  font-size: var(--tt-text-2xl) !important;
  font-weight: 400 !important;
}

/* Checkout fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--tt-font-body) !important;
  border: 1px solid var(--tt-stone) !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
  background: var(--tt-white) !important;
  transition: border-color var(--tt-duration) var(--tt-ease) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--tt-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.15) !important;
}

/* Order summary */
#order_review {
  background: var(--tt-cream-dk);
  padding: var(--tt-space-md);
}

/* ============================================================
   12. WOOCOMMERCE — NOTICES & MESSAGES
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--tt-gold) !important;
  background: var(--tt-cream-dk) !important;
  font-family: var(--tt-font-body) !important;
}

.woocommerce-error {
  border-top-color: var(--tt-umber) !important;
  background: #fdf0ea !important;
  font-family: var(--tt-font-body) !important;
}

/* ============================================================
   13. CATEGORY TILES
   ============================================================ */
.tt-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.tt-category-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}

.tt-category-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--tt-ease);
}
.tt-category-tile:hover img { transform: scale(1.06); }

.tt-category-tile__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(26,26,26,0.75) 0%, transparent 100%);
  color: var(--tt-white);
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-2xl);
  font-weight: 400;
}

/* ============================================================
   14. JOURNAL / NEWS SECTION
   ============================================================ */
.tt-journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.tt-journal-card {
  background: var(--tt-white);
  border: 1px solid var(--tt-stone);
  overflow: hidden;
  transition: box-shadow var(--tt-duration) var(--tt-ease);
}
.tt-journal-card:hover { box-shadow: var(--tt-shadow-md); }

.tt-journal-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.tt-journal-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--tt-ease);
}
.tt-journal-card:hover .tt-journal-card__image img { transform: scale(1.04); }

.tt-journal-card__body { padding: 1.5rem; }
.tt-journal-card__meta {
  font-size: var(--tt-text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tt-gold-dk);
  margin-bottom: 0.5rem;
}
.tt-journal-card__title {
  font-family: var(--tt-font-display) !important;
  font-size: var(--tt-text-xl) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--tt-ink) !important;
  margin-bottom: 0.75rem !important;
}
.tt-journal-card__excerpt {
  font-size: var(--tt-text-sm);
  font-weight: 300;
  color: var(--tt-muted);
  line-height: 1.7;
}

/* RSS / External news feed */
.rssSummary,
.rss-widget .rssSummary {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  color: var(--tt-muted) !important;
}
.rss-widget li a,
.widget_rss li a {
  font-family: var(--tt-font-display) !important;
  font-size: var(--tt-text-lg) !important;
  color: var(--tt-ink) !important;
}
.rss-widget li a:hover { color: var(--tt-gold-dk) !important; }

/* ============================================================
   15. TESTIMONIALS / QUOTE STRIP
   ============================================================ */
.tt-testimonial {
  text-align: center;
  padding: var(--tt-space-lg) var(--tt-space-md);
  background: var(--tt-ink);
  color: var(--tt-cream);
}

.tt-testimonial__quote {
  font-family: var(--tt-font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  max-width: 800px;
  margin: 0 auto var(--tt-space-sm);
  color: var(--tt-gold-lt);
}

.tt-testimonial__author {
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tt-stone);
}

/* ============================================================
   16. FEATURE STRIP — USPs
   ============================================================ */
.tt-feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--tt-stone);
  border-bottom: 1px solid var(--tt-stone);
}

.tt-feature-item {
  padding: 2.5rem 2rem;
  text-align: center;
  border-right: 1px solid var(--tt-stone);
}
.tt-feature-item:last-child { border-right: none; }

.tt-feature-item__icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--tt-gold-dk);
}

.tt-feature-item__title {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--tt-ink) !important;
  margin-bottom: 0.25rem !important;
}

.tt-feature-item__text {
  font-size: var(--tt-text-sm);
  font-weight: 300;
  color: var(--tt-muted);
  line-height: 1.6;
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer,
.ct-footer {
  background-color: var(--tt-ink) !important;
  color: var(--tt-stone) !important;
  padding: var(--tt-space-lg) 0 var(--tt-space-md);
}

.site-footer h5,
.site-footer h6,
.ct-footer h5,
.ct-footer .widget-title {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tt-gold-lt) !important;
  margin-bottom: 1rem !important;
}

.site-footer a,
.ct-footer a {
  color: var(--tt-stone) !important;
  font-size: var(--tt-text-sm);
  font-weight: 300;
  transition: color var(--tt-duration) var(--tt-ease);
}
.site-footer a:hover,
.ct-footer a:hover { color: var(--tt-gold) !important; }

.site-footer p,
.ct-footer p {
  color: var(--tt-stone);
  font-size: var(--tt-text-sm);
  font-weight: 300;
}

.tt-footer-logo { opacity: 0.85; margin-bottom: var(--tt-space-sm); }
.tt-footer-tagline {
  font-family: var(--tt-font-display);
  font-size: var(--tt-text-lg);
  font-style: italic;
  color: var(--tt-gold-lt);
}

.tt-footer-divider {
  border: none;
  border-top: 1px solid rgba(232,224,213,0.15);
  margin: var(--tt-space-md) 0 var(--tt-space-sm);
}

/* ============================================================
   18. BREADCRUMBS
   ============================================================ */
.woocommerce-breadcrumb,
.tt-breadcrumb {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: var(--tt-muted) !important;
  text-transform: uppercase !important;
  padding: var(--tt-space-sm) 0 !important;
}
.woocommerce-breadcrumb a { color: var(--tt-muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--tt-gold-dk) !important; }

/* ============================================================
   19. FORMS — newsletter, contact
   ============================================================ */
.tt-form input[type="text"],
.tt-form input[type="email"],
.tt-form textarea {
  width: 100%;
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-base);
  font-weight: 300;
  padding: 0.875rem 1rem;
  border: 1px solid var(--tt-stone);
  border-radius: 0;
  background: var(--tt-white);
  color: var(--tt-ink);
  transition: border-color var(--tt-duration) var(--tt-ease);
}
.tt-form input:focus,
.tt-form textarea:focus {
  border-color: var(--tt-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,169,110,0.15);
}

/* Newsletter inline form */
.tt-newsletter {
  display: flex;
  gap: 0;
  max-width: 480px;
}
.tt-newsletter input[type="email"] {
  flex: 1;
  border-right: none;
}
.tt-newsletter button {
  background: var(--tt-ink);
  color: var(--tt-cream);
  font-family: var(--tt-font-body);
  font-size: var(--tt-text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 1.5rem;
  border: 1px solid var(--tt-ink);
  cursor: pointer;
  transition: background var(--tt-duration) var(--tt-ease);
}
.tt-newsletter button:hover { background: var(--tt-gold-dk); border-color: var(--tt-gold-dk); }

/* ============================================================
   20. STAR RATINGS
   ============================================================ */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--tt-gold) !important;
}

/* ============================================================
   21. PAGINATION
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--tt-font-body) !important;
  font-size: var(--tt-text-sm) !important;
  border-color: var(--tt-stone) !important;
  color: var(--tt-ink) !important;
  border-radius: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--tt-ink) !important;
  color: var(--tt-cream) !important;
}

/* ============================================================
   22. ANIMATIONS & SCROLL REVEALS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .tt-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--tt-ease), transform 600ms var(--tt-ease);
  }
  .tt-reveal.tt-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .tt-reveal-delay-1 { transition-delay: 100ms; }
  .tt-reveal-delay-2 { transition-delay: 200ms; }
  .tt-reveal-delay-3 { transition-delay: 300ms; }
}

/* ============================================================
   23. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .tt-section { padding: var(--tt-space-md) 0; }
  .tt-section--xl { padding: var(--tt-space-lg) 0; }
  .tt-container { padding: 0 var(--tt-space-sm); }

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

  .tt-feature-strip {
    grid-template-columns: 1fr 1fr;
  }
  .tt-feature-item { border-right: none; border-bottom: 1px solid var(--tt-stone); }
  .tt-feature-item:nth-child(odd) { border-right: 1px solid var(--tt-stone); }

  .tt-newsletter { flex-direction: column; }
  .tt-newsletter input[type="email"] { border-right: 1px solid var(--tt-stone); }
}

@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}