/* Stoke Tiles redesign: the basket (T8).
   Built from design/basket.html and basket-mobile.html. */

.st-basket { display: flex; flex-direction: column; }

/* ------------------------------------------------------------------- Head */

.st-basket__head { padding: 28px 0 0; }
.st-basket__back {
  align-self: flex-start;
  min-height: var(--st-tap-min);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.st-basket__title { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.st-basket__count { font-size: var(--st-body); color: var(--st-taupe); }

/* ------------------------------------------------------------------- Body */

.st-basket__body { padding: 8px 0 64px; }
.st-basket__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; align-items: start; }
.st-basket__items { display: flex; flex-direction: column; min-width: 0; }
.st-basket__problem { margin-bottom: 24px; }
.st-basket__problem .st-message__text strong { font-weight: 500; }

.st-basket__section-head {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--st-linen);
  font-size: var(--st-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--st-taupe);
}

.st-lines { margin: 0; padding: 0; list-style: none; }
.st-lines > li { list-style: none; }

.st-line {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--st-divider);
}
.st-line.is-updating { opacity: 0.55; pointer-events: none; }
.st-line__media {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background: var(--st-stone);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-line__media--sm { width: 80px; height: 80px; }
.st-line .st-line__media img { width: 100%; height: 100%; object-fit: contain; display: block; } /* outweighs .woocommerce-page img */
/* Client round 2: the whole product shows (uncropped size, contain), on white. */
.st-line__media:has(img) { background: var(--st-white); border: 1px solid var(--st-panel); box-sizing: border-box; padding: 4px; }
.st-line__empty { width: 88px; height: 96px; font-size: var(--st-eyebrow); }

.st-line__text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-line__head { display: flex; flex-direction: column; gap: 4px; }
.st-line__name {
  font-family: var(--st-serif);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--st-espresso);
  text-decoration: none;
  margin-bottom: 2px;
}
.st-line__name--sm { font-size: 22px; }
a.st-line__name:hover { color: var(--st-bronze); }
.st-line__meta { font-size: var(--st-small); line-height: 1.5; color: var(--st-taupe); }

.st-line__controls { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.st-line__controls .st-stepper { height: 48px; }
.st-line__controls .st-stepper__btn { width: 46px; }
.st-line__controls .st-stepper__input { width: 70px; }
.st-line__min { font-size: 13px; color: var(--st-taupe); }
.st-line__min.is-invalid { color: var(--st-alert); font-weight: 500; }
.st-line.is-invalid .st-stepper { border-color: var(--st-alert); }

.st-line__end {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.st-line__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.st-line__total { font-family: var(--st-serif); font-size: 28px; line-height: 1.1; font-weight: 600; }
.st-line__working { font-size: 13px; color: var(--st-taupe); }
.st-line__remove {
  min-height: var(--st-tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--st-bronze);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.st-line__remove:hover { color: var(--st-alert); }

/* Samples sit in their own block, because they travel separately. */
.st-samples { display: flex; flex-direction: column; margin-top: 40px; }
.st-samples__head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--st-linen);
  flex-wrap: wrap;
}
.st-samples__head span { font-size: var(--st-small); color: var(--st-taupe); }
.st-line--sample { align-items: center; padding: 20px 0; }
.st-sample-tag {
  align-self: flex-start;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--st-gold);
  color: var(--st-bronze);
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.st-line--sample .st-line__total { font-size: 26px; }

.st-basket__fallback { margin-top: 24px; }
/* The script hides this: with JavaScript the quantity posts on change. */
.st-basket__fallback.is-hidden { display: none; }

.st-basket__help {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--st-stone);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--st-small);
}
.st-basket__help svg { flex-shrink: 0; color: var(--st-espresso); }
.st-basket__help a { color: var(--st-espresso); font-weight: 500; }

/* ---------------------------------------------------------------- Summary */

.st-summary {
  position: sticky;
  top: 96px;
  padding: 32px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.st-summary__title { margin: 0; font-family: var(--st-serif); font-weight: 500; font-size: 32px; line-height: 1.1; }

.st-progress { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--st-ivory); }
/* One of these two is always hidden; see parts/shop/st-progress.php. The
   standalone copy is the phone's, so it is off by default. */
.st-progress--standalone { display: none; }
.st-progress__label { margin: 0; font-size: 15px; font-weight: 500; }
.st-progress__track { height: 6px; background: var(--st-divider); overflow: hidden; }
.st-progress__fill { display: block; height: 100%; background: var(--st-sage); transition: width 300ms ease; }
.st-progress__note { font-size: var(--st-eyebrow); color: var(--st-taupe); }

.st-summary__lines { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.st-summary__row { display: flex; justify-content: space-between; gap: 16px; }
.st-summary__row--stack { flex-direction: column; gap: 4px; }
.st-summary__value { font-weight: 500; }
.st-summary__note { font-size: 13px; line-height: 1.5; color: var(--st-taupe); }

.st-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--st-linen);
}
.st-summary__total-label {
  font-size: var(--st-small);
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  font-weight: 500;
}
.st-summary__total-label span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--st-taupe); }
.st-summary__total-value { font-family: var(--st-serif); font-size: 40px; line-height: 1; font-weight: 600; }

.st-discount { border-top: 1px solid var(--st-divider); border-bottom: 1px solid var(--st-divider); }
.st-discount__toggle {
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--st-espresso);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--st-sans);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.st-discount__toggle svg { transition: transform 180ms ease; flex-shrink: 0; }
.st-discount__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.st-discount__panel { padding: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.st-discount__panel[hidden] { display: none; }
.st-discount__form { display: flex; gap: 8px; margin: 0; }
.st-discount__form .st-field { flex-grow: 1; min-width: 0; }
.st-discount__applied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--st-small);
}
.st-discount__applied strong { font-weight: 500; }
.st-discount__applied a,
.st-summary__remove {
  color: var(--st-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Phase 2 fix: an applied code is a line of the sum, with its Remove link
   beside it rather than inside the collapsed panel. */
.st-summary__row--discount > span:first-child { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.st-summary__row--discount .st-summary__value { color: var(--st-success); }
.st-summary__remove { font-size: 13px; }

.st-summary__checkout { display: flex; flex-direction: column; gap: 16px; }
.st-summary__reason { margin: 0; font-size: 13px; line-height: 1.5; color: var(--st-alert); }

/* No express pay on the basket (WP2/3). The summary no longer fires the hook
   the gateways print into; should a gateway find another cart hook, its
   wrapper is hidden here rather than shown unstyled. */
.st-basket #ppc-button-ppcp-gateway,
.st-basket .ppcp-messages,
.st-basket #wc-stripe-express-checkout-element,
.st-basket #wc-stripe-express-checkout-button-separator,
.st-basket .wc-stripe-express-checkout-wrapper { display: none !important; }

/* WooCommerce's notices above the lines, as message panels. */
.st-basket__notices { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.st-basket__notices .st-message a { color: var(--st-bronze); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* "{tagline} · Estimated delivery 1 to 3 working days" under the line name. */
.st-line__delivery { color: var(--st-taupe); }

.st-summary__reassure {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--st-taupe);
}
.st-summary__reassure svg { flex-shrink: 0; margin-top: 1px; }

/* ------------------------------------------------------------ Empty state */

.st-empty-basket {
  padding: 80px 0 104px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 640px;
}
.st-empty-basket p { margin: 0; }
.st-empty-basket__actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.st-empty-basket__help { font-size: 15px; color: var(--st-taupe); margin-top: 8px; }

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

.st-checkoutbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 850;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--st-gutter-mobile);
  background: var(--st-white);
  border-top: 1px solid var(--st-linen);
  box-shadow: 0 -4px 16px rgba(31, 28, 25, 0.08);
  transform: translateY(100%);
  /* See the note on .st-buybar: off screen means out of the tab order. */
  visibility: hidden;
  transition: transform 200ms ease, visibility 200ms;
}
.st-checkoutbar.is-visible { transform: translateY(0); visibility: visible; }
.st-checkoutbar__price { display: flex; flex-direction: column; }
.st-checkoutbar__total { font-family: var(--st-serif); font-size: 28px; font-weight: 600; line-height: 1.1; }
.st-checkoutbar__note {
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  color: var(--st-taupe);
}
/* The sticky bar names the problem in place of the label. */
.st-checkoutbar__note--alert { color: var(--st-alert); text-transform: none; letter-spacing: 0; font-size: var(--st-small); }

/* ---------------------------------------------------------------- Tablet */

@media (max-width: 1200px) {
  .st-basket__grid { gap: 40px; grid-template-columns: minmax(0, 1fr) 340px; }
  .st-summary { padding: 24px; }
}

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 1024px) {
  .st-basket__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-summary { position: static; }

  /* The line becomes two rows: picture and text, then price and remove. */
  /* A card, laid out as a grid: thumbnail and title on the first row, the
     stepper and the total on the second, Remove under a rule on the third.
     `display: contents` lets the text and end wrappers step aside so their
     children can be placed directly. */
  .st-line {
    display: grid;
    /* Three columns so the 152px stepper gets a cell as wide as itself:
       in the 88px thumbnail column alone the price box sat over its "+" and
       the button could not be tapped. 88 + 14 gap + 50 = 152. */
    grid-template-columns: 88px 50px minmax(0, 1fr);
    grid-template-areas:
      "media head head"
      "ctrl  ctrl price"
      "min   min  min"
      "remove remove remove";
    column-gap: 14px;
    row-gap: 14px;
    background: var(--st-white);
    border: 1px solid var(--st-divider);
    padding: 16px 16px 4px;
  }
  .st-line__text,
  .st-line__end { display: contents; }
  .st-line__media { grid-area: media; width: 88px; height: 88px; }
  .st-line__head { grid-area: head; }
  /* The stepper is wider than the 88px thumbnail column it shares a row with,
     and the minimum note inside it was wrapping to "Minimum 2 / boxes". The
     wrapper steps aside so the note can have a row of its own. */
  .st-line__controls { display: contents; }
  .st-line__controls .st-stepper { grid-area: ctrl; }
  .st-line__min { grid-area: min; margin-top: -4px; }
  .st-line__price { grid-area: price; align-items: flex-end; }
  .st-line__remove {
    grid-area: remove;
    justify-self: end;
    border-top: 1px solid var(--st-divider);
    width: 100%;
    text-align: right;
    margin-top: -2px;
  }
  .st-line__name { font-size: 21px; line-height: 1.2; }
  .st-line__meta { font-size: 13px; line-height: 1.45; }
  .st-line__controls .st-stepper { width: 152px; }
  .st-line__controls .st-stepper__input { width: 58px; }
  .st-line__working { font-size: 12px; }
  /* The end wrapper is `display: contents` above, so its children are placed
     by the grid; these older rules put the total back on the left beside
     Remove. */
  .st-line__total { font-size: 26px; }

  /* A sample line has no head wrapper: tag, name and meta sit directly in
     the text column, so they are placed one under the other beside the
     thumbnail, with Free and Remove on the row below (basket-mobile.html). */
  .st-line--sample {
    grid-template-areas:
      "media tag tag"
      "media name name"
      "media meta meta"
      "total remove remove";
    row-gap: 6px;
    align-items: start;
    padding-bottom: 12px;
  }
  .st-line--sample .st-sample-tag { grid-area: tag; }
  .st-line--sample .st-line__name { grid-area: name; margin: 0; }
  .st-line--sample .st-line__meta { grid-area: meta; }
  .st-line--sample .st-line__total { grid-area: total; align-self: center; margin-top: 8px; }
  .st-line--sample .st-line__remove { grid-area: remove; border-top: 0; width: auto; margin-top: 8px; }

  /* The Items / Total column headings belong to a table of rows. Once each
     line is a card with its own total, they label nothing. */
  .st-basket__section-head { display: none; }

  /* Between the basket and the extras on a phone, and inside the summary
     card at desktop - different parents, so the markup carries both and CSS
     picks one. */
  .st-progress--summary { display: none; }
  .st-progress--standalone { display: flex; background: var(--st-white); padding: 16px; margin: 0; }

  .st-basket__body { padding-bottom: 88px; }
  .st-checkoutbar { display: flex; }
  /* Phase 2 fix: at the very bottom the fixed bar sat over the footer's last
     line. The page ends one bar height plus 16px lower (st-basket.js sets the
     exact figure from the bar; this is the fallback). */
  body:has(.st-checkoutbar) { padding-bottom: 93px; }

  /* Side padding restated: this rule outranks .st-wrap's phone gutter. */
  .st-empty-basket { padding: 48px var(--st-gutter-mobile) 72px; }
  .st-empty-basket__actions .st-btn { width: 100%; }
}

/* Inside the basket the "Complete the job" row sits in the items column, so
   it loses the page-wide padding and drops to two across. */
.st-basket .st-job { background: transparent; padding: 40px 0 0; }
.st-basket .st-job .st-wrap { padding: 0; }
.st-basket .st-job__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-basket .st-job__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.st-basket .st-job__note { text-align: left; }
.st-basket .st-job .st-h2 { font-size: 28px; }

/* Touch targets. The line title and the help email are inline text at the
   design's size; each gets the transparent 44px hit area on coarse pointers
   rather than being redrawn, as elsewhere in the build. */
@media (pointer: coarse) {
  a.st-line__name,
  .st-basket__help a,
  .st-empty-basket__help a { position: relative; }
  a.st-line__name::after,
  .st-basket__help a::after,
  .st-empty-basket__help a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--st-tap-min);
  }
}


/* ============================================================ Design pass */

/* "Continue shopping" is tracked 0.14em, not 0.16em. */
.st-basket .st-link { letter-spacing: 0.14em; }

/* "Complete the job" is a 32px heading on the basket, where the product page
   sets the same class smaller. */
.st-basket .st-heading .st-h2 { font-size: 32px; }

/* The basket design prices its job cards at 22px; the product page's are 24. */
.st-basket .st-jobcard__price-value { font-size: 22px; }

@media (max-width: 1024px) {
  .st-basket .st-link { font-size: 12px; }
  .st-basket__title .st-h1 { font-size: 42px; }
  .st-basket .st-heading .st-h2 { font-size: 30px; }
  .st-summary__title { font-size: 30px; }
  .st-basket__help a { font-size: 15px; color: var(--st-bronze); }
}