/* ================================================================
   TRENDIY REDESIGN — "Bold Deals" design system
   Delivered via crash-safe Novamira sandbox. Astra theme untouched.
   Sections: 1 Tokens 2 Foundations/a11y 3 Buttons 4 Header 5 Home
   6 Catalog 7 Product 8 Cart 9 Footer 10 Motion.
   NOTE: the mobile CART grid + much mobile UX live in Code Snippet
   #271 ("Mobile Optimization"). We do NOT duplicate/override those
   here — only additive helpers — to avoid cascade conflicts.
   ================================================================ */

/* 1 ── TOKENS */
:root{
  --tr-bg:#FFFFFF; --tr-surface:#FAFAF9; --tr-ink:#1C1917; --tr-muted:#78716C;
  --tr-border:#E7E5E4; --tr-border-2:#F3EEEF; --tr-accent:#D81B45; --tr-accent-2:#F0D0D8;
  --tr-grad:linear-gradient(120deg,#FF6A00,#FF424F 45%,#C2185B 80%,#8E0E3E);
  --tr-r-sm:10px; --tr-r-md:14px; --tr-r-lg:20px; --tr-r-pill:999px;
  --tr-shadow:0 8px 24px -10px rgba(142,14,62,.22);
}

/* 2 ── FOUNDATIONS + A11Y */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--tr-accent); outline-offset:2px; border-radius:var(--tr-r-sm);
}
::selection{ background:var(--tr-accent); color:#fff; }

/* 3 ── BUTTON SYSTEM */
body.woocommerce a.button, body.woocommerce button.button, body.woocommerce input.button,
body.woocommerce a.button.alt, body.woocommerce button.button.alt,
body.woocommerce .single_add_to_cart_button, body.woocommerce ul.products li.product a.button,
body.woocommerce a.add_to_cart_button, body.woocommerce a.button.product_type_variable,
body.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .pb-atc, .wc-block-components-button{
  background-color:var(--tr-accent) !important; background-image:none !important; color:#fff !important;
  border:none !important; border-radius:var(--tr-r-pill) !important; font-weight:800 !important;
  box-shadow:none !important; transition:transform .12s ease, filter .12s ease;
}
body.woocommerce a.button:hover, body.woocommerce button.button:hover,
body.woocommerce .single_add_to_cart_button:hover, .pb-atc:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ filter:brightness(1.06); }
body.woocommerce a.button:active, body.woocommerce button.button:active, .pb-atc:active{ transform:translateY(1px); }
.pb-buy{ background:var(--tr-ink) !important; color:#fff !important; border:none !important;
  border-radius:var(--tr-r-pill) !important; font-weight:800 !important; transition:transform .12s ease, filter .12s ease; }
.pb-buy:hover{ filter:brightness(1.12); } .pb-buy:active{ transform:translateY(1px); }
.pb-cart{ border:1px solid var(--tr-border) !important; border-radius:var(--tr-r-pill) !important; }
body.woocommerce a.button.disabled, body.woocommerce button.button:disabled,
body.woocommerce button.button[disabled], .pb-atc:disabled, .pb-buy:disabled, [aria-disabled="true"]{
  opacity:.5 !important; cursor:not-allowed !important; filter:none !important; transform:none !important;
}
body.woocommerce .button.loading{ opacity:.75 !important; }

/* 4 ── HEADER */
.th-promo{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
           mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }

/* 5 ── HOME */
.th-timer{ display:none !important; }
.thm-hero h1{ line-height:1.04; letter-spacing:-.02em; }
.thm-hero p{ line-height:1.5; }
.th-stats b{ line-height:1; letter-spacing:-.01em; }
.thm-cta, .thm-cta2{ border-radius:var(--tr-r-pill) !important; font-weight:800 !important;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.thm-cta:hover{ filter:brightness(1.03); box-shadow:var(--tr-shadow); }
.thm-cta:active, .thm-cta2:active{ transform:translateY(1px); }
.thm-card{ border:1px solid var(--tr-border); border-radius:var(--tr-r-md); overflow:hidden; background:var(--tr-bg);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.thm-card:hover{ transform:translateY(-3px); box-shadow:var(--tr-shadow); border-color:var(--tr-accent-2); }
.thm-imgwrap{ position:relative; aspect-ratio:1/1; background:var(--tr-surface); overflow:hidden; }
.thm-img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
.thm-price{ font-weight:800; color:var(--tr-ink); }
.thm-badge{ background:var(--tr-accent) !important; color:#fff !important; border-radius:var(--tr-r-pill); font-weight:800; }
.thm-catgrid{ gap:12px; }
.thm-cat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:14px 10px;
  background:var(--tr-bg); border:1px solid var(--tr-border); border-radius:var(--tr-r-md);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.thm-cat:hover{ transform:translateY(-3px); box-shadow:var(--tr-shadow); border-color:var(--tr-accent-2); }
.thm-cat img{ width:100%; max-width:132px; aspect-ratio:1/1; object-fit:cover; background:var(--tr-surface);
  border:1px solid var(--tr-border); display:block; }
.thm-cn{ font-weight:800; color:var(--tr-ink); font-size:14px; line-height:1.2; }
.thm-cc{ font-size:12px; color:var(--tr-muted); font-weight:600; }
@media (max-width:768px){
  .thm-hero{ padding-top:20px !important; padding-bottom:22px !important; }
  .thm-hero .th-hr{ display:none !important; }
  .thm-hero h1{ font-size:clamp(26px,8vw,34px); margin:6px 0 8px; }
  .thm-hero p{ font-size:14px; margin:0 0 14px; }
  .th-stats{ gap:8px 10px; margin-top:14px; } .th-stats b{ font-size:20px; } .th-stats span{ font-size:11px; }
}

/* 6 ── CATALOG */
.woocommerce ul.products li.product img{ border-radius:var(--tr-r-sm) !important; aspect-ratio:1/1; object-fit:cover; }
.woocommerce ul.products li.product .price{ font-weight:800; color:var(--tr-ink); }
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount{ color:var(--tr-muted) !important; font-weight:600; opacity:.85; }
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount{ color:var(--tr-accent) !important; text-decoration:none; }
.woocommerce span.onsale{ background:var(--tr-accent) !important; color:#fff !important;
  border-radius:var(--tr-r-pill) !important; font-weight:800 !important; box-shadow:none !important; }

/* 7 ── PRODUCT (compact quantity stepper) */
.trd-qty{ display:inline-flex !important; align-items:stretch; width:max-content !important; height:44px;
  border:1px solid var(--tr-border); border-radius:var(--tr-r-pill); background:var(--tr-bg); overflow:hidden; vertical-align:middle; }
.trd-qty .trd-qbtn{ width:40px !important; min-width:40px; border:none !important; background:var(--tr-surface) !important;
  color:var(--tr-ink) !important; font-size:20px !important; font-weight:700 !important; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0 !important; border-radius:0 !important; transition:background .12s ease; }
.trd-qty .trd-qbtn:hover{ background:var(--tr-border-2) !important; }
.trd-qty .trd-qbtn:active{ background:var(--tr-accent-2) !important; }
.trd-qty input.qty{ width:46px !important; height:100% !important; border:none !important;
  border-left:1px solid var(--tr-border) !important; border-right:1px solid var(--tr-border) !important;
  text-align:center; font-weight:800 !important; background:transparent !important; box-shadow:none !important; -moz-appearance:textfield; }
.trd-qty input.qty::-webkit-outer-spin-button, .trd-qty input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* 8 ── CART — native compact grid lives in Code Snippet #271; here only the
   styling for the JS-injected variation label (native dl.variation is absent). */
.trd-cart-var{ font-size:12px; color:var(--tr-muted); margin-top:3px; font-weight:600; }

/* 9 ── FOOTER / CONTENT (later milestone) */

/* 10 ── MOTION */
.tr-js .tr-reveal{ opacity:0; transform:translateY(10px); }
.tr-js .tr-reveal.tr-in{ opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease; }
@media (prefers-reduced-motion: reduce){
  .tr-js .tr-reveal{ opacity:1 !important; transform:none !important; }
  .thm-card,.thm-cat,.thm-cta,.thm-cta2,.trd-qty .trd-qbtn,.pb-atc,.pb-buy{ transition:none !important; }
}