/**
 * SITE SHELL — canonical, single source of truth for the universal chrome:
 * top strip, header, logo, desktop nav, mobile drawer/submenu panels,
 * announcement bar, and footer (incl. footer WhatsApp/logo).
 *
 * This file is loaded LAST (from templates/partials/footer.php, physically
 * the last stylesheet reference in every page) so it always wins any
 * same-specificity cascade tie against page-specific/legacy captured CSS —
 * including duplicate loads of application.css that some destination pages
 * still carry in <head>. Do NOT add page-specific/content rules here.
 *
 * The shared quote-list drawer (assets/css/quote.css) and the footer's own
 * inline WhatsApp/RFQ-tab/back-to-top styles are already single-canonical
 * and are left where they are.
 */

/* ---- TOP STRIP ---- */
.header-strip { background:var(--dark-2); border-bottom:1px solid rgba(255,255,255,.05); height:var(--strip-h); display:flex; align-items:center; }
.hstrip-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; box-sizing:border-box; width:100%; max-width:var(--container-wide); margin:0 auto; padding:0 40px; }
.hstrip-left { display:flex; align-items:center; gap:14px; }
.hstrip-origin { display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.45); }
.hstrip-dot { width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0; animation:pulse 2s ease-in-out infinite; }
.hstrip-cert { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:rgba(255,255,255,.45); padding:3px 10px; border-radius:100px; border:1px solid rgba(255,255,255,.08); }
.hstrip-cert svg { color:#4ade80; flex-shrink:0; }
.hstrip-right { display:flex; align-items:center; gap:18px; }
.hstrip-link { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.5); transition:color var(--tr); }
.hstrip-link:hover { color:#fff; }
.hstrip-link svg { flex-shrink:0; opacity:.7; }
.hstrip-whatsapp { color:#4ade80; }
.hstrip-whatsapp:hover { color:#86efac; }

/* ---- MAIN HEADER ---- */
.site-header { position:sticky; top:0; z-index:500; background:var(--dark); border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 2px 20px rgba(0,0,0,.4); height:var(--header-h); display:flex; align-items:center; }
.site-header.scrolled { background:rgba(8,13,20,.97); backdrop-filter:blur(12px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; box-sizing:border-box; width:100%; max-width:var(--container-wide); margin:0 auto; padding:0 40px; }
.site-logo { flex-shrink:0; }
.site-logo img,.site-logo .custom-logo { height:111px; width:auto; max-width:none; display:block; }
.logo-text-link { display:flex; flex-direction:column; }
.logo-text-name { font-family:var(--ff-display); font-size:20px; font-weight:800; color:#fff; letter-spacing:.3px; line-height:1.1; }
.logo-text-tag { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:1.5px; text-transform:uppercase; }

/* ---- DESKTOP NAV ---- */
.primary-nav { display:flex; align-items:center; flex:1; justify-content:center; min-width:0; }
.nav-list { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.nav-list li { position:relative; }
.nav-list li a,.nav-list li > span { display:block; padding:8px 14px; font-size:13px; font-weight:500; color:rgba(255,255,255,.65); border-radius:var(--r-md); transition:all var(--tr); white-space:nowrap; cursor:pointer; }
.nav-list li a:hover,.nav-list li.current-menu-item > a,.nav-list li.current_page_item > a { color:#fff; background:rgba(255,255,255,.07); }
.nav-list .sub-menu { position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:var(--dark-3); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:6px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all var(--tr); box-shadow:0 16px 40px rgba(0,0,0,.4); list-style:none; z-index:100; }
.nav-list li:hover > .sub-menu,.nav-list li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-list .sub-menu li a { font-size:13px; color:rgba(255,255,255,.65); border-radius:var(--r-md); padding:9px 14px; }
.nav-list .sub-menu li a:hover { color:#fff; background:rgba(255,255,255,.06); }

/* ---- HEADER ACTIONS ---- */
.header-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-cart { position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-md); color:rgba(255,255,255,.6); transition:all var(--tr); }
.header-cart:hover { color:#fff; background:rgba(255,255,255,.07); }
.cart-count { position:absolute; top:2px; right:2px; background:var(--red); color:#fff; font-size:9px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.header-cta { display:none; flex-shrink:0; white-space:nowrap; }
@media (min-width:900px) { .header-cta { display:inline-flex; align-items:center; gap:8px; } }

/* ---- HAMBURGER ---- */
.mobile-toggle { display:none; flex-direction:column; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-md); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:background var(--tr); }
.mobile-toggle:hover { background:rgba(255,255,255,.1); }
.hamburger { display:flex; flex-direction:column; gap:5px; width:18px; }
.hamburger span { display:block; width:100%; height:1.5px; background:rgba(255,255,255,.8); border-radius:2px; transition:all var(--tr); }

/* ---- MOBILE DRAWER ---- */
.mobile-drawer { position:fixed; top:0; right:0; width:100%; max-width:340px; height:100dvh; background:var(--dark-2); z-index:800; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
.mobile-drawer.is-open { transform:translateX(0); }
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:799; opacity:0; visibility:hidden; transition:all .3s ease; pointer-events:none; }
.mobile-overlay.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
.mobile-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; }
.mobile-drawer-close { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; border:none; transition:background var(--tr); }
.mobile-drawer-close:hover { background:rgba(255,255,255,.12); }
.mobile-nav { flex:1; padding:8px 0; overflow-y:auto; }
.mobile-nav-list { list-style:none; padding:0; margin:0; }
.mobile-nav-list li a { display:block; padding:13px 24px; font-size:14px; font-weight:500; color:rgba(255,255,255,.7); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05); transition:color var(--tr); }
.mobile-nav-list li a:hover { color:#fff; }
.mobile-nav-list .sub-menu { list-style:none; padding:0; background:rgba(255,255,255,.03); }
.mobile-nav-list .sub-menu li a { padding:10px 24px 10px 36px; font-size:13px; color:rgba(255,255,255,.55); }
.mobile-nav-list .sub-menu li a:hover { color:#fff; }
.submenu-toggle { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:44px; background:none; border:none; color:rgba(255,255,255,.5); cursor:pointer; transition:color var(--tr),transform var(--tr); padding:0; }
.submenu-toggle:hover { color:#fff; }
.submenu-toggle[aria-expanded="true"] { transform:rotate(180deg); color:rgba(255,255,255,.9); }
.mobile-drawer.drawer-pos-left { right:auto; left:0; transform:translateX(-100%); }
.mobile-drawer.drawer-pos-left.is-open { transform:translateX(0); }

/* ---- SLIDE-MODE SUBMENU PANELS ---- */
.mobile-nav.slide-mode { position:relative; overflow:hidden; padding:0; }
.mob-panels { position:absolute; top:0; left:0; width:200%; height:100%; display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.mob-panels.show-sub { transform:translateX(-50%); }
.mob-panel-root { width:50%; flex-shrink:0; overflow-y:auto; padding:8px 0; }
.mob-panel-sub { width:50%; flex-shrink:0; overflow-y:auto; display:flex; flex-direction:column; background:rgba(255,255,255,.03); }
.mob-slide-header { display:flex; align-items:center; padding:12px 16px 12px 12px; border-bottom:2px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); flex-shrink:0; }
.mob-back-btn { display:flex; align-items:center; gap:6px; background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; padding:4px 8px 4px 4px; transition:color var(--tr); flex-shrink:0; }
.mob-back-btn:hover { color:#fff; }
.mob-slide-title { flex:1; text-align:center; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:rgba(255,255,255,.4); padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mob-panel-sub .sub-menu { list-style:none; padding:0; margin:0; background:none; }
.mob-panel-sub .sub-menu li a { display:block; padding:13px 24px; font-size:14px; font-weight:500; color:rgba(255,255,255,.7); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05); transition:color var(--tr); }
.mob-panel-sub .sub-menu li a:hover { color:#fff; }
.mobile-drawer-footer { padding:20px 24px; border-top:1px solid rgba(255,255,255,.07); flex-shrink:0; }

/* ---- ANNOUNCE BAR ---- */
.announce-bar { background:#0d1520; border-bottom:1px solid rgba(184,146,42,.15); padding:10px 0; text-align:center; }
.announce-inner { box-sizing:border-box; max-width:var(--container-wide); width:100%; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-size:12px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.announce-inner span { color:rgba(255,255,255,.55); font-size:12px; }
.announce-msg { display:inline-flex; align-items:flex-start; gap:8px; min-width:0; max-width:100%; }
.announce-msg .announce-dot { margin-top:5px; }
.announce-msg span:not(.announce-dot) { min-width:0; }
.announce-dot { width:6px; height:6px; min-width:6px; border-radius:50%; background:#b8922a; flex-shrink:0; display:inline-block; animation:pulse 2s ease-in-out infinite; }
.announce-sep { color:rgba(255,255,255,.2); margin:0 4px; }
.announce-inner a { color:#d4aa4a; border-bottom:1px solid rgba(184,146,42,.3); text-decoration:none; transition:color .2s; font-weight:600; }
.announce-inner a:hover { color:#fff; border-bottom-color:rgba(255,255,255,.3); }

/* ---- FOOTER ---- */
.site-footer { background:var(--dark); border-top:1px solid rgba(255,255,255,.05); }
.footer-top { padding:64px 0 48px; }
.footer-logo-text { font-family:var(--ff-display); font-size:20px; font-weight:800; color:#fff; display:block; margin-bottom:12px; }
.footer-brand-desc { font-size:13px; color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:24px; }
.fstat-num { font-family:var(--ff-display); font-size:22px; font-weight:800; color:#fff; line-height:1; }
.fstat-label { font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:1px; }
.footer-contact-list { display:flex; flex-direction:column; gap:12px; font-style:normal; }
.footer-contact-icon { flex-shrink:0; opacity:.5; margin-top:1px; }
.footer-copy { font-size:12px; color:rgba(255,255,255,.3); }
.footer-compliance { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
@media screen and (max-width:782px) { .admin-bar .site-header { top:46px; } }

/* ---- FOOTER LOGO ---- */
.footer-logo-text-link { display:flex; flex-direction:column; margin-bottom:16px; text-decoration:none; }
.footer-logo-name { font-family:var(--ff-display); font-size:20px; font-weight:800; color:#fff; }
.footer-logo-tag { font-size:10px; color:rgba(255,255,255,.35); letter-spacing:1.5px; text-transform:uppercase; }

/* ---- FOOTER GRID ---- */
.footer-brand-col .footer-brand-desc { font-size:13px; color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:22px; }
.footer-stats { display:flex; gap:22px; margin-bottom:22px; flex-wrap:wrap; }
.footer-stat { display:flex; flex-direction:column; gap:3px; }
.footer-social { display:flex; gap:8px; flex-wrap:wrap; }
.social-link { width:34px; height:34px; border-radius:var(--r-md); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:all var(--tr); }
.social-link:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.18); }
.social-wa { background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.2); color:#4ade80; }
.social-wa:hover { background:rgba(37,211,102,.22); color:#86efac; }

/* ---- FOOTER NAV ---- */
.footer-nav-col {}
.footer-col-title { font-family:var(--ff-display); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.35); margin-bottom:18px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0; }
.footer-links li a { font-size:13px; color:rgba(255,255,255,.5); transition:color var(--tr); display:flex; align-items:center; gap:6px; }
.footer-links li a::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--red); flex-shrink:0; opacity:0; transition:opacity var(--tr); }
.footer-links li a:hover { color:#fff; }
.footer-links li a:hover::before { opacity:1; }

/* ---- FOOTER CONTACT ---- */
.footer-contact-col {}
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(255,255,255,.5); line-height:1.5; }
.footer-whatsapp-cta { margin-top:6px; }
.footer-wa-btn { display:inline-flex; align-items:center; gap:8px; background:rgba(37,211,102,.15); border:1px solid rgba(37,211,102,.25); color:#4ade80; padding:9px 16px; border-radius:var(--r-md); font-size:13px; font-weight:600; transition:all var(--tr); }
.footer-wa-btn:hover { background:rgba(37,211,102,.25); color:#86efac; }

/* ---- FOOTER BOTTOM ---- */
.compliance-badge { display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.35); font-weight:500; }
.compliance-badge svg { color:var(--green); }

/* ---- FOOTER LOGO (current) ---- */
.footer-logo-wrap { display:block; width:100%; margin:0 auto 10px; text-align:center; line-height:0; }
.footer-logo-wrap a { display:block; line-height:0; }
.footer-logo-img { height:150px; max-height:150px; width:auto; max-width:100%; display:block; object-fit:contain; margin:0 auto; }
.footer-top-inner { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:48px; align-items:start; max-width:var(--container-wide); margin:0 auto; padding:0 var(--gap); }
.footer-bottom-inner { max-width:var(--container-wide); margin:0 auto; padding:0 var(--gap); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---- FOOTER CONTACT — WhatsApp/phone ---- */
.footer-contact-item--wa { align-items:center; }
.footer-contact-icon--wa { color:#25d366; opacity:1; flex-shrink:0; margin-top:0; }
.footer-contact-wa-link { color:#4ade80; font-size:13px; font-weight:600; transition:color var(--tr); text-decoration:none; }
.footer-contact-wa-link:hover { color:#86efac; }
.footer-contact-item a { color:rgba(255,255,255,.5); transition:color var(--tr); text-decoration:none; }
.footer-contact-item a:hover { color:#fff; }

/* ---- SHELL RESPONSIVE (canonical mobile header/logo/nav behavior) ---- */
@media (max-width:1024px) {
  .footer-top-inner { grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:900px) {
  .mobile-toggle { display:flex; }
  .primary-nav { display:none; }
  .hstrip-left { display:none; }
  .hstrip-right { width:100%; justify-content:flex-end; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
  /* Canonical mobile logo size — matches the homepage's proven behavior */
  .site-logo { flex-shrink:1; min-width:0; }
  .site-logo img,.site-logo .custom-logo { height:90px; width:auto; max-width:100%; }
  .mobile-nav-list li.menu-item-has-children { display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid rgba(255,255,255,.05); }
  .mobile-nav-list li.menu-item-has-children > a { flex:1; border-bottom:none; }
  .mobile-nav-list li.menu-item-has-children > .sub-menu { flex-basis:100%; max-height:0; overflow:hidden; }
  .mobile-nav-list li.menu-item-has-children > .sub-menu.is-open { max-height:400px; }
}
@media (min-width:641px) {
  /* Canonical tablet/desktop behavior: the phone link stays visible here
     regardless of any legacy per-page inline rule that hides it up to
     900px — this file loads last and wins that same-specificity tie. */
  .hstrip-phone { display:flex; }
}
@media (max-width:640px) {
  .hstrip-inner { padding:0 var(--gap); }
  .hstrip-right { justify-content:center; }
  /* Canonical mobile behavior: hide the phone link only — it wraps/breaks
     on narrow screens; email and WhatsApp stay visible. */
  .hstrip-phone { display:none; }
  /* Explicit px, not var(--header-h): some legacy captured pages redeclare
     --header-h:122px a second time after their own per-page override, which
     would otherwise win the custom-property cascade tie on those pages. */
  .site-header { height:74px; }
  .site-logo img,.site-logo .custom-logo { height:56px; }
  .footer-top-inner { grid-template-columns:1fr; gap:28px; }
  .footer-logo-img { max-width:140px; }
  .footer-bottom-inner { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ---- PRINT ---- */
@media print {
  .site-header,.header-strip,.site-footer,.mobile-toggle { display:none !important; }
}