/* ──────────────────────────────────────────────────────────
   Reusable WooCommerce components (brand-styled).
   Enqueued on WooCommerce pages via functions.php.
   Tokens: see zohar-ny/style.css :root — never hardcode hex.
   Note: targets the theme's loop card markup (.product-small), not
   vanilla `.woocommerce ul.products li.product`.
   ────────────────────────────────────────────────────────── */

/* ── Sale Badge (output by inc/woocommerce.php) ─────────── */
.badge--sale {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 2;
    padding: 0.25em 0.7em;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-on-gold);
    background: var(--color-gold);
    border-radius: var(--radius-sm);
}

/* ── Product Card — `.product-small` markup ────── */
.product-small .box-image img {
    transition: transform var(--transition-slow);
}

.product-small.has-hover:hover .box-image img {
    transform: scale(1.03);
}

.product-small .woocommerce-loop-product__title,
.product-small .name.product-title {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-text);
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.product-small .price {
    color: var(--color-gold-hover);
    font-weight: 700;
    font-size: 0.875rem;
}

.product-small .price del {
    color: var(--color-text-muted);
    font-weight: 400;
    margin-inline-end: 0.35em;
}

/* ── Sticky Add-to-Cart (output by inc/woocommerce.php) ──
   A slim, glassy boutique bar with a softly curved top edge. Kept compact:
   a small product thumbnail, the name, the price, and the CTA on one line.
   The quantity stepper inside the embedded form is hidden in this context
   (see woocommerce.css) so the bar never grows past a single row. */
.sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(252, 249, 244, 0.9);            /* surface @ 90% */
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -6px 28px rgba(117, 90, 40, 0.08); /* warm ambient glow, no line */
    /* Symmetric vertical padding so the row sits centred in the bar (the button
       previously read as floating high because the bar had near-zero top/bottom
       padding and the form min-height pushed the baseline up). */
    padding: 0.6rem var(--space-md);
    min-height: 64px;
}

.sticky-atc__inner {
    display: flex;
    align-items: center;          /* vertically centre thumb · name · price · CTA */
    gap: var(--space-md);
    max-width: 1200px;
    min-height: 52px;
    margin: 0 auto;
    direction: rtl;
}

.sticky-atc__thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.sticky-atc__title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-atc__price {
    font-weight: 700;
    color: var(--color-gold-hover);
    white-space: nowrap;
}

/* ── WooCommerce buttons — gold CTA style ───────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    min-height: 48px;
    min-width: 48px;
    padding: 0.75em 1.75em;
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);   /* gold-leaf sheen */
    color: var(--color-text-on-gold);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--btn-depth);          /* felt depth */
    transition: background var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
}

/* Pressed: the button sinks back and the shadow collapses inward (tactile). */
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* Primary / Add to Cart — give the gold CTA real presence (ambient depth +
   inset top highlight + hover lift), matching the homepage hero CTA quality
   without importing its class. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* background-color (not the `background` shorthand) so the base .button's
       --btn-sheen background-image survives on the primary CTA too. */
    background-color: var(--color-gold);
    color: var(--color-text-on-gold);
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--color-gold-light) 55%, var(--color-gold));
    box-shadow: var(--btn-depth);
    transition: background var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover {
    background-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
    transform: translateY(-2px);
    box-shadow: var(--btn-depth-hover);
}

.woocommerce button.button.alt:active,
.woocommerce a.button.alt:active,
.single_add_to_cart_button:active {
    transform: translateY(0);
    box-shadow: var(--btn-depth-active);
}

/* ── Reduced motion ─────────────────────────────────────────
   Respect prefers-reduced-motion: replace the card-hover scale and button
   lift with an instant/colour-only response, and collapse transition/animation
   durations so transforms and movement don't trigger vestibular discomfort.
   Colour/background transitions are kept as a brief crossfade (non-motion). */
@media (prefers-reduced-motion: reduce) {
    /* Kill all transform-based motion in the component layer. */
    .product-small.has-hover:hover .box-image img,
    .woocommerce a.button:hover,
    .woocommerce button.button:hover,
    .woocommerce input.button:hover,
    .woocommerce a.button:active,
    .woocommerce button.button:active,
    .woocommerce input.button:active {
        transform: none;
    }

    /* Globally neutralise long/motion transitions + animations site-wide,
       while leaving a short crossfade for colour changes. */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}