/* ==========================================================================
   MOTA — Storefront child theme
   --------------------------------------------------------------------------
   Written against the DOM WooCommerce 11.0.1 + Storefront actually emit on
   motabrand.shop, captured to prototype/harness/_reference/ on 2026-09-16 --
   not against documentation. That is what keeps the production step a copy
   rather than a second translation by eye.

   Every colour, size, face and duration resolves through a token declared in
   mota-tokens.css. No raw hex appears below; `npm run check:contrast` fails
   the build if one ever does.

   Section order follows the page, not the cascade:
     0  fonts
     1  reset + base
     2  chrome: store notice, header, nav, footer
     3  buttons, forms, focus
     4  product card + the price component
     5  shop archive
     6  single product
     7  cart + checkout
     8  content pages, notices, empty states
   ========================================================================== */

/* ------------------------------------------------------------------ 0 fonts
   Self-hosted, OFL, latin + weight axis only. See assets/fonts/LICENSE.md. */

@font-face {
  font-family: 'Archivo Variable';
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------- 1 reset + base */

body,
body.woocommerce,
body.woocommerce-page {
  background-color: var(--mota-bg);
  color: var(--mota-text);
  font-family: var(--mota-font-text);
  font-size: var(--mota-text-base);
  line-height: var(--mota-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Storefront's layout container. Everything on the site sits inside one. */
.col-full {
  max-width: var(--mota-container);
  margin-inline: auto;
  padding-inline: var(--mota-space-4);
  box-sizing: border-box;
}

/* Homepage full-bleed canvas: allow hero, marquee, manifesto, fit check, and
   drops containers to control their own width and hit full viewport. */
.home #content {
  padding-block: 0;
}

.home #content > .col-full {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.home #primary,
.home #main,
.home article.page,
.home .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.home .entry-header {
  display: none !important;
}

/* Wide container on desktop for high-impact drops showcase and catalog */
@media (min-width: 992px) {
  .mota-hero .col-full,
  .mota-category-bar .col-full,
  .mota-section--drops .col-full,
  .mota-section--favorites .col-full,
  .mota-manifesto .col-full,
  .mota-fitcheck .col-full,
  .post-type-archive-product #content .col-full,
  .tax-product_cat #content .col-full,
  .single-product #content .col-full {
    max-width: var(--mota-container-wide);
    padding-inline: var(--mota-space-6);
  }
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--mota-font-display);
  font-weight: var(--mota-weight-bold);
  line-height: var(--mota-leading-tight);
  letter-spacing: var(--mota-tracking-tight);
  color: var(--mota-text);
  margin-block: 0 var(--mota-space-4);
}

h1 { font-size: var(--mota-text-2xl); }
h2 { font-size: var(--mota-text-xl); }
h3 { font-size: var(--mota-text-lg); }
h4 { font-size: var(--mota-text-md); }

p { margin-block: 0 var(--mota-space-4); }

a {
  color: var(--mota-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--mota-duration) var(--mota-ease);
}

a:hover { color: var(--mota-accent-deep); }

/* Body copy inside content pages gets a readable measure. Product grids and
   chrome deliberately do not -- they are layout, not prose. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: var(--mota-measure);
}

/* The one typographic gesture the brand already owns: the wide tracking on
   OPEN YOUR MIND. Borrowed for eyebrows and section labels. */
.mota-eyebrow {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text-muted);
  display: block;
  margin-block-end: var(--mota-space-2);
}

/* ---------------------------------------------------------------- 2 chrome */

/* The promo bar. This is WooCommerce's DEMO STORE notice -- the feature meant
   for stores that are not real -- carrying a standing shipping promise. The
   redesign styles it honestly; replacing the mechanism is a settings change,
   recorded in brand-book.md §7. */
.woocommerce-store-notice,
p.woocommerce-store-notice.demo_store {
  background-color: var(--mota-bg-invert);
  color: var(--mota-text-invert);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: var(--mota-space-1) var(--mota-space-4);
  border-block-end: var(--mota-border-width) solid var(--mota-accent);
}

.woocommerce-store-notice__dismiss-link {
  color: var(--mota-text-muted-invert);
  margin-inline-start: var(--mota-space-3);
  font-size: var(--mota-text-2xs);
}

.woocommerce-store-notice__dismiss-link:hover { color: var(--mota-accent); }

/* Header: Sleek, compact single-row navigation bar */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--mota-z-header);
  background-color: color-mix(in srgb, var(--mota-bg-invert) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--mota-text-invert);
  border-block-end: var(--mota-border-width) solid var(--mota-n-900);
  padding: 0 !important;
  padding-block: var(--mota-space-2) !important;
  margin-bottom: 0 !important;
  transition: background-color var(--mota-duration) var(--mota-ease);
}

.home.page:not(.page-template-template-homepage) .site-header,
.home .site-header,
.site-header {
  margin-bottom: 0 !important;
}

/* Offset for WordPress admin bar if logged in */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header .col-full {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--mota-space-4) !important;
  flex-wrap: nowrap !important;
  min-height: 52px;
}

.site-branding,
.site-header .site-branding,
.woocommerce-active .site-header .site-branding {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.site-branding .custom-logo-link { display: block; line-height: 0; }

.site-branding img.custom-logo {
  height: auto;
  width: auto;
  max-height: 32px !important;
  max-width: 140px;
  display: block;
}

.site-header a,
.site-header .site-title a { color: var(--mota-text-invert); }
.site-header a:hover { color: var(--mota-accent); }

/* Primary nav */
.storefront-primary-navigation,
.site-header .storefront-primary-navigation,
.site-header .main-navigation,
.woocommerce-active .site-header .main-navigation {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto;
}

/* Desktop: show the primary menu, hide the toggle and its duplicate list. */
.main-navigation .menu-toggle { display: none; }
.main-navigation .handheld-navigation { display: none; }

.main-navigation ul.menu,
.main-navigation ul.nav-menu,
.site-header .main-navigation ul.menu {
  display: flex !important;
  align-items: center !important;
  gap: var(--mota-space-4) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

.main-navigation ul.menu li,
.main-navigation ul.menu > li,
.site-header .main-navigation ul.menu li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.main-navigation ul.menu li a,
.main-navigation ul.menu > li > a,
.site-header .main-navigation a {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs) !important;
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mota-text-invert);
  padding: var(--mota-space-2) var(--mota-space-1) !important;
  display: inline-block;
  border-block-end: var(--mota-border-width-thick) solid transparent;
  line-height: 1.3 !important;
  transition: border-color var(--mota-duration) var(--mota-ease),
              color var(--mota-duration) var(--mota-ease);
}

.main-navigation ul.menu li a:hover,
.main-navigation ul.menu li.current-menu-item > a {
  color: var(--mota-accent);
  border-block-end-color: var(--mota-accent);
}

/* Cart in the header */
.site-header-cart,
.site-header .site-header-cart,
.woocommerce-active .site-header .site-header-cart,
ul.site-header-cart.menu {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  flex: 0 0 auto;
}

ul.site-header-cart.menu a.cart-contents {
  display: inline-flex;
  align-items: center;
  gap: var(--mota-space-2);
  padding: var(--mota-space-1) var(--mota-space-3) !important;
  min-height: 36px !important;
  border: var(--mota-border-width) solid var(--mota-n-700);
  background-color: var(--mota-n-900);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs) !important;
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mota-text-invert);
  transition: border-color var(--mota-duration) var(--mota-ease),
              background-color var(--mota-duration) var(--mota-ease);
}

ul.site-header-cart.menu a.cart-contents:hover {
  border-color: var(--mota-accent);
  color: var(--mota-text-invert);
}

ul.site-header-cart .count {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
  font-size: var(--mota-text-2xs);
  padding: 1px var(--mota-space-2);
  font-weight: var(--mota-weight-bold);
  line-height: 1.2;
}

@media (max-width: 767px) {
  .site-header .col-full {
    flex-wrap: wrap !important;
    min-height: 46px;
    gap: var(--mota-space-2) var(--mota-space-3) !important;
    justify-content: space-between !important;
  }

  .main-navigation .primary-navigation { display: none !important; }

  .main-navigation .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    min-height: 34px !important;
    padding: var(--mota-space-1) var(--mota-space-3) !important;
    background-color: transparent;
    color: var(--mota-text-invert);
    border: var(--mota-border-width) solid var(--mota-n-700);
    font-family: var(--mota-font-display);
    font-size: var(--mota-text-2xs) !important;
    font-weight: var(--mota-weight-bold);
    letter-spacing: var(--mota-tracking-wide);
    text-transform: uppercase;
  }

  .main-navigation .menu-toggle:hover {
    background-color: transparent;
    color: var(--mota-accent);
    border-color: var(--mota-accent);
  }

  .main-navigation.toggled .handheld-navigation,
  .main-navigation .menu-toggle[aria-expanded='true'] ~ .handheld-navigation {
    display: block;
    width: 100%;
    margin-block-start: var(--mota-space-2);
    border-block-start: var(--mota-border-width) solid var(--mota-n-700);
    padding-block-start: var(--mota-space-2);
  }

  .main-navigation .handheld-navigation ul.menu {
    flex-direction: column;
    gap: 0;
  }

  .main-navigation .handheld-navigation ul.menu li a {
    display: block;
    width: 100%;
    padding-block: var(--mota-space-2);
    border-block-end: none;
  }

  .storefront-primary-navigation { flex: 1 0 100% !important; order: 3 !important; }

  .site-branding img.custom-logo { max-height: 26px !important; max-width: 110px; }
}

.site-search { flex: 0 0 auto; }

/* Breadcrumb */
.storefront-breadcrumb {
  background: transparent;
  padding-block: var(--mota-space-4) 0;
  margin: 0;
}

.storefront-breadcrumb .col-full { padding-block: 0; }

.woocommerce-breadcrumb {
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  font-family: var(--mota-font-display);
}

.woocommerce-breadcrumb a { color: var(--mota-text-muted); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--mota-text); }

/* Content */
.site-content { padding-block: var(--mota-space-6) var(--mota-space-9); }

/* Footer */
.site-footer {
  background-color: var(--mota-bg-invert);
  color: var(--mota-text-muted-invert);
  padding-block: var(--mota-space-8) var(--mota-space-6);
  font-size: var(--mota-text-sm);
}

.site-footer a { color: var(--mota-text-invert); text-decoration: none; }
.site-footer a:hover { color: var(--mota-accent); }

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
  color: var(--mota-text-invert);
  font-size: var(--mota-text-2xs);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  margin-block-end: var(--mota-space-4);
}

.site-info {
  border-block-start: var(--mota-border-width) solid var(--mota-n-700);
  margin-block-start: var(--mota-space-6);
  padding-block-start: var(--mota-space-5);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted-invert);
}

.mota-site-info__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--mota-space-3);
}

.mota-site-info__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mota-space-3);
}

.mota-site-info__links a {
  color: var(--mota-text-muted-invert);
  text-decoration: none;
  transition: color var(--mota-dur-fast) ease;
}

.mota-site-info__links a:hover {
  color: var(--mota-accent);
}

/* Social row. The Instagram account is the store's largest channel and the live
   markup links only Facebook -- the footer component is where that stops being a
   separate errand. */
.mota-social {
  display: flex;
  gap: var(--mota-space-4);
  list-style: none;
  margin: 0 0 var(--mota-space-5);
  padding: 0;
}

.mota-social a {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  padding-block-end: var(--mota-space-1);
  border-block-end: var(--mota-border-width) solid var(--mota-n-700);
}

.mota-social a:hover { border-block-end-color: var(--mota-accent); }

/* Storefront's mobile sticky bar */
.storefront-handheld-footer-bar {
  background-color: var(--mota-bg-invert);
  border-block-start: var(--mota-border-width) solid var(--mota-n-700);
}

.storefront-handheld-footer-bar ul li > a { color: var(--mota-text-invert); }

/* ------------------------------------------------- 3 buttons, forms, focus */

/* One visible focus treatment, everywhere, via :focus-visible so it appears for
   keyboard users without ringing every mouse click. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--mota-focus-width) solid var(--mota-focus);
  outline-offset: var(--mota-focus-offset);
}

.button,
button,
input[type='submit'],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mota-space-2);
  min-height: 44px; /* tap target */
  /* border-box or `width: 100%` on the archive button overflows its card by the
     padding plus both borders -- 52px at these tokens. Storefront's own reset does
     not cover the child theme's buttons, so it is set explicitly here. */
  box-sizing: border-box;
  padding: var(--mota-space-3) var(--mota-space-5);
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  border: var(--mota-border-width-thick) solid var(--mota-ink);
  border-radius: var(--mota-radius);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mota-duration) var(--mota-ease),
              color var(--mota-duration) var(--mota-ease),
              border-color var(--mota-duration) var(--mota-ease);
}

.button:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--mota-accent-deep);
  border-color: var(--mota-accent-deep);
  color: var(--mota-text-invert);
}

.button:active,
button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
ul.site-header-cart.menu a.cart-contents:active {
  transform: translateY(1px);
}

/* Secondary: outline. Used where a page has two actions and only one is primary. */
.button.alt-secondary,
.woocommerce .button.alt-secondary,
.woocommerce a.button.wc-backward {
  background-color: transparent;
  color: var(--mota-text);
  border-color: var(--mota-ink);
}

.button.alt-secondary:hover,
.woocommerce a.button.wc-backward:hover {
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
}

/* Ghost */
.button.alt-ghost {
  background-color: transparent;
  color: var(--mota-text);
  border-color: transparent;
  padding-inline: var(--mota-space-2);
}

.button.alt-ghost:hover {
  background-color: transparent;
  color: var(--mota-accent-deep);
  border-color: transparent;
  text-decoration: underline;
}

.button:disabled,
button:disabled,
.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  background-color: var(--mota-n-200);
  border-color: var(--mota-n-200);
  color: var(--mota-n-600);
  cursor: not-allowed;
  opacity: 1; /* Storefront dims instead; an explicit pair reads better */
}

.button:disabled:hover,
button:disabled:hover {
  background-color: var(--mota-n-200);
  border-color: var(--mota-n-200);
  color: var(--mota-n-600);
}

/* Fields */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='search'],
input[type='number'],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
  min-height: 44px;
  padding: var(--mota-space-2) var(--mota-space-3);
  background-color: var(--mota-bg-raised);
  color: var(--mota-text);
  border: var(--mota-border-width) solid var(--mota-border);
  border-radius: var(--mota-radius);
  font-family: var(--mota-font-text);
  font-size: var(--mota-text-base);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

input::placeholder,
textarea::placeholder { color: var(--mota-n-500); }

input:focus,
select:focus,
textarea:focus { border-color: var(--mota-text); }

label,
.woocommerce form .form-row label {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  color: var(--mota-text-muted);
  margin-block-end: var(--mota-space-2);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: var(--mota-accent-deep);
  border-width: var(--mota-border-width-thick);
}

/* Quantity stepper */
.quantity,
.woocommerce .quantity { display: inline-flex; }

.quantity input.qty,
.woocommerce .quantity input.qty {
  width: 5rem;
  min-height: 44px;
  text-align: center;
  border: var(--mota-border-width) solid var(--mota-border);
  border-radius: var(--mota-radius);
  font-family: var(--mota-font-text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------- 4 product card + the price component */

/* THE PRICE COMPONENT.
   21 of 28 products render a RANGE, because they are variable products with
   per-size pricing. It is the highest-frequency component on the site and
   Storefront's default wraps it badly in a tight card, so it is specified
   first and explicitly. */
.price,
span.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mota-space-1);
  color: var(--mota-price);
  font-family: var(--mota-font-text);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin: 0;
  line-height: var(--mota-leading-snug);
}

.woocommerce-Price-amount,
.woocommerce-Price-amount.amount { white-space: nowrap; }

.woocommerce-Price-currencySymbol {
  font-size: 0.85em;
  vertical-align: baseline;
  margin-inline-end: 1px;
}

/* The en-dash separating a range. Muted so the two numbers read as the pair,
   and non-wrapping so a range never breaks across lines mid-separator. */
.price > span[aria-hidden='true']:not(.woocommerce-Price-amount) {
  color: var(--mota-n-500);
  padding-inline: 2px;
}

/* Sale: the old price recedes, the new price takes the accent. */
.price del,
.woocommerce div.product p.price del {
  color: var(--mota-price-was);
  text-decoration-thickness: 1px;
  font-weight: var(--mota-weight-regular);
  opacity: 1;
}

.price ins,
.woocommerce div.product p.price ins {
  color: var(--mota-price-sale);
  text-decoration: none;
  font-weight: var(--mota-weight-bold);
}

/* PRODUCT CARD.
   Real markup from the live store:
     li.product > a.woocommerce-LoopProduct-link > img + h2.woocommerce-loop-product__title + span.price
     li.product > a.button.add_to_cart_button                                                            */
.woocommerce ul.products,
ul.products,
.site-main ul.products {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--mota-space-6) var(--mota-space-4);
  margin: 0 0 var(--mota-space-7) 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
}

/* Disable legacy Storefront clearfix pseudo-elements which become blank grid cells in CSS Grid & Flexbox */
.col-full::before,
.col-full::after,
.mota-hero__grid::before,
.mota-hero__grid::after,
.mota-manifesto__inner::before,
.mota-manifesto__inner::after,
.mota-category-bar__inner::before,
.mota-category-bar__inner::after,
.single-product div.product::before,
.single-product div.product::after,
.woocommerce div.product::before,
.woocommerce div.product::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.site-main ul.products::before,
.site-main ul.products::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
ul.products li.product,
.site-main ul.products li.product,
.site-main ul.products.columns-1 li.product,
.site-main ul.products.columns-2 li.product,
.site-main ul.products.columns-3 li.product,
.site-main ul.products.columns-4 li.product,
.site-main ul.products.columns-5 li.product,
.site-main ul.products.columns-6 li.product,
.storefront-full-width-content .site-main ul.products li.product,
.storefront-full-width-content .site-main ul.products.columns-1 li.product,
.storefront-full-width-content .site-main ul.products.columns-2 li.product,
.storefront-full-width-content .site-main ul.products.columns-3 li.product,
.storefront-full-width-content .site-main ul.products.columns-4 li.product,
.storefront-full-width-content .site-main ul.products.columns-5 li.product,
.storefront-full-width-content .site-main ul.products.columns-6 li.product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  clear: none !important;
  padding: var(--mota-space-3);
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-rule);
  box-sizing: border-box !important;
  transition: border-color var(--mota-duration) var(--mota-ease),
              box-shadow var(--mota-duration) var(--mota-ease),
              transform var(--mota-duration) var(--mota-ease);
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
  border-color: var(--mota-ink);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--mota-ink) 8%, transparent);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  gap: var(--mota-space-2);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
}

/* Product imagery */
.woocommerce ul.products li.product img,
ul.products li.product img,
.site-main ul.products li.product img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--mota-n-100);
  border: var(--mota-border-width) solid var(--mota-rule);
  margin: 0 0 var(--mota-space-3) 0 !important;
  display: block;
  transition: transform var(--mota-duration) var(--mota-ease);
}

li.product:hover img {
  transform: scale(1.04);
}

.woocommerce ul.products li.product.outofstock,
ul.products li.product.outofstock {
  opacity: 0.60;
  transition: opacity var(--mota-duration) var(--mota-ease);
}

.woocommerce ul.products li.product.outofstock:hover,
ul.products li.product.outofstock:hover {
  opacity: 0.85;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
h2.woocommerce-loop-product__title {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  line-height: var(--mota-leading-snug);
  letter-spacing: var(--mota-tracking-tight);
  color: var(--mota-text);
  margin: 0;
  padding: 0;
  min-height: calc(2 * var(--mota-text-sm) * 1.25);
}

.mota-card__garment {
  display: block;
  font-weight: var(--mota-weight-regular);
  font-size: var(--mota-text-xs);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  color: var(--mota-text-muted);
}

/* Price alignment */
.woocommerce ul.products li.product .price {
  margin-block-start: auto;
  padding-block: var(--mota-space-1);
}

/* Action button at bottom of card */
.woocommerce ul.products li.product a.button,
ul.products li.product a.add_to_cart_button {
  margin-block-start: var(--mota-space-3);
  width: 100%;
  background-color: var(--mota-n-100);
  color: var(--mota-text);
  border: var(--mota-border-width) solid var(--mota-rule);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  padding: var(--mota-space-2) var(--mota-space-3);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color var(--mota-duration) var(--mota-ease),
              color var(--mota-duration) var(--mota-ease),
              border-color var(--mota-duration) var(--mota-ease);
}

.woocommerce ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover,
li.product:hover a.button,
li.product:hover a.add_to_cart_button {
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  border-color: var(--mota-ink);
}

/* OUT OF STOCK on the archive. The hook is li.product.outofstock. Without this
   the card is visually identical to a purchasable one, which is how Storefront
   makes a dead SKU look like a live one. */
li.product.outofstock img { opacity: 0.55; filter: saturate(0.4); }

li.product.outofstock .woocommerce-loop-product__title { color: var(--mota-oos); }

li.product.outofstock .price { color: var(--mota-oos); }

/* Badges */
.mota-badge,
span.onsale,
.woocommerce span.onsale {
  position: absolute;
  inset-block-start: var(--mota-space-2);
  inset-inline-start: var(--mota-space-2);
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: var(--mota-space-1) var(--mota-space-2);
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  border-radius: var(--mota-radius);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}

.woocommerce span.onsale {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
}

.mota-badge--oos {
  background-color: var(--mota-bg-raised);
  color: var(--mota-oos);
  border: var(--mota-border-width) solid var(--mota-border);
}

/* ------------------------------------------------------------ 5 shop archive */

.woocommerce-products-header {
  margin-block-end: var(--mota-space-6);
  padding-block-end: var(--mota-space-5);
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
}

.woocommerce-products-header__title,
h1.woocommerce-products-header__title {
  font-size: var(--mota-text-2xl);
  margin: 0;
}

.storefront-sorting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mota-space-4);
  flex-wrap: wrap;
  margin-block-end: var(--mota-space-6);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
}

.woocommerce-result-count {
  margin: 0;
  font-family: var(--mota-font-display);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  font-size: var(--mota-text-2xs);
}

.woocommerce-ordering select { width: auto; min-width: 14rem; }

/* Grid reflow: 1 -> 2 -> 3 -> 4.
   Default catalog loops expand to 4 columns at >=1100px.
   Explicit 3-column loops (.columns-3, .mota-section--drops, .mota-section--favorites)
   remain locked to 3 columns on desktop for high-impact, large product imagery (~430px). */
@media (min-width: 480px) {
  .woocommerce ul.products,
  ul.products,
  .site-main ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 768px) {
  .woocommerce ul.products,
  ul.products,
  .site-main ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--mota-space-7) var(--mota-space-5) !important;
  }
}

@media (min-width: 1100px) {
  .woocommerce ul.products,
  ul.products,
  .site-main ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--mota-space-7) var(--mota-space-5) !important;
  }
}

@media (min-width: 992px) {
  .columns-3 ul.products,
  ul.products.columns-3,
  .woocommerce .columns-3 ul.products,
  .woocommerce ul.products.columns-3,
  .site-main .columns-3 ul.products,
  .site-main ul.products.columns-3,
  .storefront-full-width-content .site-main ul.products.columns-3,
  .mota-section--drops ul.products,
  .mota-section--favorites ul.products,
  .woocommerce .mota-section--drops ul.products,
  .woocommerce .mota-section--favorites ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--mota-space-8) var(--mota-space-6) !important;
  }
}

.woocommerce-pagination {
  margin-block-start: var(--mota-space-8);
  border-block-start: var(--mota-border-width) solid var(--mota-rule);
  padding-block-start: var(--mota-space-5);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: var(--mota-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers li { border: none; }

.woocommerce-pagination .page-numbers {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--mota-border-width) solid var(--mota-rule);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  text-decoration: none;
  background: transparent;
}

.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover {
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  border-color: var(--mota-ink);
}

/* ---------------------------------------------------------- 6 single product */

.single-product div.product,
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--mota-space-6) !important;
}

@media (min-width: 768px) {
  .single-product div.product,
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    gap: var(--mota-space-8) !important;
    align-items: start !important;
  }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .upsells { grid-column: 1 / -1 !important; }
}

.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.woocommerce div.product .summary.entry-summary {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__wrapper { margin: 0; }

/* Gallery fallback.
   Before WooCommerce's FlexSlider initialises -- or if its JS never runs -- the
   wrapper is a DIRECT child of the gallery and every image stacks at full size,
   which is several screens of scrolling for a 5-image product. This lays them out
   as one hero plus a thumbnail row instead.

   The direct-child combinator is what makes it safe: FlexSlider moves the wrapper
   inside div.flex-viewport when it initialises, so this selector stops matching and
   the slider owns the layout with no specificity fight. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mota-space-2);
}

.woocommerce-product-gallery
  > .woocommerce-product-gallery__wrapper
  > .woocommerce-product-gallery__image:first-child {
  grid-column: 1 / -1;
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-rule);
}

.woocommerce div.product .summary.entry-summary { margin: 0; }

.woocommerce div.product .product_title {
  font-size: var(--mota-text-2xl);
  margin-block-end: var(--mota-space-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: var(--mota-text-md);
  font-weight: var(--mota-weight-bold);
  margin-block-end: var(--mota-space-5);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--mota-text-muted);
  max-width: var(--mota-measure);
  margin-block-end: var(--mota-space-5);
}

/* Variation form */
.woocommerce div.product form.cart { margin-block: var(--mota-space-5); }

.woocommerce div.product form.cart table.variations {
  width: 100%;
  border: none;
  margin-block-end: var(--mota-space-4);
  border-collapse: collapse;
}

.woocommerce div.product form.cart table.variations tr {
  display: block;
  margin-block-end: var(--mota-space-4);
}

.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  display: block;
  padding: 0;
  border: none;
  text-align: start;
}

.woocommerce div.product form.cart table.variations td.label label {
  margin-block-end: var(--mota-space-2);
}

.woocommerce div.product form.cart table.variations select { width: 100%; }

.reset_variations {
  display: inline-block;
  margin-block-start: var(--mota-space-2);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
}

.woocommerce div.product form.cart .variations_button {
  display: flex;
  gap: var(--mota-space-3);
  align-items: stretch;
  flex-wrap: wrap;
  margin-block-start: var(--mota-space-4);
}

.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 14rem; }

.single_variation_wrap { margin-block-start: var(--mota-space-3); }

.woocommerce-variation-price { margin-block-end: var(--mota-space-3); }

/* Stock messaging. On the product page the OOS state is driven by JS per
   selected variation -- there is no body class -- so both states are styled
   here rather than relying on a page-level hook. */
.stock,
.woocommerce div.product .stock {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  margin-block: var(--mota-space-2);
  padding: var(--mota-space-2) var(--mota-space-3);
  display: inline-block;
  border: var(--mota-border-width) solid var(--mota-border);
}

.stock.in-stock,
.woocommerce div.product .stock.in-stock {
  color: var(--mota-accent-deep);
  border-color: var(--mota-accent-deep);
}

.stock.out-of-stock,
.woocommerce div.product .stock.out-of-stock {
  color: var(--mota-oos);
  background-color: var(--mota-n-100);
  border-color: var(--mota-border);
}

.product_meta {
  margin-block-start: var(--mota-space-5);
  padding-block-start: var(--mota-space-4);
  border-block-start: var(--mota-border-width) solid var(--mota-rule);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
}

.product_meta > span { display: block; margin-block-end: var(--mota-space-1); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
  margin-block-start: var(--mota-space-8);
  padding-block-start: var(--mota-space-5);
  border-block-start: var(--mota-border-width) solid var(--mota-rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--mota-space-5);
  list-style: none;
  margin: 0 0 var(--mota-space-5);
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  color: var(--mota-text-muted);
  padding: 0 0 var(--mota-space-2);
  border-block-end: var(--mota-border-width-thick) solid transparent;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--mota-text);
  border-block-end-color: var(--mota-ink);
}

/* Related */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: var(--mota-text-lg);
  margin-block-end: var(--mota-space-5);
  padding-block-start: var(--mota-space-6);
  border-block-start: var(--mota-border-width) solid var(--mota-rule);
}

/* ---------------------------------------------------------- 7 cart, checkout */

/* --- Layout & Container Architecture --- */

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
  margin-block-end: var(--mota-space-6);
  border-block-end: var(--mota-border-width-thick) solid var(--mota-ink);
  padding-block-end: var(--mota-space-4);
}

.woocommerce-cart .entry-header .entry-title,
.woocommerce-checkout .entry-header .entry-title {
  margin: 0;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xl);
  font-weight: var(--mota-weight-black);
  letter-spacing: var(--mota-tracking-tight);
  text-transform: uppercase;
}

/* Desktop 2-Column Split: Cart */
@media (min-width: 992px) {
  .woocommerce-cart .entry-content > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
    grid-template-areas:
      "notices notices"
      "cart collaterals";
    gap: var(--mota-space-8);
    align-items: start;
  }

  .woocommerce-cart .woocommerce-notices-wrapper {
    grid-area: notices;
  }

  .woocommerce-cart .woocommerce-cart-form {
    grid-area: cart;
    margin-block-end: 0;
  }

  .woocommerce-cart .cart-collaterals {
    grid-area: collaterals;
    width: 100% !important;
    position: sticky;
    top: calc(56px + var(--mota-space-4));
  }
}

/* Desktop 2-Column Split: Checkout */
@media (min-width: 992px) {
  .woocommerce-checkout .entry-content > .woocommerce {
    display: flex;
    flex-direction: column;
    gap: var(--mota-space-6);
  }

  .woocommerce-checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-areas:
      "details review";
    gap: var(--mota-space-8);
    align-items: start;
  }

  .woocommerce-checkout #customer_details {
    grid-area: details;
    width: 100%;
  }

  .woocommerce-checkout .woocommerce-checkout-review-order {
    grid-area: review;
    position: sticky;
    top: calc(56px + var(--mota-space-4));
  }

  /* Exclude hidden attribution inputs from grid tracks */
  .woocommerce-checkout wc-order-attribution-inputs {
    display: none !important;
  }
}

/* --- Cart Items Table --- */

.woocommerce table.shop_table.cart {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin-block-end: var(--mota-space-6);
}

.woocommerce table.shop_table.cart th {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text-muted);
  text-align: start;
  padding: var(--mota-space-3) var(--mota-space-2);
  border-block-end: var(--mota-border-width-thick) solid var(--mota-ink);
}

.woocommerce table.shop_table.cart td {
  padding: var(--mota-space-4) var(--mota-space-2);
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
  vertical-align: middle;
}

/* Product Remove Button */
.woocommerce table.shop_table.cart td.product-remove {
  width: 36px;
  text-align: center;
  padding-inline-start: 0;
}

.woocommerce table.shop_table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--mota-text-muted);
  border: var(--mota-border-width) solid var(--mota-rule);
  background-color: var(--mota-bg-raised);
  text-decoration: none;
  font-size: var(--mota-text-base);
  line-height: 1;
  font-weight: var(--mota-weight-bold);
  transition: all var(--mota-duration) var(--mota-ease);
}

.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  background-color: var(--mota-ink);
  color: var(--mota-accent);
  border-color: var(--mota-ink);
}

.woocommerce table.shop_table.cart td.product-remove a.remove:active {
  transform: translateY(1px);
}

/* Product Thumbnail */
.woocommerce table.shop_table.cart td.product-thumbnail {
  width: 80px;
  text-align: center;
}

.woocommerce table.shop_table.cart td.product-thumbnail img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border: var(--mota-border-width) solid var(--mota-rule);
  background-color: var(--mota-bg-raised);
  display: block;
  margin: 0 auto;
}

/* Product Name & Variant */
.woocommerce table.shop_table.cart .product-name a {
  font-family: var(--mota-font-display);
  font-weight: var(--mota-weight-bold);
  font-size: var(--mota-text-sm);
  line-height: var(--mota-leading-snug);
  text-decoration: none;
  color: var(--mota-text);
  display: block;
  transition: color var(--mota-duration) var(--mota-ease);
}

.woocommerce table.shop_table.cart .product-name a:hover {
  color: var(--mota-accent-deep);
}

.woocommerce table.shop_table.cart .variation,
.woocommerce table.shop_table.cart dl.variation {
  margin-block-start: var(--mota-space-1);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mota-space-1);
  margin-block-end: 0;
}

.woocommerce table.shop_table.cart dl.variation dt,
.woocommerce table.shop_table.cart dl.variation dd {
  float: none;
  display: inline;
  margin: 0;
  line-height: var(--mota-leading-normal);
}

.woocommerce table.shop_table.cart dl.variation dt {
  font-weight: var(--mota-weight-medium);
}

.woocommerce table.shop_table.cart dl.variation dd {
  margin-inline-end: var(--mota-space-2);
}

/* Product Price & Subtotal */
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.woocommerce table.shop_table.cart td.product-price {
  color: var(--mota-text-muted);
  font-weight: var(--mota-weight-medium);
}

.woocommerce table.shop_table.cart td.product-subtotal {
  color: var(--mota-text);
  font-weight: var(--mota-weight-bold);
}

/* Product Quantity Stepper */
.woocommerce table.shop_table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
}

.woocommerce table.shop_table.cart td.product-quantity input.qty {
  width: 58px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-family: var(--mota-font-display);
  font-weight: var(--mota-weight-bold);
  font-size: var(--mota-text-sm);
  border: var(--mota-border-width) solid var(--mota-border);
  background-color: var(--mota-bg-raised);
  color: var(--mota-text);
  border-radius: var(--mota-radius);
  -moz-appearance: textfield;
  box-sizing: border-box;
  transition: border-color var(--mota-duration) var(--mota-ease);
}

.woocommerce table.shop_table.cart td.product-quantity input.qty::-webkit-inner-spin-button,
.woocommerce table.shop_table.cart td.product-quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce table.shop_table.cart td.product-quantity input.qty:focus {
  border-color: var(--mota-accent-mid);
  outline: none;
  box-shadow: 0 0 0 1px var(--mota-accent-mid);
}

/* Actions Row: Coupon & Update Cart */
.woocommerce table.shop_table.cart td.actions {
  padding-block: var(--mota-space-5);
  border-block-end: none;
}

.woocommerce table.shop_table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: var(--mota-space-2);
  flex-wrap: wrap;
  float: none;
  margin: 0;
}

.woocommerce table.shop_table.cart td.actions .coupon input.input-text {
  height: 44px;
  padding: 0 var(--mota-space-3);
  border: var(--mota-border-width) solid var(--mota-border);
  background-color: var(--mota-bg-raised);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  flex: 1 1 160px;
  min-width: 140px;
  box-sizing: border-box;
}

.woocommerce table.shop_table.cart td.actions .coupon button.button,
.woocommerce table.shop_table.cart td.actions button.button[name="update_cart"] {
  height: 44px;
  padding: 0 var(--mota-space-4);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  transition: all var(--mota-duration) var(--mota-ease);
}

.woocommerce table.shop_table.cart td.actions .coupon button.button {
  background-color: transparent;
  border: var(--mota-border-width) solid var(--mota-ink);
  color: var(--mota-ink);
}

.woocommerce table.shop_table.cart td.actions .coupon button.button:hover {
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
}

.woocommerce table.shop_table.cart td.actions button.button[name="update_cart"] {
  background-color: transparent;
  border: var(--mota-border-width) solid var(--mota-border);
  color: var(--mota-text-muted);
  float: none;
}

.woocommerce table.shop_table.cart td.actions button.button[name="update_cart"]:hover:not(:disabled) {
  border-color: var(--mota-ink);
  color: var(--mota-text);
  background-color: var(--mota-n-100);
}

.woocommerce table.shop_table.cart td.actions button.button[name="update_cart"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Mobile Reflow for Cart Items (< 768px) */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive.cart thead {
    display: none;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "thumb name remove"
      "thumb qty price";
    gap: var(--mota-space-2) var(--mota-space-3);
    padding: var(--mota-space-4) 0;
    border-block-end: var(--mota-border-width) solid var(--mota-rule);
    align-items: center;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: start !important;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td::before {
    display: none !important;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-thumbnail {
    grid-area: thumb;
    width: 72px;
    height: 72px;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-thumbnail img {
    width: 72px;
    height: 72px;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-name {
    grid-area: name;
    padding-inline-end: var(--mota-space-2) !important;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-remove {
    grid-area: remove;
    justify-self: end;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-price {
    display: none !important;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-quantity {
    grid-area: qty;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr.cart_item td.product-subtotal {
    grid-area: price;
    justify-self: end;
    font-size: var(--mota-text-base);
  }

  .woocommerce table.shop_table_responsive.cart tbody tr td.actions {
    display: flex !important;
    flex-direction: column;
    gap: var(--mota-space-3);
    padding: var(--mota-space-4) 0;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr td.actions .coupon {
    width: 100%;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr td.actions .coupon input.input-text {
    width: 100%;
  }

  .woocommerce table.shop_table_responsive.cart tbody tr td.actions button.button[name="update_cart"] {
    width: 100%;
  }
}

/* --- Cart Totals Box --- */

.woocommerce .cart_totals {
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-rule);
  padding: var(--mota-space-6);
  border-radius: var(--mota-radius);
  box-sizing: border-box;
}

.woocommerce .cart_totals h2 {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text);
  margin: 0 0 var(--mota-space-4) 0;
  padding-block-end: var(--mota-space-3);
  border-block-end: var(--mota-border-width-thick) solid var(--mota-ink);
}

.woocommerce .cart_totals table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--mota-space-5);
  border: none;
}

.woocommerce .cart_totals table.shop_table tr {
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
}

.woocommerce .cart_totals table.shop_table th {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  color: var(--mota-text-muted);
  padding: var(--mota-space-3) 0;
  text-align: start;
  vertical-align: top;
  width: 40%;
  font-weight: var(--mota-weight-medium);
  border: none;
}

.woocommerce .cart_totals table.shop_table td {
  padding: var(--mota-space-3) 0;
  text-align: end;
  vertical-align: top;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-variant-numeric: tabular-nums;
  border: none;
}

.woocommerce .cart_totals table.shop_table tr.order-total {
  border-block-start: var(--mota-border-width-thick) solid var(--mota-ink);
  border-block-end: none;
}

.woocommerce .cart_totals table.shop_table tr.order-total th {
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  color: var(--mota-text);
  padding-block-start: var(--mota-space-4);
}

.woocommerce .cart_totals table.shop_table tr.order-total td {
  font-size: var(--mota-text-lg);
  font-weight: var(--mota-weight-black);
  color: var(--mota-ink);
  padding-block-start: var(--mota-space-4);
}

/* Shipping Calculator inside Cart Totals */
.woocommerce .cart_totals .woocommerce-shipping-calculator {
  margin-block-start: var(--mota-space-2);
}

.woocommerce .cart_totals a.shipping-calculator-button {
  font-family: var(--mota-font-text);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  transition: color var(--mota-duration) var(--mota-ease);
}

.woocommerce .cart_totals a.shipping-calculator-button:hover {
  color: var(--mota-accent-deep);
}

.woocommerce .cart_totals .shipping-calculator-form {
  margin-block-start: var(--mota-space-4);
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--mota-space-2);
}

.woocommerce .cart_totals .shipping-calculator-form p.form-row {
  margin: 0;
  padding: 0;
  width: 100% !important;
  float: none !important;
}

.woocommerce .cart_totals .shipping-calculator-form label {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  font-weight: var(--mota-weight-bold);
  color: var(--mota-text-muted);
  margin-block-end: var(--mota-space-1);
  display: block;
}

.woocommerce .cart_totals .shipping-calculator-form input.input-text,
.woocommerce .cart_totals .shipping-calculator-form select {
  width: 100%;
  height: 40px;
  padding: 0 var(--mota-space-3);
  border: var(--mota-border-width) solid var(--mota-border);
  background-color: var(--mota-bg);
  font-family: var(--mota-font-text);
  font-size: var(--mota-text-xs);
  box-sizing: border-box;
  color: var(--mota-text);
  border-radius: var(--mota-radius);
}

.woocommerce .cart_totals .shipping-calculator-form button[name="calc_shipping"] {
  width: 100%;
  height: 42px;
  margin-block-start: var(--mota-space-2);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  background-color: var(--mota-n-900);
  color: var(--mota-text-invert);
  border: none;
  cursor: pointer;
  transition: background-color var(--mota-duration) var(--mota-ease);
}

.woocommerce .cart_totals .shipping-calculator-form button[name="calc_shipping"]:hover {
  background-color: var(--mota-ink);
}

/* Proceed to Checkout CTA */
.woocommerce .cart_totals .wc-proceed-to-checkout {
  padding: 0;
}

.woocommerce .cart_totals a.checkout-button.button.alt.wc-forward {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  text-decoration: none;
  border: var(--mota-border-width) solid var(--mota-ink);
  box-sizing: border-box;
  cursor: pointer;
  border-radius: var(--mota-radius);
  transition: all var(--mota-duration) var(--mota-ease);
}

.woocommerce .cart_totals a.checkout-button.button.alt.wc-forward:hover {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
  border-color: var(--mota-accent);
}

.woocommerce .cart_totals a.checkout-button.button.alt.wc-forward:active {
  transform: translateY(1px);
}

/* --- Checkout Form & Components --- */

/* Coupon Toggle Banner */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-rule);
  border-inline-start: var(--mota-border-width-thick) solid var(--mota-ink);
  color: var(--mota-text);
  padding: var(--mota-space-3) var(--mota-space-4);
  font-size: var(--mota-text-xs);
  margin-block-end: var(--mota-space-6);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: var(--mota-text);
  font-weight: var(--mota-weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-checkout form.checkout_coupon {
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-rule);
  padding: var(--mota-space-5);
  margin-block-end: var(--mota-space-6);
  display: flex;
  gap: var(--mota-space-2);
  flex-wrap: wrap;
  align-items: center;
}

.woocommerce-checkout form.checkout_coupon input.input-text {
  height: 44px;
  flex: 1 1 200px;
  padding: 0 var(--mota-space-3);
  border: var(--mota-border-width) solid var(--mota-border);
  background-color: var(--mota-bg);
  color: var(--mota-text);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
}

.woocommerce-checkout form.checkout_coupon button.button {
  height: 44px;
  padding: 0 var(--mota-space-4);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  border: none;
  cursor: pointer;
  transition: all var(--mota-duration) var(--mota-ease);
}

.woocommerce-checkout form.checkout_coupon button.button:hover {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
}

/* Customer Details (Billing & Shipping) */
.woocommerce-checkout #customer_details .col2-set {
  width: 100% !important;
  float: none !important;
  margin: 0;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  margin: 0 0 var(--mota-space-6) 0;
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text);
  margin: 0 0 var(--mota-space-4) 0;
  padding-block-end: var(--mota-space-2);
  border-block-end: var(--mota-border-width-thick) solid var(--mota-ink);
}

/* Form Fields Grid */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mota-space-3) var(--mota-space-4);
}

.woocommerce-checkout p.form-row {
  margin: 0;
  padding: 0;
  float: none !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
}

.woocommerce-checkout p.form-row.form-row-first {
  grid-column: 1;
}

.woocommerce-checkout p.form-row.form-row-last {
  grid-column: 2;
}

.woocommerce-checkout p.form-row.form-row-wide,
.woocommerce-checkout p.form-row.notes {
  grid-column: 1 / -1;
}

.woocommerce-checkout p.form-row label {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  color: var(--mota-text-muted);
  margin-block-end: var(--mota-space-1);
  display: block;
}

.woocommerce-checkout p.form-row label .required {
  color: var(--mota-accent-deep);
  font-weight: var(--mota-weight-bold);
  text-decoration: none;
  border: none;
}

.woocommerce-checkout p.form-row input.input-text,
.woocommerce-checkout p.form-row select,
.woocommerce-checkout p.form-row textarea {
  height: 44px;
  padding: 0 var(--mota-space-3);
  border: var(--mota-border-width) solid var(--mota-border);
  background-color: var(--mota-bg-raised);
  color: var(--mota-text);
  font-family: var(--mota-font-text);
  font-size: var(--mota-text-sm);
  border-radius: var(--mota-radius);
  box-sizing: border-box;
  width: 100%;
  transition: border-color var(--mota-duration) var(--mota-ease);
}

.woocommerce-checkout p.form-row textarea {
  height: 100px;
  padding: var(--mota-space-2) var(--mota-space-3);
  resize: vertical;
}

.woocommerce-checkout p.form-row input.input-text:focus,
.woocommerce-checkout p.form-row select:focus,
.woocommerce-checkout p.form-row textarea:focus {
  border-color: var(--mota-accent-mid);
  outline: none;
  box-shadow: 0 0 0 1px var(--mota-accent-mid);
}

/* Ship to Different Address Toggle */
.woocommerce-checkout #ship-to-different-address {
  margin-block: var(--mota-space-4) var(--mota-space-3);
  padding: 0;
  border: none;
}

.woocommerce-checkout #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: var(--mota-space-2);
  cursor: pointer;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-text);
}

.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mota-ink);
  cursor: pointer;
}

/* --- Checkout Order Review Box --- */

.woocommerce-checkout .woocommerce-checkout-review-order {
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-rule);
  padding: var(--mota-space-6);
  border-radius: var(--mota-radius);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--mota-ink) 4%, transparent);
  box-sizing: border-box;
}

.woocommerce-checkout #order_review_heading {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text);
  margin: 0 0 var(--mota-space-4) 0;
  padding-block-end: var(--mota-space-2);
  border-block-end: var(--mota-border-width-thick) solid var(--mota-ink);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--mota-space-5);
  border: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  padding: var(--mota-space-3) 0;
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-name {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-text-muted);
  text-align: start;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-text-muted);
  text-align: end;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item td.product-name {
  font-size: var(--mota-text-xs);
  line-height: var(--mota-leading-snug);
  color: var(--mota-text);
  font-weight: var(--mota-weight-medium);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  color: var(--mota-text-muted);
  background-color: var(--mota-n-100);
  padding: 1px 6px;
  border-radius: var(--mota-radius);
  margin-inline-start: var(--mota-space-1);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item td.product-total {
  text-align: end;
  font-family: var(--mota-font-display);
  font-weight: var(--mota-weight-bold);
  font-size: var(--mota-text-xs);
  font-variant-numeric: tabular-nums;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-subtotal th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.tax-rate th {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-text-muted);
  text-align: start;
  font-weight: var(--mota-weight-medium);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart-subtotal td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.tax-rate td {
  text-align: end;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-variant-numeric: tabular-nums;
}

/* Shipping Method Selection */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.shipping th {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-text-muted);
  text-align: start;
  vertical-align: top;
  font-weight: var(--mota-weight-medium);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.shipping td {
  text-align: end;
  font-size: var(--mota-text-xs);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: end;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li {
  margin-block-end: var(--mota-space-1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mota-space-2);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"] {
  margin: 0;
  accent-color: var(--mota-ink);
  cursor: pointer;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li label {
  cursor: pointer;
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-medium);
  color: var(--mota-text);
  margin: 0;
}

/* Checkout Total */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total {
  border-block-start: var(--mota-border-width-thick) solid var(--mota-ink);
  border-block-end: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-wide);
  color: var(--mota-text);
  padding-block-start: var(--mota-space-4);
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
  text-align: end;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-lg);
  font-weight: var(--mota-weight-black);
  color: var(--mota-ink);
  font-variant-numeric: tabular-nums;
  padding-block-start: var(--mota-space-4);
}

/* Payment Methods */
.woocommerce-checkout #payment {
  background-color: transparent;
  padding: 0;
  margin-block-start: var(--mota-space-4);
  border: none;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--mota-space-4) 0;
  padding: 0 0 var(--mota-space-4) 0;
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  margin-block-end: var(--mota-space-3);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
  accent-color: var(--mota-ink);
  margin-inline-end: var(--mota-space-2);
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--mota-space-2);
  margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
  max-height: 24px;
  width: auto;
  vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--mota-bg);
  border: var(--mota-border-width) solid var(--mota-border);
  padding: var(--mota-space-3);
  margin-block-start: var(--mota-space-2);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
  line-height: var(--mota-leading-normal);
  border-radius: var(--mota-radius);
}

.woocommerce-checkout #payment div.payment_box::before {
  display: none !important;
}

.woocommerce-checkout #payment div.payment_box p {
  margin: 0;
}

/* Terms and Conditions */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-block-end: var(--mota-space-4);
  font-size: var(--mota-text-xs);
  color: var(--mota-text-muted);
}

/* Place Order Button */
.woocommerce-checkout button#place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-black);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  border: var(--mota-border-width) solid var(--mota-ink);
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--mota-radius);
  transition: all var(--mota-duration) var(--mota-ease);
}

.woocommerce-checkout button#place_order:hover {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
  border-color: var(--mota-accent);
}

.woocommerce-checkout button#place_order:active {
  transform: translateY(1px);
}

/* Mobile Reflow for Checkout (< 900px) */
@media (max-width: 900px) {
  .woocommerce-checkout form.woocommerce-checkout {
    display: flex;
    flex-direction: column;
    gap: var(--mota-space-6);
  }

  .woocommerce-checkout .woocommerce-checkout-review-order {
    position: static;
    width: 100%;
  }

  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout p.form-row.form-row-first,
  .woocommerce-checkout p.form-row.form-row-last {
    grid-column: 1 / -1;
  }
}

/* --------------------------------- 8 content pages, notices, empty states */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background-color: var(--mota-n-100);
  border-block-start: var(--mota-border-width-thick) solid var(--mota-ink);
  border-radius: var(--mota-radius);
  color: var(--mota-text);
  padding: var(--mota-space-4) var(--mota-space-5);
  margin-block-end: var(--mota-space-5);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--mota-space-4);
  flex-wrap: wrap;
  font-size: var(--mota-text-sm);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message { border-block-start-color: var(--mota-accent-deep); }
.woocommerce-error { border-block-start-color: var(--mota-accent-deep); }

.woocommerce-message .button,
.woocommerce-info .button { margin-inline-start: auto; }

/* Empty states. The empty cart is what most first-time visitors actually see,
   and a 404 and a no-results search are where a store quietly reveals that
   nobody finished it. */
.mota-empty,
.cart-empty,
.woocommerce .cart-empty {
  text-align: center;
  padding-block: var(--mota-space-9);
  max-width: 34rem;
  margin-inline: auto;
}

.mota-empty__title,
.cart-empty {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xl);
  font-weight: var(--mota-weight-bold);
  color: var(--mota-text);
  margin-block-end: var(--mota-space-3);
}

.mota-empty__body {
  color: var(--mota-text-muted);
  margin-block-end: var(--mota-space-5);
}

.return-to-shop { margin-block-start: var(--mota-space-5); }

/* Content pages -- About, FAQ, Returns. One shared template. */
.mota-content { max-width: var(--mota-measure); }

.mota-content h2 {
  font-size: var(--mota-text-lg);
  margin-block: var(--mota-space-7) var(--mota-space-3);
  padding-block-start: var(--mota-space-5);
  border-block-start: var(--mota-border-width) solid var(--mota-rule);
}

.mota-content h2:first-of-type { border-block-start: none; padding-block-start: 0; margin-block-start: 0; }

.mota-content h3 {
  font-size: var(--mota-text-md);
  margin-block: var(--mota-space-5) var(--mota-space-2);
}

.mota-content ul,
.mota-content ol { padding-inline-start: var(--mota-space-5); }

.mota-content li { margin-block-end: var(--mota-space-2); }

.mota-content dl { margin-block-end: var(--mota-space-5); }

.mota-content dt {
  font-family: var(--mota-font-display);
  font-weight: var(--mota-weight-bold);
  margin-block-start: var(--mota-space-4);
}

.mota-content dd { margin: 0 0 var(--mota-space-3); color: var(--mota-text-muted); }

/* Hero, homepage. Ink ground continues the header. Layered with the Trikon geometric watermark. */
.mota-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--mota-bg-invert);
  color: var(--mota-text-invert);
  padding-block: var(--mota-space-8) var(--mota-space-9);
  margin-block-end: 0;
  border-block-end: var(--mota-border-width) solid var(--mota-n-900);
}

.mota-hero::before {
  content: "";
  position: absolute;
  top: 40%;
  right: -8%;
  width: min(720px, 70vw);
  height: min(720px, 70vw);
  transform: translateY(-50%) rotate(6deg);
  background-image: url("../img/mota-trikon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--mota-duration-slow) var(--mota-ease);
}

.mota-hero .col-full {
  position: relative;
  z-index: 1;
}

.mota-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: var(--mota-space-8);
  align-items: start;
}

@media (max-width: 768px) {
  .mota-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--mota-space-6);
  }
}

.mota-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mota-space-2);
  margin-block-end: var(--mota-space-4);
}

.mota-badge-pill {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  padding: 3px var(--mota-space-3);
  border: var(--mota-border-width) solid var(--mota-n-700);
  background-color: var(--mota-n-900);
  color: var(--mota-text-muted-invert);
}

.mota-badge-pill--accent {
  border-color: var(--mota-accent);
  color: var(--mota-accent);
  background-color: color-mix(in srgb, var(--mota-accent) 12%, transparent);
}

.mota-hero__title {
  font-size: var(--mota-text-3xl);
  font-weight: var(--mota-weight-black);
  letter-spacing: var(--mota-tracking-tight);
  color: var(--mota-text-invert);
  margin-block-end: var(--mota-space-4);
  line-height: var(--mota-leading-tight);
  text-wrap: balance;
}

.mota-hero__subtitle {
  color: var(--mota-text-muted-invert);
  max-width: 48ch;
  margin-block-end: var(--mota-space-6);
  font-size: var(--mota-text-md);
  line-height: var(--mota-leading-normal);
  text-wrap: pretty;
}

.mota-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mota-space-3);
  margin-block-end: var(--mota-space-7);
}

.button--hero-primary {
  background-color: var(--mota-accent);
  border-color: var(--mota-accent);
  color: var(--mota-ink);
}

.button--hero-primary:hover {
  background-color: var(--mota-text-invert);
  border-color: var(--mota-text-invert);
  color: var(--mota-ink);
}

.button--hero-secondary {
  background-color: transparent;
  border-color: var(--mota-n-700);
  color: var(--mota-text-invert);
}

.button--hero-secondary:hover {
  border-color: var(--mota-accent);
  color: var(--mota-accent);
}

.mota-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mota-space-4);
  padding-block-start: var(--mota-space-5);
  border-block-start: var(--mota-border-width) solid var(--mota-n-900);
}

.mota-hero__stat-num {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xl);
  font-weight: var(--mota-weight-black);
  color: var(--mota-text-invert);
  line-height: 1;
  margin-block-end: var(--mota-space-1);
}

.mota-hero__stat-label {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  color: var(--mota-text-muted-invert);
  text-transform: uppercase;
}

/* Flagship showcase card */
.mota-showcase-card {
  background-color: var(--mota-n-900);
  border: var(--mota-border-width) solid var(--mota-n-700);
  padding: var(--mota-space-4);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--mota-duration) var(--mota-ease);
}

.mota-showcase-card p {
  margin: 0 !important;
}

.mota-showcase-card br {
  display: none !important;
}

.mota-showcase-card:hover {
  border-color: var(--mota-accent);
}

.mota-showcase-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--mota-space-3);
}

.mota-showcase-card__badge {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  padding: 2px var(--mota-space-2);
}

.mota-showcase-card__sku {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  color: var(--mota-text-muted-invert);
  letter-spacing: var(--mota-tracking-label);
}

.mota-showcase-card__visual {
  display: block;
  background-color: var(--mota-bg-raised);
  overflow: hidden;
  margin-block-end: var(--mota-space-3);
}

.mota-showcase-card__visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform var(--mota-duration) var(--mota-ease);
}

.mota-showcase-card:hover .mota-showcase-card__visual img {
  transform: scale(1.04);
}

.mota-showcase-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mota-space-2);
}

.mota-showcase-card__meta p {
  margin: 0 !important;
  display: inline-flex;
}

.mota-showcase-card__category {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  color: var(--mota-text-muted-invert);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
}

.mota-showcase-card__name {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  color: var(--mota-text-invert);
}

.mota-showcase-card__price {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-sm);
  font-weight: var(--mota-weight-bold);
  color: var(--mota-accent);
  white-space: nowrap;
}

/* Kinetic Streetwear Ticker Marquee */
.mota-ticker {
  background-color: var(--mota-bg-invert);
  border-block-end: var(--mota-border-width) solid var(--mota-n-900);
  overflow: hidden;
  white-space: nowrap;
  padding-block: var(--mota-space-3);
  position: relative;
}

.mota-ticker__track {
  display: inline-flex;
  gap: var(--mota-space-6);
  animation: mota-marquee 28s linear infinite;
}

.mota-ticker:hover .mota-ticker__track {
  animation-play-state: paused;
}

.mota-ticker__item {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text-muted-invert);
  display: inline-flex;
  align-items: center;
}

@keyframes mota-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Category Quick-Nav Bar */
.mota-category-bar {
  background-color: var(--mota-bg);
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
  padding-block: var(--mota-space-4);
  margin-block-end: var(--mota-space-8);
}

.mota-category-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--mota-space-4);
  flex-wrap: wrap;
}

.mota-category-bar__label {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  text-transform: uppercase;
  color: var(--mota-text-muted);
}

.mota-category-bar__links {
  display: flex;
  align-items: center;
  gap: var(--mota-space-2);
  flex-wrap: wrap;
}

.mota-cat-pill {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--mota-space-2) var(--mota-space-3);
  border: var(--mota-border-width) solid var(--mota-rule);
  background-color: var(--mota-bg-raised);
  color: var(--mota-text);
  display: inline-flex;
  align-items: center;
  gap: var(--mota-space-2);
  transition: border-color var(--mota-duration) var(--mota-ease),
              background-color var(--mota-duration) var(--mota-ease);
}

.mota-cat-pill:hover {
  border-color: var(--mota-text);
  color: var(--mota-text);
}

.mota-cat-pill.is-active {
  background-color: var(--mota-ink);
  border-color: var(--mota-ink);
  color: var(--mota-text-invert);
}

.mota-cat-pill__count {
  font-size: var(--mota-text-2xs);
  padding: 1px 6px;
  background-color: var(--mota-n-200);
  color: var(--mota-text);
}

.mota-cat-pill.is-active .mota-cat-pill__count {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
}

/* Section headers on the homepage */
.mota-section {
  margin-block-end: var(--mota-space-9);
}

.mota-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mota-space-5);
  flex-wrap: wrap;
  margin-block-end: var(--mota-space-6);
  padding-block-end: var(--mota-space-4);
  border-block-end: var(--mota-border-width-thick) solid var(--mota-ink);
}

.mota-section__meta {
  max-width: 60ch;
}

.mota-section__index {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  color: var(--mota-accent-deep);
  text-transform: uppercase;
  margin-block-end: var(--mota-space-1);
}

.mota-section__headline {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xl);
  font-weight: var(--mota-weight-black);
  letter-spacing: var(--mota-tracking-tight);
  color: var(--mota-text);
  margin: 0 0 var(--mota-space-2) 0;
  line-height: var(--mota-leading-tight);
}

.mota-section__desc {
  font-size: var(--mota-text-sm);
  color: var(--mota-text-muted);
  margin: 0;
  line-height: var(--mota-leading-normal);
}

.mota-section__meta p { margin: 0; }
.mota-section__actions p { margin: 0; }
.mota-section__header p:empty { display: none; }

.mota-section__actions {
  display: flex;
  align-items: center;
  gap: var(--mota-space-4);
  flex-wrap: wrap;
}

.mota-section__count {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  color: var(--mota-n-500);
  text-transform: uppercase;
}

.mota-section__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mota-space-2);
  padding: var(--mota-space-2) var(--mota-space-4);
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--mota-border-width) solid var(--mota-ink);
  transition: background-color var(--mota-duration) var(--mota-ease),
              border-color var(--mota-duration) var(--mota-ease),
              color var(--mota-duration) var(--mota-ease);
}

.mota-section__btn:hover {
  background-color: var(--mota-accent-deep);
  border-color: var(--mota-accent-deep);
  color: var(--mota-text-invert);
}

.mota-section__btn:active {
  transform: translateY(1px);
}

/* Fallback legacy head */
.mota-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mota-space-4);
  flex-wrap: wrap;
  margin-block-end: var(--mota-space-5);
  padding-block-end: var(--mota-space-3);
  border-block-end: var(--mota-border-width) solid var(--mota-rule);
}

.mota-section__title { font-size: var(--mota-text-lg); margin: 0; }

.mota-section__link {
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mota-text-muted);
}

.mota-section__link:hover { color: var(--mota-text); }

/* Iconic Drops & Fan Favorites showcase card scaling & horizontal alignment */
.mota-section--drops ul.products li.product,
.mota-section--favorites ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.mota-section--drops ul.products li.product .woocommerce-loop-product__title,
.mota-section--favorites ul.products li.product .woocommerce-loop-product__title {
  min-height: calc(2 * var(--mota-text-md) * 1.35);
}

.mota-section--drops ul.products li.product a.button,
.mota-section--favorites ul.products li.product a.button {
  margin-top: auto !important;
}

@media (min-width: 992px) {
  .mota-section--drops ul.products li.product,
  .mota-section--favorites ul.products li.product {
    padding: var(--mota-space-5);
  }

  .mota-section--drops ul.products li.product .woocommerce-loop-product__title,
  .mota-section--favorites ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--mota-text-lg);
    line-height: var(--mota-leading-snug);
    min-height: calc(2 * var(--mota-text-lg) * 1.25);
  }

  .mota-section--drops ul.products li.product .mota-card__garment,
  .mota-section--favorites ul.products li.product .mota-card__garment {
    font-size: var(--mota-text-sm);
    margin-block-start: var(--mota-space-1);
  }

  .mota-section--drops ul.products li.product .price,
  .mota-section--favorites ul.products li.product .price {
    font-size: var(--mota-text-md);
    font-weight: var(--mota-weight-bold);
  }

  .mota-section--drops ul.products li.product a.button,
  .mota-section--favorites ul.products li.product a.button {
    min-height: 48px;
    font-size: var(--mota-text-xs);
    letter-spacing: var(--mota-tracking-wide);
  }
}

.mota-section--drops li.product:hover,
.mota-section--favorites li.product:hover {
  border-color: var(--mota-ink);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--mota-ink) 10%, transparent);
  transform: translateY(-3px);
}

.mota-section--drops li.product:hover a.button,
.mota-section--favorites li.product:hover a.button {
  background-color: var(--mota-accent);
  color: var(--mota-ink);
  border-color: var(--mota-accent);
}

/* Brand Manifesto Breakout */
.mota-manifesto {
  background-color: var(--mota-bg-invert);
  color: var(--mota-text-invert);
  padding-block: var(--mota-space-8);
  margin-block: var(--mota-space-9);
  border-block: var(--mota-border-width) solid var(--mota-n-900);
}

.mota-manifesto__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  gap: var(--mota-space-8);
  align-items: start;
}

@media (max-width: 768px) {
  .mota-manifesto__inner {
    grid-template-columns: 1fr;
    gap: var(--mota-space-6);
  }
}

.mota-manifesto__art {
  position: relative;
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-n-700);
  overflow: hidden;
  align-self: start;
}

.mota-manifesto__art br {
  display: none !important;
}

.mota-manifesto__art p {
  margin: 0 !important;
}

.mota-manifesto__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.mota-manifesto__art-badge {
  position: absolute;
  bottom: var(--mota-space-3);
  left: var(--mota-space-3);
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  padding: 3px var(--mota-space-2);
  border: var(--mota-border-width) solid var(--mota-n-700);
}

.mota-manifesto__content {
  align-self: start;
}

.mota-manifesto__content .mota-eyebrow {
  margin-block-start: 0;
  color: var(--mota-accent);
}

.mota-manifesto__content p:empty {
  display: none !important;
}

.mota-manifesto__title {
  font-size: var(--mota-text-2xl);
  font-weight: var(--mota-weight-black);
  color: var(--mota-text-invert);
  margin-block-end: var(--mota-space-4);
  line-height: var(--mota-leading-tight);
}

.mota-manifesto__lead {
  font-size: var(--mota-text-md);
  font-weight: var(--mota-weight-medium);
  color: var(--mota-text-invert);
  margin-block-end: var(--mota-space-3);
  line-height: var(--mota-leading-snug);
}

.mota-manifesto__body {
  font-size: var(--mota-text-sm);
  color: var(--mota-text-muted-invert);
  margin-block-end: var(--mota-space-6);
  line-height: var(--mota-leading-normal);
}

.mota-manifesto__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--mota-space-4);
  margin-block-end: var(--mota-space-6);
  padding-block-start: var(--mota-space-5);
  border-block-start: var(--mota-border-width) solid var(--mota-n-900);
}

.mota-manifesto__spec strong {
  display: block;
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-wide);
  color: var(--mota-accent);
  margin-block-end: var(--mota-space-1);
}

.mota-manifesto__spec span {
  display: block;
  font-size: var(--mota-text-2xs);
  color: var(--mota-text-muted-invert);
}

.mota-manifesto .button {
  background-color: var(--mota-accent);
  border-color: var(--mota-accent);
  color: var(--mota-ink);
}

.mota-manifesto .button:hover {
  background-color: var(--mota-text-invert);
  border-color: var(--mota-text-invert);
  color: var(--mota-ink);
}

/* Streetwear Fit Check Community Showcase */
.mota-fitcheck {
  background-color: var(--mota-bg-invert);
  color: var(--mota-text-invert);
  padding-block: var(--mota-space-8) var(--mota-space-9);
  margin-block: var(--mota-space-9) var(--mota-space-4);
  border-block-start: var(--mota-border-width) solid var(--mota-n-900);
}

.mota-fitcheck__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mota-space-5);
  flex-wrap: wrap;
  margin-block-end: var(--mota-space-6);
  padding-block-end: var(--mota-space-4);
  border-block-end: var(--mota-border-width) solid var(--mota-n-900);
}

.mota-fitcheck .mota-eyebrow {
  color: var(--mota-accent);
}

.mota-fitcheck__title {
  font-size: var(--mota-text-xl);
  font-weight: var(--mota-weight-black);
  color: var(--mota-text-invert);
  margin-block-end: var(--mota-space-1);
}

.mota-fitcheck__subtitle {
  font-size: var(--mota-text-sm);
  color: var(--mota-text-muted-invert);
  margin: 0;
}

.mota-fitcheck .button {
  background-color: var(--mota-accent);
  border-color: var(--mota-accent);
  color: var(--mota-ink);
}

.mota-fitcheck .button:hover {
  background-color: var(--mota-text-invert);
  border-color: var(--mota-text-invert);
  color: var(--mota-ink);
}

.mota-fitcheck__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mota-space-4);
}

@media (max-width: 900px) {
  .mota-fitcheck__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .mota-fitcheck__grid {
    grid-template-columns: 1fr;
  }
}

.mota-fit-card {
  position: relative;
  background-color: var(--mota-bg-raised);
  border: var(--mota-border-width) solid var(--mota-n-700);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color var(--mota-duration) var(--mota-ease);
}

.mota-fit-card:hover {
  border-color: var(--mota-accent);
}

.mota-fit-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform var(--mota-duration) var(--mota-ease);
}

.mota-fit-card:hover img {
  transform: scale(1.05);
}

.mota-fit-card__tag {
  position: absolute;
  bottom: var(--mota-space-2);
  left: var(--mota-space-2);
  background-color: var(--mota-ink);
  color: var(--mota-text-invert);
  font-family: var(--mota-font-display);
  font-size: var(--mota-text-2xs);
  font-weight: var(--mota-weight-bold);
  letter-spacing: var(--mota-tracking-label);
  text-transform: uppercase;
  padding: 3px var(--mota-space-2);
  border: var(--mota-border-width) solid var(--mota-n-700);
}

/* Accessibility helper Storefront and WooCommerce both rely on. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/* Reduced motion compliance */
@media (prefers-reduced-motion: reduce) {
  .mota-ticker__track {
    animation: none;
  }
  li.product:hover img,
  .mota-showcase-card:hover .mota-showcase-card__visual img,
  .mota-fit-card:hover img {
    transform: none;
  }
  .button:active,
  button:active,
  .woocommerce a.button:active,
  .woocommerce button.button:active,
  .woocommerce input.button:active,
  .woocommerce #respond input#submit:active,
  ul.site-header-cart.menu a.cart-contents:active {
    transform: none;
  }
}