/* CAZ visual refresh. Loaded after page styles; business logic remains unchanged. */
/* Inter by Rasmus Andersson / Inter Project Authors. SIL OFL 1.1.
   Local font source: https://github.com/rsms/inter/tree/master/docs/font-files
   License: ../assets/fonts/LICENSE.txt */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/InterVariable.woff2') format('woff2');
}
:root {
  --caz-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --caz-bg: #13171c;
  --caz-panel: #22282f;
  --caz-line: #424b56;
  --caz-text: #f5f6f8;
  --caz-muted: #bac3cd;
  --caz-red: #b83239;
}
html, body { background: var(--caz-bg); color: var(--caz-text); }
body { font-size: 16px; line-height: 1.65; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
body, body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid) { font-family: var(--caz-font) !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
button, [role="button"] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
:focus-visible { outline: 3px solid #9fd4ee !important; outline-offset: 4px; }
input::placeholder, textarea::placeholder { color: #b6bfca !important; opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  background-color: #192027 !important; color: #f5f6f8 !important;
  border: 1px solid #53606e !important; border-radius: 10px !important;
  min-height: 46px; padding: 11px 14px; max-width: 100%;
}
select option { background: #20272f; color: #fff; }
button, .btn, .portal-btn, .utility, .admin-red-btn {
  border-radius: 10px; font-weight: 600; letter-spacing: .1px;
  text-transform: none; transition: background-color .18s, border-color .18s, transform .18s;
}
.btn, .login-btn, .btn-red, .checkout-btn, .admin-red-btn, .btn-add-header {
  background: var(--caz-red) !important; border: 1px solid #ce4f55 !important;
  color: #fff !important; min-height: 46px; border-radius: 10px;
  text-transform: none; letter-spacing: .1px; font-size: 15px;
}
.btn:hover, .login-btn:hover, .btn-red:hover, .checkout-btn:hover, .btn-add-header:hover { background: #a52830 !important; }
.btn-black, .filter-reset, .utility { background: #2b333e !important; border: 1px solid #56606e !important; color: #f5f6f8 !important; }
.navbar, .navbar.scrolled {
  background: rgba(22,27,33,.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid #3b434d; padding: 14px max(24px, calc((100vw - 1280px)/2)); gap: 20px;
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 8px; }
.nav-left a, .nav-left .dropdown { margin: 0; }
.navbar a { font-size: 15px; letter-spacing: 0; }
.nav-left > a, .dropdown-toggle { padding: 10px 14px; display: flex; align-items: center; min-height: 44px; border-radius: 9px; }
.navbar a:hover { background: #303944; text-decoration: none; }
.nav-right i { margin: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #48515d; border-radius: 12px; color: #f5f6f8; }
.nav-right i:hover { background: #3a3038; border-color: #de777e; }
.dropdown-menu { background: #252e38; border: 1px solid #566170; border-radius: 12px; padding: 8px; min-width: 190px; box-shadow: 0 16px 35px #0006; }
.dropdown-menu a { padding: 12px 16px; border-radius: 7px; }
.dropdown-menu a:hover { background: #394553; }
.dropdown.is-open .dropdown-menu { display: block; }
.dropdown:not(.is-open):hover .dropdown-menu { display: none; }
.dropdown-toggle::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #f2b5b8; border-bottom: 2px solid #f2b5b8; transform: rotate(45deg); margin: -4px 0 0 13px; }
.dropdown.is-open .dropdown-toggle::after { transform: rotate(225deg); margin-top: 4px; }
.hero, .cctv-page, .product-detail, .about-container, .contact-container, .portal-body {
  background-color: var(--caz-bg) !important;
  background-image: radial-gradient(ellipse at 85% 5%, #853a4229, transparent 48%), radial-gradient(ellipse at 5% 65%, #44667724, transparent 50%) !important;
  background-size: auto !important;
}
.hero { min-height: 78vh; padding: 70px 6%; }
.hero-content-wrapper { max-width: 1240px; margin: 0 auto; gap: 64px; }
.hero-content { flex: 1.2; }
.hero-content h1 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.12; text-transform: none; letter-spacing: -2px; margin: 0 0 24px; }
.hero-eyebrow, .catalog-eyebrow { color: #f0a3a8; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; }
.hero-description, .catalog-description { color: var(--caz-muted); font-size: 17px; line-height: 1.7; max-width: 550px; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-actions .btn { padding: 13px 23px; }
.hero-actions .secondary { background: #29313b !important; border-color: #59626e !important; }
.hero-image { flex: 1; margin: 0; padding: 28px; border: 1px solid #47515b; background: #ffffff08; border-radius: 30px; }
.hero-image img { width: 100%; max-width: 460px; height: auto; }
.cctv-page { padding: 48px max(24px, calc((100vw - 1280px)/2)) 80px; }
.product-page-title { text-align: left; font-size: clamp(32px, 4vw, 48px); text-transform: none; letter-spacing: -1px; margin: 0 0 8px; line-height: 1.2; }
.catalog-description { margin-bottom: 28px; max-width: 700px; }
.filter-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; align-items: end; gap: 14px; padding: 20px; margin: 0 0 30px; background: #242c35e6; border: 1px solid #46505d; border-radius: 16px; }
.filter-field { min-width: 0; display: grid; gap: 7px; color: #d2dae3; font-size: 13px; font-weight: 600; }
select.filter-select { width: 100%; min-width: 0; font-size: 14px; text-transform: none; letter-spacing: 0; appearance: none; -webkit-appearance: none; padding: 12px 40px 12px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f3c0c3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; }
.filter-reset { min-height: 46px; padding: 11px 18px; border-radius: 10px; font-size: 14px; text-transform: none; letter-spacing: 0; }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; max-width: 1280px; }
.product-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid #505964; border-radius: 20px; background: linear-gradient(145deg,#ffffff13,#ffffff05),rgba(38,46,56,.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 24px #0002; }
.product-card:hover { background: #303a46; border-color: #987479; transform: translateY(-3px); }
.product-card .product-link { display: block; flex: 1; }
.product-card img { background: #dce1e5; border: 0; border-radius: 12px; height: 210px; padding: 20px; margin-bottom: 17px; }
.product-name, .product-card.out-of-stock .product-name { color: #f5f6f8; font-size: 16px; font-weight: 600; line-height: 1.5; display: block; overflow: visible; overflow-wrap: anywhere; min-height: 48px; margin: 0 0 8px; }
.stock-count { color: #c6d6cb !important; font-size: 13px !important; letter-spacing: 0 !important; padding-bottom: 16px; }
.out-of-stock .stock-count { color: #f4b9bd !important; }
.out-of-stock-badge, .oos-badge { top: 24px; left: 24px; padding: 6px 10px; border-radius: 8px; background: #90313a; font-size: 11px; color: #fff; }
.product-bottom { gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 15px; border-color: #505964; }
.price { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.product-bottom i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #b83239; color: #fff !important; flex-shrink: 0; }
.product-bottom i:hover { transform: none; background: #972930; }
.product-bottom .cart-icon-disabled { color: #c1c7ce !important; background: #444c56; }
.product-detail { padding: 40px 5% 70px; min-height: calc(100vh - 74px); }
.product-box { max-height: none; border-radius: 24px; background: #252e38d9; border: 1px solid #495563; padding: 76px 32px 32px; gap: 34px; backdrop-filter: blur(18px); }
.back-btn { top: 20px; left: 24px; right: auto; width: auto; padding: 0 14px; gap: 8px; color: #eef1f5; border-radius: 9px; background: #303b48; border-color: #556273; }
.product-image-frame { height: 410px; border-radius: 16px; background: #dce1e5; border: none; }
.product-right { min-width: 0; padding-top: 0; }
.product-right h1 { text-transform: none; font-size: clamp(26px,3vw,36px); overflow-wrap: anywhere; }
.product-meta-tag { color: #f0a3a8; letter-spacing: 1px; font-size: 12px; }
.product-info-grid { gap: 10px; margin-bottom: 24px; }
.info-cell { min-width: 0; border-radius: 10px; background: #1c242d; border-color: #485360; padding: 12px; overflow-wrap: anywhere; }
.cell-label { color: #bdc8d4; font-size: 12px; letter-spacing: .3px; }
.interaction-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quantity-picker { grid-column: 1 / -1; justify-self: start; border-radius: 10px; overflow: hidden; border-color: #596674; background: #1a222b; }
.quantity-picker button { color: #f5f6f8; }
.add-to-cart-btn { min-height: 48px; height: auto; padding: 12px; border-radius: 10px; gap: 8px; background: #333f4c; border: 1px solid #66717f; font-weight: 600; }
.add-to-cart-btn[onclick="buyNow()"] { background: var(--caz-red) !important; border-color: #ce4f55 !important; }
.add-to-cart-btn:disabled { opacity: 1 !important; color: #d0d5dc; background: #444c56; }
.cart-overlay, .profile-overlay { background: #202831; border-color: #505b68; width: min(450px,100vw); height: 100dvh; }
.cart-overlay { right: 0; transform: translateX(100%); }
.cart-overlay.active { transform: translateX(0); }
.profile-overlay { overflow-y: auto; right: 0; transform: translateX(100%); }
.profile-overlay.active { transform: translateX(0); }
.cart-tabs { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; }
.tab { white-space: normal; border-radius: 8px; background: #333f4d; border-color: #536171; color: #f5f6f8; font-size: 12px; padding: 8px 11px; text-transform: none; }
.tab.active { background: #a92e36; border-color: #d76d75; }
.cart-body { min-height: 0; }
.cart-item, .cart-footer, .cart-tabs, .profile-field { border-color: #475360; }
.profile-field label, .profile-customer-id, .input-group label, .register-link p, .login-link p, .link-label, .intro-text, .footer-brand p, .footer-col ul li a, .footer-bottom, .dash-title p, .action p, .stat span { color: #c0cad6 !important; }
.profile-field .profile-val { overflow-wrap: anywhere; }
.profile-field button { min-width: min(180px,100%); width: auto !important; padding: 10px 14px; }
.profile-overlay .button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-overlay .button-row button { flex: 1; min-height: 46px; }
.portal-body { min-height: 100dvh; height: auto; padding: 40px 16px; }
.main-logo img { max-width: 100%; width: 280px; margin-bottom: 24px; }
.portal-btn { width: 100%; max-width: 340px; min-height: 56px; border-radius: 12px; background: #29323d; border-color: #536171; text-transform: none; font-size: 17px; letter-spacing: 0; }
.portal-btn:first-child { background: #ad3038; border-color: #cf5a62; }
.login-card { border-radius: 22px; border-color: #4a5664; background: #252e38e6; padding: 32px; box-shadow: 0 24px 60px #0003; }
.auth-heading { margin-bottom: 24px; font-size: 28px; letter-spacing: -.6px; }
.input-group label { text-transform: none; letter-spacing: 0; font-size: 14px; }
.register-link a, .login-link a, .text-red { color: #f2a7ad; }
.contact-link-item, .map-wrapper, .brand-card { border-radius: 16px; border-color: #495563; background: #252e38; }
.full-image-grid img { border-radius: 16px; }
.site-footer { background: #181e25; border-top: 1px solid #414b57; }
.footer-brand h2, .michroma, .brands-title { text-transform: none; letter-spacing: .2px; }
/* Legacy inline dim labels, including dynamically rendered cart and modal text. */
body :is(p,span,label,div,small,a)[style*="color:#555"], body :is(p,span,label,div,small,a)[style*="color: #555"],
body :is(p,span,label,div,small,a)[style*="color:#444"], body :is(p,span,label,div,small,a)[style*="color: #444"],
body :is(p,span,label,div,small,a)[style*="color:#666"], body :is(p,span,label,div,small,a)[style*="color:#777"],
body :is(p,span,label,div,small,a)[style*="color:#888"] { color: #bdc7d2 !important; }
/* Admin uses the same palette while retaining its page-specific layouts. */
body.caz-admin { overflow: auto; background-image: radial-gradient(ellipse at 100% 0,#853a4220,transparent 60%); }
.caz-admin .stat, .caz-admin .action, .caz-admin .product-item { border-radius: 16px; background: #252e38; border-color: #495564; }
.caz-admin .utility { border-radius: 10px; font-size: 14px; }
.caz-admin .header-main, .caz-admin .header-controls { flex-wrap: wrap; gap: 12px; }
.caz-admin .filter-row { grid-template-columns: repeat(4,minmax(0,1fr)) auto; }
.caz-admin th { color: #dce2e9; background: #2d3743; }
.caz-admin td { color: #e8edf3; border-color: #45515e; }
.caz-admin .dashboard-wrap { margin-top: 40px; }
.field-label, .field-hint, .hint-text, .fmt-hint, .left-sub { color: #bec9d6 !important; }
.caz-admin .manage-wrapper { border-radius: 20px; border-color: #495563; }
@media (max-width: 560px) { .form-grid, .field-row { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-content-wrapper { gap: 30px; }
}
@media (max-width: 800px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-row, .caz-admin .filter-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-reset { grid-column: 1 / -1; }
  .hero-content-wrapper { flex-direction: column; align-items: stretch; }
  .hero-image { max-width: 450px; }
  .hero { padding: 44px 24px; }
  .hero-content h1 { letter-spacing: -1px; }
  .product-box { grid-template-columns: 1fr; }
  .product-info-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .navbar { flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  .nav-left { justify-content: space-between; width: 100%; gap: 0; }
  .nav-right { margin-left: auto; }
  .nav-left > a, .dropdown-toggle { padding: 8px 10px; }
  .dropdown-menu { left: auto; right: 0; }
  .cctv-page { padding: 32px 16px 48px; }
  .product-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .product-card img { height: 235px; }
  .filter-row, .caz-admin .filter-row { padding: 14px; gap: 12px; grid-template-columns: minmax(0,1fr); }
  .product-detail { padding: 22px 14px; }
  .product-box { padding: 76px 18px 24px; }
  .product-image-frame { height: 280px; padding: 20px; }
  .product-info-grid { grid-template-columns: 1fr; }
  .interaction-row { grid-template-columns: 1fr; }
  .cart-header, .cart-body, .cart-footer { padding-left: 16px; padding-right: 16px; }
  .login-card { padding: 25px 20px; }
  .contact-container, .about-container { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }