/* Studio Tache shop — cart drawer and option states. Inherits the site's fonts.
   Restyle by editing the tokens below; everything else reads from them. */
:root {
  --st-bg: #fcfcfc;          /* Background */
  --st-ink: #3b3b3b;         /* Black */
  --st-accent: #f3f1ef;      /* Accent */
  --st-secondary: #f0eeec;   /* Secondary */
  --st-border: #e1dfdd;      /* Border */
  --st-white: #ffffff;       /* White */
  --st-muted: rgba(59, 59, 59, 0.6);
  --st-radius: 2px;
  /* Drawer: 40% of the window, never narrower than 28rem (448px) or wider than 38rem (608px); full width on phones */
  --st-drawer-width: clamp(28rem, 40vw, 38rem);
  --st-button-font-size: 1.0625rem;
  --st-button-padding: 1.15rem 1.5rem;
}

/* product options: colour swatches stay full strength until the customer picks one
   (loaded after Webflow's CSS, so this beats the dimmed base style and the hover state) */
[data-shop-colour].st-untouched { opacity: 1; }

/* drawer shell */
.st-cart { position: fixed; inset: 0; z-index: 9999; font: inherit; color: var(--st-ink); }
.st-cart-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.25s; }
.st-cart.is-open .st-cart-backdrop { background: rgba(0, 0, 0, 0.3); }
.st-cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--st-drawer-width), 100%);
  background: var(--st-bg); display: flex; flex-direction: column;
  border-left: 1px solid var(--st-border);
  transform: translateX(100%); transition: transform 0.25s ease;
}
.st-cart.is-open .st-cart-panel { transform: none; }

/* header */
.st-cart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 2rem; border-bottom: 1px solid var(--st-border);
}
.st-cart-title { font-size: 1.125rem; }
.st-cart-close { font: inherit; font-size: 1.75rem; line-height: 1; background: none; border: 0; padding: 0; cursor: pointer; color: var(--st-ink); }

/* lines */
.st-cart-lines { flex: 1; overflow-y: auto; padding: 0.5rem 2rem; }
.st-cart-empty { color: var(--st-muted); padding: 2rem 0; }
.st-cart .st-cart-empty a, .st-cart .st-cart-empty a:visited { color: var(--st-ink); }
.st-line { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--st-border); }
.st-line-body { min-width: 0; }  /* lets long names wrap instead of pushing the price off */
.st-line-img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--st-radius); background: var(--st-accent); display: block; }
.st-cart a.st-line-name, .st-cart a.st-line-name:visited { color: var(--st-ink); text-decoration: none; font-size: 1.0625rem; }
.st-cart a.st-line-name:hover { text-decoration: underline; }
.st-line-meta { font-size: 0.875rem; color: var(--st-muted); margin: 0.25rem 0 0.75rem; }
.st-line-qty { display: inline-flex; align-items: center; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-white); }
.st-line-qty button { font: inherit; background: none; border: 0; width: 2.25rem; height: 2.25rem; cursor: pointer; color: var(--st-ink); }
.st-line-qty span { min-width: 1.75rem; text-align: center; font-size: 0.9375rem; }
.st-line-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.st-line-price { font-size: 1.0625rem; }
.st-line-remove { font: inherit; font-size: 0.8125rem; background: none; border: 0; cursor: pointer; color: var(--st-muted); text-decoration: underline; padding: 0; }

/* footer */
.st-cart-foot { padding: 1.5rem 2rem 2rem; border-top: 1px solid var(--st-border); background: var(--st-secondary); display: grid; gap: 1rem; }
.st-cart-shipping { margin: 0; font-size: 0.875rem; color: var(--st-muted); min-height: 1.2em; }
.st-cart-row { display: flex; justify-content: space-between; font-size: 0.9375rem; color: var(--st-muted); }
.st-cart-total { display: flex; justify-content: space-between; font-size: 1.25rem; padding-top: 0.5rem; border-top: 1px solid var(--st-border); }
.st-checkout {
  width: 100%; font: inherit; font-size: var(--st-button-font-size); letter-spacing: 0.04em;
  padding: var(--st-button-padding); border: 0; border-radius: var(--st-radius); cursor: pointer;
  background: var(--st-ink); color: var(--st-white);
  transition: opacity 0.2s;
}
.st-checkout:hover { opacity: 0.88; }
.st-checkout:disabled { opacity: 0.4; cursor: default; }
.st-cart-error { margin: 0; font-size: 0.875rem; color: #a3271f; }
.st-note { color: var(--st-muted); }

.st-checkout:focus-visible, .st-cart-close:focus-visible, .st-line-qty button:focus-visible,
.st-line-remove:focus-visible, .st-cart a.st-line-name:focus-visible { outline: 2px solid var(--st-ink); outline-offset: 2px; }

body.st-cart-open { overflow: hidden; }

/* thank-you page order summary (built-in layout) */
.st-order { max-width: 40rem; margin: 0 auto; color: var(--st-ink); }
.st-order-eyebrow { margin: 0 0 0.5rem; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-muted); }
.st-order-title { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 400; line-height: 1.25; }
.st-order-note { margin: 0 0 2rem; color: var(--st-muted); line-height: 1.6; }
.st-order .st-order-link, .st-order .st-order-link:visited { color: var(--st-ink); }
.st-order-lines { border-top: 1px solid var(--st-border); }
.st-order-line { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--st-border); }
.st-order-img { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--st-radius); background: var(--st-accent); display: block; }
.st-order-line-body { min-width: 0; }
.st-order .st-order-name, .st-order a.st-order-name:visited { color: var(--st-ink); text-decoration: none; font-size: 1.0625rem; }
.st-order a.st-order-name:hover { text-decoration: underline; }
.st-order-meta { margin-top: 0.25rem; font-size: 0.875rem; color: var(--st-muted); }
.st-order-price { font-size: 1.0625rem; }
.st-order-totals { margin: 1.5rem 0 0; padding: 1.25rem 1.5rem; background: var(--st-secondary); border-radius: var(--st-radius); display: grid; gap: 0.6rem; }
.st-order-row { display: flex; justify-content: space-between; margin: 0; }
.st-order-row dt, .st-order-row dd { margin: 0; }
.st-order-total { padding-top: 0.6rem; border-top: 1px solid var(--st-border); font-size: 1.25rem; }
@media (max-width: 479px) {
  .st-order-line { grid-template-columns: 4rem 1fr auto; gap: 1rem; }
  .st-order-img { width: 4rem; height: 4rem; }
  .st-order-title { font-size: 1.5rem; }
}

@media (max-width: 479px) {
  .st-cart-head, .st-cart-lines, .st-cart-foot { padding-left: 1.25rem; padding-right: 1.25rem; }
  .st-line { grid-template-columns: 4.5rem 1fr auto; gap: 1rem; }
  .st-line-img { width: 4.5rem; height: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .st-cart-backdrop, .st-cart-panel, .st-checkout { transition: none; }
}