/* ==========================================================================
   KahunaCart storefront layer
   --------------------------------------------------------------------------
   Dresses the /shop routes — listing, category, search, product, cart,
   checkout, receipt, account, and the sign-in screens a shopper passes
   through — in the kahunacart.com identity defined in css/kahuna.css.

   Two mechanisms, in this order of preference:

   1. The token bridge below. The plugin's own stylesheet
      (plugin://kahunacart/assets/kahunacart.css) resolves every internal
      value through --kahunacart-* first, so naming a token here re-colours
      storefront markup this file never mentions — the invoice, the download
      list, the address book. That is how pages nobody has themed still
      arrive on-brand.

   2. Rules under `.kc-storefront`, for the pages whose *layout* had to change
      rather than their colour: a shop with a real masthead, a product page
      with a gallery beside its buy box, a checkout with a summary that follows
      you down the page.

   `.kc-storefront` is the <main> of partials/base-shop.html.twig, so it holds
   every storefront page whether or not this theme has forked its template —
   which is why the account area, the invoice, and anything a later plugin
   release adds are dressed here without a template of their own. A page the
   theme has not forked is also given a container by the `:not(.kc-shop)` rule
   at the end of this section, since the plugin's own templates emit no wrapper
   and would otherwise run edge to edge.

   Load order: this file is registered at a lower priority than the plugin's
   stylesheet so it emits afterwards, and every rule is scoped under
   .kc-storefront or a kc- component class so it also out-specifies the
   plugin's deliberately-weak `:where()` fallbacks. Either alone would do; both
   together mean a change to the plugin's asset priority cannot quietly undress
   the store.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Token bridge — the whole hand-off to the plugin's stylesheet
   --------------------------------------------------------------------------
   Split by job, the way the plugin uses them: --accent is ink and borders,
   --accent-strong is the only one that ever fills a box. Lagoon reads as the
   store's voice, Board is reserved for the thing you click.
   -------------------------------------------------------------------------- */

:root {
    --kahunacart-fg: var(--ks-koa);
    --kahunacart-bg: var(--ks-salt);
    --kahunacart-muted: var(--ks-koa-soft);
    --kahunacart-subtle: var(--ks-koa-soft);
    --kahunacart-border: var(--ks-line);
    --kahunacart-border-strong: #D6C3A4;

    --kahunacart-accent: var(--ks-lagoon);
    --kahunacart-accent-ink: var(--ks-lagoon-deep);
    --kahunacart-accent-strong: var(--ks-board);
    --kahunacart-on-accent-strong: #FFF6EA;

    --kahunacart-surface: var(--ks-sand);
    --kahunacart-surface-2: var(--ks-sand-soft);
    --kahunacart-surface-sunk: var(--ks-sand-deep);
    --kahunacart-card: var(--ks-card);
    --kahunacart-input: #FFFFFF;

    --kahunacart-radius: 10px;
    --kahunacart-radius-lg: 16px;
    --kahunacart-card-ratio: 4 / 3;
    --kahunacart-font-mono: var(--ks-mono);

    --kahunacart-success: #2E6B47;
    --kahunacart-warning: #8A4A12;
    --kahunacart-danger: #A32E12;

    --kahunacart-ease: ease;
    --kahunacart-duration: 140ms;
}


/* --------------------------------------------------------------------------
   2. Header cart pill
   --------------------------------------------------------------------------
   Sits in the branded bar on every page, beside the CTA. Sand ground so it
   reads as a control rather than a second call to action — the count badge is
   the only Board on it, and only once there is something to count.
   -------------------------------------------------------------------------- */

.kc-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-cart-link:hover { background: var(--ks-sand); border-color: #D6C3A4; color: var(--ks-koa); }
.kc-cart-link svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kc-cart-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    min-width: 20px;
    padding: 4px 6px;
    border-radius: 999px;
    text-align: center;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    font-variant-numeric: tabular-nums;
}
.kc-cart-link.kc-has-items .kc-cart-count { background: var(--ks-board); color: #FFF6EA; }

/* The account control beside it: same pill, icon only. */
.kc-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-account-link:hover { background: var(--ks-sand); border-color: #D6C3A4; }
.kc-account-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kc-account-link img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Anywhere the bar is not at its full 1120px the cart gives up its label and
   the row tightens, which is what keeps the inline nav links alive down to
   1000px rather than losing them at 1200 — see the matching note in
   css/kahuna.css. */
@media (max-width: 1200px) {
    .kc-nav-in { gap: 20px; }
    .kc-cart-link { padding: 8px 11px; gap: 6px; }
    .kc-cart-label { display: none; }
}

/* Two controls went into a bar that was already full, and on a phone the CTA
   ran off the right edge. The lockup gives up room first — it is the one
   element on the row that is not a destination — and below 400px it comes down
   to the bus, which is the mark people recognise anyway. Nothing is hidden
   that a customer needs: the cart, the account and the CTA all survive. */
@media (max-width: 600px) {
    .kc-nav-in { gap: 10px; }
    .kc-nav-in .kc-brand { min-width: 0; gap: 9px; }
    .kc-nav-in .kc-brand i { width: 38px; height: 38px; }
    .kc-nav-in .kc-brand b { font-size: 19px; }
    .kc-account-link { width: 34px; height: 34px; }
    .kc-cart-link { padding: 7px 9px; }
    .kc-cart-count { min-width: 18px; padding: 3px 5px; font-size: 11px; }
    .kc-nav-in .kc-btn-small { padding: 8px 13px; font-size: 13px; }
}
/* 430px (the widest iPhone) still has room for the wordmark once everything
   above has tightened; 390px does not. */
@media (max-width: 400px) {
    .kc-nav-in .kc-brand b { display: none; }
}

/* A documentation page's bar carries a control the others do not — the search
   button, ~96px of it — and with the cart and account beside it the row went
   over even at full width. So a docs bar runs permanently on the tighter
   settings the others only adopt below 1200px. */
.kc-nav-docs .kc-nav-in { gap: 20px; }
.kc-nav-docs .kc-cart-label { display: none; }
.kc-nav-docs .kc-cart-link { padding: 8px 11px; gap: 6px; }

/* For the same reason the inline links hand over to the scrolling row 100px
   earlier on docs than the 1000px the other shells use — at 1024, the width of
   every landscape tablet, the docs row was still ~40px over. */
@media (max-width: 1100px) {
    .kc-nav-docs .kc-nav-item { display: none; }
    .kc-nav-docs .kc-nav-mobile { display: block; border-top: 1px solid var(--ks-line); padding-top: 8px; }
}

/* And the wordmark has to go a good deal sooner there, or the CTA wraps onto
   two lines and the lockup is clipped. */
@media (max-width: 640px) {
    .kc-nav-docs .kc-brand b { display: none; }
}

/* Even wordmark-less, a docs bar at 390px is six controls in 342px of gutter
   and lands about 8px over. The bar — and only the bar — trades 8px of gutter
   each side for it; the page's own .kc-wrap keeps its 24px. */
@media (max-width: 430px) {
    .kc-nav .kc-nav-in,
    .kc-nav .kc-nav-mobile-in { padding-left: 16px; padding-right: 16px; }
    .kc-nav-in { gap: 9px; }
}

/* 360px — the smallest phone still worth designing for — needs one more pass,
   and only on docs, where the burger and the search button are both present. */
@media (max-width: 380px) {
    .kc-nav-docs .kc-account-link { width: 30px; height: 30px; }
    .kc-nav-docs .kc-cart-link { padding: 6px 8px; }
    .kc-nav-docs .kc-btn-small { padding: 7px 10px; font-size: 12.5px; }
}

.kc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   3. Shop shell
   --------------------------------------------------------------------------
   The masthead band is Sand-soft against the Salt page, which is the same
   move /pricing makes to separate a hero from the cards below it.
   -------------------------------------------------------------------------- */

.kc-shop-hero {
    background: var(--ks-sand-soft);
    border-bottom: 1px solid var(--ks-line);
    padding: 52px 0 44px;
}
.kc-shop-hero-in {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.kc-shop-hero-text { flex: 1 1 380px; min-width: 0; }
.kc-shop-hero h1 {
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 12px;
}
.kc-shop-hero .kc-intro { margin: 0; max-width: 54ch; }
.kc-shop-hero-search { flex: 0 1 380px; min-width: 260px; }

/* A narrower masthead for the pages that are a step in a flow rather than a
   place to browse — cart, checkout, receipt, account, sign-in. */
.kc-shop-hero.kc-shop-hero--flow { padding: 44px 0 36px; }
.kc-shop-hero.kc-shop-hero--flow h1 { font-size: clamp(28px, 3.6vw, 38px); }

.kc-shop {
    background: var(--ks-salt);
    padding: 40px 0 88px;
}

/* Storefront pages this theme has not forked — the account area, the invoice,
   whatever a later plugin release adds. The plugin's templates emit a bare
   `.kahunacart` section with no container of its own, so it is given one here
   rather than being left to run the full width of the window. Pages that *are*
   forked carry .kc-shop and bring their own .kc-wrap, hence the :not(). */
.kc-storefront > .kahunacart:not(.kc-shop) {
    display: block;
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 24px 88px;
}
.kc-storefront > .kahunacart:not(.kc-shop) > h1 {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--ks-koa);
}
/* No align-items:start on these: a sticky child cannot travel when its
   track is sized to its own content, and the sidebar and the order summary
   both scrolled away with the page. None of these asides paints anything
   itself, so a stretched column is invisible. */
.kc-shop-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 44px;
}
.kc-shop-layout.kc-shop-layout--flat { grid-template-columns: minmax(0, 1fr); }
.kc-shop-aside { position: sticky; top: calc(var(--ks-nav-h) + 20px); }
.kc-shop-main { min-width: 0; }

@media (max-width: 900px) {
    .kc-shop-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .kc-shop-aside { position: static; }
    .kc-shop-hero { padding: 36px 0 32px; }
    .kc-shop-hero-in { align-items: stretch; gap: 24px; }
    .kc-shop-hero-search { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   4. Shared shop furniture
   -------------------------------------------------------------------------- */

.kc-shop-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
}
.kc-shop-panel + .kc-shop-panel { margin-top: 16px; }
.kc-shop-panel-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-shop-panel--sticky { position: sticky; top: calc(var(--ks-nav-h) + 20px); }

/* The listing writes its own count; the search results region carries the
   plugin's, which says how many matched what — so both wear the same label. */
.kc-shop-count,
.kc-storefront .kahunacart-search-summary {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 18px;
}
.kc-storefront .kahunacart-search-more,
.kc-storefront .kahunacart-listing-more { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

.kc-shop-empty {
    background: var(--ks-card);
    border: 1px dashed var(--ks-line);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    color: var(--ks-koa-soft);
    font-size: 16px;
}
.kc-shop-empty p { margin: 0 0 18px; }
.kc-shop-empty p:last-child { margin: 0; }

.kc-shop-back { margin: 28px 0 0; font-size: 14.5px; }
.kc-shop-back a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-shop-back a:hover { color: var(--ks-lagoon); }

.kc-shop-note { font-size: 14px; color: var(--ks-koa-soft); margin: 18px 0 0; }

/* Flash messages. The plugin names the scope; each one gets its own tint. */
.kc-storefront .kahunacart-messages { margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.kc-storefront .kahunacart-message {
    margin: 0;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-sand);
    color: var(--ks-koa);
    font-size: 14.5px;
}
.kc-storefront .kahunacart-message--success { background: var(--ks-lagoon-mist); border-color: #BBD5D2; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-message--error { background: #F8E2D8; border-color: #E8C3B2; color: #8E2A10; }
.kc-storefront .kahunacart-message--warning { background: #F5E6CE; border-color: #E3CBA1; color: #7A4410; }

/* Buttons. The plugin's templates use the bare `.button` class every Grav
   theme is expected to define; this is that definition, in Board. */
.kc-storefront .button,
.kc-shop-hero .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    padding: 12px 22px;
    border-radius: 11px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}
.kc-storefront .button:hover,
.kc-shop-hero .button:hover { background: var(--ks-board-deep); color: #FFF6EA; transform: translateY(-1px); }

.kc-storefront .kc-btn-ghost,
.kc-storefront .button.kc-btn-ghost {
    background: transparent;
    color: var(--ks-koa);
    border: 1.5px solid var(--ks-koa);
}
.kc-storefront .kc-btn-ghost:hover,
.kc-storefront .button.kc-btn-ghost:hover { background: var(--ks-sand); color: var(--ks-koa); }

.kc-storefront .kc-btn-block { display: block; width: 100%; text-align: center; }

/* Form controls, shared by the checkout, the cart, the filters and the
   estimate box. Inputs are white against the warm grounds so a field always
   reads as somewhere to type. */
.kc-storefront .kc-input,
.kc-storefront input[type="text"],
.kc-storefront input[type="email"],
.kc-storefront input[type="tel"],
.kc-storefront input[type="search"],
.kc-storefront input[type="number"],
.kc-storefront input[type="password"],
.kc-storefront select,
.kc-storefront textarea,
.kc-shop-hero input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kc-input:focus,
.kc-storefront input:focus,
.kc-storefront select:focus,
.kc-storefront textarea:focus,
.kc-shop-hero input[type="search"]:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
.kc-storefront ::placeholder { color: #A8917A; }

.kc-storefront .kc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}

/* Tick boxes and radios.
   Helios's Tailwind forms layer already paints these with appearance:none and
   an explicit 1rem box, and fills a checked one from `color` rather than
   accent-color — so this re-points that fill at Lagoon and softens the border
   to the brand line, and must never set `width: auto`, which on a box with no
   native appearance collapses it to its own borders. */
.kc-storefront input[type="checkbox"],
.kc-storefront input[type="radio"],
.kc-auth-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    color: var(--ks-lagoon);
    border-color: #C0AB92;
    cursor: pointer;
}
.kc-storefront input[type="checkbox"] { border-radius: 5px; }
.kc-storefront input[type="checkbox"]:focus,
.kc-storefront input[type="radio"]:focus {
    --tw-ring-color: var(--ks-lagoon);
    border-color: var(--ks-lagoon);
}

.kc-storefront .kc-fieldset {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
.kc-storefront .kc-legend {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    padding: 0;
    margin: 0 0 18px;
    float: left;
    width: 100%;
}
.kc-storefront .kc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    clear: both;
}
.kc-storefront .kc-field { margin: 0; }
.kc-storefront .kc-field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .kc-storefront .kc-field-grid { grid-template-columns: 1fr; } }

.kc-storefront .kc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--ks-koa);
    margin: 14px 0 0;
    cursor: pointer;
}
.kc-storefront .kc-checkbox input { margin: 2px 0 0; flex: none; }

.kc-storefront .kc-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 8px 0 0; }
.kc-storefront .kc-hint--warn { color: #8A4A12; }

/* Radio rows: payment providers, shipping methods. */
.kc-storefront .kc-choice-list { display: flex; flex-direction: column; gap: 10px; clear: both; }
.kc-storefront .kc-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    background: var(--ks-salt);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
}
.kc-storefront .kc-choice:hover { border-color: #D6C3A4; }
.kc-storefront .kc-choice input { flex: none; }
.kc-storefront .kc-choice:has(input:checked) {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
}
.kc-storefront .kc-choice-label { flex: 1 1 auto; font-weight: 600; }
.kc-storefront .kc-choice-price { font-family: var(--ks-mono); font-size: 14px; color: var(--ks-koa-soft); }

/* The receipt maths block, shared by cart, checkout and the order page. */
.kc-storefront .kahunacart-totals {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.kc-storefront .kahunacart-totals th,
.kc-storefront .kahunacart-totals td {
    padding: 9px 0;
    text-align: left;
    font-weight: 500;
    color: var(--ks-koa-soft);
    border: 0;
}
.kc-storefront .kahunacart-totals td { text-align: right; font-family: var(--ks-mono); color: var(--ks-koa); font-variant-numeric: tabular-nums; }
.kc-storefront .kahunacart-totals .kahunacart-total th,
.kc-storefront .kahunacart-totals .kahunacart-total td {
    border-top: 1px solid var(--ks-line);
    padding-top: 14px;
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ks-koa);
    letter-spacing: -0.01em;
}
.kc-storefront .kahunacart-totals .kahunacart-total td { color: var(--ks-board); }
.kc-storefront .kahunacart-adjustment em { font-style: normal; font-size: 12px; color: #A8917A; }


/* --------------------------------------------------------------------------
   5. Storefront search box
   --------------------------------------------------------------------------
   The plugin's own partial, dressed. Field and button share one rounded
   shell so the masthead reads as a single control.
   -------------------------------------------------------------------------- */

.kc-shop-search .kahunacart-search { display: flex; gap: 0; margin: 0; }
.kc-shop-search .kahunacart-search-field { flex: 1 1 auto; min-width: 0; display: block; margin: 0; }
.kc-shop-search input[type="search"] {
    border-radius: 11px 0 0 11px;
    border-right: 0;
    height: 46px;
}
.kc-shop-search .button {
    flex: none;
    border-radius: 0 11px 11px 0;
    height: 46px;
    padding: 0 20px;
}
.kc-shop-search .button:hover { transform: none; }
.kc-storefront .kahunacart-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. Catalog sidebar
   --------------------------------------------------------------------------
   The plugin's category tree and filter panel, included unmodified and
   dressed here — the same arrangement the demo theme uses, so a change in the
   plugin's markup does not need a fork to be picked up.
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-catalog-nav { display: flex; flex-direction: column; gap: 28px; }

.kc-storefront .kahunacart-nav-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ks-line);
}

.kc-storefront .kahunacart-cat-list { list-style: none; margin: 0; padding: 0; }
.kc-storefront .kahunacart-cat-list .kahunacart-cat-list { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-cat-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.kc-storefront .kahunacart-cat-branch { width: 100%; }
.kc-storefront .kahunacart-cat-summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.kc-storefront .kahunacart-cat-summary::-webkit-details-marker { display: none; }
.kc-storefront .kahunacart-cat-summary::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-right: 1.5px solid var(--ks-koa-soft);
    border-bottom: 1.5px solid var(--ks-koa-soft);
    transform: rotate(-45deg);
    transition: transform 140ms ease;
}
.kc-storefront details[open] > .kahunacart-cat-summary::before { transform: rotate(45deg); }

.kc-storefront .kahunacart-cat-link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--ks-koa);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
}
.kc-storefront .kahunacart-cat-link:hover { background: var(--ks-sand); color: var(--ks-lagoon); }
.kc-storefront .kahunacart-cat-link.is-current { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-cat-count,
.kc-storefront .kahunacart-filter-count {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    color: #A8917A;
    font-variant-numeric: tabular-nums;
}

.kc-storefront .kahunacart-filters { margin: 0; }
.kc-storefront .kahunacart-filter-group { border: 0; margin: 0 0 20px; padding: 0; }
.kc-storefront .kahunacart-filter-group legend {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    padding: 0;
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-filter-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-storefront .kahunacart-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ks-koa);
    padding: 4px 0;
    cursor: pointer;
}
.kc-storefront .kahunacart-filter-option input { flex: none; }
.kc-storefront .kahunacart-filter-option > span:not(.kahunacart-filter-count) { flex: 1 1 auto; }

.kc-storefront .kahunacart-filter-range { display: flex; align-items: center; gap: 8px; }
.kc-storefront .kahunacart-filter-field { flex: 1 1 0; min-width: 0; }
.kc-storefront .kahunacart-filter-dash { color: var(--ks-koa-soft); flex: none; }
.kc-storefront .kahunacart-filter-price input { padding: 9px 11px; font-size: 14px; }

.kc-storefront .kahunacart-filter-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kc-storefront .kahunacart-filter-actions .button { padding: 10px 18px; font-size: 14px; }
.kc-storefront .kahunacart-filter-clear { font-size: 13.5px; color: var(--ks-koa-soft); text-decoration: underline; }


/* --------------------------------------------------------------------------
   7. Product grid
   -------------------------------------------------------------------------- */

.kc-shop-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-shop-grid, .kc-shop-layout--flat .kc-shop-grid { grid-template-columns: minmax(0, 1fr); } }

.kc-pcard {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.kc-pcard:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); border-color: #D6C3A4; }
.kc-pcard.is-sold-out { opacity: 0.72; }

.kc-pcard-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.kc-pcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--ks-sand);
    border-bottom: 1px solid var(--ks-line);
    overflow: hidden;
}
.kc-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A product with no picture gets a tonal tile carrying its monogram, in a hue
   picked from its id and held inside the warm band — 15deg to 75deg, rust
   through sand to olive — so a catalog that has never uploaded an image still
   reads as a catalog rather than a list of holes. */
.kc-pcard-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(150deg,
            hsl(var(--ks-tile-hue, 30) 42% 88%),
            hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-pcard-mono {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -0.02em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.5);
}

.kc-pcard-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kc-badge {
    font-family: var(--ks-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--ks-card);
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
}
.kc-badge--sale { background: var(--ks-board); color: #FFF6EA; border-color: var(--ks-board); }
.kc-badge--sold-out { background: var(--ks-koa); color: var(--ks-sand); border-color: var(--ks-koa); }
.kc-badge--digital { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

.kc-pcard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.kc-pcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kc-pcard-title {
    font-family: var(--ks-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ks-koa);
    margin: 0;
    min-width: 0;
}
.kc-pcard-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ks-board);
    white-space: nowrap;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.kc-pcard-was { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; margin-left: 6px; font-weight: 400; }
.kc-pcard-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ks-koa-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kc-pcard-stock {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A4A12;
    margin-top: auto;
    padding-top: 4px;
}

/* Subcategory cards — the department landing page, same card language. */
.kc-storefront .kahunacart-subcategory-grid {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-storefront .kahunacart-subcategory-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-subcategory-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kc-storefront .kahunacart-subcategory-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43, 28, 12, 0.08); }
.kc-storefront .kahunacart-subcategory-link { display: block; padding: 18px; text-decoration: none; color: inherit; }
.kc-storefront .kahunacart-subcategory-media { margin: -18px -18px 14px; }
.kc-storefront .kahunacart-subcategory-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.kc-storefront .kahunacart-subcategory-title { font-family: var(--ks-display); font-size: 16.5px; font-weight: 700; margin: 0 0 4px; }
.kc-storefront .kahunacart-subcategory-count { font-family: var(--ks-mono); font-size: 11.5px; color: var(--ks-koa-soft); }


/* --------------------------------------------------------------------------
   8. Product page
   -------------------------------------------------------------------------- */

.kc-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
}
/* The column stretches so the sticky box inside it has somewhere to travel;
   the bordered box stays the height of the picture rather than growing into a
   tall empty card beside a long description. */
.kc-product-media-col { min-width: 0; }
@media (max-width: 900px) { .kc-product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.kc-product-media {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--ks-nav-h) + 20px);
}
@media (max-width: 900px) { .kc-product-media { position: static; } }

.kc-product-media .kahunacart-gallery { margin: 0; }
.kc-product-media .kahunacart-gallery-main {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.kc-product-media .kahunacart-gallery-main::-webkit-scrollbar { display: none; }
.kc-product-media .kahunacart-gallery-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
.kc-product-media .kahunacart-gallery-slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kc-product-media .kahunacart-gallery-thumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--ks-line);
    overflow-x: auto;
}
.kc-product-media .kahunacart-gallery-thumbs img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--ks-line);
    display: block;
}

/* The stand-in when a product has no pictures at all. */
.kc-product-ph {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg,
        hsl(var(--ks-tile-hue, 30) 42% 88%),
        hsl(var(--ks-tile-hue, 30) 34% 80%));
}
.kc-product-ph span {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 84px;
    letter-spacing: -0.03em;
    color: hsl(var(--ks-tile-hue, 30) 38% 34% / 0.45);
}

.kc-product-info { min-width: 0; }
.kc-product-title {
    font-family: var(--ks-display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--ks-koa);
}
.kc-product-summary { font-size: 17px; line-height: 1.55; color: var(--ks-koa-soft); margin: 0 0 24px; }
.kc-product-desc { font-size: 15.5px; color: var(--ks-koa); margin: 24px 0 0; }
.kc-product-desc h2 { font-size: 21px; font-weight: 800; margin: 28px 0 10px; }
.kc-product-desc h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.kc-product-desc p { margin: 0 0 14px; }
.kc-product-desc ul, .kc-product-desc ol { margin: 0 0 14px; padding-left: 20px; }
.kc-product-desc li { margin-bottom: 6px; }
.kc-product-desc code { font-family: var(--ks-mono); font-size: 0.92em; background: var(--ks-sand); border-radius: 6px; padding: 2px 6px; }
.kc-product-desc pre { background: var(--ks-koa); color: #E8DECF; border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.kc-product-desc pre code { background: none; padding: 0; color: inherit; }

/* The buy box: the one panel on the page that fills with Board. */
.kc-product-buy {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 22px;
    margin: 0 0 24px;
}
/* The plugin gives the buy form its own bordered surface, which inside this
   panel would read as a box in a box. The panel is the box; the form is
   flattened into it. */
.kc-product-buy .kahunacart-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}
.kc-product-buy .kahunacart-options,
.kc-product-buy .kahunacart-variant-picker { flex: 1 1 100%; }
.kc-product-buy .kahunacart-option { margin: 0 0 14px; }
.kc-product-buy .kahunacart-option-name {
    display: block;
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 8px;
}
.kc-product-buy .kahunacart-option-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-product-buy .kahunacart-option-choice {
    font-family: var(--ks-body);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--ks-line);
    background: var(--ks-salt);
    color: var(--ks-koa);
    cursor: pointer;
}
.kc-product-buy .kahunacart-option-choice[aria-checked="true"] {
    border-color: var(--ks-lagoon);
    background: var(--ks-lagoon-mist);
    color: var(--ks-lagoon-deep);
}
.kc-product-buy .kahunacart-price {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ks-board);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kc-product-buy .kahunacart-compare-price { font-family: var(--ks-mono); font-size: 16px; color: #A8917A; }
.kc-product-buy .kahunacart-qty { flex: none; margin: 0; }
.kc-product-buy .kahunacart-qty input { width: 72px; text-align: center; }
.kc-product-buy .button { margin-left: auto; padding: 13px 26px; }
.kc-product-buy select { max-width: 100%; }

/* Tags: a way of narrowing the catalog, so they are chips, not headings. */
.kc-storefront .kahunacart-tags { margin: 26px 0 0; }
.kc-storefront .kahunacart-tags-title {
    font-family: var(--ks-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.kc-storefront .kahunacart-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    color: var(--ks-koa-soft);
    text-decoration: none;
}
.kc-storefront .kahunacart-tag:hover { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); border-color: #BBD5D2; }

/* Breadcrumbs, above the product title. */
.kc-storefront .kahunacart-breadcrumbs { margin: 0 0 18px; }
.kc-storefront .kahunacart-breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
}
.kc-storefront .kahunacart-breadcrumb-item + .kahunacart-breadcrumb-item::before {
    content: "/";
    color: #C0AB92;
    margin-right: 8px;
}
.kc-storefront .kahunacart-breadcrumb-item a { color: var(--ks-koa-soft); text-decoration: none; font-weight: 600; }
.kc-storefront .kahunacart-breadcrumb-item a:hover { color: var(--ks-lagoon); }


/* --------------------------------------------------------------------------
   9. Cart
   -------------------------------------------------------------------------- */

.kc-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-cart-table { width: 100%; border-collapse: collapse; }
.kc-cart-table thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-cart-table thead th.kc-num,
.kc-cart-table td.kc-num { text-align: right; }
.kc-cart-table tbody td {
    padding: 18px 12px;
    border-bottom: 1px solid var(--ks-line);
    font-size: 15px;
    vertical-align: middle;
}
.kc-cart-table tbody tr:last-child td { border-bottom: 0; }
.kc-cart-table td:first-child, .kc-cart-table th:first-child { padding-left: 0; }
.kc-cart-table td:last-child, .kc-cart-table th:last-child { padding-right: 0; }

.kc-cart-item-title { display: block; font-weight: 600; color: var(--ks-koa); }
.kc-cart-item-sku { display: block; font-family: var(--ks-mono); font-size: 12px; color: #A8917A; margin-top: 3px; }
.kc-cart-table td.kc-num { font-family: var(--ks-mono); font-variant-numeric: tabular-nums; color: var(--ks-koa); }
.kc-cart-line-total { font-weight: 600; }
.kc-storefront .kc-qty-input { width: 68px; text-align: center; padding: 8px 6px; }

.kc-storefront .kc-remove {
    background: none;
    border: 1px solid transparent;
    color: #A8917A;
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .kc-remove:hover { background: #F8E2D8; color: #8E2A10; border-color: #E8C3B2; }

.kc-cart-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* The discount form and the estimate box, dressed inside their panels. */
/* The plugin gives this form a dashed surface of its own, which inside the
   panel would be a box in a box; and its label repeats the panel's heading
   word for word, so the label is left for screen readers only. */
.kc-storefront .kahunacart-coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.kc-storefront .kahunacart-coupon > label[for="kahunacart-coupon-code"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.kc-storefront .kahunacart-coupon input { flex: 1 1 140px; min-width: 0; }
.kc-storefront .kahunacart-coupon .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-coupon-remove { background: transparent; color: var(--ks-koa-soft); border: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-coupon-remove:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .kahunacart-coupon-active {
    font-family: var(--ks-mono);
    font-size: 12px;
    color: var(--ks-lagoon-deep);
    background: var(--ks-lagoon-mist);
    border-radius: 8px;
    padding: 8px 11px;
    margin: 0 0 14px;
}

.kc-storefront .kahunacart-estimate-title {
    font-family: var(--ks-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-lagoon);
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-estimate-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.kc-storefront .kahunacart-estimate-field { flex: 1 1 100%; }
.kc-storefront .kahunacart-estimate-field > span:first-child { display: block; font-size: 13px; font-weight: 600; color: var(--ks-koa-soft); margin: 0 0 6px; }
.kc-storefront .kahunacart-estimate-form .button { flex: none; padding: 11px 18px; font-size: 14px; }
.kc-storefront .kahunacart-estimate-result { margin: 14px 0 0; font-size: 14px; }
.kc-storefront .kahunacart-estimate-hint { font-size: 13.5px; color: var(--ks-koa-soft); margin: 12px 0 0; }


/* --------------------------------------------------------------------------
   10. Checkout
   -------------------------------------------------------------------------- */

/* The plugin caps .kahunacart-checkout-form at 42rem, which is right for the
   single stacked column it ships and wrong for two — without the reset the
   form never grows past 672px and the summary sits in the middle of the page
   with the right third empty. Same story for the one-message pages below. */
.kc-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 40px;
    max-width: none;
}
@media (max-width: 960px) { .kc-checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.kc-checkout-main { min-width: 0; }
.kc-checkout-aside { min-width: 0; }

.kc-summary-items { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--ks-line); display: flex; flex-direction: column; gap: 12px; }
.kc-summary-item { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.kc-summary-item-title { color: var(--ks-koa); min-width: 0; }
.kc-summary-qty { font-family: var(--ks-mono); font-size: 12.5px; color: #A8917A; }
.kc-summary-item-total { font-family: var(--ks-mono); color: var(--ks-koa); white-space: nowrap; font-variant-numeric: tabular-nums; }

.kc-checkout-aside .kc-shop-panel .button { margin-top: 18px; }
.kc-checkout-aside .kc-shop-back { text-align: center; margin-top: 16px; }

/* The address-check panel, when a geocoder proposes a correction. */
.kc-storefront .kahunacart-address-suggestion {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0 0 20px;
    grid-column: 1 / -1;
}
.kc-storefront .kahunacart-address-suggestion h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--ks-lagoon-deep); }

.kc-storefront .kahunacart-shipping-address,
.kc-storefront .kahunacart-shipping-methods { clear: both; }


/* --------------------------------------------------------------------------
   11. Receipt, processing, denied
   -------------------------------------------------------------------------- */

.kc-order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}
@media (max-width: 960px) { .kc-order-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.kc-order-meta { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0 0 24px; }
.kc-order-meta div { display: flex; flex-direction: column; gap: 4px; }
.kc-order-meta dt,
.kc-order-meta .kc-order-meta-label {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
}
.kc-order-meta dd,
.kc-order-meta .kc-order-meta-value {
    margin: 0;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}

.kc-order-items { width: 100%; border-collapse: collapse; }
.kc-order-items thead th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-order-items thead th:last-child, .kc-order-items td:last-child { text-align: right; padding-right: 0; }
.kc-order-items th:first-child, .kc-order-items td:first-child { padding-left: 0; }
.kc-order-items tbody td { padding: 15px 12px; border-bottom: 1px solid var(--ks-line); font-size: 15px; }
.kc-order-items tbody tr:last-child td { border-bottom: 0; }

.kc-storefront .kahunacart-status {
    display: inline-block;
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ks-sand-deep);
    color: var(--ks-koa-soft);
    margin-right: 5px;
}
.kc-storefront .kahunacart-status--paid,
.kc-storefront .kahunacart-status--completed { background: var(--ks-lagoon-mist); color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-status--shipped { background: #F3DEC9; color: #8A4A12; }
.kc-storefront .kahunacart-status--refunded,
.kc-storefront .kahunacart-status--cancelled,
.kc-storefront .kahunacart-status--failed { background: #F8E2D8; color: #8E2A10; }

.kc-storefront .kahunacart-download-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kc-storefront .kahunacart-download {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .kahunacart-download > a { font-weight: 700; color: var(--ks-lagoon); text-decoration: none; }
.kc-storefront .kahunacart-download > a:hover { text-decoration: underline; }
.kc-storefront .kahunacart-download-meta,
.kc-storefront .kahunacart-release-version { font-family: var(--ks-mono); font-size: 12px; color: var(--ks-koa-soft); }

.kc-storefront .kahunacart-offline-instructions {
    background: var(--ks-sand);
    border: 1px solid var(--ks-line);
    border-left: 3px solid var(--ks-board);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 24px;
    font-size: 15px;
}

.kc-order-links { display: flex; flex-wrap: wrap; gap: 20px; margin: 28px 0 0; font-size: 14.5px; }
.kc-order-links a { color: var(--ks-lagoon); font-weight: 600; text-decoration: none; }
.kc-order-links a:hover { text-decoration: underline; }

.kc-storefront .kahunacart-account-offer {
    background: var(--ks-lagoon-mist);
    border: 1px solid #BBD5D2;
    border-radius: 16px;
    padding: 22px;
    margin: 24px 0 0;
}
.kc-storefront .kahunacart-account-offer-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--ks-lagoon-deep); }
.kc-storefront .kahunacart-account-offer-text { font-size: 14.5px; color: var(--ks-koa-soft); margin: 0 0 16px; }

/* A one-message page — payment in flight, or a download that cannot be
   honored — is centred rather than left in a wide empty column. */
.kc-storefront .kahunacart-processing,
.kc-storefront .kahunacart-denied { max-width: none; }

.kc-shop-notice {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 48px 32px;
}
.kc-shop-notice h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.kc-shop-notice p { font-size: 16px; color: var(--ks-koa-soft); margin: 0 0 20px; }
.kc-shop-notice p:last-child { margin: 0; }
.kc-shop-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 22px;
    border: 3px solid var(--ks-line);
    border-top-color: var(--ks-lagoon);
    border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .kc-shop-spinner { animation: kc-shop-spin 900ms linear infinite; }
    @keyframes kc-shop-spin { to { transform: rotate(360deg); } }
}


/* --------------------------------------------------------------------------
   12. Account area
   -------------------------------------------------------------------------- */

.kc-storefront .kahunacart-account-nav { margin: 0 0 28px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}
/* The plugin's base CSS underlines and pads the <li>; the underline here lives on
   the link/span, so the <li> is reset or the current tab shows two rules. */
.kc-storefront .kahunacart-account-nav-item { padding: 0; margin: 0; border: 0; }
.kc-storefront .kahunacart-account-nav-item a,
.kc-storefront .kahunacart-account-nav-item span {
    display: inline-block;
    padding: 11px 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.kc-storefront .kahunacart-account-nav-item a:hover { color: var(--ks-lagoon); }
.kc-storefront .kahunacart-account-nav-item--current span { color: var(--ks-koa); border-bottom-color: var(--ks-board); }
.kc-storefront .kahunacart-account-nav-item--logout { margin-left: auto; }
.kc-storefront .kahunacart-account-nav-item--logout a { color: #A32E12; }

.kc-storefront .kahunacart-account-panel {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 16px;
    padding: 24px 22px;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-panel > h2 {
    font-family: var(--ks-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}
.kc-storefront .kahunacart-account-identity { font-size: 15px; color: var(--ks-koa-soft); margin: 0 0 20px; }

/* Password and security. The form is the Login plugin's generic output inside
   an account panel; these rules name its classes (form-field, form-label,
   switch-toggle, twofa-*) rather than ones this theme controls. */
.kc-storefront .kahunacart-account-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity { margin: 0; line-height: 1.45; }
.kc-storefront .kahunacart-account-profile-header .kahunacart-account-identity strong {
    display: block;
    font-family: var(--ks-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
}
.kc-storefront .kahunacart-account-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--ks-salt), 0 0 0 4px var(--ks-line);
}

/* A form page, not a table page: the card is only as wide as a field wants to
   be, so an email address is not stretched across a 1100px input. */
.kc-storefront .kahunacart-account-panel--credentials { max-width: 680px; }
.kc-storefront .kahunacart-account-panel--credentials .form-field { margin: 0 0 18px; }
.kc-storefront .kahunacart-account-panel--credentials .form-label label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
}
.kc-storefront .kahunacart-account-panel--credentials .form-label .required { color: var(--ks-board); margin-left: 2px; }
.kc-storefront .kahunacart-account-panel--credentials .form-description {
    display: block;
    font-size: 13px;
    color: var(--ks-koa-soft);
    margin: 6px 0 0;
}
.kc-storefront .kahunacart-account-panel--credentials input[disabled] {
    background: var(--ks-sand-soft);
    color: var(--ks-koa-soft);
    cursor: not-allowed;
}
.kc-storefront .kahunacart-account-panel--credentials .form-errors { margin: 6px 0 0; font-size: 13px; }

/* The two-factor block is a Form plugin "section": an h3 over a .form-section. */
.kc-storefront .kahunacart-account-panel--credentials h3 {
    font-family: var(--ks-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ks-koa);
    margin: 26px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--ks-line);
}

/* The yes/no toggle: a segmented pill in the brand colours in place of the
   Form plugin's grey boxes. */
.kc-storefront .switch-toggle {
    display: inline-flex;
    padding: 3px;
    line-height: 1;
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 999px;
    overflow: hidden;
}
.kc-storefront .switch-toggle label {
    padding: 8px 18px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.kc-storefront .switch-toggle label:hover { color: var(--ks-koa); }
.kc-storefront .switch-toggle input:checked + label { background: var(--ks-sand-deep); color: var(--ks-koa); }
.kc-storefront .switch-toggle input.highlight:checked + label { background: var(--ks-lagoon); color: #FFFFFF; }

/* The secret: QR code beside its text form and the regenerate button. */
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    align-items: center;
    padding: 16px;
    background: var(--ks-sand-soft);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
}
.kc-storefront .twofa-secret img[data-2fa-image] {
    grid-row: span 2;
    width: 128px;
    height: 128px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--ks-line) !important;
    border-radius: 10px;
}
.kc-storefront .twofa-secret .form-input-wrapper.twofa-wrapper > div { font-size: 13.5px; color: var(--ks-koa-soft); align-self: end; }
.kc-storefront .twofa-secret .twofa-wrapper.danger { align-self: start; }
.kc-storefront .twofa-secret-code {
    display: block;
    margin-top: 4px;
    font-family: var(--ks-mono);
    font-size: 14.5px;
    letter-spacing: 0.06em;
    color: var(--ks-koa);
}
.kc-storefront .twofa-secret .button.button-small {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
}
.kc-storefront .twofa-secret .button.button-small:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-storefront .twofa-secret .fa { display: none; }

.kc-storefront .kahunacart-account-panel--credentials .buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-empty { color: var(--ks-koa-soft); font-size: 14.5px; margin: 0; }

.kc-storefront .kahunacart-account-orders,
.kc-storefront .kahunacart-account-downloads { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kc-storefront .kahunacart-account-orders th,
.kc-storefront .kahunacart-account-downloads th {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    text-align: left;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--ks-line);
}
.kc-storefront .kahunacart-account-orders td,
.kc-storefront .kahunacart-account-downloads td { padding: 14px 12px; border-bottom: 1px solid var(--ks-line); }
.kc-storefront .kahunacart-account-orders tr:last-child td { border-bottom: 0; }
.kc-storefront .kahunacart-account-orders th:first-child,
.kc-storefront .kahunacart-account-orders td:first-child { padding-left: 0; }
.kc-storefront .kahunacart-account-orders a { color: var(--ks-lagoon); font-weight: 700; text-decoration: none; }

.kc-storefront .kahunacart-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .kc-storefront .kahunacart-address-grid { grid-template-columns: minmax(0, 1fr); } }
.kc-storefront .kahunacart-address-card {
    background: var(--ks-salt);
    border: 1px solid var(--ks-line);
    border-radius: 12px;
    padding: 18px;
}
.kc-storefront .kahunacart-address-card h3 {
    font-family: var(--ks-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ks-koa-soft);
    margin: 0 0 10px;
}
.kc-storefront .kahunacart-address { font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ks-koa); }


/* --------------------------------------------------------------------------
   13. Sign-in and the other Login plugin screens
   --------------------------------------------------------------------------
   The markup is the Login plugin's generic form output, so these rules name
   its classes rather than ones this theme controls.
   -------------------------------------------------------------------------- */

.kc-auth { max-width: 460px; margin: 0 auto; }
.kc-auth-card {
    background: var(--ks-card);
    border: 1px solid var(--ks-line);
    border-radius: 18px;
    padding: 32px 30px;
}
/* The Login plugin ships css/login.css, which gives #grav-login a 4px grey
   border, an off-white fill, 5rem of vertical margin and centred text — a
   whole card of its own, inside this one. Neutralised rather than switched off
   with `built_in_css: false`, because that flag also undresses the screens
   this theme does not style (two-factor, register, the profile form).

   The <h1> is the plugin's own page body, "# User Login" in
   plugin://login/pages/login.md. The masthead above already names the page, so
   it is dropped rather than shown twice — and dropping it also leaves the page
   with a single h1, which is what a screen reader's heading list wants. */
.kc-auth-card #grav-login {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
}
.kc-auth-card #grav-login > h1 { display: none; }
.kc-auth-card #grav-login .form-actions { text-align: left; }
.kc-auth-card #grav-login p { font-size: 14px; text-align: left; margin: 12px 0; }
.kc-auth-card .form-data,
.kc-auth-card .form-field { margin: 0 0 16px; }
.kc-auth-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-koa-soft);
    margin: 0 0 6px;
    text-align: left;
}
.kc-auth-card .form-input-wrapper { display: block; }
.kc-auth-card input[type="text"],
.kc-auth-card input[type="email"],
.kc-auth-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ks-body);
    font-size: 15px;
    color: var(--ks-koa);
    background: #FFFFFF;
    border: 1px solid var(--ks-line);
    border-radius: 10px;
    padding: 11px 13px;
}
.kc-auth-card input:focus {
    outline: none;
    border-color: var(--ks-lagoon);
    box-shadow: 0 0 0 3px rgba(26, 111, 131, 0.15);
}
/* The plugin puts "remember me", "forgot" and the submit button in one
   .form-actions row. Given a full basis it wraps onto a line of its own above
   the two buttons, which is where a tick box belongs. */
.kc-auth-card .rememberme { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 100%; }
.kc-auth-card .rememberme .form-input-wrapper { display: flex; align-items: center; gap: 8px; }
.kc-auth-card .rememberme input { flex: none; }
.kc-auth-card .rememberme label { margin: 0; font-weight: 500; color: var(--ks-koa); }

.kc-auth-card .form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.kc-auth-card .button {
    display: inline-block;
    background: var(--ks-board);
    color: #FFF6EA;
    font-family: var(--ks-body);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 11px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease;
}
.kc-auth-card .button:hover { background: var(--ks-board-deep); color: #FFF6EA; }
.kc-auth-card .button.secondary {
    background: transparent;
    color: var(--ks-koa-soft);
    border: 1px solid var(--ks-line);
    order: 2;
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
}
.kc-auth-card .button.secondary:hover { background: var(--ks-sand); color: var(--ks-koa); }
.kc-auth-card .button[value="login.login"] { order: 1; }
.kc-auth-card .fa { display: none; }
.kc-auth-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.kc-auth-card hr { border: 0; border-top: 1px solid var(--ks-line); margin: 18px 0; }


/* --------------------------------------------------------------------------
   14. Error page
   --------------------------------------------------------------------------
   Shared by the storefront shell and the marketing one — see
   templates/error.html.twig, which picks the shell from the route.
   -------------------------------------------------------------------------- */

.kc-error { text-align: center; padding: 40px 0 24px; max-width: 640px; margin: 0 auto; }
.kc-error-code {
    font-family: var(--ks-display);
    font-weight: 800;
    font-size: clamp(96px, 18vw, 180px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
    /* Kept inside the warm family: Board to Board-deep. Running it across to
       Lagoon looks good written down and renders a grey-olive mud through the
       middle, because orange to teal passes straight through neutral. */
    background: linear-gradient(105deg, var(--ks-board), var(--ks-board-deep) 55%, #7A3208);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.kc-error-title {
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 800;
    margin: 14px 0 12px;
    color: var(--ks-koa);
}
.kc-error-message {
    font-size: 17px;
    color: var(--ks-koa-soft);
    margin: 0 auto 8px;
    max-width: 48ch;
}