/* =========================================
   Amaryllis — CART & WISHLIST
   -----------------------------------------
   Loaded on every page: the drawer and the header badges appear
   sitewide, so this cannot be a per-template stylesheet.
   style.css stays the base.
========================================= */

:root {
    --shop-ink: #111111;
    --shop-body: #444444;
    --shop-muted: #8a8a8a;
    --shop-line: var(--c-line);
    --shop-accent: var(--c-brand);
    --shop-btn: var(--c-ink);
}

/* =========================================
   1. FORM WRAPPERS
   -----------------------------------------
   Every button is a real form so it works without JavaScript. That
   would normally break the flex and absolute layouts they sit in, so
   the wrapper is taken out of the box tree and the button inherits
   the position its parent expects.
========================================= */
.shop-form {
    display: contents;
}

/* display:contents removes the form from the accessibility tree in a
   few older engines. Where it is unsupported the form falls back to
   this, which keeps the button full width rather than collapsing the
   layout. */
@supports not (display: contents) {
    .shop-form {
        display: block;
        width: 100%;
    }
}

.shop-form--inline {
    display: contents;
}

/* =========================================
   2. HEADER BADGES
========================================= */
.icon-link {
    position: relative;
}

.icon-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--shop-btn);
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    /* The number is decoration over a link that already says "Cart";
       the accessible name carries the count instead. */
    pointer-events: none;
}

.icon-badge:empty {
    display: none;
}

/* A count that changes should register without being distracting. */
.icon-badge.is-bumped {
    animation: shop-bump 0.4s var(--ease-out);
}

@keyframes shop-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .icon-badge.is-bumped { animation: none; }
}

/* =========================================
   3. CART DRAWER
   -----------------------------------------
   Hidden only under .has-js. Without the script the drawer is opened
   by :target — the cart icon is a plain link to #cart-drawer — so the
   cart is never unreachable.
========================================= */
.has-js .cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    pointer-events: none;
}

.has-js .cart-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* No-JS: :target opens it, and it sits in normal flow at the foot of
   the page rather than as an overlay, which needs no script at all. */
.cart-drawer:not(:target) .cart-panel {
    /* Base state for the no-JS path only — .has-js overrides below. */
}

html:not(.has-js) .cart-drawer {
    max-width: 520px;
    margin: 0 auto 60px;
    padding: 0 var(--section-gutter);
}

html:not(.has-js) .cart-scrim,
html:not(.has-js) .cart-close {
    display: none;
}

.cart-scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(15, 15, 15, 0.42);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
}

.cart-drawer.is-open .cart-scrim {
    opacity: 1;
}

.cart-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-white);
}

.has-js .cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    /* Figma 'add to cart' 364:3058 is a 492 x 910 panel artboard, and
       492 is its real on-screen width (the 16px 'Your Cart' heading
       reads correctly at 1:1). Was 420. */
    /* 492 / 1440 = 34.2vw, so the panel is exactly Figma's 492 at the
       design width and keeps that proportion as the screen grows —
       a hard 492 is what made it read as shrinking on an XXL display.
       Capped at 620 so it never becomes a half-screen sheet. */
    width: clamp(320px, 34.2vw, 620px);
    height: 100%;
    /* Figma 'add to cart' 364:3058, Rectangle: y6 / blur6 / #000000 at
       20%. Note the design draws this as a standalone panel artboard,
       so its shadow has no horizontal offset — as a right-anchored
       drawer that reads as less separation from the page than the
       -8px 0 40px this carried before. Figma's value, as asked. */
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease-out);
}

.has-js .cart-drawer.is-open .cart-panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .has-js .cart-panel,
    .cart-scrim { transition: none; }
}

/* --- Head --- */
.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--shop-line);
}

/* Figma: "Your Cart" is Source Sans Pro w700 16 / lh 16 / #1f1f1f.
   The drawer frame is 492 wide, which is its real size, so these
   values apply directly. Was 19px. */
.cart-head h2 {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.25vw, 18px);
    font-weight: 700;
    line-height: 1;
    color: var(--shop-ink);
}

.cart-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--shop-ink);
    transition: background-color 0.25s var(--ease-out);
}

.cart-close svg {
    width: 17px;
    height: 17px;
}

.cart-close:hover {
    background: #f2f2f2;
}

/* --- Body --- */
.cart-body {
    flex: 1 1 auto;
    overflow-y: auto;
    /* A flick at the end of the list should not scroll the page
       behind the drawer. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 24px;
}

.cart-empty {
    padding: 50px 0;
    text-align: center;
    font-size: clamp(14px, 1vw, 14px);
    color: var(--shop-muted);
}

/* --- Line --- */
.cart-line {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #f1f1f1;
}

.cart-line:last-child {
    border-bottom: 0;
}

.cart-line-media {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: #f4f3f1;
}

.cart-line-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Figma I328:5394;17:309: Source Sans Pro w600 12 / lh16 / #1f1f1f.
   Was w700 at 13px. */
/* --- DELIBERATELY LARGER THAN FIGMA --------------------------------
 * Figma draws the drawer's row title at 12px and its spec line at 8px.
 * Those are the file's literal values and they were reproduced exactly
 * — but 8px is below any usable reading size, and 12px is marginal.
 *
 * Everything in this panel is therefore sized with clamp() instead:
 * a readable floor, a vw term calibrated to land just above the Figma
 * figure at 1440, and a ceiling so it keeps growing on a large display.
 * The drawer is a fixed-width panel, so without the vw term its text
 * would stay the same physical size while everything around it grew,
 * which is what made it read as shrinking on an XXL screen.
 * ---------------------------------------------------------------- */
.cart-line-title {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(14px, 1.04vw, 15px);
    font-weight: 600;
    line-height: 1.33;
    color: var(--shop-ink);
    margin-bottom: 5px;
}

.cart-line-title:hover {
    color: var(--shop-accent);
}

.cart-line-spec {
    /* Two lines, so a long spec string cannot push the stepper out of
       reach at the bottom of a narrow drawer. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Figma I328:5393;27:160: Open Sans w600 8 / lh12 / #1f1f1f — the
       page ink, not a muted grey. 8px is genuinely small; this is the
       design's literal value, flagged rather than quietly rounded up. */
    font-family: var(--font-body);
    /* Figma says 8px. Raised to a readable size — see the note above. */
    font-size: clamp(12px, 0.9vw, 13px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--shop-ink);
    margin-bottom: 6px;
}

.cart-line-variant {
    font-size: clamp(12px, 0.87vw, 12px);
    font-weight: 400;
    color: var(--shop-body);
    margin-bottom: 6px;
}

.cart-line-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.cart-price-now {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.18vw, 17px);
    font-weight: 700;
    color: var(--shop-ink);
}

.cart-price-mrp {
    font-size: clamp(12px, 0.9vw, 12px);
    color: var(--shop-muted);
    text-decoration: line-through;
}

.cart-price-off {
    font-size: clamp(12px, 0.9vw, 12px);
    font-weight: 700;
    color: var(--shop-accent);
}

/* --- Stepper --- */
.cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--shop-line);
    border-radius: 5px;
    overflow: hidden;
}

/* display:contents on .shop-form would flatten the stepper's own
   border, so this one keeps its box. */
.cart-qty.shop-form {
    display: inline-flex;
}

.cart-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: clamp(15px, 1.04vw, 15px);
    line-height: 1;
    color: var(--shop-ink);
    transition: background-color 0.25s var(--ease-out);
}

.cart-step:hover {
    background: #f2f2f2;
}

.cart-qty-value {
    min-width: 30px;
    text-align: center;
    font-size: clamp(15px, 1.04vw, 15px);
    font-weight: 400;
    color: var(--shop-ink);
}

.cart-bin {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--shop-muted);
    transition: color 0.25s var(--ease-out);
}

.cart-bin svg {
    width: 17px;
    height: 17px;
}

.cart-bin:hover {
    color: #b3392c;
}

/* --- Foot --- */
.cart-foot {
    flex-shrink: 0;
    padding: 18px 24px 22px;
    border-top: 1px solid var(--shop-line);
    background: var(--c-white);
}

.cart-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: clamp(14px, 1.04vw, 15px);
    color: var(--shop-body);
    margin-bottom: 4px;
}

.cart-subtotal strong {
    font-family: var(--font-display);
    font-size: clamp(19px, 1.46vw, 22px);
    color: var(--shop-ink);
}

.cart-tax {
    font-size: clamp(12px, 0.83vw, 12px);
    color: var(--shop-muted);
    margin-bottom: 14px;
}

.cart-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 12px 20px;
    background: var(--shop-btn);
    border: 1px solid var(--shop-btn);
    border-radius: 4px;
    color: var(--c-white);
    font-size: clamp(15px, 1.04vw, 15px);
    font-weight: 700;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.cart-checkout:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-white);
}

/* =========================================
   3b. WISHLIST DRAWER
   -----------------------------------------
   Figma 'wishlist page' 322:5386 is a 492 x 910 slide-over — the same
   artboard as the cart, with the same y6/blur6 panel shadow. It reuses
   .cart-drawer / .cart-panel / .cart-head wholesale; only the things
   that genuinely differ live here.
========================================= */

/* Figma I322:5254;17:309: Source Sans Pro w700 24 / lh32 / #1f1f1f —
   larger than the cart's 16px 'Your Cart'. */
.wishlist-drawer .cart-head h2 {
    font-size: clamp(22px, 1.74vw, 26px);
    line-height: 1.33;
}

/* Row title I322:5321: Source Sans Pro w700 12 / lh16.
   Row spec  I322:5323: Open Sans w600 8 / lh12 / #1f1f1f.
   The cart's own rows are w600 12 and w600 8 — the wishlist title is
   the one that differs, at w700. */
.wish-line .cart-line-title {
    font-weight: 700;
}

/* Add To Cart inside a row. The cart drawer has no equivalent, so this
   is the one genuinely new control in the panel. */
.wish-line-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--shop-btn);
    border: 1px solid var(--shop-btn);
    border-radius: 4px;
    color: var(--c-page);
    font-family: var(--font-body);
    font-size: clamp(13px, 0.97vw, 14px);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.wish-line-add:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* 'Move All To Cart' — Figma I322:5275: Open Sans w600 8 / #81af4a.
   It sits in the panel foot where the cart puts its checkout button, so
   it takes that button's box and only the colours change. */
.wishlist-drawer .cart-checkout {
    background: var(--c-white);
    border-color: var(--shop-accent);
    color: var(--shop-accent);
    font-family: var(--font-body);
    font-weight: 400;
}

.wishlist-drawer .cart-checkout:hover {
    background: var(--shop-accent);
    color: var(--c-white);
}

/* =========================================
   4. WISHLIST PAGE
   -----------------------------------------
   Still a real URL and the no-JS destination. Left at the larger type
   you asked for, because at full page width Figma's 8-12px panel values
   would be unreadable — those belong to the 492px drawer above.
========================================= */
/* Figma's wishlist frame insets its content about 5.5% either side.
       Held as a ratio with no cap, matching every other page. */
    .wishlist-page {
    max-width: none;
    padding: clamp(30px, 4vw, 56px) max(18px, 5.49vw) clamp(50px, 6vw, 90px);
}

.wishlist-head {
    text-align: center;
    margin-bottom: clamp(22px, 3vw, 36px);
}

.wishlist-head h1 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.33vw, 46px);
    font-weight: 700;
    color: var(--shop-ink);
    margin-bottom: 8px;
}

/* Figma: Open Sans w600 / #1f1f1f. The weight was unset, so it fell
   back to 400. Size is left alone — see the note on .wishlist-add. */
.wishlist-head p {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.67vw, 22px);
    font-weight: 400;
    color: var(--shop-ink);
}

.wishlist-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* Figma: "4 Items" is Open Sans w700 / #1f1f1f. */
.wishlist-count {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.67vw, 22px);
    font-weight: 700;
    color: var(--shop-ink);
}

.wishlist-move {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 16px;
    background: var(--c-white);
    border: 1px solid var(--shop-accent);
    border-radius: 5px;
    /* Figma: "Move All To Cart" is Open Sans w600 in the BRAND GREEN
       #81af4a — not the darker #4d6f21 this was using, which appears
       nowhere in the design file. */
    color: var(--c-brand);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.wishlist-move:hover {
    background: var(--shop-accent);
    color: var(--c-white);
}

.wishlist-move svg {
    width: 15px;
    height: 15px;
}

/* --- Row --- */
.wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wishlist-row {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    gap: 18px;
    align-items: start;
    padding: 16px;
    background: var(--c-white);
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    transition: box-shadow 0.4s var(--ease-out);
}

.wishlist-row:hover {
    box-shadow: var(--card-shadow);
}

.wishlist-media {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #f4f3f1;
}

.wishlist-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-title {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.67vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--shop-ink);
    margin-bottom: 6px;
}

.wishlist-title:hover {
    color: var(--shop-accent);
}

/* Figma: Open Sans w600 / #1f1f1f — the same ink as the title, not a
   muted grey, and w600 rather than the 400 it inherited. */
.wishlist-spec {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--shop-ink);
    margin-bottom: 10px;
}

.wishlist-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

/* --- Row actions --- */
.wishlist-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    height: 100%;
}

.wishlist-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--shop-muted);
    transition: color 0.25s var(--ease-out);
}

.wishlist-drop svg {
    width: 16px;
    height: 16px;
}

.wishlist-drop:hover {
    color: #b3392c;
}

/* margin-top:auto pins the button to the foot of the row, so it lines
   up across rows even when one title wraps to two lines. */
.wishlist-add {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    min-height: 32px;
    padding: 7px 16px;
    background: var(--shop-btn);
    border: 1px solid var(--shop-btn);
    border-radius: 4px;
    /* Figma: Open Sans w700 on #fdfdfd — already the right family and
       weight; only the label colour changes from pure white. SIZE is
       left as-is: the wishlist frame is drawn at a reduced scale
       (this button's label measures 8.3px in the file), so its
       absolute type values cannot be used directly. */
    color: var(--c-page);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.wishlist-add:hover {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

.wishlist-empty {
    padding: 60px 0 20px;
    text-align: center;
}

.wishlist-empty p {
    font-size: 15px;
    color: var(--shop-body);
    margin-bottom: 18px;
}

.wishlist-empty a {
    color: var(--shop-ink);
    font-weight: 700;
    box-shadow: inset 0 -1px 0 currentColor;
}

/* =========================================
   5. TOAST
   -----------------------------------------
   role="status", so it is announced without stealing focus or
   interrupting whatever is being read.
========================================= */
.shop-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1300;
    max-width: calc(100vw - 40px);
    padding: 11px 20px;
    border-radius: 6px;
    background: rgba(20, 20, 20, 0.94);
    color: var(--c-white);
    font-size: 13.5px;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.shop-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .shop-toast { transition: none; }
}

/* =========================================
   5b. ENQUIRY BUTTON
   -----------------------------------------
   "Contact Us" in place of Add To Cart, on products with no price.

   It lives HERE, not in products.css, because it can appear anywhere
   amaryllis_add_to_cart_form() is called — listing cards, related
   products, the sticky bar, and the WISHLIST DRAWER, which is printed
   on every page of the site. products.css is enqueued only on product
   templates, so while these rules sat there the same button rendered
   28px tall in the drawer on a product page and 34px everywhere else.

   It is an <a>, not a <button>, so it needs the text-decoration and
   line-height that .btn-cart gets from the button reset — otherwise it
   sits a few pixels taller than the control beside it.
========================================= */
.btn-enquire {
    text-decoration: none;
    line-height: 1;
}

.btn-enquire:visited {
    color: var(--c-page);
}

/* =========================================
   5c. CARD BUTTON HOVER — BRAND GREEN
   -----------------------------------------
   Figma component set "Add To Cart" (448 x 48) carries a hover variant
   for every label, and they all resolve to the same thing:

     Default              fill #1f1f1f             label #fdfdfd
     Default_hover        fill #81af4a, no stroke  label #fdfdfd
     Connect With Us      fill #1f1f1f             label #fdfdfd
     Connect With Us_h    fill #81af4a, no stroke  label #fdfdfd
     View More            outlined 1px #1f1f1f     label #1f1f1f
     View More_hover      fill #81af4a, no stroke  label #fdfdfd

   So each button turns brand green INDEPENDENTLY. products.css used to
   do something different: the pair swapped as a unit, so pointing at
   View More also restyled the Add To Cart above it, and neither ever
   went green — Add To Cart went to flat #000000, a colour that appears
   nowhere in the design file.

   It sits in THIS file, not products.css, because .btn-cart is printed
   into the wishlist drawer on every page of the site while products.css
   is enqueued only on product templates — the same split that put
   .btn-enquire here. --c-brand is #81af4a.
========================================= */
.btn-cart:hover,
.btn-cart:focus-visible,
.btn-view:hover,
.btn-view:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* --- Exactly one filled button at a time -------------------------
 * Add To Cart is the solid one at rest and View More is outlined, so
 * the card has a single obvious primary action. Hovering View More
 * hands that emphasis over: it takes the green fill, and Add To Cart
 * has to give up its dark fill in the same moment or the card ends up
 * with two solid buttons stacked on top of each other and no primary
 * at all.
 *
 * This pairing was in products.css before and is deliberately kept —
 * only the colour was wrong. The reverse case needs no rule: View More
 * is already outlined, so hovering Add To Cart leaves it as it is.
 *
 * :has() carries the specificity of its argument, so this resolves to
 * (0,4,0) against (0,2,0) for .btn-cart:hover above and wins — which
 * is what makes it beat the green while the pointer is next door.
 * ------------------------------------------------------------- */
.product-actions:has(.btn-view:hover) .btn-cart,
.product-actions:has(.btn-view:focus-visible) .btn-cart {
    background: transparent;
    border-color: var(--c-ink);
    color: var(--c-ink);
}

/* =========================================
   6. SAVED STATE
========================================= */
.wishlist-btn.is-saved svg,
.pdp-icon-btn.is-saved svg {
    fill: currentColor;
}

/* The button is disabled for the moment the request is in flight, so
   a double tap cannot file two additions. */
.btn-cart[disabled],
.pdp-buy[disabled],
.wishlist-add[disabled],
.wishlist-move[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* =========================================
   7. PDP VARIANT SELECTORS
   -----------------------------------------
   Size and colour were <button>s, which cannot carry a value into a
   form. They are radios now, so the chosen variant submits with the
   add-to-cart request and survives with no JavaScript at all.

   The input is visually hidden rather than display:none, so it stays
   focusable and the group keeps arrow-key navigation. The label is
   what is drawn.
========================================= */
.pdp-size,
.pdp-colour {
    position: relative;
    cursor: pointer;
}

.pdp-size input,
.pdp-colour input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Size --- */
/* --- Figma geometry lives HERE, not in product-single.css ---------
 * This file is enqueued last so its variant rules beat that one on
 * load order. That was deliberate — the :has(input:checked) logic below
 * has to win — but it also meant these boxes silently overrode the
 * Figma-correct dimensions next door, and the older, eyeballed values
 * were the ones actually rendering.
 *
 * Figma: size chips are 56 x 22 at x = 836 / 907 / 979 (a 71px pitch,
 * so 15px apart), radius 4, labelled Open Sans w400 12 / lh 28.
 * ------------------------------------------------------------- */
.pdp-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 22px;
    padding: 0 12px;
    background: var(--c-white);
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 22px;
    color: var(--shop-body);
    transition:
        border-color 0.3s var(--ease-out),
        color 0.3s var(--ease-out),
        background-color 0.3s var(--ease-out);
}

.pdp-size:hover {
    border-color: var(--shop-ink);
}

/* :has() on the label rather than a class toggled in JS — the checked
   radio IS the state, so there is nothing to keep in sync. */
.pdp-size:has(input:checked) {
    background: var(--shop-ink);
    border-color: var(--shop-ink);
    color: var(--c-white);
}

/* The hidden input still receives focus, so the ring has to be drawn
   on the label or keyboard users see nothing at all. */
.pdp-size:has(input:focus-visible),
.pdp-colour:has(input:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* --- Colour --- */
/* Figma: colour swatches are 65 x 65 circles at x = 836 / 915 / 994 /
   1073 — a 79px pitch, so 14px between them. These were rendering at
   40px: product-single.css had the correct clamp, but this rule sits at
   the same specificity and loads later, so 40 won. Same clamp as that
   file now, so the two agree whichever order they land in. */
.pdp-colour {
    display: inline-block;
    width: clamp(28px, 4.51vw, 65px);
    height: clamp(28px, 4.51vw, 65px);
    border-radius: 50%;
    background: var(--swatch, #ffffff);
    /* Ring drawn OUTSIDE with an offset shadow rather than a border,
       so selecting does not change the dot's size and shuffle the row. */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow 0.3s var(--ease-out);
}

.pdp-colour:hover {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(0, 0, 0, 0.12);
}

.pdp-colour:has(input:checked) {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),
        0 0 0 2px var(--c-white),
        0 0 0 4px var(--shop-ink);
}

/* Where :has() is unsupported, every swatch simply keeps its resting
   ring — the control still works, it just shows no selection. */
@supports not selector(:has(*)) {
    .pdp-size,
    .pdp-colour {
        outline-offset: 2px;
    }
}

/* Wishlist and share sit under the Add To Cart button, outside the
   buy form — a nested form would be invalid and dropped. */
/* .pdp-actions--secondary is gone from the markup. It existed only so
   the wishlist and share buttons could sit on a SECOND row below Add To
   Cart, avoiding a nested form. Figma has all three on one row, and
   single-amaryllis_product.php now does that with form="pdp-buy-form"
   on the submit button — so there is no second row left to style. */

/* =========================================
   8. RESPONSIVE
========================================= */
@media (max-width: 576px) {
    .has-js .cart-panel {
        width: 100%;
    }

    .cart-body,
    .cart-head,
    .cart-foot {
        padding-inline: 16px;
    }

    .cart-line {
        grid-template-columns: 68px 1fr auto;
        gap: 11px;
    }

    /* Image and copy stay side by side; the button drops under them,
       because at this width a 116px button beside a wrapping title
       leaves the title about 90px. */
    .wishlist-row {
        grid-template-columns: 76px 1fr auto;
        gap: 12px;
        padding: 12px;
    }

    .wishlist-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .wishlist-add {
        margin-top: 0;
        flex: 1 1 auto;
    }

    .wishlist-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .wishlist-move {
        width: 100%;
        justify-content: center;
    }
}


/* === desktop -2px === */
/* -----------------------------------------------------------------
   2px off the desktop type, as asked. These selectors set a FIXED
   size, which applies at every width -- editing the value in place
   would have shrunk the phone too, and the phone was already right.
   So the reduction is scoped to desktop and the base rule, which is
   what mobile uses, is left exactly as it was.
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
    .wishlist-move { font-size: 14px; }   /* was 16px */
    .wishlist-spec { font-size: 14px; }   /* was 16px */
    .wishlist-add { font-size: 15px; }   /* was 17px */
    .wishlist-empty p { font-size: 13px; }   /* was 15px */
    .shop-toast { font-size: 11.5px; }   /* was 13.5px */
    .pdp-size { font-size: 10px; }   /* was 12px */
}