/* =====================================================================
   Occasion themes (admin → Occasion theme). Loaded only while a theme is on.
   body.sfg-theme + body.sfg-theme-{diwali|valentine|mothers_day}
   Colours come from --sfg-brand / --sfg-brand-soft / --sfg-accent / --primary (set inline).
   Only transform / opacity are animated so the page stays smooth.
   ===================================================================== */

/* ---------- colours & buttons ---------- */
body.sfg-theme .tf-btn.btn-fill,
body.sfg-theme .tf-btn.btn-primary,
body.sfg-theme .btn-primary {
    background-image: linear-gradient(135deg, var(--sfg-brand), var(--primary)) !important;
    border-color: var(--sfg-brand) !important;
    box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--primary) 70%, #000), 0 10px 22px -8px var(--sfg-brand);
}
body.sfg-theme a:hover { color: var(--sfg-brand); }

/* ---------- greeting strip ---------- */
.sfg-occasion { position: relative; overflow: hidden; padding: 9px 44px 9px 16px; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .01em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sfg-occasion::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%) -200% 0 / 60% 100% no-repeat; animation: sfg-shine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sfg-shine { to { background-position: 300% 0; } }
.sfg-occasion__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.22); color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; z-index: 1; }
@media (max-width: 575px) { .sfg-occasion { font-size: 12.5px; padding: 8px 40px 8px 12px; } }
/* Greeting strip in the logo pink (gold sparkle stays) */
body.sfg-theme-diwali .sfg-occasion { background: linear-gradient(90deg, #a3124f, #f82878 55%, #ff6fa3); }
body.sfg-theme-valentine .sfg-occasion { background: linear-gradient(90deg, #9f1239, #e11d48 50%, #fb7185); }
body.sfg-theme-mothers_day .sfg-occasion { background: linear-gradient(90deg, #7e4a8c, #c2557a 55%, #e8a0b4); }

/* ---------- festive border under the header and over the footer ---------- */
body.sfg-theme #header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 18px; pointer-events: none; background-repeat: repeat-x; z-index: 2; }
body.sfg-theme-diwali #header::after {   /* toran: marigolds + mango leaves */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18'%3E%3Cdefs%3E%3CradialGradient id='m' cx='40%25' cy='35%25'%3E%3Cstop offset='0' stop-color='%23ffe082'/%3E%3Cstop offset='.55' stop-color='%23ffa000'/%3E%3Cstop offset='1' stop-color='%23e65100'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 3 Q22 10 44 3' fill='none' stroke='%23b45309' stroke-width='1.2'/%3E%3Ccircle cx='11' cy='7' r='5' fill='url(%23m)'/%3E%3Cpath d='M30 6 q4 9 0 11 q-4 -2 0 -11z' fill='%232e7d32'/%3E%3C/svg%3E");
    background-size: 44px 18px; }
/* Diwali: the toran's marigold bulbs blink — every other bulb lights up, then they swap (chasing lights). */
body.sfg-theme-diwali #header::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 18px; pointer-events: none; z-index: 3;
    background: radial-gradient(circle at 11px 7px, #fffde7 0 2.5px, #ffe57f 3.5px, rgba(255, 193, 7, .75) 5.5px, rgba(255, 160, 0, .35) 8px, transparent 11px) 0 0 / 88px 18px repeat-x;
    filter: drop-shadow(0 0 4px rgba(255, 193, 7, .9));
    animation: sfg-chase 1.2s steps(1, end) infinite, sfg-glow .3s ease-in-out infinite alternate;
}
@keyframes sfg-chase { 0% { background-position: 0 0; } 50% { background-position: 44px 0; } }
@keyframes sfg-glow { from { opacity: .8; } to { opacity: 1; } }

body.sfg-theme-valentine #header::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cdefs%3E%3CradialGradient id='h' cx='35%25' cy='30%25'%3E%3Cstop offset='0' stop-color='%23ffb3c6'/%3E%3Cstop offset='.6' stop-color='%23e11d48'/%3E%3Cstop offset='1' stop-color='%239f1239'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 3 Q18 9 36 3' fill='none' stroke='%23fda4af' stroke-width='1'/%3E%3Cpath d='M18 16 11 10a4 4 0 0 1 7-4 4 4 0 0 1 7 4z' fill='url(%23h)'/%3E%3C/svg%3E");
    background-size: 36px 18px; }
body.sfg-theme-mothers_day #header::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpath d='M0 3 Q20 9 40 3' fill='none' stroke='%23b892c4' stroke-width='1'/%3E%3Cg transform='translate(12 9)'%3E%3Ccircle r='2.2' fill='%23ffd166'/%3E%3Ccircle cx='0' cy='-4' r='2.8' fill='%23e8a0b4'/%3E%3Ccircle cx='3.8' cy='-1.2' r='2.8' fill='%23e8a0b4'/%3E%3Ccircle cx='2.4' cy='3.3' r='2.8' fill='%23d987a5'/%3E%3Ccircle cx='-2.4' cy='3.3' r='2.8' fill='%23d987a5'/%3E%3Ccircle cx='-3.8' cy='-1.2' r='2.8' fill='%23e8a0b4'/%3E%3Ccircle r='2' fill='%23ffd166'/%3E%3C/g%3E%3Cpath d='M30 4 q5 6 1 11 q-4 -4 -1 -11z' fill='%2381b29a'/%3E%3C/svg%3E");
    background-size: 40px 18px; }
body.sfg-theme .sfg-footer { position: relative; border-top: 0; }
body.sfg-theme .sfg-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--primary), var(--sfg-brand), var(--sfg-accent), var(--sfg-brand), var(--primary)); }

/* ---------- 3D product & event cards ---------- */
body.sfg-theme .card-product,
body.sfg-theme .pl-card,
body.sfg-theme .ev-card {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
    transform-style: preserve-3d;
    border-radius: 14px;
}
@media (hover: hover) {
    body.sfg-theme .card-product:hover,
    body.sfg-theme .pl-card:hover,
    body.sfg-theme .ev-card:hover {
        transform: perspective(900px) rotateX(5deg) translateY(-6px);
        box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--sfg-brand) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--sfg-brand) 25%, transparent);
    }
}
body.sfg-theme .card-product .card-product-wrapper,
body.sfg-theme .pl-card .pl-card__img { position: relative; }
body.sfg-theme .card-product .card-product-wrapper::after,
body.sfg-theme .pl-card .pl-card__img::after {   /* glossy light sweep on hover */
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-60%); transition: transform .7s, opacity .3s;
}
@media (hover: hover) {
    body.sfg-theme .card-product:hover .card-product-wrapper::after,
    body.sfg-theme .pl-card:hover .pl-card__img::after { opacity: 1; transform: translateX(60%); }
}

/* ---------- section titles with a 3D ornament ---------- */
body.sfg-theme .hp-section__title,
body.sfg-theme .pl-title,
body.sfg-theme .category-page-title,
body.sfg-theme .pd-title,
body.sfg-theme .pd-related__title {
    background: linear-gradient(180deg, var(--main, #253d4e) 40%, color-mix(in srgb, var(--sfg-brand) 75%, #000));
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
body.sfg-theme .hp-section__title::after,
body.sfg-theme .pl-title::after,
body.sfg-theme .category-page-title::after {
    content: ""; display: block; width: 74px; height: 14px; margin: 6px 0 0; background-repeat: no-repeat; background-position: left center;
}
body.sfg-theme-diwali .hp-section__title::after, body.sfg-theme-diwali .pl-title::after, body.sfg-theme-diwali .category-page-title::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14'%3E%3Cpath d='M2 7h24M48 7h24' stroke='%23f5b800' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M29 8q8 7 16 0z' fill='%23b45309'/%3E%3Cpath d='M37 7q-3-3 0-7 3 4 0 7z' fill='%23ffb300'/%3E%3C/svg%3E"); }
body.sfg-theme-valentine .hp-section__title::after, body.sfg-theme-valentine .pl-title::after, body.sfg-theme-valentine .category-page-title::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14'%3E%3Cpath d='M2 7h26M46 7h26' stroke='%23fb7185' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M37 13 31 7.5a3.4 3.4 0 0 1 6-3.5 3.4 3.4 0 0 1 6 3.5z' fill='%23e11d48'/%3E%3C/svg%3E"); }
body.sfg-theme-mothers_day .hp-section__title::after, body.sfg-theme-mothers_day .pl-title::after, body.sfg-theme-mothers_day .category-page-title::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14'%3E%3Cpath d='M2 7h26M46 7h26' stroke='%23b892c4' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M37 13V8' stroke='%2381b29a' stroke-width='1.5'/%3E%3Cpath d='M33 3q1 6 4 6t4-6q-2 2-4 0-2 2-4 0z' fill='%23c2557a'/%3E%3C/svg%3E"); }

/* ---------- category pages: subcategory tiles, bento banners, price circles, icon tiles ---------- */
body.sfg-theme .collection-item,
body.sfg-theme .hp-bento__tile,
body.sfg-theme .hp-price__item,
body.sfg-theme .hp-icon-grid__item,
body.sfg-theme .hp-arch__item,
body.sfg-theme .hp-feel__item,
body.sfg-theme .hp-people__item,
body.sfg-theme .pl-circle,
body.sfg-theme .pd-highlights li {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, filter .35s;
    transform-style: preserve-3d;
}
@media (hover: hover) {
    body.sfg-theme .collection-item:hover,
    body.sfg-theme .hp-bento__tile:hover,
    body.sfg-theme .hp-arch__item:hover,
    body.sfg-theme .hp-feel__item:hover,
    body.sfg-theme .hp-people__item:hover {
        transform: perspective(900px) rotateX(5deg) rotateY(-3deg) translateY(-6px);
        filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--sfg-brand) 35%, transparent));
    }
    body.sfg-theme .hp-price__item:hover,
    body.sfg-theme .hp-icon-grid__item:hover,
    body.sfg-theme .pl-circle:hover { transform: perspective(600px) translateY(-6px) rotateY(12deg) scale(1.04); }
    body.sfg-theme .pd-highlights li:hover { transform: perspective(600px) rotateX(6deg) translateY(-4px); box-shadow: 0 12px 20px -12px var(--sfg-brand); }
}
/* glossy sweep on category tiles & banners */
body.sfg-theme .collection-image, body.sfg-theme .hp-bento__tile { position: relative; overflow: hidden; }
body.sfg-theme .collection-image::after, body.sfg-theme .hp-bento__tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-60%); transition: transform .8s, opacity .3s;
}
@media (hover: hover) {
    body.sfg-theme .collection-item:hover .collection-image::after,
    body.sfg-theme .hp-bento__tile:hover::after { opacity: 1; transform: translateX(60%); }
}
/* round price / category circles get a festive ring */
body.sfg-theme .hp-price__circle,
body.sfg-theme .pl-circle__img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--sfg-brand) 55%, transparent), 0 8px 18px -8px var(--sfg-brand); }
/* subcategory name buttons */
body.sfg-theme .collection-title { background-image: linear-gradient(135deg, #fff, var(--sfg-brand-soft)) !important; border-color: color-mix(in srgb, var(--sfg-brand) 35%, transparent) !important; }
body.sfg-theme .collection-item:hover .collection-title { background-image: linear-gradient(135deg, var(--sfg-brand), var(--primary)) !important; color: #fff !important; }
/* filter chips */
body.sfg-theme .pl-chip, body.sfg-theme .sfg-chip { transition: transform .25s, box-shadow .25s; }
@media (hover: hover) { body.sfg-theme .pl-chip:hover, body.sfg-theme .sfg-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px var(--sfg-brand); } }

/* ---------- product page: framed photo + 3D feature boxes ---------- */
body.sfg-theme .tf-product-media-main { border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sfg-brand) 20%, transparent), 0 24px 40px -24px color-mix(in srgb, var(--sfg-brand) 60%, transparent); }
body.sfg-theme .pd-highlights li { background: linear-gradient(160deg, #fff 55%, var(--sfg-brand-soft)); border-color: color-mix(in srgb, var(--sfg-brand) 20%, transparent) !important; }
body.sfg-theme .pd-cutoff { background: var(--sfg-brand-soft); border-color: color-mix(in srgb, var(--sfg-brand) 35%, transparent) !important; }
body.sfg-theme .pd-tab.is-active { border-bottom-color: var(--sfg-brand); color: var(--sfg-brand); }

/* ---------- soft corner art on the page background ---------- */
body.sfg-theme #wrapper { position: relative; }
body.sfg-theme #wrapper::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .6;
    background:
        radial-gradient(600px 400px at -5% 110%, color-mix(in srgb, var(--sfg-brand) 14%, transparent), transparent 70%),
        radial-gradient(520px 360px at 105% -5%, color-mix(in srgb, var(--sfg-accent) 14%, transparent), transparent 70%); }

/* ---------- floating 3D layer (built by occasion-fx.js) — sits behind the content ---------- */
/* Behind the page content (a background layer) — the header toran / lights stay in front. */
.sfg-fx { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; perspective: 900px; }
.sfg-fx__p { position: absolute; top: 0; left: var(--x); width: var(--s); height: var(--s); opacity: 0; will-change: transform, opacity;
    animation: var(--anim) var(--d) linear var(--delay) infinite; }
.sfg-fx__p > svg { display: block; width: 100%; height: 100%; animation: sfg-spin3d var(--spin) ease-in-out infinite alternate; transform-style: preserve-3d; }
.sfg-fx__p.is-far { filter: blur(1.2px); }
.sfg-fx.is-paused .sfg-fx__p, .sfg-fx.is-paused .sfg-fx__p > svg { animation-play-state: paused; }

@keyframes sfg-rise {   /* from below the screen up and out */
    0%   { transform: translate3d(0, 105vh, 0); opacity: 0; }
    10%  { opacity: var(--o); }
    50%  { transform: translate3d(var(--sway), 50vh, 0); }
    90%  { opacity: var(--o); }
    100% { transform: translate3d(0, -15vh, 0); opacity: 0; }
}
@keyframes sfg-fall {   /* from above the screen down */
    0%   { transform: translate3d(0, -15vh, 0); opacity: 0; }
    10%  { opacity: var(--o); }
    50%  { transform: translate3d(var(--sway), 50vh, 0); }
    90%  { opacity: var(--o); }
    100% { transform: translate3d(0, 105vh, 0); opacity: 0; }
}
@keyframes sfg-spin3d {
    from { transform: rotateX(var(--rx)) rotateY(-35deg) rotateZ(calc(var(--rz) * -1)); }
    to   { transform: rotateX(calc(var(--rx) * -1)) rotateY(35deg) rotateZ(var(--rz)); }
}
.sfg-fx__p .flame { transform-origin: 50% 100%; transform-box: fill-box; animation: sfg-flicker .9s ease-in-out infinite alternate; }
@keyframes sfg-flicker { from { transform: scale(.9, .85); } to { transform: scale(1.05, 1.12); } }
.sfg-fx__p .wing { transform-origin: 50% 50%; transform-box: fill-box; animation: sfg-flap .35s ease-in-out infinite alternate; }
.sfg-fx__p .wing.r { animation-delay: .02s; }
@keyframes sfg-flap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }

/* ---------- hanging decorations at the page sides (wide screens) ---------- */
.sfg-hang { position: absolute; top: 0; z-index: 3; pointer-events: none; transform-origin: 50% 0; animation: sfg-swing 3.6s ease-in-out infinite alternate; }
.sfg-hang--l { left: 18px; } .sfg-hang--r { right: 18px; animation-delay: -1.8s; }
.sfg-hang svg { display: block; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
@keyframes sfg-swing { from { transform: perspective(500px) rotateZ(-5deg) rotateY(-20deg); } to { transform: perspective(500px) rotateZ(5deg) rotateY(20deg); } }
@media (max-width: 1499px) { .sfg-hang--l { left: 2px; } .sfg-hang--r { right: 2px; } .sfg-hang svg { width: 40px; height: auto; } }
@media (max-width: 1279px) { .sfg-hang { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .sfg-fx, .sfg-hang { display: none !important; }
    body.sfg-theme-diwali #header::before { animation: none; }
    .sfg-occasion::before { animation: none; }
    body.sfg-theme .card-product:hover, body.sfg-theme .pl-card:hover, body.sfg-theme .ev-card:hover,
    body.sfg-theme .collection-item:hover, body.sfg-theme .hp-bento__tile:hover, body.sfg-theme .hp-price__item:hover,
    body.sfg-theme .hp-icon-grid__item:hover, body.sfg-theme .pl-circle:hover, body.sfg-theme .pd-highlights li:hover { transform: none; }
}
@media print { .sfg-fx, .sfg-hang, .sfg-occasion { display: none !important; } }