:root {
    /* Fashion Corner brand palette */
    --fc-ink: #1F1023;
    --fc-fuchsia: #E91E8C;
    --fc-gold: #F5A623;
    --fc-teal: #00B8A9;
    --fc-cream: #FFF8F0;

    /* Semantic aliases (kept so every existing class below still works) */
    --fc-black: #1F1023;
    --fc-charcoal: #241C29;
    --fc-gray: #7a6b74;
    --fc-muted: #a3939c;
    --fc-border: #ece1d8;
    --fc-bg: #FFF8F0;
    --fc-bg-soft: #FBF1E6;
    --fc-accent: #E91E8C;
    --fc-sale: #E91E8C;
    --fc-font-display: 'Fraunces', Georgia, serif;
    --fc-font-body: 'Manrope', system-ui, sans-serif;
    --fc-header-height: 68px;
    --fc-fixed-top-height: 0px;
    --fc-transition: 0.25s ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--fc-font-body);
    color: var(--fc-charcoal);
    background: var(--fc-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--fc-fixed-top-height, 0px);
}

h1, h2, h3, h4, h5, h6,
.display-font {
    font-family: var(--fc-font-display);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--fc-black);
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--fc-transition);
}

a:hover {
    opacity: 0.75;
}

/* Header */
.fc-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.fc-header {
    background: rgba(255, 248, 240, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fc-border);
    min-height: var(--fc-header-height);
}

/* Header top bar: hamburger (mobile only) on the LEFT, the logo CENTERED
   (large, no business-name text next to it), search/wishlist/cart/account
   on the RIGHT — at every screen size. The logo is pulled out of normal
   flex flow and centered absolutely so it stays centered regardless of how
   wide the left/right zones are; those two zones then sit naturally at
   each end. */
.fc-header-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Without this, the topbar (as a flex item of .navbar, alongside the
       #fcNav menu row) only sizes to fit its own content — a few icons —
       instead of spanning the header. That left the icons squeezed into a
       narrow box near the logo instead of at the true right edge of the
       page, and the centered brand name centering on that narrow box
       instead of the page. Forcing full width fixes both at once, and
       pushes the #fcNav menu row onto its own line below (more breathing
       room for the category links too). */
    width: 100%;
    /* The logo is centered absolutely (see .fc-brand-logo-link below), so it
       no longer adds its own height to this row the way normal content
       would — without an explicit min-height here this row was only as
       tall as the small hamburger/icons next to it, so centering the much
       taller logo inside it made the top of the logo poke up out of the
       header and overlap the promo ticker bar above. Matching this to the
       logo's height keeps the whole logo inside the header. */
    min-height: 3.25rem;
    transition: min-height var(--fc-transition);
}

@media (min-width: 992px) {
    .fc-header-topbar {
        min-height: 4.5rem;
    }
}

/* Scrolled a little way down: the promo ticker and bulk banner tuck away
   (see the rules further down) and this logo row shrinks a touch more, so
   the pinned header stays a slim strip instead of permanently eating a
   big chunk of a phone screen. */
.fc-fixed-top--condensed .fc-header-topbar {
    min-height: 2.75rem;
}

@media (min-width: 992px) {
    .fc-fixed-top--condensed .fc-header-topbar {
        min-height: 3.75rem;
    }
}

.fc-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.fc-header-left .navbar-toggler {
    padding: 0;
}

.fc-header-right {
    flex-shrink: 0;
}

/* Logo: pulled out of normal flex flow and centered absolutely on the page,
   sized large so it's clearly visible — this is now the only thing in the
   header's center (the "Fashion Mart" text name was removed). */
.fc-brand-logo-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-black);
    text-decoration: none;
    max-width: 60%;
}

.fc-brand-logo-fallback {
    font-size: 3rem;
    color: var(--fc-fuchsia);
}

.fc-brand-logo {
    height: 2.75rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    transition: height var(--fc-transition);
}

@media (min-width: 992px) {
    .fc-brand-logo-link {
        max-width: 45%;
    }

    .fc-brand-logo {
        height: 3.75rem;
    }
}

.fc-fixed-top--condensed .fc-brand-logo {
    height: 2.25rem;
}

@media (min-width: 992px) {
    .fc-fixed-top--condensed .fc-brand-logo {
        height: 3.25rem;
    }
}

.fc-footer-logo {
    height: 2.25rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
    border-radius: 0;
    border: none;
}

/* Promo ticker banner */
.fc-promo-ticker {
    background: var(--fc-ink);
    color: var(--fc-cream);
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 0;
    position: relative;
    height: 42px;
    transition: height var(--fc-transition), padding var(--fc-transition), opacity var(--fc-transition);
}

/* Scrolled down: this strip (and the bulk banner below it) tucks away to
   nothing so only the slim logo bar stays pinned at the top of the screen. */
.fc-fixed-top--condensed .fc-promo-ticker {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/* The 3 lines stay fixed in the center of the header — they never scroll —
   and are simply stacked on top of one another; storefront.js toggles
   which one has .is-active every 5 seconds, and this fade is the only
   motion involved. */
.fc-promo-ticker-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fc-promo-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.fc-promo-line.is-active {
    opacity: 1;
}

.fc-promo-line:nth-child(2n) {
    color: var(--fc-gold);
}

@media (prefers-reduced-motion: reduce) {
    .fc-promo-line { transition: none; }
}

/* Cash-on-delivery reminder pill  replaces the old 3-line rotator with
   one bold, flashing gold line shown on every page inside the header
   promo ticker (see storefront.blade.php). Multiple layered animations
   (colour flash + gentle pulse) so it reliably catches the eye. */
.fc-promo-line.fc-promo-cod {
    position: static;
    opacity: 1;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #3a2a00;
    background-color: var(--fc-gold);
    border: 2px solid #3a2a00;
    border-radius: 100px;
    padding: 3px 16px;
    box-shadow: 0 3px 12px rgba(245, 166, 35, 0.55);
    animation: fcPromoCodFlash 0.9s steps(1, end) infinite, fcBulkPulse 1.8s ease-in-out infinite;
}

@media (min-width: 576px) {
    .fc-promo-line.fc-promo-cod {
        font-size: 15px;
        padding: 4px 20px;
    }
}

@keyframes fcPromoCodFlash {
    0%, 49% { background-color: var(--fc-gold); border-color: #3a2a00; }
    50%, 100% { background-color: #fff4cc; border-color: #b9860a; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-promo-line.fc-promo-cod { animation: none; }
}

/* Bulk-order banner — a small pill, centered on the page (not a full-width
   line), that snaps between two reds like a flashing warning light to
   catch the eye without taking over the whole page. */
.fc-bulk-banner {
    display: flex;
    justify-content: center;
    padding: 6px 12px;
    max-height: 70px;
    overflow: hidden;
    transition: max-height var(--fc-transition), padding var(--fc-transition), opacity var(--fc-transition);
}

/* Scrolled down: tucks away with the promo ticker (see .fc-fixed-top--condensed
   above) so only the slim logo bar stays pinned at the top of the screen. */
.fc-fixed-top--condensed .fc-bulk-banner {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.fc-bulk-banner-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    background: #000;
    color: #ffd400;
    border: 2px solid #ff2d2d;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.66rem;
    line-height: 1.3;
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 3px 14px rgba(255, 45, 45, 0.45);
    animation: fcBulkFlash 0.9s steps(1, end) infinite, fcBulkPulse 1.8s ease-in-out infinite;
}

.fc-bulk-banner-pill i {
    font-size: 0.95rem;
    flex-shrink: 0;
    animation: fcBulkIconShake 1.8s ease-in-out infinite;
}

/* An expanding, fading ring — the "shockwave" that makes the pill read as
   an actual flash going off rather than just a color change. */
.fc-bulk-banner-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    border: 2px solid rgba(255, 45, 45, 0.75);
    animation: fcBulkRing 1.8s ease-out infinite;
    pointer-events: none;
}

@media (min-width: 576px) {
    .fc-bulk-banner-pill {
        font-size: 0.78rem;
        padding: 7px 20px;
        white-space: nowrap;
    }
}

@keyframes fcBulkFlash {
    0%, 49% { background-color: #000000; border-color: #ff2d2d; }
    50%, 100% { background-color: #1a0000; border-color: #ff6b6b; }
}

@keyframes fcBulkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes fcBulkIconShake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-12deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-8deg); }
    40% { transform: rotate(0deg); }
}

@keyframes fcBulkRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-bulk-banner-pill,
    .fc-bulk-banner-pill i,
    .fc-bulk-banner-pill::after {
        animation: none;
    }
}

/* Rotating photo gallery — under "Shop by Category". Large, borderless
   photos with soft-fading edges (no card box around them) so they read as
   decorative background art rather than another row of product cards; the
   JS in storefront.js swaps each one to a new random product photo every
   couple of seconds and keeps the link pointed at whichever product is
   currently showing. */
.fc-photo-gallery-section {
    padding-top: 0;
}

.fc-photo-gallery-wrap {
    position: relative;
}

.fc-photo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .fc-photo-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.fc-gallery-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
    border-radius: 14px;
    border: 4px solid #1a1a1a;
}

/* Each tile gets its own frame color, cycling black, red, yellow, purple. */
.fc-gallery-tile:nth-child(4n+1) {
    border-color: #1a1a1a;
}

.fc-gallery-tile:nth-child(4n+2) {
    border-color: #e63946;
}

.fc-gallery-tile:nth-child(4n+3) {
    border-color: #f4b400;
}

.fc-gallery-tile:nth-child(4n+4) {
    border-color: #8e44ad;
}

@media (min-width: 992px) {
    .fc-gallery-tile {
        aspect-ratio: 1 / 1;
    }
}

.fc-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.22s ease, transform 0.4s ease;
}

.fc-gallery-tile.is-fading img {
    opacity: 0;
}

.fc-gallery-tile:hover img {
    transform: scale(1.06);
}

/* Urdu "click your favorite photo and buy" line - sits above the gallery
   photos (not on top of them) as its own centered, flashing line so it
   grabs attention without ever covering a photo. */
.fc-gallery-caption {
    position: static;
    margin: 0 auto 1.1rem;
    max-width: min(92%, 34rem);
    text-align: center;
    color: #FFFF00;
    background: #000;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    font-family: 'Noto Nastaliq Urdu', var(--fc-font-display), serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 3.4vw, 1.85rem);
    line-height: 1.5;
    letter-spacing: 0.01em;
    animation: fc-caption-flash 1.4s ease-in-out infinite;
}

@keyframes fc-caption-flash {
    0%, 100% {
        opacity: 1;
        color: #FFFF00;
        text-shadow: 0 0 14px rgba(255, 255, 0, 0.85);
    }
    50% {
        opacity: 0.35;
        color: #FFFF00;
        text-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-gallery-caption {
        animation: none;
        color: #FFFF00;
    }
}

.fc-nav-link {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fc-charcoal);
    padding: 0.5rem 0;
    transition: color var(--fc-transition);
}

.fc-nav-link:hover,
.fc-nav-link.active {
    opacity: 1;
    color: var(--fc-fuchsia);
}

.fc-cart-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    background: var(--fc-fuchsia);
    color: #fff;
    border-radius: 999px;
}

/* Hero */
.fc-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--fc-bg-soft);
}

.fc-hero-fullbleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

.fc-hero-slide {
    position: relative;
    min-height: clamp(320px, 55vh, 620px);
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--fc-bg-soft);
}

.fc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31,16,35,0.75) 0%, rgba(31,16,35,0.15) 60%, transparent 100%);
}

.fc-hero-content {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 6vw, 4rem);
    color: #fff;
    max-width: 640px;
}

.fc-hero-title {
    font-family: var(--fc-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 0.75rem;
    color: #fff;
}

.fc-hero-subtitle {
    font-size: 1rem;
    opacity: 0.92;
    margin-bottom: 1.5rem;
}

.fc-hero-placeholder {
    min-height: clamp(280px, 45vh, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fc-ink), var(--fc-teal));
    color: rgba(255, 248, 240, 0.85);
    font-family: var(--fc-font-display);
    font-size: 1.5rem;
}

/* Homepage cover image set in Admin -> Settings (shown when there are no
   active banner slides). */
.fc-hero-placeholder--photo {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.fc-hero-placeholder--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(31, 16, 35, 0.45);
}

.fc-hero-placeholder--photo > * {
    position: relative;
    z-index: 1;
}

.fc-hero-placeholder--photo .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Sections */
.fc-section {
    padding: clamp(1rem, 2.25vw, 1.5rem) 0;
}

/* The first section under the header — "Shop by Category" now that the
   banner is gone — doesn't need that same tall gap above it. That spacing
   used to separate it from the hero banner, not from the header itself, and
   left directly under the header it just reads as a big empty gap. */
main > .fc-section:first-of-type {
    padding-top: 0.75rem;
}

.fc-section-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-bottom: 0.25rem;
}

.fc-section-subtitle {
    color: var(--fc-gray);
    font-size: 0.9375rem;
    margin-bottom: 2rem;
}

/* Category circular carousel */
.fc-category-carousel {
    position: relative;
    margin: 0 -0.25rem;
}

.fc-category-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto; /* arrow clicks animate via JS (storefront.js); this keeps native drag/snap fast and immediate */
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.25rem 1rem;
    scrollbar-width: none;
}

.fc-category-track::-webkit-scrollbar {
    display: none;
}

.fc-category-item {
    flex: 0 0 calc((100% - 2.5rem) / 3);
    max-width: calc((100% - 2.5rem) / 3);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--fc-black);
    text-decoration: none;
    min-width: 0;
}

@media (min-width: 576px) {
    .fc-category-item {
        flex-basis: calc((100% - 3.75rem) / 4);
        max-width: calc((100% - 3.75rem) / 4);
    }
}

@media (min-width: 768px) {
    .fc-category-track {
        gap: 1.5rem;
    }

    .fc-category-item {
        flex-basis: calc((100% - 6rem) / 5);
        max-width: calc((100% - 6rem) / 5);
    }
}

@media (min-width: 992px) {
    .fc-category-item {
        flex-basis: calc((100% - 7.5rem) / 6);
        max-width: calc((100% - 7.5rem) / 6);
    }
}

.fc-category-avatar {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--fc-gold);
    box-shadow: 0 1px 4px rgba(31, 16, 35, 0.1);
    background: var(--fc-bg-soft);
    transition: transform var(--fc-transition), box-shadow var(--fc-transition);
}

.fc-category-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.fc-category-item:hover .fc-category-avatar {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(233, 30, 140, 0.25);
    border-color: var(--fc-fuchsia);
}

.fc-category-label {
    margin-top: 0.7rem;
    font-family: var(--fc-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fc-black);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
    padding: 0 0.15rem;
}

.fc-category-nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--fc-ink);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(31, 16, 35, 0.25);
    transition: opacity var(--fc-transition), transform var(--fc-transition);
}

.fc-category-nav:hover {
    opacity: 0.9;
}

.fc-category-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.fc-category-nav-prev {
    left: -0.25rem;
}

.fc-category-nav-next {
    right: -0.25rem;
}

@media (min-width: 768px) {
    .fc-category-nav {
        display: inline-flex;
    }

    .fc-category-nav-prev {
        left: -0.75rem;
    }

    .fc-category-nav-next {
        right: -0.75rem;
    }

    .fc-category-carousel {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1200px) {
    .fc-category-nav-prev {
        left: -1.25rem;
    }

    .fc-category-nav-next {
        right: -1.25rem;
    }
}

/* Product cards */
.fc-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.75rem;
}

@media (min-width: 768px) {
    .fc-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem 1rem;
    }
}

@media (min-width: 992px) {
    .fc-product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem 1.25rem;
    }
}

/* Swipeable "You May Also Like" product carousel (native touch swipe via
   scroll-snap, plus arrow buttons for desktop/mouse users). */
.fc-product-carousel {
    position: relative;
    margin: 0 -0.25rem;
}

.fc-product-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto; /* arrow clicks animate via JS (storefront.js); this keeps native drag/snap fast and immediate */
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.25rem 1rem;
    scrollbar-width: none;
}

.fc-product-carousel-track::-webkit-scrollbar {
    display: none;
}

.fc-product-carousel-item {
    flex: 0 0 calc((100% - 1rem) / 2);
    max-width: calc((100% - 1rem) / 2);
    scroll-snap-align: start;
    min-width: 0;
}

@media (min-width: 576px) {
    .fc-product-carousel-item {
        flex-basis: calc((100% - 3rem) / 3.4);
        max-width: calc((100% - 3rem) / 3.4);
    }
}

@media (min-width: 768px) {
    .fc-product-carousel-item {
        flex-basis: calc((100% - 4rem) / 4.4);
        max-width: calc((100% - 4rem) / 4.4);
    }
}

@media (min-width: 992px) {
    .fc-product-carousel-item {
        flex-basis: calc((100% - 5rem) / 5.4);
        max-width: calc((100% - 5rem) / 5.4);
    }
}

.fc-carousel-nav {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--fc-ink);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(31, 16, 35, 0.25);
    transition: opacity var(--fc-transition);
}

.fc-carousel-nav:hover {
    opacity: 0.9;
}

.fc-carousel-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.fc-carousel-nav-prev {
    left: -0.25rem;
}

.fc-carousel-nav-next {
    right: -0.25rem;
}

@media (min-width: 768px) {
    .fc-carousel-nav {
        display: inline-flex;
    }

    .fc-carousel-nav-prev {
        left: -0.75rem;
    }

    .fc-carousel-nav-next {
        right: -0.75rem;
    }

    .fc-product-carousel {
        padding: 0 1.5rem;
    }
}

.fc-product-card {
    display: block;
}

.fc-product-card:hover {
    opacity: 1;
}

.fc-product-image-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--fc-bg-soft);
    margin-bottom: 0.875rem;
    border-radius: 14px;
}

.fc-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fc-product-card:hover .fc-product-image {
    transform: scale(1.12);
}

.fc-product-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--fc-ink);
    color: #fff;
    border-radius: 999px;
}

.fc-product-badge--sale {
    background: linear-gradient(100deg, var(--fc-gold), var(--fc-fuchsia));
}

.fc-product-name {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1.35;
}

.fc-product-category {
    font-size: 0.75rem;
    color: var(--fc-fuchsia);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
    font-weight: 700;
}

.fc-product-price {
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 800;
    color: #111;
    background: #ffff00;
    border: 1px solid #e6e600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.fc-product-price-old {
    font-size: 0.8125rem;
    color: var(--fc-muted);
    text-decoration: line-through;
    margin-left: 0.375rem;
    font-weight: 400;
}

/* Product detail gallery */
.fc-gallery-main {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--fc-bg-soft);
    cursor: zoom-in;
    border-radius: 14px;
    /* Let a vertical finger-drag scroll the page as normal; the JS only
       takes over a drag that's clearly sideways (swiping between photos). */
    touch-action: pan-y;
}

.fc-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    touch-action: pan-y;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.fc-gallery-main.is-zoomed {
    cursor: zoom-out;
}

.fc-gallery-main.is-zoomed img {
    transform: scale(2);
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.fc-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.fc-gallery-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 96px;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    background: var(--fc-bg-soft);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--fc-transition);
}

.fc-gallery-thumb.active,
.fc-gallery-thumb:hover {
    border-color: var(--fc-fuchsia);
}

.fc-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video slide in the main product-page gallery - sits in the same spot as
   the photo and is shown in its place once the shopper picks that slide. */
.fc-gallery-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.fc-gallery-video[hidden] {
    display: none;
}

.fc-gallery-thumb--video {
    position: relative;
}

.fc-gallery-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.1rem;
    pointer-events: none;
}

/* Lets the shopper turn the sound off (or back on) without pausing. */
.fc-gallery-video-mute {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-width: 40px;
    padding: 6px 10px;
    border: none;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.fc-gallery-video-mute[hidden] {
    display: none;
}

/* Lets the shopper speed the video up (or slow it down). */
.fc-gallery-video-speed {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 40px;
    padding: 6px 10px;
    border: none;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.fc-gallery-video-speed[hidden] {
    display: none;
}

/* Shows over the video's poster photo until the shopper taps to play it. */
.fc-gallery-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.4rem;
    pointer-events: none;
}

.fc-gallery-video-play[hidden] {
    display: none;
}

/* Control bar overlaid on the gallery video: seek slider plus the mute
   and speed buttons, so the shopper can rewatch from any point instead
   of only restarting the video from the beginning. */
.fc-gallery-video-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.fc-gallery-video-bar[hidden] {
    display: none;
}

.fc-gallery-video-bar .fc-gallery-video-mute,
.fc-gallery-video-bar .fc-gallery-video-speed {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
}

.fc-gallery-video-seek {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.fc-gallery-video-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.fc-gallery-video-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* Quantity stepper */
.fc-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    overflow: hidden;
    /* This stepper's buttons/input are fixed-width and don't shrink — without
       this, a cramped flex row (e.g. on narrow phones) would squeeze this
       box smaller than its content and, combined with overflow:hidden above,
       silently clip the number and the + button instead of just not fitting. */
    flex-shrink: 0;
}

.fc-qty-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    color: var(--fc-charcoal);
    transition: background var(--fc-transition);
}

.fc-qty-btn:hover {
    background: var(--fc-bg-soft);
}

.fc-qty-input {
    width: 48px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--fc-border);
    border-right: 1px solid var(--fc-border);
    text-align: center;
    font-size: 0.9375rem;
    -moz-appearance: textfield;
}

.fc-qty-input::-webkit-outer-spin-button,
.fc-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Buttons */
.btn-fc-primary {
    background: var(--fc-fuchsia);
    border-color: var(--fc-fuchsia);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 1.75rem;
    border-radius: 100px;
    transition: background var(--fc-transition), color var(--fc-transition), transform var(--fc-transition);
}

.btn-fc-primary:hover {
    background: var(--fc-ink);
    border-color: var(--fc-ink);
    color: #fff;
    transform: translateY(-1px);
}

.btn-fc-outline {
    background: transparent;
    border: 1.5px solid var(--fc-ink);
    color: var(--fc-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 1.75rem;
    border-radius: 100px;
    transition: background var(--fc-transition), color var(--fc-transition);
}

.btn-fc-outline:hover {
    background: var(--fc-ink);
    color: #fff;
}

/* Shop filters */
.fc-shop-layout {
    display: grid;
    gap: 2rem;
}

@media (min-width: 992px) {
    .fc-shop-layout {
        grid-template-columns: 260px 1fr;
    }
}

.fc-filter-panel {
    border: 1px solid var(--fc-border);
    border-radius: 14px;
    padding: 1.5rem;
    background: #fff;
}

.fc-filter-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fc-fuchsia);
    margin-bottom: 1rem;
}

/* Cart & checkout */
.fc-cart-table img {
    width: 80px;
    height: 106px;
    object-fit: cover;
    background: var(--fc-bg-soft);
    border-radius: 8px;
}

/* Phone-width cart rows — stacked card instead of the table, so price,
   quantity and remove are never off-screen to one side. */
.fc-cart-item-mobile {
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    padding: 0.875rem;
    margin-bottom: 0.875rem;
}

.fc-cart-item-mobile img {
    width: 64px;
    height: 84px;
    object-fit: cover;
    background: var(--fc-bg-soft);
    border-radius: 8px;
}

.fc-cart-item-mobile .min-w-0 {
    min-width: 0;
}

.fc-order-summary {
    border: 1px solid var(--fc-border);
    border-radius: 14px;
    padding: 1.5rem;
    background: #fff;
}

.fc-order-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
}

.fc-order-summary-total {
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--fc-ink);
    border-top: 1px solid var(--fc-border);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

/* Footer */
.fc-footer {
    background: var(--fc-ink);
    color: rgba(255, 248, 240, 0.75);
    padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
    margin-top: auto;
}

/* On narrow screens the centered copyright line spans close enough to the
   right edge that the fixed floating WhatsApp button (.fc-float-wa, 56px
   wide, 22px from the bottom-right corner) sits on top of it once the page
   is scrolled all the way down -- and since that's the end of the page,
   there's no way to scroll further to see the hidden text. Add enough
   bottom padding on mobile so the button always clears the last line. */
@media (max-width: 576px) {
    .fc-footer {
        padding-bottom: calc(2rem + 78px);
    }
}

.fc-footer-brand {
    font-family: var(--fc-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-bottom: 0.5rem;
}

.fc-footer h6 {
    color: var(--fc-gold) !important;
}

.fc-footer a {
    color: rgba(255, 248, 240, 0.75);
}

.fc-footer a:hover {
    color: var(--fc-gold);
    opacity: 1;
}

/* Lazy load */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded,
img:not([loading="lazy"]) {
    opacity: 1;
}

/* Utilities */
.text-sale {
    color: var(--fc-fuchsia);
}

.fc-page-header {
    padding: 2rem 0 1.5rem;
    border-bottom: 1px solid var(--fc-border);
    margin-bottom: 2rem;
}

.fc-empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--fc-gray);
}

.fc-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

/* Bootstrap component overrides to match brand */
.btn-primary,
.badge.bg-primary {
    background-color: var(--fc-fuchsia) !important;
    border-color: var(--fc-fuchsia) !important;
}

.btn-primary:hover {
    background-color: var(--fc-ink) !important;
    border-color: var(--fc-ink) !important;
}

.text-primary {
    color: var(--fc-fuchsia) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fc-fuchsia);
    box-shadow: 0 0 0 0.2rem rgba(233, 30, 140, 0.15);
}

/* Flashing "5% OFF" style badge, reused wherever a highlight callout is needed */
.fc-flash-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: linear-gradient(100deg, #ffd15c, var(--fc-gold), var(--fc-fuchsia));
    color: var(--fc-ink);
    font-size: 0.7rem;
    font-weight: 800;
    animation: fcFlash 1.1s ease-in-out infinite;
}

@keyframes fcFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.04); }
}

.fc-urdu-note {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--fc-ink);
    background: rgba(255, 214, 0, 0.16);
    border: 1.5px solid #ffd600;
    border-radius: 8px;
    padding: 3px 12px;
    animation: fcFlash 1.1s ease-in-out infinite;
}

/* Catch Bootstrap's default dark/danger utility classes used across pages */
.bg-dark {
    background-color: var(--fc-ink) !important;
}

.text-dark {
    color: var(--fc-ink) !important;
}

.btn-dark {
    background-color: var(--fc-ink) !important;
    border-color: var(--fc-ink) !important;
}

.btn-dark:hover {
    background-color: var(--fc-fuchsia) !important;
    border-color: var(--fc-fuchsia) !important;
}

.btn-outline-dark {
    color: var(--fc-ink) !important;
    border-color: var(--fc-ink) !important;
}

.btn-outline-dark:hover {
    background-color: var(--fc-ink) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: var(--fc-fuchsia) !important;
    border-color: var(--fc-fuchsia) !important;
}

/* Product card wrapper (holds the card link + WhatsApp button together) */
.fc-product-card-wrap {
    display: flex;
    flex-direction: column;
}

.fc-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #25D366;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.55rem;
    border-radius: 8px;
    margin-top: 0.6rem;
    transition: filter 0.15s ease;
}

.fc-wa-btn:hover {
    filter: brightness(1.06);
    opacity: 1;
}

/* Floating site-wide WhatsApp button */
.fc-float-wa {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 1040;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
    animation: fcWaPulse 2.4s ease-in-out infinite;
}

.fc-float-wa svg {
    width: 26px;
    height: 26px;
    fill: #fff;
}

@keyframes fcWaPulse {
    0%, 100% { box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45); }
    50% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.75); }
}

/* Checkout: shipping method */
.fc-shipping-method {
    border: 1px solid var(--fc-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    background: #fff;
}

.fc-shipping-method legend {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 0.75rem;
}

.fc-shipping-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.6rem 0;
    border-top: 1px solid var(--fc-border);
}

.fc-shipping-option:first-of-type {
    border-top: none;
}

.fc-shipping-option input {
    margin-top: 3px;
}

.fc-shipping-note {
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--fc-gray);
}

.fc-shipping-note.discount {
    color: var(--fc-fuchsia);
    font-weight: 700;
}

/* Final polish overrides */
.bg-light {
    background-color: var(--fc-bg-soft) !important;
}

.fc-hero-placeholder .text-muted {
    color: rgba(255, 248, 240, 0.85) !important;
}

/* Buy Now button on product cards */
.fc-buy-now-btn {
    display: block;
    width: 100%;
    background: var(--fc-fuchsia);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.55rem;
    border: none;
    border-radius: 100px;
    margin-top: 0.6rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.fc-buy-now-btn:hover {
    background: var(--fc-ink);
    transform: translateY(-1px);
}

/* WhatsApp confirmation box on order success page */
.fc-wa-confirm-box {
    background: #fff;
    border: 1.5px dashed var(--fc-fuchsia);
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
}

/* Large countdown timer in the order success page's review/cancel box */
.fc-countdown-large {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--fc-fuchsia);
    line-height: 1;
    letter-spacing: 0.02em;
}

.fc-wa-tight-box {
    border: 1.5px solid #1a1a1a;
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
    background: #fff;
    text-decoration: none;
}

/* Advance payment details box on checkout */
.fc-payment-details {
    background: var(--fc-bg-soft);
    border: 1px dashed var(--fc-fuchsia);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
}

.fc-payment-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--fc-border);
}

.fc-payment-row:last-of-type {
    border-bottom: none;
}

/* Footer social icons */
.fc-social-row a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 248, 240, 0.1);
    color: #fff !important;
    font-size: 1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.fc-social-row a:hover {
    background: var(--fc-fuchsia);
    opacity: 1;
}

/* Expanded nav with more items + Shop dropdown */
.fc-header .navbar-nav .fc-nav-link {
    font-size: 0.75rem;
}

.fc-header .dropdown-menu {
    border: 1px solid var(--fc-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(31, 16, 35, 0.14);
    padding: 8px;
}

.fc-header .dropdown-item {
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 12px;
}

.fc-header .dropdown-item:hover,
.fc-header .dropdown-item:focus {
    background: var(--fc-bg-soft);
    color: var(--fc-fuchsia);
}

.fc-header .dropdown-toggle::after {
    margin-left: 4px;
    vertical-align: 2px;
}

/* Desktop: a category's subcategory menu opens/closes on hover (handled in
   storefront.js via the Bootstrap Dropdown API so it always closes cleanly
   when the mouse leaves — see initHoverDropdowns). Clicking still works too. */
@media (min-width: 992px) {
    .fc-header .dropdown-menu {
        margin-top: 0;
    }
}

@media (max-width: 991px) {
    .fc-header .navbar-nav .fc-nav-link {
        font-size: 0.9rem;
        padding: 0.5rem 0;
    }
}

/* Header icons row */
.fc-header-icons i {
    transition: color 0.15s ease;
}

.fc-header-icons a:hover i,
.fc-header-icons button:hover i {
    color: var(--fc-fuchsia);
}

/* Two-button card actions: Add to Cart + Buy Now */
.fc-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 0.6rem;
}

.fc-add-cart-btn {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--fc-ink);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.55rem 0.3rem;
    border: 1.5px solid var(--fc-ink);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.fc-add-cart-btn:hover {
    background: var(--fc-ink);
    color: #fff;
}

.fc-buy-now-btn {
    margin-top: 0;
}

/* Swipeable / pinch-zoomable product card gallery */
.fc-swipe-gallery {
    /* Was "pan-y" — which let the page scroll vertically but stopped the
       browser from ever letting this element pan HORIZONTALLY, even when
       it sits inside a sideways-scrolling row (Shop by Category, You May
       Also Like): dragging a finger across the photo itself couldn't
       scroll that row left/right at all, only touching the card's edges
       could. The JS here no longer calls preventDefault on a one-finger
       drag either way (see product-card-swipe.js), so there's nothing left
       for touch-action to protect against — "auto" lets the browser scroll
       the photo in whichever direction the page actually needs (down on a
       grid, sideways in a carousel) while the JS still swaps the photo
       from the swipe distance measured on touchend. */
    touch-action: auto;
    position: relative;
    overflow: hidden;
}

.fc-swipe-img {
    transition: transform 0.15s ease-out;
    will-change: transform;
    touch-action: auto;
    cursor: grab;
    /* Stop the browser's native "drag this image" ghost from hijacking our
       own mouse-drag swipe handler (product-card-swipe.js) on desktop. */
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.fc-swipe-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 2;
}

.fc-swipe-dot {
    width: 5px;
    height: 5px;
    padding: 6px;
    background-clip: content-box;
    box-sizing: content-box;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    margin: -6px;
}

.fc-swipe-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Product video slide — sits in the same spot as the photo and is shown
   in its place once the shopper swipes to it. */
.fc-swipe-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    cursor: pointer;
}

.fc-swipe-video[hidden] {
    display: none;
}

/* Lets the customer speed the video up (or slow it down) — tap to cycle
   through 1x / 1.5x / 2x / 0.5x. */
.fc-video-speed-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 34px;
    padding: 4px 8px;
    border: none;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.fc-video-speed-btn[hidden] {
    display: none;
}

/* Lets the customer turn the sound off (or back on) without pausing. */
.fc-video-mute-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-width: 34px;
    padding: 4px 8px;
    border: none;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.fc-video-mute-btn[hidden] {
    display: none;
}

/* Shows over the video's poster photo until the shopper taps to play it. */
.fc-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.1rem;
    pointer-events: none;
}

.fc-video-play-icon[hidden] {
    display: none;
}

/* Control bar overlaid on the card video: seek slider plus the mute
   and speed buttons, so the shopper can rewatch from any point instead
   of only restarting the video from the beginning. */
.fc-video-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.fc-video-bar[hidden] {
    display: none;
}

.fc-video-bar .fc-video-mute-btn,
.fc-video-bar .fc-video-speed-btn {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
}

.fc-video-seek {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.fc-video-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.fc-video-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* Rotating customer review popup */
.fc-review-popup {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1050;
    max-width: 280px;
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(31, 16, 35, 0.18);
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.fc-review-popup.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fc-review-popup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--fc-gray);
    cursor: pointer;
    padding: 4px;
}

.fc-review-popup-stars {
    color: var(--fc-gold);
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.fc-review-popup-text {
    font-size: 0.8125rem;
    color: var(--fc-charcoal);
    margin-bottom: 6px;
    line-height: 1.4;
}

.fc-review-popup-author {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fc-fuchsia);
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .fc-review-popup {
        left: 12px;
        right: 12px;
        max-width: none;
        bottom: 84px;
    }
}

/* Flash Sale nav item in red */
.fc-nav-flash {
    color: #d21f1f !important;
}

.fc-nav-flash:hover {
    color: #a10000 !important;
}

.fc-nav-exclusive {
    color: #0d6efd !important;
}

.fc-nav-exclusive:hover {
    color: #0a53be !important;
}

/* Live visitor counter (real data only) */
.fc-visitor-count {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background: var(--fc-bg-soft);
    color: var(--fc-charcoal);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 8px 12px;
    text-align: center;
}

.fc-visitor-count i {
    color: var(--fc-fuchsia);
}

/* Add to cart confirmation toast */
.fc-add-toast {
    position: absolute;
    z-index: 1060;
    background: var(--fc-ink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.fc-add-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fc-add-toast.is-error {
    background: #a10000;
}

/* Checkout page inline quantity stepper */
.fc-checkout-qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.fc-checkout-qty-stepper .fc-qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    background: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--fc-charcoal);
}

.fc-checkout-qty-stepper .fc-qty-btn:hover {
    background: var(--fc-bg-soft);
}

/* Override the cart page's larger number input so it fits compactly next
   to the item name/price on the checkout summary. */
.fc-checkout-qty-stepper .fc-qty-input {
    width: 40px;
    height: 28px;
    border: 1px solid var(--fc-border);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.fc-checkout-qty-value {
    font-weight: 700;
    font-size: 0.875rem;
    min-width: 18px;
    text-align: center;
    display: inline-block;
}

/* "Add More Products" link on the checkout page, just under the
   "Your Items" heading. */
.fc-add-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--fc-fuchsia);
    text-decoration: none;
}

.fc-add-more-link:hover {
    color: var(--fc-ink);
    text-decoration: underline;
}

/* Block-level variant of .fc-flash-badge for the checkout "add more to get
   free delivery" nudge — needs to wrap an icon plus a longer sentence,
   unlike the short inline pill it's based on. */
.fc-flash-badge--block {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.68rem;
    line-height: 1.35;
    white-space: normal;
    text-align: left;
}

/* .fc-float-wa (defined above, near the other floating buttons) is the
   sitewide floating WhatsApp support button — already present on every
   storefront page via layouts/storefront.blade.php. */

/* Customised Order builder (resources/views/storefront/pages/custom-orders.blade.php) */
.fc-custom-order-tabs {
    border-bottom: 1px solid var(--fc-border);
    padding-bottom: 12px;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
}

.fc-custom-order-tabs .nav-link {
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--fc-charcoal);
    background: var(--fc-bg-soft);
    border: 1px solid transparent;
    margin-right: 8px;
}

.fc-custom-order-tabs .nav-link.active {
    background: var(--fc-fuchsia);
    color: #fff;
}

.fc-custom-order-item.fc-qty-input:disabled,
.fc-custom-order-item .fc-qty-input:disabled {
    background: var(--fc-bg-soft);
    color: var(--fc-border);
}

/* The qty stepper + Remove link, grouped so they can be moved as one unit
   on narrow screens (see below) instead of getting squeezed next to the
   product name. */
.fc-custom-order-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

/* On phones there isn't enough room for image + name + price + stepper +
   Remove all on one line — that's what was squeezing the stepper down to
   nothing and clipping the number/+ button. Below ~480px, let the product
   name/price take the full first line and drop the stepper + Remove to
   their own line underneath, indented to line up under the name. */
@media (max-width: 480px) {
    .fc-custom-order-item {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .fc-custom-order-item > .flex-grow-1 {
        flex-basis: calc(100% - 72px);
    }

    .fc-custom-order-actions {
        flex-basis: calc(100% - 72px);
        margin-left: 72px;
        justify-content: space-between;
    }
}

.fc-custom-order-summary-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--fc-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 2rem;
    box-shadow: 0 -4px 16px rgba(36, 28, 41, 0.06);
}

/* Mobile "swipe pages" - a distraction-free, full-screen version of each
   product section (Hot Selling / Featured / New Arrivals / You May Also
   Like), reached by swiping in from the very edge of the screen or the
   small arrow tabs. The Home page above is completely untouched by this;
   these panels simply sit on top of it. Hidden entirely at tablet width
   and up, where the normal in-page carousels already do the job. */
.fc-page-swiper {
    display: none;
}

@media (max-width: 991.98px) {
    .fc-page-swiper {
        display: block;
    }

    body.fc-page-open {
        overflow: hidden;
    }

    .fc-page-edge {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1025;
        width: 22px;
        height: 56px;
        border: none;
        background: rgba(31, 16, 35, 0.28);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        opacity: 0.65;
        padding: 0;
    }

    .fc-page-edge-left {
        left: 0;
        border-radius: 0 10px 10px 0;
    }

    .fc-page-edge-right {
        right: 0;
        border-radius: 10px 0 0 10px;
    }

    .fc-section-page {
        position: fixed;
        top: var(--fc-fixed-top-height, 0px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        background: var(--fc-bg);
        transform: translateX(100%);
        transition: transform 0.32s ease;
    }

    .fc-section-page--active {
        transform: translateX(0);
    }

    .fc-section-page--exit-left {
        transform: translateX(-100%);
    }

    .fc-section-page--exit-right {
        transform: translateX(100%);
    }

    .fc-section-page--enter-left {
        transform: translateX(-100%);
        transition: none;
    }

    .fc-section-page--enter-right {
        transform: translateX(100%);
        transition: none;
    }

    .fc-section-page-scroll {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem 1rem 3rem;
    }

    .fc-section-page-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 1rem;
    }

    .fc-section-page-close {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--fc-border);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: var(--fc-ink);
        padding: 0;
    }
}

/* Always-visible header search bar: transparent camera icon inside the input, compact height */
#fcSearchBar .fc-search-input-wrap {
    position: relative;
}
#fcSearchBar .fc-search-input {
    padding-right: 2.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
#fcSearchBar .fc-camera-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
}
#fcSearchBar .fc-camera-btn:hover,
#fcSearchBar .fc-camera-btn:focus {
    color: #212529;
}