/* شنطتي — Ecomus handbag demo, child of shyaka. Only what differs lives here. */

/* See-through header over the home hero (same rules as Nadara). */
body.shantety .sht-announcement { padding: 10px 0; }
body.shantety .sht-announcement p { margin: 0; font-size: 13px; }
body.shantety .sht-announcement .wrap-announcement-bar-2 { padding: 0 34px; }
body.shantety .sht-announcement .navigation-topbar { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; cursor: pointer; font-size: 11px; z-index: 2; }
body.shantety .sht-announcement .sht-topbar-next { left: 0; }
body.shantety .sht-announcement .sht-topbar-prev { right: 0; }
body.shantety #header.sht-header-over .box-nav-ul .item-link,
body.shantety #header.sht-header-over .nav-icon .nav-icon-item,
body.shantety #header.sht-header-over .nav-icon-item svg { color: #fff; }
body.shantety #header.sht-header-over .logo-header img { filter: brightness(0) invert(1); }
body.shantety #header.sht-header-over .count-box { background: #fff; color: var(--main); }
body.shantety #header.sht-header-over { position: sticky; top: 0; z-index: 50; background: transparent; box-shadow: none; transition: background-color .25s; }
body.shantety #header.sht-header-over { margin-bottom: calc(-1 * var(--sht-hh, 95px)); }
body.shantety #header.sht-header-over.sht-solid { background: #fff; box-shadow: 0 1px 0 var(--line, #ebebeb); }
body.shantety #header.sht-header-over.sht-solid .box-nav-ul .item-link,
body.shantety #header.sht-header-over.sht-solid .nav-icon .nav-icon-item,
body.shantety #header.sht-header-over.sht-solid .nav-icon-item svg { color: var(--main); }
body.shantety #header.sht-header-over.sht-solid .logo-header img { filter: none; }
body.shantety #header.sht-header-over.sht-solid .count-box { background: var(--main); color: #fff; }
body.shantety #header.sht-header-over .tf-lg-hidden svg, body.shantety #header.sht-header-over a[href="#mobileMenu"] { color: #fff; }
body.shantety #header.sht-header-over.sht-solid a[href="#mobileMenu"] { color: var(--main); }

/* Matched to wpecomus.com/handbag (measured at 1366px). */
body.shantety .flat-title .title { font-size: 42px; line-height: 50px; font-weight: 400; }
body.shantety .flat-title .sub-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; order: -1; }
body.shantety .flat-title { display: flex; flex-direction: column; align-items: center; }

/* Hero: full width, about 984px at 1366, big centred white title, black button 160×48. */
body.shantety .sht-hero .wrap-slider { position: relative; }
body.shantety .sht-hero .wrap-slider img { width: 100%; height: clamp(560px, 72vw, 984px); object-fit: cover; display: block; }
body.shantety .sht-hero .wrap-slider .box-content { position: absolute; inset: 0; transform: none; display: flex; align-items: center; justify-content: center; padding-top: 60px; }
body.shantety .sht-hero .box-content .heading { font-size: clamp(40px, 5.86vw, 80px); line-height: 1.2; font-weight: 400; margin-bottom: 16px; }
body.shantety .sht-hero .box-content .heading br { display: none; }
body.shantety .sht-hero .box-content p { font-size: 16px; margin-bottom: 34px; }
body.shantety .sht-hero-btn { min-width: 160px; height: 48px; justify-content: center; background: #000; color: #fff; border-radius: 0; font-size: 14px; text-transform: uppercase; }

/* Small marquee: white band, brown text with sparkles, 88px. */
body.shantety .tf-marquee.marquee-st2 { background: #fff !important; padding: 0; height: 88px; display: flex; align-items: center; border-bottom: 1px solid #ebebeb; }
body.shantety .tf-marquee.marquee-st2 .marquee-item p, body.shantety .tf-marquee.marquee-st2 .marquee-item .icon { color: #a0583c !important; font-size: 16px; }
body.shantety .tf-marquee.marquee-st2 .marquee-item .icon svg { width: 16px; height: 16px; }

/* "As seen in": beige band, quote, logos centred. */
body.shantety .sht-brand-row { display: flex; justify-content: center; align-items: center; gap: 80px; flex-wrap: wrap; }
body.shantety .sht-brand-row img { height: 24px; width: auto; opacity: .55; transition: opacity .2s; }
body.shantety .sht-brand-row img:hover { opacity: 1; }

/* Collection grid: three 409px columns, outer two 850px tall, middle two stacked 410px; white labels. */
body.shantety .masonry-layout { gap: 30px; height: 850px; padding: 0 40px; }
body.shantety .masonry-layout .collection-item .collection-title { background: #fff; color: #000; font-size: 14px; font-weight: 500; text-transform: uppercase; height: 45px; padding: 0 28px; border-radius: 0; }

/* Best selling: 3 columns in bordered cells, outlined view-all. */
body.shantety .sht-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ebebeb; border-inline-start: 1px solid #ebebeb; margin: 60px 0 50px; }
body.shantety .sht-cell { border-bottom: 1px solid #ebebeb; border-inline-end: 1px solid #ebebeb; padding: 40px 32px 30px; }
body.shantety .sht-cell .card-product-wrapper { aspect-ratio: 1 / 1; background: #fff; }
body.shantety .sht-cell .card-product-info { text-align: center; align-items: center; }
body.shantety .sht-btn-outline { border: 1px solid #ebebeb; background: transparent; color: #000; height: 45px; padding: 0 30px; font-size: 14px; font-weight: 600; text-transform: uppercase; }

/* Two banners 643×740, text and white button at the bottom. */
body.shantety .sht-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 40px; }
body.shantety .sht-banner { position: relative; display: block; height: 740px; overflow: hidden; }
body.shantety .sht-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
body.shantety .sht-banner:hover img { transform: scale(1.03); }
body.shantety .sht-banner-text { position: absolute; inset: auto 74px 79px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: #fff; }
body.shantety .sht-banner-sub, body.shantety .sht-banner-heading { font-size: 14px; font-weight: 600; text-transform: uppercase; color: #fff; letter-spacing: .5px; }
body.shantety .sht-banner-heading { font-size: 28px; text-transform: none; font-weight: 400; }
body.shantety .sht-banner-btn { background: #fff; color: #000; height: 42px; padding: 0 30px; font-size: 14px; font-weight: 600; margin-top: 70px; }

/* Shop this look: full-width photo 492px tall with product labels on the pins. */
body.shantety .sht-look .flat-title { margin-bottom: 50px; }
body.shantety .sht-look-wrap { padding: 0 40px; }
body.shantety .sht-look-photo { position: relative; }
body.shantety .sht-look-photo > img { width: 100%; height: 492px; object-fit: cover; display: block; }
body.shantety .sht-pin { position: absolute; display: flex; align-items: center; gap: 10px; color: #000; transform: translate(-21px, -21px); }
body.shantety .sht-pin-dot { width: 42px; height: 42px; border-radius: 50%; background: #f2f2f2; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 42px; }
body.shantety .sht-pin-card { background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 0; min-width: 240px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
body.shantety .sht-pin-card img { width: 62px; height: 62px; object-fit: cover; }
body.shantety .sht-pin-card > span { display: flex; flex-direction: column; font-size: 16px; }
body.shantety .sht-pin-card bdi { font-size: 14px; font-weight: 600; }

/* Instagram: 5 squares across the full width. */
body.shantety .sht-gram { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 0; }
body.shantety .sht-gram a { width: auto; max-width: none; border-radius: 0; aspect-ratio: 1; }
body.shantety .sht-gram img { width: 100%; height: 100%; object-fit: cover; }

/* Newsletter: centred, 42px title, form under it. */
body.shantety .sht-newsletter { padding: 80px 0 100px; }
body.shantety .sht-nl-title { font-size: 42px; line-height: 50px; font-weight: 400; margin-bottom: 14px; }
body.shantety .sht-nl-text { font-size: 14px; max-width: 520px; margin: 0 auto 40px; }
body.shantety .sht-nl-form { display: flex; justify-content: center; max-width: 400px; margin: 0 auto; }
body.shantety .sht-nl-form input { flex: 1; height: 45px; border: 1px solid #ebebeb; padding: 0 16px; }
body.shantety .sht-nl-form .tf-btn { height: 45px; padding: 0 28px; background: #000; color: #fff; border-radius: 0; text-transform: uppercase; }

@media (max-width: 991px) {
    body.shantety .flat-title .title, body.shantety .sht-nl-title { font-size: 30px; line-height: 38px; }
    body.shantety .sht-hero .wrap-slider img { height: 560px; }
    body.shantety .masonry-layout { height: auto; padding: 0 16px; }
    body.shantety .sht-grid { grid-template-columns: 1fr 1fr; }
    body.shantety .sht-cell { padding: 16px; }
    body.shantety .sht-banners, body.shantety .sht-look-wrap { padding: 0 16px; }
    body.shantety .sht-banners { grid-template-columns: 1fr; gap: 16px; }
    body.shantety .sht-banner { height: 460px; }
    body.shantety .sht-banner-text { inset: auto 24px 30px; }
    body.shantety .sht-banner-btn { margin-top: 20px; }
    body.shantety .sht-look-photo > img { height: 360px; }
    body.shantety .sht-pin-card { display: none; }
    body.shantety .sht-gram { grid-template-columns: repeat(3, 1fr); }
    body.shantety .sht-brand-row { gap: 30px; }
}

/* Second pass against the live demo. */
body.shantety .sht-brand-row img { height: 34px; opacity: .7; }
body.shantety .ec-section-custom-bg .flat-title .title { font-size: 22px; line-height: 34px; max-width: 620px; margin: 0 auto; }
body.shantety .masonry-layout .collection-item .collection-title { font-size: 14px !important; height: 45px !important; padding: 0 28px !important; line-height: 45px !important; background: #fff !important; color: #000 !important; }
body.shantety .masonry-layout .collection-item .collection-content { bottom: 30px; }
body.shantety .sht-banner-text { inset: auto 74px 70px; }
body.shantety .sht-banner-heading { font-size: 14px; text-transform: uppercase; font-weight: 600; }
body.shantety .sht-banner-btn { margin-top: 90px; }

/* Phones, matched to wpecomus.com/handbag at 390px. */
@media (max-width: 767px) {
    body.shantety .sht-brand-row { flex-wrap: nowrap; gap: 20px; }
    body.shantety .sht-brand-row img { height: 22px; }
    body.shantety .masonry-layout { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-areas: none; grid-auto-rows: 190px; gap: 12px; height: auto; }
    body.shantety .masonry-layout > [class*="item-"] { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; height: auto !important; }
    body.shantety .masonry-layout > .item-1, body.shantety .masonry-layout > .item-4 { grid-column: 1 / -1 !important; }
    body.shantety .masonry-layout .collection-inner, body.shantety .masonry-layout .collection-image { height: 100%; }
    body.shantety .masonry-layout .collection-image img { height: 100%; object-fit: cover; }
    body.shantety .masonry-layout .collection-item .collection-title { height: 38px !important; line-height: 38px !important; padding: 0 16px !important; font-size: 13px !important; }
}

/* Third pass at 2000px: live sections span the full width with 40px sides (1920 at 2000). */
body.shantety .sht-wide { padding-inline: 40px; max-width: none; }
/* Category grid: 3 equal columns, outer tiles 850 tall, middle two 410; shoulder on the left, "all" on the right. */
@media (min-width: 768px) {
    body.shantety .masonry-layout { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-template-rows: 410px 410px; gap: 30px; height: auto !important; padding: 0 40px; }
    body.shantety .masonry-layout > [class*="item-"] { width: auto !important; height: auto !important; margin: 0 !important; position: static !important; }
    body.shantety .masonry-layout > .item-1 { grid-column: 3; grid-row: 1 / 3; }
    body.shantety .masonry-layout > .item-2 { grid-column: 2; grid-row: 1; }
    body.shantety .masonry-layout > .item-3 { grid-column: 2; grid-row: 2; }
    body.shantety .masonry-layout > .item-4 { grid-column: 1; grid-row: 1 / 3; }
    body.shantety .masonry-layout .collection-inner, body.shantety .masonry-layout .collection-image { height: 100% !important; display: block; }
    body.shantety .masonry-layout .collection-image img { width: 100%; height: 100% !important; object-fit: cover; }
    body.shantety .masonry-layout .collection-content { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; justify-content: center; }
}
/* Best selling: three wide cells, 579px photos at 2000. */
body.shantety .sht-grid { margin: 70px 0 70px; }
body.shantety .sht-cell { padding: 40px 30px 30px; }
body.shantety .sht-cell .card-product-wrapper img { object-fit: contain; }
/* "As seen in": readable logos. */
body.shantety .sht-brand-row img { height: 56px; opacity: .75; }
body.shantety .sht-brand-row { gap: 70px; }
/* Shop the look: full width, keeps the live proportion (1920×734). */
body.shantety .sht-look-photo > img { height: auto; aspect-ratio: 1920 / 734; }
/* Instagram: five squares across the full width. */
body.shantety .sht-gram { gap: 0; }
@media (max-width: 767px) { body.shantety .sht-wide { padding-inline: 16px; } body.shantety .sht-look-photo > img { aspect-ratio: 4 / 3; } }
@media (max-width: 767px) { body.shantety .sht-brand-row img { height: 30px; } body.shantety .sht-brand-row { gap: 16px; flex-wrap: wrap; } }

/* Shop-the-look pins as live: black dot with a white centre; click opens a card above it. */
body.shantety .sht-pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: block; gap: 0; }
body.shantety .sht-pin-dot { width: 26px; height: 26px; border-radius: 50%; background: #000; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; font-size: 0; }
body.shantety .sht-pin-dot span { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
body.shantety .sht-pin-card { display: none !important; position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); min-width: 320px; background: #fff; padding: 12px 16px; align-items: center; gap: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
body.shantety .sht-pin-card::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #fff; }
body.shantety .sht-pin.open { z-index: 5; }
body.shantety .sht-pin.open .sht-pin-card { display: flex !important; }
body.shantety .sht-pin-card img { width: 56px; height: 56px; object-fit: cover; }
body.shantety .sht-pin-info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; font-size: 15px; }
body.shantety .sht-pin-name { color: #000; }
body.shantety .sht-pin-info bdi { font-size: 14px; font-weight: 600; }
body.shantety .sht-pin-view { width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; display: flex; align-items: center; justify-content: center; color: #000; flex: none; }
@media (max-width: 767px) { body.shantety .sht-pin-card { min-width: 240px; } }