/* ==========================================================================
   _components.css
   Buttons, forms, tables (if any), messages, pagination, filters, modals,
   minicart, swatches, product cards.
   Implements THEME_STYLING_GUIDE §D rows 2–6, 14 and Strata component spec.
   ========================================================================== */

/* ==========================================================================
   BUTTONS
   Two tracks:
   - .action.primary → Strata system primary (obsidian dark bg, ivory text)
   - .gold-cta → Strata GoldButton (gold bg, obsidian text) for acquisition CTAs
   ========================================================================== */

/* Base .action.primary — system primary (dark obsidian) */
button.action.primary,
a.action.primary,
.action.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 0.5rem);
    background: var(--obsidian, #1C1612);
    color: var(--ivory, #F5F0E8);
    border: 1px solid var(--obsidian, #1C1612);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
    border-radius: var(--radius-md, 0.75rem);
    min-height: 2.25rem;
    min-width: 2.75rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        box-shadow var(--motion-duration-normal, 0.3s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        transform var(--motion-duration-fast, 0.15s) var(--ease-in-out-smooth, cubic-bezier(0.45, 0, 0.2, 1));
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

button.action.primary:hover,
a.action.primary:hover,
.action.primary:hover {
    background: var(--walnut, #3D3020);
    border-color: var(--walnut, #3D3020);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(28, 22, 18, 0.12));
    transform: translateY(-1px);
}

button.action.primary:active,
a.action.primary:active,
.action.primary:active {
    background: var(--obsidian, #1C1612);
    border-color: var(--obsidian, #1C1612);
    box-shadow: none;
    transform: translateY(0);
}

button.action.primary:focus-visible,
a.action.primary:focus-visible,
.action.primary:focus-visible {
    outline: 2px solid var(--ring, #B8893A);
    outline-offset: 2px;
}

/* Disabled */
button.action.primary:disabled,
button.action.primary[disabled],
a.action.primary[aria-disabled="true"],
.action.primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--obsidian, #1C1612);
    border-color: var(--obsidian, #1C1612);
    transform: none;
    box-shadow: none;
}

/* Loading spinner within .action.primary */
.action.primary.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}
.action.primary.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    color: var(--ivory, #F5F0E8);
}

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

/* --- .action.primary sizes --- */
button.action.primary.btn-sm,
a.action.primary.btn-sm,
.action.primary.btn-sm {
    height: 2rem;
    padding: 0 0.875rem;
    font-size: var(--text-xs, 0.75rem);
    min-height: 2rem;
}
button.action.primary.btn-lg,
a.action.primary.btn-lg,
.action.primary.btn-lg {
    height: 2.5rem;
    padding: 0 1.5rem;
    font-size: 1rem;
    min-height: 2.5rem;
}
/* Icon square (same as default height, no horizontal padding) */
button.action.primary.btn-icon,
a.action.primary.btn-icon,
.action.primary.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    min-width: 2.25rem;
    min-height: 2.25rem;
}


/* GOLD CTA — Strata GoldButton (gated acquisition only) */
button.gold-cta,
a.gold-cta,
.action.primary.gold,
.box-tocart .action.tocart.primary,
.checkout-methods-items .action.primary.checkout,
.cart-summary .checkout-methods-items .action.primary.checkout,
.gold-cta {
    background: var(--gold, #B8893A);
    color: var(--obsidian, #1C1612);
    border: 1px solid var(--gold, #B8893A);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 0.5rem);
    border-radius: var(--radius-md, 0.75rem);
    cursor: pointer;
    text-decoration: none;
    min-height: 2.25rem;
    min-width: 2.75rem;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        box-shadow var(--motion-duration-normal, 0.3s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        transform var(--motion-duration-fast, 0.15s) var(--ease-in-out-smooth, cubic-bezier(0.45, 0, 0.2, 1));
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

button.gold-cta:hover,
a.gold-cta:hover,
.action.primary.gold:hover,
.box-tocart .action.tocart.primary:hover,
.checkout-methods-items .action.primary.checkout:hover,
.cart-summary .checkout-methods-items .action.primary.checkout:hover,
.gold-cta:hover {
    background: var(--gold-light, #D4A85C);
    border-color: var(--gold-light, #D4A85C);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(28, 22, 18, 0.12));
    transform: translateY(-1px) scale(1.015);
}

button.gold-cta:active,
a.gold-cta:active,
.action.primary.gold:active,
.box-tocart .action.tocart.primary:active,
.checkout-methods-items .action.primary.checkout:active,
.cart-summary .checkout-methods-items .action.primary.checkout:active,
.gold-cta:active {
    background: var(--gold, #B8893A);
    border-color: var(--gold, #B8893A);
    box-shadow: none;
    transform: translateY(0) scale(0.97);
}

button.gold-cta:focus-visible,
a.gold-cta:focus-visible,
.action.primary.gold:focus-visible,
.box-tocart .action.tocart.primary:focus-visible,
.checkout-methods-items .action.primary.checkout:focus-visible,
.cart-summary .checkout-methods-items .action.primary.checkout:focus-visible,
.gold-cta:focus-visible {
    outline: 2px solid var(--ring, #B8893A);
    outline-offset: 2px;
}

/* Gold CTA sizes */
button.gold-cta.btn-sm,
a.gold-cta.btn-sm,
.gold-cta.btn-sm {
    height: 2rem;
    padding: 0 0.875rem;
    font-size: var(--text-xs, 0.75rem);
    min-height: 2rem;
}
button.gold-cta.btn-lg,
a.gold-cta.btn-lg,
.gold-cta.btn-lg {
    height: 2.5rem;
    padding: 0 1.5rem;
    font-size: 1rem;
    min-height: 2.5rem;
}
button.gold-cta.btn-icon,
a.gold-cta.btn-icon,
.gold-cta.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    min-width: 2.25rem;
    min-height: 2.25rem;
}

/* Gold CTA outline variant */
button.gold-cta.outlined,
a.gold-cta.outlined,
.gold-cta.outlined {
    background: transparent;
    color: var(--gold, #B8893A);
    border: 1px solid var(--gold, #B8893A);
}
button.gold-cta.outlined:hover,
a.gold-cta.outlined:hover,
.gold-cta.outlined:hover {
    background: rgba(184, 137, 58, 0.08);
    color: var(--gold-dark, #8B6220);
    border-color: var(--gold-dark, #8B6220);
}


/* --- .action.secondary --- */
button.action.secondary,
a.action.secondary,
.action.secondary {
    background: var(--parchment, #EDE4D0);
    color: var(--walnut, #3D3020);
    border: 1px solid transparent;
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 0.5rem);
    padding: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
    border-radius: var(--radius-md, 0.75rem);
    min-height: 2.25rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
button.action.secondary:hover,
a.action.secondary:hover,
.action.secondary:hover {
    background: var(--parchment, #EDE4D0);
    border-color: var(--border, rgba(28, 22, 18, 0.1));
}
button.action.secondary:focus-visible,
a.action.secondary:focus-visible,
.action.secondary:focus-visible {
    outline: 2px solid var(--ring, #B8893A);
    outline-offset: 2px;
}


/* --- .action.outline --- */
button.action.outline,
a.action.outline,
.action.outline {
    background: transparent;
    color: var(--gold, #B8893A);
    border: 1px solid var(--gold, #B8893A);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 0.5rem);
    padding: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
    border-radius: var(--radius-md, 0.75rem);
    min-height: 2.25rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
button.action.outline:hover,
a.action.outline:hover,
.action.outline:hover {
    background: rgba(184, 137, 58, 0.06);
    border-color: var(--gold-light, #D4A85C);
    color: var(--gold-dark, #8B6220);
}
button.action.outline:focus-visible,
a.action.outline:focus-visible,
.action.outline:focus-visible {
    outline: 2px solid var(--ring, #B8893A);
    outline-offset: 2px;
}


/* --- .action.ghost --- */
button.action.ghost,
a.action.ghost,
.action.ghost {
    background: transparent;
    color: var(--color-text, #1C1612);
    border: 1px solid transparent;
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 0.5rem);
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    border-radius: var(--radius-md, 0.75rem);
    min-height: 2.25rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
button.action.ghost:hover,
a.action.ghost:hover,
.action.ghost:hover {
    background: rgba(28, 22, 18, 0.04);
    color: var(--gold, #B8893A);
}
button.action.ghost:focus-visible,
a.action.ghost:focus-visible,
.action.ghost:focus-visible {
    outline: 2px solid var(--ring, #B8893A);
    outline-offset: 2px;
}


/* --- .action.link --- */
button.action.link,
a.action.link,
.action.link {
    background: transparent;
    color: var(--gold, #B8893A);
    border: none;
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1, 0.25rem);
    padding: var(--sp-1, 0.25rem) 0;
    min-height: auto;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    border-radius: 0;
    transition: color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
button.action.link:hover,
a.action.link:hover,
.action.link:hover {
    color: var(--gold-dark, #8B6220);
    text-decoration-thickness: 2px;
}


/* --- .destructive / .action.delete --- */
button.destructive,
button.action.delete,
a.action.delete,
.destructive,
.action.delete {
    background: var(--destructive, #8B2F2F);
    color: var(--destructive-foreground, #F5F0E8);
    border: 1px solid var(--destructive, #8B2F2F);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 0.5rem);
    padding: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
    border-radius: var(--radius-md, 0.75rem);
    min-height: 2.25rem;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
button.destructive:hover,
button.action.delete:hover,
a.action.delete:hover,
.destructive:hover,
.action.delete:hover {
    background: #7A2626;
    border-color: #7A2626;
}
button.destructive:focus-visible,
button.action.delete:focus-visible,
a.action.delete:focus-visible,
.destructive:focus-visible,
.action.delete:focus-visible {
    outline: 2px solid var(--ring, #B8893A);
    outline-offset: 2px;
}


/* --- .btn-remove, .action.tocart, .action.checkout — min 36px height --- */
.btn-remove,
.action.tocart,
.action.checkout {
    min-height: 2.25rem;
    min-width: 2.25rem;
}


/* ==========================================================================
   MAGENTO ICONS (via CSS pseudo-elements for minicart/cart icons)
   Lucide sprite loaded separately — this provides padding fallback.
   ========================================================================== */
.action.tocart::before,
.action.checkout::before,
.btn-remove::before {
    content: none;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -0.125em;
    opacity: 0.85;
}


/* ==========================================================================
   FORM CONTROLS
   Surfaces, borders, focus rings, validation.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    background: var(--input-background, #FDFAF4);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    border-radius: var(--radius-sm, 0.5rem);
    color: var(--color-text, #1C1612);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.5;
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    width: 100%;
    transition:
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        box-shadow var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    -webkit-appearance: none;
    appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A6A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3, 0.75rem) center;
    padding-right: var(--sp-8, 2rem);
}

textarea {
    resize: vertical;
    min-height: 5.5rem;
}

/* Focus ring — gold */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--ring, #B8893A);
    box-shadow: 0 0 0 3px rgba(184, 137, 58, 0.18), 0 0 0 1px var(--ring, #B8893A);
}

/* Disabled / readonly */
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.55;
    background: var(--muted, #DDD4BC);
    cursor: not-allowed;
}

/* Error field */
.field-error input,
.field-error textarea,
.field-error select {
    border-color: var(--color-error, #8B2F2F);
}
.field-error input:focus-visible,
.field-error textarea:focus-visible,
.field-error select:focus-visible {
    box-shadow: 0 0 0 3px rgba(139, 47, 47, 0.15), 0 0 0 1px var(--color-error, #8B2F2F);
}
.field-error .field-error-message,
.field-error-message {
    color: var(--color-error, #8B2F2F);
    font-size: var(--text-xs, 0.75rem);
    margin-top: var(--sp-1, 0.25rem);
    font-weight: var(--font-weight-medium, 500);
}

/* Qty input */
.field.qty input,
input.qty {
    width: 4rem;
    text-align: center;
    padding: var(--sp-1, 0.25rem);
}

/* ==========================================================================
   MESSAGES / ALERTS
   ========================================================================== */

.message {
    margin-bottom: var(--sp-3, 0.75rem);
    border-radius: var(--radius-md, 0.75rem);
    padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
    font-size: var(--text-sm, 0.8125rem);
    line-height: 1.5;
    border-left: 4px solid transparent;
}

.message:last-child {
    margin-bottom: 0;
}

.message-success {
    background: rgba(127, 168, 136, 0.1);
    border-left-color: #2F6B3A;
    color: #1A3A20;
}
.message-error,
.message-error.global {
    background: rgba(139, 47, 47, 0.08);
    border-left-color: var(--destructive, #8B2F2F);
    color: var(--destructive, #8B2F2F);
}
.message-notice,
.message.info {
    background: rgba(184, 137, 58, 0.08);
    border-left-color: var(--gold, #B8893A);
    color: var(--walnut, #3D3020);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pages .items .item a,
.pages .items .item strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: var(--sp-1, 0.25rem) var(--sp-2, 0.5rem);
    border-radius: var(--radius-sm, 0.5rem);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    color: var(--color-text, #1C1612);
    text-decoration: none;
    transition:
        background var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
.pages .items .item a:hover {
    background: var(--card, #FDFAF4);
    border-color: var(--gold, #B8893A);
    color: var(--gold, #B8893A);
}
.pages .items .item strong {
    background: var(--gold, #B8893A);
    border-color: var(--gold, #B8893A);
    color: var(--obsidian, #1C1612);
}
.pages a.action.previous,
.pages a.action.next {
    min-height: 2.25rem;
}


/* ==========================================================================
   FILTER SIDEBAR (faceted navigation)
   ========================================================================== */

.filter-title,
.filter-options-title,
.filter-options-item .filter-options-title {
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #1C1612);
    padding: var(--sp-3, 0.75rem) 0;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    cursor: pointer;
}

.filter-options-content {
    padding: var(--sp-2, 0.5rem) 0;
}

.filter-current {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1, 0.25rem);
    align-items: center;
    padding: var(--sp-3, 0.75rem) 0;
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}

.filter-current .filter-label {
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--text-sm, 0.8125rem);
    margin-right: var(--sp-2, 0.5rem);
}

.filter-clear,
.action.clear-all {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-error, #8B2F2F);
    padding: var(--sp-1, 0.25rem) var(--sp-2, 0.5rem);
    border-radius: var(--radius-sm, 0.5rem);
}


/* ==========================================================================
   SWATCHES
   ========================================================================== */

.swatch-option {
    border: 2px solid var(--border, rgba(28, 22, 18, 0.1));
    border-radius: var(--radius-sm, 0.5rem);
    cursor: pointer;
    min-height: 2rem;
    min-width: 2rem;
    transition:
        border-color var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1)),
        box-shadow var(--motion-duration-fast, 0.15s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}
.swatch-option:hover {
    border-color: var(--gold, #B8893A);
}
.swatch-option.selected {
    border-color: var(--gold, #B8893A);
    box-shadow: 0 0 0 2px rgba(184, 137, 58, 0.3);
}
.swatch-option.color {
    border-radius: var(--radius-full, 9999px);
    min-height: 2.25rem;
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}


/* ==========================================================================
   MODALS / MINICART / POPUPS
   ========================================================================== */

.block-minicart,
.modal-popup,
.modal-slide {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-lg, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(28, 22, 18, 0.15));
}

.modal-popup .modal-header,
.modal-slide .modal-header {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-weight: 400;
    font-size: 1.25rem;
}

.modal-popup .modal-footer,
.modal-slide .modal-footer {
    border-top: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-3, 0.75rem) var(--sp-5, 1.25rem);
}

.modal-popup .modal-content,
.modal-slide .modal-content {
    padding: var(--sp-4, 1rem);
}

/* Minicart item */
.block-minicart .minicart-items .product-item {
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    padding: var(--sp-3, 0.75rem) 0;
}
.block-minicart .minicart-items .product-item:last-child {
    border-bottom: none;
}
.block-minicart .minicart-items .product-item-name {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
}


/* ==========================================================================
   PRODUCT ITEM CARD — PLP hover treatment
   ========================================================================== */

.products-grid .products.list.items.product-items,
.products-grid .product-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--sp-6, 1.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.products-grid .product-item {
    display: flex;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.products-grid .product-item-info {
    background: var(--card, #FDFAF4);
    border-radius: var(--radius-xl, 0.875rem);
    border: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    box-shadow: var(--shadow-xs, 0 1px 1px rgba(28, 22, 18, 0.04));
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    transition:
        transform var(--motion-duration-normal, 0.3s) cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow var(--motion-duration-normal, 0.3s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}
.products-grid .product-item-info:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover, 0 8px 24px rgba(28, 22, 18, 0.12));
}

.product-item-photo {
    display: block;
    overflow: hidden;
}

.products-grid .product-item-photo {
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(135deg, rgba(184, 137, 58, 0.08), rgba(28, 22, 18, 0.02)),
        var(--secondary, #EDE4D0);
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
}

.products-grid .product-image-container {
    width: 100% !important;
    height: 100%;
}

.products-grid .product-image-wrapper {
    display: block;
    height: 100%;
    padding-bottom: 0 !important;
}

.product-item-photo img {
    transition: transform var(--motion-duration-normal, 0.3s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.5, 1));
}

.products-grid .product-item-photo img,
.products-grid .product-image-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products-grid .product-item-info:hover .product-item-photo img {
    transform: scale(1.03);
}

.product-item-details {
    padding: var(--sp-4, 1rem);
}

.products-grid .product-item-details {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sp-2, 0.5rem);
}

.product-item-name {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
}
.product-item-name a {
    color: var(--color-text, #1C1612);
    text-decoration: none;
}
.product-item-name a:hover {
    color: var(--gold, #B8893A);
}

.product-item .product-label,
.product-item .product-badge,
.product-item .badge,
.product-item .stock.unavailable,
.product-item .stock.available {
    align-self: flex-start;
    border: 1px solid rgba(184, 137, 58, 0.22);
    border-radius: var(--radius-full, 9999px);
    background: rgba(184, 137, 58, 0.08);
    color: var(--gold-dark, #8B6220);
    font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 0.25rem 0.625rem;
    text-transform: uppercase;
}

.price-box {
    font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--color-text, #1C1612);
}
.price-box .price {
    font-weight: 400;
}
.special-price {
    color: var(--color-text, #1C1612);
}
.old-price {
    color: var(--color-text-muted, #7A6A52);
    text-decoration: line-through;
}

.products-grid .price-box {
    margin-top: auto;
}

.product-reviews-summary {
    /* Preserve Purpletree sprite — no CSS filters unless user requests icon swap. */
}

.product-item-actions {
    margin-top: var(--sp-2, 0.5rem);
}

.products-grid .product-item-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
}

.products-grid .product-item-actions .actions-primary,
.products-grid .product-item-actions .action.tocart.primary {
    flex: 1 1 auto;
}

.products-grid .product-item-actions .action.tocart.primary {
    background: var(--primary, #1C1612);
    border-color: var(--primary, #1C1612);
    color: var(--primary-foreground, #F5F0E8);
    min-height: 2.5rem;
}

.products-grid .product-item-actions .action.tocart.primary:hover {
    background: var(--walnut, #3D3020);
    border-color: var(--walnut, #3D3020);
    color: var(--primary-foreground, #F5F0E8);
}

.products-grid .product-item-actions .actions-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1, 0.25rem);
}


/* ==========================================================================
   TOOLBAR / ACTIONS
   ========================================================================== */

.toolbar {
    padding: var(--sp-3, 0.75rem) 0;
    border-bottom: 1px solid var(--border, rgba(28, 22, 18, 0.1));
    margin-bottom: var(--sp-4, 1rem);
}
.toolbar-amount,
.sorter-label,
.limiter-label {
    font-size: var(--text-sm, 0.8125rem);
    color: var(--color-text-muted, #7A6A52);
    font-weight: var(--font-weight-normal, 400);
}
.sorter-action {
    color: var(--color-link, #B8893A);
}
.sorter-action:hover {
    color: var(--color-link-hover, #8B6220);
}
.actions-toolbar {
    gap: var(--sp-2, 0.5rem);
}


/* ==========================================================================
   RESPONSIVE — COMPONENTS
   ========================================================================== */

@media (max-width: 1024px) {
    .products-grid .products.list.items.product-items,
    .products-grid .product-items {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    }
}
@media (max-width: 768px) {
    .products-grid .products.list.items.product-items,
    .products-grid .product-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4, 1rem);
    }

    .form .actions-toolbar .primary,
    .form .actions-toolbar .secondary,
    .login-container .actions-toolbar .primary,
    .login-container .actions-toolbar .secondary,
    .box-tocart .actions,
    .cart-summary .checkout-methods-items .item,
    .checkout-methods-items .action.primary.checkout,
    .box-tocart .action.tocart.primary {
        width: 100%;
    }

    .form .actions-toolbar .action,
    .login-container .actions-toolbar .action,
    .box-tocart .action.tocart.primary,
    .checkout-methods-items .action.primary.checkout {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .products-grid .products.list.items.product-items,
    .products-grid .product-items {
        grid-template-columns: 1fr;
    }

    button.action.primary.btn-lg,
    a.action.primary.btn-lg,
    .action.primary.btn-lg,
    button.gold-cta.btn-lg,
    a.gold-cta.btn-lg,
    .gold-cta.btn-lg {
        height: 2.75rem;
        font-size: 1rem;
    }
}