/*
Theme Name: TrendyGram
Theme URI: https://trendygram.com.au
Author: Feur Media House
Author URI: https://feur.com.au
Description: Block theme for the TrendyGram accessories store. All design tokens live in theme.json; shop behaviour lives in the trendygram-core mu-plugin.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trendygram
Tags: full-site-editing, block-patterns, e-commerce
*/

/* --------------------------------------------------------------------------
   Structural CSS only. Colours, type and spacing come from theme.json.
   Anything visual that belongs to a token must NOT be hardcoded here.
   -------------------------------------------------------------------------- */

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

/* Respect the user's motion preference before any animation is declared. */
@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;
  }
}

/* Skip link — keyboard users land here first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-weight: 600;
  border-radius: 0 0 var(--wp--custom--radius--sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Visible focus everywhere, not just on links and buttons. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Screen-reader-only text that still reveals on focus. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  display: block;
  top: 5px;
  left: 5px;
  padding: 0.75rem 1.25rem;
  z-index: 100000;
}

/* Media never overflows its container. */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* Wide tables and code scroll inside themselves; the page never scrolls sideways. */
.wp-block-table,
.wp-block-code,
.trendygram-scroll-x {
  overflow-x: auto;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mono is a role, not a font choice — labels, prices, meta and counters. */
.is-style-mono-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--track-letter);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Components
   Translated from the mockups' inline styles. Every value here resolves to a
   theme.json token so the client can restyle from the Site Editor.
   -------------------------------------------------------------------------- */

/* Header ------------------------------------------------------------------ */

.tg-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 0.875rem;
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--xl);
  font-family: var(--wp--preset--font-family--sora);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.tg-search-trigger:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.tg-search-trigger__kbd {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: 4px;
  color: var(--wp--preset--color--faint);
}

.tg-bundle-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5625rem 0.875rem;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--xl);
  color: var(--wp--preset--color--accent);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  white-space: nowrap;
}
.tg-bundle-pill:hover {
  background: var(--wp--preset--color--accent);
  /* Near-black on lime, never cream: cream on lime fails 4.5:1. */
  color: var(--wp--preset--color--base);
}
.tg-bundle-pill.is-complete {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Small screens: the search label and kbd hint are noise, keep the icon. */
@media (max-width: 781px) {
  .tg-search-trigger__label,
  .tg-search-trigger__kbd { display: none; }
  .tg-search-trigger { padding: 0.5625rem; }
}

/* Footer ------------------------------------------------------------------ */

.tg-footer-links {
  list-style: none;
  margin: var(--wp--preset--spacing--20) 0 0;
  padding: 0;
}
.tg-footer-links li { margin-bottom: 0.75rem; }
.tg-footer-links a {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
}
.tg-footer-links a:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
}

.tg-payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
}
.tg-payment-badges li {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 5px;
  padding: 0.375rem 0.5625rem;
}

.tg-footer-legal a { margin-left: 1.25rem; }
.tg-footer-legal a:first-child { margin-left: 0; }

/* Trust bar --------------------------------------------------------------- */

.tg-trust-bar {
  gap: 1rem 1.25rem;
  margin: 0;
  padding: 1.125rem 0;
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.tg-trust-bar > p { margin: 0; }
/* The dot between items is decoration, so it is hidden from screen readers. */
.tg-trust-bar > p + p::before { content: "\00b7" / ""; margin-right: 1.25rem; }

/* Category tiles ---------------------------------------------------------- */

.tg-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-cat-tile {
  position: relative;
  display: block;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--wp--preset--color--surface-alt);
}
.tg-cat-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.tg-cat-tile:hover img { transform: scale(1.06); }
.tg-cat-tile__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.875rem;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75));
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

@media (max-width: 900px) { .tg-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tg-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; } }

/* Search overlay ---------------------------------------------------------- */

.tg-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(10, 10, 9, 0.72);
  backdrop-filter: blur(5px);
  display: none;
  padding-top: 11vh;
  justify-content: center;
}
.tg-search-overlay[open],
.tg-search-overlay.is-open { display: flex; }

.tg-search-panel {
  width: min(620px, 92vw);
  max-height: 74vh;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tg-search-panel input[type="search"] {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  outline: 0;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--sora);
  font-size: 1.125rem;
  font-weight: 500;
  padding: 1.375rem 1.5rem;
}
.tg-search-panel input::placeholder { color: var(--wp--preset--color--faint); }

.tg-search-results { overflow: auto; padding: 0.5rem; margin: 0; list-style: none; }
.tg-search-results__head {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--track-letter);
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
  padding: 0.75rem 0.875rem 0.625rem;
}
.tg-search-result a {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wp--custom--radius--md);
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}
.tg-search-result a:hover { background: rgba(242, 239, 230, 0.06); }
.tg-search-result img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--wp--preset--color--surface-alt);
  object-fit: contain;
  flex-shrink: 0;
}
.tg-search-result__name { font-weight: 600; font-size: var(--wp--preset--font-size--sm); display: block; }
.tg-search-result__cat {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--faint);
}
.tg-search-result__price { margin-left: auto; font-weight: 700; }

/* Free-shipping progress -------------------------------------------------- */

.tg-ship-progress {
  height: 5px;
  border-radius: 3px;
  background: var(--wp--preset--color--hairline);
  overflow: hidden;
  margin-bottom: 0.5625rem;
}
.tg-ship-progress__bar {
  height: 100%;
  background: var(--wp--preset--color--accent);
  transition: width var(--wp--custom--transition);
}
.tg-ship-note {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* Hero pills -------------------------------------------------------------- */

.tg-hero-pills { gap: 0.75rem; margin: 0; padding: 0; }
.tg-hero-pills > p {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--wp--custom--radius--xl);
}
.tg-hero-pills__outline {
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.tg-hero-pills__solid {
  background: var(--wp--preset--color--accent);
  /* Near-black on lime. Cream on lime fails contrast. */
  color: var(--wp--preset--color--base);
}

.tg-hero-media img {
  width: 100%;
  aspect-ratio: 900 / 820;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   WooCommerce
   Woo ships light-theme defaults; these bring its furniture onto the dark
   palette. Values are tokens so the client can restyle from the editor.
   -------------------------------------------------------------------------- */

/* Form controls ----------------------------------------------------------- */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.wc-block-components-text-input input,
.wc-block-components-select select {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
  padding: 0.75rem 0.875rem;
  font-family: var(--wp--preset--font-family--sora);
  font-size: var(--wp--preset--font-size--base);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder { color: var(--wp--preset--color--faint); }

.woocommerce select {
  /* Native arrow is invisible on a dark field; draw our own. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted) 50%),
                    linear-gradient(135deg, var(--wp--preset--color--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.woocommerce label,
.wc-block-components-checkbox__label { color: var(--wp--preset--color--contrast); }

/* Quantity ---------------------------------------------------------------- */

.woocommerce .quantity input.qty {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
  text-align: center;
  width: 4.5rem;
  padding: 0.8125rem 0.5rem;
}

/* Buttons ----------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--wp--preset--color--accent);
  /* Near-black on lime. Cream on lime fails 4.5:1 and must never be used. */
  color: var(--wp--preset--color--base);
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 600;
  padding: 0.9375rem 1.875rem;
  line-height: 1;
  transition: background var(--wp--custom--transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

/* Woo marks the add-to-cart button disabled until a variation is chosen.
   Make that state legible rather than a muddy olive. */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--faint);
  opacity: 1;
  cursor: not-allowed;
}

/* Badges ------------------------------------------------------------------ */

.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xs);
  border-radius: var(--wp--custom--radius--sm);
  padding: 0.375rem 0.625rem;
  min-height: 0;
  min-width: 0;
  line-height: 1;
}

/* Price ------------------------------------------------------------------- */

.woocommerce del,
.wc-block-components-product-price__regular {
  color: var(--wp--preset--color--faint);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.875em;
}
.woocommerce ins { background: transparent; text-decoration: none; }

/* Product page ------------------------------------------------------------ */

.woocommerce div.product .product_title { margin-bottom: 0.5rem; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 1.5rem 0 0;
  padding: 0 0 0.875rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--wp--preset--color--muted);
  font-weight: 600;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--contrast); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--wp--preset--color--accent);
}

.woocommerce div.product .images img { border-radius: var(--wp--custom--radius--lg); }

/* Layout: gallery left, buying column right. */
.tg-product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-block-start: var(--wp--preset--spacing--20);
}
.tg-product > *,
.tg-product__summary > * { margin-block: 0; }
/* Woo caps the gallery block at 512px; the grid column sets the width here. */
.woocommerce .tg-product > .wp-block-woocommerce-product-image-gallery { min-width: 0; max-width: none; }
@media (max-width: 900px) {
  .tg-product { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
}

/* Gallery: one dark well for the main photo, a tidy strip of thumbnails. */
.woocommerce div.product div.images { margin: 0; float: none; width: 100%; }
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child {
  border-radius: var(--wp--custom--radius--xl);
  background: var(--wp--preset--color--surface);
  overflow: hidden;
}
.woocommerce div.product div.images img { border-radius: 0; display: block; width: 100%; height: auto; }
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  box-sizing: border-box;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: var(--wp--custom--radius--md);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--wp--custom--transition), border-color var(--wp--custom--transition);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--wp--preset--color--accent);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: 0.875rem;
  right: 0.875rem;
  background: rgba(19, 19, 17, 0.62);
  backdrop-filter: blur(4px);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
}

/* Buying column. */
.tg-product__brand { margin: 0 0 0.75rem; }
.tg-product__brand a { color: inherit; text-decoration: none; }
.tg-product__brand a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tg-product__summary .wp-block-post-title { margin: 0 0 0.875rem; text-wrap: balance; }
.tg-product__summary .wp-block-woocommerce-product-price { margin: 0 0 1.625rem; }
.tg-product__excerpt { margin: 0 0 1.375rem; font-size: var(--wp--preset--font-size--sm); line-height: 1.7; }
.tg-product__excerpt p { margin: 0; }

.tg-product__trust {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--wp--preset--color--hairline);
  list-style: none;
  font-size: var(--wp--preset--font-size--sm);
}

/* Variation pickers (built by product-page.js from Woo's selects). */
.woocommerce div.product form.cart .variations { margin: 0 0 0.5rem; border: 0; width: 100%; }
.woocommerce div.product form.cart .variations tr { display: block; margin: 0 0 0.75rem; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; padding: 0; border: 0; text-align: left; }
.woocommerce div.product form.cart .variations th { margin-bottom: 0.625rem; }
.woocommerce div.product form.cart .variations label {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}
.tg-chips__value { color: var(--wp--preset--color--contrast); }
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 0.625rem;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--track-letter);
  text-transform: uppercase;
}
.tg-chips { display: flex; flex-wrap: wrap; gap: 0.5625rem; }
/* Woo's own selector is heavier than a class, so match its weight. */
.woocommerce div.product form.cart.tg-chips-on .variations select { display: none; }
.tg-chip {
  padding: 0.75rem 1rem;
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--md);
  background: transparent;
  color: var(--wp--preset--color--contrast);
  font: 600 var(--wp--preset--font-size--sm) / 1.2 var(--wp--preset--font-family--sora);
  text-align: left;
  cursor: pointer;
  transition: background var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}
.tg-chip:hover { border-color: var(--wp--preset--color--contrast); }
.tg-chip[aria-checked="true"] {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.tg-chip:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.tg-chip:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }

/* Buy row: quantity stepper, add to cart, save-for-later heart. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.625rem;
}
.woocommerce div.product form.cart .woocommerce-variation-price { margin: 0 0 1rem; font-weight: 700; }
.woocommerce div.product form.cart .woocommerce-variation { margin: 0 0 1rem; }
.woocommerce div.product form.cart .woocommerce-variation-description p {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
}
.woocommerce div.product form.cart .reset_variations { margin-top: 0.25rem; }
/* Woo hides the link with visibility, which still holds its space. */
.woocommerce div.product form.cart .reset_variations[style*="hidden"] { display: none; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; padding-block: 1rem; font-weight: 700; }
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--pill);
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 2.75rem;
  padding: 0.75rem 0;
  border: 0;
  background: transparent;
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 600;
  -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tg-qty-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  background: transparent;
  color: var(--wp--preset--color--contrast);
  font: 600 1rem / 1 var(--wp--preset--font-family--sora);
  cursor: pointer;
}
.tg-qty-btn:hover { color: var(--wp--preset--color--accent); }
.tg-qty-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: -2px; }
.tg-product .tg-wish-single { margin: 0; }
.tg-product .tg-wish-single .tg-wish {
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: 50%;
}
.tg-product .tg-wish-single .tg-wish:hover { border-color: var(--wp--preset--color--accent); }
@media (max-width: 480px) {
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
  .woocommerce div.product form.cart .single_add_to_cart_button { flex-basis: 100%; order: 3; }
}

/* Details under the buy box: quiet tabs, no repeated headings. */
.tg-product__details {
  margin-top: var(--wp--preset--spacing--60);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  list-style: none;
}
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0 0 0.875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--wp--preset--color--accent); }
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li a { padding: 0; color: var(--wp--preset--color--muted); font-weight: 600; }
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--contrast); }
.tg-product__details .woocommerce-Tabs-panel > h2:first-child { display: none; }
.tg-product__details .woocommerce-Tabs-panel { max-width: 46rem; }
.tg-product__details .woocommerce-Tabs-panel p {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.75;
}
.tg-product__details table.shop_attributes { width: 100%; border: 0; border-collapse: collapse; }
.tg-product__details table.shop_attributes th,
.tg-product__details table.shop_attributes td {
  padding: 0.875rem 0;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  background: transparent;
  text-align: left;
  font-style: normal;
}
.tg-product__details table.shop_attributes th {
  width: 30%;
  color: var(--wp--preset--color--faint);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--track-letter);
  text-transform: uppercase;
}
.tg-product__details table.shop_attributes td p { margin: 0; color: var(--wp--preset--color--contrast); }

/* Notices ----------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-top-width: 1px;
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--contrast);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--accent); }
.woocommerce-error { border-color: #ff6b6b; }

/* Breadcrumb -------------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--faint);
  margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--wp--preset--color--muted); }

/* Tables (cart, order details) -------------------------------------------- */

.woocommerce table.shop_table {
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--radius--md);
  border-collapse: separate;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--wp--preset--color--hairline);
  color: var(--wp--preset--color--contrast);
}

/* Mini cart --------------------------------------------------------------- */

.wc-block-mini-cart__button {
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 600;
}
.wc-block-mini-cart__badge {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Bundle builder ---------------------------------------------------------- */

.tg-bundle__slots {
  position: sticky;
  top: 84px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem;
  margin: var(--wp--preset--spacing--40) 0;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--radius--lg);
}

.tg-bundle__slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 64px;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--md);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--faint);
}
.tg-bundle__slot.is-filled {
  border-style: solid;
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}
.tg-bundle__slot img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--wp--preset--color--surface-alt);
}
.tg-bundle__slot-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 11px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.6875rem;
  font-weight: 700;
}
.tg-bundle__slot-remove {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--wp--preset--color--faint);
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0.25rem;
}
.tg-bundle__slot-remove:hover { color: var(--wp--preset--color--accent); }

.tg-bundle__summary {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.tg-bundle__count {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}
.tg-bundle__confirm {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  padding: 0.875rem 1.5rem;
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.tg-bundle__confirm:disabled {
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--faint);
  cursor: not-allowed;
}

.tg-bundle__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-bundle__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--lg);
  padding: 0.75rem;
}
.tg-bundle__item.is-picked { border-color: var(--wp--preset--color--accent); }
.tg-bundle__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--wp--preset--color--surface-alt);
  border-radius: var(--wp--custom--radius--sm);
  margin-bottom: 0.375rem;
}
.tg-bundle__cat {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
}
.tg-bundle__name { font-weight: 600; line-height: 1.25; }
.tg-bundle__price { font-weight: 700; }
.tg-bundle__pick {
  margin-top: auto;
  background: transparent;
  color: var(--wp--preset--color--accent);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--lg);
  padding: 0.625rem 1rem;
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  cursor: pointer;
  transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}
.tg-bundle__pick:hover,
.tg-bundle__item.is-picked .tg-bundle__pick {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

@media (max-width: 1100px) { .tg-bundle__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .tg-bundle__grid { grid-template-columns: repeat(2, 1fr); }
  .tg-bundle__slots { grid-template-columns: repeat(3, 1fr); position: static; }
  .tg-bundle__summary { grid-column: 1 / -1; justify-content: space-between; }
}
@media (max-width: 480px) {
  .tg-bundle__grid { grid-template-columns: 1fr 1fr; }
  .tg-bundle__slots { grid-template-columns: 1fr; }
}

.tg-bundle__variation {
  width: 100%;
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
  padding: 0.5rem 0.625rem;
  font-family: var(--wp--preset--font-family--sora);
  font-size: var(--wp--preset--font-size--sm);
  margin-top: 0.375rem;
}

/* Cookie consent ---------------------------------------------------------- */

.tg-consent {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 500;
  width: min(680px, calc(100vw - 2.5rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--preset--shadow--lift);
}
.tg-consent__text {
  flex: 1 1 22rem;
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
}
.tg-consent__text a { color: var(--wp--preset--color--accent); text-decoration: underline; }
.tg-consent__actions { display: flex; gap: 0.625rem; margin-left: auto; }
.tg-consent__btn {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--pill);
  padding: 0.6875rem 1.125rem;
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  cursor: pointer;
  white-space: nowrap;
}
.tg-consent__btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--hairline-strong);
}
.tg-consent__btn--ghost:hover { border-color: var(--wp--preset--color--contrast); }

@media (max-width: 600px) {
  .tg-consent { flex-direction: column; align-items: stretch; }
  /* flex:1 on the text made the banner grow to fill the column and left a
     large dead gap above the buttons. Let it size to its content instead. */
  .tg-consent__text { flex: 0 1 auto; }
  .tg-consent__actions { margin-left: 0; }
  .tg-consent__btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   Forms — WooCommerce account, checkout, Forminator and YITH
   WooCommerce's own selectors are more specific than a bare element
   selector, so these match its class names directly rather than relying on
   load order alone.
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce input.woocommerce-Input,
.woocommerce .woocommerce-form-login input.input-text,
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui textarea,
.forminator-ui select {
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
  padding: 0.8125rem 0.875rem;
  font-family: var(--wp--preset--font-family--sora);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.4;
  box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.forminator-ui input:focus,
.forminator-ui textarea:focus {
  border-color: var(--wp--preset--color--accent);
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
  margin-bottom: 0.4375rem;
  display: block;
}

/* The required asterisk is pure red on near-black; lift it to the accent so
   it clears contrast and stops reading as an error. */
.woocommerce .required,
.woocommerce abbr.required {
  color: var(--wp--preset--color--accent);
  border: 0;
  text-decoration: none;
}

/* Checkboxes and radios — the browser default is a white box on a dark card. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.forminator-ui input[type="checkbox"] {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  vertical-align: middle;
  margin-right: 0.5rem;
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.woocommerce input[type="radio"] { border-radius: 50%; }
.woocommerce input[type="checkbox"]:checked,
.woocommerce input[type="radio"]:checked,
.forminator-ui input[type="checkbox"]:checked {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}
.woocommerce input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--wp--preset--color--base);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.woocommerce input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--wp--preset--color--base);
}

/* Woo's password reveal eye sits on the field and inherits a dark colour. */
.woocommerce .show-password-input,
.woocommerce .show-password-input::after {
  color: var(--wp--preset--color--muted);
}
.woocommerce .show-password-input.display-password { color: var(--wp--preset--color--accent); }

/* The login/register card. */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--surface);
}

/* My-account navigation. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.875rem 0.25rem;
  color: var(--wp--preset--color--muted);
  font-weight: 500;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--wp--preset--color--accent);
}

/* Woo block checkout uses its own component classes. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea,
.wc-block-components-select__container select {
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
}
.wc-block-components-text-input label,
.wc-block-components-select__label {
  color: var(--wp--preset--color--muted);
}
.wc-block-components-text-input.is-active label {
  color: var(--wp--preset--color--accent);
}

/* Forminator wrapper and submit. */
.forminator-ui .forminator-button-submit {
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
  border-radius: var(--wp--custom--radius--pill) !important;
  font-family: var(--wp--preset--font-family--sora) !important;
  font-weight: 600 !important;
}
.forminator-ui .forminator-label,
.forminator-ui .forminator-description {
  color: var(--wp--preset--color--contrast) !important;
}


/* Woo sets the required asterisk to #a00, which is 2.1:1 on near-black.
   Higher specificity needed to beat .woocommerce form .form-row .required. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required,
.woocommerce .woocommerce-form-row .required {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border: 0;
}

/* Forminator's own required marker, same contrast problem as Woo's. */
.forminator-ui .forminator-required,
.forminator-ui .forminator-label .forminator-required {
  color: var(--wp--preset--color--accent) !important;
}

/* --------------------------------------------------------------------------
   Motion
   Kept to opacity and transform only, which the compositor handles without
   layout work, so none of this costs Core Web Vitals. Everything here is
   switched off by the prefers-reduced-motion block near the top of this file.
   -------------------------------------------------------------------------- */

/* Scroll reveal. Elements start hidden ONLY when the browser supports the
   animation-timeline needed to reveal them, and only when the visitor has not
   asked for reduced motion. Without both guards a browser that cannot animate
   would leave the content permanently invisible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tg-reveal {
      animation: tg-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }
  }
}

@keyframes tg-reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Product and category cards lift slightly on hover. */
.tg-cat-tile,
.tg-bundle__item,
.wp-block-woocommerce-product-template li {
  transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.tg-cat-tile:hover,
.tg-bundle__item:hover,
.wp-block-woocommerce-product-template li:hover {
  transform: translateY(-3px);
}

/* Buttons and pills settle rather than snap. */
.wp-element-button,
.tg-bundle__pick,
.tg-bundle__confirm,
.tg-consent__btn,
.woocommerce a.button,
.woocommerce button.button {
  transition: background var(--wp--custom--transition),
              color var(--wp--custom--transition),
              transform 0.12s ease;
}
.wp-element-button:active,
.tg-bundle__pick:active,
.woocommerce button.button:active { transform: scale(0.97); }

/* Bundle slot filling is the moment worth marking — it is the core mechanic. */
.tg-bundle__slot.is-filled { animation: tg-slot-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tg-slot-pop {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Search overlay entrance. */
.tg-search-overlay.is-open .tg-search-panel { animation: tg-panel-in 0.22s ease-out; }
@keyframes tg-panel-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* Consent banner slides up once, out of the way of first paint. */
.tg-consent { animation: tg-consent-in 0.3s 0.4s ease-out both; }
@keyframes tg-consent-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Underline that grows from the left on footer and nav links. */
.tg-footer-links a { background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--wp--custom--transition); text-decoration: none; }
.tg-footer-links a:hover { background-size: 100% 1px; text-decoration: none; }

/* --------------------------------------------------------------------------
   Wishlist
   -------------------------------------------------------------------------- */

.tg-wish-wrap { position: relative; }

.tg-wish {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  transition: color var(--wp--custom--transition), transform 0.15s ease, background var(--wp--custom--transition);
}
.tg-wish--overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(19, 19, 17, 0.62);
  backdrop-filter: blur(4px);
}
.tg-wish:hover { color: var(--wp--preset--color--accent); transform: scale(1.12); }
.tg-wish.is-saved { color: var(--wp--preset--color--accent); }
.tg-wish.is-saved svg path { fill: currentColor; }
.tg-wish:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

@keyframes tg-wish-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}
.tg-wish--pop { animation: tg-wish-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }

.tg-wish-single {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
}
.tg-wish-single .tg-wish {
  width: auto;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-radius: var(--wp--custom--radius--pill);
}

/* Saved items page ------------------------------------------------------- */

.tg-wish-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-wish-item {
  position: relative;
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--lg);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.tg-wish-item a { text-decoration: none; color: inherit; }
.tg-wish-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--wp--preset--color--surface-alt);
  border-radius: var(--wp--custom--radius--sm);
  margin-bottom: 0.375rem;
}
.tg-wish-name { display: block; font-weight: 600; line-height: 1.25; }
.tg-wish-price { font-weight: 700; }
.tg-wish-item .tg-wish { position: absolute; top: 14px; right: 14px; background: rgba(19,19,17,0.62); }
.tg-wish-empty { color: var(--wp--preset--color--muted); }

@media (max-width: 1100px) { .tg-wish-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .tg-wish-grid { grid-template-columns: repeat(2, 1fr); } }

/* Shop archive ------------------------------------------------------------ */

.tg-shop-filters .wp-block-woocommerce-product-filters {
  position: sticky;
  top: 96px;
  padding: 1rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--radius--lg);
}
.tg-shop-filters h3,
.tg-shop-filters .wc-block-product-filter__title {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--track-letter);
  text-transform: uppercase;
  color: var(--wp--preset--color--faint);
}

@media (max-width: 900px) {
  .tg-shop-filters .wp-block-woocommerce-product-filters { position: static; }
}

/* Woo's sorting select inherits the browser default on a dark page. */
.woocommerce-ordering select,
.wc-block-catalog-sorting select {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--pill);
  padding: 0.6875rem 2.5rem 0.6875rem 1rem;
}

/* --------------------------------------------------------------------------
   Size guide
   -------------------------------------------------------------------------- */

.tg-size-guide { margin: 0 0 var(--wp--preset--spacing--30); }

.tg-size-guide__toggle {
  background: none;
  border: 0;
  padding: 0;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--sora);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tg-size-guide__toggle:hover { color: var(--wp--preset--color--accent); }
.tg-size-guide__toggle[aria-expanded="true"] { color: var(--wp--preset--color--accent); }

.tg-size-guide__panel {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--md);
  padding: 1.25rem 1.375rem;
  margin-top: 0.875rem;
}
.tg-size-guide__head {
  margin: 0 0 0.875rem;
  color: var(--wp--preset--color--faint);
}
.tg-size-guide__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}
.tg-size-guide__rows li {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
}
.tg-size-guide__k { color: var(--wp--preset--color--muted); }
.tg-size-guide__v { text-align: right; }
.tg-size-guide__notes {
  margin: 1rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  line-height: 1.5;
}
.tg-size-guide__notes--empty { color: var(--wp--preset--color--faint); font-style: italic; }

/* --------------------------------------------------------------------------
   Complete the look
   -------------------------------------------------------------------------- */

.tg-look {
  margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.tg-look__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.125rem;
  margin-bottom: var(--wp--preset--spacing--30);
  flex-wrap: wrap;
}
.tg-look__head h2 { margin: 0 0 0.5rem; }
.tg-look__head p {
  margin: 0;
  max-width: 460px;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
}
.tg-look__add {
  flex-shrink: 0;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: 0;
  border-radius: var(--wp--custom--radius--pill);
  padding: 0.9375rem 1.625rem;
  font-family: var(--wp--preset--font-family--sora);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--wp--custom--transition);
}
.tg-look__add:hover { background: var(--wp--preset--color--contrast); }
.tg-look__add:disabled { background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--faint); cursor: wait; }

.tg-look__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-look__grid a {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--md);
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.tg-look__grid a:hover { background: var(--wp--preset--color--surface-alt); }
.tg-look__grid img {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface-alt);
  object-fit: contain;
}
.tg-look__name { display: block; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; }
.tg-look__price { font-weight: 700; font-size: var(--wp--preset--font-size--sm); }

@media (max-width: 900px) { .tg-look__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Free shipping progress (cart)
   -------------------------------------------------------------------------- */

.tg-ship {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--radius--md);
  padding: 1rem 1.125rem;
  margin: 0 0 var(--wp--preset--spacing--30);
}
.tg-ship--done { border-color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   Block cart and checkout
   WooCommerce Blocks ships its own component CSS with high specificity and
   assumes a light theme. These match its class names directly.
   -------------------------------------------------------------------------- */

.wc-block-checkout,
.wc-block-cart {
  color: var(--wp--preset--color--contrast);
}

/* Text inputs, selects and textareas across the whole block checkout. */
.wc-block-components-form .wc-block-components-text-input input[type="text"],
.wc-block-components-form .wc-block-components-text-input input[type="email"],
.wc-block-components-form .wc-block-components-text-input input[type="tel"],
.wc-block-components-form .wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-form-token-field__input,
.wc-block-components-combobox-control input {
  background-color: var(--wp--preset--color--surface-alt) !important;
  color: var(--wp--preset--color--contrast) !important;
  border-color: var(--wp--preset--color--hairline-strong) !important;
  border-radius: var(--wp--custom--radius--sm) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-combobox-control label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  color: var(--wp--preset--color--muted) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control.is-active label {
  color: var(--wp--preset--color--accent) !important;
}

/* Panels: order summary, shipping options, payment options. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--hairline) !important;
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--contrast);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
  color: var(--wp--preset--color--contrast);
}
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__individual-prices {
  color: var(--wp--preset--color--muted);
}

/* "Save $X" badge on bundled lines. */
.wc-block-components-sale-badge {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Notices. Woo's error banner is dark red on pale pink, which is unreadable
   on this palette and fails contrast either way. */
.wc-block-components-notice-banner {
  background: var(--wp--preset--color--surface) !important;
  color: var(--wp--preset--color--contrast) !important;
  border-radius: var(--wp--custom--radius--md);
}
.wc-block-components-notice-banner.is-error {
  border-color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.10) !important;
}
.wc-block-components-notice-banner.is-error > svg { fill: #ff6b6b; }
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
  border-color: var(--wp--preset--color--accent) !important;
  background: rgba(198, 242, 78, 0.10) !important;
}
.wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-success > svg { fill: var(--wp--preset--color--accent); }
.wc-block-components-notice-banner__content { color: var(--wp--preset--color--contrast) !important; }

/* Checkout header carries only the logo; give it the site's hairline. */
.wp-block-woocommerce-checkout-header,
.wc-block-checkout__main > .wc-block-components-checkout-step:first-child {
  border-color: var(--wp--preset--color--hairline);
}

/* Place order button already inherits the accent from theme.json; make sure
   its disabled state reads as disabled rather than washed out. */
.wc-block-components-checkout-place-order-button:disabled {
  background: var(--wp--preset--color--surface-alt) !important;
  color: var(--wp--preset--color--faint) !important;
}

/* --------------------------------------------------------------------------
   Refinements: cards, pagination, footer, forms, empty cart, mobile buy bar
   -------------------------------------------------------------------------- */

/* Product cards: one dark card with the photo inset, on the shop, home,
   related and empty-cart grids alike. */
.wp-block-woocommerce-product-template li.wc-block-product,
.wc-block-grid__product {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface);
}
.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-group:last-child { margin-top: auto; }
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-title { margin: 0.25rem 0 0.75rem; text-wrap: balance; }
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-title a { text-decoration: none; }
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-button { margin-left: auto; }
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-terms a { text-decoration: none; }
.wc-block-components-product-image { overflow: hidden; border-radius: var(--wp--custom--radius--sm); }
.wc-block-components-product-image img { display: block; width: 100%; height: auto; }

/* Newest-products grid (empty cart). Woo styles it as bare centred links. */
.wc-block-grid__products { gap: 1rem; }
.wc-block-grid__product { text-align: left; width: auto; }
.wc-block-grid__product-link { text-decoration: none; }
.wc-block-grid__product .wc-block-grid__product-title { margin: 0.75rem 0 0.375rem; font-weight: 600; font-size: var(--wp--preset--font-size--base); }
.wc-block-grid__product .wc-block-grid__product-price { margin-bottom: 0.75rem; font-weight: 700; }
.wc-block-grid__product .wc-block-grid__product-add-to-cart { margin-top: auto; text-align: left; }

/* Empty cart: drop Woo's sad-face icon, keep the message calm. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
.wp-block-woocommerce-empty-cart-block h2 { font-size: var(--wp--preset--font-size--xl); text-align: left; }

/* Pagination. */
.wp-block-query-pagination { gap: 0.5rem; font-size: var(--wp--preset--font-size--sm); }
.wp-block-query-pagination-numbers { display: flex; gap: 0.5rem; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--pill);
  text-align: center;
  text-decoration: none;
}
.wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.wp-block-query-pagination .page-numbers.current {
  border-color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-weight: 600;
}

/* Home: eight brands fill two rows of four. */
@media (min-width: 1000px) { .tg-cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* Footer: the brand list is long, so it runs in two columns. */
.tg-footer-links--cols { columns: 2; column-gap: 2rem; }
.tg-footer-links--cols li { break-inside: avoid; }

/* Forminator ships square fields and a black select label. Bring both onto
   the same radius and palette as every other field. */
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form .select2-container--default .select2-selection--single {
  border-radius: var(--wp--custom--radius--sm);
  border-color: var(--wp--preset--color--hairline-strong);
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--contrast);
}
.forminator-ui .select2-selection__rendered,
.forminator-ui .select2-selection__placeholder { color: var(--wp--preset--color--contrast) !important; }
.forminator-ui .forminator-label { font-size: var(--wp--preset--font-size--sm); font-weight: 600; }
.forminator-dropdown .select2-dropdown,
.select2-dropdown.forminator-dropdown {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--contrast);
}
.forminator-dropdown .select2-results__option { color: var(--wp--preset--color--contrast); }
.forminator-dropdown .select2-results__option--highlighted { background: rgba(198, 242, 78, 0.16) !important; color: var(--wp--preset--color--contrast) !important; }

/* Product page on phones: the buy row stays in reach while the shopper reads,
   and the gallery holds its space so nothing jumps when the strip loads. */
@media (max-width: 700px) {
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0;
    background: var(--wp--preset--color--base);
    box-shadow: 0 -1px 0 var(--wp--preset--color--hairline);
  }
  .tg-product > .wp-block-woocommerce-product-image-gallery { min-height: calc(100vw - 2 * var(--wp--custom--gutter) + 5.5rem); }
}

/* Small, quick responses to touch and hover. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .wc-block-components-product-image img { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
  li.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
  .single_add_to_cart_button:active,
  .tg-chip:active,
  .tg-qty-btn:active { transform: scale(0.97); }
}

/* Cart and checkout: same page-title scale and breathing room as other pages. */
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
  padding-top: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xxxl);
}
.wc-block-grid__products { display: grid; grid-template-columns: repeat(4, 1fr); }
.wc-block-grid__product { flex: none; max-width: none; margin: 0; }
.wp-block-woocommerce-empty-cart-block .has-text-align-center,
.wp-block-woocommerce-empty-cart-block h2 { text-align: left; }
.wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; }
@media (max-width: 900px) { .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); } }

/* Checkout dropdowns (country, state) kept Woo's white edges. */
.wc-blocks-components-select .wc-blocks-components-select__container {
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface-alt);
}
.wc-blocks-components-select .wc-blocks-components-select__select {
  border: 1px solid var(--wp--preset--color--hairline-strong);
  border-radius: var(--wp--custom--radius--sm);
  background: transparent;
  color: var(--wp--preset--color--contrast);
  box-shadow: none;
}

/* Woo's block stylesheet boxes the active tab on small screens and pads its
   link. Its selectors are heavier than ours, so these few need !important. */
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
}
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--wp--preset--color--accent) !important; }
.woocommerce .tg-product__details .woocommerce-tabs ul.tabs li a { padding: 0 !important; }