/* ============================================================
   Modern UI polish layer (additive, scoped — loaded last)
   Adds delight + a more modern feel without touching the
   existing layout maths. Everything here is opt-in via a class
   or a body state, so it can't break the base design.
   ============================================================ */

/* Smooth in-page scrolling for anchor jumps, offset so the target
   lands BELOW the fixed header stack instead of hidden under it.
   Heights mirror the stack: 174px desktop, 99px on ≤991px. */
html { scroll-behavior: smooth; scroll-padding-top: 184px; }
@media (max-width: 991px) { html { scroll-padding-top: 108px; } }

/* ---- 1. Header elevation on scroll ----
   No height change (keeps the fixed-stack maths intact); just a
   crisper shadow + subtle blur once the user starts scrolling,
   which reads as "modern / floating". */
.main-header,
.main-nav { transition: box-shadow .3s ease, background-color .3s ease; }
body.yc-scrolled .main-header {
    box-shadow: 0 8px 28px rgba(28, 20, 16, .12);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
body.yc-scrolled .main-nav {
    box-shadow: 0 6px 18px rgba(28, 20, 16, .08);
}

/* ---- 2. Fly-to-cart ----
   A clone of the product image arcs into the cart icon on "add". */
.yc-fly-clone {
    position: fixed;
    z-index: 4000;
    border-radius: 14px;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(28, 20, 16, .35);
    will-change: transform, opacity, width, height;
    transition: transform .85s cubic-bezier(.5, -0.2, .35, 1),
                opacity .85s ease,
                width .85s cubic-bezier(.5, -0.2, .35, 1),
                height .85s cubic-bezier(.5, -0.2, .35, 1);
}
/* Cart icon reacts when the clone "lands". */
.cart-btn.yc-cart-hit {
    animation: ycCartHit .55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes ycCartHit {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}

/* ---- 3. Friendlier focus ring for keyboard users (accessibility) ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--amber-400, #C59C6D);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- 4. Skeleton shimmer (for future AJAX loads) ---- */
.yc-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--sand, #E8DCC8);
    border-radius: var(--radius-sm, 12px);
}
.yc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: ycShimmer 1.4s infinite;
}
@keyframes ycShimmer { to { transform: translateX(100%); } }
body.dark-mode .yc-skeleton { background: #221d18; }
body.dark-mode .yc-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); }

/* ---- 5. Cart row exit transition (used by the in-place cart update) ---- */
.cart-table tr.yc-row-out {
    transition: opacity .35s ease, transform .35s ease;
    opacity: 0;
    transform: translateX(24px);
}
/* gentle highlight when a row's subtotal updates */
@keyframes ycFlash { 0% { background: rgba(197, 156, 109, .18); } 100% { background: transparent; } }
.cart-table td.yc-flash { animation: ycFlash .8s ease; }

/* ---- 7. Slide-in cart drawer ---- */
.yc-drawer-overlay {
    position: fixed; inset: 0; z-index: 4900;
    background: rgba(28, 20, 16, .45);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.yc-drawer-overlay.open { opacity: 1; visibility: visible; }
.yc-cart-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 5000;
    width: 390px; max-width: 92vw;
    background: var(--ivory, #FBF6ED);
    display: flex; flex-direction: column;
    box-shadow: -12px 0 40px rgba(28, 20, 16, .18);
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
html[dir="rtl"] .yc-cart-drawer { transform: translateX(-100%); box-shadow: 12px 0 40px rgba(28, 20, 16, .18); }
.yc-cart-drawer.open { transform: translateX(0); }
.yc-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; color: #fff;
    background: linear-gradient(135deg, var(--gold-dark, #95683B), var(--amber-500, #B0824F) 55%, var(--amber-400, #C59C6D));
}
.yc-drawer-title { font-family: var(--font-display, 'El Messiri', serif); font-weight: 700; font-size: 18px; }
.yc-drawer-close {
    background: rgba(255, 255, 255, .18); border: none; color: #fff; cursor: pointer;
    width: 34px; height: 34px; border-radius: 10px; font-size: 16px; transition: background .2s, transform .2s;
}
.yc-drawer-close:hover { background: rgba(255, 255, 255, .32); transform: rotate(90deg); }
.yc-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.yc-drawer-empty { text-align: center; color: var(--stone, #A09487); padding: 60px 16px; }
.yc-drawer-empty i { font-size: 42px; color: var(--dust, #C4B8AB); margin-bottom: 10px; display: block; }
.yc-drawer-item {
    display: flex; gap: 12px; align-items: center; padding: 12px 6px;
    border-bottom: 1px solid var(--sand, #E8DCC8);
    animation: ycDrawerItemIn .35s ease both;
}
@keyframes ycDrawerItemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.yc-drawer-item-img { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--parchment, #F8F4EE); }
.yc-drawer-item-img img { width: 100%; height: 100%; object-fit: cover; }
.yc-drawer-item-body { flex: 1; min-width: 0; }
.yc-drawer-item-name { font-weight: 600; font-size: 13.5px; color: var(--walnut, #62391C); text-decoration: none; display: block; margin-bottom: 4px; }
.yc-drawer-item-name:hover { color: var(--amber-600, #95683B); }
.yc-drawer-item-meta { font-size: 12.5px; color: var(--earth, #6B5D52); }
.yc-drawer-item-total { font-weight: 700; color: var(--amber-600, #95683B); font-size: 13.5px; white-space: nowrap; }
.yc-drawer-foot { padding: 16px 20px; border-top: 1px solid var(--sand, #E8DCC8); background: var(--cream-dark, #F4EBDA); display: grid; gap: 10px; }
.yc-drawer-subtotal { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--walnut, #62391C); margin-bottom: 2px; }
.yc-drawer-subtotal span:last-child { color: var(--amber-600, #95683B); font-size: 18px; }
body.dark-mode .yc-cart-drawer { background: var(--card-dark, #4F2D15); }
body.dark-mode .yc-drawer-item { border-color: var(--border-dark, rgba(197, 156, 109,.08)); }
body.dark-mode .yc-drawer-item-name { color: var(--text-dark, #E8DCC8); }
body.dark-mode .yc-drawer-foot { background: var(--surface-dark, #161210); border-color: var(--border-dark, rgba(197, 156, 109,.08)); }

/* ---- 8. Sticky add-to-cart bar (product detail, appears when the main CTA scrolls away) ---- */
.yc-sticky-buy {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1300;
    background: var(--ivory, #FBF6ED);
    border-top: 1px solid var(--sand, #E8DCC8);
    box-shadow: 0 -8px 24px rgba(28, 20, 16, .12);
    display: flex; align-items: center; gap: 14px;
    padding: 10px clamp(14px, 4vw, 40px);
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.yc-sticky-buy.show { transform: translateY(0); }
.yc-sticky-buy .yc-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yc-sticky-buy .yc-sticky-name { font-weight: 600; font-size: 14px; color: var(--walnut, #62391C); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yc-sticky-buy .yc-sticky-price { font-weight: 700; color: var(--amber-600, #95683B); font-size: 15px; }
.yc-sticky-buy .btn { white-space: nowrap; }
body.dark-mode .yc-sticky-buy { background: var(--card-dark, #4F2D15); border-color: var(--border-dark, rgba(197, 156, 109,.08)); }
body.dark-mode .yc-sticky-buy .yc-sticky-name { color: var(--text-dark, #E8DCC8); }
@media (max-width: 575.98px) { .yc-sticky-buy .yc-sticky-name { display: none; } }

/* ---- 9. Shop-by-category tabbed rail ---- */
.cat-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 18px; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--sand, #E8DCC8); background: #fff; color: var(--earth, #6B5D52);
    padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    white-space: nowrap; font-family: inherit;
}
.cat-tab i { color: var(--amber-400, #C59C6D); transition: color .25s ease; }
.cat-tab:hover { border-color: var(--amber-300, #D9BC93); color: var(--walnut, #62391C); transform: translateY(-1px); }
.cat-tab.active {
    background: linear-gradient(135deg, var(--amber-500, #B0824F), var(--amber-400, #C59C6D));
    color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(149, 104, 59, .28);
}
.cat-tab.active i { color: #fff; }
.cat-tab-panel { display: none; }
.cat-tab-panel.active { display: block; animation: ycFadeIn .35s ease; }
@keyframes ycFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cat-tab-cta-wrap { text-align: center; margin-top: 14px; }
/* Mobile: wrap the category chips onto multiple centered rows instead of a
   horizontal scroller (which chopped long labels at both screen edges). */
@media (max-width: 575.98px) {
    .cat-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
        gap: 8px;
        padding: 6px 0 16px;
    }
    .cat-tab {
        padding: 8px 14px;
        font-size: 13px;
        max-width: 100%;
    }
    .cat-tab span { overflow: hidden; text-overflow: ellipsis; }
}
body.dark-mode .cat-tab { background: var(--card-dark, #4F2D15); border-color: var(--border-dark, rgba(197, 156, 109,.12)); color: var(--text-secondary-dark, #A09487); }
body.dark-mode .cat-tab:hover { color: var(--text-dark, #E8DCC8); }

/* ---- 10. Collapsible checkout panels (declutter optional fields) ---- */
.checkout-extras { border: 1px solid var(--sand, #E8DCC8); border-radius: var(--radius-sm, 12px); overflow: hidden; background: #fff; }
.checkout-extras > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; font-weight: 600; font-size: 14px; color: var(--walnut, #62391C);
    transition: background .2s ease;
}
.checkout-extras > summary::-webkit-details-marker { display: none; }
.checkout-extras > summary i { color: var(--amber-500, #B0824F); }
.checkout-extras > summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-inline-start: auto; font-size: 12px; color: var(--stone, #A09487);
    transition: transform .25s ease;
}
.checkout-extras[open] > summary::after { transform: rotate(180deg); }
.checkout-extras > summary:hover { background: var(--cream-dark, #F4EBDA); }
.checkout-extras-body { padding: 4px 16px 16px; animation: ycFadeIn .3s ease; }
body.dark-mode .checkout-extras { background: var(--card-dark, #4F2D15); border-color: var(--border-dark, rgba(197, 156, 109,.12)); }
body.dark-mode .checkout-extras > summary { color: var(--text-dark, #E8DCC8); }

/* ---- 6. Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .yc-fly-clone,
    .cart-btn.yc-cart-hit,
    .yc-skeleton::after { animation: none !important; transition: none !important; }
}