/* =====================================================
 * Raj Collection Sequel — Micro Polish
 *
 * The small details that compound. Loaded LAST so it can
 * override anything earlier without !important wars.
 *
 * Sections:
 *   1. Universal focus-visible — never lose keyboard focus
 *   2. Selection color — branded text highlight
 *   3. Scrollbar — branded thin scrollbars
 *   4. Smooth scroll + scroll-margin for anchor jumps
 *   5. Image LCP / hint rendering
 *   6. Tap highlight removal on touch
 *   7. Skeleton loader utility
 *   8. Toast styling
 *   9. Form input transitions
 *  10. Button press states
 *  11. Address fields visual polish
 *  12. Empty state polish
 *  14. Reduced data — disable web fonts
 *  15. Print: clean removal of all decorative motion
 *  16. Disabled-state opacity discipline
 *  17. Loading state on buttons (data-loading)
 *  18. Inline error / success message styling
 *  19. Tooltip primitive
 *  20. Better page transitions (View Transitions API)
 *  21. Avoid CLS on header sticky
 *  22. Lazy-loaded image fade-in
 *  23. Better placeholder color in inputs
 *  24. Spotlight ring around primary CTA after first 4s of idle (gentle attention)
 *  25. Hover-glow on product cards (subtle)
 * ===================================================== */

/* =====================================================
 * 1. UNIVERSAL FOCUS-VISIBLE
 * Always show a focus ring on keyboard navigation.
 * Hide it on mouse so it never distracts.
 * ===================================================== */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--rcs-primary);
    outline-offset: 3px;
    border-radius: var(--rcs-r-1);
    box-shadow: var(--rcs-shadow-focus);
    transition: outline-offset 120ms var(--rcs-ease-out);
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.rcs-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 4px;
}
/* Pill-shaped buttons should keep round focus ring */
.rcs-btn--lg:focus-visible,
.rcs-btn--primary:focus-visible {
    border-radius: var(--rcs-r-pill);
}

/* =====================================================
 * 2. SELECTION COLOR
 * ===================================================== */
::selection {
    background: var(--rcs-accent);
    color: var(--rcs-primary);
}
::-moz-selection {
    background: var(--rcs-accent);
    color: var(--rcs-primary);
}

/* =====================================================
 * 3. SCROLLBAR — thin, branded (WebKit + Firefox)
 * ===================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--rcs-accent) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--rcs-accent), var(--rcs-bronze));
    border: 2px solid var(--rcs-canvas);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--rcs-primary), var(--rcs-primary-soft));
}

/* =====================================================
 * 4. SMOOTH SCROLL + SCROLL-MARGIN
 * Anchors land below the sticky header, not under it.
 * ===================================================== */
html {
    scroll-behavior: smooth;
}
:target,
[id]:not(body) {
    scroll-margin-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* =====================================================
 * 5. IMAGE RENDERING — protect LCP
 * ===================================================== */
img {
    image-rendering: auto;
    -webkit-user-drag: none;
    user-select: none;
}
img[fetchpriority="high"] {
    content-visibility: auto;
}
/* Avoid layout shift on aspect-ratio-known images */
img[width][height] {
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* =====================================================
 * 6. TAP HIGHLIGHT — remove default blue flash
 * ===================================================== */
* {
    -webkit-tap-highlight-color: rgba(107, 26, 46, 0.15);
}
input,
textarea,
select,
button,
a {
    -webkit-tap-highlight-color: transparent;
}

/* =====================================================
 * 7. SKELETON LOADER
 * Apply .rcs-skeleton to any block to get a shimmer.
 * ===================================================== */
.rcs-skeleton {
    background: linear-gradient(90deg,
        var(--rcs-surface-container, #f0ece6) 0%,
        var(--rcs-surface-2, #faf6f0) 50%,
        var(--rcs-surface-container, #f0ece6) 100%);
    background-size: 200% 100%;
    animation: rcs-shimmer 1.4s linear infinite;
    color: transparent !important;
    pointer-events: none;
    border-radius: var(--rcs-r-2);
}
@keyframes rcs-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rcs-skeleton { animation: none; background: var(--rcs-surface-container, #f0ece6); }
}

/* =====================================================
 * 8. TOAST STYLING
 * window.rcsToast() in micro.js will create elements with these classes.
 * ===================================================== */
.rcs-toast {
    position: fixed;
    bottom: calc(20px + var(--rcs-safe-bottom));
    left: 50%;
    transform: translate(-50%, 20px);
    z-index: var(--rcs-z-toast);
    padding: 14px 24px;
    background: var(--rcs-primary);
    color: var(--rcs-text-inverse);
    border-radius: var(--rcs-r-pill);
    font-family: var(--rcs-font-ui);
    font-size: var(--rcs-size-md);
    font-weight: var(--rcs-fw-medium);
    box-shadow: var(--rcs-shadow-xl);
    opacity: 0;
    transition: transform 280ms var(--rcs-ease-out), opacity 280ms var(--rcs-ease-out);
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rcs-toast--show,
.rcs-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.rcs-toast--success {
    background: var(--rcs-success);
}
.rcs-toast--error {
    background: var(--rcs-error);
}
.rcs-toast--warn {
    background: var(--rcs-warning);
}
.rcs-toast::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rcs-accent);
    flex-shrink: 0;
}
.rcs-toast--success::before { background: rgba(255,255,255,0.9); }
.rcs-toast--error::before   { background: rgba(255,255,255,0.9); }

/* =====================================================
 * 9. FORM INPUT TRANSITIONS
 * Every text/number/email input gets a smooth border-fade on focus.
 * ===================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    transition:
        border-color 220ms var(--rcs-ease-out),
        background 220ms var(--rcs-ease-out),
        box-shadow 220ms var(--rcs-ease-out);
}
/* Hover the field — bronze tint on the border */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover {
    border-color: var(--rcs-bronze);
}

/* Invalid fields — gentle red, not aggressive */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
    border-color: var(--rcs-error);
    background-color: var(--rcs-error-soft);
}

/* Number spinners — hide ugly default */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =====================================================
 * 10. BUTTON PRESS STATES
 * Every .rcs-btn gets a press-down scale + shadow drop.
 * ===================================================== */
.rcs-btn,
button {
    transform-origin: center;
}
.rcs-btn:active,
button:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 60ms;
}

/* =====================================================
 * 11. ADDRESS FIELDS VISUAL POLISH
 * Two-column on desktop, single on mobile for billing/shipping.
 * ===================================================== */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-address-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 769px) {
    .woocommerce-billing-fields .form-row-first,
    .woocommerce-shipping-fields .form-row-first,
    .woocommerce-address-fields .form-row-first { grid-column: 1; }
    .woocommerce-billing-fields .form-row-last,
    .woocommerce-shipping-fields .form-row-last,
    .woocommerce-address-fields .form-row-last { grid-column: 2; }
    .woocommerce-billing-fields p.form-row-wide,
    .woocommerce-shipping-fields p.form-row-wide,
    .woocommerce-address-fields p.form-row-wide,
    .woocommerce-billing-fields h3,
    .woocommerce-shipping-fields h3,
    .woocommerce-address-fields h3 { grid-column: 1 / -1; }
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-address-fields {
        grid-template-columns: 1fr 1fr;
    }
}
/* Field row reset for the grid */
.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-address-fields .form-row {
    margin: 0;
    padding: 0;
    width: 100%;
}

 * 13. EMPTY STATE POLISH — subtle gold underline pulse
 * ===================================================== */
.rcs-empty {
    text-align: center;
    padding: 56px 24px;
}
.rcs-empty__title {
    font-family: var(--rcs-font-display);
    font-size: var(--rcs-size-3xl);
    font-style: italic;
    color: var(--rcs-primary);
    margin-bottom: 8px;
}
.rcs-empty__copy {
    color: var(--rcs-text-muted);
    margin-bottom: 22px;
    max-width: 420px;
    margin-inline: auto;
    line-height: var(--rcs-lh-base);
}

/* =====================================================
 * 14. REDUCED DATA — skip web fonts on save-data
 * ===================================================== */
@media (prefers-reduced-data: reduce) {
    body {
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
    }
    h1, h2, h3, h4 {
        font-family: Georgia, "Times New Roman", serif !important;
    }
}

/* =====================================================
 * 15. PRINT — strip all decoration, keep content readable
 * ===================================================== */
@media print {
    .rcs-header,
    .rcs-drawer,
    .rcs-whatsapp-fab,
    .rcs-scroll-thread,
    .rcs-dust-layer,
    .rcs-ambient-motes,
    .rcs-bottom-nav,
    .rcs-toast {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    a, a:visited {
        color: #000;
        text-decoration: underline;
    }
    .rcs-btn {
        border: 1px solid #000;
        padding: 6px 12px;
        text-decoration: none !important;
    }
}

/* =====================================================
 * 16. DISABLED STATE — visual discipline
 * ===================================================== */
[disabled],
[aria-disabled="true"],
.is-disabled,
button:disabled,
.rcs-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed !important;
    pointer-events: none;
    filter: saturate(0.6);
}

/* =====================================================
 * 17. BUTTON LOADING STATE — data-loading
 * Use: btn.setAttribute('data-loading','true') then remove when done.
 * ===================================================== */
.rcs-btn[data-loading="true"],
button[data-loading="true"] {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.rcs-btn[data-loading="true"]::after,
button[data-loading="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rcs-spin 720ms linear infinite;
    color: var(--rcs-text-inverse);
}
.rcs-btn--ghost[data-loading="true"]::after,
.rcs-btn--text[data-loading="true"]::after {
    color: var(--rcs-primary);
}
@keyframes rcs-spin {
    100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .rcs-btn[data-loading="true"]::after,
    button[data-loading="true"]::after { animation-duration: 2s; }
}

/* =====================================================
 * 18. INLINE ERROR / SUCCESS / INFO MESSAGES
 * ===================================================== */
.rcs-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--rcs-r-3);
    font-size: var(--rcs-size-md);
    line-height: var(--rcs-lh-base);
    margin: 12px 0;
    border-left: 3px solid;
}
.rcs-msg--error {
    background: var(--rcs-error-soft);
    color: #6f1313;
    border-left-color: var(--rcs-error);
}
.rcs-msg--success {
    background: var(--rcs-success-soft);
    color: #1a4d20;
    border-left-color: var(--rcs-success);
}
.rcs-msg--warn {
    background: var(--rcs-warning-soft);
    color: #7a4a07;
    border-left-color: var(--rcs-warning);
}
.rcs-msg--info {
    background: var(--rcs-info-soft);
    color: #154756;
    border-left-color: var(--rcs-info);
}
.rcs-msg i {
    flex-shrink: 0;
    font-size: 20px;
}

/* =====================================================
 * 19. TOOLTIP PRIMITIVE — data-tip
 * ===================================================== */
[data-tip] {
    position: relative;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--rcs-text);
    color: var(--rcs-text-inverse);
    padding: 6px 10px;
    border-radius: var(--rcs-r-2);
    font-size: var(--rcs-size-sm);
    font-family: var(--rcs-font-ui);
    white-space: nowrap;
    pointer-events: none;
    z-index: var(--rcs-z-toast);
    opacity: 0;
    animation: rcs-tip-in 180ms var(--rcs-ease-out) forwards;
}
@keyframes rcs-tip-in {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =====================================================
 * 20. VIEW TRANSITIONS — branded crossfade
 * ===================================================== */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--rcs-ease-out);
}
::view-transition-old(root) {
    animation-name: rcs-vt-fade-out;
}
::view-transition-new(root) {
    animation-name: rcs-vt-fade-in;
}
@keyframes rcs-vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes rcs-vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; }
}

/* =====================================================
 * 21. STICKY HEADER — avoid CLS on first paint
 * ===================================================== */
.rcs-header {
    contain: layout style;
}

/* =====================================================
 * 22. LAZY-LOADED IMAGE REVEAL — boutique silk unveiling
 * Hermès / Sabyasachi-class image entrance:
 *   - Opacity 0 → 1
 *   - Slight scale 1.04 → 1 (downscale settling, like fabric drape)
 *   - Blur 12px → 0 (out-of-focus → crisp)
 *   - Cubic-bezier(0.16, 1, 0.3, 1) — silky quart-out
 *   - 720ms — slow enough to feel intentional, fast enough not to drag
 *   - Belt-and-suspenders: forced fade-in at 2s if JS fails
 * ===================================================== */
img[loading="lazy"]:not(.is-loaded) {
    opacity: 0;
    transform: scale(1.04);
    filter: blur(12px) saturate(0.92);
    transition:
        opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 880ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
    animation: rcs-img-fallback-in 720ms ease 2s forwards;
    will-change: opacity, transform, filter;
}
img[loading="lazy"].is-loaded {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
    animation: none;
}
@keyframes rcs-img-fallback-in {
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) saturate(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    img[loading="lazy"]:not(.is-loaded) {
        transform: none !important;
        filter: none !important;
        transition: opacity 220ms ease !important;
    }
}

/* =====================================================
 * 23. PLACEHOLDER COLOR
 * ===================================================== */
::placeholder {
    color: var(--rcs-text-subtle);
    opacity: 1;
    font-weight: var(--rcs-fw-regular);
    font-style: italic;
}

/* =====================================================
 * 24. PRIMARY CTA ATTENTION (no JS) — soft breathe
 * Only on hero CTAs, only after page has settled.
 * Subtle — 1.5px shadow extension every 4s. Not nagging.
 * ===================================================== */
@media (prefers-reduced-motion: no-preference) {
    .rcs-hero__cta .rcs-btn--lg {
        animation: rcs-cta-breathe 5.2s var(--rcs-ease-inout) 3s infinite;
    }
}
@keyframes rcs-cta-breathe {
    0%, 100% { box-shadow: var(--rcs-shadow-cta); }
    50%      { box-shadow: 0 8px 22px -4px rgba(107, 26, 46, 0.55), 0 0 0 4px rgba(201, 169, 97, 0.15); }
}

/* =====================================================
 * 25. PRODUCT CARD HOVER — subtle gold glow
 * ===================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .rcs-product-card {
        transition:
            transform 320ms var(--rcs-ease-out),
            box-shadow 320ms var(--rcs-ease-out);
    }
    .rcs-product-card:hover {
        transform: translateY(-3px);
        box-shadow:
            0 12px 28px -8px rgba(28, 26, 25, 0.18),
            0 0 0 1px rgba(201, 169, 97, 0.18);
    }
    .rcs-product-card__media img {
        transition: transform 720ms var(--rcs-ease-out);
    }
    .rcs-product-card:hover .rcs-product-card__media img {
        transform: scale(1.045);
    }
}

/* =====================================================
 * 26. WC MESSAGES — rebrand notice bars
 * ===================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    list-style: none;
    margin: 16px 0;
    padding: 14px 18px 14px 48px;
    border-radius: var(--rcs-r-3);
    border-left: 3px solid;
    font-family: var(--rcs-font-ui);
    font-size: var(--rcs-size-md);
    line-height: var(--rcs-lh-base);
    position: relative;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.woocommerce-message {
    background: var(--rcs-success-soft);
    border-left-color: var(--rcs-success);
    color: #1a4d20;
}
.woocommerce-message::before { background: var(--rcs-success); }
.woocommerce-info {
    background: var(--rcs-info-soft);
    border-left-color: var(--rcs-info);
    color: #154756;
}
.woocommerce-info::before { background: var(--rcs-info); }
.woocommerce-error {
    background: var(--rcs-error-soft);
    border-left-color: var(--rcs-error);
    color: #6f1313;
}
.woocommerce-error::before { background: var(--rcs-error); }
.woocommerce-message .button,
.woocommerce-info .button {
    float: right;
    font-size: var(--rcs-size-sm);
    text-decoration: none;
    color: var(--rcs-primary);
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: var(--rcs-r-pill);
}

/* =====================================================
 * 27. KEYBOARD ACCESS HINT — show "TAB" affordance on first focus
 * (small detail — only when keyboard nav is detected)
 * ===================================================== */
html:not(.rcs-mouse-mode) [tabindex="0"]:focus-visible,
html:not(.rcs-mouse-mode) a:focus-visible {
    position: relative;
}

/* =====================================================
 * 28. SAFE AREA INSETS — iPhone notch + bottom bar
 * ===================================================== */
.rcs-whatsapp-fab,
.rcs-bottom-nav,
.rcs-bn,
.rcs-sticky-bar {
    padding-bottom: calc(var(--rcs-safe-bottom) + 0px);
}

/* =====================================================
 * 29. PAGE-LEVEL LCP RESERVES
 * Reserve hero height so scroll position doesn't bounce on slow image
 * ===================================================== */
.rcs-hero {
    min-height: 60vh;
}
@media (min-width: 1024px) {
    .rcs-hero { min-height: 70vh; }
}

/* =====================================================
 * 30. ARIA-HIDDEN ICONS — never narrate decorative icons
 * ===================================================== */
[aria-hidden="true"] {
    pointer-events: none;
    user-select: none;
}

/* =====================================================
 * 31. CART DELETE — danger underline on hover
 * ===================================================== */
.rcs-cart__remove,
.product-remove a {
    color: var(--rcs-text-muted);
    transition: color 200ms var(--rcs-ease-out);
}
.rcs-cart__remove:hover,
.product-remove a:hover {
    color: var(--rcs-error);
}

/* =====================================================
 * 32. ORDERS TABLE — branded row hover
 * ===================================================== */
.woocommerce-orders-table tbody tr {
    transition: background 180ms var(--rcs-ease-out);
}
.woocommerce-orders-table tbody tr:hover {
    background: var(--rcs-section-tint);
}