/* ===========================================================================
   NSCC - Design refresh, 2 Nov 2026
   ---------------------------------------------------------------------------
   Loaded after app.css and typography.css. Two owner requests:

   1. "header topbar ko aur best banao" - the announcement strip becomes a
      light bar like the owner's reference design: four short, true messages
      side by side from 1200px (free delivery, offers, returns, support), each
      with a pink icon and a thin divider. Tablets keep the one-at-a-time
      rotation (header.js) and phones the ticker. The messages themselves are
      Admin > Content > Announcements rows; an operator colour set in Admin >
      Appearance (--sik-hd-ann-bg / --sik-hd-ann-fg) still wins.

   2. "saare banner me photo merge ho jaye, square jaisa nahi" - a category
      page's banner photo no longer sits in a rounded, shadowed box. It runs
      edge to edge down the right of the hero and fades into the hero's own
      pink on its left, the way the homepage photo slides already do. On a
      phone it becomes a band across the top that fades down into the copy.
   =========================================================================== */

/* --- 1. Top bar ------------------------------------------------------------ */
.sik-announce,
body .sik-announce {
    background: var(--sik-hd-ann-bg, color-mix(in srgb, var(--sik-primary) 7%, var(--sik-surface, #fff)));
    color: var(--sik-hd-ann-fg, var(--sik-ink, var(--sik-text)));
    border-bottom: 1px solid color-mix(in srgb, var(--sik-primary) 16%, transparent);
    font-size: 13px;
}
.sik-announce::after { display: none; }
.sik-announce .sik-announce__item svg { color: var(--sik-primary); opacity: 1; }
.sik-announce .sik-announce__item strong { color: inherit; font-weight: 500; }
.sik-announce a:hover { color: var(--sik-primary); text-decoration: none; }
.sik-announce .sik-announce__close { color: var(--sik-muted); }
.sik-announce .sik-announce__close:hover {
    background: color-mix(in srgb, var(--sik-primary) 10%, transparent);
    color: var(--sik-ink, var(--sik-text));
}
/* The running-offer chip was drawn for white text on wine. */
.sik-announce .sik-announce__code {
    background: color-mix(in srgb, var(--sik-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--sik-primary) 30%, transparent);
    color: var(--sik-primary);
}
.sik-announce .sik-announce__cd b {
    background: color-mix(in srgb, var(--sik-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--sik-primary) 24%, transparent);
    color: var(--sik-primary);
}

@media (min-width: 1200px) {
    .sik-announce__row--static { justify-content: space-between; gap: 0; }
    /* Sized to their text and spread across the bar, rather than four equal
       quarters: the support line is twice the length of the returns one. */
    .sik-announce__row--static .sik-announce__item,
    .sik-announce__row--static.is-rotating .sik-announce__item {
        display: inline-flex;
        flex: 0 1 auto;
        justify-content: center;
        padding-inline: var(--sp-4);
        animation: none;
    }
    .sik-announce__row--static .sik-announce__item:first-child { padding-left: 0; }
    .sik-announce__row--static .sik-announce__item + .sik-announce__item {
        border-left: 1px solid color-mix(in srgb, var(--sik-primary) 20%, transparent);
    }
}

/* --- 3. Model cut-outs on the homepage promo cards --------------------------
   "Is grid par bhi transparent girl model add karna hai, festival vibes, blend
   ho jaye." A promo banner whose image is a PNG/WebP (widgets.php marks it
   .sik-promo__photo--model) shows that cut-out standing at the card's right
   edge, full strength, feet cut by the card's bottom, its left side melting
   into the card colour; the copy keeps the left 60%. A JPG keeps the faint
   corner wash, so nothing changes until the owner uploads a cut-out. */
/* Every model is the same HEIGHT - the slot's - whatever the shape of her
   photo: a wide one (an elbow out, an arm pointing) used to be shrunk to fit
   the width and so stood a head shorter than a narrow one. Now the height is
   fixed and anything wider than the slot runs off its left edge, which is
   clipped and sits inside the fade anyway. */
.sik-promo .sik-promo__photo--model {
    right: 0;
    bottom: 0;
    top: 5%;
    width: 50%;
    max-width: none;
    opacity: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.sik-promo .sik-promo__photo--model picture { display: contents; }
.sik-promo .sik-promo__photo--model img {
    flex: none;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: 100% 100%;
    /* A warm festive glow behind the figure, from the card's own light. */
    filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--promo-lit) 70%, transparent));
}
.sik-promo:has(.sik-promo__photo--model) .sik-promo__body { max-width: 60%; }
/* The lazy-image shimmer is painted as the <img>'s own background; behind a
   cut-out, or a photo that fades into its panel, it showed as a grey slab
   until the pixels arrived. These images simply appear when ready. */
.js .sik-promo__photo--model img.is-pending,
.js .sik-catland__banner.is-pending {
    background: none;
    animation: none;
}
.sik-promos .sik-promo:hover .sik-promo__photo--model { transform: scale(1.03); opacity: 1; }
@media (max-width: 479.98px) {
    .sik-promo .sik-promo__photo--model { width: 44%; top: 14%; }
    .sik-promo:has(.sik-promo__photo--model) .sik-promo__body { max-width: 64%; }
}

/* --- 4. Homepage "Shop by category" as a mosaic -----------------------------
   "Ye section bahut boring lag raha hai." With the store's five departments
   the row becomes a mosaic: the first range (Hair Accessories, sort order 10)
   as one large 2x2 photo, the other four around it, each name set in white on
   the photo over a soft dark fade with a "Shop now" pill, and a slow zoom on
   hover. Only when there are exactly five tiles - any other count keeps the
   plain photo-tile row from fix-catalog.css, so nothing is ever orphaned. */
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: 18px;
    isolation: isolate;
    transition: box-shadow var(--dur-base, .3s) ease, transform var(--dur-base, .3s) ease;
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) .sik-catrow__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: var(--sik-primary-soft);
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) .sik-catrow__ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}
/* The fade the white name sits on. */
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 42%, rgba(24, 4, 14, .74) 100%);
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) .sik-catrow__label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 48px;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile::after {
    content: "Shop now \2192";
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--sik-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
/* The large tile reads as the lead. */
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:first-child .sik-catrow__label {
    left: 26px;
    bottom: 66px;
    font-size: clamp(24px, 2.4vw, 34px);
    letter-spacing: -0.015em;
}
.sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:first-child::after {
    left: 26px;
    bottom: 24px;
    padding: 8px 18px;
    background: var(--sik-primary);
    color: #fff;
    font-size: 14px;
}
@media (hover: hover) {
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:hover {
        box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--sik-primary) 60%, transparent);
    }
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:hover .sik-catrow__ring img {
        transform: scale(1.07);
    }
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) .sik-catrow__tile:hover .sik-catrow__ring {
        transform: none;
        box-shadow: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:hover .sik-catrow__ring img { transform: none; }
}
/* Phones: the lead tile across the top, the other four two by two. */
@media (max-width: 639.98px) {
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 12px;
    }
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:first-child {
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }
    /* Two lines allowed: "Lamps & Projectors" was cut to "Lamps & Project". */
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) .sik-catrow__label {
        left: 12px; right: 10px; bottom: 40px; font-size: 14px;
        white-space: normal; overflow: visible; text-overflow: clip;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile::after { left: 12px; bottom: 11px; font-size: 11px; padding: 4px 10px; }
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:first-child .sik-catrow__label { left: 16px; bottom: 52px; font-size: 22px; }
    .sik-catrow--wrap:has(> .sik-catrow__tile:nth-child(5):last-child) > .sik-catrow__tile:first-child::after { left: 16px; bottom: 16px; font-size: 12px; padding: 6px 14px; }
}

/* --- 6. Homepage hero: animated headline ------------------------------------
   "Banner par animated style lagao, text heading ... running lage." Every
   time a slide becomes active (.is-active, set by the slider) its copy plays
   in: the badge drops, the headline rises out of a soft blur, the accent line
   is wiped in left to right like it is being typed and then keeps a slow gold
   shimmer, the button pops, and the photo eases out of a gentle zoom. All of
   it is off under prefers-reduced-motion and .sik-noanim. */
@media (prefers-reduced-motion: no-preference) {
    html:not(.sik-noanim) .sik-hero__slide.is-active .sik-hero__flourish {
        animation: nscc-drop .55s cubic-bezier(.2, .8, .3, 1) .05s both;
    }
    html:not(.sik-noanim) .sik-hero__slide.is-active .sik-hero__title {
        animation: nscc-rise-blur .8s cubic-bezier(.2, .8, .3, 1) .15s both;
    }
    /* app.css already paints the accent as gold-to-white gradient text; the
       same colours, doubled and drifting, are the shimmer. fit-content keeps
       it on its own line while the wipe runs across the words, not the box. */
    html:not(.sik-noanim) .sik-hero__slide.is-active .sik-hero__title span {
        display: block;
        width: fit-content;
        max-width: 100%;
        background-image: linear-gradient(100deg, var(--sik-gold-2) 0%, #FFE9F1 26%, #ffffff 40%, #FFE9F1 54%, var(--sik-gold-2) 75%, #FFE9F1 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation:
            nscc-type-wipe .9s steps(18, end) .55s both,
            nscc-shimmer 3.2s linear 1.6s infinite;
    }
    html:not(.sik-noanim) .sik-hero__slide.is-active .sik-hero__text {
        animation: nscc-rise .6s cubic-bezier(.2, .8, .3, 1) .9s both;
    }
    html:not(.sik-noanim) .sik-hero__slide.is-active .sik-hero__cta {
        animation: nscc-pop .55s cubic-bezier(.3, 1.5, .5, 1) 1.1s both;
    }
    html:not(.sik-noanim) .sik-hero__slide--photo.is-active .sik-hero__bg img {
        animation: nscc-zoom-out 7s ease-out both;
    }
}
@keyframes nscc-drop      { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes nscc-rise      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nscc-rise-blur { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nscc-type-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nscc-shimmer   { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes nscc-pop       { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes nscc-zoom-out  { from { transform: scale(1.08); } to { transform: scale(1); } }

/* --- 5. Listing toolbar scrolls with the page --------------------------------
   "Product ke upar floating hai, ye product hide kar deta hai." The count /
   sort / view bar was sticky glass that rode down over the grid and covered
   the cards under it. It now sits above the grid and scrolls away with it -
   opaque, no blur. Sorting, view and filters work exactly as before. */
body .sik-toolbar {
    position: static;
    top: auto;
    background: var(--sik-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* --- 2. Category banner photo, merged into the hero ------------------------ */
.sik-catland__hero:has(.sik-catland__banner) {
    position: relative;
    isolation: isolate;
}
.sik-catland__media:has(.sik-catland__banner) { pointer-events: none; }
.sik-catland__media .sik-catland__banner {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

@media (min-width: 768px) {
    /* Out of the grid: the photo is the right-hand backdrop, the copy keeps
       the left half on its own, and the hero's corner radius clips both. */
    .sik-catland__hero:has(.sik-catland__banner) {
        grid-template-columns: minmax(0, 1fr);
        min-height: 320px;
    }
    .sik-catland__hero:has(.sik-catland__banner) .sik-catland__copy { max-width: 50%; }
    .sik-catland__media:has(.sik-catland__banner) {
        position: absolute;
        inset: 0 0 0 auto;
        width: 58%;
        z-index: -1;
    }
    /* Anchored right: whatever cover has to trim comes off the left, which
       is the end that fades out anyway. */
    .sik-catland__media .sik-catland__banner {
        object-position: 100% 50%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 18%, #000 42%);
    }
}
@media (min-width: 960px) {
    .sik-catland__hero:has(.sik-catland__banner) { min-height: 360px; }
    .sik-catland__media:has(.sik-catland__banner) { width: 56%; }
}
/* Below 1200px the box is narrower than the photo, and anchoring it right
   trimmed the model's face off the left. Centred, the face stays in. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sik-catland__media .sik-catland__banner { object-position: 45% 50%; }
}

@media (max-width: 767.98px) {
    /* A band across the top of the card, bleeding to its edges and fading
       down into the copy below it. */
    .sik-catland__hero:has(.sik-catland__banner) { padding-top: 0; }
    .sik-catland__media:has(.sik-catland__banner) {
        order: -1;
        margin: 0 calc(-1 * var(--sp-5));
        height: 210px;
    }
    .sik-catland__media .sik-catland__banner {
        object-position: 70% 40%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
}

/* --- 7. Sign-in icon on phones (2 Nov 2026) ---------------------------------
   Phones get a person icon (initials when signed in) beside the heart and the
   cart. The desktop row keeps its own account dropdown, so this one goes at
   1024px and up. Four 44px icons leave the wordmark less room, so the gaps
   tighten and the logo may shrink on the narrowest phones. */
@media (min-width: 1024px) {
    body .sik-actions .sik-action--account-phone { display: none; }
}
@media (max-width: 1023.98px) {
    .sik-action--account-phone .sik-action__avatar { width: 30px; height: 30px; font-size: 12px; }
}
@media (max-width: 380px) {
    body .sik-actions .sik-action--phone { width: 40px; height: 40px; }
    .sik-header__lead { min-width: 0; }
    .sik-header__lead img { max-width: 100%; height: auto; }
}