/* ═══════════════════════════════════════════════════════════════
   TRIJAL MART — PROFESSIONAL REDESIGN v2
   Senior-designer quality: restrained, purposeful, refined.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

:root {
  --p-navy:      #0F1D36;
  --p-blue:      #1A4FC8;
  --p-blue-h:    #1240A8;
  --p-blue-lt:   #EDF2FF;
  --p-blue-gl:   rgba(26,79,200,.12);
  --p-bg:        #F4F6FB;
  --p-surface:   #FFFFFF;
  --p-border:    #E1E7F2;
  --p-border-lt: #ECF0F8;
  --p-text:      #0E1B2E;
  --p-text2:     #3A4A60;
  --p-muted:     #6B7A93;
  --p-success:   #15803d;
  --p-danger:    #c62828;
  --p-font-d:    'Outfit', sans-serif;
  --p-font-b:    'DM Sans', system-ui, -apple-system, sans-serif;
  --p-ease:      cubic-bezier(.22,.61,.36,1);
  --p-ease-out:  cubic-bezier(0,0,.2,1);
  --primary:        #1A4FC8;
  --primary-strong: #1240A8;
  --accent:         #1A4FC8;
  --text:           #0E1B2E;
  --muted:          #6B7A93;
  --line:           #E1E7F2;
  --surface:        #F0F3FB;
  --surface-2:      #EDF2FF;
  --shadow:         0 2px 12px rgba(14,27,46,.07);
  --shadow-lg:      0 8px 32px rgba(14,27,46,.11);
}

/* BASE */
html, body { font-family: var(--p-font-b) !important; background: var(--p-bg) !important; color: var(--p-text) !important; -webkit-font-smoothing: antialiased; }

/* UTILITY BAR */
.utility-bar, .utility-bar-clean { background: var(--p-navy) !important; height: 36px !important; }
.utility-inner, .utility-inner-clean { min-height: 36px !important; }
.utility-msg { font-family: var(--p-font-b) !important; font-size: 12px !important; font-weight: 500 !important; color: rgba(255,255,255,.80) !important; }
.utility-contact-links a { font-family: var(--p-font-b) !important; font-size: 12px !important; color: rgba(255,255,255,.65) !important; }
.utility-contact-links a:hover { color: rgba(255,255,255,.95) !important; }

/* HEADER — static, no scroll compact ever */
.store-header, .ref-header { position: sticky !important; top: 0 !important; z-index: 60 !important; background: #fff !important; border-bottom: 1px solid var(--p-border) !important; box-shadow: 0 1px 0 var(--p-border-lt) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none !important; }
.store-header.scrolled, .ref-header.scrolled { box-shadow: 0 1px 0 var(--p-border-lt) !important; }
.ref-header-main, .header-main, .ref-header-main-clean { padding: 16px 0 !important; gap: 20px !important; transition: none !important; }
.ref-header.scrolled .ref-header-main, .store-header.scrolled .header-main { padding: 16px 0 !important; }

/* SEARCH BAR */
.search-form-main, .ref-search-form { background: var(--p-bg) !important; border: 1.5px solid var(--p-border) !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color .18s, box-shadow .18s !important; height: 46px !important; overflow: hidden; }
.search-form-main:focus-within, .ref-search-form:focus-within { border-color: var(--p-blue) !important; box-shadow: 0 0 0 3px var(--p-blue-gl) !important; background: #fff !important; }
.search-form-main input, .ref-search-form input { font-family: var(--p-font-b) !important; font-size: 13.5px !important; padding: 0 14px !important; height: 100% !important; background: transparent !important; color: var(--p-text) !important; }
.search-form-main input::placeholder, .ref-search-form input::placeholder { color: var(--p-muted) !important; font-size: 13px !important; }
.search-form-main button, .ref-search-form button, .search-form-main .btn-accent, .ref-search-form .btn-accent { background: var(--p-blue) !important; border-radius: 0 8px 8px 0 !important; width: 46px !important; height: 100% !important; border: none !important; display: grid !important; place-items: center !important; transition: background .15s !important; }
.search-form-main button:hover, .ref-search-form button:hover, .search-form-main .btn-accent:hover, .ref-search-form .btn-accent:hover { background: var(--p-blue-h) !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }
.search-category-select, .ref-search-form select, .search-form-main select { border: none !important; border-right: 1px solid var(--p-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--p-text2) !important; height: 100% !important; }
.search-category-select:focus, .ref-search-form select:focus, .search-form-main select:focus { box-shadow: none !important; border-color: transparent !important; border-right-color: var(--p-border) !important; }

/* HEADER ACTIONS */
.header-action { font-family: var(--p-font-b) !important; color: var(--p-text2) !important; border-radius: 8px !important; padding: 7px 8px !important; gap: 3px !important; transition: background .15s, color .15s !important; transform: none !important; }
.header-action:hover { background: var(--p-blue-lt) !important; color: var(--p-blue) !important; transform: none !important; }
.header-action span { font-size: 11px !important; font-weight: 600 !important; }
.cart-badge { background: var(--p-blue) !important; font-size: 9px !important; font-weight: 800 !important; padding: 1px 5px !important; top: -4px !important; right: -6px !important; border-radius: 99px !important; }
.header-action-cta, .header-action-cta:visited, .header-action-cta:focus { background: var(--p-blue) !important; color: #fff !important; border-radius: 8px !important; padding: 9px 14px !important; font-weight: 700 !important; gap: 6px !important; box-shadow: 0 2px 10px var(--p-blue-gl) !important; border: none !important; transition: background .15s !important; }
.header-action-cta:hover { background: var(--p-blue-h) !important; color: #fff !important; transform: none !important; box-shadow: 0 4px 16px rgba(26,79,200,.22) !important; }
.header-action-cta * { color: #fff !important; }

/* MEGA NAV */
.mega-nav, .ref-nav { background: #fff !important; border-top: 1px solid var(--p-border) !important; box-shadow: none !important; }
.mega-nav-row, .ref-nav-row { gap: 0 !important; }
.mega-link, .ref-nav-link { font-family: var(--p-font-b) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--p-text2) !important; padding: 13px 13px !important; border-bottom: 2px solid transparent !important; transition: color .15s, border-color .15s !important; }
.mega-link:hover, .ref-nav-link:hover, .mega-item.open .mega-link { color: var(--p-blue) !important; border-bottom-color: var(--p-blue) !important; }
.home-item .ref-nav-link { color: var(--p-text) !important; font-weight: 700 !important; }
.mega-dropdown { border-top: 2px solid var(--p-blue) !important; box-shadow: 0 12px 40px rgba(14,27,46,.12) !important; border-radius: 0 0 12px 12px !important; }

/* TICKER STRIP */
.kg-ticker-strip { background: #fff !important; border-bottom: 1px solid var(--p-border) !important; height: 38px !important; }
.kg-ticker-item { font-family: var(--p-font-b) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--p-text2) !important; padding: 0 28px !important; }
.kg-ticker-item::before { content: '·' !important; color: var(--p-blue) !important; margin-right: 28px !important; font-size: 18px !important; vertical-align: middle; }

/* HERO — proportionate, editorial */
.kg-hero { min-height: 540px !important; max-height: 620px !important; height: 60vh !important; }
.kg-hero-shell { min-height: 540px !important; max-height: 620px !important; height: 60vh !important; padding-bottom: 80px !important; padding-top: 56px !important; align-items: center !important; }
.kg-hero-overlay { background: linear-gradient(100deg, rgba(9,14,30,.80) 0%, rgba(9,14,30,.50) 46%, rgba(9,14,30,.08) 100%) !important; }
.kg-hero-copy { max-width: 560px !important; }
.kg-hero-copy h1 { font-family: var(--p-font-d) !important; font-size: clamp(34px, 4.5vw, 58px) !important; line-height: 1.06 !important; letter-spacing: -.04em !important; text-transform: none !important; font-weight: 800 !important; margin: 0 0 16px !important; color: #fff !important; }
.kg-hero-copy p { font-family: var(--p-font-b) !important; font-size: 16px !important; line-height: 1.65 !important; color: rgba(255,255,255,.82) !important; margin: 0 0 28px !important; }
.kg-eyebrow { font-family: var(--p-font-b) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 99px !important; padding: 5px 14px !important; display: inline-flex !important; align-items: center !important; margin-bottom: 16px !important; }
.kg-hero-actions { margin-bottom: 22px !important; gap: 10px !important; }
.kg-btn-primary { background: #fff !important; color: var(--p-text) !important; border-radius: 8px !important; min-height: 48px !important; padding: 0 24px !important; font-family: var(--p-font-b) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0 !important; box-shadow: 0 4px 16px rgba(0,0,0,.18) !important; transition: transform .2s var(--p-ease), box-shadow .2s !important; }
.kg-btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.22) !important; }
.kg-btn-secondary { border: 1.5px solid rgba(255,255,255,.28) !important; background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.92) !important; border-radius: 8px !important; min-height: 48px !important; padding: 0 22px !important; font-family: var(--p-font-b) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0 !important; backdrop-filter: none !important; transition: background .2s, transform .2s var(--p-ease) !important; }
.kg-btn-secondary:hover { background: rgba(255,255,255,.14) !important; transform: translateY(-2px) !important; box-shadow: none !important; }
.kg-hero-meta { gap: 8px !important; }
.kg-hero-meta span { font-family: var(--p-font-b) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; padding: 0 11px !important; min-height: 28px !important; border: 1px solid rgba(255,255,255,.15) !important; background: rgba(255,255,255,.05) !important; border-radius: 4px !important; }
/* Arrows hidden — navigation via dots only */
.kg-hero-arrow { display: none !important; }
.kg-hero-controls { bottom: 22px !important; gap: 6px !important; padding: 0 28px !important; justify-content: flex-end !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; }
.kg-hero-dot { width: 28px !important; min-width: 0 !important; }
.kg-hero-dot-label { display: none !important; }
.kg-hero-dot-bar { height: 3px !important; background: rgba(255,255,255,.25) !important; border-radius: 2px !important; }
.kg-hero-dot-bar i { background: #fff !important; border-radius: 2px !important; }

/* SERVICE STRIP */
.kg-service-strip { background: #fff !important; border-bottom: 1px solid var(--p-border) !important; margin-top: 0 !important; padding: 0 !important; }
.kg-service-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; border-left: 1px solid var(--p-border) !important; }
.kg-service-card { background: #fff !important; border: none !important; border-right: 1px solid var(--p-border) !important; border-radius: 0 !important; padding: 20px 18px !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; transition: background .15s !important; display: flex !important; }
.kg-service-card:hover { background: var(--p-bg) !important; }
.kg-service-card .svc-icon { font-size: 20px !important; line-height: 1 !important; margin-top: 2px !important; flex-shrink: 0 !important; }
.kg-service-card strong { font-family: var(--p-font-b) !important; font-size: 14px !important; font-weight: 700 !important; color: var(--p-text) !important; display: block !important; margin-bottom: 3px !important; }
.kg-service-card span { font-family: var(--p-font-b) !important; font-size: 12.5px !important; color: var(--p-muted) !important; line-height: 1.55 !important; }

/* SECTION HEADERS */
.ref-section-head h2, .section-head h2, .ref-section-title { font-family: var(--p-font-d) !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: -.025em !important; color: var(--p-text) !important; }
.ref-section-head a, .section-head a { font-family: var(--p-font-b) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--p-blue) !important; }

/* PRODUCT CARDS */
.modern-product-card { background: #fff !important; border: 1px solid var(--p-border-lt) !important; border-radius: 12px !important; overflow: hidden !important; transition: box-shadow .22s var(--p-ease), transform .22s var(--p-ease), border-color .22s !important; }
.modern-product-card:hover { box-shadow: 0 8px 28px rgba(14,27,46,.10) !important; transform: translateY(-3px) !important; border-color: var(--p-border) !important; }
.reference-thumb, .product-thumb-modern { background: #F8F9FC !important; border-bottom: 1px solid var(--p-border-lt) !important; }
.reference-product-copy { padding: 12px 14px 14px !important; }
.product-card-brand { font-family: var(--p-font-b) !important; font-size: 10.5px !important; font-weight: 700 !important; color: var(--p-muted) !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.reference-product-copy h3 { font-family: var(--p-font-b) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--p-text) !important; line-height: 1.45 !important; }
.price-final { font-family: var(--p-font-d) !important; font-size: 15.5px !important; font-weight: 700 !important; color: var(--p-text) !important; }
.price-mrp { color: var(--p-muted) !important; font-size: 12px !important; }
.price-discount { background: #f0fdf4 !important; color: var(--p-success) !important; font-size: 11px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 4px !important; }
.modern-product-card .btn { border-radius: 7px !important; padding: 9px 10px !important; font-size: 12.5px !important; font-weight: 700 !important; }
.wishlist-icon { background: rgba(255,255,255,.94) !important; border-radius: 50% !important; box-shadow: 0 2px 8px rgba(14,27,46,.10) !important; width: 30px !important; height: 30px !important; transition: transform .18s var(--p-ease) !important; }
.wishlist-icon:hover { transform: scale(1.12) !important; background: #fff !important; }
.tag-badge { border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; }
.modern-product-card .tag-badge { background: #e53935 !important; color: #fff !important; }

/* BUTTONS */
.btn { font-family: var(--p-font-b) !important; font-weight: 700 !important; border-radius: 8px !important; padding: 12px 22px !important; font-size: 14px !important; transition: background .15s, box-shadow .15s, transform .18s var(--p-ease) !important; }
.btn:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(26,79,200,.18) !important; opacity: 1 !important; }
.btn:active { transform: none !important; }
.btn-accent, .btn-primary { background: var(--p-blue) !important; color: #fff !important; }
.btn-accent:hover, .btn-primary:hover { background: var(--p-blue-h) !important; }
.btn-dark { background: var(--p-text) !important; color: #fff !important; }
.btn-dark:hover { background: #1a2940 !important; }
.btn-light { background: var(--p-bg) !important; color: var(--p-text2) !important; border: 1px solid var(--p-border) !important; box-shadow: none !important; }
.btn-light:hover { background: var(--p-blue-lt) !important; color: var(--p-blue) !important; border-color: rgba(26,79,200,.18) !important; box-shadow: none !important; }

/* FLASH */
.flash { font-family: var(--p-font-b) !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; padding: 12px 16px !important; border: 1px solid; }
.flash.success { background: #f0fdf4 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.flash.warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }
.flash.danger  { background: #fff1f2 !important; color: #9f1239 !important; border-color: #fecdd3 !important; }

/* FORMS */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], textarea, select { font-family: var(--p-font-b) !important; border: 1.5px solid var(--p-border) !important; border-radius: 8px !important; background: #fff !important; color: var(--p-text) !important; transition: border-color .15s, box-shadow .15s !important; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="url"]:focus, textarea:focus, select:focus { border-color: var(--p-blue) !important; box-shadow: 0 0 0 3px var(--p-blue-gl) !important; outline: none !important; }

/* PRODUCT PAGE */
.tm-product-page { background: var(--p-bg) !important; }
.tm-product-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr) 280px !important; gap: 28px !important; }
.tm-product-breadcrumb { font-family: var(--p-font-b) !important; font-size: 12.5px !important; color: var(--p-muted) !important; margin-bottom: 16px !important; }
.tm-product-breadcrumb a { color: var(--p-muted) !important; }
.tm-product-breadcrumb a:hover { color: var(--p-blue) !important; }
.tm-product-main-media { background: #fff !important; border: 1px solid var(--p-border) !important; border-radius: 14px !important; overflow: hidden !important; }
.gallery-nav { background: rgba(255,255,255,.96) !important; border: 1px solid var(--p-border) !important; border-radius: 50% !important; width: 38px !important; height: 38px !important; box-shadow: 0 2px 8px rgba(14,27,46,.08) !important; font-size: 22px !important; display: grid !important; place-items: center !important; color: var(--p-text) !important; cursor: pointer !important; transition: background .14s, box-shadow .14s !important; }
.gallery-nav:hover { background: #fff !important; box-shadow: 0 4px 14px rgba(14,27,46,.12) !important; }
.tm-product-thumb { border-radius: 8px !important; border: 1.5px solid var(--p-border) !important; background: #fff !important; width: 64px !important; height: 64px !important; cursor: pointer !important; transition: border-color .15s, box-shadow .15s !important; overflow: hidden !important; }
.tm-product-thumb.is-active { border-color: var(--p-blue) !important; box-shadow: 0 0 0 2px var(--p-blue-gl) !important; }
.tm-product-thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 4px !important; }
.tm-product-kicker { font-family: var(--p-font-b) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--p-blue) !important; margin: 0 0 8px !important; }
.tm-product-title { font-family: var(--p-font-d) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.025em !important; color: var(--p-text) !important; margin: 0 0 12px !important; }
.tm-product-rating-row { gap: 10px !important; padding-bottom: 16px !important; margin-bottom: 16px !important; border-bottom: 1px solid var(--p-border) !important; }
.rating-pill { font-family: var(--p-font-b) !important; font-size: 12px !important; font-weight: 700 !important; background: #fef3c7 !important; color: #92400e !important; padding: 3px 10px !important; border-radius: 4px !important; }
.rating-count { font-family: var(--p-font-b) !important; font-size: 12.5px !important; color: var(--p-muted) !important; }
.tm-product-price { font-family: var(--p-font-d) !important; font-size: 36px !important; font-weight: 800 !important; letter-spacing: -.04em !important; color: var(--p-text) !important; }
.tm-product-mrp { font-size: 14px !important; color: var(--p-muted) !important; text-decoration: line-through !important; }
.tm-product-discount { font-family: var(--p-font-b) !important; font-size: 11.5px !important; font-weight: 700 !important; background: #f0fdf4 !important; color: var(--p-success) !important; padding: 3px 10px !important; border-radius: 4px !important; }
.tm-product-tax-note { font-family: var(--p-font-b) !important; font-size: 12px !important; color: var(--p-muted) !important; margin-top: 6px !important; }
.tm-product-panel { border: 1px solid var(--p-border) !important; border-radius: 10px !important; padding: 14px 16px !important; background: #fff !important; margin-top: 14px !important; }
.tm-product-description-panel h2 { font-family: var(--p-font-d) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--p-text) !important; margin: 0 0 10px !important; }
.tm-product-description-text { font-family: var(--p-font-b) !important; color: var(--p-text2) !important; font-size: 13.5px !important; line-height: 1.7 !important; }
.tm-product-cart-box { background: #fff !important; border: 1px solid var(--p-border) !important; border-radius: 14px !important; padding: 20px 18px !important; box-shadow: 0 2px 12px rgba(14,27,46,.06) !important; }
.cart-box-price { font-family: var(--p-font-d) !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.03em !important; color: var(--p-text) !important; }
.cart-box-mrp { font-size: 13.5px !important; color: var(--p-muted) !important; text-decoration: line-through !important; }
.cart-box-tax { font-size: 11.5px !important; color: var(--p-muted) !important; }
.cart-box-stock { font-size: 13px !important; font-weight: 700 !important; margin-bottom: 14px !important; }
.tm-qty-row { background: var(--p-bg) !important; border: 1px solid var(--p-border) !important; border-radius: 8px !important; padding: 10px 12px !important; }
.tm-qty-row label { font-family: var(--p-font-b) !important; font-size: 13px !important; font-weight: 600 !important; }
.tm-qty-row input { width: 64px !important; height: 34px !important; border: 1px solid var(--p-border) !important; border-radius: 6px !important; font-family: var(--p-font-b) !important; font-size: 14px !important; text-align: center !important; background: #fff !important; }
.tm-product-action-buttons .btn { border-radius: 8px !important; min-height: 46px !important; font-family: var(--p-font-b) !important; font-size: 14px !important; font-weight: 700 !important; }
.cart-box-trust { border-top: 1px solid var(--p-border) !important; padding-top: 14px !important; margin-top: 16px !important; }
.cart-trust-item { font-family: var(--p-font-b) !important; font-size: 12px !important; color: var(--p-muted) !important; }

/* DEPARTMENT GRID */
.ref-department-item { border-radius: 12px !important; border: 1px solid transparent !important; padding: 14px 8px !important; transition: background .18s, transform .18s var(--p-ease), border-color .18s !important; }
.ref-department-item:hover { background: var(--p-blue-lt) !important; border-color: rgba(26,79,200,.12) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(26,79,200,.08) !important; }
.ref-department-icon { width: 72px !important; height: 72px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid var(--p-border-lt) !important; box-shadow: 0 1px 4px rgba(14,27,46,.06) !important; }
.ref-department-name { font-family: var(--p-font-b) !important; font-size: 11px !important; font-weight: 700 !important; color: var(--p-text) !important; }

/* PROMO */
.ref-promo-card { border-radius: 16px !important; }
.ref-promo-copy h3 { font-family: var(--p-font-d) !important; font-size: 26px !important; letter-spacing: -.025em !important; }
.ref-promo-btn { border-radius: 7px !important; font-size: 13px !important; font-weight: 700 !important; }

/* FOOTER */
.ftrust-strip { background: #fff !important; border-top: 1px solid var(--p-border) !important; border-bottom: 1px solid var(--p-border) !important; padding: 18px 0 !important; }
.ftrust-item { font-family: var(--p-font-b) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--p-text) !important; gap: 8px !important; }
.ftrust-item svg { color: var(--p-blue) !important; }
.site-footer { background: #0C1B3A !important; }
.flogo-text { font-family: var(--p-font-d) !important; font-weight: 800 !important; }
.ftagline, .flink, .fcontact-row { font-family: var(--p-font-b) !important; }
.fcol-head { font-family: var(--p-font-b) !important; font-size: 10.5px !important; letter-spacing: .1em !important; font-weight: 700 !important; text-transform: uppercase !important; }
.flink { font-size: 13px !important; color: #8CA3BE !important; transition: color .14s, padding-left .14s !important; }
.flink:hover { color: #fff !important; padding-left: 3px !important; }
.fpay-badge { font-family: var(--p-font-b) !important; font-size: 11.5px !important; font-weight: 700 !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 4px !important; color: #b0c4d8 !important; padding: 3px 10px !important; }
.fsocial-link { border-radius: 6px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: #8CA3BE !important; }
.fsocial-link:hover { background: var(--p-blue) !important; color: #fff !important; border-color: var(--p-blue) !important; }
.back-to-top-btn { background: var(--p-blue) !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(26,79,200,.28) !important; }
.back-to-top-btn:hover { background: var(--p-blue-h) !important; }

/* CATEGORY HERO */
.ref-category-hero { background: linear-gradient(120deg, #0F1D36 0%, var(--p-blue) 100%) !important; padding: 44px 0 !important; }
.ref-category-hero-inner h1 { font-family: var(--p-font-d) !important; font-weight: 800 !important; letter-spacing: -.03em !important; font-size: 38px !important; }

/* REVIEWS */
.tm-reviews-heading { font-family: var(--p-font-d) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.tm-review-card { border: 1px solid var(--p-border) !important; border-radius: 10px !important; background: #fff !important; }

/* SEARCH SUGGEST */
.search-suggest { border: 1px solid var(--p-border) !important; border-radius: 10px !important; box-shadow: 0 8px 28px rgba(14,27,46,.10) !important; }
.search-suggest a { font-family: var(--p-font-b) !important; font-size: 13.5px !important; border-radius: 6px !important; }
.search-suggest a:hover, .search-suggest a.active { background: var(--p-blue-lt) !important; }

/* PAGE/LISTING HEADERS */
.page-header h1, .listing-copy h1, .modern-product-copy h1, .ref-product-copy h1 { font-family: var(--p-font-d) !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
.auth-kicker { font-family: var(--p-font-b) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: var(--p-blue) !important; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .kg-hero, .kg-hero-shell { min-height: 460px !important; max-height: 520px !important; height: 55vw !important; }
  .tm-product-layout { grid-template-columns: minmax(0, 420px) minmax(0, 1fr) !important; }
}
@media (max-width: 768px) {
  .kg-hero, .kg-hero-shell { min-height: 360px !important; max-height: 420px !important; height: 70vw !important; }
  .kg-hero-copy h1 { font-size: clamp(26px, 8vw, 38px) !important; margin-bottom: 12px !important; }
  .kg-hero-copy p { font-size: 14px !important; }
  .kg-btn-primary, .kg-btn-secondary { min-height: 42px !important; padding: 0 18px !important; font-size: 13px !important; }
  .kg-hero-controls { justify-content: center !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; }
  .kg-service-grid { grid-template-columns: 1fr 1fr !important; border-left: none !important; }
  .kg-service-card { border-right: none !important; border-bottom: 1px solid var(--p-border) !important; }
}
@media (max-width: 480px) {
  .kg-hero, .kg-hero-shell { min-height: 300px !important; height: 80vw !important; }
  .kg-hero-copy h1 { font-size: 26px !important; }
  .kg-service-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — PRODUCT PAGE ADDITIONS
══════════════════════════════════════════════════════════════ */

/* Pincode delivery checker */
.pcd-widget { margin-top:16px; padding-top:16px; border-top:1px solid var(--p-border); }
.pcd-label { font-family:var(--p-font-b) !important; font-size:12px; font-weight:700; color:var(--p-text2); margin:0 0 8px; }
.pcd-form { display:flex; gap:6px; }
.pcd-input { flex:1; height:38px; padding:0 11px; border:1.5px solid var(--p-border); border-radius:7px; font-family:var(--p-font-b); font-size:13px; background:#fff; color:var(--p-text); transition:border-color .15s; }
.pcd-input:focus { border-color:var(--p-blue); box-shadow:0 0 0 3px var(--p-blue-gl); outline:none; }
.pcd-btn { height:38px; padding:0 14px; background:var(--p-blue); color:#fff; border:none; border-radius:7px; font-family:var(--p-font-b); font-size:12.5px; font-weight:700; cursor:pointer; transition:background .15s; flex-shrink:0; }
.pcd-btn:hover { background:var(--p-blue-h); }
.pcd-result { margin-top:8px; font-family:var(--p-font-b); font-size:12.5px; line-height:1.5; min-height:18px; }
.pcd-ok { color:var(--p-success); }
.pcd-err { color:var(--p-danger); }
.pcd-loading { color:var(--p-muted); }

/* WhatsApp share row */
.tm-share-row { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.tm-share-label { font-family:var(--p-font-b); font-size:12px; font-weight:700; color:var(--p-muted); text-transform:uppercase; letter-spacing:.08em; }
.tm-share-wa { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:#25D366; color:#fff; border-radius:7px; font-family:var(--p-font-b); font-size:12.5px; font-weight:700; text-decoration:none; transition:background .15s; }
.tm-share-wa:hover { background:#1da851; color:#fff; }
.tm-share-copy { padding:7px 14px; background:var(--p-bg); color:var(--p-text2); border:1.5px solid var(--p-border); border-radius:7px; font-family:var(--p-font-b); font-size:12.5px; font-weight:700; cursor:pointer; transition:background .15s, border-color .15s; }
.tm-share-copy:hover { background:var(--p-blue-lt); border-color:rgba(26,79,200,.18); color:var(--p-blue); }

/* Related products section */
.tm-related-section { background:var(--p-bg); border-top:1px solid var(--p-border); }
.tm-related-section .ref-product-grid { display:grid; }

@media (max-width:900px) {
  .tm-related-section .ref-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:480px) {
  .tm-related-section .ref-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tm-share-row { gap:8px; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — TOAST NOTIFICATIONS + CART STEPPER
══════════════════════════════════════════════════════════════ */

/* Toast container */
#tm-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 340px;
  width: calc(100vw - 32px);
}

/* Individual toast */
.tm-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 13px 14px;
  box-shadow: 0 8px 28px rgba(14,27,46,.13);
  font-family: var(--p-font-b);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p-text);
  pointer-events: all;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s var(--p-ease), transform .22s var(--p-ease);
  border-left: 3px solid var(--p-border);
}
.tm-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tm-toast--success { border-left-color: var(--p-success); }
.tm-toast--error   { border-left-color: var(--p-danger); }
.tm-toast--info    { border-left-color: var(--p-blue); }

.tm-toast-icon {
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.tm-toast--success .tm-toast-icon { color: var(--p-success); }
.tm-toast--error   .tm-toast-icon { color: var(--p-danger); }
.tm-toast--info    .tm-toast-icon { color: var(--p-blue); }

.tm-toast-msg { flex: 1; line-height: 1.4; }

.tm-toast-close {
  background: none;
  border: none;
  color: var(--p-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .14s;
}
.tm-toast-close:hover { color: var(--p-text); }

@media (max-width: 480px) {
  #tm-toast-container {
    bottom: 80px; /* above mobile sticky bar */
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 5 — RECENTLY VIEWED + BACK IN STOCK NOTIFY
══════════════════════════════════════════════════════════════ */

/* Recently viewed section */
.tm-recently-viewed-section {
  background: var(--p-bg);
  border-top: 1px solid var(--p-border);
}
.tm-recently-viewed-section .ref-product-grid {
  display: grid;
}
@media (max-width: 900px) {
  .tm-recently-viewed-section .ref-product-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Back-in-stock notify block */
.notify-stock-block {
  margin-top: 14px;
  padding: 16px;
  background: #fefce8;
  border: 1px solid #fef08a;
  border-radius: 10px;
}
.notify-stock-label {
  font-family: var(--p-font-b);
  font-size: 13px;
  font-weight: 700;
  color: var(--p-text);
  margin: 0 0 10px;
}
.notify-stock-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notify-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid #fde68a;
  border-radius: 8px;
  font-family: var(--p-font-b);
  font-size: 13px;
  background: #fff;
  color: var(--p-text);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.notify-input:focus {
  border-color: var(--p-blue);
  box-shadow: 0 0 0 3px var(--p-blue-gl);
  outline: none;
}
.notify-btn {
  height: 40px;
  padding: 0 18px;
  background: var(--p-text);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--p-font-b);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  align-self: flex-start;
}
.notify-btn:hover  { background: #1a2940; }
.notify-btn:disabled { opacity: .6; cursor: not-allowed; }
.notify-result {
  font-family: var(--p-font-b);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.5;
  font-weight: 600;
}
.notify-result.ok  { color: var(--p-success); }
.notify-result.err { color: var(--p-danger); }

/* ══════════════════════════════════════════════════════════════
   ISSUE FIXES — product card overlap, department, lightbox
══════════════════════════════════════════════════════════════ */

/* Fix 1 — Coming Soon / Out of Stock label sits ABOVE quick-view,
   never overlap. Quick-view hides when status label is present. */
.coming-soon-label {
  z-index: 4 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 9px 0 !important;
  background: rgba(15,23,42,.82) !important;
  backdrop-filter: blur(4px) !important;
}
/* Hide quick-view when coming-soon label is present */
.product-thumb-modern:has(.coming-soon-label) .product-quick-view {
  display: none !important;
}

/* Fix 2 — Department cards: clean professional style, no rotation, no blobs */
.kg-department-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
}
.kg-department-card::before {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}
.kg-department-card::after {
  display: none !important;
  content: none !important;
}
.kg-department-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.09) !important;
  border-color: #d0d9ea !important;
}
.kg-department-card:hover::before { opacity: 0 !important; }
.kg-department-card:hover::after  { transform: none !important; }
.kg-department-visual {
  border-radius: 14px !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.kg-department-card:hover .kg-department-visual {
  transform: scale(1.06) !important;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.08), 0 6px 16px rgba(26,79,200,.12) !important;
}
.kg-department-copy strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.kg-department-copy small {
  font-size: 12px !important;
}
.kg-department-arrow {
  background: #111827 !important;
  transition: transform .22s ease, background .18s ease !important;
  flex-shrink: 0 !important;
}
.kg-department-card:hover .kg-department-arrow {
  transform: translateX(3px) !important;
  background: var(--p-blue, #1A4FC8) !important;
}

/* Fix 3 — Lightbox prev/next arrows */
.lightbox-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lightbox-prev,
.lightbox-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 22px !important;
  line-height: 1 !important;
  z-index: 10 !important;
  backdrop-filter: blur(8px) !important;
  transition: background .15s !important;
}
.lightbox-prev { left: 16px !important; }
.lightbox-next { right: 16px !important; }
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255,255,255,.28) !important;
}