/* ============================================================================
   kd-catalog-actions.css · The add-to-cart action bar (peaknetwork.se)
   ----------------------------------------------------------------------------
   Page-scoped, its own file rather than an addition to
   catalog/product_list.html's own inline <style> block: that template is
   already at DOCTRINE.md's ~300-line guideline before this feature, the
   exact reason kd-quotes.css was pulled into its own file for this site's
   quote-detail pages rather than grown inline (see that file's own header).
   Linked only from product_list.html, the one page that renders these
   classes.

   STRUCTURE, NOT PALETTE. Ported from the operator's concept
   (notes/mocks/catalogue-card-concept.html): the grid layout, the icon-swap
   on a real add, the hover inversion and the flat 0-radius are its shape.
   Every colour below is a --kd-* token, never a literal -- the concept's
   own #2563eb belongs to no site here and was not carried over.

   BLEEDS TO THE CARD'S EDGE by cancelling .kd-card's own padding on this one
   child rather than removing it for every other card user on the site --
   --kd-pad-card is a single token value, never a shorthand.
   ============================================================================ */

.kd-pn-actions {
    margin: var(--kd-s-4) calc(-1 * var(--kd-pad-card)) calc(-1 * var(--kd-pad-card));
    border-top: var(--kd-border-w) solid var(--kd-border);
}

.kd-pn-actions__form { display: block; }

.kd-pn-actions__cart {
    padding: 0 var(--kd-s-5);
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kd-s-3);
    border: 0;
    background: transparent;
    color: var(--kd-fg);
    font: inherit;
    font-size: var(--kd-text-0);
    font-weight: var(--kd-w-medium);
    cursor: pointer;
    transition: background-color var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease);
}
.kd-pn-actions__cart:hover { background: var(--kd-fg); color: var(--kd-bg); }
.kd-pn-actions.is-added .kd-pn-actions__cart { background: var(--kd-fg); color: var(--kd-bg); }
.kd-pn-actions__cart > * { pointer-events: none; }

.kd-pn-actions__icon { width: 17px; height: 17px; flex: none; }
.kd-pn-actions__icon--check { display: none; }
.kd-pn-actions.is-added .kd-pn-actions__icon--cart { display: none; }
.kd-pn-actions.is-added .kd-pn-actions__icon--check { display: block; }


/* "View options" / "Sign in" -- one control spanning the full width, used
   whenever a card cannot offer a single unambiguous add (see
   commerce.buy_options_services.card_actions's own docstring on the rule). */
.kd-pn-actions__cta {
    grid-column: 1 / -1;
    height: 54px;
    padding: 0 var(--kd-s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kd-s-3);
    color: var(--kd-fg);
    text-decoration: none;
    font-size: var(--kd-text-0);
    font-weight: var(--kd-w-medium);
    transition: background-color var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease);
}
.kd-pn-actions__cta:hover { background: var(--kd-fg); color: var(--kd-bg); }
.kd-pn-actions__cta svg { width: 17px; height: 17px; }

.kd-pn-actions__cart:focus-visible,
.kd-pn-actions__cta:focus-visible {
    outline: 2px solid var(--kd-accent);
    outline-offset: -3px;
}

/* The info link inside the card, now a sibling of the action bar rather
   than the whole card -- see product_list.html's own comment on why. */
.kd-pn-product__link, .kd-pn-row__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* ---- Table's compact equivalent: one icon control in a trailing cell,
   never a 54px bar a row cannot host. ---- */
.kd-pn-table__action { text-align: right; white-space: nowrap; }
.kd-pn-table__action-btn {
    /* --kd-touch-min on both axes -- this codebase's own touch-target
     * floor (kd-tokens.css, kd-commerce.css's own .kd-pn-qty__step); a
     * smaller icon button here would be exactly the class of defect
     * e2e/layout_guard.py's touch-target check exists to catch. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--kd-touch-min);
    height: var(--kd-touch-min);
    border: var(--kd-border-w) solid var(--kd-border);
    background: transparent;
    color: var(--kd-fg);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease);
}
.kd-pn-table__action-btn:hover { background: var(--kd-fg); color: var(--kd-bg); }
.kd-pn-table__action.is-added .kd-pn-table__action-btn { background: var(--kd-fg); color: var(--kd-bg); }
.kd-pn-table__action.is-added .kd-pn-actions__icon--cart { display: none; }
.kd-pn-table__action.is-added .kd-pn-actions__icon--check { display: block; }
.kd-pn-table__action-btn:focus-visible { outline: 2px solid var(--kd-accent); outline-offset: -3px; }
/* The GLYPH, not the target: with no rule of its own this svg rendered at
 * 42x42 inside its 44x44 button -- the same defect measured and fixed on
 * khouse's twin stylesheet (not shared between sites, so it needed its own
 * fix here too). Shrinking the button to fit the glyph would drop it below
 * --kd-touch-min; the floor stays, the icon matches its 17px sibling
 * (.kd-pn-actions__icon above) instead. */
.kd-pn-table__action-btn svg { width: 17px; height: 17px; }