/* ==========================================================================
   Shop: grid, filters, PDP, cart drawer, quick view, checkout
   ========================================================================== */

/* ---------- Shop hero & layout ---------- */

.shop-hero { padding-block: clamp(24px, 4vw, 52px) clamp(16px, 2.5vw, 32px); }
.breadcrumb { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-ink-60); margin-bottom: 14px; }
.breadcrumb .sep { margin-inline: 8px; opacity: .5; }
.shop-title { margin: 0; }

.shop-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.shop-rail { position: sticky; top: calc(var(--hdr-h) + 16px); }
.rail-close { display: none; }
.shop-rail .widget { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--t-line); }
.shop-rail .widget-title { font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.shop-rail ul { list-style: none; margin: 0; padding: 0; }
.shop-rail li { margin-bottom: 7px; font-size: 14px; }
.shop-rail li a { transition: color var(--t-fast) var(--t-ease), padding-left var(--t-fast) var(--t-ease); }
@media (hover: hover) {
  .shop-rail li a:hover { color: var(--t-accent); padding-left: 5px; }
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--t-line);
}
.filter-toggle { display: none; padding: 9px 18px; }
.woocommerce-result-count { margin: 0; font-size: 13px; color: var(--t-ink-60); }
.woocommerce-ordering select { width: auto; padding: 9px 30px 9px 12px; font-size: 13px; }

/* ---------- Product grid ---------- */

/* WooCommerce's own stylesheet lays the loop out with floats and a percentage
   width on each item. Inside a CSS grid that percentage resolves against the
   grid track, collapsing every card, so the float layout is neutralised here.
   The selectors match WooCommerce's specificity so the reset actually wins. */
.woocommerce #content ul.products li.product,
.woocommerce-page #content ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product,
.products li.product {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
  clear: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none; }

.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 26px) clamp(10px, 1.4vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card { display: flex; flex-direction: column; }
.card-body { padding-top: 12px; }
.card-eyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-ink-35);
  margin-bottom: 4px;
}
.card-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 4px;
}
.card-title a { transition: color var(--t-fast) var(--t-ease); }
.card-title a:hover { color: var(--t-accent); }
.card-price { font-size: 14px; font-weight: 600; }
.card-price del { font-weight: 400; opacity: .45; margin-right: 6px; }
.card-price ins { text-decoration: none; color: var(--t-accent); }

.load-more-wrap { display: grid; place-items: center; margin-top: 44px; }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  padding: 14px 18px;
  border-left: 3px solid var(--t-accent);
  background: #fff;
  font-size: 14px;
  list-style: none;
  margin: 0 0 20px;
}
.woocommerce-error { border-color: #a02020; }

/* ---------- WooCommerce button + notice branding ----------
   WooCommerce styles its buttons with element-qualified selectors such as
   `.woocommerce button.button`, which outrank a class-only theme rule, so its
   default purple would win. These mirror that shape to take the cascade back. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  padding: 13px 26px;
  border: 0;
  border-radius: var(--t-radius);
  background-color: var(--t-accent);
  color: var(--t-accent-ink);
  font: 500 12px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--t-ink);
  color: #fff;
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active { transform: scale(.985); }

.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce button.button.alt.wc-variation-selection-needed {
  background-color: var(--t-ink-35);
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
}

/* Secondary buttons — "View cart", "Continue shopping" — read as outlines. */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .cart .button:not(.alt):not([name="update_cart"]) { background-color: var(--t-ink); }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  border-top: 0;
  border-left: 3px solid var(--t-accent);
  background: #fff;
  box-shadow: var(--t-shadow);
  font-size: 14px;
  margin: 0 0 22px;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { content: none; }
.woocommerce .woocommerce-error { border-left-color: #a02020; }

/* ---------- WooCommerce float-layout reset ----------
   WooCommerce lays the product page out with floats and percentage widths.
   This theme uses CSS grid, where those percentages resolve against the grid
   track and shrink everything.

   The page wrapper is <main id="content">, which switches on WooCommerce's
   ID-scoped variants such as `.woocommerce #content div.product div.images`.
   Those carry an ID, so a class-only reset loses to them; every selector here
   therefore mirrors the `#content` form as well. */

.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.images,
.woocommerce-page #content div.product div.summary,
.trend-pdp #content div.product div.images,
.trend-pdp #content div.product div.summary,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.trend-pdp div.product div.images,
.trend-pdp div.product div.summary {
  width: auto;
  float: none;
  margin: 0;
}

/* WooCommerce turns every image after the first into a 25% thumbnail. In the
   stacked and grid galleries each image is a full cell instead. */
.pdp-gallery-stacked #content .woocommerce-product-gallery__image:nth-child(n+2),
.pdp-gallery-grid #content .woocommerce-product-gallery__image:nth-child(n+2),
.pdp-gallery-stacked .woocommerce-product-gallery__image:nth-child(n+2),
.pdp-gallery-grid .woocommerce-product-gallery__image:nth-child(n+2) {
  width: auto;
  display: block;
  float: none;
}

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

.trend-pdp .site-main { max-width: var(--t-max); margin-inline: auto; padding: 24px var(--t-gutter) 80px; }
.trend-pdp div.product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.trend-pdp .woocommerce-product-gallery { position: sticky; top: calc(var(--hdr-h) + 16px); }
.trend-pdp .product_title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .2em; }
.trend-pdp .price { font-size: 22px; font-weight: 600; }
.trend-pdp .price del { font-weight: 400; opacity: .45; }
.trend-pdp .price ins { text-decoration: none; color: var(--t-accent); }

.trend-pdp .onsale {
  display: inline-block;
  padding: 5px 10px;
  background: var(--t-accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pdp-eta { font-size: 13.5px; color: var(--t-ink-60); margin-top: 14px; }
.pdp-urgency { font-size: 13px; font-weight: 600; color: var(--t-warn); }

.pdp-trust { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--t-line); display: grid; gap: 9px; }
.pdp-trust li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--t-ink-60); }
.pdp-trust li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 13px; height: 8px;
  border-left: 1.5px solid var(--t-accent);
  border-bottom: 1.5px solid var(--t-accent);
  transform: rotate(-45deg);
}

.trend-pdp .quantity { display: inline-flex; align-items: center; border: 1px solid var(--t-line); border-radius: var(--t-radius); }
.trend-pdp .quantity input { width: 62px; border: 0; text-align: center; }
.trend-pdp form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-block: 20px; }
.trend-pdp .single_add_to_cart_button {
  flex: 1 1 220px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--t-radius);
  background: var(--t-accent);
  color: #fff;
  font: 500 12px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
}
.trend-pdp .single_add_to_cart_button:hover { background: var(--t-ink); }
.trend-pdp .single_add_to_cart_button:active { transform: scale(.985); }

.trend-pdp form.cart .variations {
  flex: 1 0 100%;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}
.trend-pdp .variations th,
.trend-pdp .variations td { padding: 6px 0; text-align: left; vertical-align: middle; }
.trend-pdp .variations th { width: 90px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.trend-pdp .variations select { width: 100%; max-width: 340px; padding: 11px 12px; }
/* WooCommerce nests the variation button row inside .single_variation_wrap,
   so that wrapper — not the button row — is the flex child that must span
   the form, or the quantity box and button wrap onto separate lines. */
.trend-pdp form.cart .single_variation_wrap { flex: 1 0 100%; width: 100%; }
.trend-pdp .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; width: 100%; }
.trend-pdp .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
.trend-pdp .reset_variations { font-size: 12px; }
.trend-pdp .woocommerce-variation-price { flex: 1 0 100%; font-size: 20px; font-weight: 600; }

.trend-pdp .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(36px, 5vw, 72px); }
.trend-pdp .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--t-line);
}
.trend-pdp .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; }
.trend-pdp .woocommerce-tabs ul.tabs li::before,
.trend-pdp .woocommerce-tabs ul.tabs li::after { content: none; }
.trend-pdp .woocommerce-tabs ul.tabs a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-35); transition: color var(--t-fast) var(--t-ease); }
.trend-pdp .woocommerce-tabs ul.tabs li.active a { color: var(--t-ink); }

.related.products, .upsells.products { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 76px); }

/* ---------- Cart drawer ---------- */

.overlay {
  position: fixed; inset: 0;
  z-index: 240;
  background: rgba(27,23,25,.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-speed) var(--t-ease);
}
.overlay.is-open { opacity: 1; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 250;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--t-shadow-lift);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--t-speed) var(--t-ease-out);
  visibility: hidden;
}
.cart-drawer.is-open { transform: none; visibility: visible; }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--t-line);
}
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-close, .qv-close, .di-remove {
  border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--t-ink-60);
  transition: color var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
}
.drawer-close:hover, .qv-close:hover, .di-remove:hover { color: var(--t-accent); transform: rotate(90deg); }

.drawer-contents { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer-contents.is-busy { opacity: .5; pointer-events: none; transition: opacity var(--t-fast) var(--t-ease); }

.drawer-progress { padding: 14px 20px; background: var(--t-sand); font-size: 12.5px; }
.drawer-progress p { margin: 0 0 8px; }
.drawer-progress .is-unlocked { color: var(--t-ok); font-weight: 600; }
.drawer-progress .bar { display: block; height: 3px; background: var(--t-ink-12); border-radius: 999px; overflow: hidden; }
.drawer-progress .bar i { display: block; height: 100%; background: var(--t-accent); transition: width var(--t-speed) var(--t-ease-out); }

.drawer-items { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 20px; }
.drawer-item {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--t-line);
  animation: t-rise 320ms var(--t-ease-out) both;
}
.di-thumb img { width: 62px; height: 80px; object-fit: cover; }
.di-name { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.di-var { font-size: 11.5px; color: var(--t-ink-60); }
.di-var p { margin: 0; }
.di-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; border: 1px solid var(--t-line); border-radius: var(--t-radius); }
.di-qty button {
  width: 26px; height: 26px;
  border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 1;
  transition: background var(--t-fast) var(--t-ease);
}
.di-qty button:hover { background: var(--t-sand); }
.qty-val { min-width: 22px; text-align: center; font-size: 13px; }
.di-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.di-price { font-size: 13.5px; font-weight: 600; }

.drawer-foot { padding: 16px 20px 22px; border-top: 1px solid var(--t-line); display: grid; gap: 9px; }
.drawer-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 4px; }
.drawer-subtotal strong { font-size: 18px; }
.drawer-empty { display: grid; place-items: center; gap: 14px; padding: 60px 20px; text-align: center; color: var(--t-ink-60); }

/* ---------- Quick view ---------- */

.quickview {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 250;
  width: min(880px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -46%, 0) scale(.97);
  transition: opacity var(--t-speed) var(--t-ease), transform var(--t-speed) var(--t-ease-out), visibility var(--t-speed);
}
.quickview.is-open { opacity: 1; visibility: visible; transform: translate3d(-50%, -50%, 0) scale(1); }
.qv-close { position: absolute; top: 10px; right: 14px; z-index: 3; }

.qv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qv-media { position: relative; aspect-ratio: 3/4; background: #efe8e0; }
.qv-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity var(--t-speed) var(--t-ease); }
.qv-slide.is-active { opacity: 1; }
.qv-slide img { width: 100%; height: 100%; object-fit: cover; }
.qv-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.qv-dot { width: 7px; height: 7px; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); cursor: pointer; transition: background var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease); }
.qv-dot.is-active { background: #fff; transform: scale(1.3); }

.qv-info { padding: clamp(20px, 3vw, 34px); }
.qv-title { font-size: 24px; margin-bottom: 8px; }
.qv-price { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.qv-price ins { text-decoration: none; color: var(--t-accent); }
.qv-desc { font-size: 14px; color: var(--t-ink-60); }
.qv-form form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 16px; }
.qv-form .single_add_to_cart_button {
  flex: 1 1 180px; padding: 14px 24px; border: 0; border-radius: var(--t-radius);
  background: var(--t-accent); color: #fff; cursor: pointer;
  font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.qv-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; padding: 0; font-size: 12px; color: var(--t-ink-60); }
.qv-full { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.qv-loading { display: grid; place-items: center; min-height: 320px; }

/* ---------- Cart & checkout pages ---------- */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
  max-width: 1160px; margin-inline: auto; padding: 32px var(--t-gutter) 80px;
}

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.woocommerce-checkout #customer_details { margin-bottom: 8px; }
.woocommerce-checkout .form-row { margin-bottom: 14px; }
.woocommerce-checkout h3 { font-size: 20px; margin-bottom: 14px; }

#order_review, .cart-collaterals .cart_totals {
  background: #fff;
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-lg);
  padding: 22px;
}
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 10px 0; border-bottom: 1px solid var(--t-line); text-align: left; }
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }

/* WooCommerce ships this panel in its own grey; take it back to the theme. */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-top: 18px;
}

.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout .payment_box {
  background: var(--t-sand);
  border-radius: var(--t-radius);
  padding: 12px 14px;
  color: var(--t-ink-60);
  font-size: 13px;
  line-height: 1.55;
}
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout .payment_box::before { content: none; }

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 0;
  padding: 0;
}

.wc_payment_methods { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.wc_payment_method {
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius);
  padding: 14px 16px;
  transition: border-color var(--t-fast) var(--t-ease), background var(--t-fast) var(--t-ease);
}
.wc_payment_method:has(input:checked) { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 4%, #fff); }
.wc_payment_method label { font-size: 14.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.payment_box { margin-top: 10px; font-size: 13px; color: var(--t-ink-60); animation: t-rise 260ms var(--t-ease-out) both; }

#place_order {
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: var(--t-radius);
  background: var(--t-accent);
  color: #fff;
  font: 500 13px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast) var(--t-ease);
}
#place_order:hover { background: var(--t-ink); }

table.shop_table { width: 100%; border-collapse: collapse; background: #fff; }
table.shop_table th, table.shop_table td { padding: 14px; border-bottom: 1px solid var(--t-line); text-align: left; font-size: 14px; }

/* WooCommerce pins cart thumbnails to 32px; show the fabric properly. */
.woocommerce table.cart img,
.woocommerce #content table.cart img,
.woocommerce-cart table.cart .product-thumbnail img {
  width: 64px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--t-radius);
}

/* The coupon row collapses the input to a few characters at narrow widths. */
.woocommerce table.cart td.actions { padding: 14px; }
.woocommerce table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  float: none;
  padding: 0;
}
.woocommerce table.cart td.actions .coupon label { display: none; }
.woocommerce table.cart td.actions .coupon .input-text {
  width: auto;
  flex: 1 1 200px;
  min-width: 160px;
  margin: 0;
}
.woocommerce table.cart td.actions .coupon .button { flex: 0 0 auto; }
.woocommerce table.cart td.actions > .button { float: right; }

.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart-collaterals .cart_totals table.shop_table { background: transparent; }

@media (min-width: 901px) {
  .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-toggle { display: inline-flex; }
  .shop-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 260;
    width: min(320px, 88vw);
    padding: 58px 20px 30px;
    background: #fff;
    overflow-y: auto;
    transform: translate3d(-100%, 0, 0);
    transition: transform var(--t-speed) var(--t-ease-out);
  }
  .shop-rail.is-open { transform: none; }
  .rail-close { display: block; position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 26px; cursor: pointer; }
  .trend-pdp div.product { grid-template-columns: minmax(0, 1fr); }
  .trend-pdp .woocommerce-product-gallery { position: static; }
  .qv { grid-template-columns: minmax(0, 1fr); }
  .qv-media { aspect-ratio: 4/3; }
}

@media (max-width: 560px) {
  .products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .card-title { font-size: 13px; }
  .cart-drawer { width: 100vw; }
}

/* ==========================================================================
   Configurable layout additions
   ========================================================================== */

.products,
ul.products { grid-template-columns: repeat(var(--grid-cols, 4), minmax(0, 1fr)); }

.shop-layout.no-rail { grid-template-columns: minmax(0, 1fr); }
.shop-layout.rail-right .shop-rail { order: 2; }
.shop-layout.rail-right .shop-body { order: 1; }

.subcat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--t-line);
  border-radius: 999px;
  font-size: 12.5px;
  background: #fff;
  transition: border-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
}
.chip span { font-size: 11px; color: var(--t-ink-35); }
.chip:hover { border-color: var(--t-accent); color: var(--t-accent); transform: translateY(-1px); }

.cat-banner { position: relative; max-height: 320px; overflow: hidden; }
.cat-banner img { width: 100%; height: 320px; object-fit: cover; }

.archive-description-bottom {
  padding: 32px var(--t-gutter) 64px;
  font-size: 14.5px;
  color: var(--t-ink-60);
  max-width: 900px;
}

/* ---------- Promo banners ---------- */

.banner-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.promo-banner { position: relative; display: block; overflow: hidden; border-radius: var(--t-radius-lg); aspect-ratio: 16/9; }
.promo-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--t-ease-out); }
.promo-banner:hover img { transform: scale(1.06); }
.promo-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 62%); }
.pb-copy { position: absolute; left: 24px; bottom: 22px; z-index: 2; color: #fff; display: grid; gap: 4px; }
.pb-copy strong { font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.pb-copy em { font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* ---------- Testimonials ---------- */

.testimonials { background: #fff; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 24px; }
.quote { margin: 0; padding: 24px; background: var(--t-sand); border-radius: var(--t-radius-lg); }
.quote p { font-family: var(--font-display); font-size: 17px; line-height: 1.5; margin-bottom: 14px; }
.quote cite { font-style: normal; font-size: 12.5px; font-weight: 600; }
.quote cite span { display: block; font-weight: 400; font-size: 11.5px; color: var(--t-ink-60); }

/* ---------- Newsletter ---------- */

.newsletter-band { background: var(--t-ink); color: #fff; text-align: center; }
.newsletter-band h2 { color: #fff; }
.newsletter-inner { max-width: 560px; margin-inline: auto; }
.newsletter-inner p { opacity: .8; }

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

.pdp-size-guide a { font-size: 13px; border-bottom: 1px solid currentColor; }

.pdp-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; font-size: 12px; }
.pdp-share > span { letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-35); }
.share-btn {
  padding: 7px 14px;
  border: 1px solid var(--t-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease);
}
.share-btn:hover { border-color: var(--t-accent); color: var(--t-accent); transform: translateY(-1px); }
.share-wa:hover { border-color: #25d366; color: #128c4a; }
.share-fb:hover { border-color: #1877f2; color: #1877f2; }

.pdp-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--t-line);
  box-shadow: 0 -4px 18px rgba(27,23,25,.08);
  transform: translate3d(0, 100%, 0);
  transition: transform var(--t-speed) var(--t-ease-out);
}
.pdp-sticky-bar.is-visible { transform: none; }
.psb-info { display: grid; gap: 2px; min-width: 0; }
.psb-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psb-price { font-size: 14px; font-weight: 600; }
.pdp-sticky-bar .btn { flex-shrink: 0; padding: 12px 20px; }

@media (max-width: 900px) {
  .trend-pdp .pdp-sticky-bar { display: flex; }

  /* Clear the bar so it does not sit under the floating buttons. */
  .trend-pdp .wa-float { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .trend-pdp .to-top { bottom: calc(138px + env(safe-area-inset-bottom)); }
  .trend-pdp .site-footer { padding-bottom: 72px; }
}

/* ---------- Gallery variants ----------
   With the flexslider disabled for these two, WooCommerce prints the images
   straight into .woocommerce-product-gallery__wrapper, so the wrapper is the
   grid and no viewport has to be hidden. */

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { margin: 0; }
.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--t-radius);
}

.pdp-gallery-stacked .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px);
}

.pdp-gallery-grid .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1vw, 14px);
}

/* A single-image product should not leave half the grid empty. */
.pdp-gallery-grid .woocommerce-product-gallery--columns-1 .woocommerce-product-gallery__wrapper {
  grid-template-columns: minmax(0, 1fr);
}

/* Slider variant keeps WooCommerce's own flexslider markup. */
.pdp-gallery-slider .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.pdp-gallery-slider .flex-control-thumbs li { width: auto; float: none; margin: 0; }
.pdp-gallery-slider .flex-control-thumbs img { width: 100%; height: auto; cursor: pointer; opacity: .55; transition: opacity var(--t-fast) var(--t-ease); }
.pdp-gallery-slider .flex-control-thumbs img.flex-active,
.pdp-gallery-slider .flex-control-thumbs img:hover { opacity: 1; }

/* WooCommerce renders the sale flash as a circle pinned to the page corner.
   Ours is a rectangular chip sitting on the gallery. */
.woocommerce span.onsale,
.trend-pdp span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 3;
  min-height: 0;
  min-width: 0;
  padding: 6px 11px;
  border-radius: var(--t-radius);
  background: var(--t-accent);
  color: #fff;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}

.pdp-breadcrumb { padding-top: 18px; }

body:not(.pdp-sticky) .trend-pdp .woocommerce-product-gallery { position: static; }

@media (max-width: 560px) {
  .products, ul.products { grid-template-columns: repeat(var(--grid-cols-mobile, 2), minmax(0, 1fr)); }
}