/* ===========================================================
   HyperCake — Hot Sale "Jewel Box" Edition (compact)
   A patisserie gift-box aesthetic: espresso-dark box, antique
   gold foil, a wax-seal discount medallion and a cameo ring
   around the product photo. Smaller + follows scroll, then
   fades out.
=========================================================== */

.hc-hot-sale{
    --hc-ink-900:#1E120B;
    --hc-ink-800:#33200F;
    --hc-ink-700:#402B17;
    --hc-gold:#C9A24B;
    --hc-gold-soft:#E4C583;
    --hc-gold-light:#F3E1B0;
    --hc-rose:#C97B6E;
    --hc-cream:#F7EEDF;
    --hc-cream-dim:rgba(247,238,223,.62);
    --hc-line:rgba(201,162,75,.35);
}

/* ---------------------------------------------------------
   Font
--------------------------------------------------------- */

.hc-hot-sale{
    font-family:'Vazirmatn', Tahoma, sans-serif;
    direction:rtl;
}

/* ---------------------------------------------------------
   Card shell — compact
--------------------------------------------------------- */

.hc-hot-sale{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:222px;
    max-width:222px;
    padding:20px 16px 16px;
    border-radius:15px;
    color:var(--hc-cream);
    background:
        radial-gradient(120% 90% at 15% -10%, rgba(201,162,75,.16), transparent 55%),
        linear-gradient(165deg, var(--hc-ink-800), var(--hc-ink-900) 68%);
    border:1px solid rgba(201,162,75,.28);
    box-shadow:
        0 18px 44px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.04);
    animation:hcCardFloat 7s ease-in-out infinite;
    opacity:1;
    transition:opacity .45s ease;
}

@keyframes hcCardFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-5px); }
}

.hc-hot-sale::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        135deg,
        rgba(255,255,255,.02) 0px,
        rgba(255,255,255,.02) 1px,
        transparent 1px,
        transparent 10px
    );
    pointer-events:none;
    z-index:0;
}

.hc-hot-sale::after{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    left:-90px;
    bottom:-100px;
    border-radius:50%;
    background:radial-gradient(rgba(201,124,90,.28), transparent 70%);
    filter:blur(42px);
    pointer-events:none;
    z-index:0;
}

.hc-frame{
    position:absolute;
    inset:7px;
    border:1px solid var(--hc-line);
    border-radius:9px;
    pointer-events:none;
    z-index:1;
}

.hc-frame::before,
.hc-frame::after{
    content:"";
    position:absolute;
    width:11px;
    height:11px;
    border:1px solid var(--hc-gold-soft);
    opacity:.85;
}
.hc-frame::before{ top:-1px; right:-1px; border-width:1px 1px 0 0; }
.hc-frame::after{ bottom:-1px; left:-1px; border-width:0 0 1px 1px; }

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

.hc-hot-header{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    margin-bottom:12px;
    text-align:center;
}

.hc-eyebrow{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:9px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--hc-gold-soft);
}

.hc-eyebrow::before,
.hc-eyebrow::after{
    content:"";
    width:14px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--hc-line));
}
.hc-eyebrow::after{ transform:scaleX(-1); }

.hc-headline{
    font-size:14px;
    font-weight:800;
    color:var(--hc-cream);
    letter-spacing:.01em;
}

.hc-fire{
    display:inline-block;
    font-size:12px;
    margin-left:3px;
    animation:fire 1.6s infinite;
    filter:drop-shadow(0 0 5px rgba(255,140,60,.5));
}

@keyframes fire{
    0%,100%{ transform:rotate(-8deg); }
    50%{ transform:rotate(8deg) scale(1.12); }
}

/* ---------------------------------------------------------
   Progress
--------------------------------------------------------- */

.hc-progress{
    position:relative;
    z-index:2;
    width:100%;
    height:2px;
    border-radius:2px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
    margin-bottom:14px;
}

.hc-progress-bar{
    width:0;
    height:100%;
    background:linear-gradient(90deg, var(--hc-gold), var(--hc-gold-light));
    box-shadow:0 0 8px rgba(201,162,75,.6);
}

/* ---------------------------------------------------------
   Slider / slides
--------------------------------------------------------- */

.hc-slider{
    position:relative;
    z-index:2;
}

.hc-slide{
    display:none;
    opacity:0;
    position:absolute;
    inset:0 0 auto 0;
    width:100%;
    text-align:center;
    transform:scale(.96) translateY(10px);
    filter:blur(5px);
    transition:opacity .5s, transform .5s, filter .5s;
    pointer-events:none;
}

.hc-slide.active{
    display:block;
    position:relative;
    opacity:1;
    transform:scale(1) translateY(0);
    filter:blur(0);
    pointer-events:auto;
}

@keyframes hcFade{
    from{ opacity:0; transform:translateY(10px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------------------------------------------------------
   Product photo — cameo ring + wax-seal discount medallion
--------------------------------------------------------- */

.hc-image{
    position:relative;
    width:96px;
    margin:0 auto 12px;
}

.hc-image-ring{
    position:relative;
    width:96px;
    height:96px;
    border-radius:50%;
    padding:4px;
    background:conic-gradient(from 220deg, var(--hc-gold-light), var(--hc-gold) 35%, var(--hc-rose) 60%, var(--hc-gold) 85%, var(--hc-gold-light));
    box-shadow:0 10px 22px rgba(0,0,0,.42);
}

.hc-image-ring::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px solid var(--hc-line);
}

.hc-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
    border:2px solid var(--hc-ink-900);
}

.hc-discount{
    position:absolute;
    top:-5px;
    left:-8px;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1;
    color:var(--hc-ink-900);
    background:
        repeating-conic-gradient(from 0deg, rgba(0,0,0,.08) 0deg 4deg, transparent 4deg 16deg),
        radial-gradient(circle at 35% 30%, var(--hc-gold-light), var(--hc-gold) 55%, #9d7a34 100%);
    box-shadow:
        0 6px 12px rgba(0,0,0,.4),
        inset 0 2px 2px rgba(255,255,255,.5),
        inset 0 -2px 4px rgba(0,0,0,.35);
    animation:hcSeal 2.6s ease-in-out infinite;
}

@keyframes hcSeal{
    0%,100%{ box-shadow:0 6px 12px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.35), 0 0 0 rgba(201,162,75,0); }
    50%{ box-shadow:0 6px 12px rgba(0,0,0,.4), inset 0 2px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.35), 0 0 12px rgba(201,162,75,.55); }
}

.hc-discount-num{
    font-size:12px;
    font-weight:800;
}
.hc-discount-percent{
    font-size:7px;
    font-weight:700;
}
.hc-discount-label{
    display:none;
}

.hc-image::before{
    content:"";
    position:absolute;
    top:28px;
    left:-3px;
    width:8px;
    height:12px;
    background:#9d7a34;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
    z-index:-1;
}

/* ---------------------------------------------------------
   Title + divider
--------------------------------------------------------- */

.hc-slide h3{
    margin:2px 0 8px;
    font-size:13px;
    font-weight:700;
    color:var(--hc-cream);
}

.hc-slide h3::after{
    content:"";
    display:block;
    width:20px;
    height:1px;
    margin:8px auto 0;
    background:var(--hc-line);
}

/* ---------------------------------------------------------
   Price
--------------------------------------------------------- */

.hc-price{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:8px;
    margin-bottom:14px;
    font-variant-numeric:tabular-nums;
}

.hc-price del{
    color:var(--hc-cream-dim);
    font-size:10px;
    font-weight:400;
}

.hc-price span{
    font-size:16px;
    font-weight:800;
    background:linear-gradient(180deg, var(--hc-gold-light), var(--hc-gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* ---------------------------------------------------------
   Button
--------------------------------------------------------- */

.hc-buy{
    position:relative;
    display:block;
    width:100%;
    padding:9px;
    border-radius:8px;
    text-align:center;
    text-decoration:none;
    font-size:11.5px;
    font-weight:700;
    color:var(--hc-ink-900);
    background:linear-gradient(100deg, var(--hc-gold-soft), var(--hc-gold-light) 45%, var(--hc-gold));
    overflow:hidden;
    transition:transform .3s, box-shadow .3s;
}

.hc-buy span{
    position:relative;
    z-index:1;
}

.hc-buy:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(201,162,75,.35);
}

.hc-buy::before{
    content:"";
    position:absolute;
    top:0;
    right:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-20deg);
    transition:1s;
}

.hc-buy:hover::before{
    right:140%;
}

.hc-buy:focus-visible{
    outline:2px solid var(--hc-gold-light);
    outline-offset:3px;
}

/* ---------------------------------------------------------
   Dots
--------------------------------------------------------- */

.hc-dots{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    margin-top:12px;
}

.hc-dots span{
    width:5px;
    height:5px;
    border-radius:1px;
    background:rgba(247,238,223,.28);
    transform:rotate(45deg);
    cursor:pointer;
    transition:.3s;
}

.hc-dots span.active{
    background:var(--hc-gold-light);
    box-shadow:0 0 7px rgba(228,197,131,.7);
}

/* ---------------------------------------------------------
   Mouse-follow light
--------------------------------------------------------- */

.hc-light{
    position:absolute;
    z-index:1;
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,75,.20), transparent 65%);
    filter:blur(12px);
    pointer-events:none;
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity .25s;
}

/* ---------------------------------------------------------
   Smart responsive placement
--------------------------------------------------------- */

@media(min-width:1025px){
    .hc-hot-sale{
        position:absolute;
        right:26px;
        top:50%;
        transform:translateY(-50%);
        z-index:999;
    }
}

@media(max-width:1024px){
    .hc-hot-sale{
        position:absolute;
        right:18px;
        top:40%;
        transform:translateY(-40%) scale(.95);
    }
}

@media(max-width:768px){
    .hc-hot-sale{
        position:relative !important;
        right:auto;
        top:auto;
        transform:none;
        margin:18px auto;
        max-width:240px;
    }
}

@media(max-width:480px){
    .hc-hot-sale{
        max-width:100%;
        width:200px;
        padding:18px 14px 14px;
        border-radius:14px;
    }
}

/* ---------------------------------------------------------
   Follows the scroll for a moment, then fades away
   (class toggled by hc-hot-sale.js)
--------------------------------------------------------- */

.hc-hot-sale.hc-fixed{
    position:fixed !important;
    top:18px;
    right:22px;
    transform:none !important;
    animation:none;
}

@media(max-width:1024px){
    .hc-hot-sale.hc-fixed{
        right:14px;
        transform:scale(.92) !important;
        transform-origin:top left;
    }
}

/* while fading out, no need to intercept clicks */
.hc-hot-sale.hc-fading-out{
    pointer-events:none;
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media(prefers-reduced-motion: reduce){
    .hc-hot-sale,
    .hc-fire,
    .hc-discount{
        animation:none !important;
    }
    .hc-buy,
    .hc-slide,
    .hc-hot-sale{
        transition:none !important;
    }
}