/* ========================================
   SHOP.CSS - Shop, product, cart, checkout and order-placed pages
   Source Grid Agricultural Platform

   Scoped to #sg-shop so nothing leaks into the header, footer or other pages,
   and prefixed shop- so it cannot meet Bootstrap's .btn/.card/.container.
   Colours: existing olive palette only (theme.css / global.css / local-sourcing.css).
   ======================================== */

#sg-shop {
  background: linear-gradient(180deg, #faf9f1 0%, #FFFFFF 420px);
  padding-bottom: 4rem;
  color: #1f2412;
}

#sg-shop .shop-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Hero ---------- */
#sg-shop .shop-hero {
  padding: 3rem 0 1.75rem;
}

#sg-shop .shop-hero .eyebrow {
  margin-bottom: 0.5rem;
}

#sg-shop .shop-hero .section-title {
  margin-bottom: 0.75rem;
}

#sg-shop .shop-hero .lead {
  max-width: 720px;
}

/* The listing page ends with a .cta-band, which brings its own 4rem of padding. */
#sg-shop.shop-index {
  padding-bottom: 2.5rem;
}

#sg-shop .shop-hero--compact {
  padding: 2.25rem 0 1.25rem;
}

/* ---------- Breadcrumb ---------- */
#sg-shop .shop-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 1.5rem 0 0;
  margin: 0;
  list-style: none;
  font-size: 0.88rem;
  color: #5b6051;
}

#sg-shop .shop-breadcrumb li + li::before {
  content: '/';
  margin-right: 0.35rem;
  color: #e3e5db;
}

#sg-shop .shop-breadcrumb a {
  color: #636B2F;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
#sg-shop .shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#sg-shop .shop-btn--primary {
  background: #636B2F;
  border-color: #636B2F;
  color: #FFFFFF;
}

#sg-shop .shop-btn--primary:hover,
#sg-shop .shop-btn--primary:focus-visible {
  background: #7a8439;
  border-color: #7a8439;
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(99, 107, 47, 0.28);
  outline: none;
}

#sg-shop .shop-btn--ghost {
  background: transparent;
  border-color: #636B2F;
  color: #636B2F;
}

#sg-shop .shop-btn--ghost:hover,
#sg-shop .shop-btn--ghost:focus-visible {
  background: rgba(99, 107, 47, 0.1);
  color: #636B2F;
  outline: none;
}

#sg-shop .shop-btn--block {
  width: 100%;
}

#sg-shop .shop-btn--lg {
  min-height: 52px;
  font-size: 1.02rem;
}

#sg-shop .shop-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

#sg-shop .shop-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #636B2F;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Filter bar (search, categories, sort) ----------
   One grid holds all three controls. Both wrapper elements are display:contents,
   so search / category toggle / category list / sort are direct grid items and
   the whole bar re-flows per breakpoint by changing grid placement alone.

   Desktop:  [ search ............... ] [ sort ]
             [ category rail ................. ]
   Phone:    [ search ....................... ]
             [ category ▾ ] [ sort ▾ ]
             [ category list (when open) .... ]                                  */
#sg-shop .shop-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  background: #FFFFFF;
  border: 1px solid #e3e5db;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 18, 0.06), 0 1px 3px rgba(31, 36, 18, 0.1);
}

#sg-shop .shop-filters__controls {
  display: contents;
}

/* ---------- Search: one pill, magnifier inside ----------
   The magnifier IS the submit button and the input is borderless, so the two
   read as a single control. The focus ring is drawn by the pill via
   :focus-within — the same construction as the header search on phones.        */
#sg-shop .shop-search {
  display: flex;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  border: 1px solid #e3e5db;
  border-radius: 999px;
  background: #FFFFFF;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#sg-shop .shop-search:focus-within {
  border-color: #636B2F;
  box-shadow: 0 0 0 3px rgba(99, 107, 47, 0.1);
}

#sg-shop .shop-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #5b6051;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.25s ease;
}

#sg-shop .shop-search__submit:hover,
#sg-shop .shop-search__submit:focus-visible {
  color: #636B2F;
  outline: none;
}

#sg-shop .shop-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 1rem 0 0.15rem;
  border: none;
  background: transparent;
  color: #1f2412;
  font-size: 0.95rem;
}

#sg-shop .shop-search__input:focus {
  outline: none;
}

#sg-shop .shop-search__input::placeholder {
  color: #808080;
}

/* NOTE: .shop-input / .shop-select below are shared with the CHECKOUT page.
   Do not restyle them here — the sort pill overrides them under .shop-sort.     */
#sg-shop .shop-input,
#sg-shop .shop-select {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #FFFFFF;
  color: #1f2412;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#sg-shop .shop-input:focus,
#sg-shop .shop-select:focus {
  outline: none;
  border-color: #636B2F;
  box-shadow: 0 0 0 3px rgba(99, 107, 47, 0.1);
}

/* ---------- Pill, shared by the category toggle and the sort control ---------- */
#sg-shop .shop-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid #e3e5db;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1f2412;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

#sg-shop .shop-pill:hover {
  border-color: #636B2F;
  color: #636B2F;
}

#sg-shop .shop-pill:focus-within,
#sg-shop .shop-pill:focus-visible {
  border-color: #636B2F;
  box-shadow: 0 0 0 3px rgba(99, 107, 47, 0.1);
  outline: none;
}

#sg-shop .shop-pill > i {
  color: #5b6051;
  font-size: 0.85rem;
}

/* min-width:0 lets the ellipsis actually engage — without it the flex item
   refuses to shrink below its text and blows the grid column out. */
#sg-shop .shop-pill__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sg-shop .shop-pill__chevron {
  margin-left: auto;
  transition: transform 0.25s ease;
}

#sg-shop .shop-filter.is-open .shop-pill__chevron {
  transform: rotate(180deg);
}

/* ---------- Sort: a native select wearing the pill ----------
   The select fills the whole pill and the two icons float over it with
   pointer-events:none, so every pixel of the pill opens the native picker.     */
#sg-shop .shop-sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  grid-column: 2;
  grid-row: 1;
}

#sg-shop .shop-sort__label {
  margin: 0;
  font-size: 0.88rem;
  color: #5b6051;
  white-space: nowrap;
}

#sg-shop .shop-sort__control {
  padding: 0;
  gap: 0;
}

#sg-shop .shop-sort__control > i {
  position: absolute;
  pointer-events: none;
}

#sg-shop .shop-sort__control > i:first-child {
  left: 0.95rem;
}

#sg-shop .shop-sort__control .shop-pill__chevron {
  right: 0.95rem;
  margin-left: 0;
}

#sg-shop .shop-sort .shop-select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 2.3rem 0 2.4rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #1f2412;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* The pill draws the focus ring, so the select must not draw its own */
#sg-shop .shop-sort .shop-select:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

/* ---------- Categories: rail on desktop, stacked list on phones ----------
   Same markup both ways. The toggle only exists below 768px; above it the list
   is the rail. Category links never carry the search term, so a search can
   never leave the shopper stuck inside it.                                      */
#sg-shop .shop-filter {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}

#sg-shop .shop-filter__toggle {
  display: none;
}

#sg-shop .shop-filter__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.95rem;
  margin: 0;
  padding: 0.35rem 0 0;
  list-style: none;
  border-top: 1px solid #eef0ea;
}

#sg-shop .shop-cat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.55rem 0;
  border-bottom: 2px solid transparent;
  color: #5b6051;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

#sg-shop .shop-cat:hover,
#sg-shop .shop-cat:focus-visible {
  color: #636B2F;
  border-bottom-color: #e3e5db;
  outline: none;
}

#sg-shop .shop-cat.is-active {
  color: #1f2412;
  border-bottom-color: #636B2F;
}

/* There are 15 categories. Their names alone nearly fill the rail, so the counts
   are kept for the phone list — where they aid scanning and there is room — and
   dropped from the rail, which buys it a single line instead of two. */
#sg-shop .shop-cat__count {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: #808080;
}

#sg-shop .shop-cat.is-active .shop-cat__count {
  color: #636B2F;
}

/* ---------- Results count + clear search, one row ---------- */
#sg-shop .shop-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

#sg-shop .shop-results-meta {
  margin: 0;
  font-size: 0.9rem;
  color: #5b6051;
}

/* Shown only while a search term is applied */
#sg-shop .shop-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border: 1px solid #636B2F;
  border-radius: 999px;
  background: #eef0e1;
  color: #636B2F;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

#sg-shop .shop-clear:hover,
#sg-shop .shop-clear:focus-visible {
  background: #636B2F;
  color: #FFFFFF;
  outline: none;
}

#sg-shop .shop-clear span {
  font-size: 1.05rem;
  line-height: 1;
}

/* ---------- Product grid + card ---------- */
#sg-shop .shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

#sg-shop .shop-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #e3e5db;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(31, 36, 18, 0.06), 0 1px 3px rgba(31, 36, 18, 0.1);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#sg-shop .shop-card:hover {
  box-shadow: 0 10px 24px rgba(31, 36, 18, 0.09);
  transform: translateY(-2px);
}

#sg-shop .shop-card__media {
  display: block;
  background: #eef0ea;
}

#sg-shop .shop-card__media .skeleton-image-wrapper {
  display: block;
  width: 100%;
  height: 210px;
  border-radius: 0;
}

#sg-shop .shop-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem 1rem 1.1rem;
}

#sg-shop .shop-card__category {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #636B2F;
}

#sg-shop .shop-card__title {
  margin: 0.3rem 0 0.35rem;
  font-family: var(--tg-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2412;
  overflow-wrap: anywhere;
}

#sg-shop .shop-card__title a {
  color: inherit;
  text-decoration: none;
}

#sg-shop .shop-card__title a:hover,
#sg-shop .shop-card__title a:focus-visible {
  color: #636B2F;
}

#sg-shop .shop-card__desc {
  margin: 0 0 0.9rem;
  font-size: 0.87rem;
  line-height: 1.5;
  color: #5b6051;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#sg-shop .shop-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

#sg-shop .shop-price {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #636B2F;
}

#sg-shop .shop-price__unit {
  font-size: 0.82rem;
  font-weight: 500;
  color: #5b6051;
}

#sg-shop .shop-price--request {
  font-size: 0.98rem;
  font-weight: 600;
  color: #5b6051;
}

/* ---------- Show More / Show Less row reveal ----------
   Same behaviour as the products and catalogue pages: row 1 is visible, later
   rows are revealed one click at a time. The card is a flex column, so the
   revealed state restores `flex` (products.css uses `block` for its own cards). */
#sg-shop .shop-card.hidden-product {
  display: none;
}

#sg-shop .shop-card.show-product {
  display: flex;
  animation: shopFadeInUp 0.5s ease-out;
}

@keyframes shopFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

#sg-shop .shop-reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* .shop-btn sets display:inline-flex, which would defeat the hidden attribute */
#sg-shop .shop-reveal .shop-btn[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #sg-shop .shop-card.show-product {
    animation: none;
  }
}

/* ---------- Empty state ---------- */
#sg-shop .shop-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: #FFFFFF;
  border: 1px dashed #e3e5db;
  border-radius: 16px;
  color: #5b6051;
}

#sg-shop .shop-empty .fa {
  font-size: 2.5rem;
  color: #636B2F;
  margin-bottom: 0.75rem;
}

#sg-shop .shop-empty h2 {
  font-family: var(--tg-font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: #1f2412;
  margin: 0 0 0.5rem;
}

#sg-shop .shop-empty p {
  margin: 0 0 1.25rem;
}

/* ---------- Pagination ---------- */
#sg-shop .shop-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

#sg-shop .shop-pagination a,
#sg-shop .shop-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 0.75rem;
  border-radius: 10px;
  border: 1px solid #e3e5db;
  background: #FFFFFF;
  color: #1f2412;
  font-weight: 600;
  text-decoration: none;
}

#sg-shop .shop-pagination a:hover,
#sg-shop .shop-pagination a:focus-visible {
  border-color: #636B2F;
  color: #636B2F;
  outline: none;
}

#sg-shop .shop-pagination .is-current {
  background: #636B2F;
  border-color: #636B2F;
  color: #FFFFFF;
}

#sg-shop .shop-pagination .is-disabled {
  color: #e3e5db;
}

/* ---------- Product page ---------- */
#sg-shop .shop-product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding: 1.5rem 0 2.5rem;
}

/* .shop-gallery__main is the skeleton WRAPPER; skeleton.css sizes the <img>
   inside it (width/height 100%, object-fit: cover). */
#sg-shop .shop-gallery__main {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: #eef0ea;
  display: block;
}

#sg-shop .shop-gallery__thumb .skeleton-image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

#sg-shop .shop-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

#sg-shop .shop-gallery__thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #eef0ea;
  cursor: pointer;
}

#sg-shop .shop-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#sg-shop .shop-gallery__thumb.is-active,
#sg-shop .shop-gallery__thumb:hover,
#sg-shop .shop-gallery__thumb:focus-visible {
  border-color: #636B2F;
  outline: none;
}

#sg-shop .shop-product__title {
  margin: 0.35rem 0 0.75rem;
  font-family: var(--tg-font-body);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: #1f2412;
  overflow-wrap: anywhere;
}

#sg-shop .shop-product .shop-price {
  font-size: 1.6rem;
}

#sg-shop .shop-product__desc {
  margin: 1rem 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: #5b6051;
}

#sg-shop .shop-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  background: #faf9f1;
  border: 1px solid #e3e5db;
  border-radius: 16px;
}

#sg-shop .shop-buy__qty label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5b6051;
}

#sg-shop .shop-qty {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}

#sg-shop .shop-qty button {
  width: 44px;
  border: none;
  background: #FFFFFF;
  color: #1f2412;
  font-size: 1.15rem;
  cursor: pointer;
}

#sg-shop .shop-qty button:hover,
#sg-shop .shop-qty button:focus-visible {
  background: rgba(99, 107, 47, 0.1);
  color: #636B2F;
  outline: none;
}

#sg-shop .shop-qty input {
  width: 72px;
  min-height: 44px;
  border: none;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  text-align: center;
  font-weight: 600;
  color: #1f2412;
  -moz-appearance: textfield;
}

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

#sg-shop .shop-qty input:focus {
  outline: none;
  background: #faf9f1;
}

#sg-shop .shop-buy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 1 1 220px;
}

#sg-shop .shop-buy__actions .shop-btn {
  flex: 1 1 auto;
}

/* Were inline styles until the phone layout needed different values */
#sg-shop .shop-product__profile {
  margin-top: 1rem;
}

#sg-shop .shop-buy .shop-help {
  margin: 0;
}

#sg-shop .shop-info-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

#sg-shop .shop-info-list li {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem 0;
  font-size: 0.92rem;
  color: #5b6051;
}

#sg-shop .shop-info-list .fa {
  width: 18px;
  margin-top: 0.2rem;
  color: #636B2F;
  text-align: center;
}

#sg-shop .shop-facts {
  padding: 1.1rem 1.25rem;
  background: #FFFFFF;
  border: 1px solid #e3e5db;
  border-radius: 16px;
}

#sg-shop .shop-facts h2,
#sg-shop .shop-section-title {
  margin: 0 0 0.75rem;
  font-family: var(--tg-font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2412;
}

#sg-shop .shop-facts ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #5b6051;
  font-size: 0.92rem;
  line-height: 1.6;
}

#sg-shop .shop-related {
  padding-top: 1rem;
}

/* ---------- Two-column page layout (cart, checkout) ---------- */
#sg-shop .shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.75rem;
  align-items: start;
}

#sg-shop .shop-panel {
  background: #FFFFFF;
  border: 1px solid #e3e5db;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31, 36, 18, 0.06), 0 1px 3px rgba(31, 36, 18, 0.1);
  padding: 1.5rem;
}

#sg-shop .shop-summary {
  position: sticky;
  top: 96px;
}

#sg-shop .shop-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  color: #5b6051;
}

#sg-shop .shop-summary__row strong {
  color: #1f2412;
  text-align: right;
}

#sg-shop .shop-summary__row--discount strong {
  color: #636B2F;
}

#sg-shop .shop-summary__row--total {
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e3e5db;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2412;
}

#sg-shop .shop-summary__row--total strong {
  font-size: 1.25rem;
  color: #636B2F;
}

#sg-shop .shop-summary__note {
  margin: 0.75rem 0 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #5b6051;
}

#sg-shop .shop-summary .shop-btn + .shop-btn {
  margin-top: 0.6rem;
}

/* ---------- Cart page lines ---------- */
/* Desktop: heading left, "Clear cart" right on the same line, list beneath.
   Phones move the action below the list — see the 768px block. */
#sg-shop .shop-panel--cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#sg-shop .shop-panel--cart .shop-cart-head {
  grid-column: 1;
  grid-row: 1;
}

#sg-shop .shop-panel--cart .shop-cart-lines {
  grid-column: 1 / -1;
  grid-row: 2;
}

#sg-shop .shop-panel--cart .shop-cart-foot {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

#sg-shop .shop-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

#sg-shop .shop-cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eef0ea;
}

#sg-shop .shop-cart-line:last-child {
  border-bottom: none;
}

/* This class is on the skeleton WRAPPER; skeleton.css sizes the <img> inside it. */
#sg-shop .shop-cart-line__image {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  background: #eef0ea;
}

/* min-width:0 lets a long product name shrink instead of widening the column */
#sg-shop .shop-cart-line__body {
  min-width: 0;
}

#sg-shop .shop-cart-line__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2412;
  overflow-wrap: anywhere;
}

#sg-shop .shop-cart-line__name a {
  color: inherit;
  text-decoration: none;
}

#sg-shop .shop-cart-line__name a:hover {
  color: #636B2F;
}

#sg-shop .shop-cart-line__price {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: #5b6051;
}

#sg-shop .shop-cart-line__remove {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

#sg-shop .shop-cart-line__total {
  min-width: 110px;
  margin: 0;
  text-align: right;
  font-weight: 800;
  color: #636B2F;
}

#sg-shop .shop-cart-line .shop-qty input {
  width: 64px;
}

/* ---------- Checkout form ---------- */
#sg-shop .shop-form-section + .shop-form-section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef0ea;
}

#sg-shop .shop-form-section h2 {
  margin: 0 0 1rem;
  font-family: var(--tg-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1f2412;
}

#sg-shop .shop-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

#sg-shop .shop-field {
  position: relative;
  margin-bottom: 1rem;
}

#sg-shop .shop-field label,
#sg-shop .shop-field .shop-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #333333;
}

#sg-shop .shop-field textarea.shop-input {
  min-height: 96px;
  resize: vertical;
}

#sg-shop .shop-help {
  margin: -0.2rem 0 0.6rem;
  font-size: 0.83rem;
  color: #5b6051;
}

#sg-shop .shop-field-error {
  margin: 0.3rem 0 0;
  font-size: 0.83rem;
  color: #c33;
}

#sg-shop .shop-input.has-error {
  border-color: #c33;
}

/* Phone picker (js/phone-input.js) - same squared corners as the booking and contact forms */
#sg-shop .phone-input-wrapper .country-selector {
  border-radius: 10px 0 0 10px;
  border: 2px solid #e0e0e0;
  border-right: none;
}

#sg-shop .phone-input-wrapper .phone-number-input {
  border-radius: 0 10px 10px 0 !important;
}

#sg-shop .shop-county {
  position: relative;
}

#sg-shop .shop-county__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid #e3e5db;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(31, 36, 18, 0.09);
}

#sg-shop .shop-county__list[hidden] {
  display: none;
}

#sg-shop .shop-county__option {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: none;
  background: #FFFFFF;
  color: #1f2412;
  text-align: left;
  font-size: 0.93rem;
  cursor: pointer;
}

#sg-shop .shop-county__option:hover,
#sg-shop .shop-county__option.is-active {
  background: rgba(99, 107, 47, 0.1);
  color: #636B2F;
}

#sg-shop .shop-county__empty {
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: #5b6051;
}

#sg-shop .shop-delivery-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

#sg-shop .shop-delivery-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

#sg-shop .shop-delivery-card:hover {
  border-color: #636B2F;
}

#sg-shop .shop-delivery-card.is-selected {
  border-color: #636B2F;
  background: rgba(99, 107, 47, 0.1);
}

#sg-shop .shop-delivery-card input {
  margin-top: 0.3rem;
  accent-color: #636B2F;
}

#sg-shop .shop-delivery-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #1f2412;
}

#sg-shop .shop-delivery-card__desc {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  color: #5b6051;
}

#sg-shop .shop-badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eef0e1;
  color: #636B2F;
}

#sg-shop .shop-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: #333333;
}

#sg-shop .shop-check input {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: #636B2F;
  flex: 0 0 auto;
}

#sg-shop .shop-check a {
  color: #636B2F;
  font-weight: 600;
}

#sg-shop .shop-alert {
  padding: 1rem 1.15rem;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}

#sg-shop .shop-alert[hidden] {
  display: none;
}

#sg-shop .shop-alert--error {
  background: #fee;
  color: #c33;
}

#sg-shop .shop-alert--info {
  background: #faf9f1;
  border: 1px solid #e3e5db;
  color: #5b6051;
}

#sg-shop .shop-alert ul {
  margin: 0.4rem 0 0 1.1rem;
  padding: 0;
}

/* Summary list on checkout */
#sg-shop .shop-summary-items {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

#sg-shop .shop-summary-items li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #eef0ea;
  font-size: 0.9rem;
}

#sg-shop .shop-summary-items__name {
  min-width: 0;
  color: #1f2412;
  overflow-wrap: anywhere;
}

#sg-shop .shop-summary-items__qty {
  display: block;
  font-size: 0.8rem;
  color: #5b6051;
}

#sg-shop .shop-summary-items__total {
  font-weight: 700;
  color: #1f2412;
  white-space: nowrap;
}

/* Were inline styles on the markup until they needed to differ per breakpoint */
#sg-shop .shop-summary__edit {
  font-size: 0.88rem;
}

#sg-shop .shop-summary__promo {
  margin-top: 1rem;
}

#sg-shop .shop-promo {
  display: flex;
  gap: 0.5rem;
  margin: 0.25rem 0 0.4rem;
}

#sg-shop .shop-promo .shop-input {
  text-transform: uppercase;
}

#sg-shop .shop-promo .shop-btn {
  flex: 0 0 auto;
}

#sg-shop .shop-promo-message {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

#sg-shop .shop-promo-message.is-valid {
  color: #636B2F;
}

#sg-shop .shop-promo-message.is-invalid {
  color: #c33;
}

/* ---------- Order placed ---------- */
#sg-shop .shop-placed {
  max-width: 860px;
  margin: 0 auto;
}

#sg-shop .shop-placed__header {
  text-align: center;
  padding: 2rem 1.5rem;
}

#sg-shop .shop-placed__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: #636B2F;
  color: #FFFFFF;
  font-size: 1.8rem;
}

#sg-shop .shop-placed__tracking {
  display: inline-block;
  margin: 0.75rem 0 0.25rem;
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
  background: #eef0e1;
  color: #636B2F;
  font-family: 'Courier New', monospace;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

#sg-shop .shop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

#sg-shop .shop-table th {
  padding: 0.6rem 0.5rem;
  border-bottom: 2px solid #e3e5db;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #636B2F;
}

#sg-shop .shop-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #eef0ea;
  color: #1f2412;
  vertical-align: top;
}

#sg-shop .shop-table .is-num {
  text-align: right;
  white-space: nowrap;
}

#sg-shop .shop-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: shop-step;
}

#sg-shop .shop-steps li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2.6rem;
  color: #5b6051;
  font-size: 0.93rem;
}

#sg-shop .shop-steps li::before {
  counter-increment: shop-step;
  content: counter(shop-step);
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #636B2F;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

#sg-shop .shop-steps strong {
  color: #1f2412;
}

#sg-shop .shop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

#sg-shop .shop-stack > * + * {
  margin-top: 1.25rem;
}

/* ---------- Mobile text alignment ----------
   The rest of the site centres its text on small screens. Two conventions are
   mirrored here, at their own breakpoints, because the Shop's markup does not
   match the selectors that carry them:

   1. Inner-page heroes centre at <= 1023.98px
      (theme.css: `.theme-grid .page-hero .container`) — the Shop hero is
      `.shop-hero > .shop-wrap`, so that rule never reaches it.
   2. Card title and description centre at <= 768px
      (products.css `.prod-card h3/p`, catalogue.css `.product-card h3/p`).

   The hero is deliberately NOT re-tagged as `.page-hero > .container`: that would
   also import the design system's desktop hero and container styles and change the
   approved desktop layout. */

@media (max-width: 1023.98px) {
  #sg-shop .shop-hero .shop-wrap {
    text-align: center;
  }

  /* .lead is max-width 720px, so it needs centring as a box, not just as text */
  #sg-shop .shop-hero .section-title,
  #sg-shop .shop-hero .lead {
    margin-inline: auto;
  }

}

@media (max-width: 768px) {
  /* Listing */
  #sg-shop .shop-card__category,
  #sg-shop .shop-card__title,
  #sg-shop .shop-card__desc,
  #sg-shop .shop-price {
    text-align: center;
  }

  #sg-shop .shop-results {
    justify-content: center;
  }

  #sg-shop .shop-results-meta {
    text-align: center;
  }

  /* Product page — mirrors the catalogue detail page */
  #sg-shop .shop-breadcrumb {
    justify-content: center;
  }

  #sg-shop .shop-product__info,
  #sg-shop .shop-product__desc {
    text-align: center;
  }

  #sg-shop .shop-buy,
  #sg-shop .shop-buy__actions {
    justify-content: center;
  }

  /* `flex: 1 1 auto` sizes each button by its content, so the cart icon made
     "Add to Cart" ~39px wider than "View Cart". A zero basis makes them equal. */
  #sg-shop .shop-buy__actions .shop-btn {
    flex: 1 1 0;
  }

  /* Group the section: quantity + buttons as one unit, then the supporting
     text, then the facts box — instead of an even drip of identical gaps. */
  #sg-shop .shop-product__desc {
    margin-bottom: 1.5rem;
  }

  #sg-shop .shop-buy {
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.75rem;
  }

  #sg-shop .shop-buy__actions {
    gap: 0.75rem;
  }

  #sg-shop .shop-info-list {
    margin-bottom: 1.5rem;
  }

  #sg-shop .shop-info-list li {
    padding: 0.55rem 0;
    line-height: 1.55;
  }

  #sg-shop .shop-product__profile {
    margin-top: 1.5rem;
  }

  #sg-shop .shop-buy__qty {
    text-align: center;
  }

  #sg-shop .shop-qty {
    margin-inline: auto;
  }

  /* Bullet lists stay left-aligned inside a centred block — centred bullets are
     hard to read (the same trick as catalogue.css `.prod-detail-content ul`). */
  #sg-shop .shop-info-list,
  #sg-shop .shop-facts ul {
    display: inline-block;
    text-align: left;
    margin-inline: auto;
  }

  #sg-shop .shop-facts,
  #sg-shop .shop-related .shop-section-title {
    text-align: center;
  }

  /* Cart, checkout and order-placed: headings and summary lines only */
  #sg-shop .shop-section-title,
  #sg-shop .shop-form-section h2,
  #sg-shop .shop-summary__note,
  #sg-shop .shop-cart-head {
    text-align: center;
  }

  /* "Clear cart" drops BELOW the item list on phones: it is a rare, destructive
     action and should not take the first screen from the products themselves. */
  #sg-shop .shop-panel--cart {
    grid-template-columns: minmax(0, 1fr);
  }

  #sg-shop .shop-panel--cart .shop-cart-head {
    justify-content: center;
    margin-bottom: 0.9rem;
  }

  #sg-shop .shop-panel--cart .shop-cart-foot {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0ea;
  }

  /* It empties the whole cart, so give it a comfortable tap target instead of a
     ~20px line of underlined text. */
  #sg-shop .shop-cart-foot .shop-link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Order summary: centre "Edit cart" as a proper tap target, and give the blocks
     room to read as separate sections rather than one dense column. */
  #sg-shop .shop-summary__edit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0.5rem 0 0;
  }

  #sg-shop .shop-summary-items {
    margin-bottom: 0.5rem;
  }

  #sg-shop .shop-summary__promo {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #sg-shop .shop-summary__row {
    padding: 0.7rem 0;
  }

  #sg-shop .shop-summary__row--total {
    margin-top: 0.9rem;
    padding-top: 1.1rem;
  }

  #sg-shop .shop-summary__note {
    margin: 1.1rem 0 1.25rem;
  }

  /* Labels, inputs, the consent checkbox and the cart line stay left: centred
     labels above left-aligned fields read badly, and a cart line is a data row. */
  #sg-shop .shop-field label,
  #sg-shop .shop-field .shop-label,
  #sg-shop .shop-check,
  #sg-shop .shop-cart-line__name,
  #sg-shop .shop-cart-line__price {
    text-align: left;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  #sg-shop .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  #sg-shop .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #sg-shop .shop-product {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #sg-shop .shop-layout {
    grid-template-columns: 1fr;
  }

  #sg-shop .shop-summary {
    position: static;
  }
}

@media (max-width: 767px) {
  #sg-shop .shop-hero {
    padding: 2rem 0 1.25rem;
  }

  #sg-shop .shop-form-row,
  #sg-shop .shop-delivery-options {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #sg-shop .shop-delivery-options {
    gap: 0.75rem;
  }

  /* ----- Filter bar: search on its own row, then two equal pills, then the
     category list beneath them. .shop-filter goes display:contents so its
     toggle and list are placed independently in the same grid. ----- */
  /* minmax(0, …) or the pills' text sets a min-content floor and the grid
     overflows the phone viewport. */
  #sg-shop .shop-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.85rem;
  }

  #sg-shop .shop-search {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #sg-shop .shop-filter {
    display: contents;
  }

  #sg-shop .shop-filter__toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  #sg-shop .shop-sort {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  /* Clipped, not display:none — the select keeps its accessible name */
  #sg-shop .shop-sort__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #sg-shop .shop-sort__control {
    width: 100%;
  }

  /* Two pills share a 390px row, so both tighten to keep their labels whole */
  #sg-shop .shop-pill {
    gap: 0.4rem;
    padding: 0 0.7rem;
    font-size: 0.82rem;
  }

  #sg-shop .shop-sort__control > i:first-child {
    left: 0.7rem;
  }

  #sg-shop .shop-sort__control .shop-pill__chevron {
    right: 0.7rem;
  }

  #sg-shop .shop-sort .shop-select {
    padding: 0 1.8rem 0 1.9rem;
    font-size: 0.82rem;
  }

  /* The panel sits in flow and pushes the products down, rather than
     overlaying them — no z-index or overflow trouble on a phone. */
  #sg-shop .shop-filter__list {
    grid-column: 1 / -1;
    grid-row: 3;
    display: block;
    gap: 0;
    padding: 0;
    border: 1px solid #e3e5db;
    border-radius: 14px;
    /* 15 categories run to ~690px — taller than the phone viewport, so the
       panel scrolls internally instead of burying the products. */
    max-height: 62vh;
    overflow: hidden auto;
  }

  /* is-collapsible is added by JS, so with JS off the list stays open */
  #sg-shop .shop-filter.is-collapsible .shop-filter__list {
    display: none;
  }

  #sg-shop .shop-filter.is-collapsible.is-open .shop-filter__list {
    display: block;
  }

  #sg-shop .shop-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 46px;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #eef0ea;
    font-weight: 500;
  }

  #sg-shop .shop-filter__list li:last-child .shop-cat {
    border-bottom: none;
  }

  /* The tint alone marks the active row — no left accent strip (owner rule:
     implementation/Removal of AI Generated Styling From Applications ...md) */
  #sg-shop .shop-cat.is-active {
    background: #eef0e1;
    border-bottom-color: #eef0ea;
    color: #636B2F;
    font-weight: 600;
  }

  /* The counts earn their place here, where each row has room for them */
  #sg-shop .shop-cat__count {
    display: inline;
  }

  #sg-shop .shop-cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.75rem;
  }

  #sg-shop .shop-cart-line__image {
    width: 72px;
    height: 72px;
  }

  #sg-shop .shop-cart-line__qty {
    grid-column: 2;
  }

  #sg-shop .shop-cart-line__total {
    grid-column: 2;
    min-width: 0;
    text-align: left;
  }

  #sg-shop .shop-panel {
    padding: 1.15rem;
  }

  #sg-shop .shop-table th:nth-child(3),
  #sg-shop .shop-table td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 575px) {
  #sg-shop .shop-wrap {
    padding: 0 1rem;
  }

  #sg-shop .shop-grid {
    grid-template-columns: 1fr;
  }

  #sg-shop .shop-card__media .skeleton-image-wrapper {
    height: 220px;
  }

  /* ----- Pagination: 9 items need ~429px and a 390px phone offers ~358px, so
     the strip wrapped onto a second line. It narrows to the current page and
     one either side; the rest are HIDDEN, not removed, so every page URL is
     still in the HTML for crawlers and reappears on a wider screen. ----- */
  #sg-shop .shop-pagination__num:not(.is-near) {
    display: none;
  }

  /* Room to spare now, so the pills take the app's 44px tap target */
  #sg-shop .shop-pagination a,
  #sg-shop .shop-pagination span {
    min-width: 44px;
    min-height: 44px;
  }

  /* Narrowest phones: the two pills are ~160px each, so the sort drops its
     leading icon and gives every reclaimed pixel to the label — a native
     select silently truncates rather than wrapping. The chevron alone is
     enough to signal a dropdown. */
  #sg-shop .shop-sort__control > i:first-child {
    display: none;
  }

  #sg-shop .shop-sort .shop-select {
    padding: 0 1.7rem 0 0.9rem;
    font-size: 0.8rem;
  }

  #sg-shop .shop-pill {
    font-size: 0.8rem;
  }

  /* Stack the pair, as theme.css does for .hero-actions / .cta-band-actions */
  #sg-shop .shop-buy__actions {
    flex-basis: 100%;
    flex-direction: column;
    align-items: center;
  }

  #sg-shop .shop-buy__actions .shop-btn {
    width: 100%;
    max-width: 320px;
  }

  #sg-shop .shop-promo {
    flex-wrap: wrap;
  }

  #sg-shop .shop-promo .shop-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sg-shop .shop-card,
  #sg-shop .shop-btn {
    transition: none;
  }

  #sg-shop .shop-card:hover {
    transform: none;
  }
}