/* Silver Loom — bag, checkout and order confirmation.
 *
 * Uses the storefront's own tokens from silverloom-home.css (--teal-900, --ink,
 * --line and friends) rather than introducing a second palette, so these pages
 * read as part of the same shop.
 */

.sl-bag,
.sl-checkout,
.sl-order {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.sl-bag-grid,
.sl-checkout,
.sl-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 40px;
  align-items: start;
}

.sl-checkout {
  padding-top: 8px;
}

/* ------------------------------------------------------------------- lines */

.sl-bag-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.sl-bag-line.is-blocked {
  opacity: 0.6;
}

.sl-bag-line h2 {
  font-size: 15px;
  margin: 0 0 4px;
}

.sl-bag-line-meta,
.sl-bag-line-sku {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.sl-bag-line-sku {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.sl-bag-line-warning {
  margin: 6px 0 0;
  font-size: 12px;
  color: #a3341f;
}

.sl-bag-line-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}

.sl-bag-line-qty button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
}

.sl-bag-line-qty button:hover {
  background: var(--warm);
}

.sl-bag-line-qty span {
  min-width: 32px;
  text-align: center;
  font-size: 13px;
}

.sl-bag-line-price {
  text-align: right;
  font-size: 14px;
}

.sl-bag-remove {
  display: block;
  margin-top: 6px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

/* ----------------------------------------------------------------- summary */

.sl-bag-summary,
.sl-checkout-summary,
.sl-order-address {
  background: var(--warm);
  padding: 24px;
}

.sl-bag-summary h2,
.sl-checkout-summary h2,
.sl-order-address h2 {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sl-bag-summary dl,
.sl-checkout-summary dl,
.sl-order-lines dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  margin: 0 0 16px;
  font-size: 13px;
}

.sl-bag-summary dd,
.sl-checkout-summary dd,
.sl-order-lines dd {
  margin: 0;
  text-align: right;
}

.sl-bag-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.sl-checkout-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.sl-checkout-line small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

/* ---------------------------------------------------------------- controls */

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 16px;
  padding: 0 22px;
  border: 1px solid var(--teal-900);
  background: transparent;
  color: var(--teal-900);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.sl-btn-primary {
  width: 100%;
  background: var(--teal-900);
  color: #fff;
}

.sl-btn-primary:disabled {
  opacity: 0.6;
  cursor: progress;
}

.sl-bag-continue {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.sl-bag-empty {
  padding: 60px 0;
  text-align: center;
}

/* ---------------------------------------------------------------- checkout */

.sl-checkout-form fieldset {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}

.sl-checkout-form legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sl-checkout-form label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
}

.sl-checkout-form input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.sl-checkout-form input:focus {
  outline: 2px solid var(--teal-800);
  outline-offset: -2px;
}

.sl-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sl-field-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.sl-checkout-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #fbecea;
  border-left: 3px solid #a3341f;
  font-size: 13px;
  color: #a3341f;
}

/* ------------------------------------------------------------------- order */

.sl-order-status {
  margin-bottom: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--teal-900);
  background: var(--warm);
  font-size: 14px;
}

.sl-order-status p {
  margin: 0 0 6px;
}

.sl-order-status-payment-failed {
  border-left-color: #a3341f;
  background: #fbecea;
}

.sl-order-status-pending-payment {
  border-left-color: var(--gold);
}

.sl-order-address address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
}

/* The order aside stacks the receipt above the address, so the customer's
   evidence of payment sits with the order rather than only in their inbox. */
.sl-order-side {
  display: grid;
  gap: 24px;
}

.sl-order-receipt {
  padding: 24px;
  border: 1px solid var(--line);
}

.sl-order-receipt h2 {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sl-order-receipt dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}

.sl-order-receipt dt {
  color: var(--muted);
}

.sl-order-receipt dd {
  margin: 0;
  text-align: right;
}

/* The Stripe reference is long and unbreakable, and would otherwise widen the
   column past the grid track on a narrow screen. */
.sl-order-reference {
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

/* The `hidden` attribute must actually hide things.
 *
 * `hidden` is `display: none` in the *user-agent* stylesheet, so any author
 * rule that sets `display` on the same element beats it outright — specificity
 * does not come into it, an author declaration simply wins. Three rules on the
 * product page do exactly that: `.pdp-soldout` sets flex, `.pdp-interest` sets
 * block, and `.pdp-add` (silverloom-home.css) sets flex so it starts its own
 * line under the material-photos link.
 *
 * All three are meant to be mutually exclusive, and all three were permanently
 * visible: a product showed OUT OF STOCK and Add to bag side by side, whatever
 * the template or the script said. The template renders `hidden` correctly and
 * sl_interest.js sets `.hidden` correctly — the attribute was simply being
 * ignored.
 *
 * Declared once, with `!important`, so no future component has to remember.
 * `.pdp-thumbs[hidden]` in silverloom-home.css was this same trap patched one
 * element at a time; this is the general form. 14 elements on the product page
 * rely on `hidden`. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------- product page additions */

/* A size that cannot be bought in the chosen colour, shown as unavailable
   rather than left clickable to fail on the server. */
.pdp-size.is-unavailable {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.pdp-add-feedback {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--teal-900);
}

.pdp-add-feedback.is-error {
  color: #a3341f;
}

/* Colourways with no photograph are still selectable — see sl_product_card and
   www/product.html — so they need a visible edge to read as a control. */
.swatch.is-imageless {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.count-badge.is-hidden {
  display: none;
}

@media (max-width: 860px) {
  .sl-bag-grid,
  .sl-checkout,
  .sl-order-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-bag-line {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 12px;
  }

  .sl-field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ order history */

.sl-orders {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.sl-orders-who {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
}

.sl-orders-list {
  border-top: 1px solid var(--line);
}

.sl-orders-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}

.sl-orders-row:hover {
  background: var(--warm);
}

.sl-orders-id {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sl-orders-date {
  color: var(--muted);
}

.sl-orders-status {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--teal-100);
  color: var(--teal-900);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sl-orders-status.sl-order-status-payment-failed {
  background: #fbecea;
  color: #a3341f;
}

.sl-orders-status.sl-order-status-pending-payment {
  background: #f6ecdf;
  color: #8a5a20;
}

.sl-orders-total {
  text-align: right;
  font-weight: 700;
}

.sl-orders-form {
  max-width: 420px;
  margin-top: 40px;
  padding: 24px;
  background: var(--warm);
}

.sl-orders-form h2 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sl-orders-form label {
  display: block;
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.sl-orders-form input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
}

.sl-orders-sent {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--teal-100);
  border-left: 3px solid var(--teal-900);
  font-size: 13px;
  color: var(--teal-950);
}

@media (max-width: 680px) {
  .sl-orders-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
}

/* --------------------------------------------------------- Express Interest
 *
 * The enquiry a shopper can leave when something is sold out. Uses the same
 * tokens as the rest of the shop; nothing here introduces a colour or a radius
 * that does not already exist elsewhere on the site.
 */

.pdp-stock { margin: 4px 0 10px; }

.pdp-soldout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-soldout-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}

.pdp-interest { display: block; }

/* An empty picture frame, for a product with no photography of its own.
 *
 * Replaces a stand-in demo photograph. That showed a green shirt under a
 * saree's name, which is worse than showing nothing: a blank frame says "no
 * picture yet" and a borrowed one says "this is the garment". Sized from the
 * catalogue ratio so a grid of cards does not jump when one product has no
 * image. */
.image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--catalogue-ratio, 2 / 3);
  background: var(--warm);
  border: 1px solid var(--line);
}

.image-empty-text {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

.image-empty-lg .image-empty-text { font-size: 13px; }

/* ------------------------------------------- AI imagery and the cloth behind it */

/* Raised from 12px. This paragraph and the material-photos link now sit above
   "Add to bag" rather than below it, so they are read before a decision rather
   than after one — and 12px grey is a size people skip. They are the page's
   honest disclosure about what the picture is, so they are set at reading size. */
.pdp-ai-note {
  margin: 0 0 14px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* A quiet control. It opens a reference, not a second product gallery, so it is
   deliberately not a `.button` — that class would also make it compete with Add
   to bag for attention, and it sets `display` which fights the hidden
   attribute. */
.pdp-material-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  cursor: pointer;
}
.pdp-material-open:hover { color: var(--gold); border-bottom-color: var(--gold); }
.pdp-material-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sl-material-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(27, 29, 28, 0.55);
}

.sl-material {
  position: fixed;
  z-index: 61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 24px;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(27, 29, 28, 0.28);
}

.sl-material-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sl-material-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.sl-material-close {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.sl-material-close:hover { color: var(--ink); }

.sl-material-lede {
  margin: 8px 0 20px;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.sl-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.sl-material-shot { margin: 0; }

/* Contained, not covered: these are flat lays whose borders are the point, and
   cropping one to fill a tile hides the very edge somebody opened this to see.
   The same lesson as the AI review gallery in the console. */
.sl-material-shot img {
  width: 100%;
  aspect-ratio: var(--catalogue-ratio, 2 / 3);
  object-fit: contain;
  display: block;
  background: var(--warm);
}

.sl-material-shot figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .sl-material { padding: 18px; }
  .sl-material-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.pdp-interest[hidden], .pdp-add[hidden] { display: none; }

/* backdrop + dialog */

.sl-interest-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(27, 29, 28, 0.46);
}
.sl-interest-backdrop[hidden] { display: none; }

body.sl-interest-open { overflow: hidden; }

.sl-interest {
  position: fixed;
  z-index: 71;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(27, 29, 28, 0.22);
  padding: 26px 28px 24px;
}
.sl-interest[hidden] { display: none; }

.sl-interest-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sl-interest-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  color: var(--ink);
}

.sl-interest-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
}
.sl-interest-close:hover { background: var(--warm); color: var(--ink); }

.sl-interest-lede {
  margin: 10px 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.sl-interest-field { display: block; margin-bottom: 14px; }

.sl-interest-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sl-interest-field input,
.sl-interest-field textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
}

.sl-interest-field input:focus,
.sl-interest-field textarea:focus {
  outline: none;
  border-color: var(--teal-900);
  box-shadow: 0 0 0 2px var(--teal-100);
}

.sl-interest-field input.is-invalid,
.sl-interest-field textarea.is-invalid { border-color: #b3261e; }

.sl-interest-field textarea { resize: vertical; min-height: 74px; }

/* Mobile and quantity share a row on anything wider than a phone. */
.sl-interest-row { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 520px) {
  .sl-interest-row { grid-template-columns: 1.6fr 1fr; }
}

.sl-interest-error {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #b3261e;
}

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.sl-interest-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sl-interest-status {
  margin: 4px 0 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #b3261e;
  background: #fdf1f0;
  border: 1px solid #f2d5d2;
}

.sl-interest-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.sl-interest.is-busy { pointer-events: none; }
.sl-interest.is-busy .sl-interest-close { pointer-events: auto; }

.sl-interest-done { text-align: center; padding: 10px 0 4px; }
.sl-interest-done[hidden] { display: none; }
.sl-interest-done-text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}

@media (max-width: 519px) {
  .sl-interest { padding: 20px 18px 20px; }
  .sl-interest-title { font-size: 20px; }
  .sl-interest-actions { flex-direction: column-reverse; }
  .sl-interest-actions .button { width: 100%; }
}

/* Sold-out cards carry the action as an icon beside the favourite, borrowing
   that control's geometry exactly. A full-width bar was tried first and was
   wrong: it appears on some tiles and not others, so a row of products gained
   a band under half its pictures and lost the even rhythm the grid depends on.
   An icon in the same place on every card it appears on costs the layout
   nothing. */
.product-card .card-interest {
  position: absolute;
  top: 7px;
  right: 45px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(247, 246, 243, 0.92);
  color: var(--muted);
  /* An anchor brings defaults the button beside it does not: an underline, and
     a line box whose descender space lifts the glyph off centre. Both are
     cancelled here rather than relying on the svg being blockified, so the
     icon is centred in the circle whichever rule wins. */
  text-decoration: none;
  padding: 0;
  line-height: 0;
  transition: color 160ms ease, background 160ms ease;
}

.product-card .card-interest:hover,
.product-card .card-interest:focus-visible {
  color: var(--teal-900);
  background: var(--paper);
}

/* The heart's svg is a plain .icon at 22px -- icon-favourite carries no rule of
   its own -- so matching that size is what makes the two read as a pair. */
.product-card .card-interest .icon { display: block; }

/* Sellable stock, beside Add to bag. Same shape as .pdp-soldout so the two read
   as one line that changes, not two different messages; the dot turns gold when
   few are left, which is information a shopper can use and not a sales trick —
   the number is always the real one. */
.pdp-available {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-available-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  flex: none;
}

.pdp-available.is-low {
  color: #8a5a1e;
}

.pdp-available.is-low .pdp-available-dot {
  background: #d98324;
}