/* Outfitter shop layer (Task 26): every WooCommerce override lives here; theme.css carries no shop rules.
   WooCommerce's own sheets stay loaded (forms, notices, the gallery and PhotoSwipe depend on them) and this file loads
   after all three (functions.php dependency list). Each rule is at least as heavy as the WooCommerce 11.0.1 rule it
   replaces (weights noted as a,b,c), so load order only breaks ties; no !important except against WooCommerce's inline
   styles, at the end. The Cart block's CSS prints in the footer, after this file, so the cart rules win on weight alone.
   Colors and type are tokens.css only. Nothing here moves. */

/* ---- Page frame: shop, category, product, cart ---- */
.woocommerce-page .op-main { padding-top: var(--gg-space-5); }
.woocommerce-page .op-main :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--gg-focus);
  outline-offset: 2px;
}

/* Every price: Zilla Slab (WooCommerce's olive color is replaced where each price is laid out below). */
.woocommerce-Price-amount,
.price {
  font-family: var(--gg-font-display);
  font-weight: 700;
}

/* ---- Buttons in WooCommerce markup ----
   WooCommerce skins a.button/button.button grey (0,2,1) and .alt purple (0,3,1). This restates the theme button
   (theme.css .button, the style guide's primary) at those weights. Its body-class switch for the same job
   (woocommerce-block-theme-has-button-styles) would also change the Cart and Checkout blocks, so it is not used. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  font-family: var(--gg-font-body);
  font-size: var(--gg-size-sm);
  font-weight: 600;
  line-height: 1.2;
  padding: 11px 18px;
  border: 2px solid transparent;
  border-radius: var(--gg-radius);
  background: var(--gg-cardinal);
  color: #fff;
  text-align: center;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--gg-cardinal-hover);
  color: #fff;
}
/* Secondary (navy outline): a card that can't be bought right now ("Read more") and the button inside a notice. */
.woocommerce ul.products li.product a.button:not(.add_to_cart_button),
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-error a.button {
  background: transparent;
  color: var(--gg-navy);
  border-color: var(--gg-navy);
}
.woocommerce ul.products li.product a.button:not(.add_to_cart_button):hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce .woocommerce-error a.button:hover {
  background: var(--gg-navy);
  color: var(--gg-canvas);
}

/* ---- Category header and toolbar ---- */
.woocommerce h1.page-title {
  font-size: var(--gg-size-2xl);
  margin: 0 0 var(--gg-space-2);
}
.woocommerce .term-description,
.woocommerce .page-description {
  max-width: 70ch;
  margin: 0 0 var(--gg-space-5);
  color: var(--gg-slate);
}
.woocommerce .term-description p,
.woocommerce .page-description p { margin: 0 0 var(--gg-space-2); }
.woocommerce .term-description p:last-child,
.woocommerce .page-description p:last-child { margin-bottom: 0; }
.op-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gg-space-2) var(--gg-space-4);
  margin: 0 0 var(--gg-space-4);
}
/* layout floats them (0,2,0) */
.woocommerce .op-toolbar .woocommerce-result-count {
  float: none;
  margin: 0;
  color: var(--gg-slate);
  font-size: var(--gg-size-sm);
}
.woocommerce .op-toolbar .woocommerce-ordering {
  float: none;
  margin: 0;
}
.woocommerce .woocommerce-ordering select {
  height: 36px;
  padding: 0 var(--gg-space-3);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  background-color: #fff;
  color: var(--gg-navy);
  font-family: var(--gg-font-body);
  font-size: var(--gg-size-sm);
}

/* ---- Product grid: shop, category, search, related ---- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gg-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* WooCommerce's clearfix (layout and general, 0,2,2) would be the first and last grid items: row 1 started in
   column 2. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}
/* The card. layout floats it at 22.05% (0,3,2); smallscreen and the .columns-N variants set 48% (0,4,2), which the
   second selector matches. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  float: none;
  width: auto;
  margin: 0;
  clear: none;
  display: flex;
  flex-direction: column;
  padding: var(--gg-space-3);
  background: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow-card);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--gg-line-strong);
}
/* Photo, title and price are one link (WooCommerce's); it fills the card so the button sits at the bottom. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  color: var(--gg-navy);
  text-decoration: none;
}
/* The photo: whole, centered on white in a square, 8% clear of the edges; the shield badge (watermark.css) sits on
   this box. general sizes the img (0,3,3). */
.woocommerce ul.products li.product .op-thumb {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  margin: 0 0 var(--gg-space-3);
  background: #fff;
}
.woocommerce ul.products li.product .op-thumb img {
  position: absolute;
  top: 8%;
  left: 8%;
  width: 84%;
  height: 84%;
  margin: 0;
  object-fit: contain;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 var(--gg-space-2);
  padding: 0;
  font-family: var(--gg-font-body);
  font-size: var(--gg-size-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gg-navy);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Pinned to the bottom of the link, so prices line up across a row whatever the title length. general sets
   400 weight, a smaller size and olive (0,4,2). */
.woocommerce ul.products li.product .price {
  display: block;
  margin: auto 0 var(--gg-space-3);
  font-family: var(--gg-font-display);
  font-size: var(--gg-size-lg);
  font-weight: 700;
  color: var(--gg-navy);
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product .summary .price del {
  margin-right: var(--gg-space-2);
  font-size: 0.8em;
  color: var(--gg-slate);
  opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product .summary .price ins {
  background: none;
  text-decoration: none;
}
.woocommerce ul.products li.product .button {
  display: block;
  width: 100%;
  margin: 0;
}
/* After an AJAX add to cart. */
.woocommerce ul.products li.product a.added_to_cart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  font-size: var(--gg-size-sm);
  font-weight: 600;
  color: var(--gg-navy);
}
/* "Sale": a small label in the photo's corner instead of the round olive badge (general, 0,2,1 and 0,4,2). */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  top: var(--gg-space-2);
  right: auto;
  left: var(--gg-space-2);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 2px var(--gg-space-2);
  border-radius: var(--gg-radius);
  background: var(--gg-cardinal);
  color: #fff;
  font-family: var(--gg-font-body);
  font-size: var(--gg-size-xs);
  font-weight: 600;
  line-height: 1.5;
}
.woocommerce ul.products li.product .onsale {
  top: calc(var(--gg-space-3) + var(--gg-space-2));
  left: calc(var(--gg-space-3) + var(--gg-space-2));
}

/* ---- Pagination: numbers, "Previous" and "Next" (functions.php); the current page in cardinal ---- */
.woocommerce nav.woocommerce-pagination {
  margin-top: var(--gg-space-6);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gg-space-1);
  margin: 0;
  padding: 0;
  border: 0;
  white-space: normal;
}
.woocommerce .woocommerce-pagination ul.page-numbers::before,
.woocommerce .woocommerce-pagination ul.page-numbers::after {
  content: none;
}
.woocommerce nav.woocommerce-pagination ul li {
  float: none;
  margin: 0;
  border: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--gg-space-2);
  border-radius: var(--gg-radius);
  font-size: var(--gg-size-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--gg-navy);
  text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: var(--gg-mist);
  color: var(--gg-navy);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: transparent;
  color: var(--gg-cardinal);
  box-shadow: inset 0 -2px 0 var(--gg-cardinal);
}
.woocommerce nav.woocommerce-pagination ul li span.dots {
  min-width: 0;
  color: var(--gg-slate);
}

/* ---- Product page ---- */
/* Breadcrumb, one line; the product crumb ends in an ellipsis (the title below says it in full). */
.woocommerce .woocommerce-breadcrumb {
  display: flex;
  align-items: center;
  margin: 0 0 var(--gg-space-3);
  font-size: var(--gg-size-xs);
  color: var(--gg-slate);
  white-space: nowrap;
}
.woocommerce .woocommerce-breadcrumb::before,
.woocommerce .woocommerce-breadcrumb::after {
  content: none;
}
.woocommerce .woocommerce-breadcrumb a {
  display: inline-block;
  padding: var(--gg-space-3) 0;
  color: var(--gg-slate);
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--gg-navy);
  text-decoration: underline;
}
.woocommerce .woocommerce-breadcrumb > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gallery ~55% | summary ~45%; everything after them (sections, related products) spans both. */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  column-gap: var(--gg-space-7);
  align-items: start;
}
.woocommerce div.product > * { grid-column: 1 / -1; }
/* layout floats both at 48% (0,3,2); general gives them a 2em bottom margin */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce div.product div.images { grid-column: 1; }
.woocommerce div.product div.summary { grid-column: 2; }

/* The main photo in a square white frame, whole, with the shield on (watermark.css). FlexSlider sizes each slide's
   width inline; the aspect ratio gives it the same height, so the viewport never changes height between photos. The
   frame line is an inset shadow, not a border: FlexSlider sets the viewport to the slide's content height, which
   would cut a bottom border off. */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  border-radius: var(--gg-radius);
  box-shadow: inset 0 0 0 1px var(--gg-line);
}
.woocommerce div.product div.images .woocommerce-product-gallery__image > a {
  position: absolute;
  inset: 0;
  display: block;
  padding: 5%;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Lightbox button: 44px, navy glyph (general draws it black in 36px, 0,4,2). */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: var(--gg-space-2);
  right: var(--gg-space-2);
  width: 44px;
  height: 44px;
  border: 1px solid var(--gg-line);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
  top: 13px;
  left: 13px;
  border-color: var(--gg-navy);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  top: 23px;
  left: 26px;
  background: var(--gg-navy);
}
/* Thumbnails: a row of white squares, the current one outlined in navy (general fades the others, 0,4,4). */
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gg-space-2);
  margin: var(--gg-space-2) 0 0;
}
.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  aspect-ratio: 1 / 1;
  padding: var(--gg-space-1);
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
  opacity: 1;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border-color: var(--gg-line-strong);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border-color: var(--gg-navy);
}

/* Summary, in order: title, price, short description, stock line, quantity + Add to cart, facts. Scoped to .summary
   so none of it reaches the related-product cards further down the same div.product. */
.woocommerce div.product .summary .product_title {
  margin: 0 0 var(--gg-space-3);
  font-size: var(--gg-size-2xl);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
/* general colors it olive (0,3,2) */
.woocommerce div.product .summary .price {
  margin: 0 0 var(--gg-space-4);
  font-family: var(--gg-font-display);
  font-size: var(--gg-size-xl);
  font-weight: 700;
  color: var(--gg-navy);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
  max-width: 60ch;
  margin: 0 0 var(--gg-space-4);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description p { margin: 0 0 var(--gg-space-2); }
.woocommerce div.product .summary .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }
/* WooCommerce's own stock text only: in stock in success, out of stock in slate (general: olive and red, 0,3,1). */
.woocommerce div.product .summary .stock {
  margin: 0 0 var(--gg-space-3);
  font-size: var(--gg-size-sm);
  font-weight: 600;
  color: var(--gg-navy);
}
.woocommerce div.product .summary .stock.in-stock { color: var(--gg-success); }
.woocommerce div.product .summary .stock.out-of-stock { color: var(--gg-slate); }
/* Quantity and Add to cart on one line (general floats both and clears with pseudo-elements, 0,4,3). */
.woocommerce div.product .summary form.cart {
  display: flex;
  align-items: stretch;
  gap: var(--gg-space-2);
  margin: 0 0 var(--gg-space-5);
}
.woocommerce div.product .summary form.cart::before,
.woocommerce div.product .summary form.cart::after {
  content: none;
}
.woocommerce div.product .summary form.cart div.quantity {
  float: none;
  margin: 0;
}
.woocommerce div.product .summary form.cart .quantity .qty {
  width: 4em;
  height: 44px;
  padding: 0 var(--gg-space-2);
  border: 1px solid var(--gg-line-strong);
  border-radius: var(--gg-radius);
  background: #fff;
  color: var(--gg-navy);
  font-family: var(--gg-font-body);
  font-size: var(--gg-size-md);
  text-align: center;
}
.woocommerce div.product .summary form.cart .button {
  flex: 1 1 auto;
  float: none;
  min-height: 44px;
}
/* Facts (functions.php outfitter_product_facts): Brand, Model, UPC or the SKU, and the category. */
.op-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--gg-space-1) var(--gg-space-4);
  margin: 0;
  padding: var(--gg-space-4) 0 0;
  border-top: 1px solid var(--gg-line);
  font-size: var(--gg-size-sm);
}
.op-facts dt { color: var(--gg-slate); }
.op-facts dd {
  margin: 0;
  color: var(--gg-navy);
  overflow-wrap: anywhere;
}
.op-facts a {
  color: var(--gg-navy);
  text-underline-offset: 2px;
}
.op-facts a:hover { color: var(--gg-cardinal); }

/* Description and Specifications: stacked sections with plain headings, kept to a reading measure. */
.op-sections { margin-top: var(--gg-space-7); }
.op-section { max-width: 70ch; }
.op-section + .op-section { margin-top: var(--gg-space-6); }
.op-section > h2,
.woocommerce div.product section.related > h2,
.woocommerce div.product section.upsells > h2 {
  margin: 0 0 var(--gg-space-4);
  font-size: var(--gg-size-xl);
}
/* WooCommerce's attributes table (Task 24's woocommerce_attribute filter still shapes its values): 2 columns, row
   rules, every second row mist; also on phones (smallscreen stacks the cells, 0,2,3). */
.woocommerce table.shop_attributes {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--gg-line);
  border-collapse: collapse;
  background: #fff;
  font-size: var(--gg-size-sm);
}
.woocommerce table.shop_attributes tr { display: table-row; }
.woocommerce table.shop_attributes tr th,
.woocommerce table.shop_attributes tr td {
  display: table-cell;
  padding: 10px var(--gg-space-3);
  border: 0;
  border-bottom: 1px solid var(--gg-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.woocommerce table.shop_attributes tr th {
  width: 35%;
  font-weight: 600;
  color: var(--gg-slate);
}
.woocommerce table.shop_attributes tr td {
  font-style: normal;
  color: var(--gg-navy);
  overflow-wrap: anywhere;
}
.woocommerce table.shop_attributes tr td p {
  margin: 0;
  padding: 0;
}
.woocommerce table.shop_attributes tr:nth-child(2n) th,
.woocommerce table.shop_attributes tr:nth-child(2n) td {
  background: var(--gg-mist);
}
/* A table inside the description (product copy may hold one) reads the same; cells may break long words, so the
   table never pushes past the screen edge. */
.op-section--description table {
  width: 100%;
  margin: 0 0 var(--gg-space-4);
  border-collapse: collapse;
  background: #fff;
  font-size: var(--gg-size-sm);
}
.op-section--description th,
.op-section--description td {
  padding: 10px var(--gg-space-3);
  border-bottom: 1px solid var(--gg-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.op-section--description tbody tr:nth-child(2n) { background: var(--gg-mist); }
.woocommerce div.product section.related,
.woocommerce div.product section.upsells {
  margin-top: var(--gg-space-7);
}

/* ---- Notices: added to cart, no products found (general: purple, green and blue tints, 0,1,0) ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #fff;
  color: var(--gg-navy);
  border: 1px solid var(--gg-line);
  border-top: 3px solid var(--gg-info);
  border-radius: var(--gg-radius);
  font-size: var(--gg-size-sm);
}
.woocommerce-message { border-top-color: var(--gg-success); }
.woocommerce-message::before { color: var(--gg-success); }
.woocommerce-info::before { color: var(--gg-info); }
.woocommerce-error { border-top-color: var(--gg-error); }
.woocommerce-error::before { color: var(--gg-error); }

/* ---- Cart (the Cart block; no "Update cart" button exists there: quantities save themselves) ---- */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header {
  text-transform: none;
  color: var(--gg-slate);
}
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
  aspect-ratio: 1 / 1;
  padding: var(--gg-space-1);
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-radius);
}
/* block: 0,3,1 */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  color: var(--gg-navy);
  font-weight: 600;
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--gg-font-display);
  font-weight: 700;
  color: var(--gg-navy);
}
.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price { font-size: var(--gg-size-md); }
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--gg-size-xl);
}
/* The block's buttons carry wc-block-components-button wp-element-button (global styles: dark grey, 0,1,0). */
.wp-block-woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button.wp-element-button {
  border: 2px solid transparent;
  border-radius: var(--gg-radius);
  background: var(--gg-cardinal);
  color: #fff;
  font-family: var(--gg-font-body);
  font-size: var(--gg-size-md);
  font-weight: 600;
  text-decoration: none;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button.wp-element-button:hover {
  background: var(--gg-cardinal-hover);
  color: #fff;
}
/* block focus: 0,4,1 */
.wp-block-woocommerce-cart .wc-block-cart__submit-button.wc-block-components-button.wp-element-button:focus-visible {
  outline: 3px solid var(--gg-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__button.wc-block-components-button.wp-element-button {
  border: 2px solid var(--gg-navy);
  border-radius: var(--gg-radius);
  background: transparent;
  color: var(--gg-navy);
  font-family: var(--gg-font-body);
  font-weight: 600;
}
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__button.wc-block-components-button.wp-element-button:hover {
  background: var(--gg-navy);
  color: var(--gg-canvas);
}

/* ---- Narrower screens ---- */
@media (max-width: 1099px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
  .woocommerce div.product div.summary {
    grid-column: 1;
    margin-top: var(--gg-space-5);
  }
}
@media (max-width: 799px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: 2-up cards with a tighter gap, full-width sort select and 44px targets. */
@media (max-width: 599px) {
  .woocommerce ul.products { gap: var(--gg-space-3); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--gg-size-sm); }
  .woocommerce ul.products li.product .price { font-size: var(--gg-size-md); }
  .woocommerce .op-toolbar .woocommerce-ordering { flex: 1 1 100%; }
  .woocommerce .woocommerce-ordering select {
    width: 100%;
    height: 44px;
  }
  .woocommerce div.product .summary .product_title { font-size: var(--gg-size-xl); }
  .woocommerce div.product .summary .price { font-size: var(--gg-size-lg); }
}

/* ---- Reduced motion ----
   WooCommerce sets these inline (product-image.php fades the gallery in; FlexSlider slides between photos), and an
   inline style can only be overridden with !important. */
@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product div.images.woocommerce-product-gallery { transition: none !important; }
  .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { transition-duration: 0s !important; }
}