/* Storefront additions: region picker, buy box, cart, checkout.
   Loads after tw-site.css and uses the same variables. The .contact form styles in tw-site.css are
   for the dark About panel, so store forms get their own light-background styling here. */

/* region picker, in the dark header */
.region-pick { display:flex; align-items:center; }
.region-pick select {
  height:44px; border-radius:22px; border:1px solid #3A433D; background:transparent;
  color:var(--paper); padding:0 12px; font:inherit; font-size:14px; cursor:pointer;
}
.region-pick select:hover { border-color:var(--paper); }
.region-pick select option { color:var(--text); background:var(--card); }

/* Tabs and the stock switch are links here so the shop filters without JavaScript.
   Their colours and pressed states already come from tw-site.css. */
a.tab, a.switch { text-decoration:none; }

/* region suggestion, shown until the visitor picks for themselves */
.region-note { background:var(--sand); border-bottom:1px solid var(--line); }
.region-note .wrap {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:14px; padding-bottom:14px;
}
.region-note p { margin:0; font-size:15px; color:var(--text); }
.region-note-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.region-note .btn-light { height:42px; padding:0 20px; font-size:14px; background:var(--text); color:var(--paper); }
.region-note .btn-light:hover { background:#000; color:var(--paper); }
.region-note-stay { font-size:14px; color:var(--soft); text-decoration:underline; }
.region-note-stay:hover { color:var(--text); }

/* buy box */
.buy { margin:20px 0 28px; }
.buy-row { display:flex; align-items:flex-end; gap:16px; margin-top:18px; flex-wrap:wrap; }
.buy-row .btn { flex:1 1 220px; justify-content:center; }
.qty { display:grid; gap:4px; font-weight:700; }
.qty input {
  width:88px; font:inherit; padding:10px; border:1px solid var(--line);
  background:#fff; border-radius:10px; color:var(--text);
}
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover { background:var(--text); }
.ship-note { font-size:14px; line-height:1.5; color:var(--soft); margin:14px 0 0; }

/* a small button for row actions, so it does not inherit the dark-background ghost style */
.btn-mini {
  font:inherit; font-size:13px; font-weight:600; color:var(--soft);
  background:transparent; border:1px solid var(--line); border-radius:16px;
  padding:7px 14px; cursor:pointer;
}
.btn-mini:hover { color:var(--koa); border-color:var(--koa); }

/* cart */
.cart-table { width:100%; border-collapse:collapse; margin:8px 0 24px; }
.cart-table th, .cart-table td {
  text-align:left; padding:16px 12px; border-bottom:1px solid var(--line); vertical-align:top;
}
.cart-table th {
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soft); font-weight:400;
}
.cart-table td a { font-size:18px; font-weight:700; color:var(--text); text-decoration:none; }
.cart-table td a:hover { color:var(--koa); }
.cart-table td small { display:block; font-size:13px; color:var(--soft); margin-top:4px; }
.cart-table td small.out { color:#8a3b2a; }
.cart-table input[type="number"] {
  width:76px; font:inherit; padding:9px 10px; border:1px solid var(--line);
  background:#fff; border-radius:10px; color:var(--text);
}
.cart-actions { display:flex; gap:12px; justify-content:flex-end; margin-bottom:36px; }

/* totals panel — .panel.light supplies the card background and border */
.cart-total { max-width:420px; margin-left:auto; gap:10px; }
.cart-total h2 { font-size:24px; font-weight:800; }
.cart-total p { display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.cart-total p.grand {
  font-size:22px; font-weight:800; color:var(--text);
  border-top:1px solid var(--line); padding-top:14px; margin-top:6px;
}
.cart-total p.hint { display:block; font-size:14px; color:var(--soft); }
.cart-total .btn { margin-top:12px; justify-content:center; }

/* checkout */
.checkout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; align-items:start; }
.checkout .cart-total { margin-left:0; max-width:none; position:sticky; top:132px; }

.store-form h2 { font-size:28px; font-weight:800; margin-bottom:4px; }
.store-form label { display:block; font-size:14px; font-weight:600; color:var(--muted); margin:16px 0 6px; }
.store-form input,
.store-form textarea {
  width:100%; font:inherit; font-size:15px; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.store-form input { height:48px; }
.store-form input:focus,
.store-form textarea:focus { outline:2px solid var(--moss); outline-offset:1px; border-color:var(--moss); }
.store-form textarea { resize:vertical; }
.store-form .btn { margin-top:24px; justify-content:center; width:100%; }

.form-errors {
  margin:20px 0 0; padding:16px 18px; border-radius:12px;
  background:var(--sand); border-left:3px solid var(--koa);
}
.form-errors p { margin:0; font-size:15px; color:var(--text); }
.form-errors p + p { margin-top:6px; }

.form-note { margin-top:12px; font-size:14px; color:var(--moss); }

@media (max-width:860px) {
  .checkout { grid-template-columns:1fr; gap:32px; }
  .checkout .cart-total { position:static; }
  .cart-total { max-width:none; }
  .cart-table thead { display:none; }
  .cart-table tr { display:grid; grid-template-columns:1fr auto; padding:14px 0; border-bottom:1px solid var(--line); }
  .cart-table td { border-bottom:none; padding:5px 0; }
  .cart-table td:nth-child(2), .cart-table td:nth-child(4) { text-align:right; }
}

/* product lede — the one-line summary under the price */
.product .lede { font-size:17px; line-height:1.6; color:var(--muted); margin:14px 0 0; }

/* floating site-update notice
   Hidden with [hidden] until tw-site.js has read the dismissal cookie, so a visitor who already
   closed it never sees it appear and vanish. The header is sticky at z-index 20; this sits above. */
.site-update[hidden] { display:none; }
.site-update {
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:min(360px, calc(100vw - 40px));
  background:var(--ink); color:var(--moss-text);
  border:1px solid var(--ink-line); border-radius:var(--radius);
  padding:20px 22px 20px; box-shadow:0 18px 40px rgba(0,0,0,.28);
  animation:tw-update-in .32s ease-out both;
}
@keyframes tw-update-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .site-update { animation:none; } }

.site-update-title {
  margin:0 0 6px; font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}
.site-update p { margin:0; font-size:14px; line-height:1.6; }
.site-update a { color:var(--paper); text-decoration:underline; text-underline-offset:2px; }
.site-update a:hover { color:#fff; }

.site-update-close {
  position:absolute; top:8px; right:10px;
  width:30px; height:30px; padding:0; line-height:1;
  background:transparent; border:0; cursor:pointer;
  font:inherit; font-size:24px; color:var(--moss-text); opacity:.6;
}
.site-update-close:hover { opacity:1; }
.site-update-close:focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:8px; }

@media (max-width:520px) {
  .site-update { right:12px; left:12px; bottom:12px; width:auto; padding:18px 18px; }
}