/* Premium Storefront — base stylesheet. Everything here reads CSS custom
   properties generated per-store by services/theme_css.py, so the same
   stylesheet renders correctly under any theme customizer configuration. */

.ps-scope {
    background: var(--ps-color-background);
    color: var(--ps-color-secondary);
    font-family: var(--ps-font-body);
    font-weight: var(--ps-font-weight);
    line-height: var(--ps-line-height);
    font-size: calc(1rem * var(--ps-font-size-scale));
}
.ps-scope h1, .ps-scope h2, .ps-scope h3, .ps-scope h4 {
    font-family: var(--ps-font-heading);
    font-weight: 400;
    color: var(--ps-color-secondary);
}

.ps-container {
    max-width: var(--ps-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(1.5rem * var(--ps-padding-scale));
    padding-right: calc(1.5rem * var(--ps-padding-scale));
}
.ps-section {
    max-width: var(--ps-section-width);
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(3rem * var(--ps-margin-scale));
    padding-bottom: calc(3rem * var(--ps-margin-scale));
    padding-left: calc(1.5rem * var(--ps-padding-scale));
    padding-right: calc(1.5rem * var(--ps-padding-scale));
}

.ps-eyebrow {
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ps-color-primary);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 2rem;
    border-radius: var(--ps-button-radius);
    font-family: var(--ps-font-button);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: transform .25s, box-shadow .25s, background-color .25s, color .25s;
    cursor: pointer;
    border: 1px solid transparent;
    animation: var(--ps-button-animation);
}
.ps-btn-primary { background: var(--ps-color-primary); color: var(--ps-color-button-text); }
.ps-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow); filter: brightness(0.92); }
.ps-btn-outline { border-color: var(--ps-color-secondary); color: var(--ps-color-secondary); background: transparent; }
.ps-btn-outline:hover { background: var(--ps-color-secondary); color: var(--ps-color-background); }
.ps-btn-ghost { background: transparent; color: var(--ps-color-primary); }
.ps-btn-ghost:hover { background: color-mix(in srgb, var(--ps-color-primary) 10%, transparent); }
.ps-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.ps-card {
    background: var(--ps-color-card);
    border-radius: var(--ps-card-radius);
    border: 1px solid var(--ps-color-border);
    overflow: hidden;
    transition: transform .35s, box-shadow .35s;
}
.ps-card[data-hover="lift"]:hover { transform: translateY(-4px); box-shadow: var(--ps-shadow); }
.ps-card[data-hover="zoom"] .ps-card-img img { transition: transform 1s cubic-bezier(.2,.6,.2,1); }
.ps-card[data-hover="zoom"]:hover .ps-card-img img { transform: scale(1.06); }
.ps-card[data-hover="fade"] .ps-card-img img { transition: opacity .3s; }
.ps-card[data-hover="fade"]:hover .ps-card-img img { opacity: .85; }

.ps-card-img {
    position: relative;
    aspect-ratio: var(--ps-card-image-ratio);
    overflow: hidden;
    background: var(--ps-color-border);
}
.ps-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ps-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ps-color-primary);
}
.ps-badge-sale { background: var(--ps-color-accent); color: var(--ps-color-secondary); }

/* ── Grid ────────────────────────────────────────────────────────────── */
.ps-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 768px) { .ps-grid { grid-template-columns: repeat(var(--ps-grid-columns), minmax(0,1fr)); } }

/* ── Animations (respect the customizer's on/off + style) ──────────────── */
.ps-scope[data-anim="fade"] .ps-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.ps-scope[data-anim="slide"] .ps-reveal { opacity: 0; transform: translateX(-24px); transition: opacity .7s ease, transform .7s ease; }
.ps-scope[data-anim="zoom"] .ps-reveal { opacity: 0; transform: scale(0.92); transition: opacity .7s ease, transform .7s ease; }
.ps-scope[data-anim="scale"] .ps-reveal { opacity: 0; transform: scale(0.85); transition: opacity .6s ease, transform .6s ease; }
.ps-scope[data-anim="none"] .ps-reveal { opacity: 1; transform: none; }
/* Must outrank the [data-anim="…"] hidden-state rules above (equal
   specificity would lose to source order otherwise) so revealed content
   is never stuck invisible regardless of animation style. */
.ps-reveal.ps-in { opacity: 1 !important; transform: none !important; }

@keyframes ps-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ps-bounce { 0% { transform: translateY(0);} 40% { transform: translateY(-4px);} 100% { transform: translateY(0);} }

/* ── Sticky add-to-cart bar ─────────────────────────────────────────────── */
.ps-sticky-cart {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--ps-color-background) 85%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--ps-color-border);
    transform: translateY(100%);
    transition: transform .3s ease;
}
.ps-sticky-cart.ps-visible { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .ps-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}