/*
 * Theme Extra Styles
 * WordPress-specific additions on top of the HTML source CSS.
 */

/* ══════════════════════════════════════════════════════════════════════════
   BENGALI ALPANA MOTIF — padma / bindu lattice over white
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --motif-tile: url("../images/motif-seamless.svg");
    --motif-size: 240px 240px;
}

html {
    background-color: #ffffff;
    scrollbar-gutter: stable;
}

body {
    padding-top: 0;
    background-color: #ffffff;
    background-image: var(--motif-tile);
    background-repeat: repeat;
    background-size: var(--motif-size);
    background-position: top center;
}

/* Warm cream wash — motif from body shows through softly */
.fade-bg {
    background-color: rgba(247, 241, 233, 0.88) !important;
    background-image: none !important;
}

.collecttion-card,
.product-card,
.blog-card {
    background-color: rgba(255, 255, 255, 0.94);
}

/* Collection cards — title below image (no overlap with jewellery photo) */
.collecttion-card > a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

.collecttion-card .collection-title {
    position: static;
    bottom: auto;
    margin: 0;
    padding: 14px 12px 16px;
    text-align: center;
    background: #ffffff;
}

.collecttion-card .collection-title h4 {
    color: var(--color-secondary);
    font-family: var(--ff-base);
    font-size: var(--f-size-S);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    margin: 0;
}

/* Image only — no dark gradient overlay (title is no longer on photo) */
.collecttion-card .collection-top-layer::after {
    opacity: 0 !important;
}

.collecttion-card:hover .collection-top-layer::after {
    opacity: 0 !important;
}

/* Opaque sections hide the motif intentionally */
.hero-slider-section,
.featured-section,
.inner-page-banner,
.main-footer {
    background-image: none;
}

/*
 * Inner-page header only: solid cream-white — no motif bleed.
 * Sticky/scrolled homepage header keeps its transparent blur.
 */
.single-page .main-header:not(.fixed),
.main-header.relative_header {
    background-color: #fffaf6 !important;
    background-image: none !important;
}

/* Ensure header works like original HTML */
.main-header {
    /* Original CSS handles this - don't override */
}

/* ── Single product hero copy ────────────────────────────────────────────── */
.product-hero-section .info-image .section-title.product-title-box {
    margin-bottom: 28px;
}

.product-hero-section .info-image .section-title .product-category-line {
    font-size: var(--f-size-Body);
    font-weight: var(--fw-regular);
    color: var(--color-secondary);
    text-transform: none;
    margin: 10px 0 0;
    line-height: 1.5;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.product-hero-section .product-detail-copy {
    max-width: 440px;
    margin: 0 auto 32px;
    text-align: center;
}

.product-hero-section .product-short-desc {
    font-size: 13px;
    color: #5a5a5a;
    margin: 0 0 10px;
    line-height: 1.75;
    text-transform: none;
    letter-spacing: 0.01em;
}

.product-hero-section .product-meta--weight {
    font-size: 12px;
    color: #888;
    margin: 0;
}

/* ── Inner page banner ───────────────────────────────────────────────────── */
.inner-page-banner {
    padding: 120px 0 60px;
    background: var(--color-secondary);
}
.inner-page-banner h1 {
    color: var(--color-white);
}

/* Category thumbnail as banner background (category / sub-category archive pages) */
.inner-page-banner--photo {
    background: var(--color-secondary);
    min-height: 380px;
    display: flex;
    align-items: center;
}
.inner-page-banner--photo .container { position: relative; z-index: 1; width: 100%; }
.inner-page-banner--photo .banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.inner-page-banner--photo .banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.inner-page-banner--photo .banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(1, 53, 75, .45);
}
.inner-page-banner--photo .title-design p { color: rgba(255, 255, 255, .85); }

@media (max-width: 767px) {
    .inner-page-banner--photo { min-height: 280px; }
}

/* ── Product card (archive / single) ────────────────────────────────────── */
.product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transition: var(--transition-common);
}
.product-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    transform: translateY(-4px);
}
.product-card-image {
    padding-top: 110%;
}
.product-card-image img {
    transition: var(--transition-common);
}
.product-card-image .hover-image {
    opacity: 0;
    z-index: 2;
}
.product-card:hover .hover-image {
    opacity: 1;
}
.product-info {
    padding: 16px;
}
.product-title {
    font-size: var(--f-size-S);
    margin-bottom: 8px;
}
.product-meta {
    font-size: var(--f-size-ES);
    margin-bottom: 6px;
}
.card-meta-highlight {
    font-weight: var(--fw-bold);
    color: var(--color-accent);
}
.approx-txt {
    font-size: 12px;
    color: #888;
}

/* ── Category tabs ───────────────────────────────────────────────────────── */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.category-tabs .btn.active {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Below wrap-friendly widths, .btn's own `overflow:hidden` clips flex items
   that shrink instead of wrapping — labels were getting cut off mid-word.
   Turn the row into a horizontally-scrollable chip strip instead (a common,
   native-feeling pattern for category filters on mobile). */
@media only screen and ( max-width: 767px ) {
    .category-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0 -20px 15px;
    padding: 0 20px 6px;
}
    .category-tabs::-webkit-scrollbar {
        display: none;
    }
    .category-tabs .btn,
    .category-tabs a.btn {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination-wrap .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border: 1px solid var(--color-accent);
    border-radius: 6px;
    color: var(--color-accent);
    transition: var(--transition-common);
}
.pagination-wrap .page-numbers.current,
.pagination-wrap .page-numbers:hover {
    background: var(--color-accent);
    color: #fff;
}

/* ── Single product ──────────────────────────────────────────────────────── */
.hero-product-card-image {
    padding-top: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.product-details-meta p {
    border-bottom: 1px solid #f0e8e0;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.sale-price {
    text-decoration: line-through;
    color: #999;
    font-size: var(--f-size-ES);
}
.badge-featured {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 10px;
}
.segment-label {
    font-family: var(--ff-title);
    font-size: var(--f-size-M);
    color: var(--color-accent);
    margin-bottom: 5px;
}
.availability-in_stock  { color: #2e7d32; }
.availability-on_order  { color: #e65100; }
.availability-out_of_stock { color: #c62828; }

/* ── Search form ─────────────────────────────────────────────────────────── */
.search-form { margin-top: 20px; }
.search-form .search-field {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    color: #fff !important;
    border-radius: 6px 0 0 6px;
    height: 44px !important;
    padding: 0 14px !important;
}
.search-form .search-submit {
    background: var(--color-accent);
    color: #fff;
    border: 0;
    padding: 0 18px;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    height: 44px;
    transition: var(--transition-common);
}
.search-form .search-submit:hover { background: var(--color-secondary); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb-cat a { color: rgba(255,255,255,.7); }
.breadcrumb-cat a:hover { color: #fff; }

/* ── Blog card ───────────────────────────────────────────────────────────── */
.blog-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.blog-card-image { padding-top: 60%; }
.blog-card-info { padding: 20px; }
.blog-card-info h3 { font-size: var(--f-size-S); margin-bottom: 10px; }
.blog-card-info h3 a { color: var(--color-secondary); }
.blog-card-info h3 a:hover { color: var(--color-accent); }

/* ── Mobile logo ─────────────────────────────────────────────────────────── */
.mobile-logo { display: none; }
@media (max-width: 768px) {
    .desktop-logo { display: none; }
    .mobile-logo  { display: block; }
}

/* ── CTA section overlay ─────────────────────────────────────────────────── */
.featured-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1;
}
.featured-section .overlay-content { z-index: 3; }
.featured-section .info-box h2,
.featured-section .info-box h5,
.featured-section .info-box p { color: #333; }
.mw-850 { max-width: 850px; }

/* ── Row gap utility ─────────────────────────────────────────────────────── */
.row-gap-24 { row-gap: 24px; }

/* ── HEADER STYLE FIXES ──────────────────────────────────────────────────── */

/* Ensure menu links are UPPERCASE to match the original HTML styling */
.main-menu ul li a {
    text-transform: uppercase !important;
}

/* Ensure the dropdown arrows are visible (black/dark color) on subpages when header is NOT sticky/fixed */
.single-page .main-header:not(.fixed) .main-menu ul li.menu-item-has-children > a:after {
    border-color: var(--color-black) !important;
}

/* Fix margin typo in main-menu wrapper */
.main-header .main-menu {
    margin-right: 15px !important;
}

/* Prevent blank hover card on products without hover images */
.product-card:hover img {
    opacity: 1 !important;
}
.product-card.has-hover-image:hover img:not(.hover-image) {
    opacity: 0 !important;
}
.product-card:hover .hover-image {
    opacity: 0;
}
.product-card.has-hover-image:hover .hover-image {
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOP NOW ENQUIRY POPUP
   ══════════════════════════════════════════════════════════════════════════ */
.dhar-enquiry {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
.dhar-enquiry.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.dhar-enquiry__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 0, 4, .62);
    backdrop-filter: blur(4px);
}
.dhar-enquiry__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    padding: 32px 28px 28px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160, 11, 17, .08), transparent 55%),
        #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    text-align: center;
    transform: translateY(18px) scale(.96);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.dhar-enquiry.is-open .dhar-enquiry__panel {
    transform: translateY(0) scale(1);
}
.dhar-enquiry__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f4f1ef;
    color: #3e3e3e;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.dhar-enquiry__close:hover {
    background: var(--color-accent);
    color: #fff;
}
.dhar-enquiry__preview {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(160, 11, 17, .2);
    box-shadow: 0 8px 24px rgba(160, 11, 17, .15);
    background: #f8f4f0;
}
.dhar-enquiry__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dhar-enquiry__eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.dhar-enquiry__title {
    margin: 0 0 8px;
    font-size: clamp(18px, 4vw, 22px);
    color: var(--color-secondary);
    line-height: 1.3;
}
.dhar-enquiry__subtitle {
    margin: 0 0 22px;
    font-size: 14px;
    color: #6b6b6b;
}
.dhar-enquiry__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dhar-enquiry__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    text-align: left;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.dhar-enquiry__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.dhar-enquiry__btn-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dhar-enquiry__btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dhar-enquiry__btn-text strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}
.dhar-enquiry__btn-text small {
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dhar-enquiry__btn--call {
    background: linear-gradient(135deg, #a00b11 0%, #7a0810 100%);
    color: #fff !important;
}
.dhar-enquiry__btn--call .dhar-enquiry__btn-icon {
    background: rgba(255, 255, 255, .18);
}
.dhar-enquiry__btn--whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff !important;
}
.dhar-enquiry__btn--whatsapp .dhar-enquiry__btn-icon {
    background: rgba(255, 255, 255, .18);
}
.product-enquiry-wrap {
    margin-top: 20px;
}
body.dhar-enquiry-open {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   RECENTLY BOUGHT — left slide-in social proof
   ══════════════════════════════════════════════════════════════════════════ */
.dhar-rb {
    --dhar-rb-w: min(340px, calc(100vw - 28px));
    position: fixed;
    left: 18px;
    bottom: 22px;
    z-index: 99990;
    width: var(--dhar-rb-w);
    max-width: var(--dhar-rb-w);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(252, 248, 244, .98) 100%);
    box-shadow:
        0 18px 40px rgba(20, 0, 4, .18),
        0 2px 0 rgba(160, 11, 17, .08),
        inset 0 0 0 1px rgba(160, 11, 17, .08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(calc(-100% - 28px), 0, 0);
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        opacity .4s ease,
        visibility .4s ease;
}
.dhar-rb.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}
.dhar-rb__close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 2;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a8a8a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
.dhar-rb__close:hover {
    color: var(--color-accent);
    background: rgba(160, 11, 17, .08);
}
.dhar-rb__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 34px 14px 12px;
    color: inherit !important;
    text-decoration: none !important;
}
.dhar-rb__media {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3ece6;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.dhar-rb__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dhar-rb__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}
.dhar-rb__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.dhar-rb__buyer {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dhar-rb__product {
    font-size: 13px;
    color: #555;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dhar-rb__meta {
    margin-top: 2px;
    font-size: 11px;
    color: #9a9a9a;
    letter-spacing: .02em;
}

@media (max-width: 575.98px) {
    .dhar-rb {
        left: 10px;
        right: 10px;
        bottom: 14px;
        width: auto;
        max-width: none;
    }
    .dhar-rb__media {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }
    .dhar-rb__buyer,
    .dhar-rb__product {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dhar-rb {
        display: none !important;
    }
}