/*
 * Store styling.
 *
 * WooCommerce ships its own stylesheet and the theme brings the GroundGO
 * design. This only bridges the two: WooCommerce's buttons and notices adopt
 * the theme's tokens so a customer does not cross a visible seam between the
 * product page and the rest of the site.
 */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  border: 0;
  border-radius: 8px;
  background: var(--yellow, #ffd523);
  color: #162016;
  padding: 16px 22px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
  background: var(--yellow, #ffd523);
  filter: brightness(1.02);
  transform: translateY(-2px);
}

/*
 * A disabled button must read as disabled.
 *
 * WooCommerce's own `.button.alt.disabled` rules are more specific than the
 * pair above, so an add-to-cart button waiting on a variation rendered in
 * WooCommerce's purple — the one colour that appears nowhere else on this site.
 */
.woocommerce #respond input#submit.alt.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce a.button.alt:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce input.button.alt:disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce a.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce input.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover {
  background: #e7e9e6;
  color: #5c665c;
  box-shadow: none;
  transform: none;
  filter: none;
  cursor: not-allowed;
}

.woocommerce div.product .price,
.woocommerce ul.products li.product .price {
  color: var(--green, #123e2b);
  font-weight: 800;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  border-top-color: var(--green, #123e2b);
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--green, #123e2b);
}

.woocommerce .woocommerce-error {
  border-top-color: #b3261e;
}

/*
 * Store pages sit inside the theme's shell so they line up with every other page
 * rather than running edge to edge.
 *
 * Keyed to `#gg-main`, which is what this theme actually calls its main element.
 * The earlier `.site-main` here was WordPress's common convention and matched
 * nothing, so the cart and checkout rendered full-bleed while every other page
 * was in the shell.
 */
.woocommerce-page #gg-main > .woocommerce,
.woocommerce-page #gg-main > .woocommerce-notices-wrapper,
.woocommerce-page #gg-main > .gg-checkout-steps,
.woocommerce-page #gg-main > .gg-checkout-assurances {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.woocommerce-page #gg-main {
  padding: 40px 0 90px;
}

/* The focus ring is non-negotiable — Section 5 keeps it at 3px solid yellow. */
.woocommerce :is(input, select, textarea, button, a.button):focus-visible {
  outline: 3px solid var(--yellow, #ffd523);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Product videos

   The theme already carries the rail's design. These rules only bridge two
   differences: the play control is a link here rather than a button, because
   with no script it has somewhere real to go; and the vendored
   `.video-review-poster span` rule would otherwise pin the play glyph and its
   screen-reader label to the bottom-right corner along with the badge.
   ------------------------------------------------------------------------ */

.video-review-poster .video-play {
  display: grid;
  place-items: center;
  line-height: 1;
  text-decoration: none;
}

.video-review-poster .video-play span {
  position: static;
  right: auto;
  bottom: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: normal;
}

.video-review-poster .video-play .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.video-review-poster.playing .video-play,
.video-review-poster.playing .video-review-badge { display: none; }

.video-review-rail:focus-visible { outline: 3px solid var(--yellow, #ffd523); outline-offset: 4px; }

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

.groundgo-product .product-section { padding: 46px 0 70px; }

.product-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #657168);
}

.product-breadcrumb a:hover { color: var(--green, #123e2b); }

.product-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

/*
 * One gallery per model. Both are in the HTML; the script shows the selected
 * one. With no script every set stays visible under its own heading — longer,
 * but nothing is hidden and nothing is mislabelled.
 */
.product-gallery-set + .product-gallery-set { margin-top: 34px; }
.gg-woo-enhanced .product-gallery-set { display: none; }
.gg-woo-enhanced .product-gallery-set.active { display: block; }
.gg-woo-enhanced .product-gallery-set + .product-gallery-set { margin-top: 0; }

.product-gallery-label {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #657168);
}

/* Once the tiles say which model is selected, the heading is duplication for a
   sighted visitor — but a screen-reader user still needs it to know which
   machine these frames belong to, so it is hidden visually, not removed. */
.gg-woo-enhanced .product-gallery-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.product-gallery-main img { width: 100%; height: auto; border-radius: 16px; aspect-ratio: 1 / 1; object-fit: cover; background: #f4f7f5; }

.product-gallery-thumb.active img { outline: 2px solid var(--green, #123e2b); outline-offset: 2px; }
.product-gallery-thumb:hover img { opacity: 0.86; }

.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.product-gallery-thumb { position: relative; display: block; }
.product-gallery-thumb img { width: 100%; height: auto; border-radius: 8px; }
.product-gallery-thumb b {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* No photography yet. Said plainly rather than mimed with ten empty tiles. */
.product-gallery-pending {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 380px;
  padding: 40px 28px;
  text-align: center;
  border: 1px dashed var(--line, #dbe2dc);
  border-radius: 16px;
  background: #f7faf8;
}

.product-gallery-pending b { font-size: 11px; letter-spacing: 0.12em; color: var(--green, #123e2b); }
.product-gallery-pending span { max-width: 340px; font-size: 13px; line-height: 1.7; color: var(--muted, #657168); }

.product-buy .product_title { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.045em; margin: 0 0 6px; }
.product-range { display: block; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; color: var(--muted, #657168); }
.product-price { margin: 16px 0 14px; font-size: 26px; font-weight: 800; color: var(--green, #123e2b); }
.product-summary { font-size: 14px; line-height: 1.75; color: var(--muted, #657168); }
.product-origin { margin-top: 14px; font-size: 11px; line-height: 1.7; color: var(--muted, #657168); }

.product-variant-select { margin: 24px 0 18px; padding: 0; border: 0; }
.product-variant-select legend { padding: 0; margin-bottom: 10px; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; }
.product-variant-select label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  margin-bottom: 9px;
  border: 1px solid var(--line, #dbe2dc);
  border-radius: 11px;
  cursor: pointer;
  background: #fff;
}
.product-variant-select label.selected { border: 2px solid var(--green-2, #1f6b43); background: #f1f8f4; }
.product-variant-select label b { display: block; font-size: 14px; }
.product-variant-select label small { display: block; font-size: 11px; color: var(--muted, #657168); }
.product-variant-select label strong { font-size: 15px; color: var(--green, #123e2b); }
.product-variant-select p { margin: 8px 0 0; font-size: 11px; color: var(--muted, #657168); }

/* The radios are the fallback control, so they only disappear once the script
   has confirmed it can drive WooCommerce's select instead. */
.gg-woo-enhanced .product-variant-select input[type="radio"] { position: absolute; left: -9999px; }
.gg-woo-enhanced .variations { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* With the script running the headline price follows the chosen model, so
   WooCommerce's own variation price would be the same figure twice. Without the
   script it is the only place the chosen model's price appears, so it stays. */
.gg-woo-enhanced .woocommerce-variation-price { display: none; }

.engine-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid #d7e5dc;
  border-radius: 12px;
  background: #f1f7f3;
}
.engine-card > small { grid-column: 1 / -1; font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: var(--green, #123e2b); }
.engine-card span { display: block; font-size: 9px; font-weight: 900; letter-spacing: 0.12em; color: var(--muted, #657168); }
.engine-card b { display: block; font-size: 20px; letter-spacing: -0.03em; }
.engine-card em { display: block; font-style: normal; font-size: 11px; color: var(--muted, #657168); }
.engine-cooling { font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-align: right; }

.product-assurances { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.product-assurances li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; font-size: 12px; }
.product-assurances .colour-icon { width: 26px; height: 26px; }

/* Feature story and grid ---------------------------------------------------*/

.m1-story-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; margin-top: 56px; }
.m1-story-row.reversed { direction: rtl; }
.m1-story-row.reversed > * { direction: ltr; }
.m1-story-visual {
  display: grid;
  place-items: center;
  min-height: 300px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 50%, #fff 0 33%, #d3e1d6 34% 64%, #bdd1c1 65%);
}
.m1-story-visual .colour-icon { width: 84px; height: 84px; }

/*
 * With a real photograph the decorative gradient is just a border around it.
 * `display: block` matters: the base rule centres its icon with `place-items`,
 * which would leave the photograph floating at its own size inside the panel
 * instead of filling it.
 */
.m1-story-visual.has-photo { display: block; background: #f4f7f5; overflow: hidden; padding: 0; }
.m1-story-visual.has-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.m1-story-copy h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.04em; margin: 0 0 12px; }
.m1-story-copy p { font-size: 14px; line-height: 1.8; color: var(--muted, #657168); }
.m1-story-copy ul { padding: 0; margin: 18px 0 0; list-style: none; display: grid; gap: 8px; font-size: 13px; }
.m1-story-copy li::before { content: "✓"; color: var(--green-2, #1f6b43); margin-right: 8px; font-weight: 900; }

.m1-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.m1-feature-grid article { padding: 26px; border: 1px solid var(--line, #dbe2dc); border-radius: 14px; background: #fff; }
.feature-index { font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: var(--green-2, #1f6b43); }
.m1-feature-grid h3 { font-size: 17px; margin: 12px 0 8px; letter-spacing: -0.02em; }
.m1-feature-grid p { font-size: 13px; line-height: 1.7; color: var(--muted, #657168); margin: 0; }

/* Detail panels ------------------------------------------------------------*/

.product-detail-panels details { border-top: 1px solid var(--line, #dbe2dc); padding: 20px 0; }
.product-detail-panels details:last-child { border-bottom: 1px solid var(--line, #dbe2dc); }
.product-detail-panels summary { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; }
.product-detail-panels summary::-webkit-details-marker { display: none; }
.product-detail-panels details[open] summary span { transform: rotate(45deg); }
.product-detail-panels summary span { color: var(--green, #123e2b); font-size: 20px; transition: 0.2s; }
.detail-body { padding-top: 16px; }
.detail-body h3 { font-size: 14px; margin: 22px 0 10px; letter-spacing: -0.01em; }
.detail-body h3:first-child { margin-top: 0; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line, #dbe2dc); vertical-align: top; }
.spec-table th { width: 45%; font-weight: 700; color: var(--muted, #657168); }

.detail-list { margin: 0; display: grid; gap: 4px; }
.detail-list dt { font-size: 13px; font-weight: 800; margin-top: 12px; }
.detail-list dd { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted, #657168); }

.included-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.included-list li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; font-size: 13px; }
.included-list b { color: var(--green-2, #1f6b43); font-size: 11px; }

.detail-warning { padding: 14px 16px; border-left: 4px solid #d8a800; background: #fffaf0; font-size: 13px; line-height: 1.7; }
.detail-source { margin-top: 14px; font-size: 11px; color: var(--muted, #657168); }
.detail-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; font-size: 11px; font-weight: 900; }
.detail-links a { color: var(--green, #123e2b); }

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

.gg-cart-layout { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 44px; align-items: start; }
.gg-cart-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line, #dbe2dc); }
.gg-cart-thumb img { width: 100%; height: auto; border-radius: 10px; }
.gg-cart-detail h2 { font-size: 17px; margin: 0 0 6px; }
.gg-cart-controls { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
/* WooCommerce's own `.woocommerce a.remove` is a 1.5em red glyph and outranks a
   two-class selector, so "Remove item" rendered larger than the product name. */
.woocommerce .gg-cart-controls a.remove,
.gg-cart-controls .remove {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--muted, #657168);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  text-decoration: underline;
}

.woocommerce .gg-cart-controls a.remove:hover {
  background: none;
  color: #b3261e;
}

.gg-cart-controls .quantity input.qty {
  width: 72px;
  padding: 10px;
  border: 1px solid var(--line, #dbe2dc);
  border-radius: 8px;
  text-align: center;
}
.gg-cart-price { font-size: 16px; font-weight: 800; white-space: nowrap; }
.gg-cart-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 22px 0; }
.gg-cart-actions .coupon { display: flex; gap: 8px; }
.gg-cart-actions input { border: 1px solid var(--line, #dbe2dc); border-radius: 8px; padding: 12px; }
.gg-cart-continue { margin: 18px 0; font-size: 11px; font-weight: 900; }
.gg-empty-cart { text-align: center; padding: 60px 20px; }
.gg-empty-cart .button-row { justify-content: center; margin-top: 20px; }

.gg-summary-card { position: sticky; top: 100px; }
.gg-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 13px; border-bottom: 1px solid var(--line, #dbe2dc); }
.gg-summary-total { font-size: 16px; font-weight: 800; border-bottom: 0; }
.gg-summary-note { margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--muted, #657168); }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .button { width: 100%; }

/* Checkout -----------------------------------------------------------------*/

.gg-checkout-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 26px; padding: 0; margin: 0 0 34px; }
.gg-checkout-steps li { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; color: var(--muted, #657168); }
.gg-checkout-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef3ef; font-size: 11px; }
.gg-checkout-steps .done { color: var(--green, #123e2b); }
.gg-checkout-steps .done b { background: var(--green, #123e2b); color: #fff; }

.gg-rural-field { margin-top: 10px; }
.gg-checkout-assurances { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; padding: 24px 0 0; margin: 30px 0 0; border-top: 1px solid var(--line, #dbe2dc); font-size: 11px; font-weight: 700; color: var(--muted, #657168); }

@media (max-width: 980px) {
  .product-layout,
  .gg-cart-layout,
  .m1-story-row { grid-template-columns: 1fr; gap: 30px; }
  .m1-story-row.reversed { direction: ltr; }
  .m1-feature-grid { grid-template-columns: 1fr; }
  .gg-summary-card { position: static; }
  .gg-cart-item { grid-template-columns: 80px 1fr; }
  .gg-cart-price { grid-column: 2; }
}