/* =====================================================================
   decor.css - decorative layer built from the generated brand artwork
   in public/frontend/decor/ (ivory paper, gold mandalas, lotus divider,
   Banarasi kinari border, corner flourish).

   Purely visual: no markup depends on it. To switch it all off, remove
   the <link> to this file in resources/views/frontend/layouts/app.blade.php.
   Palette: maroon #62281C, red #E5194A, antique gold #B8893A, ivory #F8F2EA.
   ===================================================================== */

:root {
    --rb-gold: #B8893A;
    --rb-gold-light: #D9B26A;
    --rb-paper: url("decor/paper.webp");
    --rb-kinari: url("decor/kinari-tile.webp");
}

/* ---------------------------------------------------------------------
   Section headings: the lotus-and-paisley ornament sits under the title
   --------------------------------------------------------------------- */
.rb-section-title::before,
.rb-section-title::after {
    display: none;
}
.rb-section-header::after {
    content: "";
    display: block;
    width: min(380px, 78%);
    aspect-ratio: 1100 / 95;
    margin: 8px auto 0;
    background: url("decor/divider.webp") center / contain no-repeat;
}

/* The category intro text already follows a heading ornament, so it needs none of its own */
.collection-intro {
    margin-top: 4px;
}

/* ---------------------------------------------------------------------
   Section backgrounds: ivory paper + a soft gold mandala in one corner
   --------------------------------------------------------------------- */
.most-popular-section,
.featured-week-section {
    background-color: #f8f2ea;
    background-image: url("decor/mandala-corner-tr.webp"), var(--rb-paper);
    background-repeat: no-repeat, repeat;
    background-position: right top, 0 0;
    background-size: 340px auto, 480px 480px;
}
.featured-week-section {
    background-image: url("decor/mandala-corner-bl.webp"), var(--rb-paper);
    background-position: left bottom, 0 0;
}
.shop-collection-section {
    background-color: #f8f2ea;
    background-image: var(--rb-paper);
    background-size: 480px 480px;
}

/* White sections: one mandala, alternating corners */
.best-sellers-section {
    background-image: url("decor/mandala-soft.webp");
    background-repeat: no-repeat;
    background-position: left -110px top -110px;
    background-size: 330px auto;
}
.new-arrivals-section {
    background-image: url("decor/mandala-soft.webp");
    background-repeat: no-repeat;
    background-position: right -110px bottom -110px;
    background-size: 330px auto;
}
.blog-section-home {
    background-image: url("decor/mandala-soft.webp");
    background-repeat: no-repeat;
    background-position: right -110px top -110px;
    background-size: 310px auto;
}

/* ---------------------------------------------------------------------
   Banarasi kinari border: under the hero and across the top of the footer
   --------------------------------------------------------------------- */
.popular-categories-section {
    position: relative;
}
.popular-categories-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    z-index: 1;
    pointer-events: none;
    background: var(--rb-kinari) repeat-x left top / auto 44px;
    box-shadow: 0 4px 10px rgba(98, 40, 28, 0.15);
}
.footer {
    background-image: radial-gradient(ellipse at 20% 0%, rgba(217, 178, 106, 0.10) 0%, rgba(217, 178, 106, 0) 55%), linear-gradient(135deg, var(--primary-brown) 0%, var(--primary-dark) 100%);
}
.footer::before {
    height: 44px;
    background: var(--rb-kinari) repeat-x left top / auto 44px;
}

/* ---------------------------------------------------------------------
   Smaller touches
   --------------------------------------------------------------------- */
/* Category circles: fine double gold ring */
.category-img-circle {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rb-gold-light), 0 10px 20px rgba(98, 40, 28, 0.10);
}
.category-circle-item:hover .category-img-circle {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--rb-gold), 0 16px 28px rgba(98, 40, 28, 0.18);
}

/* Product, blog and contact cards: gold-to-red accent bar that grows in on hover */
.product-card,
.rb-blog-card,
.contact-info-card {
    position: relative;
}
.product-card::before,
.rb-blog-card::before,
.contact-info-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, var(--rb-gold), #E5194A);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
    pointer-events: none;
}
.product-card:hover::before,
.rb-blog-card:hover::before,
.contact-info-card:hover::before {
    transform: scaleX(1);
}

/* Breadcrumb bar: ivory paper with a gold hairline */
.rb-breadcrumb-wrapper {
    background: #fbf5ec var(--rb-paper);
    background-size: 480px 480px;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(184, 137, 58, 0.55);
}

/* Product page: gold flourishes on two opposite corners of the main photo */
.pd-main-image-container {
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--rb-gold-light), 0 14px 28px rgba(98, 40, 28, 0.10);
}
.pd-main-image-container::before,
.pd-main-image-container::after {
    content: "";
    position: absolute;
    width: 96px;
    height: 96px;
    z-index: 4;
    pointer-events: none;
    background: url("decor/corner.webp") center / contain no-repeat;
}
.pd-main-image-container::before {
    top: -24px;
    left: -24px;
}
.pd-main-image-container::after {
    right: -24px;
    bottom: -24px;
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .rb-section-header::after {
        width: min(300px, 82%);
        margin-top: 4px;
    }
    .most-popular-section,
    .featured-week-section {
        background-size: 220px auto, 480px 480px;
    }
    .best-sellers-section,
    .new-arrivals-section,
    .blog-section-home {
        background-size: 220px auto;
    }
    .popular-categories-section::before,
    .footer::before {
        height: 30px;
        background-size: auto 30px;
    }
    .pd-main-image-container::before,
    .pd-main-image-container::after {
        width: 52px;
        height: 52px;
    }
    .pd-main-image-container::before {
        top: -8px;
        left: -8px;
    }
    .pd-main-image-container::after {
        right: -8px;
        bottom: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card::before,
    .rb-blog-card::before,
    .contact-info-card::before {
        transition: none;
    }
}

/* Keep the category circles clear of the kinari border under the hero */
.popular-categories-section {
    padding-top: 68px !important;
}
@media (max-width: 768px) {
    .popular-categories-section {
        padding-top: 48px !important;
    }
}
/* The gold ring around the category circles was being clipped by the carousel's overflow */
.categories-carousel {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Top announcement bar: brand messages scroll slowly and stay readable */
.topbar .container { animation-duration: 55s; }
.topbar-item { display: inline-block; margin-right: 56px; }
.topbar-item:last-child { margin-right: 0; }
@media (max-width: 575px) { .topbar .container { animation-duration: 45s; } }
@media (prefers-reduced-motion: reduce) { .topbar .container { animation: none; padding-left: 0; white-space: normal; text-align: center; } .topbar-item:not(:first-child) { display: none; } }