/* Advanced Technologies — WooCommerce surfaces.
   Shop archive (white hero + sidebar + grid), single product, cart, checkout,
   and the slide-out mini-cart. Values reference design tokens. */

/* ───────────────────────── Shop archive ───────────────────────── */
.at-shop { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px 72px; }
.at-shop__head { padding: 48px 0 28px; }
.at-shop__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 8px;
}
.at-shop__title { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: var(--text-strong); margin: 0; }
.at-shop__intro { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--text-body); margin: 12px 0 0; max-width: 640px; }

/* Navy hero variant (Customizer → Shop → hero style) — full-bleed navy band */
.at-shop__head--navy {
  position: relative; padding: 0; overflow: hidden;
  background: var(--navy-700); color: #fff;
  /* full-bleed: break out of the centered .at-shop container to the viewport */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 28px;
}
.at-shop__head--navy::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.5px, transparent 0);
  background-size: 26px 26px; -webkit-mask-image: linear-gradient(110deg, #000 40%, transparent 85%); mask-image: linear-gradient(110deg, #000 40%, transparent 85%);
}
.at-shop__head--navy .at-shop__head-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 56px 32px; }
.at-shop__head--navy .at-shop__eyebrow { color: var(--steel-300); }
.at-shop__head--navy .at-shop__title { color: #fff; }
.at-shop__head--navy .at-shop__intro { color: rgba(255,255,255,0.82); }

.at-shop__body { display: grid; grid-template-columns: 244px 1fr; gap: 36px; align-items: start; }
.at-shop__main { min-width: 0; }

/* Filters */
.at-filters { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
.at-filter-group__title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); margin-bottom: 12px;
}
.at-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.at-filters ul li { font-family: var(--font-body); font-size: 14.5px; }
.at-filters ul li a { color: var(--text-body); text-decoration: none; }
.at-filters ul li a:hover { color: var(--navy-700); }
.at-filters ul li.chosen > a { color: var(--color-accent); font-weight: 600; }
.at-filters ul li.chosen > a::before { content: "\00d7\00a0"; }
.at-filters .count { color: var(--text-muted); font-size: 12px; }

/* Checkbox-style layered nav (attribute groups). Faux checkbox before each term;
   fills navy when that term is active (.chosen). */
.at-filter-group--checkbox ul li { position: relative; }
.at-filter-group--checkbox ul li a {
  display: inline-flex; align-items: center; gap: 10px;
}
.at-filter-group--checkbox ul li a::before {
  content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs, 4px);
  background: var(--surface-card, #fff);
  transition: background var(--duration-fast, .15s) var(--ease-standard, ease), border-color var(--duration-fast, .15s) var(--ease-standard, ease);
}
.at-filters .at-filter-group--checkbox ul li.chosen > a { color: var(--text-body); font-weight: 400; }
.at-filters .at-filter-group--checkbox ul li.chosen > a::before {
  content: "\2713"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-700); border-color: var(--navy-700);
}
.at-filter-group--checkbox ul li.chosen > a::after { content: none; }

/* Pill-style layered nav (Brand group) — mirrors the mockup's Tag chips:
   body font, medium weight, navy fill when selected, no hover recolour. */
.at-filter-group--pills ul { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.at-filter-group--pills ul li { margin: 0; }
.at-filter-group--pills ul li a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill, 999px);
  background: var(--surface-card, #fff);
  font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1;
  color: var(--text-body); white-space: nowrap; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.at-filter-group--pills ul li.chosen > a {
  background: var(--navy-700); border-color: var(--navy-700); color: #fff; font-weight: 500;
}
.at-filter-group--pills ul li.chosen > a::before,
.at-filter-group--pills ul li a::before { content: none; }
.at-filter-group--pills ul li .count { display: none; }

.at-term-showmore {
  display: block; margin: 8px 0 0; padding: 0; background: none; border: 0;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--navy-700);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.at-term-showmore:hover { color: var(--navy-900); }

/* Price filter */
.at-filters .price_slider_wrapper { margin-top: 6px; }
/* Slider applies on release (see woo.js) — the explicit Filter button is redundant. */
.at-filters .price_slider_amount .button { display: none; }
.at-filters .price_slider_amount { display: flex; align-items: baseline; }
/* Beat WooCommerce's default purple (#a46497): match its widget selector + !important. */
.at-filters .ui-slider,
.woocommerce .at-filters .widget_price_filter .price_slider { background: var(--border-default); height: 4px; border-radius: 99px; position: relative; margin: 12px 0; }
.at-filters .ui-slider .ui-slider-range,
.woocommerce .at-filters .widget_price_filter .ui-slider-range { background: var(--navy-800) !important; height: 4px; position: absolute; }
.at-filters .ui-slider .ui-slider-handle,
.woocommerce .at-filters .widget_price_filter .ui-slider-handle {
  width: 16px; height: 16px; background: #fff !important; border: 2px solid var(--navy-800) !important;
  border-radius: 99px; top: -6px; margin-left: -8px; box-shadow: none;
}
.at-filters .price_label { font-family: var(--font-mono); font-size: 13px; color: var(--steel-500); margin-top: 4px; }

/* Showroom CTA */
.at-filter-cta { background: var(--steel-50); border: 1px solid var(--steel-200); border-radius: var(--radius-lg); padding: 18px; }
.at-filter-cta__title { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.at-filter-cta p { font-size: 14px; color: var(--text-body); margin: 0 0 12px; }

/* Sort / results bar */
.woocommerce-result-count { font-family: var(--font-body); font-size: 14px; color: var(--text-muted); margin: 0; }
.woocommerce-ordering { float: none; margin: 0; }
.woocommerce-ordering select {
  font-family: var(--font-body); font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #fff; color: var(--text-strong);
}
.at-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.at-shop__toolbar .woocommerce-result-count { margin: 0; }
.at-shop__toolbar .woocommerce-ordering { margin: 0; float: none; }
.woocommerce-products-header__title { display: none; } /* we render our own title */
/* Belt-and-suspenders: in block themes the archive renders via the Classic
   Template block, which can also emit a title/breadcrumb. Hide those on product
   archives so only our .at-shop__head header shows (single product unaffected). */
.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header,
.tax-product_tag .woocommerce-products-header,
.post-type-archive-product .woocommerce-breadcrumb,
.tax-product_cat .woocommerce-breadcrumb,
.tax-product_tag .woocommerce-breadcrumb,
.post-type-archive-product .wp-block-woocommerce-breadcrumbs,
.tax-product_cat .wp-block-woocommerce-breadcrumbs,
.tax-product_tag .wp-block-woocommerce-breadcrumbs,
.post-type-archive-product .wp-block-query-title,
.tax-product_cat .wp-block-query-title,
.tax-product_tag .wp-block-query-title { display: none !important; }

/* Product grid — works whether the Shop page is our classic layout (.at-shop__main)
   OR a block-editor page (no wrapper). We DON'T require .at-shop__main so the
   design applies to the default/block loop too. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  list-style: none; margin: 18px 0 0; padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

/* ── Design-system card frame — applies to BOTH the classic loop
   (li.product) AND the block Product Collection / Products grid
   (li.wc-block-product / .wc-block-grid__product). ── */
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product,
.wp-block-woocommerce-product-template li.product,
.wc-block-product-template .wc-block-product {
  position: relative; width: auto !important; margin: 0 !important; float: none !important;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 0 0 18px !important; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; transition: box-shadow var(--duration-fast,0.15s) var(--ease-standard,ease), border-color var(--duration-fast,0.15s) var(--ease-standard,ease);
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover,
.wc-block-product:hover { box-shadow: var(--shadow-md); border-color: var(--steel-200); }

/* Image flush at top */
.woocommerce ul.products li.product > a:first-of-type,
.woocommerce ul.products li.product img,
.wc-block-grid__product-image, .wc-block-grid__product-image img,
.wc-block-product .wc-block-components-product-image, .wc-block-product img {
  margin: 0 !important; border-radius: 0 !important; display: block; width: 100%;
}
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img,
.wc-block-product img { background: var(--surface-page); }

/* Padding for text children (classic + block) */
.woocommerce ul.products li.product .at-loop-brand,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.wc-block-grid__product-title, .wc-block-grid__product-price, .wc-block-grid__product-rating,
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wp-block-woocommerce-product-rating { margin-left: 20px !important; margin-right: 20px !important; }

.at-loop-specs { display: flex; flex-direction: column; gap: 2px; margin: 6px 20px 0; font-size: 12px; color: var(--text-muted); }
.at-loop-specs__label { font-weight: 700; color: var(--text-strong); }
.wc-block-product .at-loop-specs, .wc-block-product-template li.product .at-loop-specs { margin-left: 20px !important; margin-right: 20px !important; }
/* Brand eyebrow */
.woocommerce ul.products li.product .at-loop-brand {
  display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-product .wp-block-post-title {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 16px !important;
  color: var(--text-strong) !important; padding: 4px 0 8px !important; margin-top: 8px; line-height: 1.3;
}

/* Price */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.wc-block-product .wp-block-woocommerce-product-price {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 4px !important;
}
.woocommerce ul.products li.product .price ins,
.wc-block-grid__product-price ins,
.wc-block-product .wp-block-woocommerce-product-price ins { order: 0; text-decoration: none; font-weight: 800; }
.woocommerce ul.products li.product .price del,
.wc-block-grid__product-price del,
.wc-block-product .wp-block-woocommerce-product-price del { order: 1; font-family: var(--font-mono,monospace); font-weight: 500; font-size: 14px; color: var(--text-muted); opacity: 1; }
.woocommerce ul.products li.product .star-rating { margin-top: 10px !important; margin-bottom: 2px; }

/* Add to cart → base layout only (colors set by the white-button rule below) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button .wp-block-button__link {
  display: block !important; margin: 14px 20px 0 !important; text-align: center;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14px !important;
  padding: 11px 16px !important; border-radius: var(--radius-md) !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product .added_to_cart { display: block; text-align: center; margin: 8px 20px 0; font-size: 13px; color: var(--navy-700); }

/* SALE flag → red pill, white text, pinned top-LEFT (matches the StoreGrid mockup) */
.woocommerce ul.products li.product .onsale,
.wc-block-grid__product .wc-block-grid__product-onsale,
.wc-block-product .wc-block-components-product-sale-badge {
  top: 14px !important; left: 14px !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; position: absolute; z-index: 3;
  background: var(--color-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--radius-sm, 6px) !important;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 11px !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  padding: 6px 11px !important; line-height: 1 !important; box-shadow: var(--shadow-sm);
}
.wc-block-product .wc-block-components-product-sale-badge__text { color: #fff !important; }

/* Order inside the Product Collection card: image → brand → title → price → button */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image { order: 0; }
.wc-block-product .at-loop-brand { order: 1; }
.wc-block-product .wp-block-post-title { order: 2; }
.wc-block-product .at-loop-specs { order: 3; }
.wc-block-product .wp-block-woocommerce-product-price { order: 4; }
.wc-block-product .wp-block-woocommerce-product-button,
.wc-block-product .wc-block-components-product-button { order: 5; }

/* Image fits horizontally (show the whole product, not cropped) */
.woocommerce ul.products li.product > a:first-of-type img,
.woocommerce ul.products li.product img.wp-post-image,
.wc-block-grid__product-image img,
.wc-block-product img {
  object-fit: contain !important; aspect-ratio: 4 / 3; height: auto;
  background: var(--surface-page); padding: 6px; box-sizing: border-box;
}

/* Brand → bold navy (was muted grey) */
.woocommerce ul.products li.product .at-loop-brand { color: var(--navy-700) !important; font-weight: 800 !important; }
/* Brand in the Product Collection block (li.wc-block-product) */
.wc-block-product .at-loop-brand {
  display: block; text-align: left; margin: 0 20px 4px !important;
  font-family: var(--font-display); font-weight: 800; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-700) !important;
}

/* Title → centered navy, like the mockup */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wc-block-product .wp-block-post-title {
  text-align: left; color: var(--navy-700) !important;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.wc-block-product .wp-block-woocommerce-product-price { justify-content: flex-start; }

/* Add to cart → white with navy (hover: navy fill), left-aligned — matches mockup.
   3-class selector to beat the older WooCommerce default button rule. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-product .wp-block-button__link,
.wc-block-product .wc-block-components-product-button .wp-block-button__link {
  display: table !important; margin: 16px 20px 4px !important; width: auto !important; min-width: 150px;
  background: #fff !important; color: var(--navy-700) !important;
  border: 1.5px solid var(--navy-700) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.wc-block-product .wp-block-button__link:hover,
.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
  background: var(--navy-700) !important; color: #fff !important; border-color: var(--navy-700) !important;
}

/* ── AJAX Load More safety net ──
   This site's Shop/Category grid actually renders as WooCommerce's Product
   Collection block: a <ul class="wc-block-product-template"> (NOT ul.products),
   containing classic <li class="product"> markup. Every card rule above is
   scoped to an ancestor of either "ul.products" or "wc-block-product"/
   "wc-block-grid__product" — neither of which matches this container, so
   AJAX-appended items (which reuse the same classic li.product markup) were
   rendering with zero card styling. Re-declare the same rules scoped to the
   real container so appended items match the existing cards exactly. */
.wc-block-product-template li.product,
ul.wc-block-product-template li.product {
  position: relative; width: auto !important; margin: 0 !important; float: none !important;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 0 0 18px !important; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; transition: box-shadow var(--duration-fast,0.15s) var(--ease-standard,ease), border-color var(--duration-fast,0.15s) var(--ease-standard,ease);
}
.wc-block-product-template li.product:hover { box-shadow: var(--shadow-md); border-color: var(--steel-200); }
.wc-block-product-template li.product > a:first-of-type,
.wc-block-product-template li.product img { margin: 0 !important; border-radius: 0 !important; display: block; width: 100%; }
.wc-block-product-template li.product img { background: var(--surface-page); }
.wc-block-product-template li.product .at-loop-brand,
.wc-block-product-template li.product .woocommerce-loop-product__title,
.wc-block-product-template li.product .price,
.wc-block-product-template li.product .star-rating { margin-left: 20px !important; margin-right: 20px !important; }
.wc-block-product-template li.product .at-loop-brand {
  display: block; margin-top: 16px; font-family: var(--font-display); font-weight: 800;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-700) !important;
}
.wc-block-product-template li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 16px !important;
  color: var(--navy-700) !important; padding: 4px 0 8px !important; margin-top: 8px; line-height: 1.3; text-align: left;
}
.wc-block-product-template li.product .price {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 4px !important; justify-content: flex-start;
}
.wc-block-product-template li.product .price ins { order: 0; text-decoration: none; font-weight: 800; }
.wc-block-product-template li.product .price del { order: 1; font-family: var(--font-mono,monospace); font-weight: 500; font-size: 14px; color: var(--text-muted); opacity: 1; }
.wc-block-product-template li.product .star-rating { margin-top: 10px !important; margin-bottom: 2px; }
.wc-block-product-template li.product .button,
.wc-block-product-template li.product .add_to_cart_button {
  display: table !important; margin: 16px 20px 4px !important; width: auto !important; min-width: 150px;
  text-align: center; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14px !important;
  padding: 11px 16px !important; border-radius: var(--radius-md) !important; text-decoration: none !important;
  background: #fff !important; color: var(--navy-700) !important; border: 1.5px solid var(--navy-700) !important;
}
.wc-block-product-template li.product .button:hover,
.wc-block-product-template li.product .add_to_cart_button:hover { background: var(--navy-700) !important; color: #fff !important; border-color: var(--navy-700) !important; }
.wc-block-product-template li.product .added_to_cart { display: block; text-align: center; margin: 8px 20px 0; font-size: 13px; color: var(--navy-700); }
.wc-block-product-template li.product .onsale {
  top: 14px !important; left: 14px !important; right: auto !important; bottom: auto !important;
  margin: 0 !important; position: absolute; z-index: 3;
  background: var(--color-accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--radius-sm, 6px) !important;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 11px !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  padding: 6px 11px !important; line-height: 1 !important; box-shadow: var(--shadow-sm);
}
.wc-block-product-template li.product > a:first-of-type img,
.wc-block-product-template li.product img.wp-post-image {
  object-fit: contain !important; aspect-ratio: 4 / 3; height: auto;
  background: var(--surface-page); padding: 6px; box-sizing: border-box;
}

/* Pagination */
.woocommerce-pagination { margin-top: 36px; }
.woocommerce-pagination ul { display: inline-flex; gap: 6px; border: 0 !important; }
.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span {
  font-family: var(--font-display); font-weight: 700; min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-md); color: var(--navy-700);
}
.woocommerce-pagination ul li span.current { background: var(--navy-700); color: #fff; border-color: var(--navy-700) !important; }

/* ── Ports & Slots tab ─────────────────────────────────────────────
   Image(s) + a two-column numbered list, continuous numbering across
   multiple images — matches the "Ports & Slots" reference layout. */
.at-ports-slots__images { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 32px; }
.at-ports-slots__image { max-width: 100%; height: auto; }
.at-ports-slots__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 48px; row-gap: 14px; max-width: 680px; margin-inline: auto; }
.at-ports-slots__list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-strong); }
.at-ports-slots__num { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--navy-700); color: var(--navy-700); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .at-ports-slots__list { grid-template-columns: 1fr; } }


.single-product .woocommerce > .product { max-width: 1180px; margin: 0 auto; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.single-product div.product .woocommerce-product-gallery { width: 100% !important; margin: 0 !important; position: relative; }
.single-product div.product .woocommerce-product-gallery__image img { border-radius: var(--radius-xl); }

/* ── Native WooCommerce product gallery — styling pass ── */
/* Main image: framed on a light surface so any aspect ratio sits cleanly */
.single-product .woocommerce-product-gallery__wrapper { margin: 0; }
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image--placeholder {
  background: var(--surface-page); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden;
}
.single-product .woocommerce-product-gallery__image a { display: block; }
.single-product .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; }
/* Zoom/lightbox trigger button */
.single-product .woocommerce-product-gallery__trigger {
  top: 16px; right: 16px; z-index: 3;
  width: 40px; height: 40px; background: #fff; border: 1px solid var(--border-default);
  border-radius: 99px; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center;
}
.single-product .woocommerce-product-gallery__trigger::before { width: 14px; height: 14px; border-color: var(--navy-700); }
.single-product .woocommerce-product-gallery__trigger::after { background: var(--navy-700); }

/* Thumbnail row — horizontal scroll strip (Samsung-style).
   flexslider sets inline widths on the <ol> and each <li> (and floats them);
   override with !important so they form one scrollable row instead of a grid. */
.single-product .flex-control-thumbs {
  display: flex !important; flex-wrap: nowrap !important; gap: 12px; margin: 12px 0 0; padding: 0 0 8px;
  list-style: none; width: 100% !important; overflow-x: auto !important; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.single-product .flex-control-thumbs::-webkit-scrollbar { height: 8px; }
.single-product .flex-control-thumbs::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 99px; }
.single-product .flex-control-thumbs li {
  margin: 0 !important; width: 84px !important; float: none !important; list-style: none;
  flex: 0 0 84px; scroll-snap-align: start;
}
.single-product .flex-control-thumbs img { width: 84px !important; height: 84px; }
.single-product .flex-control-thumbs img {
  width: 72px; height: 72px; object-fit: cover; cursor: pointer; opacity: 1;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-page);
  transition: border-color var(--duration-fast, .15s) var(--ease-standard, ease);
}
.single-product .flex-control-thumbs img:hover { border-color: var(--steel-400); }
.single-product .flex-control-thumbs img:hover { border-color: var(--steel-400); }
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs .flex-active img { border-color: var(--navy-700); border-width: 2px; }

/* Slider arrows (flexslider) */
.single-product .woocommerce-product-gallery .flex-direction-nav a {
  background: #fff; border: 1px solid var(--border-default); border-radius: 99px;
  width: 40px; height: 40px; box-shadow: var(--shadow-sm); color: var(--navy-700);
}

/* Navy media surface for black-edged product shots:
   add body class via the "Product gallery surface" setting (below) or the
   `at-gallery-dark` class on the product. Contains the image on a navy panel. */
.single-product.at-gallery-dark .woocommerce-product-gallery__image,
.single-product .product.at-gallery-dark .woocommerce-product-gallery__image {
  background: var(--navy-900); padding: 10px;
}
.single-product.at-gallery-dark .woocommerce-product-gallery__image img,
.single-product .product.at-gallery-dark .woocommerce-product-gallery__image img {
  border-radius: var(--radius-lg);
}
.single-product div.product .summary { margin: 0 !important; float: none !important; width: auto !important; }
.single-product .product_title { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -0.01em; color: var(--text-strong); margin: 4px 0 6px; }
/* Brand eyebrow above the title (muted, like the mockup) */
.single-product .at-single-brand { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 2px; order: -2; }
.single-product .at-single-brand a { color: inherit; text-decoration: none; }
.single-product .at-single-brand a:hover { color: var(--navy-700); }
/* SKU line below the title */
.single-product .at-single-sku { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--text-muted); margin: 0 0 14px; order: -1; }
.single-product .at-single-sku span { color: var(--text-body); }
.single-product .woocommerce-product-details__short-description { font-size: 16px; line-height: 1.65; color: var(--text-body); }
/* Price: sale amount large + first, regular struck + smaller to its right.
   Covers classic markup (p.price > ins/del) AND block markup
   (.wc-block-components-product-price > __sale / __regular). */
.single-product div.product p.price,
.single-product div.product span.price,
.single-product .wp-block-woocommerce-product-price .price,
.single-product .price,
.single-product .wc-block-components-product-price {
  font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--text-strong);
  display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 6px 0;
}
.single-product .price ins:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *),
.single-product .price > ins:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *),
.single-product .wc-block-components-product-price__sale:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *),
.single-product .wc-block-components-product-price ins:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *) {
  order: 0 !important; text-decoration: none !important; font-size: 32px !important; color: var(--text-strong) !important; font-weight: 800 !important;
}
.single-product .price del:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *),
.single-product .price > del:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *),
.single-product .wc-block-components-product-price__regular:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *),
.single-product .wc-block-components-product-price del:not(.related.products *):not(.upsells.products *):not([data-collection="woocommerce/product-collection/related"] *) {
  order: 1 !important; font-family: var(--font-mono, monospace) !important; font-weight: 500 !important; font-size: 15px !important; color: var(--text-muted) !important; opacity: 1 !important; text-decoration: line-through !important;
}
/* Related/upsells keep the compact card price sizing instead. */
.related.products .price ins, .upsells.products .price ins,
[data-collection="woocommerce/product-collection/related"] .price ins { font-size: 14px !important; font-weight: 800 !important; }
.related.products .price del, .upsells.products .price del,
[data-collection="woocommerce/product-collection/related"] .price del { font-size: 12px !important; }
/* Keep WooCommerce's a11y price text invisible but present. */
.single-product .wc-block-components-product-price .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* In-stock indicator → green badge (matches the mockup) */
.single-product .at-stock { margin: 4px 0 16px; }
.single-product .at-stock-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  padding: 6px 12px; border-radius: var(--radius-sm, 6px); line-height: 1;
}
.single-product .at-stock-badge::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.single-product .at-stock-badge--in { background: var(--success-50, #e8f6ee); color: var(--success-700, #1b7a48); }
.single-product .at-stock-badge--out { background: var(--surface-page); color: var(--text-muted); }
.single-product .at-stock-badge--backorder { background: var(--amber-50, #fdf3e3); color: var(--amber-700, #a8680c); }
/* Hide the default product meta (SKU/Category/Brands) — classic AND block markup.
   We show brand above the title and SKU below it; category is intentionally omitted. */
.single-product .product_meta,
.single-product .wp-block-woocommerce-product-meta { display: none !important; }
.single-product .woocommerce-product-rating { margin-bottom: 14px; }

/* ── Size selector (sibling-product pills) ── */
.at-size-select { margin: 4px 0 22px; }
.at-size-select__label {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-strong); margin: 0 0 10px;
}
.at-size-select__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.at-size-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; height: 44px; padding: 0 16px; box-sizing: border-box;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-strong); text-decoration: none;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast, 0.15s) var(--ease-standard, ease), color var(--duration-fast, 0.15s) var(--ease-standard, ease);
}
.at-size-pill:hover { border-color: var(--navy-700); color: var(--navy-700); }
.at-size-pill.is-current {
  border-color: var(--navy-700); border-width: 2px; color: var(--navy-700);
  background: var(--navy-50, #eef2f7); cursor: default;
}
.at-size-pill.is-oos { color: var(--text-muted); border-style: dashed; }
.at-size-pill.is-oos::after { content: ""; }
.at-spec-select + .at-spec-select { margin-top: -8px; }
/* Sale badge → brand red pill (replaces the default olive circle) */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.single-product .woocommerce span.onsale {
  background: var(--color-accent) !important; color: #fff !important;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  min-height: 0; min-width: 0; line-height: 1;
  padding: 7px 12px; border-radius: var(--radius-sm, 6px); border: 0;
  position: absolute; top: 14px; left: 14px; margin: 0; z-index: 2;
}
/* Single product: "Request a quote" button (no-price products) — same footprint
   as the standard Add-to-cart button so the layout doesn't shift. */
.woocommerce div.product .at-quote-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-700) !important; color: #fff !important;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  border-radius: var(--radius-md); padding: 0 28px; height: 52px; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.woocommerce div.product .at-quote-button:hover { background: var(--navy-800, #1c2436) !important; }

/* Quote-page context callout ([at_quote_context]) */
.at-quote-context {
  background: var(--surface-sunken, #f1f3f8); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 14px 18px; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 3px;
}
.at-quote-context__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--steel-600, #577591);
}
.at-quote-context__name { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-strong); }
.at-quote-context__name a { color: var(--steel-600, #577591); font-weight: 500; }

/* Add-to-cart button → primary */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--color-accent) !important; color: #fff !important;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  border-radius: var(--radius-md); padding: 13px 26px; border: 0;
}
.woocommerce div.product form.cart .button:hover { background: var(--color-accent-hover) !important; }
.woocommerce div.product form.cart .quantity input.qty {
  height: 48px; width: 72px; border: 1px solid var(--border-default); border-radius: var(--radius-md); text-align: center;
}
/* Trust row */
.at-trust { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 22px; }
.at-trust__row { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; color: var(--text-body); }
.at-trust__row svg { color: var(--steel-600); flex: none; }
/* Tabs — navy band (Samsung-style section nav).
/* Tabs — full-bleed navy band (Samsung-style section nav).
   The product container is page-centered (max-width 1180, margin auto) and the
   tabs span the full grid (grid-column 1/-1), so a 100vw breakout centers on the
   page. We force the margins with !important because WooCommerce's own ul.tabs
   margin rule otherwise wins and the band stops at the content edge. */
.woocommerce-tabs { grid-column: 1 / -1 !important; width: 100% !important; margin: 16px 0 0 !important; }
.woocommerce-tabs ul.tabs {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important;
  box-sizing: border-box; padding: 0 max(32px, calc(50vw - 558px)) !important; border-bottom: 0; display: flex; gap: 8px;
  background: var(--navy-800); justify-content: flex-start;
}
.woocommerce-tabs .panel,
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs .panel { margin-top: 0 !important; padding-top: 40px !important; }
.woocommerce-tabs ul.tabs::before { border: 0; display: none; }
.woocommerce-tabs ul.tabs li {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: rgba(255,255,255,0.6) !important;
  padding: 16px 16px !important; display: inline-block; border-bottom: 3px solid transparent;
}
.woocommerce-tabs ul.tabs li a:hover { color: rgba(255,255,255,0.85) !important; }
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li[aria-selected="true"] a,
.woocommerce-tabs ul.tabs li.active > a {
  color: #fff !important; border-bottom: 3px solid var(--color-accent) !important;
}
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; content: "" !important; }
.woocommerce-tabs ul.tabs li a::before, .woocommerce-tabs ul.tabs li a::after { display: none !important; content: "" !important; }

/* Specifications table (Additional information) — clean mockup style:
   monospace rows, muted left-aligned labels, strong values, hairline dividers,
   no zebra striping, no italics. */
.single-product table.shop_attributes,
.single-product .woocommerce-product-attributes {
  border: 0 !important; margin: 0; width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: var(--font-mono); font-size: 14px;
}
.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 12px 8px; text-align: left; vertical-align: top; font-style: normal;
  overflow-wrap: break-word;
}
.single-product table.shop_attributes th {
  width: 240px; padding-right: 20px; font-family: var(--font-mono); font-weight: 400;
  color: var(--text-muted); white-space: normal; line-height: 1.5;
}
.single-product table.shop_attributes td { color: var(--text-strong); }
.single-product table.shop_attributes td p { margin: 0; }
.single-product table.shop_attributes tr:last-child th,
.single-product table.shop_attributes tr:last-child td { border-bottom: 0 !important; }

/* ── Shop grid ad card (Samsung "Vision AI" pattern) ──
   Renders as a real <li class="product at-shop-ad">, so it occupies one grid
   cell exactly like a product card — no special grid-span rules needed.
   Image can be a full-bleed background (scrim + overlaid text, positioned via
   h/v alignment) or omitted entirely for a plain text-only card. */
.woocommerce ul.products li.product.at-shop-ad,
.woocommerce-page ul.products li.product.at-shop-ad,
.wc-block-grid__products .wc-block-grid__product.at-shop-ad,
.wp-block-woocommerce-product-template li.product.at-shop-ad,
.wc-block-product-template .wc-block-product.at-shop-ad {
  background: var(--steel-50); border-radius: var(--radius-lg); border: 0;
  padding: 0 !important; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: 260px; box-shadow: none; position: relative; overflow: hidden;
}
.at-shop-ad__title {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--text-strong);
  margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
}
.at-shop-ad__subtitle { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 14px; }
.at-shop-ad__link {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--navy-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.at-shop-ad__link:hover { color: var(--color-accent); }

.at-shop-ad__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.at-shop-ad__body { position: relative; z-index: 2; padding: 24px 22px; }
.at-shop-ad--media .at-shop-ad__title,
.at-shop-ad--media .at-shop-ad__subtitle { color: #fff; }
.at-shop-ad--media .at-shop-ad__link { color: #fff; }
.at-shop-ad--media .at-shop-ad__link:hover { color: var(--color-accent-light, #ff8b90); }

/* Text colour options — user-selectable per ad (overlay mode only) */
.at-shop-ad--text-black .at-shop-ad__title,
.at-shop-ad--text-black .at-shop-ad__subtitle,
.at-shop-ad--text-black .at-shop-ad__link { color: #141a26; }
.at-shop-ad--text-navy .at-shop-ad__title,
.at-shop-ad--text-navy .at-shop-ad__subtitle,
.at-shop-ad--text-navy .at-shop-ad__link { color: var(--navy-700); }
.at-shop-ad--text-red .at-shop-ad__title,
.at-shop-ad--text-red .at-shop-ad__subtitle,
.at-shop-ad--text-red .at-shop-ad__link { color: var(--color-accent); }
.at-shop-ad--text-steel .at-shop-ad__title,
.at-shop-ad--text-steel .at-shop-ad__subtitle,
.at-shop-ad--text-steel .at-shop-ad__link { color: var(--steel-500, #577591); }
.at-shop-ad--text-black .at-shop-ad__link:hover,
.at-shop-ad--text-navy .at-shop-ad__link:hover,
.at-shop-ad--text-red .at-shop-ad__link:hover,
.at-shop-ad--text-steel .at-shop-ad__link:hover { opacity: 0.75; }

/* Text block position when the image is a full background — h/v combos set
   both the flex alignment of the card and the scrim direction/text align so
   the darkest part of the scrim always sits behind the text. */
.at-shop-ad--media { display: flex; height: 100%; }
/* Chained with .at-shop-ad--media for specificity — otherwise the base
   li.product.at-shop-ad rule's justify-content:flex-end (more specific,
   tag+3 classes) always wins over a single-class --v-* selector regardless
   of source order, which is why "Top" silently rendered as bottom before. */
li.product.at-shop-ad.at-shop-ad--media.at-shop-ad--v-top { justify-content: flex-start; }
li.product.at-shop-ad.at-shop-ad--media.at-shop-ad--v-center { justify-content: center; }
li.product.at-shop-ad.at-shop-ad--media.at-shop-ad--v-bottom { justify-content: flex-end; }
.at-shop-ad--h-left .at-shop-ad__body { text-align: left; align-self: flex-start; }
.at-shop-ad--h-center .at-shop-ad__body { text-align: center; align-self: center; }
.at-shop-ad--h-right .at-shop-ad__body { text-align: right; align-self: flex-end; }

/* "Load more" button (Shop/Category grid + Search results) — replaces classic
   pagination. Centered, brand outline style, matches at-shop-ad button tone. */
.at-shop-loadmore, .woocommerce ul.products + .at-shop-loadmore {
  display: flex; justify-content: center; margin: 40px 0 8px; grid-column: 1 / -1;
}
.at-shop-loadmore__btn {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy-700);
  background: #fff; border: 1.5px solid var(--navy-700); border-radius: var(--radius-md);
  padding: 13px 32px; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.at-shop-loadmore__btn:hover { background: var(--navy-700); color: #fff; }
.at-shop-loadmore__btn:disabled { opacity: 0.6; cursor: default; }
/* Active filter chips row (removable pills above the grid) */
.at-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 20px; }
.at-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--navy-700); background: var(--steel-50); border: 1px solid var(--border-default); border-radius: 999px; padding: 6px 10px 6px 12px;
}
.at-chip a { color: var(--text-muted); text-decoration: none; font-size: 15px; line-height: 1; }
.at-chip a:hover { color: var(--color-accent); }
.at-active-filters__clear { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.at-active-filters__clear:hover { color: var(--navy-700); }
/* Safety-net: hide WooCommerce's classic AND block-based pagination markup
   wherever it renders, in case the theme's Shop/Category template is using
   WooCommerce Blocks' own Product Collection query (which has its own
   Query Pagination block, separate from the classic woocommerce_pagination()
   hook we removed in PHP). */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination,
.wp-block-query-pagination,
.wc-block-product-collection .wp-block-query-pagination { display: none !important; }

/* Related / up-sell products — must break out of the parent .product 2-col grid
   (like the tabs) or they get crammed into one half-width cell. Full width, then
   a proper 4-up product grid using the shared card frame. */
.related.products, .upsells.products {
  grid-column: 1 / -1 !important; width: 100%; margin-top: 8px;
  border-top: 1px solid var(--border-subtle); padding-top: 32px;
}
.related.products > h2, .upsells.products > h2,
.related.products .wp-block-heading, .upsells.products .wp-block-heading,
.wp-block-woocommerce-related-products .wp-block-heading,
.wp-block-woocommerce-related-products > h2,
.single-product .wp-block-woocommerce-product-collection h2.wp-block-heading,
.single-product .wp-block-woocommerce-product-collection .wp-block-heading {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 26px !important;
  line-height: 1.3 !important; color: var(--text-strong) !important; margin: 0 0 18px !important;
}
/* Card size matches the shop grid's density (~232px column) rather than
   stretching to fill the full-width related/upsell section. Fixed track
   width (not fr/minmax-to-0) means the row never stretches cards to fill
   the row — with fewer than 4 items it stays left-aligned, exactly like
   the shop grid does. Cap of 4 tracks means never more than 4 per row. */
/* Related products actually renders as the newer "Product Collection" block
   (data-collection="woocommerce/product-collection/related"), wrapped in
   .wp-block-woocommerce-product-collection with its own flex "columns-5"
   layout — not .related.products or .wp-block-woocommerce-related-products,
   so none of the rules above ever matched it. Target it directly. */
[data-collection="woocommerce/product-collection/related"] ul.wc-block-product-template,
[data-collection="woocommerce/product-collection/related"] .wc-block-product-template {
  display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; justify-content: start !important;
  gap: 14px !important;
}
[data-collection="woocommerce/product-collection/related"] img { aspect-ratio: 1 / 1 !important; }
[data-collection="woocommerce/product-collection/related"] .wp-block-post-title,
[data-collection="woocommerce/product-collection/related"] .wc-block-components-product-title { font-size: 13px !important; padding: 2px 0 4px !important; margin-top: 6px !important; }
[data-collection="woocommerce/product-collection/related"] .price,
[data-collection="woocommerce/product-collection/related"] .wc-block-components-product-price { font-size: 14px !important; }
[data-collection="woocommerce/product-collection/related"] .add_to_cart_button,
[data-collection="woocommerce/product-collection/related"] .wc-block-components-product-button .wp-block-button__link { font-size: 12px !important; padding: 6px 10px !important; min-width: 0 !important; }
@media (max-width: 900px) {
  [data-collection="woocommerce/product-collection/related"] ul.wc-block-product-template,
  [data-collection="woocommerce/product-collection/related"] .wc-block-product-template { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 600px) {
  [data-collection="woocommerce/product-collection/related"] ul.wc-block-product-template,
  [data-collection="woocommerce/product-collection/related"] .wc-block-product-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
  display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; justify-content: start;
  gap: 14px; list-style: none; margin: 0; padding: 0;
}
.woocommerce .related.products ul.products img,
.woocommerce .upsells.products ul.products img { aspect-ratio: 1 / 1 !important; }
.woocommerce .related.products ul.products .woocommerce-loop-product__title,
.woocommerce .upsells.products ul.products .woocommerce-loop-product__title { font-size: 13px !important; padding: 2px 0 4px !important; }
.woocommerce .related.products ul.products .price,
.woocommerce .upsells.products ul.products .price { font-size: 14px !important; }
.woocommerce .related.products ul.products .add_to_cart_button,
.woocommerce .upsells.products ul.products .add_to_cart_button { font-size: 12px !important; padding: 6px 10px !important; }
.related.products ul.products::before, .related.products ul.products::after { content: none; }
.related.products ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* ── Key features at a glance (FeatureShowcase) — single-product placement ──
   Base component styling lives in components.css (site-wide + editor). Here we
   only make it break out of the parent .product 2-col grid, like the tabs. */
.single-product .at-feature-showcase {
  grid-column: 1 / -1 !important; width: 100%;
  max-width: 1180px; margin: 0 auto; padding: var(--space-8) 32px;
}
.single-product .at-feature-showcase--dark { padding: var(--space-9) var(--space-6); }

/* Block-based product lists (Product Collection / block "Related products") have
   no ul.products, so the grid rules above miss them → cards stack full-width.
   Give the block templates the same 4-up grid (scoped to related/upsells, plus a
   generic fallback). */
.wp-block-woocommerce-related-products .wc-block-product-template,
.wp-block-woocommerce-related-products .wp-block-woocommerce-product-template,
.related.products .wc-block-product-template,
.related.products .wp-block-woocommerce-product-template,
.upsells.products .wc-block-product-template,
.upsells.products .wp-block-woocommerce-product-template {
  display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; justify-content: start !important;
  gap: 14px !important; list-style: none; margin: 0 !important; padding: 0 !important;
}
/* Related/upsells cards run smaller than the main shop grid — the section
   sits below a lot of content and shouldn't visually compete with it. */
.wp-block-woocommerce-related-products img,
.related.products img,
.upsells.products img {
  aspect-ratio: 1 / 1 !important;
}
.wp-block-woocommerce-related-products .wc-block-components-product-title,
.wp-block-woocommerce-related-products .wp-block-post-title,
.wp-block-woocommerce-related-products .woocommerce-loop-product__title,
.related.products .wc-block-components-product-title,
.related.products .wp-block-post-title,
.related.products .woocommerce-loop-product__title,
.upsells.products .wc-block-components-product-title,
.upsells.products .wp-block-post-title,
.upsells.products .woocommerce-loop-product__title {
  font-size: 13px !important; padding: 2px 0 4px !important; margin-top: 6px !important;
}
.wp-block-woocommerce-related-products .price,
.wp-block-woocommerce-related-products .wc-block-components-product-price,
.related.products .price,
.related.products .wc-block-components-product-price,
.upsells.products .price,
.upsells.products .wc-block-components-product-price {
  font-size: 14px !important;
}
.wp-block-woocommerce-related-products .add_to_cart_button,
.wp-block-woocommerce-related-products .wc-block-components-product-button .wp-block-button__link,
.related.products .add_to_cart_button,
.related.products .wc-block-components-product-button .wp-block-button__link,
.upsells.products .add_to_cart_button,
.upsells.products .wc-block-components-product-button .wp-block-button__link {
  font-size: 12px !important; padding: 6px 10px !important; min-width: 0 !important; margin: 10px 10px 4px !important;
}
.wc-block-product-template, .wp-block-woocommerce-product-template {
  display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; list-style: none; padding: 0;
}

/* ── Behavior-based recommendations ("Recommended for you" / "You might
   also like") — inc/behavior-recommend.php ── */
.at-behavior-row{max-width:1180px;margin:48px auto 0;padding:0 32px}
.at-behavior-row__title{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text-strong);margin:0 0 16px}
.at-behavior-row__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.at-behavior-cart-widget{max-width:1180px;margin:32px auto 0;padding:28px 32px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.at-behavior-cart-widget__title{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text-strong);margin:0 0 4px}
.at-behavior-cart-widget__why{font-size:12.5px;color:var(--text-muted);margin:0 0 20px}
.at-behavior-cart-widget__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.at-behavior-card,.at-behavior-cart-card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;position:relative;display:block;text-decoration:none;text-align:center}
.at-behavior-card__sale-badge{position:absolute;top:10px;left:10px;background:var(--color-accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);z-index:1}
.at-behavior-card img,.at-behavior-cart-card img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:10px;background:var(--surface-page)}
.at-behavior-card__name,.at-behavior-cart-card__name{display:block;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--text-strong);line-height:1.35;margin:0 0 6px;text-decoration:none;min-height:36px}
.at-behavior-card__price,.at-behavior-cart-card__price{display:flex;align-items:baseline;gap:6px;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--text-strong)}
.at-behavior-card__price ins,.at-behavior-cart-card__price ins{text-decoration:none;order:0}
.at-behavior-card__price del,.at-behavior-cart-card__price del{order:1;font-family:var(--font-mono,monospace);font-weight:500;font-size:12px;color:var(--text-muted);opacity:1}
.at-behavior-card__signal{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:3px 7px;border-radius:var(--radius-pill);margin-bottom:8px}
.at-behavior-card__signal--cart{background:#FCEAEA;color:var(--color-accent)}
.at-behavior-card__signal--viewed{background:#EAF0FA;color:var(--navy-700)}
.at-behavior-card__signal--category{background:var(--neutral-100);color:var(--text-muted)}
.at-behavior-cart-card__add{width:100%;margin-top:12px;padding:8px 0;border-radius:var(--radius-md);border:1.5px solid var(--navy-700);background:#fff;color:var(--navy-700);font-family:var(--font-display);font-weight:700;font-size:12.5px;cursor:pointer}
.at-behavior-cart-card__add:hover{background:var(--navy-700);color:#fff}
@media (max-width:900px){.at-behavior-row__grid,.at-behavior-cart-widget__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.at-behavior-row__grid,.at-behavior-cart-widget__grid{grid-template-columns:1fr}}

/* ───────────────────────── Cart & checkout ───────────────────────── */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { max-width: 1180px; margin: 0 auto; padding: 32px; }
.woocommerce table.shop_table { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); background: var(--surface-page); }
.woocommerce table.shop_table td { color: var(--text-body); }
.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--text-strong); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--navy-700); color: #fff; font-family: var(--font-display); font-weight: 700;
  border-radius: var(--radius-md); border: 0; padding: 11px 20px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--navy-800); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .checkout-button {
  background: var(--color-accent) !important; color: #fff !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--color-accent-hover) !important; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--navy-700); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--navy-700); }

/* ── WooCommerce Block Cart page (.wc-block-cart) ──
   Two-column layout matching the store mockup: a line-items card beside a sticky
   order-summary sidebar. Scoped to the cart wrapper so the mini-cart
   (.wc-block-mini-cart) is unaffected. The block nests two elements that both
   carry .wc-block-cart, so box goes on the outer wrapper and the grid on the
   inner sidebar-layout. */
.wp-block-woocommerce-cart { max-width: 1180px; margin: 0 auto; padding: 8px 32px 72px; }
.wp-block-woocommerce-cart .wc-block-cart {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start;
}
.wc-block-cart .wc-block-cart__main,
.wc-block-cart .wc-block-cart__sidebar { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
/* White cards on the column wrappers (these always exist on the block cart, so
   the card shows regardless of the inner element names WooCommerce uses). */
.wc-block-cart .wc-block-cart__main {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; padding: 0; align-self: start;
}
.wc-block-cart .wc-block-cart__sidebar {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 24px; position: sticky; top: 120px; align-self: start;
}

/* Line-items (table sits inside the __main card — transparent, no own border) */
.wc-block-cart__main .wc-block-cart-items {
  width: 100%; border-collapse: collapse; margin: 0; background: none; border: 0;
}
.wc-block-cart__main .wc-block-cart-items__header th {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); background: none;
}
.wc-block-cart__main .wc-block-cart-items__header-total { text-align: right; }
.wc-block-cart__main .wc-block-cart-items__row td {
  padding: 24px; vertical-align: top; border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; background: none;
}
.wc-block-cart__main .wc-block-cart-items__row:last-child td { border-bottom: 0 !important; }
/* Image */
.wc-block-cart__main .wc-block-cart-item__image { width: 108px; padding-right: 0 !important; }
.wc-block-cart__main .wc-block-cart-item__image img {
  width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--neutral-100);
}
/* Product cell */
.wc-block-cart__main .wc-block-components-product-name {
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.35;
  color: var(--text-strong); text-decoration: none; display: inline-block; margin-bottom: 8px;
}
.wc-block-cart__main .wc-block-components-product-name:hover { color: var(--navy-700); }
.wc-block-cart__main .wc-block-cart-item__prices { font-family: var(--font-body); font-size: 14px; color: var(--text-body); margin-bottom: 12px; }
.wc-block-cart__main .wc-block-cart-item__prices .wc-block-components-product-price__regular {
  color: var(--text-muted); text-decoration: line-through; margin-left: 6px; font-size: 13px;
}
/* Quantity + remove */
.wc-block-cart__main .wc-block-cart-item__quantity { display: flex; align-items: center; gap: 18px; margin-top: 4px; padding: 0 !important; border: 0; }
.wc-block-cart__main .wc-block-cart-item__remove-link {
  font-family: var(--font-body); font-size: 13px; color: var(--text-muted) !important;
  background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer; text-decoration: none; width: auto !important;
}
.wc-block-cart__main .wc-block-cart-item__remove-link:hover { color: var(--color-accent) !important; text-decoration: underline; }
/* Line total */
.wc-block-cart__main .wc-block-cart-item__total { text-align: right; }
.wc-block-cart__main .wc-block-cart-item__total .wc-block-components-product-price__value {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-strong);
}
.wc-block-cart__main .wc-block-components-sale-badge {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--success-600, #1f8a5b) 12%, #fff);
  color: var(--success-600, #1f8a5b); font-family: var(--font-body); font-weight: 600; font-size: 11.5px; white-space: nowrap;
}

/* Order-summary sidebar (card is on .wc-block-cart__sidebar above; inner wrapper
   is transparent so we never double up borders/padding). */
.wc-block-cart__sidebar .wc-block-components-sidebar {
  position: static; background: none; border: 0; border-radius: 0; padding: 0;
}
.wc-block-cart__totals-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong); margin: 0 0 18px; }
.wc-block-cart__sidebar .wc-block-components-totals-item { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 14px; }
.wc-block-cart__sidebar .wc-block-components-totals-item__label { color: var(--text-muted); }
.wc-block-cart__sidebar .wc-block-components-totals-item__value { color: var(--text-strong); font-weight: 600; }
.wc-block-cart__sidebar .wc-block-components-totals-footer-item { border-top: 1px solid var(--border-subtle); margin-top: 8px; padding-top: 16px; }
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); }
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text-strong); }
/* Coupon → outline button beside the field */
.wc-block-cart__sidebar .wc-block-components-totals-coupon__content { display: flex; gap: 8px; margin-bottom: 16px; }
.wc-block-cart__sidebar .wc-block-components-totals-coupon__button,
.wc-block-cart__sidebar .wc-block-components-totals-coupon button {
  background: #fff !important; color: var(--navy-700) !important; border: 1px solid var(--navy-700) !important;
  border-radius: var(--radius-md) !important; font-family: var(--font-display); font-weight: 700; font-size: 14px; padding: 0 16px; height: 40px; cursor: pointer;
}
.wc-block-cart__sidebar .wc-block-components-totals-coupon__button:hover { background: var(--navy-50) !important; }
/* Checkout button — accent, full width */
.wc-block-cart__submit-container { margin-top: 18px; }
.wc-block-cart__submit-button,
a.wc-block-cart__submit-button {
  display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 52px;
  background: var(--color-accent) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--radius-md) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 16px !important;
  text-decoration: none; cursor: pointer;
}
.wc-block-cart__submit-button:hover { background: var(--color-accent-hover) !important; }

@media (max-width: 900px) {
  .wp-block-woocommerce-cart { padding: 8px 20px 56px; }
  .wp-block-woocommerce-cart .wc-block-cart { grid-template-columns: 1fr; gap: 28px; }
  .wc-block-cart .wc-block-cart__sidebar { position: static; }
}

/* Grey page background behind the cart (mockup look: grey field, white cards).
   The block theme wraps content in a white group that overrides the global grey,
   so we paint ONE edge-to-edge grey band behind just the cart section with a
   spread box-shadow (clip-path keeps it horizontal-only, so header/footer stay
   put). Applying it to a single element avoids the striped white gaps you get
   from bleeding several stacked blocks. The title/breadcrumb stay on the page's
   default background above the grey band. */
body.woocommerce-cart .wp-block-woocommerce-cart {
  position: relative;
  background: var(--surface-page);
  box-shadow: 0 0 0 100vmax var(--surface-page);
  clip-path: inset(0 -100vmax);
  padding-top: 36px;
}
/* Tighten the large default gap between the header/nav and the breadcrumb on the
   cart page (the block theme adds generous top spacing above the first block). */
body.woocommerce-cart .wp-block-breadcrumbs,
body.woocommerce-cart .wc-block-breadcrumbs,
body.woocommerce-cart .woocommerce-breadcrumb { margin-top: 20px !important; }
body.woocommerce-cart .wp-block-post-title { margin-top: 8px !important; margin-bottom: 20px !important; }

/* ───────────────────────── Mini-cart drawer ───────────────────────── */
.at-cart-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; }
.at-cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.at-cart-drawer__scrim { position: absolute; inset: 0; background: rgba(20,26,38,0.5); opacity: 0; transition: opacity .25s ease; }
.at-cart-drawer.is-open .at-cart-drawer__scrim { opacity: 1; }
.at-cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 90vw;
  background: #fff; box-shadow: var(--shadow-xl); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(0.16,1,0.3,1);
}
.at-cart-drawer.is-open .at-cart-drawer__panel { transform: translateX(0); }
.at-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border-subtle); }
.at-cart-drawer__head h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong); }
.at-cart-drawer__close { border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.at-cart-drawer__body { flex: 1; overflow-y: auto; padding: 22px; }
.at-cart-drawer__body .woocommerce-mini-cart__total { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; color: var(--text-strong); border-top: 1px solid var(--border-subtle); padding-top: 14px; margin-top: 8px; }
.at-cart-drawer__body .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.at-cart-drawer__body .woocommerce-mini-cart__buttons .button { width: 100%; text-align: center; }
.at-cart-drawer__body .woocommerce-mini-cart__buttons .checkout { background: var(--color-accent) !important; }
.at-cart-drawer__body ul.cart_list { list-style: none; margin: 0 0 8px; padding: 0; }
.at-cart-drawer__body ul.cart_list li {
  display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "img name" "img meta";
  column-gap: 12px; row-gap: 4px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--border-subtle); position: relative;
}
.at-cart-drawer__body ul.cart_list li img {
  grid-area: img; width: 56px !important; height: 56px; object-fit: cover; float: none !important; margin: 0 !important;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
}
/* Product name link */
.at-cart-drawer__body ul.cart_list li > a:not(.remove) {
  grid-area: name; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.3;
  color: var(--text-strong); text-decoration: none;
}
/* WooCommerce mini-cart qty/price line ("1 × $2,199.00") — the only price shown */
.at-cart-drawer__body ul.cart_list li .quantity {
  grid-area: meta; font-family: var(--font-body); font-size: 13px; color: var(--text-body);
}
/* Tame any inherited large price styling; mini-cart amounts stay small */
.at-cart-drawer__body .amount, .at-cart-drawer__body .woocommerce-Price-amount {
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--text-body) !important; display: inline !important; white-space: nowrap;
}
.at-cart-drawer__body ul.cart_list li del .amount { color: var(--text-muted) !important; font-weight: 500 !important; }
/* Hide any standalone product-price block the theme/blocks inject (the duplicate big price) */
.at-cart-drawer__body ul.cart_list li > .price,
.at-cart-drawer__body ul.cart_list li > .wc-block-components-product-price { display: none !important; }
/* Product short-description in mini cart is noise — hide it */
.at-cart-drawer__body ul.cart_list li p:not(.quantity) { display: none !important; }
.at-cart-drawer__body ul.cart_list li .remove,
.at-cart-drawer__body ul.cart_list li a.remove_from_cart_button {
  grid-area: meta; justify-self: end; position: static; font-size: 0; color: var(--text-muted) !important;
}
/* Mini-cart quantity stepper, if present */
.at-cart-drawer__body ul.cart_list li .quantity .qty { width: 48px; }
.at-cart-drawer__body .woocommerce-mini-cart__total .amount { font-size: 15px !important; font-weight: 700 !important; color: var(--text-strong) !important; }
/* Never allow horizontal overflow in the drawer */
.at-cart-drawer__body { overflow-x: hidden; }
.at-cart-drawer__panel, .at-cart-drawer__body * { max-width: 100%; }

/* ── WooCommerce block Mini-Cart drawer ──
   The site runs the Mini-Cart *block* in the header, which opens its own drawer
   (.wc-block-mini-cart__drawer, data-wp-interactive="woocommerce/mini-cart") —
   NOT our .at-cart-drawer. Its contents are a 3-column <table> (image / details /
   total), so the price renders twice + a total column, overflowing. Style it to
   the mockup: compact rows, one small price, no description, tidy stepper, clean
   footer. Scope: the contents block wrapper. */
.wp-block-woocommerce-mini-cart-contents { --at-mc-pad: 24px; }

/* Title */
.wc-block-mini-cart__title {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 22px !important;
  color: var(--text-strong) !important; margin: 0 !important; padding: 22px var(--at-mc-pad) 6px !important;
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  position: relative; z-index: 2; background: var(--surface-card, #fff);
  -webkit-mask-image: none !important; mask-image: none !important;
}
/* WooCommerce adds top/bottom scroll-shadow gradients on the items container (and
   sometimes the contents/drawer) to hint scrollability; they bleed up over the
   title. Remove them. */
.wc-block-mini-cart__items::before,
.wc-block-mini-cart__items::after,
.wp-block-woocommerce-mini-cart-contents::before,
.wp-block-woocommerce-mini-cart-contents::after,
.wc-block-components-drawer__content::before,
.wc-block-components-drawer__content::after {
  display: none !important; background: none !important; box-shadow: none !important; content: none !important;
}
.wc-block-mini-cart__items { box-shadow: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.wp-block-woocommerce-mini-cart-title-items-counter-block {
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--text-muted);
}

/* Items area — no horizontal scroll */
.wc-block-mini-cart__items { padding: 0 var(--at-mc-pad) !important; overflow-x: hidden !important; }
.wc-block-mini-cart__products-table { overflow: visible !important; }

/* Collapse the cart table into clean stacked rows (mini-cart only) */
.wc-block-mini-cart-items { display: block; width: 100% !important; border-collapse: collapse; }
.wc-block-mini-cart-items thead,
.wc-block-mini-cart-items .wc-block-cart-items__header { display: none !important; }
.wc-block-mini-cart-items tbody { display: block; }
.wc-block-mini-cart-items .wc-block-cart-items__row {
  display: grid !important; grid-template-columns: 56px 1fr; column-gap: 12px;
  padding: 16px 0 !important; margin: 0 !important; border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important; align-items: start; background: none !important;
}
.wc-block-mini-cart-items .wc-block-cart-item__image { display: block !important; width: 56px !important; padding: 0 !important; }
.wc-block-mini-cart-items .wc-block-cart-item__image img {
  width: 56px !important; height: 56px !important; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
}
.wc-block-mini-cart-items .wc-block-cart-item__product { display: block !important; padding: 0 !important; min-width: 0; }
.wc-block-mini-cart-items .wc-block-cart-item__wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Name (mini-cart) */
.wc-block-mini-cart-items .wc-block-components-product-name {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 14px !important;
  line-height: 1.3 !important; color: var(--text-strong) !important; text-decoration: none !important;
}
/* Per-item price (mini-cart) — small; keep discount struck-through */
.wc-block-mini-cart-items .wc-block-cart-item__prices,
.wc-block-mini-cart-items .wc-block-cart-item__prices .price,
.wc-block-mini-cart-items .wc-block-cart-item__prices .wc-block-components-product-price {
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--text-body) !important; margin: 0 !important; line-height: 1.4 !important;
}
.wc-block-mini-cart-items .wc-block-components-product-price__value { font-size: 13px !important; font-weight: 700 !important; color: var(--text-strong) !important; }
.wc-block-mini-cart-items .wc-block-components-product-price__regular {
  font-size: 12px !important; font-weight: 500 !important; color: var(--text-muted) !important; margin-right: 6px;
}
/* Hide only the short-description paragraph (both mini-cart and cart page) —
   leave variation/attribute data (.wc-block-components-product-details) visible. */
.wc-block-components-product-metadata__description { display: none !important; }
/* Hide the separate Total column IN THE MINI-CART only — for the mini-cart the
   per-item price under the name is enough, and dropping it kills the overflow +
   duplicate big price. The full Cart page keeps its Total column. */
.wc-block-mini-cart-items .wc-block-cart-item__total,
.wc-block-mini-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper { display: none !important; }
/* Belt-and-braces (mini-cart): hide any duplicate .price in the row, re-show only
   the visible price inside __prices. */
.wc-block-mini-cart-items .wc-block-cart-items__row .price.wc-block-components-product-price { display: none !important; }
.wc-block-mini-cart-items .wc-block-cart-item__prices > .price.wc-block-components-product-price:not([hidden]) { display: inline !important; }
/* Compact quantity stepper + remove. We override display/order ourselves so the
   stepper reads [− n +] regardless of WooCommerce's internal block CSS. Source
   order is input, minus, plus. */
.wc-block-cart-item__quantity { padding: 0 !important; margin-top: 6px !important; display: flex; align-items: center; gap: 12px; }
.wc-block-components-quantity-selector {
  display: flex !important; align-items: center; width: 112px !important; min-width: 0 !important; height: 36px; margin: 0 !important;
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-md); overflow: hidden; float: none !important; background: #fff;
}
.wc-block-components-quantity-selector__input {
  order: 2; flex: 1 1 auto; width: auto !important; min-width: 0 !important; text-align: center;
  border: 0 !important; background: transparent; box-shadow: none !important;
  font-family: var(--font-body); font-size: 14px; color: var(--text-strong); padding: 0 !important;
}
.wc-block-components-quantity-selector__button {
  flex: 0 0 34px; width: 34px !important; height: 100% !important; min-width: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important; color: var(--navy-700) !important;
  font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wc-block-components-quantity-selector__button--minus { order: 1; border-right: 1px solid var(--border-subtle) !important; }
.wc-block-components-quantity-selector__button--plus { order: 3; border-left: 1px solid var(--border-subtle) !important; }
.wc-block-components-quantity-selector__button:disabled { color: var(--text-subtle) !important; cursor: default; }
.wc-block-cart-item__remove-link { color: var(--text-muted) !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; cursor: pointer; }
.wc-block-cart-item__remove-link svg { width: 18px; height: 18px; }
.wc-block-cart-item__remove-link:hover { color: var(--color-accent) !important; }

/* Footer — subtotal + actions */
.wc-block-mini-cart__footer { padding: 16px var(--at-mc-pad) 24px !important; border-top: 1px solid var(--border-subtle); }
.wc-block-mini-cart__footer-subtotal {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; margin: 0 !important; padding: 0 !important;
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong);
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 20px !important; color: var(--text-strong) !important;
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
  flex-basis: 100%; font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
/* Actions → stacked full-width. Checkout is the prominent top action (accent),
   View my cart the outline below (DOM order is cart→checkout, so reverse). */
.wc-block-mini-cart__footer-actions { display: flex !important; flex-direction: column-reverse; gap: 10px; margin-top: 16px; }
.wc-block-mini-cart__footer-actions .wc-block-components-button {
  width: 100% !important; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md) !important; font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 15px !important;
  white-space: nowrap;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button__text { white-space: nowrap; }
.wc-block-mini-cart__footer-checkout {
  background: var(--color-accent) !important; color: #fff !important; border: 0 !important;
}
.wc-block-mini-cart__footer-checkout:hover { background: var(--color-accent-hover) !important; }
.wc-block-mini-cart__footer-cart {
  background: #fff !important; color: var(--navy-700) !important; border: 1px solid var(--navy-700) !important;
}
.wc-block-mini-cart__footer-cart:hover { background: var(--navy-50) !important; }
/* Empty state */
.wc-block-mini-cart__empty-cart-wrapper { text-align: center; color: var(--text-muted); padding: 40px var(--at-mc-pad); }
.wc-block-mini-cart__shopping-button { background: var(--navy-700) !important; color: #fff !important; border-radius: var(--radius-md) !important; }

/* Brand eyebrow above the product name (injected by woo.js from Store API data) */
.wp-block-woocommerce-cart .at-cart-brand,
.wc-block-mini-cart-items .at-cart-brand {
  display: block; font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-700);
}
.wp-block-woocommerce-cart .at-cart-brand { font-size: 11.5px; margin: 0 0 2px; }
.wc-block-mini-cart-items .at-cart-brand { font-size: 10.5px; margin: 0 0 1px; }

/* Injected order-summary rows: Subtotal / Savings / Estimated tax (woo.js) */
.at-cart-summary { display: flex; flex-direction: column; }
.at-cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.at-cart-summary__label { color: var(--text-muted); }
.at-cart-summary__value { font-family: var(--font-body); font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums; }
.at-cart-summary__row--save .at-cart-summary__label,
.at-cart-summary__row--save .at-cart-summary__value { color: var(--success-600); font-weight: 700; }

/* Cart page: align the breadcrumb and page title to the same left edge (they
   sit in different-width containers by default, so the crumb looks indented).
   !important + explicit inner reset beats alignwide's auto margins and any
   parent padding differences. */
body.woocommerce-cart .wp-block-woocommerce-breadcrumbs,
body.woocommerce-cart .woocommerce-breadcrumb,
body.woocommerce-cart .wc-block-breadcrumbs,
body.woocommerce-cart .wp-block-breadcrumbs,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-cart .entry-title {
  max-width: 1180px !important; width: 100% !important; margin-inline: auto !important;
  padding-inline: 32px !important; box-sizing: border-box !important;
}
body.woocommerce-cart .wc-block-breadcrumbs .woocommerce-breadcrumb,
body.woocommerce-cart .wp-block-breadcrumbs .woocommerce-breadcrumb { margin: 0 !important; padding: 0 !important; }


/* ═══════════════════════ Checkout page (block Checkout) ═══════════════════════
   .wp-block-woocommerce-checkout → two columns: the form steps (.wc-block-checkout__main)
   and a sticky order-summary card (.wc-block-checkout__sidebar). Mirrors the cart
   page: grey field, white cards, accent primary button, display-font headings.
   woo.js adds brand eyebrows to the summary line items (same enhancer). */
.wp-block-woocommerce-checkout { max-width: 1180px; margin: 0 auto; padding: 8px 32px 72px; }
/* Two-column split — ONLY on the container that holds __main + __sidebar. Do NOT
   include .wc-block-checkout__form here: on the live DOM that is the wrapper around
   all the step cards, and making it flex-wrap lays the cards out side-by-side. */
.wp-block-woocommerce-checkout .wc-block-checkout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px;
}
.wc-block-checkout__main { flex: 1 1 460px; min-width: 0; }
.wc-block-checkout__sidebar { flex: 1 1 340px; max-width: 400px; min-width: 0; position: sticky; top: 120px; align-self: start; }
/* Steps stack full-width inside the main column, each on its own row/card, so
   Contact information matches Billing address and Payment / Delivery / Notes are
   never side-by-side (also neutralizes any Column blocks placed in the editor). */
.wc-block-checkout__main .wc-block-checkout__form { display: block; }
.wc-block-checkout__main .wp-block-columns { display: block !important; }
.wc-block-checkout__main .wp-block-column { flex-basis: auto !important; width: 100% !important; margin: 0 !important; }
.wc-block-checkout__main .wc-block-components-checkout-step { width: 100% !important; box-sizing: border-box; }

/* Grey band behind the checkout, same single-element approach as the cart */
body.woocommerce-checkout .wp-block-woocommerce-checkout {
  position: relative; background: var(--surface-page);
  box-shadow: 0 0 0 100vmax var(--surface-page); clip-path: inset(0 -100vmax); padding-top: 36px;
}
body.woocommerce-checkout .wp-block-breadcrumbs,
body.woocommerce-checkout .wc-block-breadcrumbs,
body.woocommerce-checkout .woocommerce-breadcrumb,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout .entry-title {
  max-width: 1180px !important; width: 100% !important; margin-inline: auto !important;
  padding-inline: 32px !important; box-sizing: border-box !important;
}
body.woocommerce-checkout .wp-block-breadcrumbs,
body.woocommerce-checkout .wc-block-breadcrumbs,
body.woocommerce-checkout .woocommerce-breadcrumb { margin-top: 20px !important; }
body.woocommerce-checkout .wp-block-post-title { margin-top: 8px !important; margin-bottom: 20px !important; }

/* Form steps → white cards */
.wc-block-checkout__main .wc-block-components-checkout-step {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 24px 28px; margin: 0 0 20px;
}
.wc-block-components-checkout-step__title,
.wc-block-checkout__main .wc-block-components-title {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 18px !important;
  color: var(--text-strong) !important; letter-spacing: 0 !important;
}
.wc-block-components-checkout-step__heading-content { color: var(--navy-700); font-weight: 600; }
.wc-block-components-checkout-step__description { color: var(--text-muted); font-size: 13.5px; }
/* Numbered step badges → navy */
.wc-block-components-checkout-step__title::before,
.wc-block-components-checkout-step__title-content {
  color: var(--text-strong);
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input .components-text-control__input,
.wc-block-checkout__main input.components-text-control__input,
.wc-block-components-select .components-form-token-field__input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
  border-color: var(--navy-700) !important; box-shadow: var(--focus-ring, 0 0 0 3px rgba(37,72,145,0.18)) !important; outline: none !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-checkout-step .wc-block-components-text-input label { color: var(--text-muted); }

/* Sidebar order-summary → white card */
.wc-block-checkout__sidebar > .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .is-large {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 24px;
}
.wc-block-checkout__sidebar .wc-block-components-order-summary__title,
.wc-block-components-checkout-order-summary__title {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 20px !important;
  color: var(--text-strong) !important; margin: 0 0 16px !important;
}
/* Summary line items — compact, framed thumbnail, brand eyebrow (woo.js) */
.wc-block-components-order-summary-item {
  display: grid !important; grid-template-columns: 52px 1fr auto; column-gap: 12px; align-items: start;
  padding: 14px 0 !important; border-bottom: 1px solid var(--border-subtle);
}
.wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image {
  width: 52px !important; height: 52px !important; object-fit: contain; background: var(--surface-page);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-sizing: border-box;
}
.wc-block-components-order-summary-item__quantity {
  background: var(--navy-700) !important; color: #fff !important; border-color: var(--navy-700) !important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name,
.wc-block-components-order-summary-item__name {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 13.5px !important;
  line-height: 1.3 !important; color: var(--text-strong) !important;
}
/* ═══════════════════════ My Account ═══════════════════════
   Shell (pagehead + sidebar) comes from our template overrides
   (woocommerce/myaccount/my-account.php, navigation.php, dashboard.php).
   Everything else (orders, view-order, downloads, addresses, edit-account) is
   core's own markup, styled here against WooCommerce's standard classes so it
   stays upgrade-safe. */

/* My Account renders through the classic shortcode inside the theme's normal
   (narrower) content column — it can't use the block-editor "alignfull" escape
   the rest of the site relies on for .at-pagehead, so break out manually here. */
.woocommerce-account .at-pagehead {
  position: relative; left: 50%; right: 50%;
  width: 100vw; margin-left: -50vw; margin-right: -50vw;
}
.at-acct-bleed {
  position: relative; left: 50%; right: 50%;
  width: 100vw; margin-left: -50vw !important; margin-right: -50vw !important;
}
.acct-shell {
  max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px;
  display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start;
}
@media (max-width: 800px) { .acct-shell { grid-template-columns: 1fr; } }
/* WooCommerce core ships float-based width defaults for these two classes
   (nav 30% / content 68%) — they can win over our grid depending on load
   order/specificity. Neutralize them; the grid above controls layout instead. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto !important; float: none !important;
}
/* Neutralize WooCommerce core's default li padding + ul bottom margin — the
   at-acct-nav rules below own spacing instead. */
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin-bottom: 0 !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li { padding: 0 !important; }

/* Sidebar nav */
.woocommerce-MyAccount-navigation {
  position: sticky; top: 24px; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-subtle); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; text-decoration: none;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--text-body);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--surface-sunken); color: var(--navy-700); }
.woocommerce-MyAccount-navigation svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--navy-50, #eef1f6); color: var(--navy-700); box-shadow: inset 3px 0 0 var(--navy-700);
}
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-accent); }

/* Content card */
.woocommerce-MyAccount-content.acct-card {
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 32px;
}
.woocommerce-MyAccount-content.acct-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 0 0 8px; color: var(--text-strong); }
.woocommerce-MyAccount-content.acct-card > p.lead { color: var(--text-muted); font-size: 15px; margin: 0 0 24px; }
.woocommerce-MyAccount-content.acct-card a { color: var(--navy-700); }

/* Dashboard (markup from woocommerce/myaccount/dashboard.php override) */
.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.acct-stat { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 20px; }
.acct-stat .n { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--navy-700); }
.acct-stat .l { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 560px) { .acct-stats { grid-template-columns: 1fr; } }
.acct-quicklinks { display: flex; flex-wrap: wrap; gap: 12px; }
.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px;
  border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
}
.acct-btn--primary { background: var(--navy-700); color: #fff !important; }
.acct-btn--outline { background: #fff; color: var(--navy-700) !important; border: 1px solid var(--navy-700); }
.acct-btn--accent { background: var(--color-accent); color: #fff !important; }

/* Order status badges — shared by our dashboard "last order" line AND core's
   orders table / view-order (mark.order-status). Status slugs match
   wc_get_order_statuses(): pending, processing, on-hold, completed, cancelled,
   refunded, failed. */
.acct-badge, mark.order-status {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 5px 12px; border-radius: 999px; background: var(--steel-100); color: var(--steel-600,#496885);
}
mark.order-status span { color: inherit; }
.acct-badge--completed, mark.order-status.status-completed { background: var(--success-100); color: var(--success-600); }
.acct-badge--processing, mark.order-status.status-processing { background: var(--steel-100); color: var(--steel-600,#496885); }
.acct-badge--on-hold, mark.order-status.status-on-hold { background: var(--warning-100); color: var(--warning-600); }
.acct-badge--pending, mark.order-status.status-pending { background: var(--neutral-100); color: var(--text-muted); }
.acct-badge--cancelled, mark.order-status.status-cancelled,
.acct-badge--refunded, mark.order-status.status-refunded,
.acct-badge--failed, mark.order-status.status-failed { background: #fce6e7; color: var(--danger-600,#ba1c23); }

/* Orders table (core: woocommerce/myaccount/orders.php) */
table.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
table.woocommerce-orders-table thead th {
  text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 0 12px !important; border-bottom: 1px solid var(--border-subtle);
}
table.woocommerce-orders-table tbody td {
  padding: 16px 0 !important; border-bottom: 1px solid var(--border-subtle); font-size: 14.5px; color: var(--text-body); vertical-align: middle;
}
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { font-weight: 700; color: var(--navy-700); text-decoration: none; }
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { text-align: right; }
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
  margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px;
  border-radius: var(--radius-md) !important; font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.view {
  background: #fff !important; color: var(--navy-700) !important; border: 1px solid var(--navy-700) !important;
}
table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button.order-again {
  background: var(--navy-700) !important; color: #fff !important; border: 0 !important;
}
.woocommerce-MyAccount-content .woocommerce-notice,
.woocommerce-MyAccount-content .woocommerce-message { margin: 0; }
.woocommerce-MyAccount-content > p:only-child { color: var(--text-muted); text-align: center; padding: 20px 0; }

/* Order details / view-order (core: woocommerce/myaccount/view-order.php) */
.woocommerce-order-details table.shop_table,
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; margin: 16px 0 20px; }
.woocommerce-order-details table.shop_table thead th {
  text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 0 10px !important; border-bottom: 1px solid var(--border-subtle);
}
.woocommerce-order-details table.shop_table td { padding: 14px 0 !important; border-bottom: 1px solid var(--border-subtle); font-size: 14.5px; }
.woocommerce-order-details table.shop_table tfoot th,
.woocommerce-order-details table.shop_table tfoot td { border: 0 !important; padding: 6px 0 !important; text-align: right; }
.woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce-order-details table.shop_table tfoot tr:last-child td {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-strong);
  padding-top: 10px !important; border-top: 1px solid var(--border-subtle) !important;
}
.woocommerce-customer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
@media (max-width: 560px) { .woocommerce-customer-details { grid-template-columns: 1fr; } }
.woocommerce-customer-details address,
.woocommerce-column--billing-address, .woocommerce-column--shipping-address {
  background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 18px 20px;
  font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--text-body);
}
.woocommerce-column__title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 8px;
}

/* Downloads (core: woocommerce/myaccount/downloads.php) */
table.woocommerce-MyAccount-downloads { width: 100%; border-collapse: collapse; }
table.woocommerce-MyAccount-downloads th {
  text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); padding: 0 0 12px !important; border-bottom: 1px solid var(--border-subtle);
}
table.woocommerce-MyAccount-downloads td { padding: 16px 0 !important; border-bottom: 1px solid var(--border-subtle); font-size: 14.5px; }
table.woocommerce-MyAccount-downloads .download-file a {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px;
  background: var(--navy-700); color: #fff !important; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 700; font-size: 13px; text-decoration: none;
}

/* Addresses (core: woocommerce/myaccount/addresses.php + my-address.php).
   WooCommerce core ships this as a float layout (u-columns/col2-set, with each
   .woocommerce-Address floated at width:48%) — neutralize it with !important so
   our grid fully replaces it instead of fighting it. */
.woocommerce-Addresses.addresses {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px;
}
/* The parent's old col2-set clearfix (::before/::after { display:table }) is
   only needed for the float layout we just removed — now that the parent is a
   grid, those pseudo-elements become actual grid items themselves (each
   claiming a cell), which is what pushed the two address boxes into a
   diagonal offset. Drop them entirely. */
.woocommerce-Addresses.addresses::before,
.woocommerce-Addresses.addresses::after { content: none !important; display: none !important; }
@media (max-width: 560px) { .woocommerce-Addresses.addresses { grid-template-columns: 1fr; } }
.woocommerce-Address {
  float: none !important; width: auto !important; margin: 0 !important; clear: none !important;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 20px;
}
.woocommerce-Address-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px;
  flex-wrap: nowrap; /* keep title + Edit button on one row always — wrapping is
                        what caused Billing/Shipping to misalign (button would
                        drop to its own line only once text tipped over) */
}
.woocommerce-Address-title h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-strong); margin: 0;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.woocommerce-Address-title a {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px;
  background: #fff; color: var(--navy-700) !important; border: 1px solid var(--navy-700); border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; text-decoration: none;
}
.woocommerce-Address address { font-style: normal; font-size: 14.5px; line-height: 1.65; color: var(--text-body); }

/* Edit account details form (core: woocommerce/myaccount/form-edit-account.php) */
.woocommerce-EditAccountForm .woocommerce-form-row,
.woocommerce-form-edit-address .woocommerce-form-row { margin-bottom: 16px; }
.woocommerce-EditAccountForm p.form-row-first,
.woocommerce-EditAccountForm p.form-row-last,
.woocommerce-form-edit-address p.form-row-first,
.woocommerce-form-edit-address p.form-row-last { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.woocommerce-EditAccountForm p.form-row-first,
.woocommerce-form-edit-address p.form-row-first { margin-right: 16px; }
@media (max-width: 560px) {
  .woocommerce-EditAccountForm p.form-row-first, .woocommerce-EditAccountForm p.form-row-last,
  .woocommerce-form-edit-address p.form-row-first, .woocommerce-form-edit-address p.form-row-last { width: 100%; margin-right: 0; }
}
.woocommerce-EditAccountForm fieldset { border: 0; padding: 0; margin: 28px 0 0; }
.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-strong); padding: 0; margin-bottom: 12px;
}
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-form-edit-address button[type="submit"],
.woocommerce-address-fields button[type="submit"] {
  height: 44px; padding: 0 24px; background: var(--color-accent) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--radius-md) !important; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 8px;
}

.wc-block-components-order-summary-item .at-cart-brand {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-700); margin: 0 0 1px;
}
.wc-block-components-order-summary-item__total-price { font-family: var(--font-body) !important; font-weight: 700 !important; color: var(--text-strong) !important; }

/* Totals rows */
.wc-block-checkout__sidebar .wc-block-components-totals-item { font-size: 14px; color: var(--text-body); }
.wc-block-checkout__sidebar .wc-block-components-totals-item__label { color: var(--text-muted); }
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--text-strong); font-family: var(--font-display); font-weight: 700; }
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-size: 24px !important; color: var(--text-strong) !important;
}

/* Place Order button — accent, full width */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button {
  background: var(--color-accent) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--radius-md) !important; min-height: 54px; width: 100%;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 16px !important;
}
.wc-block-components-checkout-place-order-button:hover { background: var(--color-accent-hover) !important; }
.wc-block-checkout__actions::after {
  content: "\1F512  Secure checkout \00B7 Free local delivery \00B7 Expert setup";
  display: block; margin-top: 12px; text-align: center;
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.4; color: var(--text-muted);
}

@media (max-width: 900px) {
  .wp-block-woocommerce-checkout { padding: 8px 20px 56px; }
  .wc-block-checkout__form,
  .wp-block-woocommerce-checkout .wc-block-checkout { flex-direction: column; gap: 20px; }
  .wc-block-checkout__sidebar { position: static; max-width: none; width: 100%; }
}


.at-cart-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #fff; color: var(--navy-700); cursor: pointer; }
.at-cart-toggle__count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 11px; }

/* ── Header icon row (Search / Account / Mini-Cart blocks) ──
   If the header uses WooCommerce's native Mini-Cart block (icon variant)
   instead of/alongside our [at_cart_button] shortcode, its quantity badge
   ships unstyled (a plain dark square) — brand it as the same red pip used
   everywhere else. Also tighten the icon row's spacing. */
.wc-block-mini-cart__button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px !important; height: 42px !important; padding: 0 !important;
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important;
  background: #fff !important; color: var(--text-strong) !important;
}
.wc-block-mini-cart__button:hover { border-color: var(--navy-700) !important; }
/* The SVG element itself carries class wc-block-mini-cart__icon (no wrapper) and
   sets fill="currentColor" as a presentation attribute — so it inherits fill from
   the CSS `color` of this exact element. Setting fill directly also covers any
   child path/circle that doesn't inherit as expected. */
svg.wc-block-mini-cart__icon {
  color: var(--text-strong) !important; fill: var(--text-strong) !important; stroke: none !important;
}
svg.wc-block-mini-cart__icon path,
svg.wc-block-mini-cart__icon circle { fill: var(--text-strong) !important; }
.wc-block-mini-cart__badge {
  position: absolute !important; top: -7px !important; right: -7px !important;
  min-width: 20px !important; height: 20px !important; padding: 0 5px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--color-accent) !important; color: #fff !important; border-radius: 999px !important;
  font-family: var(--font-display); font-weight: 700; font-size: 11px !important; line-height: 1 !important;
  border: 0 !important; transform: none !important;
}
/* Respect WooCommerce's own [hidden] attribute (set when the cart is empty) —
   without this, the !important display above forces the pip to show even when
   the cart has zero items. */
.wc-block-mini-cart__badge[hidden] { display: none !important; }
/* Tighten spacing between the icon-only Search / Account / Cart group. Covers
   the common core block combo; if icons still look far apart, the icons may
   sit in a custom group whose blockGap needs adjusting directly in the editor. */
.wp-block-search.wp-block-search__button-only,
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-mini-cart,
.wc-block-mini-cart { margin: 0 !important; }
/* Force the gap down on whichever group wraps these icon blocks, regardless of
   its class name — :has() finds it by its children instead of guessing a
   specific selector. Also pull adjacent icons closer via negative margin as a
   fallback for any browser/markup :has() doesn't catch. */
.wp-block-group:has(> .wp-block-search__button-only),
.wp-block-group:has(> .wp-block-woocommerce-customer-account),
.wp-block-group:has(> .wp-block-woocommerce-mini-cart) {
  gap: 10px !important;
  /* This group is laid out with is-content-justification-space-between, which
     spreads its children across the full row regardless of gap — override the
     justification itself so gap actually controls the spacing. */
  justify-content: flex-start !important;
}
/* Give Search + Account the same bordered-square treatment as the cart button
   (.wc-block-mini-cart__button), so all three read as one consistent icon
   group. This styles the BUTTON only — when the Search block expands (its
   input field toggles in beside/before the button on click), the input is a
   separate sibling element, so it isn't constrained by this fixed box; it just
   now expands next to a squared icon button instead of a bare one. */
.wp-block-search__button-only .wp-block-search__button,
.wp-block-woocommerce-customer-account > a {
  width: 42px !important; height: 42px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important;
  background: #fff !important; color: var(--text-strong) !important;
}
/* Neutralize the Search block's own wrapper box (border/padding/height it may
   carry by default) so ONLY the inner button (styled above) provides the
   visible box — giving the wrapper its own fixed height as well as the button
   was what caused it to render taller than Account/Cart. */
.wp-block-search.wp-block-search__button-only {
  display: inline-flex !important; align-items: center; height: auto !important;
  border: 0 !important; padding: 0 !important; background: none !important;
  margin-top: 4px !important; /* fine-tune: nudges it flush with Account/Cart */
}
.wp-block-search__button-only .wp-block-search__button:hover,
.wp-block-woocommerce-customer-account > a:hover { border-color: var(--navy-700) !important; }
.wp-block-search__button-only .wp-block-search__button svg,
.wp-block-woocommerce-customer-account > a svg { color: var(--text-strong) !important; fill: var(--text-strong) !important; }
.wp-block-search__button-only + .wp-block-woocommerce-customer-account,
.wp-block-woocommerce-customer-account + .wp-block-woocommerce-mini-cart,
.wp-block-search__button-only + .wp-block-woocommerce-mini-cart { margin-left: -8px !important; }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 900px) {
  .at-shop__body { grid-template-columns: 1fr; }
  .at-filters { position: static; }
  .woocommerce .at-shop__main ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .single-product .woocommerce > .product { grid-template-columns: 1fr; gap: 28px; }
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products,
  .related.products .wc-block-product-template,
  .related.products .wp-block-woocommerce-product-template,
  .wp-block-woocommerce-related-products .wc-block-product-template,
  .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 540px) {
  .woocommerce .at-shop__main ul.products { grid-template-columns: 1fr; }
  .woocommerce .related.products ul.products,
  .woocommerce .upsells.products ul.products,
  .related.products .wc-block-product-template,
  .related.products .wp-block-woocommerce-product-template,
  .wp-block-woocommerce-related-products .wc-block-product-template,
  .wp-block-woocommerce-related-products .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

.at-tdsynnex-checkout-notice__box { border-left: 4px solid var(--steel-600); background: var(--surface-sunken); padding: 16px 20px; margin-bottom: 24px; border-radius: var(--radius-md); }
.at-tdsynnex-checkout-notice__box ul { margin: 10px 0; padding-left: 20px; }