/* ==========================================================================
   Mr Green shop
   Scoped to /shop/. Deliberately a separate stylesheet: Netlify serves
   /assets/css/* with a 7 day cache and no revalidation while HTML stays fresh,
   so editing style.css for shop layout would break returning visitors until the
   cache expired. New file, new URL, no stale-cache risk. Bump ?v= on changes.
   ========================================================================== */

.shop {
  padding: 3rem 0 4rem;
}

/* ---------- product ---------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}

.product__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--clr-bg-alt);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product__buy h2 {
  margin-bottom: 0.75rem;
}

.product__desc {
  color: var(--clr-text-secondary);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.product__from {
  font-family: var(--font-header);
  font-size: 1.5rem;
  color: var(--clr-primary-dark);
  margin-bottom: 1.5rem;
}

/* Visually hidden but still read by screen readers. style.css has no .sr-only,
   so it is defined here rather than editing the cached global stylesheet. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- pack selector ---------- */

/* .packs sits on a <fieldset>, which ships with a browser default border,
   padding and min-width that would otherwise break the grid. */
.packs {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pack {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 2px solid rgba(15, 59, 46, 0.12);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  background: var(--clr-white);
}

.pack:hover {
  border-color: var(--clr-accent-vibrant);
}

.pack input {
  accent-color: var(--clr-accent-vibrant);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.pack--selected {
  border-color: var(--clr-accent-vibrant);
  background: rgba(88, 192, 70, 0.06);
}

.pack__label {
  flex: 1;
  min-width: 0;
}

.pack__name {
  font-weight: 600;
  color: var(--clr-primary-dark);
  display: block;
}

.pack__per {
  font-size: 0.85rem;
  color: var(--clr-text-secondary);
}

/* Coverage estimate under each pack. Green so it reads as guidance rather
   than a second price line. */
.pack__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #246115;
}

/* Sets the 500 sq ft basis once, so each pack line does not have to repeat it. */
.packs__guide {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--clr-text-secondary);
  margin: 0 0 1rem;
}

.pack__price {
  font-family: var(--font-header);
  font-size: 1.2rem;
  color: var(--clr-primary-dark);
  white-space: nowrap;
}

.pack__tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--clr-accent-gold);
  color: var(--clr-primary-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- quantity + add ---------- */

.qty-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid rgba(15, 59, 46, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qty button {
  width: 42px;
  height: 44px;
  border: 0;
  background: var(--clr-bg-alt);
  color: var(--clr-primary-dark);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

.qty button:hover {
  background: rgba(88, 192, 70, 0.15);
}

.qty input {
  width: 56px;
  height: 44px;
  border: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-primary-dark);
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- safety ---------- */

.safety {
  margin-top: 1.75rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--clr-accent-gold);
  background: var(--clr-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.safety h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary-dark);
  margin-bottom: 0.4rem;
}

.safety p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--clr-text-secondary);
  margin: 0;
}

/* ---------- cart + checkout ---------- */

.checkout {
  max-width: 780px;
  margin: 0 auto;
  background: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.25rem;
}

.checkout[hidden] {
  display: none;
}

.checkout h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.cart-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.cart-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(15, 59, 46, 0.08);
}

.cart-line__name {
  flex: 1;
  min-width: 0;
  color: var(--clr-primary-dark);
  font-weight: 500;
}

.cart-line__meta {
  display: block;
  font-size: 0.8rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}

.cart-line__price {
  font-weight: 600;
  color: var(--clr-primary-dark);
  white-space: nowrap;
}

.cart-line__remove {
  border: 0;
  background: none;
  color: var(--clr-text-secondary);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 0.25rem;
}

.cart-line__remove:hover {
  color: #b3261e;
}

.totals {
  margin: 1.25rem 0;
}

.totals__row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  color: var(--clr-text-secondary);
  font-size: 0.95rem;
}

.totals__row--grand {
  border-top: 2px solid rgba(15, 59, 46, 0.12);
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  font-family: var(--font-header);
  font-size: 1.25rem;
  color: var(--clr-primary-dark);
}

/* ---------- form ---------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-primary-dark);
  margin-bottom: 0.35rem;
}

.field input,
.field select {
  padding: 0.7rem 0.85rem;
  border: 2px solid rgba(15, 59, 46, 0.12);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--clr-text-main);
  background: var(--clr-white);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--clr-accent-vibrant);
}

/* ---------- shipping options ---------- */

.ship-options {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.ship-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 2px solid rgba(15, 59, 46, 0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ship-option--selected {
  border-color: var(--clr-accent-vibrant);
  background: rgba(88, 192, 70, 0.06);
}

.ship-option input {
  accent-color: var(--clr-accent-vibrant);
  width: 18px;
  height: 18px;
}

.ship-option__label {
  flex: 1;
  color: var(--clr-primary-dark);
  font-weight: 500;
}

.ship-option__eta {
  display: block;
  font-size: 0.8rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}

.ship-option__price {
  font-weight: 600;
  color: var(--clr-primary-dark);
}

/* ---------- messages ---------- */

.shop-msg {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.shop-msg--error {
  background: #fdecea;
  color: #8c1d18;
  border-left: 3px solid #b3261e;
}

.shop-msg--info {
  background: var(--clr-bg-alt);
  color: var(--clr-text-secondary);
  border-left: 3px solid var(--clr-accent-vibrant);
}

.shop-msg[hidden] {
  display: none;
}

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

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

.empty-cart {
  text-align: center;
  color: var(--clr-text-secondary);
  padding: 1.5rem 0;
}

/* ---------- thanks ---------- */

.thanks {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 0;
}

.thanks__ref {
  display: inline-block;
  margin: 1.25rem 0;
  padding: 0.6rem 1.25rem;
  background: var(--clr-bg-alt);
  border-radius: var(--radius-sm);
  font-family: var(--font-header);
  font-size: 1.1rem;
  color: var(--clr-primary-dark);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 600px) {
  .checkout {
    padding: 1.5rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .pack {
    padding: 0.85rem 1rem;
  }
}

/* Single shipping method, so the row states a cost rather than offering a
   choice. No radio, no hover affordance. (2026-08-17) */
.ship-option--only {
  cursor: default;
  border-color: rgba(15, 59, 46, 0.12);
  background: var(--clr-bg-alt);
}

/* ---------- product gallery ---------- */

.thumbs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0;
  margin: 0.75rem 0 0;
}

.thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid rgba(15, 59, 46, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.18s ease;
}

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

.thumb:hover,
.thumb:focus-visible {
  border-color: var(--clr-accent-vibrant);
  outline: none;
}

.thumb--active {
  border-color: var(--clr-accent-vibrant);
}

/* ---------- shop page header ---------- */

/* The interior page header ships as a flat slab of --clr-primary-dark; no page
   on the site uses the background-image support that .page-header-bg already
   has. Putting James's own turf behind it ties the header to the product shots
   below. The image is blurred and sits under the existing dark gradient, so it
   reads as texture rather than competing with the headline. (2026-08-20) */
.page-header--shop .page-header-bg {
  background-image: url("../images/shop-header-turf-1000.webp");
}

@media (min-width: 1001px) {
  .page-header--shop .page-header-bg {
    background-image: url("../images/shop-header-turf-2000.webp");
  }
}

.page-header__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-accent-gold-light);
  margin: 0 0 0.6rem;
}