/* cart.css - basket badge, /basket page and sticky bar. Loaded by cart.js on
   demand (once the basket has items) and by basket.html itself so its rows
   never flash unstyled. Nothing here adds to the basket: the widget's own
   customise page does that, styled by assets/customize-core.css.
   Requires the page palette vars (--ink, --ink-soft, --pink-deep, --rule). */
/* Round 5: a bag, not the word "Basket", with the count sitting over its
   top-right corner like a notification badge. `position:relative` on the anchor
   is what the badge's absolute corner is measured from, so the two move as one
   glyph however the nav wraps. Same look in customize-core.css, keyed on the id
   those pages carry, since cart.js is not loaded there. */
.nav-basket{position:relative;display:inline-flex;align-items:center;color:var(--ink)}
.nav-basket[hidden]{display:none}
.nav-basket:hover{color:var(--pink-deep)}
.nav-basket .nav-bag{display:block;width:22px;height:22px}
.nav-basket .nav-basket-n{position:absolute;top:-6px;right:-8px;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--pink-deep);color:#fff;font:600 11px/18px 'Inter',system-ui,sans-serif;text-align:center}

/* ── /basket ───────────────────────────────────────────────────────────────
   One row per item, the catalogue card laid on its side: the abstract
   catalogue preview (catalog.css draws every .pv-*), the name, what it is,
   and then a column of its own on the right holding the price with Remove
   under it. Round 5: the live widget is not there on arrival — cart.js swaps
   it into the preview's place the first time the row is hovered or focused,
   and never on a device that cannot hover. The preview and the name are both
   links back to the widget; only the name is underlined. */
.basket-page{max-width:760px;margin:0 auto;padding:26px 24px 90px}
.basket-page h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:34px;margin:0 0 6px}
.basket-browse{margin:0 0 22px;font-size:13px}
.basket-browse a{color:var(--ink-soft);text-decoration:underline}
.basket-browse a:hover{color:var(--pink-ink,#B23A60)}
.basket-row{display:flex;align-items:stretch;background:#fff;border:1.5px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);overflow:hidden;margin:0 0 18px}
.basket-row .preview{flex:none;width:172px;height:120px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-right:1.5px solid var(--ink)}
.basket-row a.preview,.basket-row a.preview:hover{text-decoration:none;color:inherit}
/* Round 6 · the abstract drawing lives in its own node, filling the same box
   it used to render straight into, so mouseleave/focusout (cart.js) can bring
   it back with a `hidden` flip instead of rebuilding it. */
.basket-row .basket-pv-abs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* The live preview, the way pricing.html frames one: the widget at its own
   size, scaled down into the 172x120 box, and never taking the pointer — the
   box around it is the link back to the widget. */
.basket-row .basket-pv{background:#fff}
.basket-row .basket-pv iframe{position:absolute;left:50%;top:50%;width:430px;height:300px;border:0;transform:translate(-50%,-50%) scale(.4);transform-origin:50% 50%;pointer-events:none}
.basket-row-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:14px 18px}
/* A favourite or a suggestion heads at <h3> rather than <h2>, since it sits
   under the section's own heading. It is the same row, so it reads the same. */
.basket-row-body h2,.basket-row-body h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:21px;margin:0 0 4px;letter-spacing:-.005em}
/* Round 5 · the name is a link and says so: underlined, in the row's own ink
   rather than the page's pink. */
.basket-row-name{color:inherit;text-decoration:underline;text-underline-offset:2px}
.basket-row-name:hover{color:var(--pink-deep);text-decoration:underline}
.basket-row-meta{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
/* Round 5 · the price and what can be done about it, stacked on the right:
   price on top, Remove (or Add to basket) under it. */
.basket-row-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;padding:14px 18px 14px 0}
/* Round 5b · a suggestion has nothing in that column, so it takes no room: the
   name runs on to the edge of the card rather than stopping at an empty gutter. */
.basket-row-side:empty{display:none}
.basket-amt{font-size:15px;color:var(--ink)}
.basket-remove{border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:12px;text-decoration:underline;padding:0}
.basket-remove:hover{color:var(--pink-ink,#B23A60)}
.basket-empty{padding:26px 0;color:var(--ink-soft);font-size:15px}
.basket-nudge{margin:0 0 20px;padding:12px 14px;border:1.5px dashed var(--pink-deep);border-radius:12px;font-size:13px;line-height:1.5}
.basket-nudge[hidden]{display:none}
.basket-nudge button,.basket-nudge a{display:inline-block;margin-top:8px;padding:6px 12px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:600 12px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.basket-foot{padding-top:18px;border-top:1.5px solid var(--ink)}
.basket-foot[hidden]{display:none}
/* Text pills, not brand logos. */
.basket-pays{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px}
.basket-pay{border:1px solid var(--rule);border-radius:6px;padding:3px 8px;background:#fff;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap}
.basket-secure{margin-left:4px;font-size:11px;color:var(--ink-soft)}
.basket-total{display:flex;justify-content:space-between;font-size:16px;margin-bottom:12px}
/* Round 5 · one paragraph above everything to do with paying: what the money
   buys, what it does not renew, and where the cancellation right stands. It
   replaces the two separate lines round 4 had either side of the total. */
.basket-terms{font-size:12px;color:var(--ink-soft);line-height:1.55;margin:0 0 16px}
.basket-terms a{color:var(--ink-soft);text-decoration:underline}
.basket-terms a:hover{color:var(--pink-ink,#B23A60)}
/* Round 4: Checkout is a small button at the end of the line, not a banner
   across the foot. It is the last step of a decision already made. */
.basket-go{display:flex;justify-content:flex-end}
.basket-checkout{width:auto;padding:9px 20px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:600 13px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.basket-checkout:hover{background:var(--pink-deep);border-color:var(--pink-deep)}
.basket-checkout[disabled]{opacity:.5;cursor:default}
.basket-error{color:#B23A60;font-size:12px;margin:8px 0 0;text-align:right}
.basket-error[hidden]{display:none}

/* ── favourites ───────────────────────────────────────────────────────────
   The same rows under their own heading, below the basket. `> h2` so the rule
   stops at the heading and never reaches the row headings inside. */
.basket-favs{margin-top:36px;padding-top:26px;border-top:1.5px solid var(--rule)}
.basket-favs>h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:26px;margin:0 0 10px}
.basket-favs-note{margin:0 0 18px;font-size:13px}
.basket-favs-note[hidden]{display:none}
.basket-favs-note a{color:var(--pink-deep);text-decoration:underline}
.basket-fav-add{padding:7px 14px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:600 12px/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap}
.basket-fav-add:hover{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
/* Round 5 · two suggestions to a row from 640px up, one below. The class is on
   the container, so the same row markup lays out both ways; the favourites
   list, when there is one, keeps its single column. Half a row is half the
   width, so the picture and the type step down to match — the live preview's
   scale with them, since it is a fixed 430x300 widget shrunk into the box. */
@media(min-width:640px){
  .basket-favs-2up{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .basket-favs-2up .basket-row .preview{width:118px;height:92px}
  .basket-favs-2up .basket-row .basket-pv iframe{transform:translate(-50%,-50%) scale(.274)}
  .basket-favs-2up .basket-row-body{padding:12px}
  .basket-favs-2up .basket-row-body h3{font-size:18px}
  .basket-favs-2up .basket-row-meta{font-size:11.5px}
  .basket-favs-2up .basket-row-side{padding:12px 12px 12px 0}
}
@media(max-width:560px){
  .basket-row{flex-direction:column}
  .basket-row .preview{width:100%;border-right:0;border-bottom:1.5px solid var(--ink)}
  .basket-row-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:0 18px 14px}
}

.basket-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-top:1.5px solid var(--ink);font-size:14px}
.basket-bar a{padding:9px 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:600 13px/1 'Inter',system-ui,sans-serif;text-decoration:none}
.basket-bar a:hover{background:var(--pink-deep);border-color:var(--pink-deep);text-decoration:none}
@media(max-width:640px){.basket-bar.is-on{display:flex}}