/* ==========================================================================
   Della UI kit - loaded first on every page (assets/header/css/global).

   One set of brand tokens and ONE button system for the whole shop, so the
   product page, side cart, popups, cart, checkout and account all match.
   The same rules live in checkout/della-checkout.css (scoped to .dc-page);
   they are identical, so whichever loads last changes nothing.

   Buttons: .dc-btn + --primary (gold) | --secondary (ink) | --ghost (outline)
            + --small | --large | --block. Square corners (radius 0) - never rounded.
   ========================================================================== */

:root {
    --dc-ink: #171717;
    --dc-ink-2: #404040;
    --dc-muted: #5c5c5c;
    --dc-line: #e7e5e0;
    --dc-line-strong: #cfcac0;
    --dc-bg: #faf9f6;
    --dc-surface: #ffffff;
    --dc-gold: #bda371;
    --dc-gold-hover: #a88e5c;
    --dc-gold-btn: #8a6d3b;
    --dc-gold-btn-hover: #7a5f2e;
    --dc-gold-btn-active: #6b5228;
    --dc-gold-ink: #7a5f2e;
    --dc-gold-soft: #f6f1e7;
    --dc-error: #b42318;
    --dc-error-soft: #fef3f2;
    --dc-success: #067647;
    --dc-success-soft: #ecfdf3;
    --dc-radius: 0; /* sharp corners, brand rule 2026-10 */
    --dc-radius-sm: 0;
    --dc-shadow: 0 1px 2px rgba(23, 23, 23, .04), 0 4px 16px rgba(23, 23, 23, .05);
    --dc-shadow-lg: 0 12px 48px rgba(23, 23, 23, .18);
    --dc-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --dc-font-display: "Playfair Display", Georgia, serif;
    --dc-focus: 0 0 0 3px rgba(189, 163, 113, .55);
}

.dc-icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -0.2em;
}

/* ---------- Buttons ---------- */

.dc-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin: 0;
    padding: 12px 22px;
    border-radius: var(--dc-radius-sm);
    border: 1px solid transparent;
    font: 600 15px/1.2 var(--dc-font);
    letter-spacing: .01em;
    text-transform: none;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    box-sizing: border-box;
}

.dc-btn:focus-visible {
    outline: 2px solid var(--dc-ink);
    outline-offset: 2px;
    box-shadow: var(--dc-focus);
}

.dc-btn--primary { background: var(--dc-gold-btn); color: #fff !important; }
.dc-btn--primary:hover { background: var(--dc-gold-btn-hover); }
.dc-btn--primary:active { background: var(--dc-gold-btn-active); }

.dc-btn--secondary { background: var(--dc-ink); color: #fff !important; }
.dc-btn--secondary:hover { background: #000; }

.dc-btn--ghost { background: var(--dc-surface); border-color: var(--dc-line-strong); color: var(--dc-ink) !important; }
.dc-btn--ghost:hover { border-color: var(--dc-ink); }

.dc-btn--block { width: 100%; }
.dc-btn--small { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.dc-btn--large { min-height: 56px; font-size: 16px; }

.dc-btn[disabled],
.dc-btn.is-disabled {
    background: #e9e7e2 !important;
    border-color: #e9e7e2 !important;
    color: #6b6b6b !important;
    cursor: not-allowed;
}

.dc-btn.is-loading { pointer-events: none; color: transparent !important; }
.dc-btn.is-loading > * { visibility: hidden; }
.dc-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid;
    border-color: var(--dc-ink) var(--dc-ink) transparent transparent;
    animation: dc-spin .7s linear infinite;
}
.dc-btn--primary.is-loading::after,
.dc-btn--secondary.is-loading::after { border-color: #fff #fff transparent transparent; }

@keyframes dc-spin { to { transform: rotate(360deg); } }

/* Icon-only square button (close, remove) */
.dc-icon-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--dc-radius-sm);
    background: transparent;
    color: var(--dc-ink);
    cursor: pointer;
}
.dc-icon-btn:hover { background: #f1efea; }
.dc-icon-btn:focus-visible { outline: 2px solid var(--dc-ink); outline-offset: 2px; }
.dc-icon-btn .dc-icon { width: 20px; height: 20px; }

/* ---------- Links ---------- */

.dc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 15px;
    color: var(--dc-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.dc-link:hover { color: var(--dc-gold-ink); }
.dc-link--muted { color: var(--dc-ink-2); text-decoration: none; }
.dc-link--muted:hover { text-decoration: underline; }
.dc-link--small { font-size: 13px; }

/* ---------- Quantity stepper (side cart, product page) ---------- */

.dc-qty {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--dc-line-strong);
    border-radius: var(--dc-radius-sm);
    background: var(--dc-surface);
    overflow: hidden;
}
.dc-qty__btn {
    -webkit-appearance: none;
    appearance: none;
    width: 38px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--dc-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dc-qty__btn:hover:not([disabled]) { background: #f4f2ed; }
.dc-qty__btn[disabled] { color: #b5b1a8; cursor: not-allowed; }
.dc-qty__btn .dc-icon { width: 16px; height: 16px; }
.dc-qty__input,
.dc-qty__value {
    width: 40px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--dc-line);
    border-right: 1px solid var(--dc-line);
    background: transparent;
    font: 600 15px/38px var(--dc-font);
    color: var(--dc-ink);
    text-align: center;
    -moz-appearance: textfield;
}
.dc-qty__input::-webkit-outer-spin-button,
.dc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Screen reader only (outside .dc-page too) ---------- */

.dc-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-btn,
    .dc-btn.is-loading::after { transition: none; animation-duration: 1.5s; }
}

/* ---------- Listing "Add to cart" already in the cart ----------
   Search, collection, SBU and slider cards render the button as an <a> with
   .disabled (+ aria-disabled) once the product is in the cart. Make that real:
   not clickable, visibly inactive. (products.js also ignores the click.) */
a.addToCart.disabled,
a.addCart.disabled,
.addToCart[aria-disabled="true"],
.addCart[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
}