/* =========================================================================
   Sold out — the look the owner approved on 14 Oct 2026
   (exports/mockups/out-of-stock/). Markup: inc/sold-out.php,
   inc/template-helpers.php (cards), assets/js/main.js (product page),
   woocommerce/cart/cart.php + checkout/review-order.php (basket).

   One mark everywhere: a solid BRICK pill (#8C2F23), cream Space Mono
   letters, a circle-slash. No transparency, blur, glow or shadow on it —
   whole-pixel sizes so it stays crisp at 1x and 2x on any photograph.
   Loaded after design-system, mobile, home-final and shop-tools, so these
   rules adjust theirs.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. The mark
   ------------------------------------------------------------------------- */
.gs-somark {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 18px; padding: 0 7px 0 6px; border-radius: 999px;
  border: 1px solid rgba(20, 18, 16, .15);
  background: #8C2F23; color: #F4EEE2;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  vertical-align: middle;
}
.gs-somark svg { flex: none; display: block; width: 10px; height: 10px; }
.gs-rtl .gs-somark { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; text-transform: none; padding: 0 7px; }

/* -------------------------------------------------------------------------
   2. Cards: whole product sold out
   ------------------------------------------------------------------------- */
/* The SOLD OUT pill on the photo: the Fresh / Frozen pill's size, on a line
   of its own under them (they keep their place). */
.gs-card__temps-row { flex: 0 0 100%; display: flex; min-width: 0; }
.gs-card .gs-card__so {
  height: 22px; padding: 0 9px 0 7px; gap: 5px;
  font-size: 11px; letter-spacing: .12em;
}
.gs-card .gs-card__so svg { width: 11px; height: 11px; }
.gs-rtl .gs-card .gs-card__so { font-size: 12px; letter-spacing: 0; padding: 0 9px; }
/* No Fresh / Frozen pills (a category badge instead): under the badge. */
.gs-card__temps--below-badge { top: 42px; }

/* The photograph slightly muted: colour and light only. */
.gs-card--soldout .gs-card__img { filter: saturate(.55) brightness(.8); }

/* The price dimmed. */
.gs-card--soldout .gs-card__price,
.gs-card--soldout .gs-card__price .woocommerce-Price-amount,
.gs-card--soldout .gs-card__price bdi,
.gs-card--soldout .gs-card__weight { color: var(--text-dim); }
.gs-card--soldout .gs-card__sources li { color: #A88A57; border-color: rgba(212, 162, 78, .2); }

/* Wide screens, on hover: "Sold out" and a quiet "BACK SOON" chip in place
   of the gold quick add. */
.gs-card.gs-card--soldout .gs-card__qa-btn--soldout {
  background: none; border: 1px solid var(--hairline-3); color: var(--text-dim);
  font-family: var(--font-mono); font-weight: 400; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; cursor: default;
}
.gs-card.gs-card--soldout .gs-card__qa-btn--soldout:active { transform: none; }
.gs-rtl .gs-card.gs-card--soldout .gs-card__qa-btn--soldout { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; }

/* Phones: the pack label's "+" becomes a quiet "SOLD OUT" chip; the
   label's weight and price are greyed. */
@media (max-width: 860px) {
  .gs-card .gs-card__so { height: 20px; padding: 0 7px 0 6px; gap: 4px; font-size: 10.5px; letter-spacing: .1em; }
  .gs-card .gs-card__so svg { width: 10px; height: 10px; }
  .gs-rtl .gs-card .gs-card__so { font-size: 11.5px; letter-spacing: 0; padding: 0 8px; }
  .gs-card__temps--below-badge { top: 32px; }

  .gs-card.gs-card--soldout .gs-card__add--soldout {
    width: auto; height: 34px; padding: 0 12px; cursor: default;
    background: none; border: 1px solid #CDBFA6; border-radius: 10px; color: var(--gs-label-dim);
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    white-space: nowrap;
  }
  .gs-card.gs-card--soldout .gs-card__add--soldout::after { content: none; }
  .gs-card.gs-card--soldout .gs-card__add--soldout:active { transform: none; }
  .gs-rtl .gs-card.gs-card--soldout .gs-card__add--soldout { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none; }
  .gs-card--soldout .gs-card__tag-price,
  .gs-card--soldout .gs-card__tag-v,
  .gs-card--soldout .gs-card__tag-more,
  .gs-card--soldout .gs-card__range,
  .gs-card--soldout .gs-card__range .woocommerce-Price-amount,
  .gs-card--soldout .gs-card__range bdi { color: #8C8273; }
  .gs-card--soldout .gs-card__sources li { color: #A79C8A; border-color: #E4D9C5; }
}

/* -------------------------------------------------------------------------
   3. Product page: sold-out choices (crisp, not the old 38% fade)
   ------------------------------------------------------------------------- */
.gs-src.is-soldout:disabled,
.gs-tog.is-soldout:disabled,
.gs-pdp__pack.is-soldout:disabled { opacity: 1; }
.gs-src.is-soldout { background: var(--surface-2); border-color: var(--hairline-2); }
.gs-src.is-soldout .gs-src__name { color: var(--text-dim); }
.gs-src.is-soldout .gs-src__blurb { color: #6F665A; }
.gs-src.is-soldout .gs-src__from { padding-top: 8px; }
.gs-pdp__pack.is-soldout { background: var(--surface-2); border-color: var(--hairline-2); }
.gs-pdp__pack.is-soldout .gs-pdp__pack-l { color: var(--text-dim); }
.gs-pdp__pack.is-soldout .gs-pdp__pack-p { color: inherit; display: flex; margin-top: 2px; }
.gs-pdp__pack.is-soldout .gs-grade__only { color: #6F665A; }
.gs-tog.is-soldout { color: var(--text-dim); gap: 8px; }
.gs-tog .gs-somark { margin-inline-start: 2px; }
/* Phones: the sources are rows (name · price); the mark takes the price's place. */
@media (max-width: 600px) {
  .gs-src.is-soldout .gs-src__from { padding-top: 0; align-self: center; }
}
@media (max-width: 860px) {
  .gs-pdp__pack.is-soldout { background: var(--surface-2); }
  .gs-pdp__pack.is-soldout .gs-pdp__pack-l { color: var(--text-dim); }
}

/* -------------------------------------------------------------------------
   4. Product page: sold out as a whole
   ------------------------------------------------------------------------- */
/* WooCommerce's quantity and button (and its "Out of stock" line) give way
   to the sold-out block. */
.gs-pdp--soldout .single_variation_wrap,
.gs-pdp--soldout form.cart .quantity,
.gs-pdp--soldout form.cart .single_add_to_cart_button,
.gs-pdp--soldout .reset_variations,
.gs-pdp--soldout .gs-pdp__panel > .stock { display: none !important; }

/* The choices still say what it comes in: greyed, crisp, not selectable. */
.gs-pdp--soldout .gs-varpick button:disabled { opacity: 1; cursor: default; }
.gs-pdp--soldout .gs-src { background: var(--surface-2); border-color: var(--hairline-2); }
.gs-pdp--soldout .gs-src__name,
.gs-pdp--soldout .gs-pdp__pack-l { color: var(--text-3); }
.gs-pdp--soldout .gs-src__blurb,
.gs-pdp--soldout .gs-pdp__pack-p,
.gs-pdp--soldout .gs-grade__only { color: #7F7668; }
.gs-pdp--soldout .gs-src__from { color: #9C7B45; }
.gs-pdp--soldout .gs-pdp__pack { background: var(--surface-2); border-color: var(--hairline-2); }
.gs-pdp--soldout .gs-vp__toggle { background: var(--surface-2); }
.gs-pdp--soldout .gs-tog { color: #8C8273; }
.gs-pdp--soldout .gs-vp__desc { color: var(--text-dim); }

/* The price greyed, the SOLD OUT pill beside it. */
.gs-pdp--soldout .gs-pdp__price--live > .gs-money,
.gs-pdp--soldout .gs-pdp__price--live > .unit,
.gs-pdp--soldout .gs-pdp__panel > .price,
.gs-pdp--soldout .gs-pdp__panel > .price .woocommerce-Price-amount { color: var(--text-dim); }
.gs-somark--price {
  height: 22px; padding: 0 9px 0 7px; gap: 5px; margin-inline-start: 14px;
  font-size: 10.5px; letter-spacing: .12em; vertical-align: .35em;
}
.gs-somark--price svg { width: 11px; height: 11px; }
.gs-rtl .gs-somark--price { font-size: 12px; letter-spacing: 0; padding: 0 9px; }

/* "Sold out — back soon", the day, and "Tell me when it's back". */
.gs-soldbox { display: grid; gap: 12px; margin: 20px 0 8px; width: 100%; }
.gs-soldbox__bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 10px 16px; border: 1px solid var(--hairline-3); border-radius: 10px;
  background: var(--surface); color: var(--text-2);
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.2; text-align: center;
}
.gs-soldbox__ico {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #8C2F23; color: #F4EEE2;
}
.gs-soldbox__ico svg { width: 14px; height: 14px; }
.gs-soldbox__date {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.gs-soldbox__date svg { flex: none; }
.gs-rtl .gs-soldbox__date { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.gs-notify {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 18px; border: 1.5px solid var(--gold); border-radius: 10px;
  background: none; color: var(--text-bright); font-weight: 700; font-size: 15.5px; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.gs-notify:hover { background: #241C12; border-color: var(--gold-bright); color: var(--text-bright); }
.gs-notify:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gs-notify__wa { display: inline-flex; color: #25D366; }
.gs-soldbox__note { margin: 0; text-align: center; font-size: 13px; color: var(--text-dim); }

/* Phones: the sticky bar while the page's button is off screen. */
@media (max-width: 860px) {
  .gs-soldbox__bar { min-height: 56px; font-size: 17px; }
  .gs-buybar--sold .gs-buybar__v {
    font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-bright);
    direction: inherit; text-align: start;
  }
  .gs-buybar.gs-buybar--sold .gs-buybar__go--notify {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px;
    background: none; border: 1.5px solid var(--gold); color: var(--text-bright);
    box-shadow: none; font-size: 15px; text-decoration: none;
  }
  .gs-rtl .gs-buybar--sold .gs-buybar__k { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none; }
}

/* -------------------------------------------------------------------------
   5. Basket and checkout: an item that sold out after it was added
   ------------------------------------------------------------------------- */
.gs-sonote {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 16px 18px;
  border: 1px solid #6B2A20; border-inline-start: 4px solid #8C2F23; border-radius: 12px;
  background: #1F1714; color: var(--text);
}
.gs-sonote__ico {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #8C2F23; color: #F4EEE2;
}
.gs-sonote__txt { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.gs-sonote__txt b { font-size: 14.5px; font-weight: 700; color: var(--text-bright); }
.gs-sonote__btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 9px; background: #F4EEE2; color: #1A140C; font-weight: 700; font-size: 14px; text-decoration: none;
}
.gs-sonote__btn:hover { background: #FFF8F0; color: #1A140C; }

.gs-line--soldout { background: #211814; }
.gs-line--soldout .gs-line__img { position: relative; }
.gs-line--soldout .gs-line__img img { filter: saturate(.55) brightness(.8); }
.gs-somark--thumb {
  position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px);
  height: 16px; padding: 0 5px; gap: 3px; font-size: 8px; letter-spacing: .08em;
}
.gs-somark--thumb svg { width: 9px; height: 9px; }
.gs-rtl .gs-somark--thumb { left: auto; right: 4px; font-size: 9.5px; }
.gs-line--soldout .gs-line__name { color: var(--text-dim); }
.gs-line--soldout .gs-line__sub { color: #7F7668; }
.gs-line__total--struck { color: var(--text-dim); white-space: nowrap; }
.gs-line__total--struck s { text-decoration-thickness: 1.5px; }
.gs-line__sold { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.gs-line__sold b { color: var(--text-bright); font-weight: 700; }
.gs-line__ctl--soldout { gap: 18px; }
.gs-btn-so {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--text-2); border-radius: 10px; color: var(--text-bright);
  font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .2s;
}
.gs-btn-so:hover { border-color: var(--text-bright); color: var(--text-bright); }
.gs-line__other { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; font-size: 14px; text-decoration: none; }
.gs-line__other:hover { color: var(--gold-bright); }
[dir="rtl"] .gs-line__other svg { transform: scaleX(-1); }

/* The basket with only held lines (WooCommerce's empty basket page). */
.gs-soempty { margin: 0 0 22px; }

/* Order summary: "Sold out · not charged (Wagyu Ribeye)", struck through. */
.gs-summary__row--soldout { color: var(--text-dim); font-size: 13px; }
.gs-summary__row--soldout .gs-mono, .gs-summary__row--soldout s { color: var(--text-dim); }
.gs-summary__row--soldout s { text-decoration-thickness: 1.5px; }

@media (max-width: 860px) {
  .gs-sonote { flex-wrap: wrap; align-items: flex-start; padding: 16px; }
  .gs-sonote__txt { flex: 1 1 calc(100% - 46px); }
  .gs-sonote__btn { margin-inline-start: 46px; }
  .gs-line__sold { font-size: 14.5px; }
  /* On the cream docket: grey, no dotted leader. */
  .gs-summary .gs-summary__row--soldout { color: #8C8273; font-size: 14px; }
  .gs-summary .gs-summary__row--soldout::after { content: none; }
  .gs-summary .gs-summary__row--soldout .gs-mono,
  .gs-summary .gs-summary__row--soldout s { color: #8C8273; font-weight: 700; }
}
