/* ==========================================================================
   Ouidoo Gym — Advanced Shop Grid
   Tokens fall back to the values in filtergym.css when that sheet is loaded,
   so the grid keeps the site palette but still stands alone.
   ========================================================================== */

:root {
  --ogs-black: var(--acc-black, #000000);
  --ogs-green: var(--acc-green, #0f6a37);
  --ogs-green-dark: var(--acc-green-dark, #0b4f29);
  --ogs-grey: var(--acc-grey, #6b6b6b);
  --ogs-grey-light: var(--acc-grey-light, #9a9a9a);
  --ogs-line: var(--acc-line, #e7e7e7);
  --ogs-line-soft: var(--acc-line-soft, #f0f0f0);
  --ogs-bg: var(--acc-bg, #ffffff);
  --ogs-grey-bg: var(--acc-grey-bg, #f5f5f5);
  --ogs-red: #b3261e;
  --ogs-font-heading: var(--font-heading, "Montserrat", Helvetica, Arial, sans-serif);
  --ogs-font-body: var(--font-body, "Poppins", Helvetica, Arial, sans-serif);
  --ogs-btn-h: 46px;
  /* borders drawn on the #f5f5f5 quick view panel need more contrast than
     --ogs-line, which all but disappears against it */
  --ogs-qv-line: #dcdcdc;
  --ogs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */

/* The card markup uses .screen-reader-text; themes usually define it, but the
   plugin must not depend on that being true. */
.ogs-card .screen-reader-text,
.ogs-modal .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

ul.products,
ul.products li.product,
ul.products li.product *,
ul.products li.product *::before,
ul.products li.product *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  box-shadow: none !important;
}

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

/* minmax(0, 1fr) below stops grid items refusing to shrink below their content,
   which is the usual cause of a product grid forcing a horizontal scrollbar.
   These two cover the contents of the cards themselves. */
ul.products li.product,
.ogs-card__body,
.ogs-card__title,
.ogs-card__price {
  min-width: 0;
}

ul.products {
  --ogs-gap: 30px 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ogs-gap);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

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

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

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

/* the shortcode emits whatever its own column setting says; the switcher's
   .ogs-cols-N class below is what actually decides, so these follow the
   default rather than the number in the markup */
ul.products.columns-3,
ul.products.columns-4 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

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

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

/* Layout switcher — these come after the columns-* rules so they win at equal
   specificity, but before the media queries so small screens still override. */
ul.products.ogs-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

/* ---------- toolbar ---------- */

.ogs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--ogs-font-body);
}

/* the grid provides its own top margin; the toolbar already spaces it */
.ogs-toolbar + ul.products {
  margin-top: 12px;
}

.ogs-toolbar__count {
  margin: 0;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--ogs-grey);
}

.ogs-toolbar__count strong {
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  color: var(--ogs-black);
}

.ogs-toolbar__layout {
  display: flex;
  gap: 6px;
}

.ogs-layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ogs-grey-light);
  background: #fff;
  border: 1px solid var(--ogs-line);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ogs-layout-btn:hover {
  color: var(--ogs-black);
  border-color: var(--ogs-black);
}

.ogs-layout-btn.is-active {
  color: #fff;
  background: var(--ogs-black);
  border-color: var(--ogs-black);
}

/* ---------- card ---------- */

ul.products li.product.ogs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  float: none !important;
  clear: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  background: var(--ogs-bg);
  border: 1px solid var(--ogs-line);
  font-family: var(--ogs-font-body);
  text-align: left;
  transition: border-color 0.2s ease;
}

ul.products li.product.ogs-card::before,
ul.products li.product.ogs-card::after {
  content: none !important;
}

.ogs-card:hover {
  border-color: var(--ogs-black);
}

/* ---------- media + hover swap ---------- */

.ogs-card__media {
  position: relative;
  overflow: hidden;
  background: var(--ogs-grey-bg);
  border-bottom: 1px solid var(--ogs-line-soft);
}

.ogs-card__media-link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
}

.ogs-card__img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 0.5s var(--ogs-ease), opacity 0.35s ease;
}

.ogs-card__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.ogs-card--has-hover:hover .ogs-card__img--main {
  opacity: 0;
}

.ogs-card--has-hover:hover .ogs-card__img--hover {
  opacity: 1;
}

/* products with no second image get a gentle zoom instead */
.ogs-card:not(.ogs-card--has-hover):hover .ogs-card__img--main {
  transform: scale(1.04);
}

.ogs-card--oos .ogs-card__img {
  filter: grayscale(1);
  opacity: 0.55;
}

/* ---------- badges ---------- */

.ogs-card__badges {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  pointer-events: none;
}

.ogs-badge {
  display: inline-block;
  padding: 4px 9px;
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ogs-black);
}

.ogs-badge.is-sale {
  background: var(--ogs-green);
}

.ogs-badge.is-new {
  color: var(--ogs-black);
  background: var(--ogs-grey-bg);
}

.ogs-badge.is-oos {
  background: var(--ogs-grey);
}

/* ---------- quick view button ---------- */

.ogs-card__quickview {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.82);
  border: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s var(--ogs-ease), background-color 0.15s ease;
}

.ogs-card:hover .ogs-card__quickview,
.ogs-card__quickview:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.ogs-card__quickview:hover {
  background: var(--ogs-green);
}

.ogs-card__quickview-icon {
  display: inline-flex;
}

.ogs-card--oos .ogs-card__quickview {
  display: none;
}

/* ---------- body ---------- */

.ogs-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

/* Both WooCommerce and Divi set padding on the loop title, and Divi's
   `.woocommerce ul.products li.product h2` (0,3,3) outranks a plain class
   selector. Matching the element in the selector and forcing the padding is
   what finally settles it — card spacing comes from the flex gap on
   .ogs-card__body, so the title needs none of its own. */
ul.products li.product h2.ogs-card__title,
.woocommerce ul.products li.product h2.ogs-card__title,
.et_pb_shop ul.products li.product h2.ogs-card__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ogs-card__title a {
  color: var(--ogs-black);
  text-decoration: none;
  /* a long unbroken product name would otherwise force a horizontal scrollbar */
  overflow-wrap: anywhere;
}

.ogs-card__title a:hover {
  color: var(--ogs-green);
}

.ogs-card__price {
  margin: 0;
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--ogs-black);
}

.ogs-card__price del {
  margin-right: 6px;
}

.ogs-card__price ins {
  text-decoration: none;
  color: var(--ogs-green);
}

/* The amount itself carries the emphasis — bold and a step up from the
   surrounding "From:" / "/ mois" labels. Sized in em so it stays in
   proportion wherever a price appears. */
ul.products li.product .ogs-card__price .woocommerce-Price-amount,
.ogs-modal .ogs-qv__price .woocommerce-Price-amount,
.ogs-modal .ogs-qv__form .woocommerce-variation-price .woocommerce-Price-amount {
  font-weight: 700;
  font-size: 1.15em;
}

/* When a product is discounted, WooCommerce renders <del>old</del> <ins>new</ins>.
   The original recedes to grey and drops the bold so the current price leads.
   Both the <del> and the price spans inside it need the colour: Divi sets its
   own on `.woocommerce ... .price del`, which outranks a plain class. */
ul.products li.product .ogs-card__price del,
ul.products li.product .ogs-card__price del *,
.woocommerce ul.products li.product .ogs-card__price del,
.woocommerce ul.products li.product .ogs-card__price del *,
.ogs-modal .ogs-qv__price del,
.ogs-modal .ogs-qv__price del *,
.ogs-modal .ogs-qv__form .woocommerce-variation-price del,
.ogs-modal .ogs-qv__form .woocommerce-variation-price del * {
  color: var(--ogs-grey) !important;
  font-weight: 400 !important;
  font-size: 1em;
  text-decoration: line-through;
}

/* the current price keeps the emphasis */
ul.products li.product .ogs-card__price ins,
ul.products li.product .ogs-card__price ins *,
.ogs-modal .ogs-qv__price ins,
.ogs-modal .ogs-qv__price ins * {
  color: var(--ogs-green);
  text-decoration: none;
}

/* the "From:" prefix and subscription suffix stay quiet */
ul.products li.product .ogs-card__price .from,
ul.products li.product .ogs-card__price .subscription-details {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--ogs-grey);
}

/* ---------- star rating ----------
   WooCommerce draws its stars with a bundled "star" webfont, and Divi restyles
   that markup again with its own accent colour, its own glyph content and a
   padding offset on the fill. Both sit at a higher specificity than a plain
   class, so the contested properties are forced here rather than merely set.

   Structure WooCommerce gives us:
     .star-rating            the track
       ::before              five empty stars (ours), which also sets the width
       > span[style=width:%] the fill, its width set inline as a percentage
         ::before            five filled stars (ours), clipped by the span */

/* Sits directly above the title. The card body's flex gap spaces every child
   equally, so this pulls the pair closer without disturbing the rest. */
.ogs-card__rating {
  margin-bottom: -5px;
  line-height: 1;
}

.ogs-card__rating,
.ogs-qv__rating {
  --ogs-star-size: 13px;
  --ogs-star-track: var(--acc-line, #e7e7e7);
  --ogs-star-fill: var(--acc-star, #ffc107);
}

ul.products li.product .ogs-card__rating .star-rating,
.woocommerce ul.products li.product .ogs-card__rating .star-rating,
.ogs-modal .ogs-qv__rating .star-rating {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* forced out of Divi's star font, which would render different glyphs */
  font-family: var(--ogs-font-body) !important;
  font-size: var(--ogs-star-size) !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  white-space: nowrap;
  color: var(--ogs-star-track) !important;
}

/* empty stars — static, so this is what gives the track its width */
ul.products li.product .ogs-card__rating .star-rating::before,
.woocommerce ul.products li.product .ogs-card__rating .star-rating::before,
.ogs-modal .ogs-qv__rating .star-rating::before {
  content: "\2605\2605\2605\2605\2605" !important;
  display: block !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  font-family: var(--ogs-font-body) !important;
  font-size: var(--ogs-star-size) !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: var(--ogs-star-track) !important;
}

/* the fill: width comes from WooCommerce's inline percentage */
ul.products li.product .ogs-card__rating .star-rating > span,
.woocommerce ul.products li.product .ogs-card__rating .star-rating > span,
.ogs-modal .ogs-qv__rating .star-rating > span {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  float: none !important;
  height: 100% !important;
  margin: 0 !important;
  /* Divi pushes the sentence out of view with padding-top, which would also
     push our glyphs out of the clipping box */
  padding: 0 !important;
  overflow: hidden !important;
  /* collapses the "Rated 5.00 out of 5…" sentence to nothing */
  font-size: 0 !important;
  line-height: 1 !important;
}

/* restored from the custom property, which font-size: 0 above cannot affect */
ul.products li.product .ogs-card__rating .star-rating > span::before,
.woocommerce ul.products li.product .ogs-card__rating .star-rating > span::before,
.ogs-modal .ogs-qv__rating .star-rating > span::before {
  content: "\2605\2605\2605\2605\2605" !important;
  display: block !important;
  position: static !important;
  float: none !important;
  padding: 0 !important;
  font-family: var(--ogs-font-body) !important;
  font-size: var(--ogs-star-size) !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  color: var(--ogs-star-fill) !important;
}

/* the figures nested in that sentence would otherwise show through */
.ogs-card__rating .star-rating .rating,
.ogs-qv__rating .star-rating .rating {
  font-size: 0 !important;
}

/* ---------- variation pills ---------- */

.ogs-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.ogs-option {
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  font-family: var(--ogs-font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--ogs-black);
  background: #fff;
  border: 1px solid var(--ogs-line);
  cursor: pointer;
  /* selection is shown by opacity and the border, never by a fill: unpicked
     options recede and the chosen one comes forward at full strength. Same
     pattern as the quick view swatches, so both pickers read alike. */
  opacity: 0.35;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease,
    opacity 0.15s ease;
}

/* the chosen pill is already at full strength — leave it alone on hover */
.ogs-option:hover:not(.is-disabled):not(.is-selected) {
  border-color: var(--ogs-black);
  opacity: 0.8;
}

.ogs-option.is-selected {
  opacity: 1;
  border-color: var(--ogs-black);
}

.ogs-option.is-disabled {
  color: var(--ogs-grey-light);
  background: var(--ogs-grey-bg);
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Six-up cards are much narrower, so everything inside steps down to match and
   keeps a row of options from wrapping. Gated to widths where six columns
   actually render — below 1100px the grid drops to three regardless of this
   class. Values continue the taper from the four-up defaults above. */
@media all and (min-width: 1101px) {
  ul.products.ogs-cols-6 {
    --ogs-gap: 18px 12px;
  }

  /* the placeholders stand in for the grid, so they match its density */
  .ogs-skeletons.ogs-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px 12px;
  }

  ul.products.ogs-cols-6 .ogs-card__options {
    gap: 4px;
  }

  ul.products.ogs-cols-6 .ogs-option {
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    font-size: 10px;
  }

  /* Typography steps down with the card width. The title selector carries the
     extra .ogs-cols-6 class so it outranks the base rule, which already needs
     high specificity to beat Divi. */
  ul.products.ogs-cols-6 li.product h2.ogs-card__title,
  .woocommerce ul.products.ogs-cols-6 li.product h2.ogs-card__title {
    font-size: 13px;
    letter-spacing: 0.02em;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__body {
    gap: 7px;
    padding: 11px;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__price {
    font-size: 12px;
  }

  ul.products.ogs-cols-6 li.product .ogs-btn {
    gap: 6px;
    height: 36px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  ul.products.ogs-cols-6 li.product .ogs-badge {
    padding: 3px 6px;
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__badges {
    gap: 2px;
    padding: 6px;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__quickview {
    right: 6px;
    bottom: 6px;
    gap: 4px;
    height: 28px;
    padding: 0 7px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__actions {
    gap: 6px;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__actions .added_to_cart {
    font-size: 10px;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__rating {
    --ogs-star-size: 10px;
  }

  ul.products.ogs-cols-6 li.product .ogs-card__feedback {
    font-size: 10px;
  }
}

/* ---------- buttons ---------- */

.ogs-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: var(--ogs-btn-h);
  padding: 0 18px;
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ogs-black);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ogs-btn--solid {
  color: #fff;
  background: var(--ogs-black);
}

.ogs-btn--solid:hover:not(:disabled) {
  color: #fff;
  background: var(--ogs-green);
  border-color: var(--ogs-green);
}

.ogs-btn--outline {
  color: var(--ogs-black);
  background: transparent;
}

.ogs-btn--outline:hover {
  color: #fff;
  background: var(--ogs-black);
}

.ogs-btn--muted {
  color: var(--ogs-grey);
  background: var(--ogs-grey-bg);
  border-color: var(--ogs-line);
  cursor: not-allowed;
}

.ogs-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* shown while the button is still disabled, so it has to opt out of the
   disabled opacity or the confirmation reads as a greyed-out control */
.ogs-btn.is-added,
.ogs-btn.is-added:disabled {
  color: #fff;
  background: var(--ogs-green);
  border-color: var(--ogs-green);
  opacity: 1;
}

/* spinner */
.ogs-btn__spinner {
  display: none;
  /* the button is a flex row (label + spinner); without this the ring gets
     squashed into an ellipse once the label crowds it on a narrow card */
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50% !important;
  animation: ogs-spin 0.7s linear infinite;
}

/* The card reset squares off everything inside a product card at (0,2,2), which
   outranks the rule above even though both carry !important. The spinner is the
   one deliberately round thing in there, so it has to say so louder. */
ul.products li.product .ogs-btn__spinner {
  border-radius: 50% !important;
}

.ogs-btn.is-loading .ogs-btn__spinner {
  display: block;
}

@keyframes ogs-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- "View cart" link ----------
   WooCommerce's add-to-cart.js injects this after the button whenever the
   added_to_cart event fires — which our own AJAX triggers so the FastCart
   drawer stays in sync. It arrives with no styling of its own, so it has to
   be caught here rather than in the template. */

.ogs-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

/* Plain centred text — no box. Divi gives this link its own display and
   alignment, so those two are forced rather than merely set. */
ul.products li.product .ogs-card__actions .added_to_cart,
.woocommerce ul.products li.product .ogs-card__actions .added_to_cart,
.ogs-modal .ogs-qv__form .added_to_cart {
  display: block !important;
  float: none !important;
  width: 100%;
  height: auto !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-family: var(--ogs-font-heading);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center !important;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ogs-black);
  background: none !important;
  border: 0 !important;
  transition:
    color 0.15s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Woo and Divi both hang an arrow off .wc-forward; suppressing the pseudo
   elements outright is what keeps a theme one from replacing ours. */
ul.products li.product .ogs-card__actions .added_to_cart::after,
ul.products li.product .ogs-card__actions .added_to_cart::before,
.woocommerce ul.products li.product .ogs-card__actions .added_to_cart::after,
.woocommerce ul.products li.product .ogs-card__actions .added_to_cart::before,
.ogs-modal .ogs-qv__form .added_to_cart::after,
.ogs-modal .ogs-qv__form .added_to_cart::before {
  content: none !important;
  display: none !important;
}

ul.products li.product .ogs-card__actions .added_to_cart:hover,
.woocommerce ul.products li.product .ogs-card__actions .added_to_cart:hover,
.ogs-modal .ogs-qv__form .added_to_cart:hover {
  color: var(--ogs-black);
}

/* fades out three seconds after it appears — see dismissCartLink in shop.js */
.ogs-card__actions .added_to_cart.is-leaving,
.ogs-modal .ogs-qv__form .added_to_cart.is-leaving {
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
}

.ogs-modal .ogs-qv__form .added_to_cart {
  margin-top: 12px !important;
}

.ogs-card__feedback {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ogs-grey);
}

.ogs-card__feedback:empty {
  display: none;
}

.ogs-card__feedback.is-error {
  color: var(--ogs-red);
}

/* ---------- focus ---------- */

.ogs-card a:focus-visible,
.ogs-card button:focus-visible,
.ogs-modal button:focus-visible,
.ogs-modal a:focus-visible {
  outline: 2px solid var(--ogs-black);
  outline-offset: 2px;
}

/* ---------- skeleton loading ---------- */

.ogs-grid-wrap.is-loading ul.products {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.ogs-skeletons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.ogs-skeleton {
  border: 1px solid var(--ogs-line);
  background: var(--ogs-bg);
}

.ogs-skeleton__media {
  aspect-ratio: 1 / 1;
}

.ogs-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.ogs-skeleton__line {
  height: 12px;
}

.ogs-skeleton__line--short {
  width: 45%;
}

.ogs-skeleton__line--button {
  height: var(--ogs-btn-h);
  margin-top: 6px;
}

.ogs-skeleton__media,
.ogs-skeleton__line {
  background: linear-gradient(
    90deg,
    var(--ogs-grey-bg) 25%,
    #ececec 37%,
    var(--ogs-grey-bg) 63%
  );
  background-size: 400% 100%;
  animation: ogs-shimmer 1.4s ease infinite;
}

@keyframes ogs-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ---------- quick view modal ---------- */

.ogs-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ogs-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.ogs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: saturate(120%) blur(2px);
}

.ogs-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 940px;
  max-height: 88vh;
  overflow: hidden;
  background: var(--ogs-bg);
  border: 0;
  transform: translateY(12px);
  transition: transform 0.25s var(--ogs-ease);
}

.ogs-modal.is-open .ogs-modal__dialog {
  transform: translateY(0);
}

.ogs-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  line-height: 1;
  color: var(--ogs-black);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ogs-modal__close:hover {
  color: var(--ogs-green);
}

.ogs-modal__content {
  width: 100%;
  overflow-y: auto;
  /* stops a scroll that reaches the end of the panel from carrying on and
     scrolling the page behind it, which iOS does by default */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* loading placeholder, shaped like the real panel */
.ogs-qv--skeleton .ogs-qv__stage {
  aspect-ratio: 1 / 1;
}

.ogs-qv--skeleton .ogs-qv__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ogs-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  font-family: var(--ogs-font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ogs-grey);
}

/* ---------- quick view inner layout ---------- */

.ogs-qv {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  padding: 10px;
  font-family: var(--ogs-font-body);
}

.ogs-qv__media {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* same badges as the card, over the quick view image */
.ogs-qv__badges {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px;
  pointer-events: none;
}

.ogs-qv__badges .ogs-badge {
  padding: 5px 11px;
  font-size: 11px;
}

.ogs-qv__stage {
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.ogs-qv__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ogs-qv__thumbs {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  padding: 12px;
  background: #fff;
}

.ogs-qv__thumb {
  width: 54px;
  padding: 0;
  background: none;
  border: 1px solid var(--ogs-line);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.ogs-qv__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.ogs-qv__thumb:hover,
.ogs-qv__thumb.is-active {
  opacity: 1;
  border-color: var(--ogs-black);
}

/* details column — grey panel against the white image side.
   Centred so short products do not leave dead space. */
.ogs-qv__details {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 44px;
  background: var(--ogs-grey-bg);
}

/* category eyebrow */
.ogs-qv__eyebrow {
  margin: 0 0 8px;
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ogs-green);
}

.ogs-qv__title {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ogs-black);
}

.ogs-qv__rating {
  --ogs-star-size: 15px;
  margin-bottom: 10px;
}

.ogs-qv__price {
  margin: 0;
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ogs-black);
}

.ogs-qv__price ins {
  text-decoration: none;
  color: var(--ogs-green);
}

.ogs-qv__price del {
  margin-right: 8px;
}

.ogs-qv__excerpt {
  margin-top: 14px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ogs-grey);
}

.ogs-qv__excerpt p:last-child {
  margin-bottom: 0;
}

/* divider above the buying controls */
.ogs-qv__form {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--ogs-qv-line);
}

/* secondary action, sat under the add-to-cart row rather than floating loose */
.ogs-qv__full-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 4px 0;
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ogs-grey);
  text-decoration: none;
  transition: color 0.15s ease;
}

.ogs-qv__full-arrow {
  transition: transform 0.2s var(--ogs-ease);
}

.ogs-qv__full-link:hover .ogs-qv__full-arrow {
  transform: translateX(4px);
}

.ogs-qv__full-link:hover {
  color: var(--ogs-black);
}

/* ---------- WooCommerce variation form, restyled ----------
   Woo renders this as a <table>. Collapsing it to blocks puts each label
   directly above its dropdown instead of stranding them in separate cells. */

.ogs-modal .ogs-qv__form table.variations,
.ogs-modal .ogs-qv__form table.variations tbody,
.ogs-modal .ogs-qv__form table.variations tr,
.ogs-modal .ogs-qv__form table.variations th,
.ogs-modal .ogs-qv__form table.variations td {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.ogs-modal .ogs-qv__form table.variations {
  margin-bottom: 18px;
}

.ogs-modal .ogs-qv__form table.variations tr + tr {
  margin-top: 14px;
}

/* the selected value, appended to the attribute label */
.ogs-swatch-chosen {
  font-weight: 700;
  letter-spacing: normal;
  color: var(--ogs-green);
  text-transform: none;
}

.ogs-modal .ogs-qv__form table.variations th.label label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--ogs-black);
}

.ogs-modal .ogs-qv__form select {
  width: 100%;
  height: var(--ogs-btn-h);
  padding: 0 38px 0 14px;
  font-family: var(--ogs-font-body);
  font-size: 14px;
  color: var(--ogs-black);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  border: 1px solid var(--ogs-qv-line);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ogs-modal .ogs-qv__form select:hover,
.ogs-modal .ogs-qv__form select:focus {
  border-color: var(--ogs-black);
  outline: none;
}

/* ---------- variation swatches ----------
   The native select stays in the DOM driving WooCommerce's variation form, so
   it is hidden visually rather than removed. */

.ogs-modal .ogs-qv__form select.ogs-select-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.ogs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ogs-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  font-family: var(--ogs-font-body);
  font-size: 12px;
  color: var(--ogs-black);
  background: #fff;
  border: 1px solid var(--ogs-qv-line);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

/* with an image the swatch is the image alone — the chosen value is already
   spelled out next to the attribute name */
.ogs-swatch.has-image {
  box-sizing: border-box;
  gap: 0;
  justify-content: center;
  width: 72px;
  height: 72px;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 6px;
}

/* kept in the DOM, hidden from view: screen readers still need the option name */
.ogs-swatch.has-image .ogs-swatch__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ogs-swatch__img {
  display: block;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ogs-grey-bg);
}

.ogs-swatch__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s var(--ogs-ease);
}

.ogs-swatch:hover:not(:disabled) .ogs-swatch__img img {
  transform: scale(1.06);
}

.ogs-swatch__label {
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* selection is shown by opacity: unpicked options recede, the chosen one
   comes forward at full strength */
.ogs-swatch:hover:not(:disabled) {
  opacity: 0.8;
}

.ogs-swatch.is-selected {
  opacity: 1;
}

/* an option the other chosen attributes rule out */
.ogs-swatch.is-unavailable,
.ogs-swatch:disabled {
  color: var(--ogs-grey-light);
  background: var(--ogs-grey-bg);
  border-color: var(--ogs-line);
  cursor: not-allowed;
  opacity: 0.25;
}

.ogs-swatch.is-unavailable .ogs-swatch__label {
  text-decoration: line-through;
}

.ogs-modal .ogs-qv__form .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ogs-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ogs-modal .ogs-qv__form .reset_variations:hover {
  color: var(--ogs-black);
}

/* selected-variation price + stock line */
.ogs-modal .ogs-qv__form .woocommerce-variation-price {
  margin-bottom: 14px;
  font-family: var(--ogs-font-heading);
  font-weight: 600;
  font-size: 19px;
  color: var(--ogs-black);
}

.ogs-modal .ogs-qv__form .woocommerce-variation-availability p {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ogs-green);
}

.ogs-modal .ogs-qv__form .woocommerce-variation-availability .out-of-stock {
  color: var(--ogs-red);
}

.ogs-modal .ogs-qv__form .woocommerce-variation-description {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ogs-grey);
}

/* ---------- quantity + add to cart row ---------- */

.ogs-modal .ogs-qv__form form.cart,
.ogs-modal .ogs-qv__form .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

.ogs-modal .ogs-qv__form form.variations_form {
  display: block;
}

/* ---------- custom quantity stepper ----------
   The wrapper becomes the bordered control and the - / + buttons injected by
   shop.js sit inside it, so the three parts read as one unit. Divi's float and
   margin on .quantity are cleared, as they otherwise leave a phantom gap. */

.ogs-modal .ogs-qv__form .quantity {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  width: auto;
  height: var(--ogs-btn-h);
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ogs-qv-line);
  float: none !important;
  transition: border-color 0.15s ease;
}

.ogs-modal .ogs-qv__form .quantity:focus-within {
  border-color: var(--ogs-black);
}

.ogs-qty__btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  font-family: var(--ogs-font-body);
  font-size: 16px;
  line-height: 1;
  color: var(--ogs-grey);
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.ogs-qty__btn:hover:not(:disabled) {
  color: #fff;
  background: var(--ogs-black);
}

.ogs-qty__btn:disabled {
  color: var(--ogs-line);
  cursor: not-allowed;
}

.ogs-modal .ogs-qv__form .quantity input.qty {
  width: 44px;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 0 2px;
  font-family: var(--ogs-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--ogs-black);
  text-align: center;
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* the native spinner would sit on top of our own controls */
.ogs-modal .ogs-qv__form .quantity input.qty::-webkit-outer-spin-button,
.ogs-modal .ogs-qv__form .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Divi styles WooCommerce buttons with its own accent colour and high
   specificity, so these declarations are forced to keep the shop palette. */
.ogs-modal .ogs-qv__form button.button,
.ogs-modal .ogs-qv__form button[type="submit"],
.ogs-modal .ogs-qv__form .single_add_to_cart_button {
  flex: 1 1 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--ogs-btn-h);
  margin: 0 !important;
  padding: 0 24px !important;
  font-family: var(--ogs-font-heading) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--ogs-black) !important;
  border: 1px solid var(--ogs-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ogs-modal .ogs-qv__form button.button::after,
.ogs-modal .ogs-qv__form .single_add_to_cart_button::after {
  content: none !important;
}

.ogs-modal .ogs-qv__form button.button:hover,
.ogs-modal .ogs-qv__form .single_add_to_cart_button:hover {
  color: #fff !important;
  background: var(--ogs-green) !important;
  border-color: var(--ogs-green) !important;
}

.ogs-modal .ogs-qv__form button.button:disabled,
.ogs-modal .ogs-qv__form .single_add_to_cart_button.disabled,
.ogs-modal .ogs-qv__form .single_add_to_cart_button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
}

.ogs-modal .ogs-qv__form .stock:empty,
.ogs-modal .ogs-qv__form .woocommerce-variation:empty {
  display: none;
}

/* ==========================================================================
   Responsive
   Breakpoints step the grid down by column count; capability queries
   (hover / pointer) handle touch, which is not the same thing as "small".
   ========================================================================== */

/* ---------- very large screens ---------- */

@media all and (min-width: 1600px) {
  ul.products {
    --ogs-gap: 34px 28px;
  }

  .ogs-modal__dialog {
    max-width: 1040px;
  }
}

/* ---------- laptop: three up ---------- */

@media all and (max-width: 1100px) {
  ul.products,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-5,
  ul.products.columns-6,
  ul.products.ogs-cols-4,
  ul.products.ogs-cols-6,
  .ogs-skeletons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* the column count is fixed below this width, so the switcher would lie */
  .ogs-toolbar__layout {
    display: none;
  }
}

/* ---------- tablet: two up, quick view stacks ---------- */

@media all and (max-width: 980px) {
  ul.products,
  ul.products.columns-3,
  ul.products.columns-4,
  ul.products.columns-5,
  ul.products.columns-6,
  ul.products.ogs-cols-4,
  ul.products.ogs-cols-6,
  .ogs-skeletons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ul.products {
    --ogs-gap: 24px 20px;
  }

  .ogs-qv {
    grid-template-columns: minmax(0, 1fr);
  }

  .ogs-qv__stage {
    aspect-ratio: 4 / 3;
  }

  .ogs-qv__details {
    align-self: stretch;
    padding: 26px 24px 30px;
  }

  .ogs-qv__title {
    font-size: 19px;
  }

  /* a long flavour list should scroll rather than stack into a wall */
  .ogs-qv__thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- small tablet / large phone ---------- */

@media all and (max-width: 768px) {
  ul.products {
    --ogs-gap: 20px 16px;
  }

  .ogs-toolbar {
    gap: 10px;
  }

  .ogs-toolbar__count {
    font-size: 11px;
  }

  ul.products li.product h2.ogs-card__title,
  .woocommerce ul.products li.product h2.ogs-card__title {
    font-size: 16px;
  }

  .ogs-qv__title {
    font-size: 18px;
  }

  .ogs-qv__eyebrow {
    font-size: 10px;
  }
}

/* ---------- phone ---------- */

@media all and (max-width: 560px) {
  ul.products {
    --ogs-gap: 16px 12px;
    margin-top: 20px;
  }

  .ogs-toolbar + ul.products {
    margin-top: 14px;
  }

  .ogs-card__body {
    gap: 8px;
    padding: 12px;
  }

  ul.products li.product h2.ogs-card__title,
  .woocommerce ul.products li.product h2.ogs-card__title {
    font-size: 14px;
    letter-spacing: 0.03em;
  }

  ul.products li.product .ogs-card__price {
    font-size: 14px;
  }

  .ogs-badge {
    padding: 3px 7px;
    font-size: 9px;
  }

  .ogs-card__badges {
    gap: 3px;
    padding: 8px;
  }

  .ogs-option {
    height: 28px;
    font-size: 11px;
  }

  /* modal goes full bleed, allowing for notches and home indicators */
  .ogs-modal {
    padding: 0;
  }

  .ogs-modal__dialog {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: none;
  }

  .ogs-modal__content {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .ogs-qv {
    padding: 0;
  }

  .ogs-qv__details {
    padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
  }

  .ogs-qv__stage {
    aspect-ratio: 1 / 1;
  }

  /* stack quantity above the button so neither gets squeezed */
  .ogs-modal .ogs-qv__form form.cart,
  .ogs-modal .ogs-qv__form .woocommerce-variation-add-to-cart {
    flex-wrap: wrap;
  }

  .ogs-modal .ogs-qv__form .quantity {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  /* stretched full width, the field takes the slack between the buttons */
  .ogs-modal .ogs-qv__form .quantity input.qty {
    flex: 1 1 auto;
    width: auto;
  }

  .ogs-swatches {
    gap: 6px;
  }
}

/* ---------- very small phones ---------- */

@media all and (max-width: 400px) {
  ul.products {
    --ogs-gap: 12px 10px;
  }

  .ogs-card__body {
    gap: 6px;
    padding: 10px;
  }

  ul.products li.product h2.ogs-card__title,
  .woocommerce ul.products li.product h2.ogs-card__title {
    font-size: 13px;
  }

  ul.products li.product .ogs-card__price {
    font-size: 13px;
  }

  .ogs-btn {
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .ogs-toolbar__count {
    font-size: 10px;
  }

  .ogs-swatch.has-image {
    width: 64px;
    height: 64px;
  }

  .ogs-swatch__img {
    width: 50px;
    height: 50px;
  }
}

/* ---------- landscape phones: little vertical room ---------- */

@media all and (max-height: 520px) and (orientation: landscape) {
  .ogs-modal {
    padding: 0;
  }

  .ogs-modal__dialog {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }

  /* side by side again — vertical space is the scarce axis here, not width */
  .ogs-qv {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .ogs-qv__stage {
    aspect-ratio: auto;
    height: 100%;
    max-height: 100dvh;
  }

  .ogs-qv__details {
    padding: 18px 20px;
  }

  .ogs-qv__title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .ogs-qv__excerpt {
    display: none;
  }

  .ogs-qv__thumbs {
    display: none;
  }
}

/* ---------- touch devices ----------
   Keyed to pointer capability rather than width: a touchscreen laptop is wide
   but still has no hover, and a small window on a desktop still does. */

@media (hover: none) {
  /* the quick view button can never be revealed by hovering */
  .ogs-card__quickview {
    opacity: 1;
    transform: none;
  }

  /* hover swap is unreachable, so show the primary image and skip the zoom */
  .ogs-card--has-hover:hover .ogs-card__img--main {
    opacity: 1;
  }

  .ogs-card--has-hover:hover .ogs-card__img--hover {
    opacity: 0;
  }

  .ogs-card:not(.ogs-card--has-hover):hover .ogs-card__img--main {
    transform: none;
  }
}

@media (pointer: coarse) {
  /* 44px is the smallest comfortable tap target */
  .ogs-card__quickview {
    min-height: 44px;
    min-width: 44px;
  }

  .ogs-btn {
    min-height: 44px;
  }

  .ogs-option {
    min-height: 36px;
  }

  .ogs-layout-btn {
    width: 44px;
    height: 44px;
  }

  .ogs-qty__btn {
    min-width: 46px;
  }

  .ogs-modal__close {
    width: 46px;
    height: 46px;
  }

  /*
   * Safari zooms the page when a focused field is under 16px. Every control a
   * shopper can type into has to clear that bar, or opening the quantity field
   * throws the whole layout off.
   */
  .ogs-modal .ogs-qv__form select,
  .ogs-modal .ogs-qv__form .quantity input.qty,
  .ogs-modal .ogs-qv__form input[type="text"],
  .ogs-modal .ogs-qv__form input[type="number"] {
    font-size: 16px;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ogs-card *,
  .ogs-modal *,
  .ogs-skeleton__media,
  .ogs-skeleton__line {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ogs-card:not(.ogs-card--has-hover):hover .ogs-card__img--main {
    transform: none;
  }
}