/* =============================================
   LA TRASTIENDA — OSCURO PREMIUM
   Dark theme CSS override for Flatsome
   ============================================= */

:root {
  --bg:      #0E0E0E;
  --bg2:     #1A1A1A;
  --bg3:     #242424;
  --copper:  #C99060;
  --copper-l:#E8B882;
  --cream:   #F5F0E8;
  --cream2:  #D4C9B8;
  --mid:     #888888;
  --border:  #2E2E2E;
  --font-display: 'Abril Fatface', serif;
  --font-body:    'Lato', sans-serif;
}

/* ── GLOBAL ──────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── TOPBAR / ANNOUNCEMENT ───────────────── */
#top-bar,
.top-bar,
.ux-top-bar {
  background: var(--copper) !important;
  color: var(--bg) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 9px 0 !important;
}
#top-bar a,
.top-bar a { color: var(--bg) !important; text-decoration: none !important; }
/* WooCommerce announcement notice */
.woocommerce-store-notice,
p.demo_store {
  background: var(--copper) !important;
  color: var(--bg) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
}
.woocommerce-store-notice a,
p.demo_store a { color: var(--bg) !important; font-weight: 900 !important; }

/* ── HEADER ──────────────────────────────── */
#header,
.header-wrapper,
.header-main,
.header-inner,
.header-bg {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Logo — TR logo is white-on-black PNG, fits dark header naturally */
#logo img,
.header-logo img,
.logo img {
  filter: none !important;
  mix-blend-mode: normal !important;
  max-height: 52px !important;
  width: auto !important;
  border-radius: 4px;
}

/* Site name in Cherry Swash */
#logo .logo-title,
.logo .logo-title,
.site-title,
#logo a span,
.header-logo .logo-title {
  font-family: 'Cherry Swash', serif !important;
  font-weight: 700 !important;
  color: var(--cream) !important;
  font-size: 17px !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

/* Brand name next to logo — "La Trastienda Regalos" */
#logo a,
.header-logo a,
.logo a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
#logo a::after,
.header-logo a::after {
  content: 'La Trastienda\A Regalos' !important;
  font-family: 'Cherry Swash', serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--cream) !important;
  letter-spacing: 0.3px !important;
  white-space: pre !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

/* Nav links */
.nav > li > a,
.nav-main > li > a,
#main-menu > li > a,
.menu-item > a {
  color: var(--mid) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  transition: color .2s !important;
}
.nav > li > a:hover,
.nav-main > li > a:hover,
.menu-item > a:hover,
.menu-item.current-menu-item > a {
  color: var(--copper) !important;
  background: transparent !important;
}

/* Nav dropdowns */
.nav ul,
.nav .sub-menu {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}
.nav ul li a,
.nav .sub-menu li a {
  color: var(--cream2) !important;
  font-size: 12px !important;
}
.nav ul li a:hover,
.nav .sub-menu li a:hover {
  background: var(--bg3) !important;
  color: var(--copper) !important;
}

/* Search bar */
.header-search input,
.search-field,
.search-form input {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--cream) !important;
  border-radius: 4px !important;
}
.header-search input::placeholder,
.search-field::placeholder { color: var(--mid) !important; }

/* Cart / account icons */
.header-cart a,
.header-account a,
.cart-icon,
.nav-icon {
  color: var(--mid) !important;
  transition: color .2s !important;
}
.header-cart a:hover,
.header-account a:hover { color: var(--copper) !important; }
.cart-count {
  background: var(--copper) !important;
  color: var(--bg) !important;
}

/* ── SECTIONS / CONTAINERS ───────────────── */
.section,
.section-inner,
.container,
.row,
.col,
.ux-section {
  background: transparent !important;
}

/* ── HERO / BANNER ───────────────────────── */
.ux-slider,
.slider-wrapper,
.slider,
.flatsome-slider,
.ux-banner {
  background: var(--bg) !important;
}
.ux-slider .slide-content h2,
.ux-slider .slide-content h3,
.banner-title {
  font-family: var(--font-display) !important;
  color: var(--cream) !important;
}
.ux-slider .slide-content p,
.banner-text { color: var(--cream2) !important; }

/* Flatsome hero boxes */
.col-inner,
.box { background: transparent !important; }

/* Override any blue boxes from old design */
[style*="background-color: #"],
[style*="background: #"] { background: var(--bg2) !important; }

/* ── BUTTONS ─────────────────────────────── */
.button,
button.button,
a.button,
input[type="submit"],
.btn,
.woocommerce-Button,
.wc-proceed-to-checkout .checkout-button,
.single_add_to_cart_button,
.added_to_cart {
  background: var(--copper) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  transition: background .2s !important;
  padding: 12px 28px !important;
}
.button:hover,
button.button:hover,
a.button:hover,
.single_add_to_cart_button:hover {
  background: var(--copper-l) !important;
  color: var(--bg) !important;
}
/* Outline variant */
.button.outline,
.button.secondary {
  background: transparent !important;
  border: 1px solid var(--copper) !important;
  color: var(--copper) !important;
}
.button.outline:hover { background: var(--copper) !important; color: var(--bg) !important; }

/* ── PRODUCT CARDS (shop/archive) ────────── */
.product-small,
.product,
.woocommerce-loop-product,
li.product {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: all .25s !important;
}
li.product:hover,
.product-small:hover {
  border-color: var(--copper) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
}

/* Product title */
.woocommerce-loop-product__title,
.product-title,
h3.product-title,
.product-small .name a,
li.product h2 {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  color: var(--cream) !important;
}

/* Price */
.price,
.woocommerce-Price-amount,
.product-small .price,
li.product .price {
  color: var(--copper) !important;
  font-weight: 900 !important;
  font-size: 18px !important;
}
.price del,
.price del .woocommerce-Price-amount { color: var(--mid) !important; font-size: 14px !important; }

/* Product category label */
.product-cat,
.woocommerce-product-category-link { color: var(--mid) !important; font-size: 11px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }

/* Add to cart on card */
.product-small .add-to-cart,
li.product .add-to-cart,
.button.product_type_simple,
.ajax_add_to_cart {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--mid) !important;
  font-size: 11px !important;
}
.product-small:hover .add-to-cart,
li.product:hover .add-to-cart {
  border-color: var(--copper) !important;
  color: var(--copper) !important;
}

/* ── SALE BADGE — static, top-left corner of image ─── */
.tr-onsale,
span.onsale {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  background: transparent !important;
  color: var(--copper) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: unset !important;
  min-width: unset !important;
  line-height: 1 !important;
  font-size: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)) drop-shadow(0 0 3px rgba(0,0,0,0.9)) !important;
  z-index: 10 !important;
}

/* Product image overlay — transparent in cards */
.image-tools,
.product-image-tools { background: transparent !important; }

/* ── SINGLE PRODUCT ──────────────────────── */
.product-title h1,
.product_title {
  font-family: var(--font-display) !important;
  color: var(--cream) !important;
  font-size: 36px !important;
}
.woocommerce-product-details__short-description,
.product-short-description { color: var(--cream2) !important; }
.variations label,
.woocommerce-variation-description { color: var(--cream2) !important; }

/* Tabs */
.woocommerce-tabs ul.tabs li,
.tabs-inner ul.tabs li {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}
.woocommerce-tabs ul.tabs li.active,
.tabs-inner ul.tabs li.active {
  background: var(--bg3) !important;
  border-bottom-color: var(--bg3) !important;
}
.woocommerce-tabs ul.tabs li a,
.tabs-inner ul.tabs li a { color: var(--mid) !important; }
.woocommerce-tabs ul.tabs li.active a,
.tabs-inner ul.tabs li.active a { color: var(--cream) !important; }
.woocommerce-Tabs-panel,
.wc-tab { background: var(--bg2) !important; color: var(--cream2) !important; border-color: var(--border) !important; }

/* ── HEADINGS ────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--cream) !important;
}
p, li, span, div { color: inherit; }

/* Section titles from Flatsome builder */
.title-nav-wrap .title,
.products-heading,
.is-title,
.section-title-main { color: var(--cream) !important; font-family: var(--font-display) !important; }

/* ── FORMS ───────────────────────────────── */
input, textarea, select {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--cream) !important;
  border-radius: 4px !important;
  font-family: var(--font-body) !important;
}
input::placeholder, textarea::placeholder { color: var(--mid) !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--copper) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201,144,96,.2) !important;
}
label { color: var(--cream2) !important; }

/* ── SIDEBAR ─────────────────────────────── */
#sidebar,
.sidebar { background: transparent !important; }
.widget { background: var(--bg2) !important; border-radius: 8px !important; padding: 24px !important; border: 1px solid var(--border) !important; }
.widget-title { color: var(--cream) !important; font-family: var(--font-display) !important; }
.widget a { color: var(--cream2) !important; }
.widget a:hover { color: var(--copper) !important; }

/* ── CART & CHECKOUT ─────────────────────── */
.cart-container,
.woocommerce-cart-form,
#order_review,
.woocommerce-checkout-payment {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}
.cart_totals h2,
#order_review_heading { color: var(--cream) !important; font-family: var(--font-display) !important; }
table.shop_table {
  background: transparent !important;
  border-color: var(--border) !important;
}
table.shop_table th { color: var(--mid) !important; border-color: var(--border) !important; }
table.shop_table td { color: var(--cream) !important; border-color: var(--border) !important; }
.cart-subtotal th, .cart-subtotal td,
.order-total th, .order-total td { color: var(--cream) !important; }
.order-total .amount { color: var(--copper) !important; font-size: 22px !important; }

/* ── BREADCRUMBS ─────────────────────────── */
.breadcrumbs, .breadcrumbs a { color: var(--mid) !important; font-size: 12px !important; }
.breadcrumbs .current { color: var(--copper) !important; }

/* ── PAGINATION ──────────────────────────── */
.pagination a, .page-numbers a {
  background: var(--bg2) !important;
  color: var(--cream2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
}
.page-numbers.current { background: var(--copper) !important; color: var(--bg) !important; border-color: var(--copper) !important; }

/* ── FOOTER ──────────────────────────────── */
#footer,
.footer-wrapper,
.footer-bg,
.absolute-footer {
  background: #070707 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--mid) !important;
}
.footer-widget-area { background: #070707 !important; }
.footer-center { background: #070707 !important; }
#footer h4, #footer h5, .footer-widget h4 { color: var(--cream) !important; font-family: var(--font-display) !important; }
#footer a { color: var(--mid) !important; }
#footer a:hover { color: var(--copper) !important; }
.footer-bottom, .absolute-footer { color: var(--mid) !important; font-size: 12px !important; border-top: 1px solid var(--border) !important; }

/* ── NOTICES ─────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  background: var(--bg2) !important;
  border-top-color: var(--copper) !important;
  color: var(--cream) !important;
}
.woocommerce-error {
  background: rgba(180,50,50,.15) !important;
  border-top-color: #b43232 !important;
  color: var(--cream) !important;
}

/* ── LINKS ───────────────────────────────── */
a { color: var(--copper) !important; }
a:hover { color: var(--copper-l) !important; }
/* But nav/product title links */
nav a, .product-title a, h1 a, h2 a, h3 a { color: inherit !important; }

/* ── HIDE OLD BLUE NAV ROW ───────────────── */
/* Flatsome sometimes adds a colored bar for nav */
.nav-bar { background: var(--bg2) !important; border-bottom: 1px solid var(--border) !important; }

/* ── PRODUCT GRID SECTION HEADINGS ───────── */
.products-title,
.section-products .title {
  font-family: var(--font-display) !important;
  color: var(--cream) !important;
}
.products-title a { color: var(--copper) !important; }

/* ── SHOP FILTER/SORT ────────────────────── */
.woocommerce-ordering select,
.orderby {
  background: var(--bg2) !important;
  color: var(--cream) !important;
  border-color: var(--border) !important;
}

/* ── RATING STARS ────────────────────────── */
.star-rating span::before,
.star-rating::before { color: var(--copper) !important; }

/* ── SCROLLBAR ───────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--copper); }

/* ── WOOCOMMERCE ACCOUNT ─────────────────── */
.woocommerce-MyAccount-navigation { background: var(--bg2) !important; border-radius: 8px !important; }
.woocommerce-MyAccount-navigation ul li a { color: var(--cream2) !important; }
.woocommerce-MyAccount-navigation ul li.is-active a { color: var(--copper) !important; }

/* ── MISC CLEANUP ────────────────────────── */
hr { border-color: var(--border) !important; }
.divider { border-color: var(--border) !important; }
blockquote { border-left-color: var(--copper) !important; color: var(--cream2) !important; }

/* ── RESPONSIVE MOBILE ───────────────────── */
@media (max-width: 768px) {
  .nav-mobile, .mobile-menu {
    background: var(--bg2) !important;
    border-color: var(--border) !important;
  }
  .nav-mobile a { color: var(--cream2) !important; }
  .nav-mobile a:hover { color: var(--copper) !important; }
  .mobile-menu-toggle, .hamburger { color: var(--cream) !important; }
}

/* ── CUSTOM HOME HERO SECTION ────────────── */
.trastienda-hero {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--bg) !important;
}
.trastienda-hero__bg {
  position: absolute;
  inset: 0;
}
.trastienda-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  filter: brightness(.8);
}
.trastienda-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(14,14,14,.96) 42%, rgba(14,14,14,.15) 100%);
}
.trastienda-hero__content {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 80px 48px;
}
.trastienda-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,144,96,.15);
  border: 1px solid rgba(201,144,96,.3);
  color: var(--copper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 3px;
  margin-bottom: 28px;
  font-family: var(--font-body) !important;
}
.trastienda-hero__title {
  font-family: var(--font-display) !important;
  font-size: 64px;
  line-height: 1.0;
  color: var(--cream) !important;
  max-width: 640px;
  margin-bottom: 24px;
}
.trastienda-hero__title span { color: var(--copper) !important; }
.trastienda-hero__desc {
  font-size: 16px;
  color: var(--cream2) !important;
  max-width: 440px;
  line-height: 1.7;
  margin-bottom: 40px;
  font-weight: 300;
  font-family: var(--font-body) !important;
}
.trastienda-hero__ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.trastienda-hero__btn-primary {
  background: var(--copper) !important;
  color: var(--bg) !important;
  padding: 15px 40px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  border: none !important;
  transition: background .2s !important;
  font-family: var(--font-body) !important;
}
.trastienda-hero__btn-primary:hover { background: var(--copper-l) !important; color: var(--bg) !important; }
.trastienda-hero__btn-secondary {
  border: 1px solid rgba(245,240,232,.3) !important;
  color: var(--cream2) !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  transition: all .2s !important;
  font-family: var(--font-body) !important;
}
.trastienda-hero__btn-secondary:hover { border-color: var(--copper) !important; color: var(--copper) !important; }
.trastienda-hero__stats {
  display: flex;
  gap: 48px;
  margin-top: 56px;
}
.trastienda-hero__stat-num {
  font-family: var(--font-display) !important;
  font-size: 34px;
  color: var(--copper) !important;
  display: block;
}
.trastienda-hero__stat-label {
  font-size: 11px;
  color: var(--mid) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-body) !important;
}

/* ── CUSTOM PROD SECTION ─────────────────── */
.tr-section {
  padding: 72px 48px;
  max-width: 1300px;
  margin: 0 auto;
}
.tr-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
}
.tr-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--copper) !important;
  margin-bottom: 8px;
  font-family: var(--font-body) !important;
}
.tr-section-title {
  font-family: var(--font-display) !important;
  font-size: 32px;
  color: var(--cream) !important;
}
.tr-see-all {
  color: var(--copper) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 1px solid var(--copper);
  padding-bottom: 2px;
  font-family: var(--font-body) !important;
}
.tr-prod-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.tr-prod-card {
  background: var(--bg);
  cursor: pointer;
  transition: background .2s;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}
.tr-prod-card:hover { background: var(--bg2) !important; }
.tr-prod-img {
  height: 280px;
  overflow: hidden;
  position: relative;
  background: var(--bg2);
}
.tr-prod-card.big .tr-prod-img { height: 100%; min-height: 420px; }
.tr-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
  display: block;
}
.tr-prod-card:hover .tr-prod-img img { transform: scale(1.06); filter: brightness(1); }
.tr-prod-info { padding: 20px 24px; }
.tr-prod-cat {
  font-size: 10px;
  color: var(--mid) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: var(--font-body) !important;
}
.tr-prod-name {
  font-family: var(--font-display) !important;
  font-size: 17px;
  color: var(--cream) !important;
  margin-bottom: 8px;
  line-height: 1.2;
}
.tr-prod-price {
  font-size: 20px;
  font-weight: 900;
  color: var(--copper) !important;
  font-family: var(--font-body) !important;
}

/* ── CATEGORIES GRID ─────────────────────── */
.tr-cats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.tr-cat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none !important;
  display: block;
}
.tr-cat-card:hover { border-color: var(--copper) !important; background: var(--bg3) !important; }
.tr-cat-emoji { font-size: 24px; display: block; margin-bottom: 10px; }
.tr-cat-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--cream2) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--font-body) !important;
}
.tr-cat-card:hover .tr-cat-name { color: var(--copper) !important; }

/* ── VALUES STRIP ────────────────────────── */
/* ── VALUES / SERVICIOS — original ── */
.tr-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 0 48px 72px;
}
.tr-val {
  background: var(--bg);
  padding: 40px 32px;
}
.tr-val-icon {
  display: block;
  margin-bottom: 18px;
}
.tr-val-icon svg {
  color: var(--copper) !important;
  width: 28px !important;
  height: 28px !important;
}
.tr-val-title {
  font-family: var(--font-display) !important;
  font-size: 18px;
  color: var(--cream) !important;
  margin-bottom: 10px;
}
.tr-val-desc { font-size: 13px; color: var(--mid) !important; line-height: 1.6; font-family: var(--font-body) !important; }

/* ── EDITORIAL STRIP ─────────────────────── */
.tr-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
  background: var(--bg2);
}
.tr-editorial__left {
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tr-editorial__tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--copper) !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: var(--font-body) !important;
}
.tr-editorial__title {
  font-family: var(--font-display) !important;
  font-size: 40px;
  color: var(--cream) !important;
  line-height: 1.1;
  margin-bottom: 20px;
}
.tr-editorial__desc { font-size: 15px; color: var(--cream2) !important; font-weight: 300; line-height: 1.7; margin-bottom: 36px; font-family: var(--font-body) !important; }
.tr-editorial__btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--copper);
  color: var(--copper) !important;
  padding: 13px 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 3px;
  transition: all .2s;
  font-family: var(--font-body) !important;
  align-self: flex-start;
}
.tr-editorial__btn:hover { background: var(--copper) !important; color: var(--bg) !important; }
.tr-editorial__right { overflow: hidden; }
.tr-editorial__right img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); display: block; }

@media (max-width: 900px) {
  .trastienda-hero__title { font-size: 40px; }
  .tr-prod-grid { grid-template-columns: 1fr 1fr; }
  .tr-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .tr-values { grid-template-columns: 1fr 1fr; margin: 0 24px 60px; }
  .tr-editorial { grid-template-columns: 1fr; }
  .tr-editorial__right { min-height: 280px; }
}

/* ── MOBILE < 480px ──────────────────────── */
@media (max-width: 480px) {
  .trastienda-hero { min-height: 90vh; padding: 40px 20px 60px; }
  .trastienda-hero__title { font-size: 32px; line-height: 1.1; }
  .trastienda-hero__sub { font-size: 13px; }
  .trastienda-hero__buttons { flex-direction: column; gap: 12px; }
  .trastienda-hero__buttons a { width: 100%; text-align: center; }
  .trastienda-hero__stats { gap: 24px; }

  .tr-prod-grid {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }
  .tr-prod-card.big .tr-prod-img { min-height: 300px; }
  .tr-prod-img { height: 220px; }

  .tr-cats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .tr-cat-card { padding: 20px 12px; }

  .tr-values { grid-template-columns: 1fr !important; gap: 12px; margin: 0 16px 48px; }
  .tr-val { padding: 28px 24px; transform: none !important; }

  .tr-editorial { grid-template-columns: 1fr; }
  .tr-editorial__right { min-height: 220px; order: -1; }

  /* WC product grid mobile */
  ul.products.columns-4,
  ul.products.columns-3 { grid-template-columns: 1fr 1fr !important; }
}

/* ── PAGE TITLE BAR (copper → dark) ──────── */
.page-title,
.page-title-bar,
.shop-page-title,
.category-page-title,
.featured-title,
.archive-header,
.woocommerce-products-header {
  background: var(--bg2) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
}
.page-title h1,
.page-title .title,
.archive-title,
.woocommerce-products-header h1 {
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
}
/* Breadcrumbs */
.woocommerce-breadcrumb,
.breadcrumbs,
nav.woocommerce-breadcrumb {
  color: var(--mid) !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
}
.woocommerce-breadcrumb a,
.breadcrumbs a { color: var(--copper) !important; }
.woocommerce-breadcrumb a:hover,
.breadcrumbs a:hover { color: var(--copper-l) !important; }

/* ── SHOP SIDEBAR ────────────────────────── */
.sidebar-column .col-inner,
.sidebar-inner,
.widget-area,
.col-sidebar {
  background: transparent !important;
}
.widget,
.sidebar .widget,
.woocommerce-widget-layered-nav,
.widget_product_categories,
.widget_price_filter {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.widget-title,
.widgettitle,
.widget > h2,
.widget > h3 {
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
/* Category list in sidebar */
.product-categories li,
.widget_product_categories li {
  border-bottom: 1px solid var(--border) !important;
  padding: 6px 0 !important;
}
.product-categories li a,
.widget_product_categories li a {
  color: var(--cream2) !important;
  font-size: 13px !important;
}
.product-categories li a:hover,
.widget_product_categories li a:hover { color: var(--copper) !important; }
/* White unnamed div inside sidebar */
.sidebar-inner > div,
.col-sidebar > div { background: transparent !important; }
/* Dropdown arrows */
.woocommerce-widget-layered-nav-list .count,
.product-categories .count { color: var(--mid) !important; }

/* ── PRICE SLIDER ────────────────────────── */
.price_slider.ui-slider { background: var(--border) !important; height: 3px !important; }
.ui-slider-range { background: var(--copper) !important; }
.ui-slider-handle {
  background: var(--copper) !important;
  border-color: var(--copper) !important;
  border-radius: 50% !important;
  width: 14px !important; height: 14px !important;
}
.price_slider_amount .button {
  background: var(--copper) !important;
  color: var(--bg) !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}
.price_slider_amount .price { color: var(--cream2) !important; }

/* ── LIVE SEARCH RESULTS ─────────────────── */
.live-search-results,
.autocomplete-suggestions {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--cream) !important;
}
.live-search-results a,
.autocomplete-suggestion { color: var(--cream2) !important; }
.live-search-results a:hover,
.autocomplete-suggestion:hover { background: var(--bg3) !important; color: var(--copper) !important; }

/* ── SORT DROPDOWN ───────────────────────── */
.woocommerce-ordering .orderby,
select.orderby {
  background: var(--bg2) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  font-size: 12px !important;
}

/* ── FLATSOME UX BUILDER BANNER COLOR OVERRIDES ── */
/* Flatsome generates per-ID rules in <style> tags — !important beats non-important ID rules */
/* Only override banner color (not image banners — image covers the bg anyway) */
[id^="banner-"] {
  background-color: var(--bg2) !important;
}
/* But allow copper accent banners used for section headers — copper is intentional */
.shop-page-title[id^="banner-"],
.page-title[id^="banner-"] {
  background-color: var(--bg2) !important;
}

/* ── GUTENBERG PRESET BACKGROUND OVERRIDES ── */
/* WordPress block editor applies !important on preset colors — match specificity */
:root .has-vivid-purple-background-color,
:root .has-purple-background-color,
:root .has-pale-pink-background-color,
:root .has-luminous-vivid-amber-background-color,
:root .has-light-green-cyan-background-color,
:root .has-vivid-green-cyan-background-color,
:root .has-pale-cyan-blue-background-color,
:root .has-vivid-cyan-blue-background-color,
:root .has-vivid-purple-crush-gradient-background,
:root [class*="has-"][class*="-background-color"] {
  background-color: var(--bg2) !important;
  color: var(--cream) !important;
}

/* ── CONTACT SECTION / GREY BOXES ────────── */
.ux-widget-box,
.box,
[class*="contact-box"],
.gform_wrapper,
.contact-info-box,
.wpb_wrapper .vc_column-inner {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--cream) !important;
}
/* Gravity / CF7 forms */
.gform_wrapper input,
.gform_wrapper textarea,
.wpcf7-form input,
.wpcf7-form textarea,
.contact-form input,
.contact-form textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--cream) !important;
}
/* Generic white section boxes */
.section-box,
.content-box,
.dark-bg ~ .light-section {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════
   SHOP UX OVERHAUL v1.8
   ═══════════════════════════════════════════ */

/* ── Product cards: remove white info box, add gap ── */
.product-small .box,
li.product .box,
.product-small .box-text,
li.product .box-text,
.product-small .box-text-inner,
li.product .box-text-inner,
.product-small .box-image + div,
.woocommerce ul.products li.product .product-info,
.product-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Products grid gap */
ul.products.columns-4,
ul.products.columns-3,
ul.products {
  gap: 16px !important;
  row-gap: 20px !important;
}

/* ── Wishlist button → heart icon bottom-right of image ── */
/* YITH container: show, position at bottom-right of product image */
li.product .yith-wcwl-add-to-wishlist,
.product-small .yith-wcwl-add-to-wishlist {
  display: block !important;
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  top: auto !important;
  left: auto !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Make sure image wrapper is relative */
li.product .box-image,
.product-small .box-image {
  position: relative !important;
  overflow: visible !important;
}
/* Style the link as circle heart button */
li.product .yith-wcwl-add-to-wishlist a.add_to_wishlist,
.product-small .yith-wcwl-add-to-wishlist a.add_to_wishlist {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(14,14,14,0.80) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  font-size: 0 !important;        /* hide text */
  text-indent: -9999px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  transition: border-color .2s, background .2s !important;
}
li.product .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover,
.product-small .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover {
  background: rgba(224,85,85,0.20) !important;
  border-color: #e05555 !important;
}
/* Heart icon via ::before pseudo-element */
li.product .yith-wcwl-add-to-wishlist a.add_to_wishlist::before,
.product-small .yith-wcwl-add-to-wishlist a.add_to_wishlist::before {
  content: '♡' !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: var(--cream2) !important;
  text-indent: 0 !important;
  display: block !important;
}
li.product .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover::before,
.product-small .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover::before {
  color: #e05555 !important;
}
/* Already added — filled heart */
li.product .yith-wcwl-add-to-wishlist a.add_to_wishlist.added::before,
.product-small .yith-wcwl-add-to-wishlist a.add_to_wishlist.added::before {
  content: '♥' !important;
  color: #e05555 !important;
}
/* Hide YITH icon inside link (we use ::before) */
li.product .yith-wcwl-add-to-wishlist .yith-wcwl-icon,
.product-small .yith-wcwl-add-to-wishlist .yith-wcwl-icon { display: none !important; }
/* Hide feedback text popup */
.yith-wcwl-add-to-wishlist .feedback,
.yith-wcwl-add-to-wishlist .ajax-loading { display: none !important; }

/* Heart via image-tools overlay in Flatsome (fallback) */
.product-small .image-tools,
li.product .image-tools {
  background: transparent !important;
}

/* ── Page title bar — remove background box ── */
.page-title,
.page-title-bar,
.shop-page-title,
.category-page-title,
.featured-title,
.archive-header {
  background: transparent !important;
  background-image: none !important;
  border-bottom: none !important;
  padding-top: 20px !important;
  padding-bottom: 10px !important;
}

/* ── Contact/nav bar — remove box ── */
.header-contact-wrapper,
.nav.header-contact,
.nav-contact-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Catalog ordering — keep visible (sidebar shows it via PHP too) ── */
/* Only hide the top one via PHP hook — keep CSS minimal */
.tr-sort-widget .woocommerce-ordering,
.widget.tr-sort-widget form.woocommerce-ordering { display: block !important; }
.tr-sort-widget select.orderby {
  width: 100% !important;
  background: var(--bg3) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ── Search bar — remove category "Todo" filter + fix icon ── */
.search-form .searchform-cat,
.header-search-form-wrapper .searchform-cat,
.ux-search-box .searchform-cat,
select.search-cats,
.search-cats-wrapper,
.search-form-categories,
[class*="search-cat"] { display: none !important; }

/* Search bar — centered in header row */
li.header-search-form.search-form,
.nav > li.header-search-form {
  max-width: 480px !important;
  width: 480px !important;
  flex: 1 1 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Search input full width, icon inside right */
.header-search-form-wrapper,
.ux-search-box { position: relative !important; width: 100% !important; }
.searchform-wrapper.form-flat,
.ux-search-box.form-flat { border-bottom: none !important; box-shadow: none !important; }
.searchform-wrapper.form-flat::after,
.ux-search-box.form-flat::after { display: none !important; }
.search-field,
.header-search-form-wrapper input[type="search"],
.ux-search-box input[type="search"] {
  padding-right: 44px !important;
  padding-left: 16px !important;
  border-radius: 4px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cream) !important;
}
.ux-search-submit,
.header-search-form-wrapper button[type="submit"],
.searchform button {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: var(--mid) !important;
  padding: 0 12px !important;
  height: 100% !important;
}

/* Remove border/divider below search */
.header-search-form-wrapper::after,
.header-bg::after,
.header-inner::after,
#header::after { display: none !important; }
.is-divider, .header-divider,
.header-bottom .divider { display: none !important; }

/* ── WISHLIST FIX (scoped to product cards only) ── */
/* Hide YITH popup text in cards */
.product-small .wishlist-popup,
li.product .wishlist-popup { display: none !important; }

/* Flatsome .wishlist-icon div — ONLY inside product cards */
.product-small div.wishlist-icon,
li.product div.wishlist-icon {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  top: auto !important;
  left: auto !important;
  z-index: 5 !important;
  background: rgba(14,14,14,0.75) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  transition: border-color .2s, color .2s !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.product-small div.wishlist-icon:hover,
li.product div.wishlist-icon:hover { border-color: #e05555 !important; }
.product-small div.wishlist-icon i,
li.product div.wishlist-icon i { color: var(--cream2) !important; font-size: 15px !important; }
.product-small div.wishlist-icon:hover i,
li.product div.wishlist-icon:hover i { color: #e05555 !important; }

/* Hide ALL YITH text/links inside product cards — nuclear */
.product-small .yith-wcwl-add-to-wishlist *,
li.product .yith-wcwl-add-to-wishlist * { display: none !important; }
/* But show the Flatsome wishlist button inside .wishlist-icon */
.product-small div.wishlist-icon *,
li.product div.wishlist-icon * { display: flex !important; }
.product-small div.wishlist-icon i,
li.product div.wishlist-icon i {
  display: inline !important;
  font-size: 15px !important;
  color: var(--cream2) !important;
}

/* ── Header wishlist icon — restore normal inline display ── */
.header-wishlist-icon i.wishlist-icon,
.header-wishlist i.wishlist-icon,
a[class*="wishlist"] i.wishlist-icon,
#header i.wishlist-icon {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  color: var(--cream2) !important;
  font-size: inherit !important;
}

/* ── HIDE SEARCH CATEGORY DROPDOWN ── */
select.search_categories,
.search_categories,
.resize-select.search_categories,
.searchform-wrap select,
.ux-search-box select { display: none !important; }

/* ── YITH wishlist modal/popup — fix dark theme contrast ── */
.yith-wcwl-popup,
.yith_wcwl_popup,
.wishlist-popup,
#yith-wcwl-popup-wrapper,
.yith-wcwl-notices-wrapper,
.woocommerce-message.yith-wcwl {
  background: var(--bg2) !important;
  color: var(--cream) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.yith-wcwl-popup a,
.yith_wcwl_popup a,
.yith-wcwl-notices-wrapper a {
  color: var(--copper) !important;
}
/* YITH added notification toast */
.yith-wcwl-popup .woocommerce-message,
.yith-wcwl-popup .message-content,
.yith-wcwl-popup p {
  color: var(--cream) !important;
  background: var(--bg2) !important;
}

/* ══════════════════════════════════════════════════════════
   UI/UX IMPROVEMENTS — ACCESSIBILITY & INTERACTION
══════════════════════════════════════════════════════════ */

/* ── 1. Touch target mínimo 44×44px (wishlist, botones icono) ── */
li.product .yith-wcwl-add-to-wishlist a.add_to_wishlist,
.product-small .yith-wcwl-add-to-wishlist a.add_to_wishlist {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
}
.ux-search-submit,
.header-search-form-wrapper button[type="submit"] {
  min-width: 44px !important;
  min-height: 44px !important;
}
.nav-icon, .header-button, .cart-icon, .mobile-nav-icon {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ── 2. cursor: pointer en todos los elementos clickables ── */
.tr-prod-card,
.tr-cat-card,
.tr-val,
li.product,
li.product a,
.product-small a,
.add_to_cart_button,
.button,
a.button,
.yith-wcwl-add-to-wishlist a,
.header-search-form-wrapper button,
.nav > li > a,
[role="button"] {
  cursor: pointer !important;
}

/* ── 3. Hover transitions suaves en product cards (150-300ms) ── */
li.product .box-image img,
.product-small .box-image img {
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
li.product:hover .box-image img,
.product-small:hover .box-image img {
  transform: scale(1.04) !important;
  filter: brightness(0.92) !important;
}
li.product .product-meta,
.product-small .product-meta,
li.product .woocommerce-loop-product__title,
.product-small .woocommerce-loop-product__title {
  transition: color 0.2s ease !important;
}
li.product:hover .woocommerce-loop-product__title,
.product-small:hover .woocommerce-loop-product__title {
  color: var(--copper) !important;
}
/* Cart button hover */
.add_to_cart_button,
a.button,
.button {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ── 4. prefers-reduced-motion — respetar preferencia usuario ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  li.product:hover .box-image img,
  .product-small:hover .box-image img {
    transform: none !important;
  }
}

/* ── 5. touch-action: manipulation — elimina 300ms tap delay ── */
a, button, [role="button"],
.add_to_cart_button,
.yith-wcwl-add-to-wishlist a,
.tr-cat-card, .tr-prod-card {
  touch-action: manipulation;
}

/* ── 6. Skeleton loading — WooCommerce productos AJAX ── */
ul.products:empty::before,
ul.products.loading::before {
  content: '';
  display: block;
  width: 100%;
}
/* Shimmer placeholders cuando products está vacío y cargando */
.woocommerce-js ul.products:empty {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  min-height: 300px !important;
}
.woocommerce-js ul.products:empty::after {
  content: '';
  grid-column: 1 / -1;
  background: linear-gradient(90deg,
    var(--bg2) 25%,
    var(--bg3, #1c1c1c) 50%,
    var(--bg2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  height: 280px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes shimmer { 0%, 100% { background-position: 0 0; } }
}

/* ── 7. Precio tachado (oferta) — contraste en oscuro ── */
.price del,
.woocommerce-Price-amount del,
span.price del,
.product .price del {
  color: var(--mid) !important;
  opacity: 1 !important;
  text-decoration-color: var(--mid) !important;
}
.price ins,
.woocommerce-Price-amount ins,
span.price ins {
  text-decoration: none !important;
  font-weight: 700 !important;
  color: var(--copper) !important;
}

/* ── 8. SVG category icons — tamaño y color ── */
.tr-cat-icon svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--copper) !important;
  display: block !important;
  margin: 0 auto 8px !important;
}
.tr-cat-card:hover .tr-cat-icon svg {
  color: var(--cream) !important;
}
/* Ocultar la class anterior de emoji */
.tr-cat-emoji { display: none !important; }

/* ══════════════════════════════════════════════════════════
   SERVICIOS PAGE — page-3979
══════════════════════════════════════════════════════════ */
.tr-servicios-page {
  background: var(--bg);
  min-height: 60vh;
}

/* Hero */
.tr-srv-hero {
  padding: 72px 48px 64px;
  max-width: 860px;
}
.tr-srv-hero__title {
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--cream) !important;
  line-height: 1.1;
  margin: 12px 0 20px !important;
  font-weight: 700;
}
.tr-srv-hero__desc {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.7;
  max-width: 600px;
  font-family: var(--font-body);
}

/* Cards grid */
.tr-srv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 48px 80px;
}
.tr-srv-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  touch-action: manipulation;
}
.tr-srv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--copper), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.tr-srv-card:hover {
  border-color: rgba(201,144,96,0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(201,144,96,0.1);
  transform: translateY(-4px);
}
.tr-srv-card:hover::before { opacity: 1; }

/* Icon */
.tr-srv-card__icon-wrap {
  width: 96px; height: 96px;
  background: rgba(201,144,96,0.07);
  border: 1px solid rgba(201,144,96,0.18);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  padding: 16px;
  transition: background 0.3s, border-color 0.3s;
}
.tr-srv-card:hover .tr-srv-card__icon-wrap {
  background: rgba(201,144,96,0.14);
  border-color: rgba(201,144,96,0.35);
}
.tr-srv-card__icon {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(0deg);
  /* Makes icon appear in copper tone */
  filter: invert(68%) sepia(32%) saturate(500%) hue-rotate(342deg) brightness(95%) contrast(90%);
}

/* Tag */
.tr-srv-card__tag {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 10px;
  font-weight: 600;
}

/* Title */
.tr-srv-card__title {
  font-family: var(--font-display) !important;
  font-size: 26px;
  color: var(--cream) !important;
  margin: 0 0 16px !important;
  line-height: 1.2;
  font-weight: 700;
}

/* Description */
.tr-srv-card__desc {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 24px;
  font-family: var(--font-body);
}

/* Feature list */
.tr-srv-card__features {
  list-style: none !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-srv-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--cream2, #d4c5b0);
  font-family: var(--font-body);
  line-height: 1.5;
}
.tr-srv-card__features li svg {
  flex-shrink: 0;
  color: var(--copper);
  margin-top: 1px;
}

/* CTA Button */
.tr-srv-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--copper);
  color: #0e0e0e !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  min-height: 44px;
  touch-action: manipulation;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  letter-spacing: 0.3px;
}
.tr-srv-card__btn:hover {
  background: #d9a570;
  box-shadow: 0 4px 16px rgba(201,144,96,0.35);
  transform: translateY(-1px);
  color: #0e0e0e !important;
}

/* Bottom CTA strip */
.tr-srv-cta {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 60px 48px;
}
.tr-srv-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.tr-srv-cta__title {
  font-family: var(--font-display) !important;
  font-size: 28px;
  color: var(--cream) !important;
  margin: 0 0 14px !important;
  font-weight: 700;
}
.tr-srv-cta__desc {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 28px;
  font-family: var(--font-body);
}
.tr-srv-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--copper) !important;
  border: 1px solid var(--copper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 8px;
  text-decoration: none !important;
  min-height: 44px;
  touch-action: manipulation;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  letter-spacing: 0.3px;
}
.tr-srv-cta__btn:hover {
  background: var(--copper);
  color: #0e0e0e !important;
  box-shadow: 0 4px 16px rgba(201,144,96,0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .tr-srv-hero { padding: 48px 24px 40px; }
  .tr-srv-cards { grid-template-columns: 1fr; padding: 0 24px 60px; gap: 16px; }
  .tr-srv-card { padding: 28px 24px; }
  .tr-srv-cta { padding: 48px 24px; }
}
@media (max-width: 480px) {
  .tr-srv-hero { padding: 36px 16px 28px; }
  .tr-srv-cards { padding: 0 16px 48px; }
  .tr-srv-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   BLOG — archive (home.php) + single (single.php)
══════════════════════════════════════════════════════════ */

/* ── Blog archive ── */
.tr-blog-page { background: var(--bg); min-height: 60vh; }

.tr-blog-hero {
  padding: 64px 48px 52px;
}
.tr-blog-hero__title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 4vw, 48px);
  color: var(--cream) !important;
  margin: 12px 0 16px !important;
  font-weight: 700;
  line-height: 1.15;
}
.tr-blog-hero__desc {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.65;
  max-width: 520px;
  font-family: var(--font-body);
}

.tr-blog-grid-wrap { padding: 0 48px 80px; }

.tr-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Featured first card spans full width */
.tr-blog-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.tr-blog-card--featured .tr-blog-card__img-wrap {
  border-radius: 12px 0 0 12px;
}
.tr-blog-card--featured .tr-blog-card__body {
  border-radius: 0 12px 12px 0;
  padding: 40px 36px;
}
.tr-blog-card--featured .tr-blog-card__title { font-size: 26px; }
.tr-blog-card--featured .tr-blog-card__excerpt { display: block; }

.tr-blog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  touch-action: manipulation;
  cursor: pointer;
}
.tr-blog-card:hover {
  border-color: rgba(201,144,96,.45);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.tr-blog-card__img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.tr-blog-card--featured .tr-blog-card__img-wrap {
  aspect-ratio: auto;
  height: 100%;
  min-height: 340px;
}
.tr-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.tr-blog-card:hover .tr-blog-card__img { transform: scale(1.04); }

.tr-blog-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tr-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tr-blog-card__cat {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 700;
  font-family: var(--font-body);
}
.tr-blog-card__date {
  font-size: 12px;
  color: var(--mid);
  font-family: var(--font-body);
}
.tr-blog-card__title {
  font-family: var(--font-display) !important;
  font-size: 17px;
  color: var(--cream) !important;
  line-height: 1.3;
  margin: 0 !important;
  font-weight: 700;
}
.tr-blog-card__title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .2s;
}
.tr-blog-card:hover .tr-blog-card__title a { color: var(--copper) !important; }
.tr-blog-card__excerpt {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.6;
  display: none;
  font-family: var(--font-body);
  margin: 0;
}
.tr-blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--copper) !important;
  text-decoration: none !important;
  font-family: var(--font-body);
  margin-top: auto;
  transition: gap .2s;
}
.tr-blog-card:hover .tr-blog-card__link { gap: 10px; }

.tr-blog-pagination {
  margin-top: 48px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tr-blog-pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--mid) !important;
  text-decoration: none !important;
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color .2s, color .2s;
}
.tr-blog-pagination .page-numbers.current,
.tr-blog-pagination .page-numbers:hover {
  border-color: var(--copper);
  color: var(--copper) !important;
}

/* ── Single post ── */
.tr-post-page { background: var(--bg); }

.tr-post-hero { position: relative; min-height: 480px; display: flex; align-items: flex-end; }
.tr-post-hero__img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tr-post-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.6);
}
.tr-post-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,14,14,.95) 0%, rgba(14,14,14,.3) 60%, transparent 100%);
}
.tr-post-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 48px 52px;
  max-width: 860px;
  width: 100%;
}
.tr-post-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.tr-post-hero__cat {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 700;
  text-decoration: none !important;
  font-family: var(--font-body);
}
.tr-post-hero__date {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-family: var(--font-body);
}
.tr-post-hero__title {
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 4vw, 44px);
  color: #fff !important;
  line-height: 1.15;
  margin: 0 0 16px !important;
  font-weight: 700;
}
.tr-post-hero__excerpt {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  max-width: 560px;
  font-family: var(--font-body);
  margin: 0;
}

.tr-post-wrap { max-width: 780px; margin: 0 auto; padding: 56px 48px 80px; }

/* Post content typography */
.tr-post-content { font-family: var(--font-body); }
.tr-post-content h2 {
  font-family: var(--font-display) !important;
  font-size: 22px;
  color: var(--cream) !important;
  margin: 40px 0 16px !important;
  font-weight: 700;
  line-height: 1.3;
}
.tr-post-content h3 {
  font-family: var(--font-display) !important;
  font-size: 18px;
  color: var(--cream) !important;
  margin: 28px 0 12px !important;
  font-weight: 700;
}
.tr-post-content p {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 18px !important;
}
.tr-post-content a {
  color: var(--copper) !important;
  text-decoration: underline;
  text-decoration-color: rgba(201,144,96,.4);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.tr-post-content a:hover { text-decoration-color: var(--copper); }
.tr-post-content ul, .tr-post-content ol {
  padding-left: 20px !important;
  margin-bottom: 18px !important;
}
.tr-post-content li {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 6px;
}
.tr-post-content strong { color: var(--cream); }
.tr-post-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px 0;
  display: block;
}
/* Product callout boxes */
.tr-product-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--copper);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 28px 0;
  text-decoration: none !important;
  transition: border-color .2s, box-shadow .2s;
  touch-action: manipulation;
}
.tr-product-cta:hover {
  border-color: rgba(201,144,96,.6);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.tr-product-cta__label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--copper);
  font-family: var(--font-body);
  font-weight: 700;
  white-space: nowrap;
}
.tr-product-cta__name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--cream) !important;
  font-weight: 700;
}
.tr-product-cta__arrow {
  margin-left: auto;
  color: var(--copper);
  flex-shrink: 0;
}

.tr-post-back {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.tr-post-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mid) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-family: var(--font-body);
  transition: color .2s, gap .2s;
}
.tr-post-back__link:hover { color: var(--copper) !important; gap: 12px; }

.tr-post-related { margin-top: 56px; }
.tr-post-related__title {
  font-family: var(--font-display) !important;
  font-size: 20px;
  color: var(--cream) !important;
  margin: 0 0 24px !important;
  font-weight: 700;
}
.tr-post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tr-post-related__card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color .2s, transform .2s;
  touch-action: manipulation;
}
.tr-post-related__card:hover {
  border-color: rgba(201,144,96,.4);
  transform: translateY(-2px);
}
.tr-post-related__img-wrap { aspect-ratio: 16/9; overflow: hidden; }
.tr-post-related__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tr-post-related__card:hover .tr-post-related__img { transform: scale(1.05); }
.tr-post-related__body { padding: 14px 16px; }
.tr-post-related__date { font-size: 11px; color: var(--mid); font-family: var(--font-body); margin-bottom: 4px; }
.tr-post-related__name { font-family: var(--font-display); font-size: 13px; color: var(--cream) !important; font-weight: 700; line-height: 1.3; margin: 0; }

/* Responsive blog */
@media (max-width: 1024px) {
  .tr-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .tr-blog-card--featured { grid-template-columns: 1fr; }
  .tr-blog-card--featured .tr-blog-card__img-wrap { border-radius: 12px 12px 0 0; min-height: 260px; height: 260px; }
  .tr-blog-card--featured .tr-blog-card__body { border-radius: 0 0 12px 12px; }
}
@media (max-width: 768px) {
  .tr-blog-hero { padding: 40px 24px 32px; }
  .tr-blog-grid-wrap { padding: 0 24px 60px; }
  .tr-blog-grid { grid-template-columns: 1fr; }
  .tr-post-hero { min-height: 360px; }
  .tr-post-hero__content { padding: 32px 24px 36px; }
  .tr-post-wrap { padding: 36px 24px 60px; }
  .tr-post-related__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tr-blog-hero { padding: 28px 16px 24px; }
  .tr-blog-grid-wrap { padding: 0 16px 48px; }
  .tr-blog-card:hover { transform: none; }
  .tr-post-hero__content { padding: 24px 16px 28px; }
  .tr-post-wrap { padding: 28px 16px 48px; }
}

/* ── Product cards inline (blog articles) ── */
.tr-pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.tr-pc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.tr-pc:hover {
  border-color: rgba(201,144,96,.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.tr-pc__link {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
}
.tr-pc__img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg3, #1a1a1a);
}
.tr-pc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.tr-pc:hover .tr-pc__img { transform: scale(1.05); }
.tr-pc__body {
  padding: 14px 14px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tr-pc__name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--cream) !important;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}
.tr-pc__price {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--copper);
  font-weight: 700;
  display: block;
}
.tr-pc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 14px 14px;
  padding: 9px 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--copper) !important;
  transition: background .2s, border-color .2s;
}
.tr-pc:hover .tr-pc__btn {
  background: rgba(201,144,96,.1);
  border-color: rgba(201,144,96,.4);
}
/* Single card — don't stretch too wide */
.tr-pc-grid:has(.tr-pc:only-child) {
  grid-template-columns: minmax(180px, 260px);
}
@media (max-width: 480px) {
  .tr-pc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}