/* ==========================================================================
   FYIList Child -- Male Fashion template port
   Class names and layout ported directly from the Colorlib "Male Fashion"
   template (colorlib.com -- CC BY 3.0, attribution kept in footer),
   recolored to this site's red/navy palette. These class names do not
   exist anywhere in the legacy style.css, so there is no cascade fight.
   ========================================================================== */

:root {
    --brand: #e53637;
    --navy: #0c2b4b;
    --navy-dark: #081d33;
    --ink: #111111;
    --muted: #5c5c5c;
    --line: #b7b7b7;
    --paper: #ffffff;
    --paper-tint: #f3f2ee;
    --font-display: 'Unna', Georgia, serif;
    --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 6px;
    --shadow: 0 15px 60px rgba(17, 17, 17, 0.08);
}

.set-bg { background-repeat: no-repeat; background-size: cover; background-position: center center; }

.section-title { margin-bottom: 45px; text-align: center; }
.section-title span { color: var(--brand); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; display: block; font-family: var(--font-body); }
.section-title h2 { color: var(--ink); font-weight: 400; font-family: var(--font-display); line-height: 1.25; }

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 14px 30px;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: var(--radius);
    transition: background .3s ease, transform .3s ease;
}
.primary-btn:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   Header
   ========================================================================== */
.strip-container { background: var(--navy); }
.strip-container .discount-strip { padding: 8px 0; }
.strip-container .carousel-item a { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-align: center; display: block; }

.header { background: var(--ink); position: sticky; top: 0; z-index: 999; }
.header__top { background: var(--navy); padding: 10px 0; }
.header__top__left p { color: #fff; margin-bottom: 0; font-size: 13px; font-family: var(--font-body); }

.header__logo { padding: 18px 0; }
.header__logo a { display: inline-block; }
.header__logo img { height: 32px; width: auto; }

.header__menu { text-align: center; padding: 26px 0; }
.header__menu ul { margin: 0; padding: 0; }
.header__menu ul li { list-style: none; display: inline-block; margin-right: 36px; position: relative; }
.header__menu ul li:last-child { margin-right: 0; }
.header__menu ul li a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255,255,255,.85);
    display: block;
    padding: 3px 0;
    position: relative;
}
.header__menu ul li a:after {
    position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
    background: var(--brand); content: ""; transition: transform .3s ease; transform: scaleX(0);
}
.header__menu ul li:hover a:after, .header__menu ul li.current-menu-item a:after { transform: scaleX(1); }
.header__menu ul li:hover a { color: #fff; }
.header__menu .dropdown {
    position: absolute; left: 0; top: 32px; width: 170px; background: var(--navy-dark);
    text-align: left; padding: 8px 0; z-index: 9; opacity: 0; visibility: hidden;
    transition: opacity .3s ease; border-radius: var(--radius); box-shadow: var(--shadow);
}
.header__menu li:hover .dropdown { opacity: 1; visibility: visible; }
.header__menu .dropdown li { display: block; margin-right: 0; }
.header__menu .dropdown li a { font-size: 13px; padding: 8px 18px; }
.header__menu .dropdown li a:after { display: none; }

/* Mega menu -- dynamic panel for the Fashion / Interior top-level items.
   Left: vertical list of subcategories. Right: that subcategory's recent
   posts as cards. Every subcategory's card grid is pre-rendered (see
   fyilist_child_render_mega_menu() in functions.php) and hidden except the
   active one, so hovering a different subcategory in motion.js just swaps
   which pre-rendered grid is visible -- no AJAX round-trip. */
.header__menu li.has-mega { position: static; }

/* Modern floating card mega menu -- a rounded, light panel that hovers just
   below the nav bar (not a full-bleed dark strip), split into an icon +
   title + description list on the left and a content grid on the right. */
.mega-panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    transform: translate(-50%, -6px);
    width: min(920px, 94vw);
    background: var(--paper);
    border-radius: 20px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04);
    display: flex;
    max-height: 520px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 20;
    overflow: hidden;
}
.header__menu li.has-mega:hover .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* .header__menu ul li a (the top-nav link styling -- uppercase, bold, with
   a hover-underline pseudo-element) otherwise cascades into every anchor
   nested inside the mega panel too, since they all live inside the same
   <li>. Its selector has 1 class + 3 elements; ours needs at least 2
   classes to reliably win regardless of element count, so the extra
   ".header__menu" prefix here is load-bearing, not decorative. */
.header__menu .mega-panel a {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    display: block;
    padding: 0;
    color: inherit;
}
.header__menu .mega-panel a:after,
.header__menu .mega-panel a::after {
    content: none !important;
}

.mega-panel__subcats {
    flex: 0 0 clamp(260px, 32vw, 320px);
    background: var(--paper);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.mega-subcat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--paper-tint);
    transition: background .2s ease;
}
.mega-subcat__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px; text-align: left; }
.mega-subcat__name {
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    text-transform: none; letter-spacing: normal;
    color: var(--ink);
}
.mega-subcat__desc {
    font-family: var(--font-body); font-size: 11px; line-height: 1.4; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    white-space: normal; word-break: break-word;
}
.mega-subcat__arrow {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(17,17,17,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 10px;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.mega-subcat:hover { background: var(--paper-tint); filter: brightness(.97); }
.mega-subcat.is-active {
    background: #faeceb; /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--brand) 12%, var(--paper));
}
.mega-subcat.is-active .mega-subcat__arrow { border-color: var(--brand); color: var(--brand); }

.mega-panel__stage { flex: 1; position: relative; padding: 20px; overflow-y: auto; background: var(--paper); }
.mega-stage-panel {
    display: none;
    grid-template-columns: repeat(auto-fill, 184px);
    justify-content: flex-start;
    gap: 20px;
}
.mega-stage-panel.is-active { display: grid; }
.mega-empty { color: var(--muted); font-family: var(--font-body); font-size: 13px; grid-column: 1 / -1; }

.mega-post-card { display: block; width: 184px; }
.mega-post-card__img { border-radius: 12px; overflow: hidden; margin-bottom: 10px; aspect-ratio: 4/3; background: var(--paper-tint); }
.mega-post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.mega-post-card:hover .mega-post-card__img img { transform: scale(1.06); }
.mega-post-card__title, .mega-post-card__title--plain {
    font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.4;
    color: var(--ink); margin: 0 0 5px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    white-space: normal; word-break: break-word;
}
.mega-post-card:hover .mega-post-card__title { color: var(--brand); }
.mega-post-card__price { display: block; font-family: var(--font-body); font-weight: 800; font-size: 12px; color: var(--brand); }
.mega-post-card__meta {
    display: flex; gap: 8px; margin-bottom: 4px;
    font-family: var(--font-body); font-size: 9.5px; color: var(--muted);
}
.mega-post-card__meta i { margin-right: 3px; }
.mega-post-card__excerpt {
    font-family: var(--font-body); font-size: 11px; line-height: 1.5; color: var(--muted);
    margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.header__nav__option { text-align: right; padding: 18px 0; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.header__nav__option a { color: rgba(255,255,255,.85); font-size: 15px; transition: color .3s ease; }
.header__nav__option a:hover { color: var(--brand); }
.header__nav__option .header-search-form { position: relative; display: flex; align-items: center; }
.header__nav__option .search-field {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    color: #fff; padding: 7px 14px; font-size: 13px; font-family: var(--font-body); width: 160px;
}
.header__nav__option .search-field::placeholder { color: rgba(255,255,255,.55); }
.header__login-menu { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; }
.header__login-menu li { list-style: none; line-height: 1; }
.header__login-menu a { display: inline-flex; font-size: 17px; color: rgba(255,255,255,.85); }
.header__login-menu a:hover { color: var(--brand); }

.navbar-toggler.modern-toggle { display: none; border: none; background: transparent; padding: 8px; cursor: pointer; }
.navbar-toggler.modern-toggle span { display: block; width: 22px; height: 2px; margin: 4px 0; background: #fff; }

@media (max-width: 991.98px) {
    .navbar-toggler.modern-toggle { display: block; }
    .header__menu { position: fixed; inset: 0 0 0 auto; width: min(300px, 85vw); height: 100vh; background: var(--navy-dark);
        text-align: left; padding: 96px 24px 24px; transform: translateX(100%); transition: transform .35s ease; overflow-y: auto; z-index: 998; }
    .header__menu.is-open { transform: translateX(0); }
    .header__menu ul li { display: block; margin-right: 0; margin-bottom: 8px; }
    .header__menu .dropdown { position: static; opacity: 1; visibility: visible; width: 100%; box-shadow: none; display: none; }
    .header__menu li.has-dropdown.is-open-mega .dropdown { display: block; }

    .mega-panel {
        position: static;
        left: auto; top: auto; width: auto;
        display: none;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
        max-height: none;
    }
    .header__menu li.has-mega.is-open-mega .mega-panel { display: flex; }
    .mega-panel__subcats { flex: none; background: transparent; padding: 0; max-height: none; overflow: visible; gap: 8px; }
    .mega-subcat { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); }
    .mega-subcat__name { color: rgba(255,255,255,.9); }
    .mega-subcat__desc { color: rgba(255,255,255,.55); }
    .mega-subcat__arrow { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
    .mega-subcat:hover { background: rgba(255,255,255,.06); filter: none; }
    .mega-subcat.is-active { background: rgba(229,54,55,.18); }
    .mega-subcat.is-active .mega-subcat__arrow { border-color: var(--brand); color: var(--brand); }
    .mega-panel__stage { padding: 12px 4px 4px; max-height: none; overflow: visible; background: transparent; }
    .mega-stage-panel.is-active { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
    .mega-post-card { width: auto; }
    .mega-post-card__title, .mega-post-card__title--plain { color: rgba(255,255,255,.9); }
    .mega-post-card__meta, .mega-post-card__excerpt { color: rgba(255,255,255,.55); }
}

/* ==========================================================================
   Swiper defaults (used by the hero, related-product and individual-product
   sliders that replaced the old, unreliable Slick carousels)
   ========================================================================== */
.swiper { padding-bottom: 4px; }
.swiper .swiper-button-next, .swiper .swiper-button-prev {
    width: 38px; height: 38px; background: #fff; border-radius: 50%;
    color: var(--ink); box-shadow: var(--shadow); transition: background .3s ease, color .3s ease;
}
.swiper .swiper-button-next:hover, .swiper .swiper-button-prev:hover { background: var(--brand); color: #fff; }
.swiper .swiper-button-next::after, .swiper .swiper-button-prev::after { font-size: 14px; }
.related-product-swiper .swiper-slide, .individual-products-swiper .swiper-slide { height: auto; }

/* Make the prev/next arrows on the related/individual product sliders
   clearly visible, sitting just outside the card edges. */
.related-product-swiper, .individual-products-swiper { overflow: visible; padding: 0 6px; }
.related-product-swiper .swiper-button-next, .related-product-swiper .swiper-button-prev,
.individual-products-swiper .swiper-button-next, .individual-products-swiper .swiper-button-prev {
    width: 42px;
    height: 42px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}
.related-product-swiper .swiper-button-next, .individual-products-swiper .swiper-button-next { right: -14px; }
.related-product-swiper .swiper-button-prev, .individual-products-swiper .swiper-button-prev { left: -14px; }
.related-product-swiper .swiper-button-next:hover, .related-product-swiper .swiper-button-prev:hover,
.individual-products-swiper .swiper-button-next:hover, .individual-products-swiper .swiper-button-prev:hover {
    background: var(--brand);
}
.related-product-swiper .swiper-button-next::after, .related-product-swiper .swiper-button-prev::after,
.individual-products-swiper .swiper-button-next::after, .individual-products-swiper .swiper-button-prev::after {
    font-size: 14px;
    font-weight: 700;
}
.related-product-swiper .swiper-button-disabled, .individual-products-swiper .swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

/* Renamed away from the legacy .related-product-slider / .individual-products-slider
   class names so the parent theme's jQuery Slick init (custom.js) no longer
   matches these elements and fights with Swiper over layout. Image sizing
   (img.related-product-img) still comes from the parent's section-scoped
   rules; only the wrapper-scoped caption overlay needs re-declaring here. */
.related-product-swiper, .individual-products-swiper { width: 100%; }
.related-product-swiper .product, .individual-products-swiper .product { position: relative; }
.related-product-swiper .image-text, .individual-products-swiper .image-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
    padding: 12px;
}
.related-product-swiper .image-text p.product-name, .individual-products-swiper .image-text p.product-name {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 6px;
}
.related-product-swiper .image-text p.company, .individual-products-swiper .image-text p.company {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    margin: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; }
.hero-swiper, .hero-swiper .swiper-slide { min-height: min(80vh, 700px); }
.hero__items { min-height: min(80vh, 700px); height: 100%; display: flex; align-items: center; position: relative; }
.hero-swiper .swiper-button-next, .hero-swiper .swiper-button-prev {
    width: 46px; height: 46px; background: rgba(255,255,255,.15); border-radius: 50%;
    color: #fff; backdrop-filter: blur(4px); transition: background .3s ease;
}
.hero-swiper .swiper-button-next:hover, .hero-swiper .swiper-button-prev:hover { background: var(--brand); }
.hero-swiper .swiper-button-next::after, .hero-swiper .swiper-button-prev::after { font-size: 16px; }
.hero-swiper .swiper-pagination-bullet { background: #fff; opacity: .5; }
.hero-swiper .swiper-pagination-bullet-active { opacity: 1; background: var(--brand); }
.hero__items::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(12,43,75,.82) 0%, rgba(12,43,75,.3) 55%, rgba(12,43,75,.05) 100%);
}
.hero__items .container { position: relative; z-index: 1; }
.hero__text h6 { color: var(--brand); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.hero__text h2 { color: #fff; font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 400; line-height: 1.15; margin-bottom: 24px; }
.hero__text h2 a { color: inherit; }
.hero__text h6 { display: flex; align-items: center; gap: 8px; }
.hero__text p { color: rgba(255,255,255,.82); font-family: var(--font-body); font-size: 16px; line-height: 1.7; margin-bottom: 30px; max-width: 520px; }
.hero__social { margin-top: 32px; }
.hero__social a { font-size: 16px; color: rgba(255,255,255,.7); display: inline-block; margin-right: 24px; }
.hero__social a:last-child { margin-right: 0; }
.hero__social a:hover { color: var(--brand); }

/* ==========================================================================
   Banner grid
   ========================================================================== */
.banner { padding: 70px 0; }
.banner__item { position: relative; overflow: hidden; border-radius: var(--radius); }
.banner__item__pic img { width: 100%; display: block; }
.banner__item__pic { position: relative; }
.banner__item__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,43,75,.55) 0%, rgba(12,43,75,0) 55%); }
.banner__item__text { position: absolute; left: 0; bottom: 0; padding: 24px; z-index: 1; max-width: 100%; }
.banner__item__text h2 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 28px); margin-bottom: 8px; }
.banner__item__text a { display: inline-block; color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 3px 0; position: relative; }
.banner__item__text a:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255,255,255,.6); content: ""; transition: background .3s ease; }
.banner__item:hover .banner__item__text a:after { background: var(--brand); }
@media (max-width: 767.98px) { .banner__item.banner__item--middle, .banner__item.banner__item--last { margin-top: 20px; } }

/* ==========================================================================
   Categories / Deal of the week
   ========================================================================== */
.categories { background: var(--paper-tint); overflow: hidden; padding: 90px 0; }
.categories__text { padding-top: 20px; }
.categories__text h2 { color: var(--line); font-family: var(--font-display); font-weight: 400; line-height: 1.4; font-size: clamp(24px, 2.6vw, 34px); }
.categories__text h2 span { font-weight: 700; color: var(--brand); }
.categories__hot__deal { position: relative; text-align: center; }
.categories__hot__deal img { max-height: 260px; object-fit: contain; }
.hot__deal__sticker {
    height: 90px; width: 90px; background: var(--navy); border-radius: 50%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; position: absolute; right: 10px; top: -20px;
}
.hot__deal__sticker span { display: block; font-size: 13px; color: #fff; margin-bottom: 2px; font-family: var(--font-body); }
.hot__deal__sticker h5 { color: #fff; font-size: 17px; font-weight: 700; margin: 0; font-family: var(--font-body); }
.categories__deal__countdown span.eyebrow { color: var(--brand); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; display: block; }
.categories__deal__countdown h2 { color: var(--ink); font-family: var(--font-display); font-weight: 400; margin-bottom: 20px; font-size: clamp(22px, 2.6vw, 32px); }
.categories__deal__countdown__timer { display: flex; gap: 14px; margin-bottom: 24px; }
.categories__deal__countdown__timer .cd-item { background: var(--navy); border-radius: var(--radius); padding: 12px 16px; min-width: 68px; text-align: center; }
.categories__deal__countdown__timer .cd-item span { color: #fff; font-weight: 700; display: block; font-size: 22px; font-family: var(--font-body); }
.categories__deal__countdown__timer .cd-item p { margin: 2px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.75); }

/* ==========================================================================
   Instagram
   ========================================================================== */
.instagram { background: var(--navy); padding: 70px 0; }
.instagram__text h2 { color: #fff; font-family: var(--font-display); font-weight: 400; margin-bottom: 16px; }
.instagram__text p { color: rgba(255,255,255,.7); margin-bottom: 20px; font-family: var(--font-body); font-size: 14px; }
.instagram__text h3 { color: var(--brand); font-weight: 700; font-family: var(--font-body); font-size: 16px; }

/* ==========================================================================
   Product grid ("Currently Loving")
   ========================================================================== */
.product { padding: 70px 0; }
.product__item { overflow: hidden; margin-bottom: 30px; }
.product__item__pic { height: 320px; position: relative; border-radius: var(--radius); overflow: hidden; }
.product__item__pic .label { color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; background: #fff; position: absolute; left: 12px; top: 12px; border-radius: 3px; font-family: var(--font-body); }
.product__hover { position: absolute; right: 12px; top: 12px; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateX(8px); transition: all .3s ease; }
.product__item:hover .product__hover { opacity: 1; transform: translateX(0); }
.product__hover li { list-style: none; }
.product__hover li a, .product__hover li .wishlist-icon {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
    background: #fff; color: var(--brand); box-shadow: var(--shadow);
}
.product__hover li a:hover, .product__hover li .wishlist-icon:hover { background: var(--brand); color: #fff; }
.product__item__text { padding-top: 16px; }
.product__item__text h6 { color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 400; margin-bottom: 4px; }
.product__item__text .product__vendor { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; font-family: var(--font-body); }
.product__item__text h5 { color: var(--brand); font-weight: 800; font-family: var(--font-body); font-size: 16px; margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--ink); padding-top: 60px; }
.footer__about { margin-bottom: 30px; }
.footer__about .footer__logo { margin-bottom: 20px; }
.footer__about .footer__logo img { height: 30px; width: auto; filter: brightness(-1) invert(1); }
.footer__about p { color: rgb(255 255 255); margin-bottom: 20px; font-size: 14px; line-height: 1.7; max-width: 280px; font-family: var(--font-body); }
.footer__widget { margin-bottom: 30px; margin-left: -65px;}
.footer__widget h6 { color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; font-family: var(--font-body); }
.footer__widget ul { margin: 0; padding: 0; }
.footer__widget ul li { line-height: 32px; list-style: none; }
.footer__widget ul li a { color: rgb(255 255 255); font-size: 14px; font-family: var(--font-body); }
.footer__widget ul li a:hover { color: var(--brand); }
.footer__widget .footer__newslatter p { color: rgb(255 255 255); font-family: var(--font-body); font-size: 14px; }
.footer__widget .footer__newslatter form { position: relative; }
.footer__widget .footer__newslatter input[type="email"],
.footer__widget .footer__newslatter input[type="text"] {
    width: 100%; font-size: 14px; color: #fff; background: transparent; border: none;
    padding: 12px 0; border-bottom: 2px solid rgba(255,255,255,.3); font-family: var(--font-body);
}
.footer__widget .footer__newslatter button, .footer__widget .footer__newslatter input[type="submit"] {
    color: var(--brand); font-size: 15px; background: transparent; border: none; margin-top: 8px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.footer__copyright__text { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; margin-top: 30px; }
.footer__copyright__text p { color: rgb(255 255 255); margin-bottom: 0; font-size: 13px; font-family: var(--font-body); }
.footer__copyright__text p a { color: var(--brand); }
.footer__copyright__text .credit-line { color: rgba(255,255,255,.4); font-size: 12px; margin-top: 6px; }
.footer__copyright__text .credit-line a { color: rgba(255,255,255,.65); }

/* ==========================================================================
   Latest blog / blog__item cards
   ========================================================================== */
.latest { padding: 70px 0 30px; }
.blog__item { margin-bottom: 40px; }
.blog__item__pic { height: 260px; border-radius: var(--radius); }
.blog__item__text {
    padding: 24px 24px 20px; margin: 0 20px; margin-top: -35px; background: #fff; position: relative;
    border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow .3s ease;
}
.blog__item:hover .blog__item__text { box-shadow: 0 20px 50px rgba(17,17,17,.12); }
.blog__item__text span { color: var(--muted); font-size: 13px; display: block; margin-bottom: 10px; font-family: var(--font-body); }
.blog__item__text span i { color: var(--brand); margin-right: 6px; }
.blog__item__text h5 { color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
.blog__item__text a.blog-read-more { display: inline-block; color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 3px 0; position: relative; font-family: var(--font-body); }
.blog__item__text a.blog-read-more:after { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--brand); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.blog__item:hover a.blog-read-more:after { transform: scaleX(1); }

/* ==========================================================================
   Feature post spotlight (formerly .single-post-prod-section) -- fresh
   markup + classes so the legacy fixed-pixel image sizing (720x890) and
   .singlpost-col-right width rules from the old stylesheet no longer apply.
   ========================================================================== */
section.feature-post { padding: 70px 0; }
section.feature-post .row { row-gap: 32px; }
section.feature-post .row > [class*="col-"] { width: 100%; }

/* Top: full-width hero-style visual card (image + text overlay), like the
   homepage hero but sized for a single feature block. */
.feature-post__visual {
    position: relative;
    width: 100%;
    min-height: 440px;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.feature-post__visual-link { position: absolute; inset: 0; z-index: 1; }
.feature-post__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(12,43,75,.88) 0%, rgba(12,43,75,.25) 55%, rgba(12,43,75,.05) 100%);
}
.feature-post__overlay { position: relative; z-index: 2; padding: 36px; width: 100%; max-width: 640px; }
.feature-post__overlay .category-date { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.feature-post__overlay p.categor-text {
    font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand); margin: 0;
}
.feature-post__overlay p.date-text { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,.75); margin: 0; }
.feature-post__overlay p.dot { color: rgba(255,255,255,.5); margin: 0; }
.feature-post__overlay .post-title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 34px); font-weight: 400; line-height: 1.25; margin-bottom: 14px; }
.feature-post__overlay .post-title a { color: #fff; }
.feature-post__overlay .feature-post__excerpt { color: rgba(255,255,255,.85); font-family: var(--font-body); font-size: 15px; line-height: 1.6; margin-bottom: 20px; max-width: 480px; }

/* Below: a row of short, wide "widget card" product slides -- landscape
   layout instead of tall portrait cards, several visible at once. */
.feature-post__related.related-product-swiper {
    width: 100%;
    border-radius: var(--radius);
    padding: 0 6px;
}
.feature-post__related.related-product-swiper .swiper-slide { height: auto; }
.feature-post__related.related-product-swiper .item { display: block; }
.feature-post__related.related-product-swiper .product {
    display: flex;
    align-items: stretch;
    height: 140px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow);
}
.feature-post__related.related-product-swiper .related-product-img {
    display: block;
    width: 44%;
    height: max-content!important;
    object-fit: cover;
    max-width: 110px;    
    margin-top: -70px!important;
    object-fit: cover;
    max-width: none;
    flex-shrink: 0;
    /* Cancel the old theme's section.single-post-prod-section rule, which
       still applies "position: relative; bottom: ...px" to this exact
       image class since this component never overrode those two
       properties -- that offset was shifting the image out of the card. */
    position: static;
    bottom: auto;
}
.feature-post__related.related-product-swiper .image-text {
    position: static;
    background: none;
    padding: 12px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.feature-post__related.related-product-swiper .image-text p.product-name {
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 4px;
}
.feature-post__related.related-product-swiper .image-text p.company {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 767.98px) {
    .feature-post__visual { min-height: 340px; }
    .feature-post__related.related-product-swiper .product { height: 110px; }
}

/* ==========================================================================
   Explore tabs -- consolidates the old Favourites / Popular / Local Nation /
   Top Six x2 / Latest / Remaining-Posts sections into one tabbed component.
   ========================================================================== */
section.explore-tabs { padding: 70px 0 40px; }
.explore-tabs__head { padding-left: var(--gutter); padding-right: var(--gutter); }
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.tab-btn {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--paper-tint);
    border: none;
    border-radius: var(--radius-pill, 999px);
    padding: 10px 22px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.tab-btn:hover { color: var(--ink); transform: translateY(-1px); }
.tab-btn.is-active { background: var(--brand); color: #fff; }
.tab-panels { position: relative; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.tab-panel section { padding-top: 20px; }

/* ==========================================================================
   Product filter tabs (Currently Loving)
   ========================================================================== */
.product-filter-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}
.product-filter-btn {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--paper-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill, 999px);
    padding: 8px 18px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.product-filter-btn:hover { color: var(--ink); }
.product-filter-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
section.product .product-filter-item.is-filtered-out { display: none; }

/* ==========================================================================
   Motion / scroll-reveal layer
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
}
[data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); }
[data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
}
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: .32s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .001ms !important; }
    [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

.related-product-swiper .swiper-button-next::after, .related-product-swiper .swiper-button-prev::after, .individual-products-swiper .swiper-button-next::after, .individual-products-swiper .swiper-button-prev::after {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}


/* ==========================================================================
   Blog listing page (fashion-blogs-page.php) -- shared card typography
   used across its many category blocks, plus per-section layout.
   ========================================================================== */
.category-date { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.category-date p.categor-text, .category-date p.category-text {
    font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand); margin: 0;
}
.category-date p.date-text { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin: 0; }
.category-date p.dot { color: var(--muted); margin: 0; }
h1.post-title, h2.post-title {
    font-family: var(--font-display); font-weight: 400; color: var(--ink);
    font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3; margin: 0;
}
h1.post-title a, h2.post-title a { color: inherit; }

/* Section titles used across every block on this page */
.latest-blogs-heading .title,
.hand-picked-heading .title,
.dining-heading .main-heading,
.living-room-heading .living,
.kitchen-section > .title h2,
.kids-section > .title .main-title,
.remaining-posts-second-section > .title .main-title {
    font-family: var(--font-display);
    font-weight: 400;
    text-align: center;
    color: var(--ink);
    font-size: clamp(28px, 3vw, 42px);
    text-transform: none;
    border: none;
    margin: 0 0 36px;
    padding: 0;
}
.dining-heading .main-heading { text-align: left; }
.dining-heading p { color: var(--muted); font-family: var(--font-body); font-size: 14px; margin-top: 8px; }

/* "View more" buttons, ported to the primary-btn look */
#view-more-container, #view-more-container-white { margin-top: 30px; }
#view-more-container .btn.btn-primary,
#view-more-container-white .btn.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand) !important; color: #fff !important;
    border: none !important; border-radius: var(--radius) !important;
    padding: 13px 30px !important; font-family: var(--font-body);
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
}
#view-more-container .btn.btn-primary:hover,
#view-more-container-white .btn.btn-primary:hover { background: var(--navy) !important; transform: translateY(-2px); }
#view-more-container-white .btn.btn-primary { background: var(--ink) !important; }

/* Banner post slider ("The Latest") */
.banner-post-slider { padding: 60px 0 40px; }
.postlist-swiper.swiper { padding: 0 6px; }
.postlist-swiper .slide { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); }
.postlist-swiper .image-content { height: 320px; overflow: hidden; }
.postlist-swiper .grid-image { width: 100%; height: 100%; object-fit: cover; }
.postlist-swiper .post-content { padding: 18px; }
.postlist-swiper .post-link, .postlist-swiper .post-title a { color: var(--ink) !important; }

/* Hand-picked section: one big feature post + a slider of the rest */
.hand-picked-section { padding: 60px 0; }
.hand-picked-section .post-container { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); height: 100%; }
.hand-picked-section .post-container img { width: 100%; height: 340px; object-fit: cover; display: block; }
.hand-picked-section .post-content { padding: 18px; }
.hand-picked-swiper.swiper .slider-wrapper { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); }
.hand-picked-swiper.swiper .slider-wrapper img { width: 100%; height: 340px; object-fit: cover; display: block; }
.hand-picked-swiper.swiper .post-content { padding: 18px; }

/* Dining-style section: heading + copy on the left, wide slider on the right */
.Dining-section { background: var(--paper-tint); padding: 60px 0; }
.dining-swiper.swiper .item { border-radius: var(--radius); overflow: hidden; }
.dining-swiper .image-div img { width: 100%; height: 220px; object-fit: cover; display: block; }
.dining-swiper .dining-content { padding: 10px 4px; }
.dining-swiper .dining-content p { font-family: var(--font-display); font-size: 16px; color: var(--ink); margin: 0; }

/* Living-room style section: 2 rows of 3 cards */
.living-room-section { padding: 60px 0; }
.living-room-content { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); margin-bottom: 28px; }
.living-room-content .grid-image { width: 100%; height: 260px; object-fit: cover; display: block; }
.living-room-content .post-content { padding: 16px; }

/* Kitchen-style section: 1 big feature + 3-across grid */
.kitchen-section { padding: 60px 0; }
.kitchen-section .post-container { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.kitchen-section .post-container img { width: 100%; height: 420px; object-fit: cover; display: block; }
.kitchen-section .post-container .post-content { padding: 20px 4px; }
.kitchen-section .image-div { border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.kitchen-section .image-div img { width: 100%; height: 220px; object-fit: cover; display: block; }
.kitchen-section .col-md-4 .post-content { padding: 0 4px; }

/* Kids-style section: alternating left/right image+text rows */
.kids-section { padding: 60px 0; }
.kids-section .image-div { border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.kids-section .image-div img { width: 100%; height: 320px; object-fit: cover; display: block; }
.kids-section .post-content { padding: 0 4px; }

/* Subscribe / collaborate band */
.subscribe-section2 .top-div { background-size: cover; background-position: center; border-radius: var(--radius-lg, 16px); max-width: var(--container); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter); }
.Subscription-content h2.Subscribe-title, .Collaboration-content h2.Collaboration-title {
    font-family: var(--font-display); font-weight: 400; color: #fff; font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px;
}
.Subscription-content p, .Collaboration-content p { color: rgba(255,255,255,.85); font-family: var(--font-body); margin-bottom: 20px; }
.subscribe-btn {
    display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff;
    border: none; border-radius: var(--radius); padding: 13px 30px; font-family: var(--font-body);
    font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
}
.subscribe-btn:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }

/* Remaining posts grid at the bottom */
.remaining-posts-second-section { padding: 60px 0; }
.remaining-posts-second-section .image-content { border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.remaining-posts-second-section .grid-image { width: 100%; height: 260px; object-fit: cover; display: block; }

/* ==========================================================================
   Contact Us page
   ========================================================================== */
.contact-us-section { padding: 70px 0; }
.contact-us-section .main-title { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 44px); font-weight: 400; color: var(--ink); margin-bottom: 18px; }
.contact-us-section .content { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--muted); }
.contact-us-section .sub-title { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); margin: 24px 0 6px; }
.contact-us-section .bottom-section { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 32px; }
.contact-us-section .email-title { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.contact-us-section .email-address { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.contact-us-section .email-address:hover { color: var(--brand); }
.contact-us-section .follow-us a { display: inline-block; margin-right: 12px; }
.contact-us-section .follow-us img { width: 32px; height: 32px; object-fit: contain; transition: transform .25s ease; }
.contact-us-section .follow-us a:hover img { transform: translateY(-3px); }
.contact-us-section .collaborate-section { background: var(--paper-tint); border-radius: var(--radius-lg, 16px); padding: 36px; }
.contact-us-section .collaborate-title { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--ink); margin-bottom: 20px; }

/* ==========================================================================
   Bookmarks / Favorites page
   ========================================================================== */
.bookmark-section { padding: 70px 0; }
.bookmark-section h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); color: var(--ink); line-height: 1.2; }
.bookmark-section .nav-pills { gap: 12px; }
.bookmark-section .nav-pills .nav-link {
    font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); background: var(--paper-tint); border-radius: 999px; padding: 10px 24px; border: none;
}
.bookmark-section .nav-pills .nav-link.active { background: var(--brand) !important; color: #fff !important; }

/* ==========================================================================
   Stories listing page
   ========================================================================== */
.all-stories-section { padding: 70px 0; }
.all-stories-section .stories-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 42px); color: var(--ink); text-align: center; margin-bottom: 40px; }
.all-stories-section .story-card {
    position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; cursor: pointer;
    box-shadow: var(--shadow); border: 3px solid var(--brand);
}
.all-stories-section .story-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.all-stories-section .story-card .post-content {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 10px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 100%);
    color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-lightbox, .story-share-modal { background: rgba(12,43,75,.94); }
.story-share-content { background: var(--paper); border-radius: var(--radius-lg, 16px); }
.share-option { font-family: var(--font-body); }

/* ==========================================================================
   Product listing page
   ========================================================================== */
.product_list { padding: 70px 0; }
.product_list .stories-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 42px); color: var(--ink); text-align: center; margin-bottom: 40px; }
.product-list-col { display: flex; flex-wrap: wrap; gap: 24px; }
.product-list-col .item { width: calc(25% - 18px); }
.product-list-col .image-div { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.product-list-col .product-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.product-list-col .product-card h6 { font-family: var(--font-display); font-size: 15px; font-weight: 400; color: var(--ink); margin: 12px 10px 4px; }
.product-list-col .product-price { font-family: var(--font-body); font-weight: 800; color: var(--brand); margin: 0 10px 12px; font-size: 14px; }
.product-list-col .wishlist-icon {
    position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.product_list .pagination { display: flex; justify-content: center; margin-top: 40px; border-radius: var(--radius); overflow: hidden; }
.product_list .pagination .page-numbers {
    font-family: var(--font-body); font-size: 13px; padding: 10px 16px; color: var(--ink); border-color: var(--line) !important;
}
.product_list .pagination .page-numbers.current { background: var(--brand); color: #fff; }
@media (max-width: 991.98px) { .product-list-col .item { width: calc(50% - 12px); } }
@media (max-width: 575.98px) { .product-list-col .item { width: 100%; } }

/* ==========================================================================
   Single post templates (single-post-template.php / 2 / 3) -- all three
   share almost identical markup/class names, so this one block styles
   all of them.
   ========================================================================== */
.post-featured-image { width: 100%; max-height: 640px; overflow: hidden; }
.post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-credit { font-family: var(--font-body); font-size: 11px; color: var(--muted); text-align: right; padding: 6px var(--gutter, 20px) 0; margin: 0; }

.cat-wrap .categor-text { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0; }
.category-date .line { color: rgba(255,255,255,.4); margin: 0 4px; }

div[style*="background-color: #000"] { background: var(--ink) !important; padding: 40px 0; }
div[style*="background-color: #000"] .category-date .date-text,
div[style*="background-color: #000"] .cat-wrap .categor-text { color: rgba(255,255,255,.7); }
div[style*="background-color: #000"] .post-content.text-center .post-title {
    color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.5vw, 42px);
    margin: 20px 0;
}
div[style*="background-color: #000"] .post-content.text-center p { color: rgba(255,255,255,.75); font-family: var(--font-body); font-size: 15px; line-height: 1.7; }
.author-name, .published-date {
    display: inline-block; font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.55); margin: 4px 8px 0 0;
}
.bookmark-share { display: flex; align-items: center; gap: 14px; }

/* Single-post hero: reuses the homepage .hero/.hero__items/.hero__text
   pattern (full-bleed image, gradient overlay, left-aligned text) instead of
   the old centered-white-text-on-black banner that dumped the whole post
   body into the hero itself. */
.post-hero .hero__items { min-height: min(60vh, 560px); align-items: flex-end; padding-bottom: 48px; }
.post-hero .hero__text h1 {
    color: #fff; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(28px, 4vw, 46px); line-height: 1.2; margin: 0 0 20px;
}
.post-hero .hero__meta { display: flex; align-items: center; gap: 14px; }
.post-body { padding: 56px 0; }
.post-body .image-credit { text-align: left; padding: 0 0 12px; }
.post-body .post-content { font-family: var(--font-body); font-size: 16px; line-height: 1.8; color: var(--ink); }
.post-body .post-content p { margin-bottom: 20px; }
.post-body .post-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body .author-name, .post-body .published-date { color: var(--muted); margin: 4px 12px 0 0; }

.discription-section { padding: 50px 0; }
.discription-section .content { font-family: var(--font-body); font-size: 15px; line-height: 1.8; color: var(--ink-soft, #333); }

/* Every product-listing variant across the three single-post-templates
   (.product-card, .product, .product-slider .content) shares one "editorial"
   card design ported from the Male Fashion reference's .blog__item pattern:
   a fixed-height image with a white text panel (.product-card__body, or
   .image-text which now doubles as that panel) that overlaps its bottom
   edge, a soft shadow that deepens on hover, and the price rendered as a
   small underline-accent link instead of a plain price line. */
.product-section, .product-section1, .product-section2, .product-section3, .product-section4, .product-section1-template3 { padding: 56px 0; }
.product-section .row, .product-section1 .row, .product-section2 .row, .product-section3 .row, .product-section1-template3 .row {
    row-gap: 44px;
}
.product-section .main-text, .product-section1 .main-text {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: var(--ink);
    margin-bottom: 12px;
}
.product-section .main-text::after, .product-section1 .main-text::after {
    content: ""; display: block; width: 42px; height: 3px; background: var(--brand); margin-top: 14px;
}

.product-card, .product-section2 .product, .product-section3 .product, .product-slider .content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    margin-bottom: 0 !important; /* override the old inline margin-bottom:32px */
}
.product-card a, .product-section2 .product a, .product-section3 .product a, .product-slider .content a {
    color: inherit; text-decoration: none;
}
.product-card img, .product-section2 .product .product-img, .product-section3 .product .product-img, .product-slider .content img {
    width: 100%; height: 380px; object-fit: cover; display: block; background: var(--paper-tint);
    border-radius: var(--radius) var(--radius) 0 0;
}
@media (max-width: 767px) {
    .product-card img, .product-section2 .product .product-img, .product-section3 .product .product-img, .product-slider .content img { height: 260px; }
}
.product-section2 .product .product-img, .product-section3 .product .product-img { position: relative; z-index: 0; }
.product-section2 .product > a:not(.wishlist-icon), .product-section3 .product > a:not(.wishlist-icon) {
    display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none;
}

/* The overlapping white panel -- pulled up over the image's bottom edge so
   the card reads as one connected object instead of "image + caption". */
.product-card__body, .image-text.product-card__body {
    position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1;
    background: var(--paper);
    margin: 0 18px;
    margin-top: -32px;
    padding: 18px 18px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow .3s ease, transform .3s ease;
}
.product-card:hover .product-card__body, .product-section2 .product:hover .product-card__body, .product-section3 .product:hover .product-card__body, .product-slider .content:hover .product-card__body {
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.16));
    transform: translateY(-3px);
}

.product-card__body h6, .product-card__body .product-name {
    font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1.35; color: var(--ink);
    margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card:hover .product-card__body h6,
.product-section2 .product:hover .product-card__body .product-name, .product-section3 .product:hover .product-card__body .product-name,
.product-slider .content:hover .product-card__body .product-name { color: var(--brand); }
.product-card__body .product-description, .product-card__body .company {
    order: -1; /* meta line reads above the title, like the reference's date line */
    font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin: 0 0 8px;
}
.product-card__body .product-price, .product-card__body .price {
    display: inline-block; align-self: flex-start;
    font-family: var(--font-body); font-weight: 800; font-size: 14px; color: var(--brand);
    margin-top: auto; padding-top: 2px; position: relative;
}
.product-card__body .product-price::after, .product-card__body .price::after {
    content: ""; display: block; width: 22px; height: 2px; background: var(--brand); margin-top: 6px;
    transition: width .3s ease;
}
.product-card:hover .product-card__body .product-price::after,
.product-section2 .product:hover .product-card__body .price::after, .product-section3 .product:hover .product-card__body .price::after,
.product-slider .content:hover .product-card__body .price::after { width: 100%; }

.wishlist-icon, .cbxwpbkmarktrig {
    position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50% !important;
    background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.wishlist-icon i { color: var(--brand); }
/* The WLFMC wishlist plugin manages its own internal button markup/position
   (wlfmc-top-of-image etc.) -- only lift it above the new overlapping panel,
   don't fight its own layout. */
.wlfmc-add-to-wishlist { z-index: 2; }

/* Product slider (Slick-powered, class="product-slider" id="product-slider") */
.product-slider { margin: 0 -10px; }
.product-slider .item { padding: 0 10px 32px; }
.product-slider .content { text-align: left; }

.related-post-section { padding: 60px 0; }
.related-post-section .title { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); color: var(--ink); text-align: center; margin-bottom: 36px; }
.related-post-section .grid-content { border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.related-post-section .grid-content:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,.16)); }
.related-post-section .grid-image { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.related-post-section .post-content { padding: 16px; }
.next-posts { display: flex; justify-content: space-between; padding: 20px 0; font-family: var(--font-body); font-size: 13px; }