/* ==========================================================================
   Storefront styles – layout and typography follow the reference design.
   Colours: Nandini Furnishings brand magenta #EC008C as the only accent,
   on white / light neutral surfaces. Hover states go to ink, never to
   another pink. Brand overrides are collected at the end of this file.
   ========================================================================== */
:root {
    --brand: #EC008C;
    --brand-bg: #FFF0F8;
    --black: #111111;
    --ink: #111111;
    --text: #111111;
    --muted: #555555;
    --soft: #8a8a8a;
    --line: #ececec;
    --beige: #F8F8F8;
    --beige-2: #FFF0F8;
    --img-bg: #F8F8F8;
    --green: #2fb53f;
    --sale: #EC008C;
    --container: 1070px;
    --font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
    --ease: cubic-bezier(.25, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--black); }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 15px; }
.container.narrow { max-width: 860px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.ic { flex: none; }
body.no-scroll { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn-dark, .btn-outline, .btn-light {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 10px 28px;
    font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 2px; transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn-dark { background: #000; color: #fff; border: 1px solid #000; }
.btn-dark:hover { background: #333; border-color: #333; }
.btn-dark[disabled] { opacity: .45; cursor: not-allowed; }
.btn-outline { border: 1px solid #000; color: #000; background: #fff; }
.btn-outline:hover { background: #000; color: #fff; }
.btn-light { background: #fff; color: #000; border: 1px solid #fff; font-weight: 600; border-radius: 4px; }
.btn-light:hover { background: #000; color: #fff; border-color: #000; }
.btn-sm { min-height: 34px; padding: 6px 16px; font-size: 12px; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #000; }

/* ---------- Text logo (used until an image logo is uploaded) ---------- */
.text-logo { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; color: #000; }
.text-logo-name { font-family: var(--serif); font-size: 40px; font-weight: 400; letter-spacing: -1px; text-transform: uppercase; }
.text-logo-tag { font-family: var(--font); font-size: 10px; font-weight: 700; margin-top: 2px; letter-spacing: .2px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: relative; z-index: 100; background: #fff; color: #000; transition: background .3s, box-shadow .3s; }
.page-home .site-header.is-transparent { position: absolute; top: 0; left: 0; right: 0; background: transparent; color: #fff; }
.site-header.is-transparent .text-logo { color: #fff; }

.header-top-inner { display: flex; align-items: center; justify-content: space-between; height: 100px; transition: height .3s var(--ease); }
.logo { display: inline-flex; align-items: center; }
.logo img { max-height: 58px; width: auto; }
.logo .logo-light { display: none; }
.site-header.is-transparent .logo .logo-dark { display: none; }
.site-header.is-transparent .logo .logo-light { display: inline-flex; }
.nav-toggle { display: none; }

.header-actions { display: flex; align-items: center; gap: 26px; }
.hicon { position: relative; display: inline-flex; align-items: center; }
.hicon .badge {
    position: absolute; top: -8px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #000; color: #fff; font-size: 10px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.site-header.is-transparent .hicon .badge { background: #000; color: #fff; }
.top-link { font-size: 15px; font-weight: 600; white-space: nowrap; }
.top-link:hover { opacity: .7; }

.account-menu > a { display: inline-flex; }
.account-dropdown {
    position: absolute; top: calc(100% + 14px); right: -20px; min-width: 190px; padding: 10px 0;
    background: #fff; color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s var(--ease); z-index: 20;
}
.account-dropdown::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.account-menu:hover .account-dropdown { opacity: 1; visibility: visible; transform: none; }
.account-dropdown a, .account-dropdown .hello { display: block; padding: 8px 20px; font-size: 14px; font-weight: 500; }
.account-dropdown .hello { color: var(--soft); font-size: 13px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-dropdown a:hover { background: var(--beige); color: #000; }

.header-nav { border-top: 1px solid rgba(0, 0, 0, .55); border-bottom: 1px solid rgba(0, 0, 0, .55); }
.site-header.is-transparent .header-nav { border-color: rgba(255, 255, 255, .55); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 46px; }
.nav-level0 { display: flex; align-items: center; height: 100%; }
.nav-level0 li { height: 100%; display: flex; align-items: center; }
.nav-level0 a { display: block; padding: 8px 20px; font-size: 15px; font-weight: 600; line-height: 1.6; transition: background .2s, color .2s; }
.nav-level0 li.is-active a, .nav-level0 li.is-hover a { background: #000; color: #fff; }
.nav-level0 li:first-child a { margin-left: 0; }
.search-trigger { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }

.header-sub { position: relative; box-shadow: 0 5px 6px -6px #d1d1d1; }
.site-header.is-transparent .header-sub { box-shadow: none; }
.sub-wrap { position: relative; min-height: 58px; }
.nav-level1 { display: none; align-items: center; height: 58px; padding-left: 0; }
.nav-level1.is-shown { display: flex; }
.nav-level1 > li { height: 100%; display: flex; align-items: center; }
.nav-level1 > li > a { display: block; padding: 8px 14px; font-size: 15px; font-weight: 600; position: relative; }
.nav-level1 > li > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .25s var(--ease); }
.nav-level1 > li:hover > a::after { transform: scaleX(1); }

.mega {
    position: absolute; left: 15px; right: 15px; top: 100%;
    background: #fff; color: var(--text); box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .22s var(--ease); z-index: 30;
}
.nav-level1 > li.has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; }
.mega-inner { display: flex; gap: 46px; padding: 34px 36px; }
.mega-col h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; color: #000; }
.mega-col li a { display: block; font-size: 14px; line-height: 2.1; color: #555; transition: color .15s, padding .15s; }
.mega-col li a:hover { color: #000; padding-left: 4px; }
.mega-designs ul { columns: 2; column-gap: 34px; }
.mega-image { margin-left: auto; width: 330px; flex: none; overflow: hidden; }
.mega-image img { width: 100%; height: 230px; object-fit: cover; transition: transform .6s var(--ease); }
.mega-image:hover img { transform: scale(1.04); }

/* Sticky compact header */
.site-header.is-sticky { position: fixed !important; top: 0; left: 0; right: 0; background: #fff !important; color: #000 !important; box-shadow: 0 2px 14px rgba(0, 0, 0, .08); animation: dropIn .3s var(--ease); }
.site-header.is-sticky .header-top-inner { height: 64px; }
.site-header.is-sticky .text-logo { color: #000; }
.site-header.is-sticky .text-logo-name { font-size: 30px; }
.site-header.is-sticky .logo img { max-height: 42px; }
.site-header.is-sticky .logo .logo-dark { display: inline-flex; }
.site-header.is-sticky .logo .logo-light { display: none; }
.site-header.is-sticky .header-nav { border-color: rgba(0, 0, 0, .55); }
.site-header.is-sticky .header-sub { box-shadow: 0 5px 6px -6px #d1d1d1; }
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: none; } }
.header-spacer { display: none; }

/* ==========================================================================
   Home
   ========================================================================== */
.hero { position: relative; height: min(56.25vw, 100vh); min-height: 520px; overflow: hidden; background: #e9e1d6; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
/* keeps the white transparent-header text readable on light media */
.hero-slide::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 240px; background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); z-index: 1; pointer-events: none; }
.hero-caption { z-index: 2; }
.hero-media { width: 100%; height: 100%; object-fit: cover; }
.hero picture { display: block; height: 100%; }
.hero-mobile { display: none; }
.hero-caption { position: absolute; left: 0; right: 0; bottom: 18%; }
.btn-hero { background: #1e1e1e; border-color: #1e1e1e; padding: 14px 30px; font-weight: 600; font-size: 14px; }
.hero-sound { position: absolute; right: 22px; bottom: 26px; width: 48px; height: 48px; border-radius: 50%; background: rgba(60, 50, 40, .75); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 3; }
.hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .2); }
.hero-dots button.is-active { background: #000; }

.section { padding-top: 72px; }
.cheading { font-size: 34px; font-weight: 700; text-transform: uppercase; text-align: center; color: #000; letter-spacing: .2px; margin-bottom: 30px; line-height: 1.15; }

.home-banner { position: relative; }
.home-banner img { width: 100%; }
.home-banner-btn { position: absolute; left: 3.2%; bottom: 12%; padding: 10px 28px; }

/* Category carousel with faded edges */
.cat-carousel { position: relative; }
.cat-track {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 0 max(15px, calc((100% - var(--container)) / 2 + 15px));
    scroll-padding-inline: max(15px, calc((100% - var(--container)) / 2 + 15px));
    scrollbar-width: none;
}
.cat-track::-webkit-scrollbar { display: none; }
.cat-carousel::before, .cat-carousel::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: max(0px, calc((100% - var(--container)) / 2 + 8px));
    background: rgba(255, 255, 255, .55); z-index: 2; pointer-events: none;
}
.cat-carousel::before { left: 0; }
.cat-carousel::after { right: 0; }
.cat-card { position: relative; flex: 0 0 318px; aspect-ratio: 3 / 4; scroll-snap-align: start; overflow: hidden; background: var(--img-bg); border-radius: 2px; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat-card:hover img { transform: scale(1.05); }
.cat-card-box {
    position: absolute; left: 9px; right: 9px; bottom: 9px; background: #fff;
    display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px;
}
.cat-sub { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #333; font-weight: 500; }
.cat-title { display: block; font-size: 22px; font-weight: 500; color: #000; line-height: 1.25; }
.cat-arrow { color: #999; transition: transform .25s, color .25s; }
.cat-card:hover .cat-arrow { color: #000; transform: translateX(4px); }
.car-nav { position: absolute; top: 40%; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #000; }
.car-prev { left: max(4px, calc((100% - var(--container)) / 2 - 36px)); }
.car-next { right: max(4px, calc((100% - var(--container)) / 2 - 36px)); }

.na-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.na-showcase { display: flex; flex-direction: column; }
.showcase-slider { position: relative; }
.showcase-slide { display: none; }
.showcase-slide.is-active { display: block; animation: fadeIn .6s ease; }
.showcase-img { display: block; aspect-ratio: 500 / 770; overflow: hidden; background: var(--img-bg); }
.showcase-img img { width: 100%; height: 100%; object-fit: cover; }
.showcase-name { font-size: 15px; font-weight: 600; color: #000; margin: 14px 0 0; }
.showcase-collection { font-size: 14px; color: #555; margin: 0 0 16px; }
.na-showcase .btn-dark { background: #222; letter-spacing: 1.2px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Product grid & card
   ========================================================================== */
.product-grid { display: grid; gap: 50px 20px; }
.product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: 50px 22px; }
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }

.pcard { position: relative; min-width: 0; }
.pcard-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--img-bg); border-radius: 3px; }
.pcard-img, .pcard-img img { display: block; width: 100%; height: 100%; }
.pcard-img img { object-fit: cover; transition: opacity .45s ease, transform .9s var(--ease); }
.pcard-img .img-hover { position: absolute; inset: 0; opacity: 0; }
.pcard:hover .pcard-img.has-hover .img-hover { opacity: 1; }
.pcard:hover .pcard-img:not(.has-hover) .img-main { transform: scale(1.05); }
.label-sale { position: absolute; top: 8px; left: 8px; background: var(--sale); color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 3px 7px; line-height: 1.2; z-index: 2; }
.label-oos { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 10px; text-transform: uppercase; padding: 3px 7px; z-index: 2; }
.label-sale + .label-oos { top: 30px; }
.pcard-actions { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.pa-btn { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); opacity: 0; transform: translateX(8px); transition: all .25s var(--ease); }
.pa-btn span { display: none; }
.pcard:hover .pa-btn, .pa-btn.is-active { opacity: 1; transform: none; }
.pa-btn:hover { background: #000; color: #fff; }
.pa-btn.is-active { color: var(--sale); }
.pa-btn.is-active .ic-heart, .icon-btn.is-active .ic-heart { fill: currentColor; }
.pcard:hover .pa-btn:nth-child(2) { transition-delay: .04s; }
.pcard:hover .pa-btn:nth-child(3) { transition-delay: .08s; }
.pcard-cart { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: rgba(0, 0, 0, .88); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px; transform: translateY(100%); transition: transform .3s var(--ease); z-index: 2; }
.pcard:hover .pcard-cart { transform: none; }
.pcard-cart:hover { background: #000; }

.pcard-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; margin-top: 16px; align-items: baseline; }
.pcard-name { font-size: 15px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.pcard-price { font-size: 15px; font-weight: 700; color: #000; text-align: right; white-space: nowrap; }
.pcard-old { font-size: 13px; color: var(--soft); text-decoration: line-through; text-align: right; white-space: nowrap; }
.pcard-collection { font-size: 14px; color: #555; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-type { grid-column: 1 / -1; font-size: 11px; font-weight: 500; color: #555; text-transform: uppercase; letter-spacing: 1.6px; margin-top: 12px; }
.page-listing .pcard-collection, .wishlist-page .pcard-collection { text-transform: uppercase; }

/* ==========================================================================
   Listing
   ========================================================================== */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 22px 0 38px; font-size: 12px; color: var(--soft); }
.breadcrumbs .sep { margin: 0 10px; color: #bbb; }
.breadcrumbs a:hover { color: #000; }
.breadcrumbs strong { font-weight: 500; color: #333; text-transform: uppercase; }
.listing-banner { margin-bottom: 36px; }
.listing-banner img { width: 100%; }
.listing-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 46px; align-items: start; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.filters-head h3 { font-size: 22px; font-weight: 500; color: #000; }
.filters-close { display: none; }
.filter-group { border-top: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 1px solid var(--line); }
.filter-title { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 13px 0; font-size: 17px; font-weight: 500; color: #555; text-align: left; }
.filter-title .fi-minus { display: none; }
.filter-group.is-open .fi-plus { display: none; }
.filter-group.is-open .fi-minus { display: inline-flex; }
.filter-options { display: none; padding: 0 0 14px; max-height: 260px; overflow-y: auto; }
.filter-group.is-open .filter-options { display: block; }
.check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; color: #444; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: #000; margin: 0; flex: none; }
.check-count { color: var(--soft); font-size: 12px; margin-left: auto; }
.swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); flex: none; display: inline-block; }

.listing-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.listing-title { font-size: 34px; font-weight: 700; text-transform: uppercase; color: #333; line-height: 1.1; }
.item-count { font-size: 14px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.listing-tools { display: flex; gap: 10px; align-items: center; }
.btn-filter { display: none; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--beige); font-weight: 500; }
.sort-box { position: relative; display: inline-flex; align-items: center; background: var(--beige); height: 36px; min-width: 168px; }
.sort-box select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 100%; width: 100%; padding: 0 32px 0 10px; font-size: 13px; color: #333; cursor: pointer; outline: none; }
.sort-box .ic { position: absolute; right: 10px; pointer-events: none; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--beige-2); font-size: 12px; font-weight: 500; }
.chip:hover { background: #e4dece; }
.clear-all { font-size: 12px; text-decoration: underline; margin-left: 6px; }
.listing-intro { margin-bottom: 26px; }
.load-more-wrap { text-align: center; margin-top: 50px; }
.load-more-wrap .muted { font-size: 13px; margin-bottom: 12px; }
.load-more-wrap .btn-outline.is-loading { opacity: .5; pointer-events: none; }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state .ic { margin: 0 auto 16px; color: #bbb; }
.empty-state h3 { font-size: 22px; margin-bottom: 8px; }
.empty-state > .btn-dark { margin-top: 14px; }
.empty-state.small { padding: 40px 0; }

/* ==========================================================================
   Product page
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 70px; align-items: start; padding-top: 40px; }
.pdp-gallery { display: flex; gap: 8px; }
.pdp-thumbs-wrap { width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 518px; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb { width: 84px; aspect-ratio: 84 / 105; flex: none; border: 1px solid transparent; opacity: .75; transition: opacity .2s, border-color .2s; background: var(--img-bg); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.is-active, .pdp-thumb:hover { opacity: 1; border-color: #000; }
.thumbs-down { padding: 4px; color: #777; }
.pdp-main-wrap { flex: 1; min-width: 0; }
.pdp-main { position: relative; aspect-ratio: 402 / 518; overflow: hidden; background: var(--img-bg); cursor: zoom-in; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s ease-out; }
.pdp-main.zooming img { transform: scale(1.9); }
.pdp-under { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 14px; }
.pdp-under .attr-box { border: 0; padding: 0; margin: 0; }
.pdp-icons { display: flex; gap: 18px; padding-top: 18px; }
.icon-btn { display: inline-flex; color: #000; transition: transform .2s; }
.icon-btn:hover { transform: scale(1.1); }
.icon-btn.is-active { color: var(--sale); }

.pdp-title-row { display: flex; justify-content: space-between; gap: 20px; }
.pdp-name { font-size: 30px; font-weight: 700; line-height: 1.15; color: #000; }
.pdp-collection { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; color: #000; margin-top: 6px; letter-spacing: .3px; }
.pdp-price { text-align: right; white-space: nowrap; }
.pdp-price .old { display: block; font-size: 13px; color: var(--soft); text-decoration: line-through; }
.pdp-price .now { font-size: 22px; font-weight: 700; color: #000; }
.pdp-price .unit { font-size: 14px; color: #333; }
.pdp-price .tax { display: block; font-size: 13px; color: #333; margin-top: 2px; }
.pdp-price .stock { display: inline-block; margin-top: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #fff; background: var(--green); }
.pdp-price .stock.out { background: #999; }
.pdp-price.left { text-align: left; margin: 14px 0; }
.pdp-type { font-size: 24px; font-weight: 400; color: #555; margin: 18px 0 22px; }

.pdp-tabs { margin-bottom: 26px; }
.tab-heads { display: flex; gap: 4px; border-bottom: 1px solid #ccc; }
.tab-heads button { padding: 8px 14px; font-size: 14px; font-weight: 500; color: #555; }
.tab-heads button.is-active { background: var(--beige-2); color: #333; }
.tab-body { display: none; padding: 18px 0 4px; font-size: 12px; color: #333; }
.tab-body.is-active { display: block; }
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.spec-cols li { line-height: 1.75; font-size: 12px; letter-spacing: .3px; }
.tab-body.cms { font-size: 14px; }

.attr-box { border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 22px; }
.attr-title { font-size: 14px; font-weight: 600; color: #000; margin-bottom: 10px; }
.attr-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.attr-filter a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #bbb; border-radius: 2px; font-size: 14px; color: #333; transition: border-color .2s; }
.attr-filter a:hover { border-color: #000; }
.attr-filter li.is-active a { border-color: #000; box-shadow: inset 0 0 0 1px #000; color: #000; }

.pdp-qty-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 26px; }
.qty-stepper { display: inline-flex; align-items: center; background: var(--beige); height: 42px; }
.qty-stepper button { width: 34px; height: 100%; display: flex; align-items: center; justify-content: center; color: #333; }
.qty-stepper input { width: 32px; border: 0; background: transparent; text-align: center; font-size: 15px; -moz-appearance: textfield; outline: none; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper.small { height: 36px; }
.qty-stepper.small button { width: 30px; }
.pincode-box { text-align: right; }
.pincode-box label { display: block; font-size: 11px; color: #333; margin-bottom: 6px; }
.pincode-field { display: inline-flex; background: var(--beige); height: 42px; }
.pincode-field input { width: 120px; border: 0; background: transparent; padding: 0 12px; font-size: 14px; outline: none; }
.pincode-field button { padding: 0 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-left: 1px solid #e3ddd2; }
.pincode-msg { font-size: 12px; margin: 6px 0 0; min-height: 18px; }
.pincode-msg.ok { color: var(--green); }
.pincode-msg.err { color: var(--sale); }
.pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oos-note { color: var(--sale); font-size: 13px; margin-top: 10px; }
.pdp-policies { margin-top: 26px; font-size: 13px; color: #333; }
.pdp-policies li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.related { padding-top: 80px; }
.redressal { margin-top: 70px; padding-top: 30px; border-top: 1px solid #ddd; }
.redressal h3 { text-align: center; font-size: 24px; font-weight: 500; margin-bottom: 20px; }
.redressal .cms { font-size: 13px; color: #555; letter-spacing: .5px; }

/* ==========================================================================
   Cart, checkout, account, forms
   ========================================================================== */
.page-heading { font-size: 34px; font-weight: 700; text-transform: uppercase; color: #000; text-align: center; margin-bottom: 30px; }
.page-heading.left { text-align: left; font-size: 28px; margin-bottom: 18px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.cart-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 110px; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-row-head { padding: 0 0 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); border-bottom: 1px solid #ccc; }
.ci-product { display: flex; gap: 16px; align-items: center; }
.ci-product img { width: 84px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); }
.ci-name { display: block; font-size: 15px; font-weight: 600; color: #000; }
.ci-meta { display: block; font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.ci-price s { display: block; font-size: 12px; color: var(--soft); }
.ci-price, .ci-total { font-weight: 600; color: #000; }
.ci-total { text-align: right; }
.continue { margin-top: 20px; }

.order-summary { background: var(--beige); padding: 26px; }
.order-summary h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: 18px; }
.coupon-form { display: flex; background: #fff; margin-bottom: 18px; border: 1px solid #e2dccf; }
.coupon-form input { flex: 1; border: 0; padding: 10px 12px; min-width: 0; outline: none; text-transform: uppercase; }
.coupon-form button { padding: 0 16px; font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; background: #000; color: #fff; }
.coupon-applied { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 10px 12px; margin-bottom: 18px; font-size: 13px; color: var(--green); }
.coupon-applied span { display: inline-flex; align-items: center; gap: 6px; }
.totals { margin: 0 0 18px; }
.totals > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.totals dt { color: #555; }
.totals dd { margin: 0; font-weight: 600; color: #000; }
.totals .save dd { color: var(--green); }
.totals .grand { border-top: 1px solid #ddd6c8; margin-top: 8px; padding-top: 14px; font-size: 16px; }
.totals .grand dt { color: #000; font-weight: 700; }
.ship-note { font-size: 12px; color: var(--muted); margin: -8px 0 14px; }

.form-section { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 26px 0 14px; }
.form-section:first-of-type { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-grid .field { margin-bottom: 0; }
.field span { font-size: 12px; font-weight: 600; color: #333; text-transform: uppercase; letter-spacing: .5px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d9d9d9; background: #fff; padding: 11px 12px; font-size: 14px; border-radius: 2px; outline: none; transition: border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #000; }
.field input:disabled { background: var(--beige); color: var(--muted); }
.field.invalid input, .field.invalid select { border-color: var(--sale); }
.form-error { color: var(--sale); font-size: 13px; min-height: 0; margin: 0 0 12px; display: none; }
.form-error.show { display: block; }
.alert { padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.alert.success { background: #eaf7ec; color: #1d7a2a; }
.alert.error { background: #fdecec; color: #b3261e; }
.login-hint { background: var(--beige); padding: 12px 16px; font-size: 14px; }
.login-hint a { text-decoration: underline; font-weight: 600; }
.saved-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.address-card { display: flex; gap: 10px; padding: 14px; border: 1px solid #ddd; cursor: pointer; font-size: 13px; line-height: 1.6; }
.address-card:has(input:checked) { border-color: #000; }
.payment-options { margin-bottom: 20px; }
.pay-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid #000; cursor: pointer; }
.pay-option small { display: block; color: var(--muted); }
.checkout-items { margin-bottom: 16px; }
.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.co-item img { width: 56px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); }
.co-item strong { display: block; color: #000; }
.co-item span { color: var(--muted); }
.co-item > span { color: #000; font-weight: 600; }

.success-page { text-align: center; padding-top: 50px; }
.success-icon { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
.order-box { text-align: left; background: var(--beige); padding: 20px 24px; margin: 26px 0; }

.auth-page { padding-top: 60px; }
.auth-grid { display: grid; grid-template-columns: 440px 1fr; gap: 60px; align-items: center; max-width: 960px; margin: 0 auto; }
.auth-card { border: 1px solid var(--line); padding: 34px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.auth-tabs a { text-align: center; padding: 12px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tabs a.is-active { color: #000; border-color: #000; }
.auth-switch { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
.auth-switch a { color: #000; text-decoration: underline; }
.auth-benefits { background: var(--beige); padding: 40px; }
.auth-benefits h2 { font-size: 24px; margin-bottom: 20px; }
.auth-benefits li { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 15px; }

.account-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 50px; align-items: start; }
.account-nav { display: flex; flex-direction: column; border: 1px solid var(--line); }
.account-hello { padding: 18px 20px; margin: 0; background: var(--beige); font-size: 13px; color: var(--muted); }
.account-hello strong { display: block; font-size: 17px; color: #000; }
.account-nav a { padding: 13px 20px; border-top: 1px solid var(--line); font-weight: 500; }
.account-nav a.is-active, .account-nav a:hover { background: #000; color: #fff; }
.account-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card-box { border: 1px solid var(--line); padding: 24px; margin-bottom: 20px; position: relative; }
.card-box h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
.sub-heading { font-size: 18px; text-transform: uppercase; margin: 20px 0 12px; }
.order-list { border-top: 1px solid var(--line); }
.order-row { display: grid; grid-template-columns: 1fr auto 120px; gap: 20px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: background .2s; }
.order-row:hover { background: var(--beige); }
.order-row small { display: block; color: var(--muted); font-size: 12px; }
.order-row .amt { text-align: right; font-weight: 700; color: #000; }
.status { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: #eee; color: #555; }
.status-confirmed, .status-processing { background: #fff4dc; color: #8a6100; }
.status-shipped { background: #e3efff; color: #1f5fbf; }
.status-delivered { background: #e5f6e8; color: #1d7a2a; }
.status-cancelled { background: #fdecec; color: #b3261e; }
.order-progress { display: flex; justify-content: space-between; margin: 26px 0; position: relative; counter-reset: s; }
.order-progress::before { content: ''; position: absolute; top: 8px; left: 8%; right: 8%; height: 2px; background: #ddd; }
.order-progress li { position: relative; flex: 1; text-align: center; font-size: 12px; color: var(--soft); text-transform: uppercase; letter-spacing: .5px; }
.order-progress li span { display: block; width: 18px; height: 18px; margin: 0 auto 8px; border-radius: 50%; background: #ddd; position: relative; z-index: 1; }
.order-progress li.done { color: #000; font-weight: 600; }
.order-progress li.done span { background: #000; }
.history li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card-box.address p { font-size: 14px; line-height: 1.7; }
.tag { position: absolute; top: 14px; right: 14px; background: #000; color: #fff; font-size: 10px; padding: 2px 8px; text-transform: uppercase; }

/* CMS / content pages */
.cms { font-size: 15px; line-height: 1.75; color: #444; }
.cms h2, .cms h3 { margin: 1.4em 0 .5em; color: #000; }
.cms ul { list-style: disc; padding-left: 20px; margin-bottom: 1em; }
.cms a { text-decoration: underline; }
.cms img { height: auto; }
.page-banner img { width: 100%; max-height: 420px; object-fit: cover; }
.enquiry-form { margin-top: 30px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 34px 0; text-align: center; }
.steps span { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 10px; }
.steps h4 { font-size: 17px; margin-bottom: 4px; }
.steps p { font-size: 14px; color: var(--muted); }
.store-filter { display: flex; justify-content: center; margin-bottom: 30px; }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.store-card { border: 1px solid var(--line); padding: 24px; transition: box-shadow .25s; }
.store-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .07); }
.store-card h3 { font-size: 17px; margin-bottom: 12px; }
.store-card p { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #444; margin-bottom: 8px; }
.store-card .btn-outline { margin-top: 8px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.blog-card { display: flex; flex-direction: column; }
.blog-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--img-bg); margin-bottom: 14px; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.blog-card:hover .blog-img img { transform: scale(1.05); }
.blog-date { font-size: 12px; color: var(--soft); text-transform: uppercase; letter-spacing: 1px; }
.blog-title { font-size: 19px; font-weight: 600; color: #000; margin: 6px 0; line-height: 1.3; }
.blog-excerpt { font-size: 14px; color: var(--muted); }
.read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.post-hero { width: 100%; margin: 20px 0 30px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.pagination a.is-active, .pagination a:hover { background: #000; color: #fff; border-color: #000; }
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sitemap-grid h3 { font-size: 16px; text-transform: uppercase; margin-bottom: 10px; }
.sitemap-grid ul ul { padding-left: 16px; }
.sitemap-grid li { padding: 3px 0; }
.sitemap-grid a:hover { text-decoration: underline; }
.big404 { font-size: 120px; font-weight: 800; line-height: 1; color: var(--beige-2); margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--taupe); color: #fff; margin-top: 110px; padding: 56px 0 46px; }
.footer-top { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 24px; }
.footer-top[style*="--cols: 5"] { grid-template-columns: 1.45fr 1fr 1.35fr 1.2fr 1.1fr; }
.footer-title { font-size: 15px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 14px; line-height: 1.2; display: flex; justify-content: space-between; }
.footer-title .acc-ic { display: none; }
.footer-links li { font-size: 13px; line-height: 20px; text-transform: uppercase; font-weight: 500; }
.footer-links a { display: inline-flex; align-items: center; gap: 4px; transition: opacity .2s; }
.footer-links a:hover { opacity: .75; }
.footer-call { margin-top: 14px; }
.footer-brand { margin-top: 24px; }
.footer-logo .text-logo { color: #fff; }
.footer-logo .text-logo-name { font-size: 32px; }
.footer-logo img { max-height: 44px; }
.footer-title.follow { margin-top: 26px; }
.socials { display: grid; grid-template-columns: repeat(3, 24px); gap: 4px 0; }
.socials a { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: #fff; color: #555; }
.socials a:hover { color: #000; }
.footer-middle { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 48px; gap: 20px; }
.footer-middle .footer-title { margin-bottom: 14px; }
.newsletter-form { display: flex; width: 425px; max-width: 100%; height: 34px; background: #fff; }
.newsletter-form input { flex: 1; border: 0; padding: 0 18px; font-size: 13px; color: #333; outline: none; min-width: 0; }
.newsletter-form button { width: 104px; border-left: 1px solid #e5e5e5; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #333; }
.newsletter-form button:hover { background: #000; color: #fff; }
.copyright { font-size: 14px; text-transform: uppercase; margin: 0 0 6px; }

/* ==========================================================================
   Overlays: drawers, search, modal, toast
   ========================================================================== */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 900; }
.backdrop.is-shown { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; bottom: 0; width: 400px; max-width: 90vw; background: #fff; z-index: 1000; display: flex; flex-direction: column; transition: transform .35s var(--ease), visibility .35s; color: var(--text); visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer-left { left: 0; transform: translateX(-100%); }
.drawer-right { right: 0; transform: translateX(100%); }
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 18px; text-transform: uppercase; }
.drawer-head .text-logo-name { font-size: 28px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 22px; }
.drawer-foot { padding: 18px 22px; border-top: 1px solid var(--line); background: var(--beige); }
.mnav > li { border-bottom: 1px solid var(--line); }
.mnav-row { display: flex; align-items: center; justify-content: space-between; }
.mnav-row a { flex: 1; padding: 14px 0; font-weight: 600; font-size: 15px; }
.mnav-toggle { padding: 10px; }
.mnav ul { display: none; padding: 0 0 10px 14px; }
.mnav li.is-open > ul { display: block; }
.mnav ul .mnav-row a { padding: 9px 0; font-weight: 500; font-size: 14px; }
.mnav ul ul a { display: block; padding: 6px 0; color: var(--muted); font-size: 14px; }
.mnav-links { padding: 16px 0; }
.mnav-links a { display: block; padding: 8px 0; font-size: 14px; color: var(--muted); }

.mc-item { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.mc-item img { width: 70px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); }
.mc-name { font-weight: 600; color: #000; font-size: 14px; display: block; }
.mc-meta { font-size: 12px; color: var(--muted); display: block; margin: 2px 0 8px; }
.mc-price { font-weight: 700; color: #000; font-size: 14px; }
.mc-remove { color: var(--soft); }
.mc-remove:hover { color: #000; }
.mc-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; color: #000; margin-bottom: 14px; }
.mc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-empty { text-align: center; padding: 60px 0; color: var(--muted); }
.mc-empty .ic { margin: 0 auto 14px; color: #bbb; }

.search-overlay { position: fixed; inset: 0 0 auto 0; background: #fff; z-index: 1001; padding: 50px 0 40px; transform: translateY(-110%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s; max-height: 100vh; overflow-y: auto; color: var(--text); }
.search-overlay.is-open { transform: none; visibility: visible; box-shadow: 0 20px 50px rgba(0, 0, 0, .15); }
.search-close { position: absolute; top: 18px; right: 22px; }
.search-form { display: flex; align-items: center; border-bottom: 2px solid #000; padding: 0 0 8px; }
.search-form input { flex: 1; border: 0; font-size: 46px; font-weight: 300; outline: none; min-width: 0; background: transparent; }
.search-form input::-webkit-search-cancel-button { display: none; }
.search-results { display: grid; grid-template-columns: 1fr 3fr; gap: 30px; margin-top: 26px; }
.search-results:empty { display: none; }
.search-results h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.sr-cats a { display: block; padding: 5px 0; font-weight: 500; }
.sr-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sr-product { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.sr-product img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); }
.sr-product strong { display: block; color: #000; font-size: 14px; }
.sr-product span { font-size: 13px; color: var(--muted); }
.sr-all { grid-column: 1 / -1; text-align: center; }
.sr-all a { text-decoration: underline; font-weight: 600; }

.modal { position: fixed; inset: 0; z-index: 1002; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal-box { position: relative; background: #fff; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 30px; transform: scale(.96); transition: transform .25s var(--ease); }
.modal.is-open .modal-box { transform: none; }
.modal-close { position: absolute; top: 12px; right: 12px; }
.share-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.share-wrap img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); }
.share-content h6 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.share-content h5 { font-size: 20px; margin-bottom: 18px; }
.share-icons { display: flex; gap: 10px; margin-bottom: 18px; }
.share-icons a { width: 40px; height: 40px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; }
.share-icons a:hover { background: #000; color: #fff; border-color: #000; }
.qv-box { max-width: 860px; }
.qv { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.qv-img img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); }
.qv .pdp-name { font-size: 26px; }
.qv .pdp-type { font-size: 18px; margin: 10px 0; }
.qv .pdp-actions { margin-top: 20px; }
.qv-loading { padding: 80px; text-align: center; color: var(--muted); }

.toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #111; color: #fff; padding: 12px 20px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); animation: toastIn .3s var(--ease); pointer-events: auto; display: flex; gap: 12px; align-items: center; }
.toast.error { background: #b3261e; }
.toast a { text-decoration: underline; font-weight: 600; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .nav-level0 a { padding: 8px 14px; }
    .nav-level1 > li > a { padding: 8px 10px; }
    .mega-image { width: 260px; }
    .pdp { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
}

@media (max-width: 991px) {
    .header-top-inner { height: 64px; }
    .nav-toggle { display: inline-flex; margin-right: auto; }
    .logo { position: absolute; left: 50%; transform: translateX(-50%); }
    .text-logo-name { font-size: 28px; }
    .header-top-inner { position: relative; }
    .header-actions { gap: 18px; }
    .top-link, .account-menu { display: none; }
    .header-nav .container { padding-right: 15px; }
    .nav-level0 { overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
    .nav-row { gap: 6px; }
    .logo { max-width: 50vw; }
    .nav-level0::-webkit-scrollbar { display: none; }
    .nav-level0 a { padding: 6px 12px; font-size: 14px; white-space: nowrap; }
    .search-trigger span { display: none; }
    .search-trigger { padding-left: 12px; }
    .header-sub { display: none; }
    .site-header.is-sticky .header-top-inner { height: 56px; }

    .hero { height: auto; aspect-ratio: 4 / 5; min-height: 0; }
    .hero-desktop { display: none; }
    .hero-mobile { display: block; }
    .hero-slide video.hero-desktop:only-of-type { display: block; }
    .page-home .site-header.is-transparent .header-nav { border-color: rgba(255, 255, 255, .4); }

    .section { padding-top: 50px; }
    .cheading { font-size: 26px; margin-bottom: 22px; }
    .cat-card { flex-basis: 70vw; }
    .na-grid { grid-template-columns: 1fr; }
    .product-grid.cols-3, .product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
    .product-grid.cols-2 { gap: 34px 14px; }
    .pa-btn { opacity: 1; transform: none; width: 30px; height: 30px; }
    .pa-quick { display: none; }
    .pcard-cart { transform: none; height: 36px; font-size: 11px; position: static; margin-top: 0; }
    .pcard-name, .pcard-price { font-size: 14px; }

    .listing-layout { grid-template-columns: minmax(0, 1fr); }
    .filters { position: fixed; top: 0; bottom: 0; left: 0; width: 320px; max-width: 88vw; background: #fff; z-index: 1000; padding: 20px; overflow-y: auto; transform: translateX(-100%); transition: transform .35s var(--ease); }
    .filters.is-open { transform: none; }
    .filters-close { display: inline-flex; }
    .btn-filter { display: inline-flex; }
    .listing-head { flex-direction: column; align-items: flex-start; }
    .listing-title { font-size: 26px; }
    .sort-box { min-width: 150px; }

    .pdp { grid-template-columns: 1fr; padding-top: 10px; }
    .pdp-gallery { flex-direction: column-reverse; }
    .pdp-thumbs-wrap { width: 100%; }
    .pdp-thumbs { flex-direction: row; max-height: none; overflow-x: auto; }
    .pdp-thumb { width: 70px; }
    .thumbs-down { display: none; }
    .pdp-name { font-size: 24px; }
    .pdp-type { font-size: 20px; }

    .cart-layout { grid-template-columns: 1fr; }
    .auth-grid { grid-template-columns: 1fr; }
    .auth-benefits { display: none; }
    .account-layout { grid-template-columns: 1fr; gap: 24px; }
    .account-cards, .address-grid { grid-template-columns: 1fr; }
    .store-grid, .blog-grid, .sitemap-grid { grid-template-columns: 1fr 1fr; }

    .site-footer { margin-top: 70px; padding: 30px 0; }
    .footer-top, .footer-top[style] { grid-template-columns: 1fr !important; gap: 0; }
    .header-actions { padding-right: 6px; }
    .footer-col { border-bottom: 1px solid rgba(255, 255, 255, .25); }
    .footer-title { margin: 0; padding: 14px 0; cursor: pointer; }
    .footer-title .acc-ic { display: inline-flex; }
    .footer-links { display: none; padding-bottom: 14px; }
    .footer-col.is-open .footer-links { display: block; }
    .footer-brand { display: none; }
    .footer-col.is-open .footer-brand { display: block; padding-bottom: 14px; }
    .footer-middle { flex-direction: column; align-items: stretch; margin-top: 28px; }
    .newsletter-form { width: 100%; }
    .copyright { text-align: center; }
    .search-form input { font-size: 28px; }
    .search-results { grid-template-columns: 1fr; }
    .sr-products { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .page-heading { font-size: 26px; }
    .cart-row { grid-template-columns: 1fr auto; grid-template-areas: 'p p' 'q t'; }
    .cart-row-head { display: none; }
    .cart-row .ci-product { grid-area: p; }
    .cart-row .ci-price { display: none; }
    .cart-row .qty-stepper { grid-area: q; }
    .cart-row .ci-total { grid-area: t; }
    .form-grid, .saved-addresses { grid-template-columns: 1fr; }
    .store-grid, .blog-grid, .sitemap-grid, .steps { grid-template-columns: 1fr; }
    .pdp-qty-row { flex-direction: column; align-items: stretch; }
    .pincode-box { text-align: left; }
    .pincode-field { display: flex; }
    .pincode-field input { flex: 1; }
    .share-wrap, .qv { grid-template-columns: 1fr; }
    .order-row { grid-template-columns: 1fr auto; }
    .order-row .amt { display: none; }
    .auth-card { padding: 22px; }
    .header-actions { gap: 14px; }
}

/* ==========================================================================
   Nandini Furnishings brand accents (#EC008C)
   ========================================================================== */
::selection { background: var(--brand); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Logo: the "N" carries the brand colour */
.text-logo-name { display: block; }
.text-logo-name::first-letter { color: var(--brand); font-weight: 700; }

/* Buttons & CTAs */
.btn-dark, .btn-hero, .na-showcase .btn-dark { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-dark:hover, .btn-hero:hover, .na-showcase .btn-dark:hover { background: var(--ink); border-color: var(--ink); }
.btn-dark[disabled]:hover { background: var(--brand); border-color: var(--brand); }
.btn-outline { border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-light { color: var(--brand); }
.btn-light:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.link-btn:hover, .clear-all:hover, .auth-switch a, .login-hint a, .cms a, .sr-all a, .read-more { color: var(--brand); }

/* Header & navigation */
.hicon .badge, .site-header.is-transparent .hicon .badge { background: var(--brand); color: #fff; }
.hicon:hover, .top-link:hover, .search-trigger:hover { color: var(--brand); opacity: 1; }
.nav-level0 li.is-active a, .nav-level0 li.is-hover a { background: var(--brand); color: #fff; }
.nav-level0 a:hover { color: var(--brand); }
.nav-level0 li.is-active a:hover, .nav-level0 li.is-hover a:hover { color: #fff; }
.nav-level1 > li > a::after { background: var(--brand); }
.nav-level1 > li:hover > a { color: var(--brand); }
.site-header.is-transparent:not(.is-sticky) .nav-level1 > li:hover > a { color: #fff; }
.mega { border-top: 2px solid var(--brand); }
.mega-col h4 { color: var(--brand); }
.mega-col li a:hover, .account-dropdown a:hover { color: var(--brand); }
.account-dropdown a:hover { background: var(--brand-bg); }
.mnav-row a:hover, .mnav ul ul a:hover, .mnav-links a:hover { color: var(--brand); }

/* Headings & highlights */
.cheading { color: var(--brand); }
.cheading::after { content: ''; display: block; width: 46px; height: 2px; background: var(--brand); margin: 14px auto 0; opacity: .9; }
.page-heading { color: var(--ink); }
.page-heading::after { content: ''; display: block; width: 46px; height: 2px; background: var(--brand); margin: 14px auto 0; }
.page-heading.left::after { margin-left: 0; }
.listing-title, .pdp-name { color: var(--ink); }
.pdp-collection, .cat-sub, .blog-date { color: var(--brand); }
.breadcrumbs a:hover, .breadcrumbs strong { color: var(--brand); }

/* Hero */
.hero-dots button.is-active { background: var(--brand); border-color: var(--brand); }
.hero-sound { background: var(--brand); }

/* Category & product cards */
.cat-card:hover .cat-arrow, .cat-card:hover .cat-title { color: var(--brand); }
.car-nav:hover { color: var(--brand); }
.label-sale { background: var(--brand); }
.pa-btn:hover { background: var(--brand); color: #fff; }
.pa-btn.is-active, .icon-btn.is-active { color: var(--brand); }
.pa-btn.is-active:hover { color: #fff; }
.pcard-cart { background: var(--brand); }
.pcard-cart:hover { background: var(--ink); }
.pcard-name:hover { color: var(--brand); }
.pcard-media { transition: box-shadow .3s; }
.pcard:hover .pcard-media { box-shadow: 0 0 0 1px var(--brand); }

/* Listing */
.check input, .pay-option input, .address-card input { accent-color: var(--brand); }
.filter-group.is-open .filter-title, .filter-title:hover { color: var(--brand); }
.chip { background: var(--brand-bg); color: var(--brand); }
.chip:hover { background: var(--brand); color: #fff; }
.pagination a.is-active, .pagination a:hover { background: var(--brand); border-color: var(--brand); }

/* Product page */
.pdp-thumb.is-active, .pdp-thumb:hover { border-color: var(--brand); }
.tab-heads { border-bottom-color: #e2e2e2; }
.tab-heads button.is-active { background: var(--brand-bg); color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.attr-filter a:hover { border-color: var(--brand); color: var(--brand); }
.attr-filter li.is-active a { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.qty-stepper button:hover, .icon-btn:hover { color: var(--brand); }
.pincode-field button { color: var(--brand); }
.pdp-policies .ic { color: var(--brand); }
.redressal h3 { color: var(--brand); }

/* Forms, cart, checkout, account */
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.coupon-form:focus-within { border-color: var(--brand); }
.coupon-form button { background: var(--brand); }
.coupon-form button:hover { background: var(--ink); }
.coupon-applied { color: var(--brand); }
.order-summary { border-top: 2px solid var(--brand); }
.totals .grand dd { color: var(--brand); }
.pay-option, .address-card:has(input:checked) { border-color: var(--brand); }
.pay-option { background: var(--brand-bg); }
.ci-name:hover, .mc-name:hover { color: var(--brand); }
.mc-remove:hover { color: var(--brand); }
.auth-tabs a.is-active { color: var(--brand); border-color: var(--brand); }
.auth-benefits { background: var(--brand-bg); }
.auth-benefits .ic { color: var(--brand); }
.account-hello { background: var(--brand-bg); }
.account-nav a.is-active, .account-nav a:hover { background: var(--brand); color: #fff; }
.order-row:hover { background: var(--brand-bg); }
.order-progress li.done { color: var(--brand); }
.order-progress li.done span { background: var(--brand); }
.success-icon { background: var(--brand); }
.steps span { background: var(--brand); }
.empty-state .ic { color: var(--brand); }
.big404 { color: var(--brand-bg); }
.tag { background: var(--brand); }
.store-card:hover { box-shadow: 0 10px 30px rgba(236, 0, 140, .08); border-color: var(--brand); }
.store-card .ic { color: var(--brand); }
.blog-card:hover .blog-title { color: var(--brand); }
.sitemap-grid h3 { color: var(--brand); }
.sitemap-grid a:hover { color: var(--brand); }

/* Search, drawers, modals */
.search-form { border-bottom-color: var(--brand); }
.search-form button { color: var(--brand); }
.sr-product:hover strong, .sr-cats a:hover { color: var(--brand); }
.share-icons a:hover { background: var(--brand); border-color: var(--brand); }
.drawer-head h3 { color: var(--brand); }
.toast { border-left: 3px solid var(--brand); }

/* Footer: light brand background, magenta accents, dark text */
.site-footer { background: var(--brand-bg); color: var(--ink); border-top: 3px solid var(--brand); }
.footer-title { color: var(--brand); }
.footer-links li { color: var(--muted); }
.footer-links a:hover { color: var(--brand); opacity: 1; }
.footer-call { color: var(--ink); font-weight: 600; }
.footer-links strong { color: var(--ink); }
.footer-logo .text-logo { color: var(--ink); }
.socials { gap: 6px; grid-template-columns: repeat(3, 30px); }
.socials a { width: 30px; height: 30px; background: var(--brand); color: #fff; border-radius: 50%; }
.socials a:hover { background: var(--ink); color: #fff; }
.newsletter-form { border: 1px solid #e8cfe0; }
.newsletter-form:focus-within { border-color: var(--brand); }
.newsletter-form button { background: var(--brand); color: #fff; border-left: 0; }
.newsletter-form button:hover { background: var(--ink); color: #fff; }
.copyright { color: var(--muted); }
@media (max-width: 991px) {
    .footer-col { border-bottom-color: #f3cfe5; }
}

/* ==========================================================================
   Book a Home Visit
   ========================================================================== */
.top-link-hv { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--brand); color: var(--brand); border-radius: 30px; }
.top-link-hv:hover { background: var(--brand); color: #fff !important; }
.site-header.is-transparent:not(.is-sticky) .top-link-hv { border-color: #fff; color: #fff; }
.site-header.is-transparent:not(.is-sticky) .top-link-hv:hover { background: var(--brand); border-color: var(--brand); }
.hicon-hv { display: none; color: var(--brand); }
.site-header.is-transparent:not(.is-sticky) .hicon-hv { color: #fff; }
.mnav-hv { margin: 16px 0 4px; }
.hv-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand); }

/* Hero of the booking page */
.hv-hero { background: var(--brand-bg); border-bottom: 1px solid #f6d6ea; padding-bottom: 40px; }
.hv-hero .breadcrumbs { padding-bottom: 26px; }
.hv-hero h1 { font-size: 40px; font-weight: 700; color: var(--ink); margin: 10px 0 10px; text-transform: uppercase; }
.hv-hero > .container > p { max-width: 640px; color: var(--muted); font-size: 16px; }
.hv-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.hv-perks li { display: flex; gap: 12px; align-items: flex-start; background: #fff; padding: 16px 18px; border-radius: 4px; font-size: 13px; color: var(--muted); }
.hv-perks .ic { color: var(--brand); margin-top: 2px; }
.hv-perks strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }

.hv-page { padding-top: 40px; }
.hv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.hv-step { border: 1px solid var(--line); padding: 24px 24px 8px; margin-bottom: 18px; border-radius: 4px; }
.hv-step h2 { display: flex; align-items: center; gap: 12px; font-size: 18px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 18px; color: var(--ink); }
.hv-step h2 span { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.hv-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); margin: 18px 0 10px; }
.hv-notes { margin-top: 18px; }
.btn-lg { min-height: 52px; font-size: 15px; }
.hv-fineprint { font-size: 12px; color: var(--soft); text-align: center; margin-top: 10px; }
.field-hint { font-size: 12px; color: var(--brand); font-weight: 500; min-height: 16px; text-transform: none; letter-spacing: 0; }

/* Live location */
.loc-capture { border: 1px dashed #efb3d6; background: #fffafd; border-radius: 4px; padding: 16px; margin-bottom: 18px; }
.loc-head { display: flex; align-items: center; gap: 14px; }
.loc-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.loc-text { flex: 1; min-width: 0; }
.loc-text strong { color: var(--ink); font-size: 15px; }
.loc-text p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.loc-text p.err { color: #c62828; }
.loc-head .btn-sm { flex: none; white-space: nowrap; }
.loc-capture.is-loading [data-capture-location] { opacity: .6; pointer-events: none; }
.loc-capture.is-done { border-style: solid; border-color: var(--brand); }
.loc-result { margin-top: 14px; }
.loc-result iframe { width: 100%; height: 200px; border: 0; border-radius: 4px; background: var(--beige); display: block; }
.loc-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.loc-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.loc-ok small { color: var(--soft); font-weight: 400; }
.loc-meta a { color: var(--brand); text-decoration: underline; }

/* Slots */
.slot-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-pill input { position: absolute; opacity: 0; pointer-events: none; }
.slot-pill span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid #d9d9d9; border-radius: 30px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; transition: all .2s; }
.slot-pill span .ic { color: var(--soft); }
.slot-pill:hover span { border-color: var(--brand); }
.slot-pill input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.slot-pill input:checked + span .ic { color: #fff; }
.slot-pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.field.invalid .slot-pill span { border-color: #c62828; }

/* Product picker */
.hv-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hv-product { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; transition: border-color .2s, background .2s; }
.hv-product input { position: absolute; opacity: 0; }
.hv-product img { width: 54px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); flex: none; }
.hv-product-info { min-width: 0; display: flex; flex-direction: column; }
.hv-product-info strong { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-product-info small { font-size: 12px; color: var(--muted); }
.hv-product-info em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--brand); margin-top: 2px; }
.hv-tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; color: transparent; }
.hv-product:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); }
.hv-product:has(input:checked) .hv-tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check input { position: absolute; opacity: 0; }
.chip-check span { display: inline-block; padding: 7px 14px; border: 1px solid #d9d9d9; border-radius: 30px; font-size: 13px; cursor: pointer; transition: all .2s; }
.chip-check:hover span { border-color: var(--brand); color: var(--brand); }
.chip-check input:checked + span { background: var(--brand-bg); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* Summary rail */
.hv-summary { position: sticky; top: 210px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); padding: 24px; }
.hv-summary h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 14px; color: var(--ink); }
.hv-sum-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.hv-sum-list li .ic { color: var(--brand); margin-top: 1px; }
.hv-sum-list li.filled span { color: var(--ink); font-weight: 600; }
.hv-how ol { padding-left: 18px; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.8; }
.hv-call { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.hv-call a { color: var(--brand); font-weight: 600; }
.hv-done { text-align: center; max-width: 620px; margin: 30px auto 0; }

/* Toggle switch used on cart & checkout */
.switch { position: relative; display: inline-flex; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-ui { width: 46px; height: 26px; border-radius: 26px; background: #d4d4d4; position: relative; transition: background .2s; }
.switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease); }
.switch input:checked + .switch-ui { background: var(--brand); }
.switch input:checked + .switch-ui::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--brand); outline-offset: 2px; }
.hv-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.hv-switch-text strong { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
.hv-switch-text strong .ic { color: var(--brand); }
.hv-switch-text small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.hv-toggle-card { border: 1px solid #f0c4de; background: var(--brand-bg); padding: 18px; margin: 4px 0 22px; border-radius: 4px; transition: background .2s; }
.hv-toggle-card.is-on { background: #fff; border-color: var(--brand); box-shadow: 0 6px 22px rgba(236, 0, 140, .08); }
.hv-toggle-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.small-note { font-size: 13px; margin-bottom: 12px; }
.hv-cart-toggle { background: #fff; border: 1px solid #f0c4de; padding: 14px; margin-bottom: 14px; border-radius: 4px; }
.hv-cart-toggle .hv-switch-text strong { font-size: 14px; }
.hv-cart-toggle .hv-switch-text small { font-size: 12px; }
.hv-only-link { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); }
.hv-only-link:hover { text-decoration: underline; }

/* Product page entry */
.pdp-hv { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--brand); background: var(--brand-bg); border-radius: 2px; color: var(--ink); transition: background .2s, color .2s; }
.pdp-hv-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pdp-hv strong { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); }
.pdp-hv small { display: block; font-size: 12px; color: var(--muted); }
.pdp-hv > span:nth-child(2) { flex: 1; }
.pdp-hv > .ic { color: var(--brand); transition: transform .2s; }
.pdp-hv:hover > .ic { transform: translateX(4px); }

/* Visit summary card on orders / account */
.visit-card { text-align: left; border: 1px solid var(--brand); background: var(--brand-bg); padding: 16px 18px; margin: 18px 0; border-radius: 4px; }
.visit-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.visit-card-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.visit-card-head strong { display: block; color: var(--ink); }
.visit-card-list li { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 14px; color: var(--muted); }
.visit-card-list .ic { color: var(--brand); }
.visit-card-list a { color: var(--brand); }
.hv-status-new { background: #fff4dc; color: #8a6100; }
.hv-status-confirmed, .hv-status-assigned { background: #e3efff; color: #1f5fbf; }
.hv-status-completed { background: #e5f6e8; color: #1d7a2a; }
.hv-status-cancelled { background: #fdecec; color: #b3261e; }
.hv-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-bg); color: var(--brand); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 20px; vertical-align: middle; }
.account-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.visit-entry .visit-card { margin-top: 0; }
.visit-addr { font-size: 13px; }
.visit-addr a { color: var(--brand); }
.visit-items { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.visit-item { width: 74px; font-size: 11px; color: var(--muted); }
.visit-item img { width: 74px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--img-bg); margin-bottom: 4px; }
.visit-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Home page call-to-action */
.hv-cta { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--brand-bg); border: 1px solid #f6d6ea; padding: 44px; border-radius: 4px; }
.hv-cta h2 { font-size: 34px; font-weight: 700; text-transform: uppercase; color: var(--brand); margin: 10px 0; }
.hv-cta p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.hv-cta-steps { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none; }
.hv-cta-steps li { display: flex; gap: 14px; align-items: center; background: #fff; padding: 14px 16px; border-radius: 4px; font-size: 13px; color: var(--muted); }
.hv-cta-steps li > span { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-bg); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hv-cta-steps strong { display: block; color: var(--ink); font-size: 15px; }

@media (max-width: 991px) {
    .hicon-hv { display: inline-flex; }
    .top-link-hv { display: none; }
    .hv-hero h1 { font-size: 28px; }
    .hv-perks { grid-template-columns: 1fr; }
    .hv-layout { grid-template-columns: minmax(0, 1fr); }
    .hv-summary { position: static; }
    .hv-cta { grid-template-columns: 1fr; padding: 26px; gap: 24px; }
    .hv-cta h2 { font-size: 26px; }
}
@media (max-width: 600px) {
    .hv-step { padding: 18px 16px 4px; }
    .hv-products { grid-template-columns: 1fr; }
    .loc-head { flex-wrap: wrap; }
    .loc-head .btn-sm { width: 100%; }
}

/* ==========================================================================
   Developer credit (bottom bar of the footer)
   ========================================================================== */
.site-footer { padding-bottom: 0; }
.footer-middle { padding-bottom: 40px; }
.footer-credit { background: #111; color: #bdbdbd; text-align: center; padding: 14px 0; font-size: 13px; letter-spacing: .3px; }
.footer-credit .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.footer-credit a { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.footer-credit a:hover { color: #fff; }
.footer-credit .footer-credit-url { color: #fff; font-weight: 500; text-transform: none; letter-spacing: .3px; }
.footer-credit .footer-credit-url:hover { color: var(--brand); }
.footer-credit-sep { color: #555; }

/* ==========================================================================
   Order status steps: vertical timeline on small screens (labels no longer overlap)
   ========================================================================== */
@media (max-width: 600px) {
    .order-progress { flex-direction: column; align-items: stretch; gap: 0; margin: 20px 0; padding-left: 2px; }
    .order-progress::before { top: 14px; bottom: 14px; left: 10px; right: auto; width: 2px; height: auto; }
    .order-progress li { display: flex; align-items: center; gap: 14px; flex: none; text-align: left; padding: 7px 0; font-size: 13px; letter-spacing: .4px; }
    .order-progress li span { margin: 0; flex: none; }
    .history li { word-break: break-word; }
    .visit-card-list li { align-items: flex-start; }
}

/* ==========================================================================
   Payments
   ========================================================================== */
.pay-option { margin-bottom: 10px; background: #fff; border-color: #e3e3e3; }
.pay-option:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); }
.pay-option .pay-logos { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .5px; }
.pay-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin: 16px 0; border-radius: 4px; font-size: 14px; text-align: left; }
.pay-status.paid { background: #eaf7ec; color: #1d7a2a; justify-content: flex-start; }
.pay-status.paid .ic { flex: none; }
.pay-status.pending { background: #fff4dc; color: #6b4b00; border: 1px solid #f3dca6; }
.pay-status .btn-sm { flex: none; }
.hv-fee-box { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--brand-bg); border: 1px solid #f6d6ea; border-radius: 4px; margin-bottom: 14px; }
.hv-fee-box strong { font-size: 28px; color: var(--brand); display: block; line-height: 1.1; }
.hv-fee-box p { margin: 4px 0 0; font-size: 13px; }

/* Image logo (wide wordmark): sits next to the menu button on phones so it never runs into the icons */
.logo img { max-height: 60px; width: auto; }
@media (max-width: 991px) {
    .logo { position: static; transform: none; max-width: 48vw; margin-right: auto; }
    .nav-toggle { margin-right: 8px; }
    .logo img { max-height: 40px; max-width: 100%; }
    .site-header.is-sticky .logo img { max-height: 36px; }
}
@media (max-width: 380px) {
    .header-actions { gap: 10px; }
    .logo { max-width: 44vw; }
}