/* =========================================================
   KANHA JEWELS - WEBSITE RESPONSIVE LAYER
   Converts the original mobile/Cordova UI into a web layout
   without changing the existing API/product/cart logic.
   ========================================================= */
:root {
    --kw-gold: #c9a13b;
    --kw-gold-light: #ead089;
    --kw-gold-deep: #8f6b16;
    --kw-charcoal: #2e2e2e;
    --kw-charcoal-2: #3a3a3a;
    --kw-gray: #6f6f6f;
    --kw-line: #ded7c7;
    --kw-bg: #f5f5f3;
    --kw-white: #ffffff;
    --kw-shadow: 0 12px 35px rgba(26, 26, 26, .10);
}

html { scroll-behavior: smooth; }
html, body { width: 100%; min-height: 100%; }
body.website-mode,
body {
    margin: 0 !important;
    padding-top: 0 !important;
    background: var(--kw-bg) !important;
    color: var(--kw-charcoal) !important;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Disable Cordova/mobile shell elements; website shell replaces them. */
#header,
.mobile-nav,
#mobile-menu-overlay,
.menu-hamburger,
.menu-drawer,
.menu-overlay,
footer.footer { display: none !important; }

/* ---------- Website Header ---------- */
.website-header {
    position: sticky;
    top: 0;
    z-index: 10050;
    width: 100%;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(201,161,59,.45);
    box-shadow: 0 5px 24px rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
}
.website-topbar {
    background: linear-gradient(90deg, #262626, #3a3a3a, #262626);
    color: #f4dfaa;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 15px;
}
.website-header-main {
    max-width: 1360px;
    margin: 0 auto;
    min-height: 78px;
    padding: 10px 28px;
    display: grid;
    grid-template-columns: 210px minmax(260px, 1fr) auto;
    align-items: center;
    gap: 28px;
}
.website-logo { display: inline-flex; align-items: center; text-decoration: none !important; }
.website-logo img { display:block; width:auto; max-width:185px; max-height:62px; object-fit:contain; }
.website-search { position: relative; width: 100%; }
.website-search .search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f8f7;
    border: 1px solid #d8d2c3;
    border-radius: 999px;
    transition: .25s ease;
}
.website-search .search-box:focus-within {
    border-color: var(--kw-gold);
    box-shadow: 0 0 0 3px rgba(201,161,59,.13);
    background:#fff;
}
.website-search input {
    width: 100%;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 44px;
    padding: 0 48px 0 19px;
    font-size: 14px;
    color: #333;
}
.website-search .search-submit {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0 !important;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kw-gold-light), var(--kw-gold)) !important;
    color: #242424 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.website-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; }
.website-action-link {
    color:#333 !important;
    text-decoration:none !important;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 11px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}
.website-action-link:hover { background:#f4ecd8; color:#6b4f0d !important; }
.website-action-link i { color:var(--kw-gold-deep); font-size:16px; }
.website-cart { position:relative; }
.website-mobile-toggle {
    display:none;
    width:42px;
    height:42px;
    border-radius:10px;
    border:1px solid #d7c48d !important;
    background:#fff !important;
    padding:9px;
    cursor:pointer;
}
.website-mobile-toggle span { display:block; height:2px; background:#3b3423; margin:5px 0; border-radius:2px; }

.website-nav-wrap { border-top:1px solid #eee8db; background:#fff; }
.website-nav {
    max-width:1360px;
    margin:0 auto;
    padding:0 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
}
.website-nav a {
    display:block;
    padding:13px 16px;
    color:#363636 !important;
    text-decoration:none !important;
    text-transform:uppercase;
    font-size:12px;
    font-weight:700;
    letter-spacing:.65px;
    border-bottom:2px solid transparent;
    transition:.2s ease;
}
.website-nav a:hover,
.website-nav a.active { color:#8a6615 !important; border-bottom-color:var(--kw-gold); background:#fcfaf4; }

.website-metal-tabs {
    max-width:1360px;
    margin: 0 auto;
    padding: 7px 28px 10px;
    display:flex;
    justify-content:center;
    gap:10px;
    background:#fff;
}
.website-metal-tabs button {
    min-width:105px;
    padding:8px 24px;
    border:1px solid #cfb15d !important;
    background:#fff !important;
    color:#4a4332 !important;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
    cursor:pointer;
}
.website-metal-tabs button.active {
    background:linear-gradient(135deg, #eed894, #b88d23) !important;
    color:#252525 !important;
}

/* Search suggestions from existing search.js */
.website-search #searchSuggestions,
#searchSuggestions {
    position:absolute !important;
    top:52px !important;
    left:0 !important;
    right:0 !important;
    z-index:10070 !important;
    max-height:440px;
    overflow:auto;
    background:#fff;
    border:1px solid #ddd2b5;
    border-radius:14px;
    box-shadow:0 16px 38px rgba(0,0,0,.17);
}

/* ---------- General Content ---------- */
.body { min-height: 45vh; }
.main,
.main.shop,
.mainpad3,
.mainpad,
.container-fluid.website-content {
    width:100%;
    max-width:1360px;
    margin-left:auto !important;
    margin-right:auto !important;
}
.main.shop { padding: 20px 26px 42px; }
.mainpad3, .mainpad { padding-left:0 !important; padding-right:0 !important; }
.Page_hedding,
.page-title,
.section-title {
    color:#35312a !important;
    letter-spacing:.4px;
}
.Page_hedding {
    max-width:1360px;
    margin:18px auto 0 !important;
    padding:18px 28px !important;
    text-align:center;
    font-size:24px !important;
    font-weight:700;
    background:linear-gradient(90deg,#eeeae0,#fff,#eeeae0) !important;
    border-top:1px solid #ddc77f;
    border-bottom:1px solid #ddc77f;
}
hr.tall { margin:30px 0 !important; border-color:#e5dfd2 !important; }

/* Home sections */
.metal-content,
.categorySection,
.hero,
.offerBanner {
    max-width:1360px;
    margin-left:auto !important;
    margin-right:auto !important;
}
.metal-content { padding: 0 22px; }
.hero { margin-top:14px !important; }
.heroSlider,
.heroSlider img,
.offerBanner img { width:100% !important; }
.heroSlider img,
.offerBanner img { display:block; border-radius:16px; box-shadow:var(--kw-shadow); object-fit:cover; }
.categorySection { padding-top:16px; }

/* The original app product renderer hardcodes a 2-column grid inline.
   Override it for desktop/tablet, while preserving 2 columns on phones. */
#gvData div[style*="display: grid"],
#gvData_Filter div[style*="display: grid"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap:22px !important;
}
#gvData div[style*="display: grid"] > .col-6,
#gvData_Filter div[style*="display: grid"] > .col-6 {
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    float:none !important;
}
#gvData .res_mob_font_width,
#gvData_Filter .res_mob_font_width {
    height:100%;
    background:#fff;
    border:1px solid #e2ddcf;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 7px 25px rgba(0,0,0,.07);
    transition:transform .2s ease, box-shadow .2s ease;
}
#gvData .col-6:hover .res_mob_font_width,
#gvData_Filter .col-6:hover .res_mob_font_width { transform:translateY(-4px); box-shadow:0 13px 30px rgba(0,0,0,.12); }
#gvData .imghei3,
#gvData_Filter .imghei3 { width:100% !important; height:275px !important; object-fit:cover !important; }
.addtoButton { width:100%; min-height:40px; border-radius:8px !important; font-weight:700; }

/* Cart / checkout tables */
.table-responsive { border:0 !important; overflow-x:auto; }
.shop_table, .cart, table.table { background:#fff; }
.shop_table { border-radius:12px; overflow:hidden; }

/* Forms */
input, select, textarea { max-width:100%; }
.form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    border-radius:8px !important;
}

/* Prevent old fixed-footer spacing from leaving large gaps */
.row[style*="padding-bottom: 200px"],
.row[style*="padding-bottom:200px"] { padding-bottom:32px !important; }

/* ---------- Website Footer ---------- */
.website-footer {
    position:relative;
    z-index:5;
    margin-top:40px;
    background:linear-gradient(135deg,#252525,#353535 60%,#242424);
    color:#d9d9d9;
    border-top:2px solid #aa8528;
}
.website-footer-inner {
    max-width:1360px;
    margin:0 auto;
    padding:46px 28px 34px;
    display:grid;
    grid-template-columns:1.5fr 1fr 1.2fr;
    gap:45px;
}
.website-footer-logo { max-width:180px; max-height:70px; object-fit:contain; filter:brightness(1.06); }
.website-footer h4 { margin:0 0 15px; color:#e1c46f !important; font-size:15px; text-transform:uppercase; letter-spacing:1px; }
.website-footer p { color:#cfcfcf; line-height:1.75; margin:10px 0; font-size:13px; }
.website-footer-links { display:grid; gap:9px; }
.website-footer a { color:#ddd !important; text-decoration:none !important; font-size:13px; }
.website-footer a:hover { color:#f0d889 !important; }
.website-footer-contact { display:grid; gap:10px; font-size:13px; }
.website-footer-contact a, .website-footer-contact span { display:flex; gap:9px; align-items:flex-start; }
.website-footer-contact i { color:#d6b658; min-width:16px; margin-top:3px; }
.website-footer-bottom {
    border-top:1px solid rgba(255,255,255,.10);
    max-width:1360px;
    margin:0 auto;
    padding:15px 28px 18px;
    display:flex;
    justify-content:space-between;
    gap:15px;
    color:#a9a9a9;
    font-size:12px;
}

@media (max-width: 1100px) {
    .website-header-main { grid-template-columns:175px minmax(220px,1fr) auto; gap:16px; padding-left:18px; padding-right:18px; }
    .website-nav { padding:0 16px; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
    .website-nav::-webkit-scrollbar { display:none; }
    .website-nav a { white-space:nowrap; padding:12px 13px; }
    #gvData div[style*="display: grid"], #gvData_Filter div[style*="display: grid"] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

@media (max-width: 820px) {
    .website-topbar { font-size:10px; letter-spacing:1.2px; }
    .website-header-main {
        grid-template-columns:auto 1fr auto;
        grid-template-areas:"toggle logo actions" "search search search";
        min-height:auto;
        padding:9px 14px 12px;
        gap:8px 12px;
    }
    .website-mobile-toggle { display:block; grid-area:toggle; }
    .website-logo { grid-area:logo; justify-content:center; }
    .website-logo img { max-width:145px; max-height:50px; }
    .website-search { grid-area:search; }
    .website-header-actions { grid-area:actions; }
    .website-action-link.account-link span { display:none; }
    .website-action-link { padding:8px; }
    .website-nav-wrap {
        display:none;
        position:absolute;
        left:0; right:0;
        top:100%;
        background:#fff;
        border-top:1px solid #eee0b7;
        box-shadow:0 16px 30px rgba(0,0,0,.15);
        max-height:70vh;
        overflow:auto;
    }
    .website-header.menu-open .website-nav-wrap { display:block; }
    .website-nav { display:block; padding:8px 14px 16px; }
    .website-nav a { padding:13px 12px; border-bottom:1px solid #eee; }
    .website-metal-tabs { padding:8px 12px 10px; overflow-x:auto; justify-content:flex-start; }
    .website-metal-tabs button { min-width:90px; padding:7px 18px; }
    .main.shop { padding:16px 14px 30px; }
    .metal-content { padding:0 10px; }
    #gvData div[style*="display: grid"], #gvData_Filter div[style*="display: grid"] { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
    #gvData .imghei3, #gvData_Filter .imghei3 { height:215px !important; }
    .website-footer-inner { grid-template-columns:1fr 1fr; gap:28px; padding:34px 18px 28px; }
    .website-footer-inner > div:first-child { grid-column:1/-1; }
    .website-footer-bottom { padding:14px 18px 16px; }
}

@media (max-width: 520px) {
    .website-topbar { padding:6px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .website-logo img { max-width:125px; max-height:44px; }
    .website-action-link.account-link { display:none; }
    .website-search input { height:41px; font-size:13px; }
    .website-search .search-submit { width:32px; height:32px; }
    .Page_hedding { margin-top:10px !important; padding:13px 12px !important; font-size:19px !important; }
    #gvData div[style*="display: grid"], #gvData_Filter div[style*="display: grid"] { gap:9px !important; }
    #gvData .imghei3, #gvData_Filter .imghei3 { height:175px !important; }
    #gvData .buy_sell_label, #gvData_Filter .buy_sell_label { margin-left:7px !important; margin-right:7px !important; }
    .addtoButton { min-height:36px; font-size:12px; }
    .heroSlider img, .offerBanner img { border-radius:10px; }
    .website-footer-inner { grid-template-columns:1fr; gap:24px; padding:30px 16px 24px; }
    .website-footer-inner > div:first-child { grid-column:auto; }
    .website-footer-bottom { flex-direction:column; text-align:center; padding:13px 16px 16px; }
}