:root {
    --purple: #5b2a86;
    --pink: #e8508a;
    --dark: #1c1c1c;
    --cream: #f3e6d8;
    --brown: #a9764f;
    --green: #3fae4e;
    --gray-text: #6b6b6b;
    --border: #ececec;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--dark);
    background: #fff;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header - grid layout: empty spacer / logo (center) / search+cart grouped
   (right). A CSS Grid with explicit columns is used instead of absolute
   positioning so the pieces can never overlap each other regardless of
   viewport width or content length — each has its own column/row and
   simply reflows, rather than needing pixel-perfect offsets recalculated
   by hand every time one piece's size changes. The empty first column
   still reserves its 1fr share of width, which is what keeps the logo
   truly centered even though nothing is rendered there. */
header.site-header {
    text-align: center;
    padding: 20px 20px 14px;
}
.header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}
.logo { grid-column: 2; justify-self: center; display: inline-block; font-size: 32px; font-weight: 700; line-height: 1.1; }
.logo .davoir { color: var(--purple); font-family: Georgia, serif; }
.logo .mode { display: block; color: var(--pink); font-size: 14px; letter-spacing: 3px; font-weight: 600; margin-top: 2px; }

.header-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 16px; }

.cart-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 700; color: var(--dark); white-space: nowrap;
}
.cart-badge .count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--purple); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 999px;
}

.account-pill { font-size: 13px; font-weight: 600; margin-top: 6px; }

.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; margin-top: 10px; }

nav.main-nav {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px;
    margin-top: 10px;
}
nav.main-nav a { font-weight: 600; font-size: 14px; padding: 4px 0; }
nav.main-nav a:hover { color: var(--purple); }

.header-search {
    position: relative; display: flex; align-items: center;
    width: 271.75px; height: 37.78px; flex-shrink: 0;
}
.header-search input {
    width: 100%; height: 100%; box-sizing: border-box;
    padding: 0 42px 0 16px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 14px; background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.header-search .search-submit {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4fc3f7, #8e5fd6);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* Below ~700px the fixed 271.75px search bar next to Cart no longer fits
   beside the centered logo without cramming or overlapping, so the group
   is unwrapped (display:contents removes .header-right from the box model,
   promoting its children back to direct grid items) and the search bar
   moves to its own full-width row beneath logo/cart — it always has the
   full container width there, so it can never collide with anything. */
@media (max-width: 700px) {
    .header-top { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; row-gap: 10px; }
    .header-right { display: contents; }
    .logo { grid-column: 1; grid-row: 1; justify-self: start; }
    .cart-badge { grid-column: 2; grid-row: 1; justify-self: end; }
    .header-search { grid-column: 1 / 3; grid-row: 2; width: 100%; height: auto; }
}

@media (max-width: 992px) {
    .menu-toggle { display: inline-block; }
    nav.main-nav {
        display: none;
        flex-direction: column;
        gap: 4px;
        margin-top: 12px;
    }
    nav.main-nav.open { display: flex; }
}

/* Hero */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(120deg, var(--cream) 0%, var(--cream) 55%, var(--brown) 130%);
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 260px;
}
.hero::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: var(--brown);
    opacity: .55;
}
.hero::after {
    content: "";
    position: absolute;
    bottom: -100px; left: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: var(--pink);
    opacity: .18;
}
.hero-content { position: relative; z-index: 1; }
.hero-content .hero-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
    color: var(--purple); text-transform: uppercase; margin-bottom: 12px;
}
.hero-content h2 { font-size: 48px; font-weight: 800; margin: 0 0 12px; color: var(--dark); line-height: 1.1; }
.hero-content p { font-size: 18px; color: #4b4b4b; margin: 0; }

/* Section titles */
.section-title { font-size: 35px; font-weight: 600; margin: 48px 0 20px; color: #000; }

/* Shop layout: sidebar (left) + product grid (right) */
.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
    align-items: start;
}
.shop-sidebar {
    position: sticky;
    top: 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
}
.shop-sidebar h4 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #f3f3f3; }
.filter-list li:last-child { border-bottom: none; }
.filter-list a { font-size: 14px; font-weight: 600; color: var(--dark); }
.filter-list a.active, .filter-list a:hover { color: var(--purple); }
.filter-list .count { font-size: 12px; color: var(--gray-text); background: #f5f5f5; padding: 2px 8px; border-radius: 10px; }
.shop-main { min-width: 0; }

@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; }
}

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 40px 0; }
.pagination a { padding: 8px 14px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; font-weight: 600; }
.pagination a.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.pagination a:hover:not(.active) { border-color: var(--purple); color: var(--purple); }

/* Product grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
    align-items: stretch;
}
.product-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    position: relative;
    transition: box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.product-card .price { margin-top: auto; }
.product-badges { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.badge-sale {
    background: rgba(63, 195, 135, 0.9); color: #fff; font-size: 12px; font-weight: 600;
    padding: 8px 12px; border-radius: 0;
}
.badge-flag { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 5px 10px; border-radius: 0; color: #fff; }
.badge-new { background: rgba(91, 42, 134, 0.9); }
.badge-bestseller { background: rgba(232, 80, 138, 0.9); }
.badge-featured { background: rgba(28, 28, 28, 0.85); }
.wishlist-toggle {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    font-size: 15px; color: var(--gray-text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.wishlist-toggle:hover { color: var(--pink); border-color: var(--pink); }
.wishlist-toggle.active { color: var(--pink); border-color: var(--pink); }
.product-card img { height: 160px; object-fit: contain; margin: 0 auto 12px; }
.product-cat a { font-size: 12px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .05em; }
.product-name { font-weight: 600; font-size: 15px; margin: 6px 0; min-height: 40px; }
.price-regular { color: #555; text-decoration: line-through; font-size: 15px; margin-right: 6px; }
.price-sale { color: #57bf6d; font-weight: 400; font-size: 15px; }
.btn-add {
    display: inline-block; margin-top: 12px; padding: 5px 12px;
    background: transparent; color: #848494; border-radius: 0; font-size: 12px; font-weight: 600;
    border: 3px double #e4e4e4; cursor: pointer;
}
.btn-add:hover { border-color: var(--purple); color: var(--purple); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--dark); color: #fff; border-radius: 8px; font-weight: 700; border: none; cursor: pointer; font-size: 15px; }
.btn:hover { background: var(--purple); }
.btn-outline { background: transparent; border: 1px solid var(--dark); color: var(--dark); }

/* Category chips */
.category-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.category-chips a { padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; font-weight: 600; }
.category-chips a.active, .category-chips a:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

/* Forms */
.form-page { max-width: 480px; margin: 50px auto; padding: 0 20px; }
.form-card { border: 1px solid var(--border); border-radius: 10px; padding: 32px; }
.form-card h1 { font-size: 22px; margin-top: 0; }
label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], textarea, select {
    width: 100%; padding: 11px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;
}
.error-box { background: #fdeaea; color: #b42318; padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 12px; }
.success-box { background: #e9f9ee; color: #1e7a34; padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 12px; }

/* UPI payment section (checkout) */
.upi-pay-section {
    margin-top: 20px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.upi-pay-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.upi-pay-subtitle { margin: 0 0 16px; color: #666; font-size: 14px; }
.upi-slider-track { overflow: hidden; padding: 4px 0; }
.upi-slider-row { display: flex; gap: 26px; width: max-content; animation: upi-slide 16s linear infinite; }
.upi-app-icon { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 56px; }
.upi-app-badge {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.upi-app-label { font-size: 11px; color: #555; font-weight: 600; white-space: nowrap; }
@keyframes upi-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.upi-pay-btn {
    display: block; width: 100%; margin-top: 18px; padding: 15px 20px;
    background: var(--dark); color: #fff; border: none; border-radius: 999px;
    font-size: 15px; font-weight: 700; cursor: pointer; text-align: center;
}
.upi-pay-btn:hover { background: var(--purple); }

/* UPI QR modal (checkout) */
.upi-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.upi-modal-box { background: #fff; border-radius: 12px; padding: 28px; max-width: 340px; width: 100%; position: relative; }
.upi-modal-close {
    position: absolute; top: 10px; right: 14px; background: none; border: none;
    font-size: 24px; line-height: 1; cursor: pointer; color: #888;
}

@media (max-width: 480px) {
    .upi-slider-row { animation-duration: 10s; }
    .upi-modal-box { padding: 22px; }
}

/* Single product */
.product-detail { display: flex; gap: 40px; flex-wrap: wrap; padding: 40px 0; }
.product-detail .gallery { flex: 1 1 360px; max-width: 420px; }
.product-detail .gallery > img { width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumb {
    width: 64px; height: 64px; object-fit: contain; border: 2px solid var(--border);
    border-radius: 6px; cursor: pointer; padding: 4px; background: #fff;
}
.gallery-thumb:hover { border-color: var(--purple); }
.gallery-thumb.active { border-color: var(--purple); }
.product-detail .info { flex: 1 1 360px; }
.product-detail h1 { font-size: 26px; margin-top: 0; }
.pincode-check { display: flex; gap: 8px; margin-top: 20px; max-width: 320px; }
.pincode-check input { flex: 1; }
.pincode-result { margin-top: 8px; font-size: 13px; }

.product-long-description { border-top: 1px solid var(--border); padding: 32px 0 48px; }
.product-long-description h2 { font-size: 22px; margin: 0 0 14px; }
.product-long-description p { color: #444; line-height: 1.8; font-size: 15px; }

/* Cart page: items (left) + totals (right), aligned to the same top edge */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 36px;
    align-items: start;
    margin-top: 10px;
}
.cart-items { min-width: 0; }
.cart-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }

table.cart-table { width: 100%; border-collapse: collapse; }
table.cart-table th, table.cart-table td { padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; vertical-align: middle; }
table.cart-table img { width: 56px; height: 56px; object-fit: contain; }
.qty-input { width: 60px; }

.cart-totals {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}
.cart-totals h3 { margin: 0 0 16px; font-size: 17px; }
.cart-totals .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f3f3; font-size: 14px; }
.cart-totals .total { font-weight: 800; font-size: 18px; border-bottom: none; padding-top: 14px; }

/* Standalone summary block (checkout page) reuses the same look */
.cart-summary { max-width: 340px; margin-left: auto; margin-top: 24px; }
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; }
.cart-summary .total { font-weight: 800; font-size: 18px; border-top: 1px solid var(--border); padding-top: 10px; }

@media (max-width: 800px) {
    .cart-layout { grid-template-columns: 1fr; }
    table.cart-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Footer - matches the live site's mauve footer widget area */
footer.site-footer { background: #9c8ba3; color: #1a1a1a; padding: 56px 20px 40px; margin-top: 60px; }
footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
footer .footer-col { display: flex; flex-direction: column; }
footer h4 {
    color: #1a1a1a; font-size: 16px; letter-spacing: .03em; margin: 0 0 22px; font-weight: 600;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(26,26,26,.2);
}
footer a { color: #1a1a1a; display: block; margin-bottom: 12px; font-size: 15px; line-height: 1.6; }
footer a:hover { color: #fff; }
footer .footer-text { font-size: 15px; line-height: 1.8; color: #1a1a1a; margin: 0 0 14px; }

.footer-col-info .footer-text { text-align: left; font-weight: 600; }
.footer-col-links { align-items: flex-start; }
.footer-col-links a { text-align: left; }
.footer-admin-link { font-size: 11px; color: rgba(26,26,26,.45) !important; margin-top: 18px; }
.footer-admin-link:hover { color: rgba(26,26,26,.7) !important; }
.footer-col-help { text-align: left; align-items: flex-start; }
.footer-col-help a { text-align: left; }
.footer-col-help .footer-text:last-child { margin-bottom: 0; }

.footer-bottom {
    text-align: center; color: #eee; font-size: 14px;
    background: #111; margin: 40px -20px -40px; padding: 22px 20px;
}

@media (max-width: 900px) {
    footer .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-col-info .footer-text { text-align: left; }
}

.empty-state { text-align: center; padding: 60px 20px; color: var(--gray-text); }
.page-title { font-size: 30px; font-weight: 800; margin: 30px 0; }
.about-content { max-width: 800px; margin: 0 auto; padding: 20px 0 60px; line-height: 1.7; }

/* Mobile phones — kept at the end of the file so these overrides win the
   cascade against the unconditional rules above (same selector specificity,
   so source order decides; a media query placed earlier in the file loses
   to a plain rule declared later). Header icons are absolutely positioned
   and were sized for desktop, so below ~480px they start colliding with
   the centered logo and each other. */
@media (max-width: 480px) {
    .container { padding: 0 14px; }

    header.site-header { padding: 14px 14px 10px; }
    .logo { font-size: 24px; }
    .logo .mode { font-size: 11px; letter-spacing: 2px; }

    .header-search input { padding: 8px 36px 8px 14px; font-size: 13px; }
    .header-search .search-submit { width: 24px; height: 24px; }
    .cart-badge { font-size: 13px; gap: 4px; }
    .cart-badge .count { width: 17px; height: 17px; font-size: 10px; }
    .menu-toggle { margin-top: 6px; }

    .hero { padding: 44px 16px; min-height: 0; }
    .hero-content h2 { font-size: 26px; }
    .hero-content p { font-size: 15px; }
    .hero-content .hero-eyebrow { font-size: 11px; }

    .section-title { font-size: 24px; margin: 32px 0 14px; }
    .page-title { font-size: 22px; margin: 20px 0; }

    /* minmax(0, 1fr), not plain 1fr — a bare 1fr track still respects its
       content's intrinsic min-width, so a card with a long product name
       could refuse to shrink and blow the grid out to two very unequal
       columns (and overflow the viewport). minmax(0, 1fr) lets both
       columns shrink evenly and the card's own text wrap instead. */
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .product-card { padding: 10px; }
    .product-card img { height: 110px; }
    .product-name { font-size: 13px; min-height: auto; }
    .price-regular, .price-sale { font-size: 13px; }
    .btn-add { width: 100%; padding: 8px 10px; }

    .category-chips { gap: 6px; }
    .category-chips a { padding: 6px 12px; font-size: 12px; }

    .product-detail { padding: 24px 0; gap: 24px; }
    .product-detail .gallery { max-width: 100%; }

    .cart-totals, .form-card { padding: 18px; }
    footer.site-footer { padding: 36px 14px 28px; }
    /* .footer-bottom's negative margin must mirror site-footer's own side
       padding exactly (it bleeds the black bar edge-to-edge) — the 480px
       rule above changed that padding to 14px without updating this,
       which left a 6px horizontal overflow on very narrow phones. */
    .footer-bottom { margin: 36px -14px -28px; padding: 18px 14px; }
}